Spaces:

kimhyunwoo
/

g

Running

App Files Files Community

kimhyunwoo commited on Mar 13

Commit

34c7121

verified ·

1 Parent(s): 6592830

Update index.html

Browse files

Files changed (1) hide show

index.html +195 -19

index.html CHANGED Viewed

@@ -1,19 +1,195 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<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>
+    <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');
+        const loadingIndicator = document.getElementById('loading-indicator');
+        let chatHistory = [
+            { 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>