Changes in UI

app.py

@@ -10,6 +10,7 @@ HF_API_KEY = os.getenv("HF_API_KEY")  # Store in environment variable
 API_URL = "https://api-inference.huggingface.co/models/tiiuae/falcon-7b-instruct"
 headers = {"Authorization": f"Bearer {HF_API_KEY}"}
 
+
 @app.route('/')
 def home():
     return render_template('index.html')
@@ -17,57 +18,104 @@ def home():
 @app.route('/chat', methods=['POST'])
 def chat():
     user_message = request.json.get("message")
-    
+
     if not user_message:
-        return jsonify({"error": "Empty message received"})
+        return jsonify({"reply": "\u26a0\ufe0f No message provided."})
 
     try:
-        formatted_prompt = f"User: {user_message}\nBot:"
         payload = {
-        "inputs": formatted_prompt,
-        "parameters": {
-            "temperature": 0.5,   # 🔥 Controls randomness (lower = more deterministic)
-            "top_p": 0.9,         # 🎯 Focus on high-probability words
-            "max_new_tokens": 50,  # ⏳ Limits response length
-            "stop_sequences": ["User:", "You:", "user:"]  # ⛔ Stops response at natural points
+            "inputs": user_message,
+            "parameters": {
+                "temperature": 0.5,
+                "top_p": 0.9,
+                "max_new_tokens": 100,
+                "stop": ["User:", "You:", "Bot:"]
+            }
         }
-    }
+
         response = requests.post(API_URL, headers=headers, json=payload)
         data = response.json()
-        # print(response.status_code)  # Debugging: Print the HTTP status
-        # print(response.json())       # Debugging: Print the API response
 
-        # if response.status_code == 200:
-        #     return response.json()[0]['generated_text']
-        # else:
-        #     return f"Error: {response.status_code} - {response.json()}"
+        if "error" in data:
+            return jsonify({"reply": f"\u274c Error: {data['error']}"})
+
+        # Extract response safely
+        if isinstance(data, list) and 'generated_text' in data[0]:
+            bot_reply = data[0]['generated_text']
+        elif 'generated_text' in data:
+            bot_reply = data['generated_text']
+        else:
+            bot_reply = "\ud83e\udde0 Sorry, I didn't understand that."
+
+        # Clean extra prompt echoes like "User:"
+        cleaned_reply = bot_reply.replace("User:", "").replace("You:", "").replace("Bot:", "").strip()
+        return jsonify({"reply": cleaned_reply})
+
+    except Exception as e:
+        return jsonify({"reply": f"\ud83d\udea8 Server Error: {str(e)}"})
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)
+
+
+# @app.route('/')
+# def home():
+#     return render_template('index.html')
+
+# @app.route('/chat', methods=['POST'])
+# def chat():
+#     user_message = request.json.get("message")
+    
+#     if not user_message:
+#         return jsonify({"error": "Empty message received"})
+
+#     try:
+#         formatted_prompt = f"User: {user_message}\nBot:"
+#         payload = {
+#         "inputs": formatted_prompt,
+#         "parameters": {
+#             "temperature": 0.5,   # 🔥 Controls randomness (lower = more deterministic)
+#             "top_p": 0.9,         # 🎯 Focus on high-probability words
+#             "max_new_tokens": 50,  # ⏳ Limits response length
+#             "stop_sequences": ["User:", "You:", "user:"]  # ⛔ Stops response at natural points
+#         }
+#     }
+#         response = requests.post(API_URL, headers=headers, json=payload)
+#         data = response.json()
+#         # print(response.status_code)  # Debugging: Print the HTTP status
+#         # print(response.json())       # Debugging: Print the API response
+
+#         # if response.status_code == 200:
+#         #     return response.json()[0]['generated_text']
+#         # else:
+#         #     return f"Error: {response.status_code} - {response.json()}"
         
         
         
-        if "error" in data:
-            return jsonify({"reply": f"Error: {data['error']}"})
+#         if "error" in data:
+#             return jsonify({"reply": f"Error: {data['error']}"})
 
-        # raw_output = data[0]['generated_text'] if isinstance(data, list) else data.get('generated_text', "No response")
-        # reply = raw_output.split("Bot:")[-1].strip()
+#         # raw_output = data[0]['generated_text'] if isinstance(data, list) else data.get('generated_text', "No response")
+#         # reply = raw_output.split("Bot:")[-1].strip()
 
         
-        # return jsonify({"reply": reply})
+#         # return jsonify({"reply": reply})
 
-        raw_output = data[0]['generated_text'] if isinstance(data, list) else data.get('generated_text', "No response")
-        # Clean up output
-        if "Bot:" in raw_output:
-            reply = raw_output.split("Bot:")[-1].strip()
-        else:
-            reply = raw_output.strip()
+#         raw_output = data[0]['generated_text'] if isinstance(data, list) else data.get('generated_text', "No response")
+#         # Clean up output
+#         if "Bot:" in raw_output:
+#             reply = raw_output.split("Bot:")[-1].strip()
+#         else:
+#             reply = raw_output.strip()
 
-        for trailing in ["User", "You", "User:", "You:"]:
-            if reply.endswith(trailing):
-                reply = reply.rsplit(trailing, 1)[0].strip()
+#         for trailing in ["User", "You", "User:", "You:"]:
+#             if reply.endswith(trailing):
+#                 reply = reply.rsplit(trailing, 1)[0].strip()
 
-        return jsonify({"reply": reply})
+#         return jsonify({"reply": reply})
 
-    except Exception as e:
-        return jsonify({"reply": f"Error: {str(e)}"})
+#     except Exception as e:
+#         return jsonify({"reply": f"Error: {str(e)}"})
 
-if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860)
+# if __name__ == '__main__':
+#     app.run(host='0.0.0.0', port=7860)

templates/index.html

@@ -6,151 +6,167 @@
   <title>AI Chatbot</title>
   <style>
     body {
-      font-family: 'Segoe UI', sans-serif;
+      font-family: Arial, sans-serif;
       margin: 0;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      background-color: #f4f4f4;
+      transition: background-color 0.3s, color 0.3s;
+    }
+
+    body.dark-mode {
       background-color: #121212;
-      color: #fff;
+      color: white;
+    }
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 20px;
+      background-color: #333;
+      color: white;
+    }
+
+    header h1 {
+      margin: 0;
+      font-size: 1.5em;
     }
-    h1 {
-      text-align: center;
-      padding: 1rem;
+
+    .controls {
+      display: flex;
+      gap: 10px;
     }
+
     #chat-box {
-      background-color: #1e1e1e;
-      border: 1px solid #333;
-      border-radius: 10px;
-      padding: 1rem;
-      height: 80vh;
+      flex-grow: 1;
+      padding: 20px;
       overflow-y: auto;
-      margin: 0 auto;
-      width: 90%;
-      max-width: 900px;
+      border-top: 1px solid #ccc;
+      border-bottom: 1px solid #ccc;
+      background-color: #fff;
+    }
+
+    body.dark-mode #chat-box {
+      background-color: #1e1e1e;
     }
-    .chat-wrapper {
+
+    #input-container {
       display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 10px;
-      margin: 1rem auto;
-      width: 90%;
-      max-width: 900px;
+      padding: 10px;
+      background-color: #f9f9f9;
+      border-top: 1px solid #ccc;
     }
-    input[type="text"] {
-      flex: 1;
-      padding: 0.8rem;
-      border: none;
-      border-radius: 10px;
-      font-size: 1rem;
-      background-color: #2c2c2c;
-      color: #fff;
+
+    body.dark-mode #input-container {
+      background-color: #1a1a1a;
     }
-    button {
-      padding: 0.8rem 1rem;
+
+    #user-input {
+      flex-grow: 1;
+      padding: 10px;
+      font-size: 1em;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+
+    #send-btn {
+      margin-left: 10px;
+      padding: 10px 15px;
+      font-size: 1em;
+      background-color: #4CAF50;
+      color: white;
       border: none;
-      border-radius: 10px;
-      background-color: #00bcd4;
-      color: #fff;
-      font-weight: bold;
+      border-radius: 4px;
       cursor: pointer;
-      transition: background-color 0.3s ease;
     }
-    button:hover {
-      background-color: #0097a7;
+
+    #send-btn:hover {
+      background-color: #45a049;
+    }
+
+    .message {
+      margin: 10px 0;
     }
-    .typing {
-      font-style: italic;
-      opacity: 0.7;
+
+    .message strong {
+      display: inline-block;
+      width: 60px;
     }
   </style>
 </head>
 <body>
-  <h1>🤖 AI Chatbot</h1>
+
+  <header>
+    <h1>AI Chatbot</h1>
+    <div class="controls">
+      <button onclick="toggleMode()">🌓 Theme</button>
+      <button onclick="clearChat()">🗑️ Clear</button>
+      <button onclick="exportChat()">📁 Export</button>
+    </div>
+  </header>
+
   <div id="chat-box"></div>
 
-  <div class="chat-wrapper">
-    <input type="text" id="user-input" placeholder="Type a message..." onkeypress="handleKeyPress(event)" />
+  <div id="input-container">
+    <input type="text" id="user-input" placeholder="Type a message..." onkeypress="handleEnter(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();
-      }
+    function handleEnter(e) {
+      if (e.key === 'Enter') sendMessage();
     }
 
     async function sendMessage() {
-      let userInput = document.getElementById("user-input").value;
-      if (!userInput.trim()) return;
+      const userInput = document.getElementById("user-input").value.trim();
+      const chatBox = document.getElementById("chat-box");
+
+      if (!userInput) return;
+
+      chatBox.innerHTML += `<div class="message"><strong>You:</strong> ${userInput}</div>`;
+      scrollToBottom();
 
-      appendMessage("You", userInput);
       document.getElementById("user-input").value = "";
-      appendTyping();
 
-      let response = await fetch("/chat", {
+      const response = await fetch("/chat", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ message: userInput }),
+        body: JSON.stringify({ message: userInput })
       });
 
-      let data = await response.json();
-      removeTyping();
+      const data = await response.json();
+      const reply = data.reply || "Error in response";
 
-      let reply = data.reply || "Error in response";
-      appendMessage("Bot", reply);
-      saveChat();
+      chatBox.innerHTML += `<div class="message"><strong>Bot:</strong> ${reply}</div>`;
+      scrollToBottom();
     }
 
-    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 toggleMode() {
+      document.body.classList.toggle("dark-mode");
     }
 
     function clearChat() {
-      chatBox.innerHTML = "";
-      localStorage.removeItem("chatHistory");
+      document.getElementById("chat-box").innerHTML = "";
     }
 
-    function saveChat() {
-      localStorage.setItem("chatHistory", chatBox.innerHTML);
+    function scrollToBottom() {
+      const chatBox = document.getElementById("chat-box");
+      chatBox.scrollTop = chatBox.scrollHeight;
     }
 
-    function loadChat() {
-      let saved = localStorage.getItem("chatHistory");
-      if (saved) chatBox.innerHTML = saved;
+    function exportChat() {
+      const chat = document.getElementById("chat-box").innerText;
+      const blob = new Blob([chat], { type: "text/plain" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "chat_history.txt";
+      a.click();
+      URL.revokeObjectURL(url);
     }
-
-    window.onload = loadChat;
   </script>
+
 </body>
 </html>