Spaces:

utkarsh1797
/

ai-chatbot

Sleeping

App Files Files Community

Utkarsh Verma commited on Apr 12

Commit

4531016

1 Parent(s): c13e300

Changes in UI

Browse files

Files changed (1) hide show

templates/index.html +88 -103

templates/index.html CHANGED Viewed

@@ -5,167 +5,152 @@
   <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>

   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>AI Chatbot</title>
   <style>
+    body {
       font-family: 'Segoe UI', sans-serif;
+      margin: 0;
       background-color: #121212;
+      color: #fff;
     }
     h1 {
       text-align: center;
+      padding: 1rem;
     }
     #chat-box {
       background-color: #1e1e1e;
+      border: 1px solid #333;
+      border-radius: 10px;
+      padding: 1rem;
+      height: 80vh;
       overflow-y: auto;
+      margin: 0 auto;
+      width: 90%;
+      max-width: 900px;
     }
     .chat-wrapper {
       display: flex;
       justify-content: center;
       align-items: center;
+      gap: 10px;
+      margin: 1rem auto;
+      width: 90%;
+      max-width: 900px;
     }
+    input[type="text"] {
       flex: 1;
+      padding: 0.8rem;
       border: none;
+      border-radius: 10px;
+      font-size: 1rem;
+      background-color: #2c2c2c;
       color: #fff;
     }
+    button {
+      padding: 0.8rem 1rem;
       border: none;
+      border-radius: 10px;
+      background-color: #00bcd4;
+      color: #fff;
+      font-weight: bold;
       cursor: pointer;
+      transition: background-color 0.3s ease;
     }
+    button:hover {
+      background-color: #0097a7;
     }
     .typing {
       font-style: italic;
       opacity: 0.7;
     }
   </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..." onkeypress="handleKeyPress(event)" />
     <button id="send-btn" onclick="sendMessage()">Send</button>
     <button id="mic-btn" onclick="startListening()">🎤</button>
+    <button id="clear-btn" onclick="clearChat()">🗑️ Clear</button>
   </div>
   <script>
+    const chatBox = document.getElementById("chat-box");
+    function handleKeyPress(event) {
+      if (event.key === "Enter") {
+        sendMessage();
+      }
     }
     async function sendMessage() {
+      let userInput = document.getElementById("user-input").value;
+      if (!userInput.trim()) return;
+      appendMessage("You", userInput);
       document.getElementById("user-input").value = "";
+      appendTyping();
+      let response = await fetch("/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: userInput }),
+      });
+      let data = await response.json();
+      removeTyping();
+      let reply = data.reply || "Error in response";
+      appendMessage("Bot", reply);
+      saveChat();
+    }
+    function appendMessage(sender, text) {
+      let msg = document.createElement("p");
+      msg.innerHTML = `<b>${sender}:</b> ${text}`;
+      chatBox.appendChild(msg);
       chatBox.scrollTop = chatBox.scrollHeight;
+    }
+    function appendTyping() {
+      let typing = document.createElement("p");
+      typing.className = "typing";
+      typing.id = "typing";
+      typing.innerText = "Bot is typing...";
+      chatBox.appendChild(typing);
+      chatBox.scrollTop = chatBox.scrollHeight;
     }
+    function removeTyping() {
+      let typing = document.getElementById("typing");
+      if (typing) typing.remove();
+    }
     function startListening() {
       const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+      recognition.lang = "en-US";
+      recognition.start();
       recognition.onresult = function (event) {
+        document.getElementById("user-input").value = event.results[0][0].transcript;
       };
+    }
+    function clearChat() {
+      chatBox.innerHTML = "";
+      localStorage.removeItem("chatHistory");
+    }
+    function saveChat() {
+      localStorage.setItem("chatHistory", chatBox.innerHTML);
     }
+    function loadChat() {
+      let saved = localStorage.getItem("chatHistory");
+      if (saved) chatBox.innerHTML = saved;
+    }
+    window.onload = loadChat;
   </script>
 </body>
 </html>