Skip to content

Commit 6206107

Browse files
committed
update README
1 parent 46b4c29 commit 6206107

File tree

1 file changed

+31
-15
lines changed

1 file changed

+31
-15
lines changed

README.md

+31-15
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,32 @@
22

33
## Overview
44

5-
Single page demonstration on running machine learning NLP models in the browser with transformers.js.
5+
This repository contains several demonstrations of running machine learning NLP models directly in the browser using transformers.js.
66

7-
### 1. Comparison Matrix
7+
### 1. Embeddings
88

9-
Visualizes the cosine similarity between sentences and p5.js for rendering a matrix.
9+
Embeds sentences using `Xenova/all-MiniLM-L6-v2` and visualizes the results in two different contexts:
1010

11-
- Feature Extraction (embeddings): Xenova/all-MiniLM-L6-v2
11+
- **Comparison Matrix**: Visualizes the cosine similarity between different sentences using p5.js to render a matrix.
12+
- **Clustering**: Plots sentence embeddings in a two-dimensional space with umap-js for dimensionality reduction.
1213

13-
### 2. Clustering
14+
- Feature Extraction (embeddings): `Xenova/all-MiniLM-L6-v2`
1415

15-
Embeds sentences using `Xenova/all-MiniLM-L6-v2` and plots them in a two-dimensional space with umap-js dimensionality reduction.
16+
### 2. Language Models
1617

17-
- Feature Extraction (embeddings): Xenova/all-MiniLM-L6-v2
18+
A set of demos using language models to generate or complete text interactively in the browser.
1819

19-
### 3. Other Model Demos
20+
- **Chatbot Demo**: Implements a simple chatbot using `onnx-community/Qwen2.5-0.5B-Instruct`.
21+
- **Text Generation**: Generate text using various models including `onnx-community/Llama-3.2-1B-Instruct-q4f16` and `HuggingFaceTB/SmolLM-135M`.
2022

21-
A few demos using other models from transformers.js.
23+
### 3. Vision Models
2224

23-
- Summarization: Xenova/distilbart-cnn-6-6
24-
- Text Generation: Xenova/LaMini-Flan-T5-783M
25-
- Text Classification: Xenova/toxic-bert
25+
- **Depth Estimation**: Estimates depth from an image using `onnx-community/depth-anything-v2-small` and visualizes it using p5.js.
26+
- **Object Detection**: Detects objects in images and video in real-time using `Xenova/detr-resnet-50` with p5.js for visualization.
27+
28+
### 4. Whisper
29+
30+
Implements a real-time audio transcription system using `Xenova/whisper-tiny.en`.
2631

2732
### Example Code
2833

@@ -57,11 +62,22 @@ For further information and a comprehensive list of supported tasks and models,
5762

5863
The [Transformers.js Model Hub](https://huggingface.co/models?library=transformers.js) lists models compatible with the library, searchable by tasks.
5964

60-
## p5.js Integration and Instance Mode
65+
## p5.js Integration and Usage
66+
67+
To integrate transformers.js with p5.js, instance mode can be used to enable compatibility with ES6 import statements required by transformers.js. However, dynamic import statements can also be used directly with p5.js as follows.
6168

62-
To integrate transformers.js with p5.js, instance mode is required to enable compatibility with ES6 import statements required by transformers.js.
69+
### Example of Loading Transformers.js
6370

64-
[Learn more about p5.js instance mode in this wiki](https://github.com/processing/p5.js/wiki/Global-and-instance-mode) or [instance mode video tutorial](https://youtu.be/Su792jEauZg).
71+
```javascript
72+
// Function to load transformers.js dynamically
73+
async function loadTransformers() {
74+
console.log('Loading transformers.js...');
75+
const module = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers');
76+
const { pipeline } = module;
77+
console.log('Transformers.js loaded successfully.');
78+
return pipeline;
79+
}
80+
```
6581

6682
## What is UMAP?
6783

0 commit comments

Comments
 (0)