Spaces:

utkarsh1797
/

ai-chatbot

Sleeping

App Files Files Community

Utkarsh Verma commited on Apr 12

Commit

8bc5476

1 Parent(s): 732ddfe

Changes in UI

Browse files

Files changed (1) hide show

templates/index.html +123 -134

templates/index.html CHANGED Viewed

@@ -1,150 +1,139 @@
-<!-- <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Chatbot</title>
-    <script>
-        async function sendMessage() {
-            let userInput = document.getElementById("user-input").value;
-            let chatBox = document.getElementById("chat-box");
-            chatBox.innerHTML += "<p><b>You:</b> " + userInput + "</p>";
-            let response = await fetch("/chat", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ message: userInput }),
-            });
-            let data = await response.json();
-            chatBox.innerHTML += "<p><b>Bot:</b> " + (data.reply || "Error in response") + "</p>";
-            document.getElementById("user-input").value = "";
         }
-    </script>
 </head>
 <body>
     <h1>AI Chatbot</h1>
-    <div id="chat-box" style="border:1px solid #ccc; height:300px; overflow:auto;"></div>
-    <input type="text" id="user-input" placeholder="Type a message...">
-    <button onclick="sendMessage()">Send</button>
-</body>
-</html> -->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>AI Chatbot</title>
-  <style>
-    body {
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      background: #f4f7f9;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: start;
-      padding: 30px;
-      min-height: 100vh;
-    }
-    h1 {
-      color: #333;
-      margin-bottom: 20px;
-    }
-    #chat-box {
-      width: 90%;
-      max-width: 600px;
-      height: 400px;
-      border: 1px solid #ddd;
-      background: #fff;
-      border-radius: 10px;
-      padding: 15px;
-      overflow-y: auto;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-      margin-bottom: 20px;
-    }
-    #chat-box p {
-      margin: 10px 0;
-      line-height: 1.4;
-    }
-    #chat-box b {
-      color: #0057b7;
-    }
-    .chat-input {
-      display: flex;
-      width: 90%;
-      max-width: 600px;
-    }
-    #user-input {
-      flex: 1;
-      padding: 12px;
-      border: 1px solid #ccc;
-      border-radius: 10px 0 0 10px;
-      font-size: 16px;
-    }
-    button {
-      padding: 12px 20px;
-      background: #0057b7;
-      color: #fff;
-      border: none;
-      border-radius: 0 10px 10px 0;
-      cursor: pointer;
-      font-size: 16px;
-      transition: background 0.3s ease;
-    }
-    button:hover {
-      background: #003f91;
-    }
-  </style>
-  <script>
-    async function sendMessage() {
-      let userInput = document.getElementById("user-input").value;
-      let chatBox = document.getElementById("chat-box");
-      if (!userInput.trim()) return;
-      chatBox.innerHTML += `<p><b>You:</b> ${userInput}</p>`;
-      chatBox.scrollTop = chatBox.scrollHeight;
-      let response = await fetch("/chat", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ message: userInput }),
-      });
-      let data = await response.json();
-      chatBox.innerHTML += `<p><b>Bot:</b> ${data.reply || "Error in response"}</p>`;
-      chatBox.scrollTop = chatBox.scrollHeight;
-      document.getElementById("user-input").value = "";
-    }
-    // Allow pressing Enter to send message
-    document.addEventListener("DOMContentLoaded", () => {
-      document.getElementById("user-input").addEventListener("keydown", (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          sendMessage();
         }
-      });
-    });
-  </script>
-</head>
-<body>
-  <h1>AI Chatbot</h1>
-  <div id="chat-box"></div>
-  <div class="chat-input">
-    <input type="text" id="user-input" placeholder="Type a message..." />
-    <button onclick="sendMessage()">Send</button>
-  </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>AI Chatbot</title>
+    <style>
+        body {
+            background-color: #121212;
+            color: #f1f1f1;
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 20px;
+        }
+        h1 {
+            color: #00ffff;
+        }
+        #chat-box {
+            width: 100%;
+            max-width: 600px;
+            border: 1px solid #444;
+            padding: 10px;
+            height: 400px;
+            overflow-y: auto;
+            background-color: #1e1e1e;
+            border-radius: 8px;
+            margin-bottom: 10px;
+        }
+        #user-input {
+            width: 75%;
+            padding: 10px;
+            border-radius: 6px;
+            border: 1px solid #555;
+            background-color: #2a2a2a;
+            color: white;
         }
+        button {
+            padding: 10px 15px;
+            background-color: #00ffff;
+            color: black;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            margin-left: 5px;
+        }
+        .bot-typing {
+            color: #aaa;
+            font-style: italic;
+        }
+        .mic-button {
+            background-color: #444;
+            color: white;
+            border-radius: 50%;
+            padding: 8px 10px;
+            margin-left: 5px;
+            border: 1px solid #666;
+        }
+    </style>
 </head>
 <body>
     <h1>AI Chatbot</h1>
+    <div id="chat-box"></div>
+    <div>
+        <input type="text" id="user-input" placeholder="Type a message..." />
+        <button onclick="sendMessage()">Send</button>
+        <button class="mic-button" onclick="startListening()">🎤</button>
+    </div>
+    <script>
+        let chatHistory = [];
+        function updateChatBox() {
+            const chatBox = document.getElementById("chat-box");
+            chatBox.innerHTML = "";
+            chatHistory.forEach(({ sender, message }) => {
+                chatBox.innerHTML += `<p><b>${sender}:</b> ${message}</p>`;
+            });
+            chatBox.scrollTop = chatBox.scrollHeight;
         }
+        async function sendMessage() {
+            const inputEl = document.getElementById("user-input");
+            const message = inputEl.value.trim();
+            if (!message) return;
+            chatHistory.push({ sender: "You", message });
+            updateChatBox();
+            inputEl.value = "";
+            // Show typing...
+            chatHistory.push({ sender: "Bot", message: "<span class='bot-typing'>Typing...</span>" });
+            updateChatBox();
+            try {
+                const response = await fetch("/chat", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ message }),
+                });
+                const data = await response.json();
+                chatHistory.pop(); // Remove "Typing..." message
+                chatHistory.push({ sender: "Bot", message: data.reply || "Error in response" });
+                updateChatBox();
+            } catch (e) {
+                chatHistory.pop();
+                chatHistory.push({ sender: "Bot", message: "Failed to reach server." });
+                updateChatBox();
+            }
+        }
+        // 🎤 Speech-to-text
+        function startListening() {
+            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+            recognition.lang = "en-US";
+            recognition.interimResults = false;
+            recognition.maxAlternatives = 1;
+            recognition.onresult = (event) => {
+                document.getElementById("user-input").value = event.results[0][0].transcript;
+            };
+            recognition.onerror = (event) => {
+                alert("Speech recognition error: " + event.error);
+            };
+            recognition.start();
+        }
+    </script>
 </body>
 </html>