Hugging Face's logo

Spaces:
HAV0X1014
/
WebGPU-LFM2-350M-ENJP-MT-Translator
Running

App Files Community
HAV0X1014 commited on
Commit
a43db04
Β·
verified Β·
1 Parent(s): a64aa6d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +248 -19
index.html CHANGED
@@ -1,19 +1,248 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LFM2-350M EN/JP WebGPU Translator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ body { font-family: 'Inter', sans-serif; }
10
+ /* Custom scrollbar for textareas */
11
+ textarea::-webkit-scrollbar { width: 8px; }
12
+ textarea::-webkit-scrollbar-track { background: #f1f1f1; }
13
+ textarea::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
14
+ textarea::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
15
+
16
+ .loading-dots:after {
17
+ content: '.';
18
+ animation: dots 1.5s steps(5, end) infinite;
19
+ }
20
+ @keyframes dots {
21
+ 0%, 20% { content: '.'; }
22
+ 40% { content: '..'; }
23
+ 60% { content: '...'; }
24
+ 80%, 100% { content: ''; }
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col items-center py-10 px-4">
29
+
30
+ <div class="max-w-4xl w-full bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100">
31
+ <!-- Header -->
32
+ <div class="bg-gradient-to-r from-blue-600 to-indigo-600 p-6 text-white">
33
+ <h1 class="text-3xl font-bold flex items-center gap-2">
34
+ <span>🌊</span> Liquid LFM2-350M Translator
35
+ </h1>
36
+ <p class="mt-2 opacity-90 text-sm">
37
+ Running locally in your browser using <b>WebGPU</b>.
38
+ <span class="bg-white/20 px-2 py-0.5 rounded text-xs ml-2 border border-white/30">LFM2-350M-ENJP-MT</span>
39
+ </p>
40
+ </div>
41
+
42
+ <!-- Controls -->
43
+ <div class="p-6 border-b border-gray-100 flex flex-wrap items-center justify-between gap-4">
44
+ <div class="flex items-center gap-3 bg-gray-100 p-1.5 rounded-lg">
45
+ <button id="btn-en-jp" class="px-4 py-2 rounded-md text-sm font-medium transition-all shadow-sm bg-white text-blue-700">
46
+ πŸ‡ΊπŸ‡Έ EN ➝ πŸ‡―πŸ‡΅ JP
47
+ </button>
48
+ <button id="btn-jp-en" class="px-4 py-2 rounded-md text-sm font-medium transition-all text-gray-500 hover:text-gray-700">
49
+ πŸ‡―πŸ‡΅ JP ➝ πŸ‡ΊπŸ‡Έ EN
50
+ </button>
51
+ </div>
52
+
53
+ <div id="status-container" class="text-sm font-medium text-gray-500 flex items-center gap-2">
54
+ <div class="w-2 h-2 rounded-full bg-yellow-400 animate-pulse"></div>
55
+ <span id="status-text">Initializing WebGPU...</span>
56
+ </div>
57
+ </div>
58
+
59
+ <!-- Translation Area -->
60
+ <div class="grid grid-cols-1 md:grid-cols-2 h-[500px] divide-y md:divide-y-0 md:divide-x divide-gray-100">
61
+ <!-- Input -->
62
+ <div class="flex flex-col h-full bg-white">
63
+ <div class="px-4 py-2 text-xs font-bold text-gray-400 uppercase tracking-wider bg-gray-50 border-b border-gray-100">Input</div>
64
+ <textarea id="input-text"
65
+ class="flex-1 w-full p-4 resize-none outline-none text-lg bg-white placeholder-gray-300"
66
+ placeholder="Enter text to translate here..."
67
+ spellcheck="false"></textarea>
68
+ <div class="p-3 border-t border-gray-100 flex justify-end bg-gray-50">
69
+ <button id="translate-btn" disabled
70
+ class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white px-6 py-2 rounded-lg font-semibold transition-colors flex items-center gap-2 shadow-sm">
71
+ <span>Translate</span>
72
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
73
+ </button>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Output -->
78
+ <div class="flex flex-col h-full bg-slate-50">
79
+ <div class="px-4 py-2 text-xs font-bold text-gray-400 uppercase tracking-wider bg-slate-100 border-b border-gray-200">Output</div>
80
+ <div class="relative flex-1">
81
+ <textarea id="output-text" readonly
82
+ class="w-full h-full p-4 resize-none outline-none text-lg bg-slate-50 text-gray-700"
83
+ placeholder="Translation will appear here..."></textarea>
84
+ <div id="loading-overlay" class="hidden absolute inset-0 bg-white/50 backdrop-blur-[1px] flex items-center justify-center">
85
+ <div class="bg-white px-4 py-2 rounded-full shadow-lg border border-gray-100 text-blue-600 font-medium flex items-center gap-3">
86
+ <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
87
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
88
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
89
+ </svg>
90
+ Generating<span class="loading-dots"></span>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="mt-6 text-center text-xs text-gray-400">
99
+ Powered by <a href="https://huggingface.co/docs/transformers.js" class="underline hover:text-gray-600">Transformers.js</a> &
100
+ <a href="https://huggingface.co/LiquidAI/LFM2-350M-ENJP-MT" class="underline hover:text-gray-600">LiquidAI/LFM2-350M-ENJP-MT</a>
101
+ </div>
102
+
103
+ <!-- Logic -->
104
+ <script type="module">
105
+ import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers';
106
+
107
+ // Configuration
108
+ // Using the ONNX community version which is optimized for web
109
+ const MODEL_ID = 'onnx-community/LFM2-350M-ENJP-MT-ONNX';
110
+
111
+ // DOM Elements
112
+ const inputText = document.getElementById('input-text');
113
+ const outputText = document.getElementById('output-text');
114
+ const translateBtn = document.getElementById('translate-btn');
115
+ const statusText = document.getElementById('status-text');
116
+ const statusContainer = document.getElementById('status-container');
117
+ const loadingOverlay = document.getElementById('loading-overlay');
118
+ const btnEnJp = document.getElementById('btn-en-jp');
119
+ const btnJpEn = document.getElementById('btn-jp-en');
120
+
121
+ // State
122
+ let generator = null;
123
+ let direction = 'EN-JP'; // or 'JP-EN'
124
+
125
+ // Initialize WebGPU Pipeline
126
+ async function loadModel() {
127
+ try {
128
+ // Skip local check to force loading from HF Hub
129
+ env.allowLocalModels = false;
130
+
131
+ statusText.textContent = "Loading model (approx 300MB)...";
132
+
133
+ // Load the text-generation pipeline
134
+ generator = await pipeline('text-generation', MODEL_ID, {
135
+ device: 'webgpu',
136
+ dtype: 'q4', // Use 4-bit quantization for efficiency
137
+ progress_callback: (data) => {
138
+ if (data.status === 'progress') {
139
+ const percent = Math.round(data.progress * 100);
140
+ statusText.textContent = `Loading: ${percent}%`;
141
+ } else if (data.status === 'ready') {
142
+ statusText.textContent = "Model loaded!";
143
+ }
144
+ }
145
+ });
146
+
147
+ // Update UI
148
+ statusContainer.innerHTML = `
149
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
150
+ <span class="text-green-600">Ready</span>
151
+ `;
152
+ translateBtn.disabled = false;
153
+ console.log("Model loaded successfully");
154
+
155
+ } catch (err) {
156
+ console.error(err);
157
+ statusContainer.innerHTML = `
158
+ <div class="w-2 h-2 rounded-full bg-red-500"></div>
159
+ <span class="text-red-600">Error: WebGPU not supported or Load Failed</span>
160
+ `;
161
+ statusText.textContent = "Error loading model. Ensure WebGPU is enabled.";
162
+ }
163
+ }
164
+
165
+ // Translation Logic
166
+ async function translate() {
167
+ if (!generator) return;
168
+
169
+ const text = inputText.value.trim();
170
+ if (!text) return;
171
+
172
+ // UI updates
173
+ translateBtn.disabled = true;
174
+ loadingOverlay.classList.remove('hidden');
175
+ outputText.value = "";
176
+
177
+ try {
178
+ // Define system prompt based on direction
179
+ // LFM2 requires specific system prompts for directionality
180
+ const systemPrompt = direction === 'EN-JP'
181
+ ? "Translate to Japanese."
182
+ : "Translate to English.";
183
+
184
+ // Create conversation format
185
+ const messages = [
186
+ { role: "system", content: systemPrompt },
187
+ { role: "user", content: text }
188
+ ];
189
+
190
+ // Generate
191
+ // Note: The model is a causal LM, we use the chat template to format input
192
+ const output = await generator(messages, {
193
+ max_new_tokens: 256,
194
+ temperature: 0.3,
195
+ repetition_penalty: 1.05,
196
+ do_sample: true,
197
+ });
198
+
199
+ // Parse result
200
+ // The output usually contains the full conversation. We need to extract the assistant's reply.
201
+ // Transformers.js pipeline output for chat inputs returns a generated_text object
202
+ let result = output[0].generated_text;
203
+
204
+ // If the output is the full array of messages (common in newer transformers.js versions)
205
+ if (Array.isArray(result)) {
206
+ result = result[result.length - 1].content;
207
+ } else if (typeof result === 'string') {
208
+ // Fallback manual parsing if needed (depends on version behavior)
209
+ // Usually <|im_start|>assistant ...
210
+ const parts = result.split('<|im_start|>assistant');
211
+ if (parts.length > 1) {
212
+ result = parts[parts.length - 1].replace('<|im_end|>', '').trim();
213
+ }
214
+ }
215
+
216
+ outputText.value = result;
217
+
218
+ } catch (err) {
219
+ console.error(err);
220
+ outputText.value = "Error during translation: " + err.message;
221
+ } finally {
222
+ translateBtn.disabled = false;
223
+ loadingOverlay.classList.add('hidden');
224
+ }
225
+ }
226
+
227
+ // Event Listeners
228
+ translateBtn.addEventListener('click', translate);
229
+
230
+ btnEnJp.addEventListener('click', () => {
231
+ direction = 'EN-JP';
232
+ btnEnJp.className = "px-4 py-2 rounded-md text-sm font-medium transition-all shadow-sm bg-white text-blue-700";
233
+ btnJpEn.className = "px-4 py-2 rounded-md text-sm font-medium transition-all text-gray-500 hover:text-gray-700";
234
+ inputText.placeholder = "Enter English text...";
235
+ });
236
+
237
+ btnJpEn.addEventListener('click', () => {
238
+ direction = 'JP-EN';
239
+ btnJpEn.className = "px-4 py-2 rounded-md text-sm font-medium transition-all shadow-sm bg-white text-blue-700";
240
+ btnEnJp.className = "px-4 py-2 rounded-md text-sm font-medium transition-all text-gray-500 hover:text-gray-700";
241
+ inputText.placeholder = "ζ—₯本θͺžγ‚’ε…₯εŠ›γ—γ¦γγ γ•γ„...";
242
+ });
243
+
244
+ // Start loading
245
+ loadModel();
246
+ </script>
247
+ </body>
248
+ </html>