Hugging Face's logo

Spaces:
boazchung
/
hfjsdemo
Running

App Files Community
boazchung commited on
Commit
d8d37b0
•
1 Parent(s): fb44f9a

Upload 25 files

Browse files
Files changed (26) hide show
  1. .gitattributes +2 -0
  2. asr-english.html +222 -0
  3. asr-non-english.html +163 -0
  4. audio-classification.html +138 -0
  5. audio/french-audio.mp3 +0 -0
  6. audio/jfk.wav +3 -0
  7. audio/ted_60.wav +3 -0
  8. css/styles.css +94 -0
  9. fill-mask.html +128 -0
  10. image-classification.html +163 -0
  11. image-to-text.html +135 -0
  12. images/cats.jpg +0 -0
  13. images/logo.png +0 -0
  14. images/tiger.jpg +0 -0
  15. index.html +211 -0
  16. object-detection.html +137 -0
  17. question-answering.html +139 -0
  18. sentiments.html +224 -0
  19. summarization.html +122 -0
  20. text-generation.html +164 -0
  21. text-to-text-generation.html +140 -0
  22. token-classification.html +127 -0
  23. translation-tok-model.html +115 -0
  24. translation.html +136 -0
  25. zero-shot-classification.html +141 -0
  26. zeroshotimageclassification.html +153 -0
.gitattributes CHANGED
@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
 
 
 
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
+ audio/jfk.wav filter=lfs diff=lfs merge=lfs -text
37
+ audio/ted_60.wav filter=lfs diff=lfs merge=lfs -text
asr-english.html ADDED
@@ -0,0 +1,222 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Automatic Speech Recognition - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Audio</h2>
50
+ <h4>Automatic Speech Recognition - English</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="transcribe-english-container" class="container mt-4">
55
+ <h5>Transcribe English:</h5>
56
+ <div class="d-flex align-items-center">
57
+ <label for="transcribeEnglishURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
58
+ audio URL:</label>
59
+ <input type="text" class="form-control flex-grow-1" id="transcribeEnglishURLText"
60
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav"
61
+ placeholder="Enter audio" style="margin-right: 15px; margin-left: 15px;">
62
+ <button id="TranscribeEnglishButton" class="btn btn-primary"
63
+ onclick="transcribeEnglish()">Transcribe</button>
64
+ </div>
65
+ <div class="mt-4">
66
+ <h4>Output:</h4>
67
+ <pre id="outputArea"></pre>
68
+ </div>
69
+ </div>
70
+
71
+ <hr> <!-- Line Separator -->
72
+
73
+ <div id="transcribe-english-local-container" class="container mt-4">
74
+ <h5>Transcribe English a Local File:</h5>
75
+ <div class="d-flex align-items-center">
76
+ <label for="transcribeEnglishLocalFile" class="mb-0 text-nowrap" style="margin-right: 15px;">Select
77
+ Local Audio:</label>
78
+ <input type="file" id="transcribeEnglishLocalFile" accept="audio/*" />
79
+ <button id="TranscribeEnglishButtonLocal" class="btn btn-primary"
80
+ onclick="transcribeEnglishLocal()">Transcribe</button>
81
+ </div>
82
+ <div class="mt-4">
83
+ <h4>Output:</h4>
84
+ <pre id="outputAreaLocal"></pre>
85
+ </div>
86
+ </div>
87
+
88
+ <hr> <!-- Line Separator -->
89
+
90
+ <div id="transcribe-english-timestamps-container" class="container mt-4">
91
+ <h5>Transcribe English with Timestamps:</h5>
92
+ <div class="d-flex align-items-center">
93
+ <label for="transcribeEnglishTimestampsURLText" class="mb-0 text-nowrap"
94
+ style="margin-right: 15px;">Enter
95
+ audio URL:</label>
96
+ <input type="text" class="form-control flex-grow-1" id="transcribeEnglishTimestampsURLText"
97
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav"
98
+ placeholder="Enter audio" style="margin-right: 15px; margin-left: 15px;">
99
+ <button id="TranscribeEnglishTimestampsButton" class="btn btn-primary"
100
+ onclick="transcribeEnglishTimestamps()">Transcribe</button>
101
+ </div>
102
+ <div class="mt-4">
103
+ <h4>Output:</h4>
104
+ <pre id="outputAreaTimestamps"></pre>
105
+ </div>
106
+ </div>
107
+
108
+ <hr> <!-- Line Separator -->
109
+
110
+ <div id="transcribe-english-word-level-timestamps-container" class="container mt-4">
111
+ <h5>Transcribe English with Word-level Timestamps:</h5>
112
+ <div class="d-flex align-items-center">
113
+ <label for="transcribeEnglishWordlevelTimestampsURLText" class="mb-0 text-nowrap"
114
+ style="margin-right: 15px;">Enter
115
+ audio URL:</label>
116
+ <input type="text" class="form-control flex-grow-1" id="transcribeEnglishWordlevelTimestampsURLText"
117
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav"
118
+ placeholder="Enter audio" style="margin-right: 15px; margin-left: 15px;">
119
+ <button id="TranscribeEnglishWord-levelTimestampsButton" class="btn btn-primary"
120
+ onclick="transcribeEnglishWordlevelTimestamps()">Transcribe</button>
121
+ </div>
122
+ <div class="mt-4">
123
+ <h4>Output:</h4>
124
+ <pre id="outputAreaWordlevelTimestamps"></pre>
125
+ </div>
126
+ </div>
127
+
128
+ <hr> <!-- Line Separator -->
129
+
130
+ <div id="transcribe-english-30-container" class="container mt-4">
131
+ <h5>Transcribe/Translate Audio Longer Than 30 Seconds:</h5>
132
+ <div class="d-flex align-items-center">
133
+ <label for="transcribeEnglish30URLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
134
+ audio URL:</label>
135
+ <input type="text" class="form-control flex-grow-1" id="transcribeEnglish30URLText"
136
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/ted_60.wav"
137
+ placeholder="Enter audio" style="margin-right: 15px; margin-left: 15px;">
138
+ <button id="TranscribeEnglish30Button" class="btn btn-primary"
139
+ onclick="transcribeEnglish30()">Transcribe</button>
140
+ </div>
141
+ <div class="mt-4">
142
+ <h4>Output:</h4>
143
+ <pre id="outputArea30"></pre>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Back to Home button -->
148
+ <div class="row mt-5">
149
+ <div class="col-md-12 text-center">
150
+ <a href="index.html" class="btn btn-outline-secondary"
151
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <script>
158
+
159
+ let transcriber;
160
+
161
+ // Initialize the sentiment analysis model
162
+ async function initializeModel() {
163
+ transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en');
164
+
165
+ }
166
+
167
+ async function transcribeEnglish() {
168
+ const textFieldValue = document.getElementById("transcribeEnglishURLText").value.trim();
169
+
170
+ let result = await transcriber(textFieldValue);
171
+
172
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
173
+ }
174
+
175
+ async function transcribeEnglishLocal() {
176
+ const fileInput = document.getElementById("transcribeEnglishLocalFile");
177
+ const file = fileInput.files[0];
178
+
179
+ if (!file) {
180
+ alert('Please select an audio file first.');
181
+ return;
182
+ }
183
+
184
+ // Create a Blob URL from the file
185
+ const url = URL.createObjectURL(file);
186
+
187
+ let result = await transcriber(url);
188
+
189
+ document.getElementById("outputAreaLocal").innerText = JSON.stringify(result, null, 2);
190
+ }
191
+
192
+ async function transcribeEnglishTimestamps() {
193
+ const textFieldValue = document.getElementById("transcribeEnglishTimestampsURLText").value.trim();
194
+
195
+ let result = await transcriber(textFieldValue, { return_timestamps: true });
196
+
197
+ document.getElementById("outputAreaTimestamps").innerText = JSON.stringify(result, null, 2);
198
+ }
199
+
200
+ async function transcribeEnglishWordlevelTimestamps() {
201
+ const textFieldValue = document.getElementById("transcribeEnglishWordlevelTimestampsURLText").value.trim();
202
+
203
+ let result = await transcriber(textFieldValue, { return_timestamps: 'word' });
204
+
205
+ document.getElementById("outputAreaWordlevelTimestamps").innerText = JSON.stringify(result, null, 2);
206
+ }
207
+
208
+
209
+ async function transcribeEnglish30() {
210
+ const textFieldValue = document.getElementById("transcribeEnglish30URLText").value.trim();
211
+
212
+ let result = await transcriber(textFieldValue, { chunk_length_s: 30, stride_length_s: 5 });
213
+
214
+ document.getElementById("outputArea30").innerText = JSON.stringify(result, null, 2);
215
+ }
216
+
217
+ // Initialize the model after the DOM is completely loaded
218
+ window.addEventListener("DOMContentLoaded", initializeModel);
219
+ </script>
220
+ </body>
221
+
222
+ </html>
asr-non-english.html ADDED
@@ -0,0 +1,163 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Automatic Speech Recognition - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Audio</h2>
50
+ <h4>Automatic Speech Recognition - French</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="transcribe-non-english-container" class="container mt-4">
55
+ <h5>Transcribe French:</h5>
56
+ <div class="d-flex align-items-center">
57
+ <label for="transcribeNonEnglishURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
58
+ audio URL:</label>
59
+ <input type="text" class="form-control flex-grow-1" id="transcribeNonEnglishURLText"
60
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/french-audio.mp3"
61
+ placeholder="Enter audio" style="margin-right: 15px; margin-left: 15px;">
62
+ <button id="TranscribeNonEnglishButton" class="btn btn-primary" onclick="transcribeNonEnglish()">Transcribe</button>
63
+ </div>
64
+ <div class="mt-4">
65
+ <h4>Output:</h4>
66
+ <pre id="outputArea"></pre>
67
+ </div>
68
+ </div>
69
+
70
+ <hr> <!-- Line Separator -->
71
+
72
+ <div id="transcribe-non-english-local-container" class="container mt-4">
73
+ <h5>Transcribe French a Local File:</h5>
74
+ <div class="d-flex align-items-center">
75
+ <label for="transcribeNonEnglishLocalFile" class="mb-0 text-nowrap"
76
+ style="margin-right: 15px;">Select Local Audio:</label>
77
+ <input type="file" id="transcribeNonEnglishLocalFile" accept="audio/*" />
78
+ <button id="TranscribeNonEnglishButtonLocal" class="btn btn-primary"
79
+ onclick="transcribeNonEnglishLocal()">Transcribe</button>
80
+ </div>
81
+ <div class="mt-4">
82
+ <h4>Output:</h4>
83
+ <pre id="outputAreaLocal"></pre>
84
+ </div>
85
+ </div>
86
+
87
+ <hr> <!-- Line Separator -->
88
+
89
+ <div id="transcribe-to-english-container" class="container mt-4">
90
+ <h5>Translate French to English:</h5>
91
+ <div class="d-flex align-items-center">
92
+ <label for="transcribeToEnglishURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
93
+ audio URL:</label>
94
+ <input type="text" class="form-control flex-grow-1" id="transcribeToEnglishURLText"
95
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/french-audio.mp3"
96
+ placeholder="Enter audio" style="margin-right: 15px; margin-left: 15px;">
97
+ <button id="TranscribeToEnglishButton" class="btn btn-primary" onclick="transcribeToEnglish()">Transcribe</button>
98
+ </div>
99
+ <div class="mt-4">
100
+ <h4>Output:</h4>
101
+ <pre id="outputAreaToEnglish"></pre>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Back to Home button -->
106
+ <div class="row mt-5">
107
+ <div class="col-md-12 text-center">
108
+ <a href="index.html" class="btn btn-outline-secondary"
109
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <script>
116
+
117
+ let transcriber;
118
+
119
+ // Initialize the sentiment analysis model
120
+ async function initializeModel() {
121
+ transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-small');
122
+
123
+ }
124
+
125
+ async function transcribeNonEnglish() {
126
+ const textFieldValue = document.getElementById("transcribeNonEnglishURLText").value.trim();
127
+
128
+ let result = await transcriber(textFieldValue, { language: 'french', task: 'transcribe' })
129
+
130
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
131
+ }
132
+
133
+ async function transcribeNonEnglishLocal() {
134
+ const fileInput = document.getElementById("transcribeNonEnglishLocalFile");
135
+ const file = fileInput.files[0];
136
+
137
+ if (!file) {
138
+ alert('Please select an audio file first.');
139
+ return;
140
+ }
141
+
142
+ // Create a Blob URL from the file
143
+ const url = URL.createObjectURL(file);
144
+
145
+ let result = await transcriber(url, { language: 'french', task: 'transcribe' })
146
+
147
+ document.getElementById("outputAreaLocal").innerText = JSON.stringify(result, null, 2);
148
+ }
149
+
150
+ async function transcribeToEnglish() {
151
+ const textFieldValue = document.getElementById("transcribeToEnglishURLText").value.trim();
152
+
153
+ let result = await transcriber(textFieldValue, { language: 'french', task: 'translate' })
154
+
155
+ document.getElementById("outputAreaToEnglish").innerText = JSON.stringify(result, null, 2);
156
+ }
157
+
158
+ // Initialize the model after the DOM is completely loaded
159
+ window.addEventListener("DOMContentLoaded", initializeModel);
160
+ </script>
161
+ </body>
162
+
163
+ </html>
audio-classification.html ADDED
@@ -0,0 +1,138 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Audio Classification - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Audio</h2>
50
+ <h4>Audio Classification</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="audio-classification-container" class="container mt-4">
55
+ <h5>Perform Audio Classification:</h5>
56
+ <div class="d-flex align-items-center">
57
+ <label for="audioClassificationURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
58
+ audio URL:</label>
59
+ <input type="text" class="form-control flex-grow-1" id="audioClassificationURLText"
60
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav"
61
+ placeholder="Enter audio" style="margin-right: 15px; margin-left: 15px;">
62
+ <button id="AudioClassificationButton" class="btn btn-primary"
63
+ onclick="audioClassification()">Classify</button>
64
+ </div>
65
+ <div class="mt-4">
66
+ <h4>Output:</h4>
67
+ <pre id="outputArea"></pre>
68
+ </div>
69
+ </div>
70
+
71
+ <hr> <!-- Line Separator -->
72
+
73
+ <div id="audio-classification-local-container" class="container mt-4">
74
+ <h5>Perform Audio Classification on a Local File:</h5>
75
+ <div class="d-flex align-items-center">
76
+ <label for="audioClassificationLocalFile" class="mb-0 text-nowrap" style="margin-right: 15px;">Select
77
+ Local Audio:</label>
78
+ <input type="file" id="audioClassificationLocalFile" accept="audio/*" />
79
+ <button id="audioClassificationButtonLocal" class="btn btn-primary"
80
+ onclick="audioClassificationLocal()">Classify</button>
81
+ </div>
82
+ <div class="mt-4">
83
+ <h4>Output:</h4>
84
+ <pre id="outputAreaLocal"></pre>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- Back to Home button -->
89
+ <div class="row mt-5">
90
+ <div class="col-md-12 text-center">
91
+ <a href="index.html" class="btn btn-outline-secondary"
92
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <script>
99
+
100
+ let classifier;
101
+
102
+ // Initialize the sentiment analysis model
103
+ async function initializeModel() {
104
+ classifier = await pipeline('audio-classification', 'Xenova/wav2vec2-large-xlsr-53-gender-recognition-librispeech');
105
+
106
+ }
107
+
108
+ async function audioClassification() {
109
+ const textFieldValue = document.getElementById("audioClassificationURLText").value.trim();
110
+
111
+ let result = await classifier(textFieldValue);
112
+
113
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
114
+ }
115
+
116
+ async function audioClassificationLocal() {
117
+ const fileInput = document.getElementById("audioClassificationLocalFile");
118
+ const file = fileInput.files[0];
119
+
120
+ if (!file) {
121
+ alert('Please select an audio file first.');
122
+ return;
123
+ }
124
+
125
+ // Create a Blob URL from the file
126
+ const url = URL.createObjectURL(file);
127
+
128
+ let result = await classifier(url);
129
+
130
+ document.getElementById("outputAreaLocal").innerText = JSON.stringify(result, null, 2);
131
+ }
132
+
133
+ // Initialize the model after the DOM is completely loaded
134
+ window.addEventListener("DOMContentLoaded", initializeModel);
135
+ </script>
136
+ </body>
137
+
138
+ </html>
audio/french-audio.mp3 ADDED
Binary file (99.9 kB). View file
 
audio/jfk.wav ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:aa81c2552465568567e670f3823117e633900d16bd6202346a72f3c8464c74c8
3
+ size 1940478
audio/ted_60.wav ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:7795cbebcdf651ebbe4b1d8f36d7cde2286d482b800670c70bf7ce449c9f1ed5
3
+ size 11520078
css/styles.css ADDED
@@ -0,0 +1,94 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ background-color: lightgrey;
3
+ }
4
+
5
+ .container-main {
6
+ background-color: darkgrey;
7
+ padding: 20px;
8
+ margin: 25px auto;
9
+ width: 80%;
10
+ /* Changed from 90% to 80% */
11
+ border-radius: 10px;
12
+ /* Rounded Corners */
13
+ border: 2px solid #3c650b;
14
+ /* Add a border with a shade of blue */
15
+ }
16
+
17
+ hr {
18
+ border-top: 1px solid #3c650b;
19
+ /* Change the <hr> line color to a shade of blue */
20
+ }
21
+
22
+ .header-logo,
23
+ .header-main-text,
24
+ .header-sub-text {
25
+ text-align: center;
26
+ }
27
+
28
+ .header-main-text h1,
29
+ .header-sub-text h3 {
30
+ color: #3c650b;
31
+ /* Green color */
32
+ }
33
+
34
+ h2 {
35
+ font-size: 1.4rem;
36
+ /* Makes the text smaller */
37
+ color: #3c650b;
38
+ /* Sets the text color to a shade of blue */
39
+ }
40
+
41
+
42
+ h4 {
43
+ font-size: 1.2rem;
44
+ /* Adjust font size */
45
+ color: #3c650b;
46
+ /* Set the text color to a shade of green */
47
+ margin-top: 10px;
48
+ /* Add some margin to separate from h2 */
49
+ font-weight: 400;
50
+ /* Adjust the font weight */
51
+ }
52
+
53
+ .card {
54
+ border: 2px solid #3c650b;
55
+ /* Change the border color to #3c650b */
56
+ }
57
+
58
+ .card-title {
59
+ color: #3c650b;
60
+ /* Change the title color to #3c650b */
61
+ }
62
+
63
+ .card-body {
64
+ text-align: center;
65
+ display: flex;
66
+ /* Added flexbox layout */
67
+ flex-direction: column;
68
+ /* Direction */
69
+ justify-content: center;
70
+ /* Vertical centering */
71
+ }
72
+
73
+ .row {
74
+ margin-bottom: 15px;
75
+ /* Margin between rows */
76
+ }
77
+
78
+ .col-md-3 {
79
+ padding: 5px;
80
+ /* Margin between cards */
81
+ }
82
+
83
+ .card-custom-height {
84
+ height: 75px;
85
+ display: flex;
86
+ flex-direction: column;
87
+ justify-content: space-between;
88
+ }
89
+
90
+ .card-body {
91
+ padding: 10px;
92
+ /* Reduced padding to make more cards visible */
93
+ text-align: center;
94
+ }
fill-mask.html ADDED
@@ -0,0 +1,128 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Fill Mask - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Natural Language Processing</h2>
50
+ <h4>Fill Mask</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="fill-mask-container" class="container mt-4">
55
+ <h5>Unmask with bert-base-uncased:</h5>
56
+ <div class="d-flex align-items-center">
57
+ <label for="fillMaskText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text with
58
+ Mask:</label>
59
+ <input type="text" class="form-control flex-grow-1" id="fillMaskText" value="The goal of life is [MASK]."
60
+ placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
61
+ <button id="fillMaskButton" class="btn btn-primary" onclick="fillMask()">Unmask</button>
62
+ </div>
63
+ <div class="mt-4">
64
+ <h4>Output:</h4>
65
+ <pre id="outputArea"></pre>
66
+ </div>
67
+ </div>
68
+
69
+ <hr> <!-- Line Separator -->
70
+
71
+ <div id="fill-mask-container2" class="container mt-4">
72
+ <h5>Unmask with bert-base-cased (Return Top Result):</h5>
73
+ <div class="d-flex align-items-center">
74
+ <label for="fillMaskText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text with
75
+ Mask:</label>
76
+ <input type="text" class="form-control flex-grow-1" id="fillMaskText2" value="The Milky Way is a [MASK] galaxy"
77
+ placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
78
+ <button id="fillMaskButton2" class="btn btn-primary" onclick="fillMaskTopResult()">Unmask</button>
79
+ </div>
80
+ <div class="mt-4">
81
+ <h4>Output:</h4>
82
+ <pre id="outputArea2"></pre>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Back to Home button -->
87
+ <div class="row mt-5">
88
+ <div class="col-md-12 text-center">
89
+ <a href="index.html" class="btn btn-outline-secondary"
90
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <script>
97
+
98
+ let unmaskeruncased;
99
+ let unmaskerncased;
100
+
101
+ // Initialize the sentiment analysis model
102
+ async function initializeModel() {
103
+ unmaskeruncased = await pipeline('fill-mask', 'Xenova/bert-base-uncased');
104
+ unmaskerncased = await pipeline('fill-mask', 'Xenova/bert-base-cased');
105
+ }
106
+
107
+ async function fillMask() {
108
+ const textFieldValue = document.getElementById("fillMaskText").value.trim();
109
+
110
+ const result = await unmaskeruncased(textFieldValue);
111
+
112
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
113
+ }
114
+
115
+ async function fillMaskTopResult() {
116
+ const textFieldValue = document.getElementById("fillMaskText2").value.trim();
117
+
118
+ const result = await unmaskerncased(textFieldValue, { topk: 1 });
119
+
120
+ document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
121
+ }
122
+
123
+ // Initialize the model after the DOM is completely loaded
124
+ window.addEventListener("DOMContentLoaded", initializeModel);
125
+ </script>
126
+ </body>
127
+
128
+ </html>
image-classification.html ADDED
@@ -0,0 +1,163 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Image Classification - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Computer Vision</h2>
50
+ <h4>Image Classification</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="image-classification-container" class="container mt-4">
55
+ <h5>Classify an Image:</h5>
56
+ <div class="d-flex align-items-center">
57
+ <label for="imageClassificationURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
58
+ image URL:</label>
59
+ <input type="text" class="form-control flex-grow-1" id="imageClassificationURLText"
60
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg"
61
+ placeholder="Enter image" style="margin-right: 15px; margin-left: 15px;">
62
+ <button id="ClassifyButton" class="btn btn-primary" onclick="classifyImage()">Classify</button>
63
+ </div>
64
+ <div class="mt-4">
65
+ <h4>Output:</h4>
66
+ <pre id="outputArea"></pre>
67
+ </div>
68
+ </div>
69
+
70
+ <hr> <!-- Line Separator -->
71
+
72
+ <div id="image-classification-local-container" class="container mt-4">
73
+ <h5>Classify a Local Image:</h5>
74
+ <div class="d-flex align-items-center">
75
+ <label for="imageClassificationLocalFile" class="mb-0 text-nowrap"
76
+ style="margin-right: 15px;">Select Local Image:</label>
77
+ <input type="file" id="imageClassificationLocalFile" accept="image/*" />
78
+ <button id="ClassifyButtonLocal" class="btn btn-primary"
79
+ onclick="classifyImageLocal()">Classify</button>
80
+ </div>
81
+ <div class="mt-4">
82
+ <h4>Output:</h4>
83
+ <pre id="outputAreaLocal"></pre>
84
+ </div>
85
+ </div>
86
+
87
+ <hr> <!-- Line Separator -->
88
+
89
+ <div id="image-classification-top-container" class="container mt-4">
90
+ <h5>Classify an Image and Return Top n Classes:</h5>
91
+ <div class="d-flex align-items-center">
92
+ <label for="imageClassificationTopURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
93
+ image URL:</label>
94
+ <input type="text" class="form-control flex-grow-1" id="imageClassificationTopURLText"
95
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg"
96
+ placeholder="Enter image" style="margin-right: 15px; margin-left: 15px;">
97
+ <button id="ClassifyTopButton" class="btn btn-primary" onclick="classifyTopImage()">Classify</button>
98
+ </div>
99
+ <div class="mt-4">
100
+ <h4>Output:</h4>
101
+ <pre id="outputAreaTop"></pre>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Back to Home button -->
106
+ <div class="row mt-5">
107
+ <div class="col-md-12 text-center">
108
+ <a href="index.html" class="btn btn-outline-secondary"
109
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <script>
116
+
117
+ let classifier;
118
+
119
+ // Initialize the sentiment analysis model
120
+ async function initializeModel() {
121
+ classifier = await pipeline('image-classification', 'Xenova/vit-base-patch16-224');
122
+
123
+ }
124
+
125
+ async function classifyImage() {
126
+ const textFieldValue = document.getElementById("imageClassificationURLText").value.trim();
127
+
128
+ const result = await classifier(textFieldValue);
129
+
130
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
131
+ }
132
+
133
+ async function classifyImageLocal() {
134
+ const fileInput = document.getElementById("imageClassificationLocalFile");
135
+ const file = fileInput.files[0];
136
+
137
+ if (!file) {
138
+ alert('Please select an image file first.');
139
+ return;
140
+ }
141
+
142
+ // Create a Blob URL from the file
143
+ const url = URL.createObjectURL(file);
144
+
145
+ const result = await classifier(url);
146
+
147
+ document.getElementById("outputAreaLocal").innerText = JSON.stringify(result, null, 2);
148
+ }
149
+
150
+ async function classifyTopImage() {
151
+ const textFieldValue = document.getElementById("imageClassificationTopURLText").value.trim();
152
+
153
+ const result = await classifier(textFieldValue, { topk: 3 });
154
+
155
+ document.getElementById("outputAreaTop").innerText = JSON.stringify(result, null, 2);
156
+ }
157
+
158
+ // Initialize the model after the DOM is completely loaded
159
+ window.addEventListener("DOMContentLoaded", initializeModel);
160
+ </script>
161
+ </body>
162
+
163
+ </html>
image-to-text.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Image to Text - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css"></head>
19
+ <body>
20
+ <div class="container-main">
21
+ <!-- Page Header -->
22
+ <div class="header">
23
+ <div class="header-logo">
24
+ <img src="images/logo.png" alt="logo">
25
+ </div>
26
+ <div class="header-main-text">
27
+ <h1>Hugging Face Transformers.js</h1>
28
+ </div>
29
+ <div class="header-sub-text">
30
+ <h3>Free AI Models for JavaScript Web Development</h3>
31
+ </div>
32
+ </div>
33
+ <hr> <!-- Separator -->
34
+
35
+ <!-- Back to Home button -->
36
+ <div class="row mt-5">
37
+ <div class="col-md-12 text-center">
38
+ <a href="index.html" class="btn btn-outline-secondary"
39
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
40
+ </div>
41
+ </div>
42
+
43
+ <!-- Content -->
44
+ <div class="container mt-5">
45
+ <!-- Centered Titles -->
46
+ <div class="text-center">
47
+ <h2>Computer Vision</h2>
48
+ <h4>Image to Text</h4>
49
+ </div>
50
+
51
+ <!-- Actual Content of this page -->
52
+ <div id="image-to-text-container" class="container mt-4">
53
+ <h5>Generate a Caption for an Image w/ Xenova/vit-gpt2-image-captionin:</h5>
54
+ <div class="d-flex align-items-center">
55
+ <label for="imageToTextURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
56
+ image to Caption URL:</label>
57
+ <input type="text" class="form-control flex-grow-1" id="imageToTextURLText"
58
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/cats.jpg"
59
+ placeholder="Enter image" style="margin-right: 15px; margin-left: 15px;">
60
+ <button id="ImagetoTextButton" class="btn btn-primary" onclick="captionImage()">Caption</button>
61
+ </div>
62
+ <div class="mt-4">
63
+ <h4>Output:</h4>
64
+ <pre id="outputArea"></pre>
65
+ </div>
66
+ </div>
67
+
68
+ <hr> <!-- Line Separator -->
69
+
70
+ <div id="image-to-text-local-container" class="container mt-4">
71
+ <h5>Generate a Caption for a Local Image:</h5>
72
+ <div class="d-flex align-items-center">
73
+ <label for="imagetoTextLocalFile" class="mb-0 text-nowrap"
74
+ style="margin-right: 15px;">Select Local Image:</label>
75
+ <input type="file" id="imagetoTextLocalFile" accept="image/*" />
76
+ <button id="CaptionButtonLocal" class="btn btn-primary"
77
+ onclick="captionImageLocal()">Caption</button>
78
+ </div>
79
+ <div class="mt-4">
80
+ <h4>Output:</h4>
81
+ <pre id="outputAreaLocal"></pre>
82
+ </div>
83
+ </div>
84
+
85
+ <!-- Back to Home button -->
86
+ <div class="row mt-5">
87
+ <div class="col-md-12 text-center">
88
+ <a href="index.html" class="btn btn-outline-secondary"
89
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <script>
96
+
97
+ let captioner;
98
+
99
+ // Initialize the sentiment analysis model
100
+ async function initializeModel() {
101
+ captioner = await pipeline('image-to-text', 'Xenova/vit-gpt2-image-captioning');
102
+
103
+ }
104
+
105
+ async function captionImage() {
106
+ const textFieldValue = document.getElementById("imageToTextURLText").value.trim();
107
+
108
+ const result = await captioner(textFieldValue);
109
+
110
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
111
+ }
112
+
113
+ async function captionImageLocal() {
114
+ const fileInput = document.getElementById("imagetoTextLocalFile");
115
+ const file = fileInput.files[0];
116
+
117
+ if (!file) {
118
+ alert('Please select an image file first.');
119
+ return;
120
+ }
121
+
122
+ // Create a Blob URL from the file
123
+ const url = URL.createObjectURL(file);
124
+
125
+ const result = await captioner(url);
126
+
127
+ document.getElementById("outputAreaLocal").innerText = JSON.stringify(result, null, 2);
128
+ }
129
+
130
+ // Initialize the model after the DOM is completely loaded
131
+ window.addEventListener("DOMContentLoaded", initializeModel);
132
+ </script>
133
+ </body>
134
+
135
+ </html>
images/cats.jpg ADDED
images/logo.png ADDED
images/tiger.jpg ADDED
index.html ADDED
@@ -0,0 +1,211 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Hugging Face Transformers.js</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+
9
+ <link rel="stylesheet" href="css/styles.css">
10
+ </head>
11
+
12
+ <body>
13
+
14
+ <div class="container-main">
15
+ <!-- Page Header -->
16
+ <div class="header">
17
+ <div class="header-logo">
18
+ <img src="images/logo.png" alt="logo">
19
+ </div>
20
+ <div class="header-main-text">
21
+ <h1>Hugging Face Transformers.js</h1>
22
+ </div>
23
+ <div class="header-sub-text">
24
+ <h3>Free AI Models for JavaScript Web Development</h3>
25
+ </div>
26
+ </div>
27
+
28
+ <hr> <!-- Separator -->
29
+
30
+ <!-- Content -->
31
+ <div class="container mt-5">
32
+ <!-- Natural Language Processing Section -->
33
+ <h2>Natural Language Processing</h2>
34
+ <div class="row">
35
+ <div class="col-md-3">
36
+ <a href="sentiments.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
37
+ <div class="card card-custom-height">
38
+ <div class="card-body">
39
+ <h5 class="card-title">Sentiment Analysis <br> (Text Classification)</h5>
40
+ </div>
41
+ </div>
42
+ </a>
43
+ </div>
44
+ <div class="col-md-3">
45
+ <a href="zero-shot-classification.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
46
+ <div class="card card-custom-height">
47
+ <div class="card-body">
48
+ <h5 class="card-title">Zero Shot Classification</h5>
49
+ </div>
50
+ </div>
51
+ </a>
52
+ </div>
53
+ <div class="col-md-3">
54
+ <a href="token-classification.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
55
+ <div class="card card-custom-height">
56
+ <div class="card-body">
57
+ <h5 class="card-title">Token Classification <br> (Named Entity Rec)</h5>
58
+ </div>
59
+ </div>
60
+ </a>
61
+ </div>
62
+ <div class="col-md-3">
63
+ <a href="fill-mask.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
64
+ <div class="card card-custom-height">
65
+ <div class="card-body">
66
+ <h5 class="card-title">Fill Mask</h5>
67
+ </div>
68
+ </div>
69
+ </a>
70
+ </div>
71
+ </div>
72
+ <div class="row">
73
+ <div class="col-md-3">
74
+ <a href="text-generation.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
75
+ <div class="card card-custom-height">
76
+ <div class="card-body">
77
+ <h5 class="card-title">Text Generation</h5>
78
+ </div>
79
+ </div>
80
+ </a>
81
+ </div>
82
+ <div class="col-md-3">
83
+ <a href="question-answering.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
84
+ <div class="card card-custom-height">
85
+ <div class="card-body">
86
+ <h5 class="card-title">Question Answering</h5>
87
+ </div>
88
+ </div>
89
+ </a>
90
+ </div>
91
+ <div class="col-md-3">
92
+ <a href="summarization.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
93
+ <div class="card card-custom-height">
94
+ <div class="card-body">
95
+ <h5 class="card-title">Summarization</h5>
96
+ </div>
97
+ </div>
98
+ </a>
99
+ </div>
100
+ <div class="col-md-3">
101
+ <a href="text-to-text-generation.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
102
+ <div class="card card-custom-height">
103
+ <div class="card-body">
104
+ <h5 class="card-title">Text-to-text Generation</h5>
105
+ </div>
106
+ </div>
107
+ </a>
108
+ </div>
109
+ </div>
110
+ <div class="row">
111
+ <div class="col-md-3">
112
+ <a href="translation.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
113
+ <div class="card card-custom-height">
114
+ <div class="card-body">
115
+ <h5 class="card-title">Translation</h5>
116
+ </div>
117
+ </div>
118
+ </a>
119
+ </div>
120
+ <div class="col-md-3">
121
+ <a href="translation-tok-model.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
122
+ <div class="card card-custom-height">
123
+ <div class="card-body">
124
+ <h5 class="card-title">Translation <br> (Tokenizer & Model)</h5>
125
+ </div>
126
+ </div>
127
+ </a>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Computer Vision Section -->
132
+ <h2>Computer Vision</h2>
133
+ <div class="row">
134
+ <div class="col-md-3">
135
+ <a href="image-classification.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
136
+ <div class="card card-custom-height">
137
+ <div class="card-body">
138
+ <h5 class="card-title">Image Classification</h5>
139
+ </div>
140
+ </div>
141
+ </a>
142
+ </div>
143
+ <div class="col-md-3">
144
+ <a href="zeroshotimageclassification.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
145
+ <div class="card card-custom-height">
146
+ <div class="card-body">
147
+ <h5 class="card-title">Zero Shot Image Classification</h5>
148
+ </div>
149
+ </div>
150
+ </a>
151
+ </div>
152
+ <div class="col-md-3">
153
+ <a href="object-detection.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
154
+ <div class="card card-custom-height">
155
+ <div class="card-body">
156
+ <h5 class="card-title">Object Detection</h5>
157
+ </div>
158
+ </div>
159
+ </a>
160
+ </div>
161
+ <div class="col-md-3">
162
+ <a href="image-to-text.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
163
+ <div class="card card-custom-height">
164
+ <div class="card-body">
165
+ <h5 class="card-title">Image to Text</h5>
166
+ </div>
167
+ </div>
168
+ </a>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Audio Section -->
173
+ <h2>Audio</h2>
174
+ <div class="row">
175
+ <div class="col-md-3">
176
+ <a href="asr-english.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
177
+ <div class="card card-custom-height">
178
+ <div class="card-body">
179
+ <h5 class="card-title">Automatic Speech Recognition - English</h5>
180
+ </div>
181
+ </div>
182
+ </a>
183
+ </div>
184
+ <div class="col-md-3">
185
+ <a href="asr-non-english.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
186
+ <div class="card card-custom-height">
187
+ <div class="card-body">
188
+ <h5 class="card-title">Automatic Speech Recognition - French</h5>
189
+ </div>
190
+ </div>
191
+ </a>
192
+ </div>
193
+ <div class="col-md-3">
194
+ <a href="audio-classification.html" class="text-decoration-none text-dark"> <!-- Hyperlink wrapping the card -->
195
+ <div class="card card-custom-height">
196
+ <div class="card-body">
197
+ <h5 class="card-title">Audio Classification</h5>
198
+ </div>
199
+ </div>
200
+ </a>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <script>
207
+ // Vanilla JavaScript code here
208
+ </script>
209
+ </body>
210
+
211
+ </html>
object-detection.html ADDED
@@ -0,0 +1,137 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Object Detection - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Computer Vision</h2>
50
+ <h4>Object Detection</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="object-detection-container" class="container mt-4">
55
+ <h5>Run Object Detection with facebook/detr-resnet-50:</h5>
56
+ <div class="d-flex align-items-center">
57
+ <label for="objectDetectionURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
58
+ image URL:</label>
59
+ <input type="text" class="form-control flex-grow-1" id="objectDetectionURLText"
60
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/cats.jpg"
61
+ placeholder="Enter image" style="margin-right: 15px; margin-left: 15px;">
62
+ <button id="DetectButton" class="btn btn-primary" onclick="detectImage()">Detect</button>
63
+ </div>
64
+ <div class="mt-4">
65
+ <h4>Output:</h4>
66
+ <pre id="outputArea"></pre>
67
+ </div>
68
+ </div>
69
+
70
+ <hr> <!-- Line Separator -->
71
+
72
+ <div id="object-detection-local-container" class="container mt-4">
73
+ <h5>Detect a Local Image:</h5>
74
+ <div class="d-flex align-items-center">
75
+ <label for="objectDetectionLocalFile" class="mb-0 text-nowrap"
76
+ style="margin-right: 15px;">Select Local Image:</label>
77
+ <input type="file" id="objectDetectionLocalFile" accept="image/*" />
78
+ <button id="DetectButtonLocal" class="btn btn-primary"
79
+ onclick="detectImageLocal()">Detect</button>
80
+ </div>
81
+ <div class="mt-4">
82
+ <h4>Output:</h4>
83
+ <pre id="outputAreaLocal"></pre>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Back to Home button -->
88
+ <div class="row mt-5">
89
+ <div class="col-md-12 text-center">
90
+ <a href="index.html" class="btn btn-outline-secondary"
91
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <script>
98
+
99
+ let detector;
100
+
101
+ // Initialize the sentiment analysis model
102
+ async function initializeModel() {
103
+ detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
104
+
105
+ }
106
+
107
+ async function detectImage() {
108
+ const textFieldValue = document.getElementById("objectDetectionURLText").value.trim();
109
+
110
+ const result = await detector(textFieldValue, { threshold: 0.9 });
111
+
112
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
113
+ }
114
+
115
+ async function detectImageLocal() {
116
+ const fileInput = document.getElementById("objectDetectionLocalFile");
117
+ const file = fileInput.files[0];
118
+
119
+ if (!file) {
120
+ alert('Please select an image file first.');
121
+ return;
122
+ }
123
+
124
+ // Create a Blob URL from the file
125
+ const url = URL.createObjectURL(file);
126
+
127
+ const result = await detector(url, { threshold: 0.9 });
128
+
129
+ document.getElementById("outputAreaLocal").innerText = JSON.stringify(result, null, 2);
130
+ }
131
+
132
+ // Initialize the model after the DOM is completely loaded
133
+ window.addEventListener("DOMContentLoaded", initializeModel);
134
+ </script>
135
+ </body>
136
+
137
+ </html>
question-answering.html ADDED
@@ -0,0 +1,139 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Question Answering - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Natural Language Processing</h2>
50
+ <h4>Question Answering</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="question-answering-container" class="container mt-4">
55
+ <h5>Question Answering:</h5>
56
+ <div class="d-flex align-items-center mb-2">
57
+ <label for="questionText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Question:</label>
58
+ <input type="text" class="form-control flex-grow-1" id="questionText" value="Who was Jim Henson?"
59
+ placeholder="Enter question text" style="margin-right: 15px; margin-left: 15px;">
60
+ </div>
61
+ <div class="d-flex align-items-center">
62
+ <label for="contextText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Context:</label>
63
+ <input type="text" class="form-control flex-grow-1" id="contextText" value="Jim Henson was a nice puppet."
64
+ placeholder="Enter context text" style="margin-right: 15px; margin-left: 15px;">
65
+ <button id="answerButton" class="btn btn-primary ml-2"
66
+ onclick="answerQuestion()">Answer</button>
67
+ </div>
68
+ <div class="mt-4">
69
+ <h4>Output:</h4>
70
+ <pre id="outputArea"></pre>
71
+ </div>
72
+ </div>
73
+
74
+ <hr> <!-- Line Separator -->
75
+
76
+ <div id="question-answering-container2" class="container mt-4">
77
+ <h5>Question Answering (Top Results):</h5>
78
+ <div class="d-flex align-items-center mb-2">
79
+ <label for="questionTopText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Question:</label>
80
+ <input type="text" class="form-control flex-grow-1" id="questionTopText" value="What is the temperature today?"
81
+ placeholder="Enter question text" style="margin-right: 15px; margin-left: 15px;">
82
+ </div>
83
+ <div class="d-flex align-items-center">
84
+ <label for="contextTopText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Context:</label>
85
+ <input type="text" class="form-control flex-grow-1" id="contextTopText" value="It is very hot today."
86
+ placeholder="Enter context text" style="margin-right: 15px; margin-left: 15px;">
87
+ <button id="answerTopButton" class="btn btn-primary ml-2"
88
+ onclick="answerQuestionTop()">Answer</button>
89
+ </div>
90
+ <div class="mt-4">
91
+ <h4>Output:</h4>
92
+ <pre id="outputTopArea"></pre>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Back to Home button -->
97
+ <div class="row mt-5">
98
+ <div class="col-md-12 text-center">
99
+ <a href="index.html" class="btn btn-outline-secondary"
100
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <script>
107
+
108
+ let answerer;
109
+
110
+ // Initialize the sentiment analysis model
111
+ async function initializeModel() {
112
+ answerer = await pipeline('question-answering', 'Xenova/distilbert-base-uncased-distilled-squad');
113
+
114
+ }
115
+
116
+ async function answerQuestion() {
117
+ const question = document.getElementById("questionText").value.trim();
118
+ const context = document.getElementById("contextText").value.trim();
119
+
120
+ const result = await answerer(question, context);
121
+
122
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
123
+ }
124
+
125
+ async function answerQuestionTop() {
126
+ const question = document.getElementById("questionTopText").value.trim();
127
+ const context = document.getElementById("contextTopText").value.trim();
128
+
129
+ const result = await answerer(question, context, { topk: 3 });
130
+
131
+ document.getElementById("outputTopArea").innerText = JSON.stringify(result, null, 2);
132
+ }
133
+
134
+ // Initialize the model after the DOM is completely loaded
135
+ window.addEventListener("DOMContentLoaded", initializeModel);
136
+ </script>
137
+ </body>
138
+
139
+ </html>
sentiments.html ADDED
@@ -0,0 +1,224 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Sentiment Analysis - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Natural Language Processing</h2>
50
+ <h4>Sentiment Analysis (Text Classification)</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="sentiment-analyzer-container" class="container mt-4">
55
+ <h5>Single Input:</h5>
56
+ <div class="d-flex align-items-center">
57
+ <label for="sentimentText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
58
+ Analyze:</label>
59
+ <input type="text" class="form-control flex-grow-1" id="sentimentText" value="I love transformers!"
60
+ placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
61
+ <button id="analyzeButton" class="btn btn-primary" onclick="analyzeSentiment()">Analyze</button>
62
+ </div>
63
+ <div class="mt-4">
64
+ <h4>Output:</h4>
65
+ <pre id="outputArea"></pre>
66
+ </div>
67
+ </div>
68
+
69
+ <hr> <!-- Line Separator -->
70
+
71
+ <div id="sentiment-analyzer-container2" class="container mt-4">
72
+ <h5>Multiple Inputs:</h5>
73
+ <div class="d-flex align-items-center mb-2">
74
+ <label for="sentimentText1" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
75
+ Analyze 1:</label>
76
+ <input type="text" class="form-control flex-grow-1" id="sentimentText1" value="I love transformers!"
77
+ placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
78
+ </div>
79
+ <div class="d-flex align-items-center">
80
+ <label for="sentimentText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
81
+ Analyze 2:</label>
82
+ <input type="text" class="form-control flex-grow-1" id="sentimentText2" value="I hate transformers!"
83
+ placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
84
+ <button id="analyzeButton" class="btn btn-primary ml-2"
85
+ onclick="analyzeSentimentMulti()">Analyze</button>
86
+ </div>
87
+ <div class="mt-4">
88
+ <h4>Output:</h4>
89
+ <pre id="outputArea2"></pre>
90
+ </div>
91
+ </div>
92
+
93
+ <hr> <!-- Line Separator -->
94
+
95
+ <!-- Reviewer -->
96
+ <div id="reviewer-container" class="container mt-4">
97
+ <h5>Load a Specific Model (Xenova/bert-base-multilingual-uncased-sentiment):</h5>
98
+ <div class="d-flex align-items-center">
99
+ <label for="reviewText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
100
+ Review:</label>
101
+ <input type="text" class="form-control flex-grow-1" id="reviewText"
102
+ value="The Shawshank Redemption is a true masterpiece of cinema." placeholder="Enter text"
103
+ style="margin-right: 15px; margin-left: 15px;">
104
+ <button id="reviewButton" class="btn btn-primary" onclick="analyzeReview()">Review</button>
105
+ </div>
106
+ <div class="mt-4">
107
+ <h4>Output:</h4>
108
+ <pre id="reviewOutputArea"></pre>
109
+ </div>
110
+ </div>
111
+
112
+ <hr> <!-- Line Separator -->
113
+
114
+ <!-- Reviewer2 -->
115
+ <div id="reviewer-container2" class="container mt-4">
116
+ <h5>Return Top 5 Classes:</h5>
117
+ <div class="d-flex align-items-center">
118
+ <label for="reviewText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
119
+ Review:</label>
120
+ <input type="text" class="form-control flex-grow-1" id="reviewText2"
121
+ value="Le meilleur film de tous les temps." placeholder="Enter text"
122
+ style="margin-right: 15px; margin-left: 15px;">
123
+ <button id="reviewButton2" class="btn btn-primary" onclick="analyzeReview2()">Review</button>
124
+ </div>
125
+ <div class="mt-4">
126
+ <h4>Output:</h4>
127
+ <pre id="reviewOutputArea2"></pre>
128
+ </div>
129
+ </div>
130
+
131
+ <hr> <!-- Line Separator -->
132
+
133
+ <!-- Toxic Comment Classification -->
134
+ <div id="toxic-container" class="container mt-4">
135
+ <h5>Toxic Comment Classification (Return All Classes):</h5>
136
+ <div class="d-flex align-items-center">
137
+ <label for="toxicText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Toxic
138
+ Text:</label>
139
+ <input type="text" class="form-control flex-grow-1" id="toxicText" value="I hate you!"
140
+ placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
141
+ <button id="toxicButton" class="btn btn-primary" onclick="toxicReview()">Review</button>
142
+ </div>
143
+ <div class="mt-4">
144
+ <h4>Output:</h4>
145
+ <pre id="toxicOutputArea"></pre>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Back to Home button -->
150
+ <div class="row mt-5">
151
+ <div class="col-md-12 text-center">
152
+ <a href="index.html" class="btn btn-outline-secondary"
153
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <script>
160
+
161
+ let sentimentAnalysis;
162
+ let reviewer;
163
+ let toxic_classifier;
164
+
165
+ // Initialize the sentiment analysis model
166
+ async function initializeModel() {
167
+ sentimentAnalysis = await pipeline("sentiment-analysis");
168
+ reviewer = await pipeline('sentiment-analysis', 'Xenova/bert-base-multilingual-uncased-sentiment');
169
+ toxic_classifier = await pipeline('text-classification', 'Xenova/toxic-bert');
170
+ }
171
+
172
+ async function analyzeSentiment() {
173
+ const textFieldValue = document.getElementById("sentimentText").value.trim();
174
+
175
+ const result = await sentimentAnalysis(textFieldValue);
176
+
177
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
178
+ }
179
+
180
+ async function analyzeSentimentMulti() {
181
+ const textFieldValue1 = document.getElementById("sentimentText1").value.trim();
182
+ const textFieldValue2 = document.getElementById("sentimentText2").value.trim();
183
+
184
+ const result = await sentimentAnalysis([textFieldValue1, textFieldValue2]);
185
+
186
+ document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
187
+ }
188
+
189
+ async function analyzeReview() {
190
+
191
+ const textFieldValue = document.getElementById("reviewText").value.trim();
192
+
193
+ const result = await reviewer(textFieldValue);
194
+
195
+ document.getElementById("reviewOutputArea").innerText = JSON.stringify(result, null, 2);
196
+
197
+ }
198
+
199
+ async function analyzeReview2() {
200
+
201
+ const textFieldValue = document.getElementById("reviewText2").value.trim();
202
+
203
+ const result = await reviewer(textFieldValue, { topk: 5 });
204
+
205
+ document.getElementById("reviewOutputArea2").innerText = JSON.stringify(result, null, 2);
206
+
207
+ }
208
+
209
+ async function toxicReview() {
210
+
211
+ const textFieldValue = document.getElementById("toxicText").value.trim();
212
+
213
+ const result = await toxic_classifier(textFieldValue, { topk: null });
214
+
215
+ document.getElementById("toxicOutputArea").innerText = JSON.stringify(result, null, 2);
216
+
217
+ }
218
+
219
+ // Initialize the model after the DOM is completely loaded
220
+ window.addEventListener("DOMContentLoaded", initializeModel);
221
+ </script>
222
+ </body>
223
+
224
+ </html>
summarization.html ADDED
@@ -0,0 +1,122 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Summarization - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Natural Language Processing</h2>
50
+ <h4>Summarization</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="summarization-container" class="container mt-4">
55
+ <h5>Summarization with a Specific Model:</h5>
56
+ <div class="d-flex flex-column align-items-start">
57
+ <label for="summarizationText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
58
+ Summarize:</label>
59
+ <textarea class="form-control flex-grow-1 mb-2" id="summarizationText" rows="6"
60
+ style="margin-right: 15px; margin-left: 15px;">The tower is 324 metres (1,063 ft) tall, about the same height as an 81-storey building, and the tallest structure in Paris. Its base is square, measuring 125 metres (410 ft) on each side. During its construction, the Eiffel Tower surpassed the Washington Monument to become the tallest man-made structure in the world, a title it held for 41 years until the Chrysler Building in New York City was finished in 1930. It was the first structure to reach a height of 300 metres. Due to the addition of a broadcasting aerial at the top of the tower in 1957, it is now taller than the Chrysler Building by 5.2 metres (17 ft). Excluding transmitters, the Eiffel Tower is the second tallest free-standing structure in France after the Millau Viaduct.</textarea>
61
+
62
+ <button id="summarizeButton" class="btn btn-primary" onclick="summarizeText()">Summarize</button>
63
+ </div>
64
+ <div class="mt-4">
65
+ <h4>Output:</h4>
66
+ <pre id="summarizationOutputArea"></pre>
67
+ </div>
68
+ </div>
69
+
70
+ <!-- Back to Home button -->
71
+ <div class="row mt-5">
72
+ <div class="col-md-12 text-center">
73
+ <a href="index.html" class="btn btn-outline-secondary"
74
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <script>
81
+
82
+ let generator;
83
+
84
+ // Initialize the sentiment analysis model
85
+ async function initializeModel() {
86
+ generator = await pipeline('summarization', 'Xenova/distilbart-cnn-6-6');
87
+ }
88
+
89
+ async function summarizeText() {
90
+
91
+ // Reference to the textarea and the button
92
+ const textArea = document.getElementById("summarizationText");
93
+ const summarizeButton = document.getElementById("summarizeButton");
94
+
95
+ const textAreaValue = textArea.value.trim();
96
+
97
+ document.getElementById("summarizationOutputArea").innerText = ""
98
+
99
+ // Disable textarea and button, and set cursor to hourglass
100
+ textArea.disabled = true;
101
+ summarizeButton.disabled = true;
102
+ document.body.style.cursor = "wait";
103
+
104
+ // Ensure the DOM updates before making the API call
105
+ setTimeout(async () => {
106
+ let summary = await generator(textAreaValue, { max_new_tokens: 100 });
107
+
108
+ document.getElementById("summarizationOutputArea").innerText = JSON.stringify(summary, null, 2);
109
+
110
+ // Re-enable textarea and button, and reset cursor
111
+ textArea.disabled = false;
112
+ summarizeButton.disabled = false;
113
+ document.body.style.cursor = "default";
114
+ }, 10);
115
+ }
116
+
117
+ // Initialize the model after the DOM is completely loaded
118
+ window.addEventListener("DOMContentLoaded", initializeModel);
119
+ </script>
120
+ </body>
121
+
122
+ </html>
text-generation.html ADDED
@@ -0,0 +1,164 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Text Generation - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Natural Language Processing</h2>
50
+ <h4>Text Generation</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="text-generation-container" class="container mt-4">
55
+ <h5>Text Generation with Xenova/distilgpt2 (Default Settings):</h5>
56
+ <div class="d-flex align-items-center">
57
+ <label for="generationText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
58
+ Generate:</label>
59
+ <input type="text" class="form-control flex-grow-1" id="generationText"
60
+ value="I enjoy walking with my cute dog," placeholder="Enter text"
61
+ style="margin-right: 15px; margin-left: 15px;">
62
+ <button id="generateButton" class="btn btn-primary" onclick="generateText()">Generate</button>
63
+ </div>
64
+ <div class="mt-4">
65
+ <h4>Output:</h4>
66
+ <pre id="outputArea"></pre>
67
+ </div>
68
+ </div>
69
+
70
+ <hr> <!-- Line Separator -->
71
+
72
+ <div id="text-generation-container2" class="container mt-4">
73
+ <h5>Text Generation with Xenova/distilgpt2 (Custom Settings):</h5>
74
+ <div class="d-flex align-items-center">
75
+ <label for="generationText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
76
+ Generate:</label>
77
+ <input type="text" class="form-control flex-grow-1" id="generationText2"
78
+ value="Once upon a time, there was" placeholder="Enter text"
79
+ style="margin-right: 15px; margin-left: 15px;">
80
+ <button id="generateButton2" class="btn btn-primary" onclick="generateText2()">Generate</button>
81
+ </div>
82
+ <div class="mt-4">
83
+ <h4>Output:</h4>
84
+ <pre id="outputArea2"></pre>
85
+ </div>
86
+ </div>
87
+
88
+ <hr> <!-- Line Separator -->
89
+
90
+ <div id="code-generation-container" class="container mt-4">
91
+ <h5>Code Generation with Xenova/codegen-350M-mono:</h5>
92
+ <div class="d-flex align-items-center">
93
+ <label for="generationCode" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter code to
94
+ Generate:</label>
95
+ <input type="text" class="form-control flex-grow-1" id="generationCode"
96
+ value="def fib(n):" placeholder="Enter code"
97
+ style="margin-right: 15px; margin-left: 15px;">
98
+ <button id="generateCodeButton" class="btn btn-primary" onclick="generateCode()">Generate Code</button>
99
+ </div>
100
+ <div class="mt-4">
101
+ <h4>Output:</h4>
102
+ <pre id="outputAreaCode"></pre>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Back to Home button -->
107
+ <div class="row mt-5">
108
+ <div class="col-md-12 text-center">
109
+ <a href="index.html" class="btn btn-outline-secondary"
110
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <script>
117
+
118
+ let generator;
119
+ let code_generator;
120
+
121
+ // Initialize the sentiment analysis model
122
+ async function initializeModel() {
123
+ generator = await pipeline('text-generation', 'Xenova/distilgpt2');
124
+ code_generator = await pipeline('text-generation', 'Xenova/codegen-350M-mono');
125
+
126
+ }
127
+
128
+ async function generateText() {
129
+ const textFieldValue = document.getElementById("generationText").value.trim();
130
+
131
+ const result = await generator(textFieldValue);
132
+
133
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
134
+ }
135
+
136
+ async function generateText2() {
137
+ const textFieldValue = document.getElementById("generationText2").value.trim();
138
+
139
+ const result = await generator(textFieldValue, {
140
+ temperature: 2,
141
+ max_new_tokens: 20,
142
+ repetition_penalty: 1.5,
143
+ no_repeat_ngram_size: 2,
144
+ num_beams: 2,
145
+ num_return_sequences: 3,
146
+ });
147
+
148
+ document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
149
+ }
150
+
151
+ async function generateCode() {
152
+ const textFieldValue = document.getElementById("generationCode").value.trim();
153
+
154
+ const result = await code_generator(textFieldValue);
155
+
156
+ document.getElementById("outputAreaCode").innerText = JSON.stringify(result, null, 2);
157
+ }
158
+
159
+ // Initialize the model after the DOM is completely loaded
160
+ window.addEventListener("DOMContentLoaded", initializeModel);
161
+ </script>
162
+ </body>
163
+
164
+ </html>
text-to-text-generation.html ADDED
@@ -0,0 +1,140 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Text-to-text Generation - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Natural Language Processing</h2>
50
+ <h4>Text-to-text Generation</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="text-to-text-generation-container" class="container mt-4">
55
+ <h5>Text-to-text generation w/ Xenova/LaMini-Flan-T5-783M:</h5>
56
+ <div class="d-flex align-items-center">
57
+ <label for="text-to-textGenerationText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
58
+ input text sequence:</label>
59
+ <input type="text" class="form-control flex-grow-1" id="text-to-textGenerationText"
60
+ value="how can I become more healthy?" placeholder="Enter text"
61
+ style="margin-right: 15px; margin-left: 15px;">
62
+ <button id="generateButton" class="btn btn-primary" onclick="generateText()">Generate</button>
63
+ </div>
64
+ <div class="mt-4">
65
+ <h4>Output:</h4>
66
+ <pre id="outputArea"></pre>
67
+ </div>
68
+ </div>
69
+
70
+ <hr> <!-- Line Separator -->
71
+
72
+ <div id="text-to-text-generation-container2" class="container mt-4">
73
+ <h5>Generate a Poem Using LaMini-Flan-T5-783M:</h5>
74
+ <div class="d-flex align-items-center">
75
+ <label for="text-to-textGenerationText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
76
+ Poem to
77
+ Generate:</label>
78
+ <input type="text" class="form-control flex-grow-1" id="text-to-textGenerationText2"
79
+ value="Write me a love poem about cheese." placeholder="Enter text"
80
+ style="margin-right: 15px; margin-left: 15px;">
81
+ <button id="generateButton2" class="btn btn-primary" onclick="generateText2()">Generate</button>
82
+ </div>
83
+ <div class="mt-4">
84
+ <h4>Output:</h4>
85
+ <pre id="outputArea2"></pre>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Back to Home button -->
90
+ <div class="row mt-5">
91
+ <div class="col-md-12 text-center">
92
+ <a href="index.html" class="btn btn-outline-secondary"
93
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <script>
100
+
101
+ let generator;
102
+
103
+ // Initialize the sentiment analysis model
104
+ async function initializeModel() {
105
+ generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-783M');
106
+
107
+ }
108
+
109
+ async function generateText() {
110
+ const textFieldValue = document.getElementById("text-to-textGenerationText").value.trim();
111
+
112
+ const result = await generator(textFieldValue, {
113
+ max_new_tokens: 100,
114
+ });
115
+
116
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
117
+ }
118
+
119
+ async function generateText2() {
120
+ const textFieldValue = document.getElementById("text-to-textGenerationText2").value.trim();
121
+
122
+ const result = await generator(textFieldValue, {
123
+ max_new_tokens: 200,
124
+ temperature: 0.9,
125
+ repetition_penalty: 2.0,
126
+ no_repeat_ngram_size: 3,
127
+
128
+ // top_k: 20,
129
+ // do_sample: true,
130
+ });
131
+
132
+ document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
133
+ }
134
+
135
+ // Initialize the model after the DOM is completely loaded
136
+ window.addEventListener("DOMContentLoaded", initializeModel);
137
+ </script>
138
+ </body>
139
+
140
+ </html>
token-classification.html ADDED
@@ -0,0 +1,127 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Token Classification - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Natural Language Processing</h2>
50
+ <h4>Token Classification (Named Entity Recognition)</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="token-classification-container" class="container mt-4">
55
+ <h5>Perform Named Entity Recognition with Xenova/bert-base-NER:</h5>
56
+ <div class="d-flex align-items-center">
57
+ <label for="tokenClassificationText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to Recognize:</label>
58
+ <input type="text" class="form-control flex-grow-1" id="tokenClassificationText"
59
+ value="My name is Sarah and I live in London" placeholder="Enter text"
60
+ style="margin-right: 15px; margin-left: 15px;">
61
+ <button id="classifyButton" class="btn btn-primary" onclick="analyzeText()">analyze</button>
62
+ </div>
63
+ <div class="mt-4">
64
+ <h4>Output:</h4>
65
+ <pre id="outputArea"></pre>
66
+ </div>
67
+ </div>
68
+
69
+ <hr> <!-- Line Separator -->
70
+
71
+ <div id="token-classification-container2" class="container mt-4">
72
+ <h5>Perform Named Entity Recognition with Xenova/bert-base-NER (Return all Labels):</h5>
73
+ <div class="d-flex align-items-center">
74
+ <label for="tokenClassificationText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to Recognize:</label>
75
+ <input type="text" class="form-control flex-grow-1" id="tokenClassificationText2"
76
+ value="Sarah lives in the United States of America" placeholder="Enter text"
77
+ style="margin-right: 15px; margin-left: 15px;">
78
+ <button id="classifyButton2" class="btn btn-primary" onclick="analyzeText2()">analyze</button>
79
+ </div>
80
+ <div class="mt-4">
81
+ <h4>Output:</h4>
82
+ <pre id="outputArea2"></pre>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Back to Home button -->
87
+ <div class="row mt-5">
88
+ <div class="col-md-12 text-center">
89
+ <a href="index.html" class="btn btn-outline-secondary"
90
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <script>
97
+
98
+ let classifier;
99
+
100
+ // Initialize the sentiment analysis model
101
+ async function initializeModel() {
102
+ classifier = await pipeline('token-classification', 'Xenova/bert-base-NER');
103
+
104
+ }
105
+
106
+ async function analyzeText() {
107
+ const textFieldValue = document.getElementById("tokenClassificationText").value.trim();
108
+
109
+ const result = await classifier(textFieldValue);
110
+
111
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
112
+ }
113
+
114
+ async function analyzeText2() {
115
+ const textFieldValue = document.getElementById("tokenClassificationText2").value.trim();
116
+
117
+ const result = await classifier(textFieldValue, { ignore_labels: [] });
118
+
119
+ document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
120
+ }
121
+
122
+ // Initialize the model after the DOM is completely loaded
123
+ window.addEventListener("DOMContentLoaded", initializeModel);
124
+ </script>
125
+ </body>
126
+
127
+ </html>
translation-tok-model.html ADDED
@@ -0,0 +1,115 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Translation (Tokenizer & Model) - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { AutoTokenizer, AutoModelForSeq2SeqLM } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make them available globally
13
+ window.AutoTokenizer = AutoTokenizer;
14
+ window.AutoModelForSeq2SeqLM = AutoModelForSeq2SeqLM;
15
+ </script>
16
+
17
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
18
+
19
+ <link rel="stylesheet" href="css/styles.css">
20
+ </head>
21
+
22
+ <body>
23
+ <div class="container-main">
24
+ <!-- Page Header -->
25
+ <div class="header">
26
+ <div class="header-logo">
27
+ <img src="images/logo.png" alt="logo">
28
+ </div>
29
+ <div class="header-main-text">
30
+ <h1>Hugging Face Transformers.js</h1>
31
+ </div>
32
+ <div class="header-sub-text">
33
+ <h3>Free AI Models for JavaScript Web Development</h3>
34
+ </div>
35
+ </div>
36
+ <hr> <!-- Separator -->
37
+
38
+ <!-- Back to Home button -->
39
+ <div class="row mt-5">
40
+ <div class="col-md-12 text-center">
41
+ <a href="index.html" class="btn btn-outline-secondary"
42
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
43
+ </div>
44
+ </div>
45
+
46
+ <!-- Content -->
47
+ <div class="container mt-5">
48
+ <!-- Centered Titles -->
49
+ <div class="text-center">
50
+ <h2>Natural Language Processing</h2>
51
+ <h4>Translation (Using Tokenizers and Models))</h4>
52
+ </div>
53
+
54
+ <!-- Actual Content of this page -->
55
+ <div id="translation-container" class="container mt-4">
56
+ <h5>Load and run an AutoModelForSeq2SeqLM Model and an AutoTokenizer:</h5>
57
+ <div class="d-flex align-items-center">
58
+ <label for="translationText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
59
+ Translate:</label>
60
+ <input type="text" class="form-control flex-grow-1" id="translationText"
61
+ value="I love transformers!" placeholder="Enter text"
62
+ style="margin-right: 15px; margin-left: 15px;">
63
+ <button id="translateButton" class="btn btn-primary" onclick="translateText()">Translate</button>
64
+ </div>
65
+ <div class="mt-4">
66
+ <h4>Output:</h4>
67
+ <pre id="outputArea"></pre>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Back to Home button -->
72
+ <div class="row mt-5">
73
+ <div class="col-md-12 text-center">
74
+ <a href="index.html" class="btn btn-outline-secondary"
75
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <script>
82
+
83
+ let tokenizer;
84
+ let model;
85
+
86
+ // Initialize the sentiment analysis model
87
+ async function initializeModel() {
88
+ tokenizer = await AutoTokenizer.from_pretrained('Xenova/t5-small');
89
+ model = await AutoModelForSeq2SeqLM.from_pretrained('Xenova/t5-small');
90
+
91
+ }
92
+
93
+ async function translateText() {
94
+
95
+ const textFieldValue = document.getElementById("translationText").value.trim();
96
+ let { input_ids } = await tokenizer(textFieldValue);
97
+
98
+ console.log("input_ids: " + input_ids);
99
+
100
+ let outputs = await model.generate(input_ids);
101
+
102
+ let decoded = tokenizer.decode(outputs[0], { skip_special_tokens: true });
103
+
104
+ console.log("outputs: " + outputs);
105
+ console.log("decoded: " + decoded);
106
+
107
+ document.getElementById("outputArea").innerText = JSON.stringify(decoded, null, 2);
108
+ }
109
+
110
+ // Initialize the model after the DOM is completely loaded
111
+ window.addEventListener("DOMContentLoaded", initializeModel);
112
+ </script>
113
+ </body>
114
+
115
+ </html>
translation.html ADDED
@@ -0,0 +1,136 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Translation - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Natural Language Processing</h2>
50
+ <h4>Translation</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="translation-container" class="container mt-4">
55
+ <h5>Multilingual Translation w/ Xenova/nllb-200-distilled-600M:</h5>
56
+ <div class="d-flex align-items-center">
57
+ <label for="translationText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
58
+ Translate:</label>
59
+ <input type="text" class="form-control flex-grow-1" id="translationText"
60
+ value="जीवन एक चॉकलेट बॉक्स की तरह है।" placeholder="Enter text"
61
+ style="margin-right: 15px; margin-left: 15px;">
62
+ <button id="translateButton" class="btn btn-primary" onclick="translateText()">Translate</button>
63
+ </div>
64
+ <div class="mt-4">
65
+ <h4>Output:</h4>
66
+ <pre id="outputArea"></pre>
67
+ </div>
68
+ </div>
69
+
70
+ <hr> <!-- Line Separator -->
71
+
72
+ <div id="translation-container" class="container mt-4">
73
+ <h5>Multilingual Translation w/ Xenova/m2m100_418M:</h5>
74
+ <div class="d-flex align-items-center">
75
+ <label for="translationText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
76
+ Translate:</label>
77
+ <input type="text" class="form-control flex-grow-1" id="translationText2" value="生活就像一盒巧克力。"
78
+ placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
79
+ <button id="translateButton2" class="btn btn-primary" onclick="translateText2()">Translate</button>
80
+ </div>
81
+ <div class="mt-4">
82
+ <h4>Output:</h4>
83
+ <pre id="outputArea2"></pre>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Back to Home button -->
88
+ <div class="row mt-5">
89
+ <div class="col-md-12 text-center">
90
+ <a href="index.html" class="btn btn-outline-secondary"
91
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <script>
98
+
99
+ let translator;
100
+ let translator2;
101
+
102
+ // Initialize the sentiment analysis model
103
+ async function initializeModel() {
104
+ translator = await pipeline('translation', 'Xenova/nllb-200-distilled-600M');
105
+ translator2 = await pipeline('translation', 'Xenova/m2m100_418M');
106
+
107
+ }
108
+
109
+ async function translateText() {
110
+ const textFieldValue = document.getElementById("translationText").value.trim();
111
+
112
+ let result = await translator(textFieldValue, {
113
+ src_lang: 'hin_Deva', // Hindi
114
+ tgt_lang: 'fra_Latn', // French
115
+ });
116
+
117
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
118
+ }
119
+
120
+ async function translateText2() {
121
+ const textFieldValue = document.getElementById("translationText2").value.trim();
122
+
123
+ let result = await translator2(textFieldValue, {
124
+ src_lang: 'zh', // Chinese
125
+ tgt_lang: 'en', // English
126
+ })
127
+
128
+ document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
129
+ }
130
+
131
+ // Initialize the model after the DOM is completely loaded
132
+ window.addEventListener("DOMContentLoaded", initializeModel);
133
+ </script>
134
+ </body>
135
+
136
+ </html>
zero-shot-classification.html ADDED
@@ -0,0 +1,141 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Zero Shot Classification - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Natural Language Processing</h2>
50
+ <h4>Zero Shot Classification</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="zero-shot-classification-container" class="container mt-4">
55
+ <h5>Zero Shot Classification with Xenova/mobilebert-uncased-mnli:</h5>
56
+ <div class="d-flex align-items-center mb-2">
57
+ <label for="textText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text:</label>
58
+ <input type="text" class="form-control flex-grow-1" id="textText" value="Last week I upgraded my iOS version and ever since then my phone has been overheating whenever I use your app."
59
+ placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
60
+ </div>
61
+ <div class="d-flex align-items-center">
62
+ <label for="labelsText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Labels (comma separated):</label>
63
+ <input type="text" class="form-control flex-grow-1" id="labelsText" value="mobile, billing, website, account access"
64
+ placeholder="Enter labels (comma separated)" style="margin-right: 15px; margin-left: 15px;">
65
+ <button id="classifyButton" class="btn btn-primary ml-2"
66
+ onclick="classifyText()">Classify</button>
67
+ </div>
68
+ <div class="mt-4">
69
+ <h4>Output:</h4>
70
+ <pre id="outputArea"></pre>
71
+ </div>
72
+ </div>
73
+
74
+ <hr> <!-- Line Separator -->
75
+
76
+ <div id="zero-shot-classification-container-multi" class="container mt-4">
77
+ <h5>Zero Shot Classification with Xenova/nli-deberta-v3-xsmall (Multi-Label):</h5>
78
+ <div class="d-flex align-items-center mb-2">
79
+ <label for="textTextMulti" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text:</label>
80
+ <input type="text" class="form-control flex-grow-1" id="textTextMulti" value="I have a problem with my iphone that needs to be resolved asap!"
81
+ placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
82
+ </div>
83
+ <div class="d-flex align-items-center">
84
+ <label for="labelsTextMulti" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Labels (comma separated):</label>
85
+ <input type="text" class="form-control flex-grow-1" id="labelsTextMulti" value="urgent, not urgent, phone, tablet, computer"
86
+ placeholder="Enter labels (comma separated)" style="margin-right: 15px; margin-left: 15px;">
87
+ <button id="classifyButtonMulti" class="btn btn-primary ml-2"
88
+ onclick="classifyTextMulti()">Classify</button>
89
+ </div>
90
+ <div class="mt-4">
91
+ <h4>Output:</h4>
92
+ <pre id="outputAreaMulti"></pre>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Back to Home button -->
97
+ <div class="row mt-5">
98
+ <div class="col-md-12 text-center">
99
+ <a href="index.html" class="btn btn-outline-secondary"
100
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <script>
107
+
108
+ let classifier;
109
+ let classifierMulti;
110
+
111
+ // Initialize the sentiment analysis model
112
+ async function initializeModel() {
113
+ classifier = await pipeline('zero-shot-classification', 'Xenova/mobilebert-uncased-mnli');
114
+ classifierMulti = await pipeline('zero-shot-classification', 'Xenova/nli-deberta-v3-xsmall');
115
+
116
+ }
117
+
118
+ async function classifyText() {
119
+ const text = document.getElementById("textText").value.trim();
120
+ const labels = document.getElementById("labelsText").value.trim().split(",").map(item => item.trim());
121
+
122
+ const result = await classifier(text, labels);
123
+
124
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
125
+ }
126
+
127
+ async function classifyTextMulti() {
128
+ const text = document.getElementById("textTextMulti").value.trim();
129
+ const labels = document.getElementById("labelsTextMulti").value.trim().split(",").map(item => item.trim());
130
+
131
+ const result = await classifierMulti(text, labels, { multi_label: true });
132
+
133
+ document.getElementById("outputAreaMulti").innerText = JSON.stringify(result, null, 2);
134
+ }
135
+
136
+ // Initialize the model after the DOM is completely loaded
137
+ window.addEventListener("DOMContentLoaded", initializeModel);
138
+ </script>
139
+ </body>
140
+
141
+ </html>
zeroshotimageclassification.html ADDED
@@ -0,0 +1,153 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Zero Shot Image Classification - Hugging Face Transformers.js</title>
7
+
8
+ <script type="module">
9
+ // Import the library
10
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
11
+
12
+ // Make it available globally
13
+ window.pipeline = pipeline;
14
+ </script>
15
+
16
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
17
+
18
+ <link rel="stylesheet" href="css/styles.css">
19
+ </head>
20
+
21
+ <body>
22
+ <div class="container-main">
23
+ <!-- Page Header -->
24
+ <div class="header">
25
+ <div class="header-logo">
26
+ <img src="images/logo.png" alt="logo">
27
+ </div>
28
+ <div class="header-main-text">
29
+ <h1>Hugging Face Transformers.js</h1>
30
+ </div>
31
+ <div class="header-sub-text">
32
+ <h3>Free AI Models for JavaScript Web Development</h3>
33
+ </div>
34
+ </div>
35
+ <hr> <!-- Separator -->
36
+
37
+ <!-- Back to Home button -->
38
+ <div class="row mt-5">
39
+ <div class="col-md-12 text-center">
40
+ <a href="index.html" class="btn btn-outline-secondary"
41
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Content -->
46
+ <div class="container mt-5">
47
+ <!-- Centered Titles -->
48
+ <div class="text-center">
49
+ <h2>Computer Vision</h2>
50
+ <h4>Zero Shot Image Classification</h4>
51
+ </div>
52
+
53
+ <!-- Actual Content of this page -->
54
+ <div id="zero-shot-image-classification-container" class="container mt-4">
55
+ <h5>Zero Shot Image Classification w/ Xenova/clip-vit-base-patch32:</h5>
56
+ <div class="d-flex align-items-center mb-2">
57
+ <label for="zeroShotImageClassificationURLText" class="mb-0 text-nowrap"
58
+ style="margin-right: 15px;">Enter
59
+ image URL:</label>
60
+ <input type="text" class="form-control flex-grow-1" id="zeroShotImageClassificationURLText"
61
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg"
62
+ placeholder="Enter image" style="margin-right: 15px; margin-left: 15px;">
63
+ </div>
64
+ <div class="d-flex align-items-center">
65
+ <label for="labelsText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Labels (comma
66
+ separated):</label>
67
+ <input type="text" class="form-control flex-grow-1" id="labelsText" value="tiger, horse, dog"
68
+ placeholder="Enter labels (comma separated)" style="margin-right: 15px; margin-left: 15px;">
69
+ <button id="classifyButton" class="btn btn-primary ml-2" onclick="classifyImage()">Classify</button>
70
+ </div>
71
+ <div class="mt-4">
72
+ <h4>Output:</h4>
73
+ <pre id="outputArea"></pre>
74
+ </div>
75
+ </div>
76
+
77
+ <hr> <!-- Line Separator -->
78
+
79
+ <div id="zero-shot-image-classification-local-container" class="container mt-4">
80
+ <h5>Zero Shot Image Classification Local File:</h5>
81
+ <div class="d-flex align-items-center mb-2">
82
+ <label for="imageClassificationLocalFile" class="mb-0 text-nowrap"
83
+ style="margin-right: 15px;">Select Local Image:</label>
84
+ <input type="file" id="imageClassificationLocalFile" accept="image/*" />
85
+ </div>
86
+ <div class="d-flex align-items-center">
87
+ <label for="labelsLocalText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Labels (comma
88
+ separated):</label>
89
+ <input type="text" class="form-control flex-grow-1" id="labelsLocalText" value="tiger, horse, dog"
90
+ placeholder="Enter labels (comma separated)" style="margin-right: 15px; margin-left: 15px;">
91
+ <button id="classifyLocalButton" class="btn btn-primary ml-2" onclick="classifyLocalImage()">Classify</button>
92
+ </div>
93
+ <div class="mt-4">
94
+ <h4>Output:</h4>
95
+ <pre id="outputAreaLocal"></pre>
96
+ </div>
97
+ </div>
98
+
99
+ </div>
100
+
101
+ <!-- Back to Home button -->
102
+ <div class="row mt-5">
103
+ <div class="col-md-12 text-center">
104
+ <a href="index.html" class="btn btn-outline-secondary"
105
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <script>
112
+
113
+ let classifier;
114
+
115
+ // Initialize the sentiment analysis model
116
+ async function initializeModel() {
117
+ classifier = await pipeline('zero-shot-image-classification', 'Xenova/clip-vit-base-patch32');
118
+
119
+ }
120
+
121
+ async function classifyImage() {
122
+ const textFieldValue = document.getElementById("zeroShotImageClassificationURLText").value.trim();
123
+ const labels = document.getElementById("labelsText").value.trim().split(",").map(item => item.trim());
124
+
125
+ const result = await classifier(textFieldValue, labels);
126
+
127
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
128
+ }
129
+
130
+ async function classifyLocalImage() {
131
+ const fileInput = document.getElementById("imageClassificationLocalFile");
132
+ const file = fileInput.files[0];
133
+
134
+ if (!file) {
135
+ alert('Please select an image file first.');
136
+ return;
137
+ }
138
+
139
+ // Create a Blob URL from the file
140
+ const url = URL.createObjectURL(file);
141
+ const labels = document.getElementById("labelsLocalText").value.trim().split(",").map(item => item.trim());
142
+
143
+ const result = await classifier(url, labels);
144
+
145
+ document.getElementById("outputAreaLocal").innerText = JSON.stringify(result, null, 2);
146
+ }
147
+
148
+ // Initialize the model after the DOM is completely loaded
149
+ window.addEventListener("DOMContentLoaded", initializeModel);
150
+ </script>
151
+ </body>
152
+
153
+ </html>