Hugging Face's logo

Spaces:
oceankim
/
xformjs
Running

App Files Community
boazchung commited on
Commit
7d6de87
•
1 Parent(s): 198296e

Create mobilevit.html

Browse files
Files changed (1) hide show
  1. mobilevit.html +143 -0
mobilevit.html ADDED
@@ -0,0 +1,143 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ // Make it available globally
12
+ window.pipeline = pipeline;
13
+ </script>
14
+
15
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
16
+
17
+ <link rel="stylesheet" href="css/styles.css">
18
+ </head>
19
+
20
+ <body>
21
+ <div class="container-main">
22
+ <!-- Page Header -->
23
+ <div class="header">
24
+
25
+ <div class="header-main-text">
26
+ <h1>Hugging Face Transformers.js</h1>
27
+ </div>
28
+
29
+ </div>
30
+ <hr> <!-- Separator -->
31
+
32
+ <!-- Back to Home button -->
33
+ <div class="row mt-5">
34
+ <div class="col-md-12 text-center">
35
+ <a href="index.html" class="btn btn-outline-secondary"
36
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
37
+ </div>
38
+ </div>
39
+
40
+ <!-- Content -->
41
+ <div class="container mt-5">
42
+ <!-- Centered Titles -->
43
+ <div class="text-center">
44
+ <h2>Computer Vision</h2>
45
+ <h4>Mobilevit Image Classification</h4>
46
+ </div>
47
+
48
+ <!-- Actual Content of this page -->
49
+ <div id="image-classification-container" class="container mt-4">
50
+ <h5>Classify an Image:</h5>
51
+ <div class="d-flex align-items-center">
52
+ <label for="imageClassificationURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
53
+ image URL:</label>
54
+ <input type="text" class="form-control flex-grow-1" id="imageClassificationURLText"
55
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg"
56
+ placeholder="Enter image" style="margin-right: 15px; margin-left: 15px;">
57
+ <button id="ClassifyButton" class="btn btn-primary" onclick="classifyImage()">Classify</button>
58
+ </div>
59
+ <div class="mt-4">
60
+ <h4>Output:</h4>
61
+ <pre id="outputArea"></pre>
62
+ </div>
63
+ </div>
64
+
65
+ <hr> <!-- Line Separator -->
66
+
67
+ <div id="image-classification-local-container" class="container mt-4">
68
+ <h5>Classify a Local Image:</h5>
69
+ <div class="d-flex align-items-center">
70
+ <label for="imageClassificationLocalFile" class="mb-0 text-nowrap"
71
+ style="margin-right: 15px;">Select Local Image:</label>
72
+ <input type="file" id="imageClassificationLocalFile" accept="image/*" />
73
+ <button id="ClassifyButtonLocal" class="btn btn-primary"
74
+ onclick="classifyImageLocal()">Classify</button>
75
+ </div>
76
+ <div class="mt-4">
77
+ <h4>Output:</h4>
78
+ <pre id="outputAreaLocal"></pre>
79
+ </div>
80
+ </div>
81
+
82
+ <hr> <!-- Line Separator -->
83
+
84
+ <div id="image-classification-top-container" class="container mt-4">
85
+ <h5>Classify an Image and Return Top n Classes:</h5>
86
+ <div class="d-flex align-items-center">
87
+ <label for="imageClassificationTopURLText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter
88
+ image URL:</label>
89
+ <input type="text" class="form-control flex-grow-1" id="imageClassificationTopURLText"
90
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg"
91
+ placeholder="Enter image" style="margin-right: 15px; margin-left: 15px;">
92
+ <button id="ClassifyTopButton" class="btn btn-primary" onclick="classifyTopImage()">Classify</button>
93
+ </div>
94
+ <div class="mt-4">
95
+ <h4>Output:</h4>
96
+ <pre id="outputAreaTop"></pre>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Back to Home button -->
101
+ <div class="row mt-5">
102
+ <div class="col-md-12 text-center">
103
+ <a href="index.html" class="btn btn-outline-secondary"
104
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <script>
111
+ let classifier;
112
+ // Initialize the sentiment analysis model
113
+ async function initializeModel() {
114
+ classifier = await pipeline('image-classification', 'Xenova/mobilevit-small', { quantized: false });
115
+ }
116
+ async function classifyImage() {
117
+ const textFieldValue = document.getElementById("imageClassificationURLText").value.trim();
118
+ const result = await classifier(textFieldValue);
119
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
120
+ }
121
+ async function classifyImageLocal() {
122
+ const fileInput = document.getElementById("imageClassificationLocalFile");
123
+ const file = fileInput.files[0];
124
+ if (!file) {
125
+ alert('Please select an image file first.');
126
+ return;
127
+ }
128
+ // Create a Blob URL from the file
129
+ const url = URL.createObjectURL(file);
130
+ const result = await classifier(url);
131
+ document.getElementById("outputAreaLocal").innerText = JSON.stringify(result, null, 2);
132
+ }
133
+ async function classifyTopImage() {
134
+ const textFieldValue = document.getElementById("imageClassificationTopURLText").value.trim();
135
+ const result = await classifier(textFieldValue, { topk: 3 });
136
+ document.getElementById("outputAreaTop").innerText = JSON.stringify(result, null, 2);
137
+ }
138
+ // Initialize the model after the DOM is completely loaded
139
+ window.addEventListener("DOMContentLoaded", initializeModel);
140
+ </script>
141
+ </body>
142
+
143
+ </html>