Spaces:

kimhyunwoo
/

g

Running

App Files Files Community

kimhyunwoo commited on Mar 13

Commit

b352433

verified ·

1 Parent(s): 8e1842a

Update index.html

Browse files

Files changed (1) hide show

index.html +46 -46

index.html CHANGED Viewed

@@ -3,70 +3,70 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Gemma 3 Chatbot</title>
     <style>
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* More modern font */
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             min-height: 100vh;
             margin: 0;
-            background-color: #f4f7f6; /* Light, neutral background */
         }
         h1 {
-            color: #333; /* Darker heading color */
             margin-bottom: 0.5em;
         }
         #chat-container {
-            width: 90%; /* Responsive width */
-            max-width: 700px; /* Max width for larger screens */
-            border: none; /* Remove border */
-            padding: 25px; /* More padding */
-            border-radius: 15px; /* Rounded corners */
             background-color: #fff;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-            overflow: hidden; /* Hide overflowing content */
         }
         #chat-messages {
-            height: 400px; /* Taller message area */
             overflow-y: auto;
             margin-bottom: 15px;
             padding: 15px;
-            border: 1px solid #e0e0e0; /* Lighter border */
             border-radius: 10px;
-            background-color: #fafafa; /* Very light gray background */
         }
         .message {
             margin-bottom: 10px;
             padding: 12px;
-            border-radius: 20px; /* More rounded messages */
-            max-width: 70%; /* Limit message width */
-            word-wrap: break-word; /* Wrap long words */
             box-shadow: 0 1px 2px rgba(0,0,0,0.1);
         }
-        /* User message styling */
         .user-message {
-            background-color: #d4e5ff; /* Light blue */
             color: #000;
             text-align: right;
             align-self: flex-end;
-            margin-left: auto; /* Push to the right */
-            margin-right: 10px; /* Consistent margin */
         }
-        /* Bot message styling */
         .bot-message {
-            background-color: #e5e5ea; /* Light grey */
             color: #000;
             text-align: left;
             align-self: flex-start;
-            margin-right: auto;  /* Push to the left */
             margin-left: 10px;
         }
@@ -81,20 +81,19 @@
             flex-grow: 1;
             padding: 12px;
             border: 1px solid #ccc;
-            border-radius: 20px; /* Rounded input field */
-            font-size: 16px; /* Larger font size */
-            outline: none; /* Remove default outline */
-            transition: border-color 0.2s ease-in-out; /* Smooth transition */
         }
         #user-input:focus {
-            border-color: #007bff; /* Highlight on focus */
         }
         #send-button {
             padding: 12px 25px;
-            background-color: #007bff; /* Blue button */
             color: white;
             border: none;
             border-radius: 20px;
@@ -104,7 +103,7 @@
         }
         #send-button:hover {
-            background-color: #0056b3; /* Darker blue on hover */
         }
         #send-button:disabled {
@@ -113,21 +112,20 @@
         }
         #loading-indicator {
-            display: none;  /* Hidden by default */
             margin-top: 15px;
             text-align: center;
             color: #888;
             font-style: italic;
         }
-        .system-message{
             display: none;
         }
     </style>
 </head>
 <body>
-    <h1>Gemma 3 Chatbot</h1>
     <div id="chat-container">
         <div id="chat-messages">
@@ -148,18 +146,19 @@
         const sendButton = document.getElementById('send-button');
         const loadingIndicator = document.getElementById('loading-indicator');
-        let chatHistory = [
-            { role: "system", content: "You are a helpful assistant." },
-        ];
         let generator;
         async function initializePipeline() {
             loadingIndicator.style.display = 'block';
             try {
                 generator = await pipeline(
                     "text-generation",
-                    "onnx-community/gemma-3-1b-it-ONNX",
                     { dtype: "q4" }
                 );
             } catch (error) {
@@ -170,7 +169,7 @@
                 return;
             }
             loadingIndicator.style.display = 'none';
-            addMessage("bot", "Hello! I'm ready to chat. Ask me anything!"); // More welcoming message
         }
         initializePipeline();
@@ -182,9 +181,9 @@
             chatMessagesDiv.appendChild(messageDiv);
             chatMessagesDiv.scrollTop = chatMessagesDiv.scrollHeight;
-            if (role === 'user' || role === 'assistant') {
-                chatHistory.push({ role: role, content: content });
-            }
         }
         async function sendMessage() {
@@ -197,11 +196,12 @@
             sendButton.disabled = true;
             try {
-                const output = await generator(chatHistory, {
                     max_new_tokens: 512,
-                    do_sample: false  // Consider setting to true for more varied responses.
                 });
                 const botResponse = output[0].generated_text.at(-1).content;
                 addMessage('assistant', botResponse);

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gemma Chatbot</title>
     <style>
+        /* (Same CSS as in the previous, well-styled response) */
         body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             min-height: 100vh;
             margin: 0;
+            background-color: #f4f7f6;
         }
         h1 {
+            color: #333;
             margin-bottom: 0.5em;
         }
         #chat-container {
+            width: 90%;
+            max-width: 700px;
+            border: none;
+            padding: 25px;
+            border-radius: 15px;
             background-color: #fff;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
         }
         #chat-messages {
+            height: 400px;
             overflow-y: auto;
             margin-bottom: 15px;
             padding: 15px;
+            border: 1px solid #e0e0e0;
             border-radius: 10px;
+            background-color: #fafafa;
         }
         .message {
             margin-bottom: 10px;
             padding: 12px;
+            border-radius: 20px;
+            max-width: 70%;
+            word-wrap: break-word;
             box-shadow: 0 1px 2px rgba(0,0,0,0.1);
         }
         .user-message {
+            background-color: #d4e5ff;
             color: #000;
             text-align: right;
             align-self: flex-end;
+            margin-left: auto;
+            margin-right: 10px;
         }
         .bot-message {
+            background-color: #e5e5ea;
             color: #000;
             text-align: left;
             align-self: flex-start;
+            margin-right: auto;
             margin-left: 10px;
         }
             flex-grow: 1;
             padding: 12px;
             border: 1px solid #ccc;
+            border-radius: 20px;
+            font-size: 16px;
+            outline: none;
+            transition: border-color 0.2s ease-in-out;
         }
         #user-input:focus {
+            border-color: #007bff;
         }
         #send-button {
             padding: 12px 25px;
+            background-color: #007bff;
             color: white;
             border: none;
             border-radius: 20px;
         }
         #send-button:hover {
+            background-color: #0056b3;
         }
         #send-button:disabled {
         }
         #loading-indicator {
+            display: none;
             margin-top: 15px;
             text-align: center;
             color: #888;
             font-style: italic;
         }
+        .system-message {
             display: none;
         }
     </style>
 </head>
 <body>
+    <h1>Gemma Chatbot</h1>
     <div id="chat-container">
         <div id="chat-messages">
         const sendButton = document.getElementById('send-button');
         const loadingIndicator = document.getElementById('loading-indicator');
+      let chatHistory = [
+          { role: "system", content: "You are a helpful assistant." },
+      ];
         let generator;
         async function initializePipeline() {
             loadingIndicator.style.display = 'block';
             try {
+                // Use the correct model name for text generation with Gemma.
                 generator = await pipeline(
                     "text-generation",
+                    "Xenova/gemma-1b-it-quantized", // Corrected model name
                     { dtype: "q4" }
                 );
             } catch (error) {
                 return;
             }
             loadingIndicator.style.display = 'none';
+            addMessage("bot", "Hello! I'm ready to chat. Ask me anything!");
         }
         initializePipeline();
             chatMessagesDiv.appendChild(messageDiv);
             chatMessagesDiv.scrollTop = chatMessagesDiv.scrollHeight;
+          if (role === 'user' || role === 'assistant') {
+              chatHistory.push({ role: role, content: content });
+          }
         }
         async function sendMessage() {
             sendButton.disabled = true;
             try {
+                 const output = await generator(chatHistory, {
                     max_new_tokens: 512,
+                    do_sample: false
                 });
+                // Correctly access the last message in the generated text.
                 const botResponse = output[0].generated_text.at(-1).content;
                 addMessage('assistant', botResponse);