Hugging Face's logo

Spaces:
oceankim
/
xformjs
Running

App Files Community
boazchung commited on
Commit
439792e
•
1 Parent(s): bc281ad

Update _0img.html

Browse files
Files changed (1) hide show
  1. _0img.html +127 -0
_0img.html CHANGED
@@ -0,0 +1,127 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ // 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
+
23
+ <!-- Back to Home button -->
24
+ <div class="row mt-5">
25
+ <div class="col-md-12 text-center">
26
+ <a href="index.html" class="btn btn-outline-secondary"
27
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
28
+ </div>
29
+ </div>
30
+
31
+ <!-- Content -->
32
+ <div class="container mt-5">
33
+ <!-- Centered Titles -->
34
+ <div class="text-center">
35
+ <h2>Computer Vision</h2>
36
+ <h4>Zero Shot Image Classification</h4>
37
+ </div>
38
+
39
+ <!-- Actual Content of this page -->
40
+ <div id="zero-shot-image-classification-container" class="container mt-4">
41
+ <h5>Zero Shot Image Classification w/ Xenova/clip-vit-base-patch32:</h5>
42
+ <div class="d-flex align-items-center mb-2">
43
+ <label for="zeroShotImageClassificationURLText" class="mb-0 text-nowrap"
44
+ style="margin-right: 15px;">Enter
45
+ image URL:</label>
46
+ <input type="text" class="form-control flex-grow-1" id="zeroShotImageClassificationURLText"
47
+ value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg"
48
+ placeholder="Enter image" style="margin-right: 15px; margin-left: 15px;">
49
+ </div>
50
+ <div class="d-flex align-items-center">
51
+ <label for="labelsText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Labels (comma
52
+ separated):</label>
53
+ <input type="text" class="form-control flex-grow-1" id="labelsText" value="tiger, horse, dog"
54
+ placeholder="Enter labels (comma separated)" style="margin-right: 15px; margin-left: 15px;">
55
+ <button id="classifyButton" class="btn btn-primary ml-2" onclick="classifyImage()">Classify</button>
56
+ </div>
57
+ <div class="mt-4">
58
+ <h4>Output:</h4>
59
+ <pre id="outputArea"></pre>
60
+ </div>
61
+ </div>
62
+
63
+ <hr> <!-- Line Separator -->
64
+
65
+ <div id="zero-shot-image-classification-local-container" class="container mt-4">
66
+ <h5>Zero Shot Image Classification Local File:</h5>
67
+ <div class="d-flex align-items-center mb-2">
68
+ <label for="imageClassificationLocalFile" class="mb-0 text-nowrap"
69
+ style="margin-right: 15px;">Select Local Image:</label>
70
+ <input type="file" id="imageClassificationLocalFile" accept="image/*" />
71
+ </div>
72
+ <div class="d-flex align-items-center">
73
+ <label for="labelsLocalText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Labels (comma
74
+ separated):</label>
75
+ <input type="text" class="form-control flex-grow-1" id="labelsLocalText" value="tiger, horse, dog"
76
+ placeholder="Enter labels (comma separated)" style="margin-right: 15px; margin-left: 15px;">
77
+ <button id="classifyLocalButton" class="btn btn-primary ml-2" onclick="classifyLocalImage()">Classify</button>
78
+ </div>
79
+ <div class="mt-4">
80
+ <h4>Output:</h4>
81
+ <pre id="outputAreaLocal"></pre>
82
+ </div>
83
+ </div>
84
+
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
+ let classifier;
99
+ // Initialize the sentiment analysis model
100
+ async function initializeModel() {
101
+ classifier = await pipeline('zero-shot-image-classification', 'Xenova/clip-vit-base-patch32');
102
+ }
103
+ async function classifyImage() {
104
+ const textFieldValue = document.getElementById("zeroShotImageClassificationURLText").value.trim();
105
+ const labels = document.getElementById("labelsText").value.trim().split(",").map(item => item.trim());
106
+ const result = await classifier(textFieldValue, labels);
107
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
108
+ }
109
+ async function classifyLocalImage() {
110
+ const fileInput = document.getElementById("imageClassificationLocalFile");
111
+ const file = fileInput.files[0];
112
+ if (!file) {
113
+ alert('Please select an image file first.');
114
+ return;
115
+ }
116
+ // Create a Blob URL from the file
117
+ const url = URL.createObjectURL(file);
118
+ const labels = document.getElementById("labelsLocalText").value.trim().split(",").map(item => item.trim());
119
+ const result = await classifier(url, labels);
120
+ document.getElementById("outputAreaLocal").innerText = JSON.stringify(result, null, 2);
121
+ }
122
+ // Initialize the model after the DOM is completely loaded
123
+ window.addEventListener("DOMContentLoaded", initializeModel);
124
+ </script>
125
+ </body>
126
+
127
+ </html>