Hugging Face's logo

Spaces:
luguog
/
Llmhtml
Running

App Files Community
luguog commited on
Commit
3abcba7
·
verified ·
1 Parent(s): 9bf6832

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +122 -21
index.html CHANGED
@@ -1,29 +1,130 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
-
4
  <head>
5
- <meta charset="UTF-8" />
6
- <link rel="stylesheet" href="style.css" />
7
-
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
- <title>Transformers.js - Object Detection</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  </head>
11
-
12
  <body>
13
- <h1>Object Detection w/ 🤗 Transformers.js</h1>
14
- <label id="container" for="upload">
15
- <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
16
- <path fill="#000"
17
- d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
18
- </path>
19
- </svg>
20
- Click to upload image
21
- <label id="example">(or try example)</label>
22
- </label>
23
- <label id="status">Loading model...</label>
24
- <input id="upload" type="file" accept="image/*" />
 
25
 
26
- <script src="index.js" type="module"></script>
27
- </body>
 
28
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <title>Neomorphic Transformers.js Prompt Demo</title>
6
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1"></script>
7
+ <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
8
+ <style>
9
+ body {
10
+ font-family: sans-serif;
11
+ background: #e0e0e0;
12
+ max-width: 800px;
13
+ margin: auto;
14
+ padding: 40px;
15
+ min-height: 100vh;
16
+ }
17
+ h1, label { color: #666; }
18
+ textarea, #output, button, input[type="file"] + label {
19
+ background: #e0e0e0;
20
+ border: none;
21
+ border-radius: 20px;
22
+ box-shadow: 8px 8px 16px #bebebe,
23
+ -8px -8px 16px #ffffff;
24
+ padding: 20px;
25
+ margin-bottom: 20px;
26
+ }
27
+ textarea { width: 100%; height: 200px; resize: vertical; }
28
+ button {
29
+ cursor: pointer;
30
+ font-size: 18px;
31
+ padding: 15px 30px;
32
+ transition: box-shadow 0.2s;
33
+ }
34
+ button:active {
35
+ box-shadow: inset 8px 8px 16px #bebebe,
36
+ inset -8px -8px 16px #ffffff;
37
+ }
38
+ #output { min-height: 100px; }
39
+ #file-list li {
40
+ background: #e0e0e0;
41
+ padding: 10px;
42
+ margin: 5px 0;
43
+ border-radius: 15px;
44
+ box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
45
+ }
46
+ #status { color: #888; font-style: italic; }
47
+ </style>
48
  </head>
 
49
  <body>
50
+ <h1>Neomorphic Transformers.js Live Prompt</h1>
51
+
52
+ <label>Enter Prompt:</label>
53
+ <textarea id="prompt" placeholder="Type or paste text here...">I love transformers!</textarea>
54
+
55
+ <label>Or Upload File (TXT/MD/HTML/JSON/ZIP):</label><br>
56
+ <input type="file" id="file-upload" accept=".txt,.md,.html,.json,.zip">
57
+
58
+ <button onclick="runModel()">Run Sentiment Analysis</button>
59
+
60
+ <div id="status">Loading model...</div>
61
+ <pre id="output"></pre>
62
+ <ul id="file-list"></ul>
63
 
64
+ <!-- Same script as before (unchanged for functionality) -->
65
+ <script type="module">
66
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1';
67
 
68
+ let classifier = null;
69
+ async function loadModel() {
70
+ document.getElementById('status').textContent = 'Loading model...';
71
+ classifier = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english');
72
+ document.getElementById('status').textContent = 'Model ready!';
73
+ }
74
+ loadModel();
75
+
76
+ async function runModel() {
77
+ if (!classifier) return;
78
+ const text = document.getElementById('prompt').value.trim();
79
+ if (!text) { alert('Enter or upload text!'); return; }
80
+
81
+ document.getElementById('status').textContent = 'Running...';
82
+ const result = await classifier(text);
83
+ document.getElementById('output').textContent = JSON.stringify(result, null, 2);
84
+ document.getElementById('status').textContent = 'Done!';
85
+ }
86
+
87
+ document.getElementById('file-upload').addEventListener('change', async (e) => {
88
+ const file = e.target.files[0];
89
+ if (!file) return;
90
+
91
+ const ext = file.name.split('.').pop().toLowerCase();
92
+ let text = '';
93
+
94
+ if (ext === 'zip') {
95
+ const zip = await JSZip.loadAsync(file);
96
+ const fileList = document.getElementById('file-list');
97
+ fileList.innerHTML = '<strong>ZIP Contents (click to load):</strong>';
98
+ Object.keys(zip.files).filter(name => !zip.files[name].dir).forEach(name => {
99
+ const li = document.createElement('li');
100
+ li.textContent = name;
101
+ li.onclick = async () => {
102
+ const blob = await zip.file(name).async('blob');
103
+ text = await blob.text();
104
+ processText(text, name);
105
+ };
106
+ fileList.appendChild(li);
107
+ });
108
+ return;
109
+ } else {
110
+ text = await file.text();
111
+ }
112
+
113
+ processText(text, file.name);
114
+ });
115
+
116
+ function processText(text, filename) {
117
+ try {
118
+ const data = JSON.parse(text);
119
+ if (Array.isArray(data) && data.every(m => m.role && m.content)) {
120
+ text = data.map(m => `${m.role.toUpperCase()}: ${m.content}`).join('\n\n');
121
+ document.getElementById('status').textContent = `Loaded OpenAI chat from ${filename}`;
122
+ }
123
+ } catch (e) { /* Not JSON */ }
124
+
125
+ document.getElementById('prompt').value = text;
126
+ document.getElementById('status').textContent = `Loaded ${filename}`;
127
+ }
128
+ </script>
129
+ </body>
130
  </html>