Spaces:

kimhyunwoo
/

g

Running

App Files Files Community

kimhyunwoo commited on Mar 13

Commit

8e1842a

verified ·

1 Parent(s): 34c7121

Update index.html

Browse files

Files changed (1) hide show

index.html +95 -65

index.html CHANGED Viewed

@@ -3,99 +3,139 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Gemma Chatbot</title>
     <style>
         body {
-            font-family: sans-serif;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             min-height: 100vh;
             margin: 0;
-            background-color: #f0f0f0;
         }
         #chat-container {
-            width: 80%;
-            max-width: 600px;
-            border: 1px solid #ccc;
-            padding: 20px;
-            border-radius: 8px;
             background-color: #fff;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
         #chat-messages {
-            height: 300px;
             overflow-y: auto;
-            margin-bottom: 10px;
-            padding: 10px;
-            border: 1px solid #eee;
-            border-radius: 4px;
         }
         .message {
-            margin-bottom: 8px;
-            padding: 8px;
-            border-radius: 4px;
         }
         .user-message {
-            background-color: #dcf8c6; /* Light green */
             text-align: right;
-            margin-left: 20%; /* Push to the right */
         }
         .bot-message {
-            background-color: #f0f0f0; /* Light gray */
             text-align: left;
-            margin-right: 20%; /* Push to the left */
         }
         #input-container {
             display: flex;
             gap: 10px;
         }
         #user-input {
             flex-grow: 1;
-            padding: 10px;
             border: 1px solid #ccc;
-            border-radius: 4px;
         }
         #send-button {
-            padding: 10px 20px;
-            background-color: #4CAF50;
             color: white;
             border: none;
-            border-radius: 4px;
             cursor: pointer;
         }
         #loading-indicator {
             display: none;  /* Hidden by default */
-            margin-top: 10px;
             text-align: center;
             color: #888;
         }
         .system-message{
-            display: none; /* we don't display system messages */
         }
     </style>
 </head>
 <body>
-    <h1>Gemma Chatbot</h1>
     <div id="chat-container">
         <div id="chat-messages">
-            </div>
         <div id="input-container">
-            <input type="text" id="user-input" placeholder="Type your message...">
-            <button id="send-button">Send</button>
         </div>
         <div id="loading-indicator">Loading...</div>
     </div>
@@ -103,7 +143,6 @@
     <script type="module">
         import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.js";
         const chatMessagesDiv = document.getElementById('chat-messages');
         const userInput = document.getElementById('user-input');
         const sendButton = document.getElementById('send-button');
@@ -113,83 +152,74 @@
             { role: "system", content: "You are a helpful assistant." },
         ];
-        // Create a text generation pipeline
         let generator;
         async function initializePipeline() {
             loadingIndicator.style.display = 'block';
-            try{
                 generator = await pipeline(
-                "text-generation",
-                "onnx-community/gemma-3-1b-it-ONNX", //  "Xenova/gemma-1b-it-quantized" is an alternative
-                { dtype: "q4" }, // Use quantized weights (smaller, faster, but slightly less accurate)
                 );
-            }catch(error){
                 console.error("Error loading model:", error);
-                loadingIndicator.textContent = "Error loading model.  Check console for details, and ensure you're using a compatible browser/environment.";
                 loadingIndicator.style.color = "red";
-                sendButton.disabled = true; // Disable sending until loaded.
                 return;
             }
             loadingIndicator.style.display = 'none';
-            addMessage("bot", "Hello! I'm ready to chat.");
         }
-        initializePipeline();  // Call on page load
         function addMessage(role, content) {
             const messageDiv = document.createElement('div');
             messageDiv.classList.add('message', `${role}-message`);
             messageDiv.textContent = content;
             chatMessagesDiv.appendChild(messageDiv);
-            chatMessagesDiv.scrollTop = chatMessagesDiv.scrollHeight; // Scroll to bottom
-            // Only add user and assistant messages to history.
-            if (role === 'user' || role === 'assistant'){
-              chatHistory.push({ role: role, content: content });
             }
         }
         async function sendMessage() {
             const message = userInput.value.trim();
-            if (!message || !generator) return; // Don't send empty messages or before loading
             addMessage('user', message);
-            userInput.value = ''; // Clear input
-            loadingIndicator.style.display = 'block'; // Show loading indicator
-            sendButton.disabled = true; // Prevent rapid clicks
             try {
-                // Call the chatbot pipeline
                 const output = await generator(chatHistory, {
-                    max_new_tokens: 512,  // Adjust as needed
-                    do_sample: false      // Set to true for more creative responses
                 });
-                // Extract and add the bot's response
                 const botResponse = output[0].generated_text.at(-1).content;
                 addMessage('assistant', botResponse);
             } catch (error) {
                 console.error("Error generating response:", error);
-                addMessage('bot', "Sorry, there was an error generating a response.");
             } finally {
-                loadingIndicator.style.display = 'none';  // Hide loading indicator
                 sendButton.disabled = false;
             }
         }
         sendButton.addEventListener('click', sendMessage);
         userInput.addEventListener('keypress', (event) => {
             if (event.key === 'Enter') {
                 sendMessage();
             }
         });
     </script>
 </body>
 </html>

 <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;
         }
         #input-container {
             display: flex;
             gap: 10px;
+            padding-top: 15px;
+            border-top: 1px solid #e0e0e0;
         }
         #user-input {
             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;
             cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.2s ease-in-out;
+        }
+        #send-button:hover {
+            background-color: #0056b3; /* Darker blue on hover */
+        }
+        #send-button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
         }
         #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">
+            <!-- Messages will appear here -->
+        </div>
         <div id="input-container">
+            <input type="text" id="user-input" placeholder="Type your message..." aria-label="Your message">
+            <button id="send-button" aria-label="Send message">Send</button>
         </div>
         <div id="loading-indicator">Loading...</div>
     </div>
     <script type="module">
         import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.js";
         const chatMessagesDiv = document.getElementById('chat-messages');
         const userInput = document.getElementById('user-input');
         const sendButton = document.getElementById('send-button');
             { 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) {
                 console.error("Error loading model:", error);
+                loadingIndicator.textContent = "Error loading model. Check console and ensure you're using a compatible browser/environment.";
                 loadingIndicator.style.color = "red";
+                sendButton.disabled = true;
                 return;
             }
             loadingIndicator.style.display = 'none';
+            addMessage("bot", "Hello! I'm ready to chat. Ask me anything!"); // More welcoming message
         }
+        initializePipeline();
         function addMessage(role, content) {
             const messageDiv = document.createElement('div');
             messageDiv.classList.add('message', `${role}-message`);
             messageDiv.textContent = content;
             chatMessagesDiv.appendChild(messageDiv);
+            chatMessagesDiv.scrollTop = chatMessagesDiv.scrollHeight;
+            if (role === 'user' || role === 'assistant') {
+                chatHistory.push({ role: role, content: content });
             }
         }
         async function sendMessage() {
             const message = userInput.value.trim();
+            if (!message || !generator) return;
             addMessage('user', message);
+            userInput.value = '';
+            loadingIndicator.style.display = 'block';
+            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);
             } catch (error) {
                 console.error("Error generating response:", error);
+                addMessage('bot', "Sorry, I encountered an error. Please try again.");
             } finally {
+                loadingIndicator.style.display = 'none';
                 sendButton.disabled = false;
             }
         }
         sendButton.addEventListener('click', sendMessage);
         userInput.addEventListener('keypress', (event) => {
             if (event.key === 'Enter') {
                 sendMessage();
             }
         });
     </script>
 </body>
 </html>