Spaces:

kimhyunwoo
/

g

Running

App Files Files Community

kimhyunwoo commited on Mar 13

Commit

9c24e6f

verified ·

1 Parent(s): 2cec2e5

Update index.html

Browse files

Files changed (1) hide show

index.html +10 -9

index.html CHANGED Viewed

@@ -125,7 +125,7 @@
     </style>
 </head>
 <body>
-    <h1>Gemma Chatbot</h1>
     <div id="chat-container">
         <div id="chat-messages">
@@ -141,6 +141,7 @@
     <script type="module">
         import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.js";
         env.allowRemoteModels = true;
         env.cacheDir = './cache';
@@ -160,14 +161,13 @@
             try {
                 generator = await pipeline(
                     "text-generation",
-                    "Xenova/gemma-1b-it-quantized",
                     {
-                        dtype: "q4",
                         progress_callback: (progress) => {
                             if (progress.status === 'progress') {
                                 loadingIndicator.textContent = `Loading... ${progress.file} - ${Math.round(progress.loaded / 1000000)}MB/${Math.round(progress.total / 1000000)}MB`;
                             }
-                            // IMPORTANT: Set loading indicator to complete when done
                             if (progress.status === 'loaded') {
                                 loadingIndicator.textContent = 'Model Loaded!';
                             }
@@ -177,18 +177,18 @@
             } catch (error) {
                 console.error("Error loading model:", error);
-                loadingIndicator.textContent = "Error loading model. Check console and ensure a modern browser and internet connection.";
                 loadingIndicator.style.color = "red";
-                sendButton.disabled = true; // Disable sending until loaded.
                 return;
             }
-            // DO NOT hide loading indicator immediately. Let progress_callback handle it.
-            // loadingIndicator.style.display = 'none';
             addMessage("bot", "Hello! I'm ready to chat. Ask me anything!");
         }
         initializePipeline();
         function addMessage(role, content) {
             const messageDiv = document.createElement('div');
             messageDiv.classList.add('message', `${role}-message`);
@@ -214,7 +214,7 @@
             try {
                 const output = await generator(chatHistory, {
                     max_new_tokens: 512,
-                    do_sample: false
                 });
                 const botResponse = output[0].generated_text.at(-1).content;
@@ -229,6 +229,7 @@
             }
         }
         sendButton.addEventListener('click', sendMessage);
         userInput.addEventListener('keypress', (event) => {
             if (event.key === 'Enter') {

     </style>
 </head>
 <body>
+    <h1>Gemma 3 Chatbot</h1>
     <div id="chat-container">
         <div id="chat-messages">
     <script type="module">
         import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.js";
+        // Allow remote models and set a cache directory.
         env.allowRemoteModels = true;
         env.cacheDir = './cache';
             try {
                 generator = await pipeline(
                     "text-generation",
+                    "onnx-community/gemma-3-1b-it-ONNX", // Use correct model name
                     {
+                        dtype: "q4",  // Use quantized weights (smaller, faster)
                         progress_callback: (progress) => {
                             if (progress.status === 'progress') {
                                 loadingIndicator.textContent = `Loading... ${progress.file} - ${Math.round(progress.loaded / 1000000)}MB/${Math.round(progress.total / 1000000)}MB`;
                             }
                             if (progress.status === 'loaded') {
                                 loadingIndicator.textContent = 'Model Loaded!';
                             }
             } catch (error) {
                 console.error("Error loading model:", error);
+                loadingIndicator.textContent = "Error loading model. Check console, internet, and browser.";
                 loadingIndicator.style.color = "red";
+                sendButton.disabled = true;
                 return;
             }
+            // Don't hide until 'loaded' in progress_callback
             addMessage("bot", "Hello! I'm ready to chat. Ask me anything!");
         }
         initializePipeline();
         function addMessage(role, content) {
             const messageDiv = document.createElement('div');
             messageDiv.classList.add('message', `${role}-message`);
             try {
                 const output = await generator(chatHistory, {
                     max_new_tokens: 512,
+                    do_sample: false  // Try setting to `true` for varied responses.
                 });
                 const botResponse = output[0].generated_text.at(-1).content;
             }
         }
         sendButton.addEventListener('click', sendMessage);
         userInput.addEventListener('keypress', (event) => {
             if (event.key === 'Enter') {