Update index.html

index.html

@@ -95,10 +95,13 @@
     const CDN_PRIMARY  = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
     const CDN_FALLBACK = 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
 
+    // Prefer WebGPU; gracefully fall back if unavailable
+    const device = ('gpu' in navigator) ? 'webgpu' : 'auto';
+
     // Smallest first: q4 → q4f16 → int8 → fp16
     const options = {
-      device: 'webgpu',        // force WebGPU
-      dtype:  'q4',            // prefer smallest ONNX weights (model_q4.onnx + .onnx_data)
+      device,                 // prefer WebGPU; fallback to auto if not available
+      dtype:  'q4',           // smallest ONNX weights (model_q4.onnx + .onnx_data)
       progress_callback: setProgress,
     };
 
@@ -182,9 +185,13 @@ def f(nums):
     let pipe=null, cancelled=false, abortGen=null;
 
     // ================= Utils =================
-    function log(...a){ const s=a.map(x=>typeof x==='string'?x:JSON.stringify(x)).join(' ');
+    function log(...a){
+      const s=a.map(x=>typeof x==='string'?x:JSON.stringify(x)).join(' ');
       logDiv.textContent += s + '
-'; logDiv.scrollTop=logDiv.scrollHeight; console.log('[LOG]',...a); }
+';
+      logDiv.scrollTop=logDiv.scrollHeight;
+      console.log('[LOG]',...a);
+    }
     function chip(kind,text){ statusChip.className='chip '+(kind||''); statusChip.textContent=text; statusChip.style.display='inline-flex'; }
     function clearChip(){ statusChip.style.display='none'; }
     function setProgress(evt){ if(evt?.status==='progress'){ const pct=Math.round(Math.max(0,Math.min(100,evt.progress||0))); pbar.value=pct; plabel.textContent=`${pct}% ${evt?.name||evt?.file||''}`.trim(); } else if(evt?.status){ log(`status: ${evt.status} ${evt?.name||evt?.file||''}`); } }
@@ -199,7 +206,7 @@ def f(nums):
 
     function renderExamples(){
       exWrap.innerHTML='';
-      EXAMPLES.forEach((ex,i)=>{
+      EXAMPLES.forEach((ex)=>{
         const b=document.createElement('button');
         b.textContent=ex.title; b.className='ghost';
         b.addEventListener('click',()=>{
@@ -229,6 +236,12 @@ def f(nums):
         cancelBtn.style.display='inline-block';
         loading.style.display='block'; pbar.value=0; plabel.textContent='0%';
         const { pipeline } = await importTransformers();
+        if (device !== 'webgpu') {
+          log('WebGPU not detected; falling back to device=auto (WASM/CPU).');
+          chip('warn','WebGPU not detected — using auto');
+        } else {
+          log('WebGPU detected.');
+        }
         log('Transformers.js loaded. Creating text-generation pipeline…');
         pipe = await pipeline('text-generation', MODEL_ID, options);
         if(cancelled) log('Note: cancel only resets UI and cannot interrupt underlying downloads.');