Spaces:

utkarsh1797
/

ai-chatbot

Sleeping

App Files Files Community

Utkarsh Verma commited on Apr 12

Commit

dd124d4

1 Parent(s): 8bc5476

Changes in UI

Browse files

Files changed (1) hide show

templates/index.html +82 -64

templates/index.html CHANGED Viewed

@@ -8,132 +8,150 @@
         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>

         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>