Spaces:

utkarsh1797
/

ai-chatbot

Running

App Files Files Community

Utkarsh Verma commited on Apr 12

Commit

c13e300

1 Parent(s): dd124d4

Changes in UI

Browse files

Files changed (1) hide show

templates/index.html +162 -148

templates/index.html CHANGED Viewed

@@ -1,157 +1,171 @@
 <!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: 'Segoe UI', sans-serif;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 20px;
-        }
-        #chat-box {
-            border: 1px solid #444;
-            background-color: #1e1e1e;
-            width: 80%;
-            max-width: 800px;
-            height: 400px;
-            overflow-y: auto;
-            padding: 10px;
-            border-radius: 10px;
-            margin-bottom: 10px;
-        }
-        #user-input {
-            width: 60%;
-            padding: 10px;
-            border-radius: 5px;
-            border: none;
-            margin-right: 10px;
-        }
-        #send-btn, #mic-btn {
-            padding: 10px 15px;
-            border: none;
-            background-color: #1db954;
-            color: white;
-            cursor: pointer;
-            border-radius: 5px;
-            margin-right: 5px;
-        }
-        #send-btn:hover, #mic-btn:hover {
-            background-color: #1ed760;
-        }
-        .typing {
-            font-style: italic;
-            opacity: 0.7;
-        }
-        .chat-wrapper {
-            display: flex;
-            align-items: center;
-            width: 80%;
-            max-width: 800px;
-        }
-    </style>
 </head>
 <body>
-    <h1>🧠 AI Chatbot</h1>
-    <div id="chat-box"></div>
-    <div class="chat-wrapper">
-        <input type="text" id="user-input" placeholder="Type a message..." />
-        <button id="send-btn" onclick="sendMessage()">Send</button>
-        <button id="mic-btn" onclick="startListening()">🎤</button>
-    </div>
-    <script>
-        // Load saved chat history
-        window.onload = function () {
-            const history = localStorage.getItem("chatHistory");
-            if (history) {
-                document.getElementById("chat-box").innerHTML = history;
-            }
-        };
-        // Save chat history
-        function saveHistory() {
-            const chatBox = document.getElementById("chat-box");
-            localStorage.setItem("chatHistory", chatBox.innerHTML);
-        }
-        function updateChatBox(role, message) {
-            let chatBox = document.getElementById("chat-box");
-            const tag = role === "user" ? "You" : "Bot";
-            chatBox.innerHTML += `<p><b>${tag}:</b> ${message}</p>`;
-            chatBox.scrollTop = chatBox.scrollHeight;
-            saveHistory();
-        }
-        async function sendMessage() {
-            let userInput = document.getElementById("user-input").value.trim();
-            if (!userInput) return;
-            updateChatBox("user", userInput);
-            document.getElementById("user-input").value = "";
-            const chatBox = document.getElementById("chat-box");
-            const typingIndicator = document.createElement("p");
-            typingIndicator.className = "typing";
-            typingIndicator.innerText = "Bot is typing...";
-            chatBox.appendChild(typingIndicator);
-            chatBox.scrollTop = chatBox.scrollHeight;
-            try {
-                const response = await fetch("/chat", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ message: userInput })
-                });
-                const data = await response.json();
-                chatBox.removeChild(typingIndicator);
-                updateChatBox("bot", data.reply || "Error in response");
-            } catch (err) {
-                chatBox.removeChild(typingIndicator);
-                updateChatBox("bot", "Something went wrong.");
-            }
-        }
-        // Send with Enter key
-        document.getElementById("user-input").addEventListener("keydown", function (event) {
-            if (event.key === "Enter") {
-                event.preventDefault();
-                sendMessage();
-            }
         });
-        // Speech to text
-        function startListening() {
-            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-            recognition.lang = 'en-US';
-            recognition.interimResults = false;
-            recognition.onresult = function (event) {
-                const transcript = event.results[0][0].transcript;
-                document.getElementById("user-input").value = transcript;
-                sendMessage();
-            };
-            recognition.onerror = function () {
-                updateChatBox("bot", "Speech recognition failed.");
-            };
-            recognition.start();
-        }
-    </script>
 </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>
+    html, body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      width: 100%;
+      font-family: 'Segoe UI', sans-serif;
+      background-color: #121212;
+      color: #f1f1f1;
+    }
+    body {
+      display: flex;
+      flex-direction: column;
+    }
+    h1 {
+      text-align: center;
+      margin: 10px 0;
+    }
+    #chat-box {
+      flex: 1;
+      border-top: 1px solid #444;
+      border-bottom: 1px solid #444;
+      background-color: #1e1e1e;
+      overflow-y: auto;
+      padding: 20px;
+      border-radius: 0;
+    }
+    .chat-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      background-color: #1a1a1a;
+    }
+    #user-input {
+      flex: 1;
+      padding: 12px;
+      font-size: 16px;
+      border-radius: 6px;
+      border: none;
+      margin-right: 10px;
+      background-color: #2a2a2a;
+      color: #fff;
+    }
+    #send-btn, #mic-btn {
+      padding: 10px 15px;
+      border: none;
+      background-color: #1db954;
+      color: white;
+      cursor: pointer;
+      border-radius: 6px;
+      margin-left: 5px;
+    }
+    #send-btn:hover, #mic-btn:hover {
+      background-color: #1ed760;
+    }
+    .typing {
+      font-style: italic;
+      opacity: 0.7;
+    }
+    p {
+      margin: 8px 0;
+      line-height: 1.5;
+    }
+  </style>
 </head>
 <body>
+  <h1>🧠 AI Chatbot</h1>
+  <div id="chat-box"></div>
+  <div class="chat-wrapper">
+    <input type="text" id="user-input" placeholder="Type a message..." />
+    <button id="send-btn" onclick="sendMessage()">Send</button>
+    <button id="mic-btn" onclick="startListening()">🎤</button>
+  </div>
+  <script>
+    // Load saved chat history
+    window.onload = function () {
+      const history = localStorage.getItem("chatHistory");
+      if (history) {
+        document.getElementById("chat-box").innerHTML = history;
+      }
+    };
+    function saveHistory() {
+      const chatBox = document.getElementById("chat-box");
+      localStorage.setItem("chatHistory", chatBox.innerHTML);
+    }
+    function updateChatBox(role, message) {
+      let chatBox = document.getElementById("chat-box");
+      const tag = role === "user" ? "You" : "Bot";
+      chatBox.innerHTML += `<p><b>${tag}:</b> ${message}</p>`;
+      chatBox.scrollTop = chatBox.scrollHeight;
+      saveHistory();
+    }
+    async function sendMessage() {
+      let userInput = document.getElementById("user-input").value.trim();
+      if (!userInput) return;
+      updateChatBox("user", userInput);
+      document.getElementById("user-input").value = "";
+      const chatBox = document.getElementById("chat-box");
+      const typingIndicator = document.createElement("p");
+      typingIndicator.className = "typing";
+      typingIndicator.innerText = "Bot is typing...";
+      chatBox.appendChild(typingIndicator);
+      chatBox.scrollTop = chatBox.scrollHeight;
+      try {
+        const response = await fetch("/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message: userInput })
         });
+        const data = await response.json();
+        chatBox.removeChild(typingIndicator);
+        updateChatBox("bot", data.reply || "Error in response");
+      } catch (err) {
+        chatBox.removeChild(typingIndicator);
+        updateChatBox("bot", "Something went wrong.");
+      }
+    }
+    document.getElementById("user-input").addEventListener("keydown", function (event) {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        sendMessage();
+      }
+    });
+    function startListening() {
+      const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+      recognition.lang = 'en-US';
+      recognition.interimResults = false;
+      recognition.onresult = function (event) {
+        const transcript = event.results[0][0].transcript;
+        document.getElementById("user-input").value = transcript;
+        sendMessage();
+      };
+      recognition.onerror = function () {
+        updateChatBox("bot", "Speech recognition failed.");
+      };
+      recognition.start();
+    }
+  </script>
 </body>
 </html>