Spaces:

Javedalam
/

Language-translation-in-browser

Running

App Files Files Community

Javedalam commited on Sep 5

Commit

26f161e

verified ·

1 Parent(s): cba6b29

Update index.html

Browse files

Files changed (1) hide show

index.html +74 -96

index.html CHANGED Viewed

@@ -3,25 +3,23 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <title>Transformers.js load test + NLLB demo</title>
   <style>
-    body { font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 16px; }
-    label { display:block; margin: 8px 0 4px; }
-    textarea { width: 100%; min-height: 120px; }
-    select, input[type="submit"] { padding: 8px; font: inherit; }
-    #row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
-    #progress-wrap { margin:10px 0; display:none; }
-    .muted { opacity:.75 }
     .ok { color:#0a0 } .err{ color:#b00 } .warn{ color:#b66 }
-    pre { background:#f6f6f6; padding:8px; overflow:auto }
   </style>
 </head>
 <body>
   <h1>NLLB translation in browser</h1>
-  <div id="status" class="muted">Loading library…</div>
-  <div id="row" style="margin-top:12px">
     <div>
       <label for="src_lang">Source language</label>
       <select id="src_lang">
@@ -45,9 +43,8 @@
   <label for="from">Input text</label>
   <textarea id="from" placeholder="Type text to translate"></textarea>
-  <!-- Progress UI -->
   <div id="progress-wrap">
-    <progress id="loadProgress" value="0" max="1" style="width:100%;"></progress>
     <div id="progressText" class="muted">Initializing…</div>
   </div>
@@ -56,115 +53,95 @@
   <label for="to" style="margin-top:12px">Output</label>
   <textarea id="to" readonly>Output will be here...</textarea>
-  <hr/>
-  <details>
-    <summary>Debug</summary>
-    <div id="debug"></div>
-  </details>
-  <!-- Loader: try ESM import first; if that fails, try UMD global by injecting a classic <script> -->
   <script>
-    const status = document.getElementById('status');
-    const debug = document.getElementById('debug');
-    function log(line, cls='') {
-      const p = document.createElement('div');
-      if (cls) p.className = cls;
-      p.textContent = line;
-      debug.appendChild(p);
-    }
     async function loadTransformers() {
-      // 1) Try as ESM module
-      try {
-        // IMPORTANT: only attempt module import; no prior classic <script> tag present.
-        const mod = await import('./transformers.min.js');
-        if (mod && (typeof mod.pipeline === 'function')) {
-          window.transformers = mod; // expose for app code
-          status.textContent = '✅ Loaded Transformers.js via ESM import.';
-          log('Loaded via ESM', 'ok');
-          return;
-        } else {
-          log('ESM import succeeded but pipeline() missing.', 'warn');
-          // fall through to UMD
-        }
-      } catch (e) {
-        log('ESM import threw: ' + (e && e.message ? e.message : String(e)), 'err');
       }
-      // 2) Try as UMD global by injecting classic script
       await new Promise((resolve) => {
         const s = document.createElement('script');
-        s.src = './transformers.min.js';
-        s.onload = () => resolve();
-        s.onerror = () => resolve();
         document.head.appendChild(s);
       });
-      if (window.transformers && typeof window.transformers.pipeline === 'function') {
-        status.textContent = '✅ Loaded Transformers.js via UMD global.';
-        log('Loaded via UMD (global window.transformers exists)', 'ok');
-      } else {
-        status.innerHTML = '<span class="err">❌ Could not load Transformers.js as ESM or UMD.</span>';
-        log('window.transformers is ' + typeof window.transformers, 'err');
       }
     }
-    loadTransformers().then(setupApp);
-    function setupApp() {
-      if (!(window.transformers && window.transformers.pipeline)) return;
       const btn = document.getElementById("submit");
       const out = document.getElementById("to");
       const fromEl = document.getElementById("from");
       const srcEl = document.getElementById("src_lang");
       const tgtEl = document.getElementById("tgt_lang");
-      const wrap = document.getElementById("progress-wrap");
-      const bar  = document.getElementById("loadProgress");
-      const txt  = document.getElementById("progressText");
       btn.disabled = false;
       btn.value = "Translate";
-      function showProgressUI(show, message) {
-        wrap.style.display = show ? "" : "none";
-        if (message) txt.textContent = message;
-        bar.value = 0; bar.max = 1;
-      }
-      function progressCallback(p) {
-        if (p.status) txt.textContent = p.status;
-        if (typeof p.loaded === "number" && typeof p.total === "number" && p.total > 0) {
-          bar.max = p.total;
-          bar.value = p.loaded;
-          const pct = Math.round((p.loaded / p.total) * 100);
-          txt.textContent = `Downloading ${p.file || "model"}… ${pct}%`;
-        }
-      }
       let translator = null;
       async function getTranslator() {
         if (translator) return translator;
         showProgressUI(true, "Loading model…");
-        try {
-          const { pipeline, env } = window.transformers;
-          env.useBrowserCache = true;
-          env.allowLocalModels = false;
-          env.backends.onnx.wasm.numThreads = Math.max(4, Math.min(8, navigator.hardwareConcurrency || 4));
-          translator = await pipeline("translation", "Xenova/nllb-200-distilled-600M", {
-            device: (navigator.gpu ? "webgpu" : "wasm"),
-            progress_callback: progressCallback
-          });
-          txt.textContent = "✅ Model ready";
-          bar.max = 1; bar.value = 1;
-          return translator;
-        } catch (e) {
-          console.error(e);
-          txt.textContent = "❌ Error loading model — see console.";
-          throw e;
-        }
       }
       btn.addEventListener("click", async () => {
@@ -177,12 +154,13 @@
           const res = await t(text, { src_lang: srcEl.value, tgt_lang: tgtEl.value, max_length: 128 });
           out.value = res?.[0]?.translation_text || "(no output)";
         } catch (e) {
           out.value = "❌ Translation failed. See console.";
         } finally {
           btn.disabled = false; btn.value = prev;
         }
       });
-    }
   </script>
 </body>
 </html>

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>NLLB translation in browser</title>
   <style>
+    body { font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin:16px; }
+    h1 { margin:0 0 12px }
+    label { display:block; margin:8px 0 4px }
+    textarea { width:100%; min-height:120px }
+    select, input[type="submit"] { padding:8px; font:inherit }
+    #row { display:grid; grid-template-columns:1fr 1fr; gap:12px }
+    #progress-wrap { margin:10px 0; display:none }
+    .muted { opacity:.8 }
     .ok { color:#0a0 } .err{ color:#b00 } .warn{ color:#b66 }
   </style>
 </head>
 <body>
   <h1>NLLB translation in browser</h1>
+  <div id="row">
     <div>
       <label for="src_lang">Source language</label>
       <select id="src_lang">
   <label for="from">Input text</label>
   <textarea id="from" placeholder="Type text to translate"></textarea>
   <div id="progress-wrap">
+    <progress id="loadProgress" value="0" max="1" style="width:100%"></progress>
     <div id="progressText" class="muted">Initializing…</div>
   </div>
   <label for="to" style="margin-top:12px">Output</label>
   <textarea id="to" readonly>Output will be here...</textarea>
+  <div id="status" class="muted" style="margin-top:8px">Loading library…</div>
   <script>
+    const statusEl = document.getElementById('status');
     async function loadTransformers() {
+      // Try ESM from CDNs (like julien-c’s page)
+      const cdns = [
+        'https://cdn.jsdelivr.net/npm/@xenova/[email protected]',
+        'https://unpkg.com/@xenova/transformers@3.0.0'
+      ];
+      for (const url of cdns) {
+        try {
+          statusEl.textContent = `Trying ESM: ${url}`;
+          const mod = await import(/* @vite-ignore */ url);
+          if (mod?.pipeline) {
+            window.transformers = mod; // expose
+            statusEl.textContent = `✅ Loaded via ESM: ${url}`;
+            return;
+          }
+        } catch (_) {}
       }
+      // Fallback: local UMD (needs real ~3–4 MB bundle in repo root)
+      statusEl.textContent = 'Trying local UMD ./transformers.min.js…';
       await new Promise((resolve) => {
         const s = document.createElement('script');
+        s.src = './transformers.min.js?v=' + Math.random();
+        s.onload = resolve; s.onerror = resolve;
         document.head.appendChild(s);
       });
+      if (window.transformers?.pipeline) {
+        statusEl.textContent = '✅ Loaded via local UMD (./transformers.min.js)';
+        return;
       }
+      statusEl.textContent = '❌ Could not load Transformers.js (ESM or UMD).';
     }
+    function showProgressUI(show, message) {
+      const wrap = document.getElementById("progress-wrap");
+      const txt = document.getElementById("progressText");
+      const bar = document.getElementById("loadProgress");
+      wrap.style.display = show ? "" : "none";
+      if (message) txt.textContent = message;
+      bar.value = 0; bar.max = 1;
+    }
+    function progressCallback(p) {
+      const txt = document.getElementById("progressText");
+      const bar = document.getElementById("loadProgress");
+      if (p.status) txt.textContent = p.status;
+      if (typeof p.loaded === "number" && typeof p.total === "number" && p.total > 0) {
+        bar.max = p.total; bar.value = p.loaded;
+        const pct = Math.round((p.loaded / p.total) * 100);
+        txt.textContent = `Downloading ${p.file || "model"}… ${pct}%`;
+      }
+    }
+    (async () => {
+      await loadTransformers();
+      const tf = window.transformers;
+      if (!(tf && tf.pipeline)) return;
       const btn = document.getElementById("submit");
       const out = document.getElementById("to");
       const fromEl = document.getElementById("from");
       const srcEl = document.getElementById("src_lang");
       const tgtEl = document.getElementById("tgt_lang");
+      // env setup
+      const { env } = tf;
+      env.useBrowserCache = true;
+      env.allowLocalModels = false;
+      env.backends.onnx.wasm.numThreads = Math.max(4, Math.min(8, navigator.hardwareConcurrency || 4));
       btn.disabled = false;
       btn.value = "Translate";
       let translator = null;
       async function getTranslator() {
         if (translator) return translator;
         showProgressUI(true, "Loading model…");
+        translator = await tf.pipeline("translation", "Xenova/nllb-200-distilled-600M", {
+          device: (navigator.gpu ? "webgpu" : "wasm"),
+          progress_callback: progressCallback
+        });
+        document.getElementById("progressText").textContent = "✅ Model ready";
+        const bar = document.getElementById("loadProgress"); bar.max = 1; bar.value = 1;
+        return translator;
       }
       btn.addEventListener("click", async () => {
           const res = await t(text, { src_lang: srcEl.value, tgt_lang: tgtEl.value, max_length: 128 });
           out.value = res?.[0]?.translation_text || "(no output)";
         } catch (e) {
+          console.error(e);
           out.value = "❌ Translation failed. See console.";
         } finally {
           btn.disabled = false; btn.value = prev;
         }
       });
+    })();
   </script>
 </body>
 </html>