Hugging Face's logo

Spaces:
oceankim
/
xformjs
Running

App Files Community
boazchung commited on
Commit
fea0eb7
•
1 Parent(s): e316c46

Upload 7 files

Browse files
Files changed (7) hide show
  1. image-classification.html +163 -0
  2. image-to-text.html +135 -0
  3. index.html +211 -0
  4. sentiments.html +224 -0
  5. text-to-text-generation.html +140 -0
  6. zero-shot-classification.html +141 -0
  7. zeroshotimageclassification.html +153 -0
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>
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>
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>
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>
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>