Upload 25 files
Browse files- .gitattributes +2 -0
- asr-english.html +222 -0
- asr-non-english.html +163 -0
- audio-classification.html +138 -0
- audio/french-audio.mp3 +0 -0
- audio/jfk.wav +3 -0
- audio/ted_60.wav +3 -0
- css/styles.css +94 -0
- fill-mask.html +128 -0
- image-classification.html +163 -0
- image-to-text.html +135 -0
- images/cats.jpg +0 -0
- images/logo.png +0 -0
- images/tiger.jpg +0 -0
- index.html +211 -0
- object-detection.html +137 -0
- question-answering.html +139 -0
- sentiments.html +224 -0
- summarization.html +122 -0
- text-generation.html +164 -0
- text-to-text-generation.html +140 -0
- token-classification.html +127 -0
- translation-tok-model.html +115 -0
- translation.html +136 -0
- zero-shot-classification.html +141 -0
- 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>
|