Hugging Face's logo

Spaces:
oceankim
/
xformjs
Running

App Files Community
boazchung commited on
Commit
6765f6e
•
1 Parent(s): 873c8d3

Update _z.html

Browse files
Files changed (1) hide show
  1. _z.html +117 -0
_z.html CHANGED
@@ -0,0 +1,117 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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/[email protected]';
11
+ // Make it available globally
12
+ window.pipeline = pipeline;
13
+ </script>
14
+
15
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>Natural Language Processing</h2>
36
+ <h4>Zero Shot Classification</h4>
37
+ </div>
38
+
39
+ <!-- Actual Content of this page -->
40
+ <div id="zero-shot-classification-container" class="container mt-4">
41
+ <h5>Zero Shot Classification with Xenova/mobilebert-uncased-mnli:</h5>
42
+ <div class="d-flex align-items-center mb-2">
43
+ <label for="textText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text:</label>
44
+ <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."
45
+ placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
46
+ </div>
47
+ <div class="d-flex align-items-center">
48
+ <label for="labelsText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Labels (comma separated):</label>
49
+ <input type="text" class="form-control flex-grow-1" id="labelsText" value="mobile, billing, website, account access"
50
+ placeholder="Enter labels (comma separated)" style="margin-right: 15px; margin-left: 15px;">
51
+ <button id="classifyButton" class="btn btn-primary ml-2"
52
+ onclick="classifyText()">Classify</button>
53
+ </div>
54
+ <div class="mt-4">
55
+ <h4>Output:</h4>
56
+ <pre id="outputArea"></pre>
57
+ </div>
58
+ </div>
59
+
60
+ <hr> <!-- Line Separator -->
61
+
62
+ <div id="zero-shot-classification-container-multi" class="container mt-4">
63
+ <h5>Zero Shot Classification with Xenova/nli-deberta-v3-xsmall (Multi-Label):</h5>
64
+ <div class="d-flex align-items-center mb-2">
65
+ <label for="textTextMulti" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text:</label>
66
+ <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!"
67
+ placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
68
+ </div>
69
+ <div class="d-flex align-items-center">
70
+ <label for="labelsTextMulti" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Labels (comma separated):</label>
71
+ <input type="text" class="form-control flex-grow-1" id="labelsTextMulti" value="urgent, not urgent, phone, tablet, computer"
72
+ placeholder="Enter labels (comma separated)" style="margin-right: 15px; margin-left: 15px;">
73
+ <button id="classifyButtonMulti" class="btn btn-primary ml-2"
74
+ onclick="classifyTextMulti()">Classify</button>
75
+ </div>
76
+ <div class="mt-4">
77
+ <h4>Output:</h4>
78
+ <pre id="outputAreaMulti"></pre>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Back to Home button -->
83
+ <div class="row mt-5">
84
+ <div class="col-md-12 text-center">
85
+ <a href="index.html" class="btn btn-outline-secondary"
86
+ style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <script>
93
+ let classifier;
94
+ let classifierMulti;
95
+ // Initialize the sentiment analysis model
96
+ async function initializeModel() {
97
+ classifier = await pipeline('zero-shot-classification', 'Xenova/mobilebert-uncased-mnli');
98
+ classifierMulti = await pipeline('zero-shot-classification', 'Xenova/nli-deberta-v3-xsmall');
99
+ }
100
+ async function classifyText() {
101
+ const text = document.getElementById("textText").value.trim();
102
+ const labels = document.getElementById("labelsText").value.trim().split(",").map(item => item.trim());
103
+ const result = await classifier(text, labels);
104
+ document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
105
+ }
106
+ async function classifyTextMulti() {
107
+ const text = document.getElementById("textTextMulti").value.trim();
108
+ const labels = document.getElementById("labelsTextMulti").value.trim().split(",").map(item => item.trim());
109
+ const result = await classifierMulti(text, labels, { multi_label: true });
110
+ document.getElementById("outputAreaMulti").innerText = JSON.stringify(result, null, 2);
111
+ }
112
+ // Initialize the model after the DOM is completely loaded
113
+ window.addEventListener("DOMContentLoaded", initializeModel);
114
+ </script>
115
+ </body>
116
+
117
+ </html>