Spaces:

JJ94
/

AI-API

Sleeping

App Files Files Community

JJ94 commited on Mar 15, 2025

Commit

21ab711

verified ·

1 Parent(s): b20aff0

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +45 -68

templates/index.html CHANGED Viewed

@@ -3,92 +3,69 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Chat with AI</title>
-    <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Alpine.js -->
-    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
-    <!-- Axios -->
-    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <style>
-        body { background-color: #f8f9fa; }
-        .chat-box {
-            height: 400px; overflow-y: auto;
-            background: white; padding: 15px;
-            border-radius: 10px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-        }
-        .message {
-            padding: 8px 12px; border-radius: 8px; margin-bottom: 10px;
-        }
-        .user-message { background-color: #d1e7dd; text-align: right; }
-        .ai-message { background-color: #e2e3e5; }
     </style>
 </head>
 <body>
-<div class="container mt-5" x-data="chatApp()">
-    <h2 class="text-center mb-4">💬 Chat with AI</h2>
-    <div class="chat-box mb-3" id="chatBox">
-        <template x-for="message in messages">
-            <div :class="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}" class="message">
-                <strong x-text="message.role === 'user' ? 'You: ' : 'AI: '"></strong>
-                <span x-text="message.text"></span>
-            </div>
-        </template>
     </div>
-    <div class="input-group">
-        <input type="text" class="form-control" placeholder="Type a message..." x-model="userMessage" @keydown.enter="sendMessage">
-        <button class="btn btn-primary" @click="sendMessage">Send</button>
-    </div>
-</div>
-<script>
-function chatApp() {
-    return {
-        userMessage: '',
-        messages: [],
-        async sendMessage() {
-            if (!this.userMessage.trim()) return;
-            let messageText = this.userMessage;
-            this.messages.push({ role: 'user', text: messageText });
-            this.userMessage = '';
-            let aiResponse = { role: 'ai', text: '' };
-            this.messages.push(aiResponse);
-            let response = await fetch('/chat', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ message: messageText })
             });
             const reader = response.body.getReader();
             const decoder = new TextDecoder();
             while (true) {
                 const { done, value } = await reader.read();
                 if (done) break;
                 let token = decoder.decode(value, { stream: true });
-                aiResponse.text += token;
-                // Trigger reactivity update
-                this.$nextTick(() => {
-                    let chatBox = document.getElementById('chatBox');
-                    chatBox.scrollTop = chatBox.scrollHeight;
-                });
             }
         }
-    };
-}
-</script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Chatbot</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
+        body { padding: 20px; }
+        #chatBox { height: 400px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 5px; background: #f8f9fa; }
+        .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 75%; }
+        .user { background: #007bff; color: white; align-self: flex-end; }
+        .bot { background: #e9ecef; color: black; align-self: flex-start; }
     </style>
 </head>
 <body>
+    <div class="container">
+        <h2 class="text-center mb-4">Chatbot</h2>
+        <div id="chatBox" class="d-flex flex-column"></div>
+        <div class="input-group mt-3">
+            <input type="text" id="userInput" class="form-control" placeholder="Type a message...">
+            <button class="btn btn-primary" onclick="sendMessage()">Send</button>
+        </div>
     </div>
+    <script>
+        async function sendMessage() {
+            let inputField = document.getElementById("userInput");
+            let chatBox = document.getElementById("chatBox");
+            let userMessage = inputField.value.trim();
+            if (!userMessage) return;
+            inputField.value = "";
+            // Display user message
+            let userMsgElement = document.createElement("div");
+            userMsgElement.className = "message user align-self-end";
+            userMsgElement.textContent = userMessage;
+            chatBox.appendChild(userMsgElement);
+            // Add bot response container
+            let botMsgElement = document.createElement("div");
+            botMsgElement.className = "message bot align-self-start";
+            chatBox.appendChild(botMsgElement);
+            // Fetch response from backend
+            let response = await fetch("/chat", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ message: userMessage })
             });
             const reader = response.body.getReader();
             const decoder = new TextDecoder();
             while (true) {
                 const { done, value } = await reader.read();
                 if (done) break;
                 let token = decoder.decode(value, { stream: true });
+                botMsgElement.textContent += token;
+                // Auto-scroll
+                chatBox.scrollTop = chatBox.scrollHeight;
             }
         }
+    </script>
 </body>
 </html>