Spaces:

JJ94
/

AI-API

Sleeping

App Files Files Community

JJ94 commited on Mar 15

Commit

784284e

verified ·

1 Parent(s): 8d8525b

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +87 -33

templates/index.html CHANGED Viewed

@@ -2,48 +2,102 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chat with LLaMA</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
-</head>
-<body class="bg-light">
-    <div class="container py-5" x-data="{ messages: [], userInput: '' }">
-        <h2 class="mb-4 text-center">Chat with LLaMA 🤖</h2>
-        <div class="card shadow">
-            <div class="card-body" style="height: 300px; overflow-y: auto;" id="chatBox">
-                <template x-for="(msg, index) in messages" :key="index">
-                    <p><b x-text="msg.role + ':'"></b> <span x-text="msg.content"></span></p>
-                </template>
             </div>
-        </div>
-        <div class="input-group mt-3">
-            <input type="text" class="form-control" x-model="userInput" placeholder="Type a message..." @keydown.enter="sendMessage">
-            <button class="btn btn-primary" @click="sendMessage">Send</button>
-        </div>
     </div>
-    <script>
-        function sendMessage() {
-            const userMessage = this.userInput;
-            if (!userMessage) return;
-            // Append user message
-            this.messages.push({ role: "You", content: userMessage });
-            this.userInput = "";
-            axios.post("/chat", { message: userMessage })
-                .then(response => {
-                    this.messages.push({ role: "Bot", content: response.data.response });
-                    document.getElementById("chatBox").scrollTop = document.getElementById("chatBox").scrollHeight;
-                })
-                .catch(error => console.error("Error:", error));
         }
-    </script>
 </body>
 </html>

 <html lang="en">
 <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 = '';  // Clear input
+            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;
+                aiResponse.text += decoder.decode(value, { stream: true });
+            }
+            // Scroll to the latest message
+            this.$nextTick(() => {
+                let chatBox = document.getElementById('chatBox');
+                chatBox.scrollTop = chatBox.scrollHeight;
+            });
         }
+    };
+}
+</script>
 </body>
 </html>