Update progress_callback.js

progress_callback.js

@@ -1,49 +1,70 @@
-        status.textContent = "Ready! RAM usage minimized.";
+import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
+
+// CONFIG MUST COME FIRST
+env.allowRemoteModels = true;
+env.allowLocalModels = false;
+env.backends.onnx.wasm.numThreads = 1; // Stick to 1 for stability on mobile
+env.backends.onnx.wasm.proxy = false;
+
+const status = document.getElementById('status');
+const btn = document.getElementById('main-btn');
+const input = document.getElementById('chat-input');
+const chatBox = document.getElementById('chat-box');
+let generator = null;
+
+async function init() {
+    try {
+        btn.disabled = true;
+        status.textContent = "Downloading Model (Stay on page)...";
+
+        generator = await pipeline(
+            'text-generation',
+            'Xenova/phi-1_5-tiny-onnx',
+            {
+                device: 'wasm',
+                dtype: 'q4', // Critical: Using 4-bit quantization to save RAM
+                progress_callback: (d) => {
+                    if (d.status === 'progress') {
+                        status.textContent = `Loading: ${Math.round(d.progress)}%`;
+                    }
+                }
+            }
+        );
+
+        status.textContent = "Ready!";
         btn.textContent = "Send";
         input.disabled = false;
         btn.disabled = false;
 
         btn.onclick = async () => {
             const userText = input.value.trim();
-            if (!userText || btn.disabled) return;
+            if (!userText) return;
 
-            // UI Updates
+            addMessage('user', userText);
             input.value = '';
-            btn.disabled = true;
-            status.textContent = "Thinking...";
+            status.textContent = "AI is thinking...";
             
-            addMessage('user', userText);
+            const output = await generator(userText, { 
+                max_new_tokens: 30, // Keep this low for mobile
+                temperature: 0.7 
+            });
 
-            try {
-                const output = await generator(userText, { 
-                    max_new_tokens: 50,
-                    temperature: 0.7,
-                    do_sample: true 
-                });
-                
-                addMessage('ai', output[0].generated_text);
-            } catch (err) {
-                console.error("Generation Error:", err);
-                status.textContent = "Error during generation.";
-            } finally {
-                status.textContent = "Ready!";
-                btn.disabled = false;
-            }
+            addMessage('ai', output[0].generated_text.replace(userText, '').trim());
+            status.textContent = "Ready!";
         };
     } catch (e) {
-        console.error("Initialization Error:", e);
-        status.innerHTML = `<span style="color: red;">Failed to load model: ${e.message}</span>`;
+        status.textContent = "Error: Mobile RAM limit hit.";
+        console.error(e);
     }
 }
 
-// Helper function to append messages to your chat container
 function addMessage(sender, text) {
-    const container = document.getElementById('chat-container'); // Ensure this ID exists in your HTML
     const msgDiv = document.createElement('div');
-    msgDiv.className = `message ${sender}-message`;
+    msgDiv.className = `msg ${sender}-message`;
     msgDiv.textContent = text;
-    container.appendChild(msgDiv);
-    container.scrollTop = container.scrollHeight;
+    chatBox.appendChild(msgDiv);
+    chatBox.scrollTop = chatBox.scrollHeight;
 }
 
+// Start the process
 init();