Spaces:

Javedalam
/

Language-translation-in-browser

Running

App Files Files Community

Javedalam commited on Sep 5

Commit

01723a1

verified ·

1 Parent(s): 94560fa

Update index.html

Browse files

Files changed (1) hide show

index.html +113 -78

index.html CHANGED Viewed

@@ -15,6 +15,8 @@
     #progress-wrap { margin: 10px 0; display:none; }
     #footer { opacity:.7; margin-top:12px; font-size:12px; }
     .muted { opacity:.8 }
   </style>
 </head>
 <body>
@@ -59,89 +61,122 @@
     Tip: first load downloads the model; later loads are much faster thanks to browser cache.
   </div>
-  <!-- Use unpkg CDN (jsDelivr failed in your Space) -->
-  <script src="https://unpkg.com/@xenova/transformers@3.0.0/dist/transformers.min.js"></script>
   <script>
-    // Grab DOM elements
-    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");
-    // Enable button right away
-    btn.disabled = false;
-    btn.value = "Translate";
-    // Transformers.js UMD bundle
-    const tf = window.transformers;
-    if (!tf) {
-      document.body.insertAdjacentHTML('beforeend',
-        '<p style="color:#b00">❌ Failed to load Transformers.js. Check CDN/network.</p>');
-    }
-    let translator = null;
-    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}%`;
       }
-    }
-    async function getTranslator() {
-      if (translator) return translator;
-      showProgressUI(true, "Loading model…");
-      try {
-        const { pipeline, env } = tf;
-        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 () => {
-      const prev = btn.value;
-      btn.disabled = true; btn.value = "Working…";
-      try {
-        const t = await getTranslator();
-        const text = (fromEl.value || "").trim();
-        if (!text) { out.value = "Please type some text."; return; }
-        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>

     #progress-wrap { margin: 10px 0; display:none; }
     #footer { opacity:.7; margin-top:12px; font-size:12px; }
     .muted { opacity:.8 }
+    .error { color:#b00 }
+    .ok { color:#0a0 }
   </style>
 </head>
 <body>
     Tip: first load downloads the model; later loads are much faster thanks to browser cache.
   </div>
+  <div id="libStatus" class="error"></div>
+  <!-- Loader that tries multiple CDNs, then local file -->
   <script>
+    (function loadTransformersUMD() {
+      const tries = [
+        "https://cdn.jsdelivr.net/npm/@xenova/transformers@3.0.0/dist/transformers.min.js",
+        "https://unpkg.com/@xenova/transformers@3.0.0/dist/transformers.min.js",
+        "https://huggingface.co/datasets/Xenova/transformers.js/resolve/main/3.0.0/transformers.min.js",
+        "./transformers.min.js"  // <- upload this file as a final fallback
+      ];
+      const statusEl = document.getElementById("libStatus");
+      function tryNext(i) {
+        if (i >= tries.length) {
+          statusEl.textContent = "❌ Failed to load Transformers.js from all sources.";
+          return;
+        }
+        const src = tries[i];
+        const s = document.createElement("script");
+        s.src = src;
+        s.async = true;
+        s.onload = () => {
+          if (window.transformers) {
+            statusEl.className = "ok";
+            statusEl.textContent = "✅ Transformers.js loaded from: " + src;
+            initApp();
+          } else {
+            statusEl.textContent = "⚠️ Loaded but window.transformers missing: " + src;
+            tryNext(i + 1);
+          }
+        };
+        s.onerror = () => {
+          statusEl.textContent = "⚠️ Failed: " + src + " — trying next…";
+          tryNext(i + 1);
+        };
+        document.head.appendChild(s);
       }
+      tryNext(0);
+      // initApp runs only after the library is present
+      function initApp() {
+        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";
+        const tf = window.transformers;
+        let translator = null;
+        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}%`;
+          }
+        }
+        async function getTranslator() {
+          if (translator) return translator;
+          showProgressUI(true, "Loading model…");
+          try {
+            const { pipeline, env } = tf;
+            env.useBrowserCache = true;
+            env.allowLocalModels = false;
+            // If WASM fallback happens, more threads help a bit
+            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 () => {
+          const prev = btn.value;
+          btn.disabled = true; btn.value = "Working…";
+          try {
+            const t = await getTranslator();
+            const text = (fromEl.value || "").trim();
+            if (!text) { out.value = "Please type some text."; return; }
+            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>