Update app.py

app.py

@@ -1,4 +1,4 @@
-# CodeAlpha Task 2: Chatbot for FAQs - Premium Design
+# CodeAlpha Task 2: Chatbot for FAQs - Fixed UI with Send Button
 from sklearn.feature_extraction.text import TfidfVectorizer
 from sklearn.metrics.pairwise import cosine_similarity
 import numpy as np
@@ -23,10 +23,10 @@ answers = list(faqs.values())
 vectorizer = TfidfVectorizer(stop_words='english')
 tfidf_matrix = vectorizer.fit_transform(questions)
 
-# Step 3: Match user questions
+# Step 3: Chat function
 def chatbot_response(message, history):
     if not message.strip():
-        return "👋 Please ask me a question about CodeAlpha or NLP concepts!"
+        return history, ""
 
     user_vec = vectorizer.transform([message])
     similarity = cosine_similarity(user_vec, tfidf_matrix)
@@ -34,11 +34,14 @@ def chatbot_response(message, history):
     confidence = similarity[0][idx]
 
     if confidence > 0.3:
-        return f"🤖 **Answer:** {answers[idx]}\n\n📊 **Confidence:** {confidence:.0%} | ✅ High Match"
+        bot_msg = f"🤖 **Answer:** {answers[idx]}\n\n📊 **Confidence:** {confidence:.0%} | ✅ High Match"
     else:
-        return "🤔 I don't have specific info on that. Try: 'What is CodeAlpha?' or 'What is TF-IDF?'"
+        bot_msg = "🤔 I don't have specific info on that. Try: 'What is CodeAlpha?' or 'What is TF-IDF?'"
 
-# Step 4: Premium CSS with Animations
+    history.append([message, bot_msg])
+    return history, "" # history updated + clear textbox
+
+# Step 4: Premium CSS
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
 
@@ -65,12 +68,6 @@ custom_css = """
     margin: 20px;
     border: 2px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-    animation: fadeInDown 1s ease;
-}
-
-@keyframes fadeInDown {
-    from { opacity: 0; transform: translateY(-30px); }
-    to { opacity: 1; transform: translateY(0); }
 }
 
 #header h1 {
@@ -80,34 +77,24 @@ custom_css = """
     text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
 }
 
-#header p {
-    font-size: 1.2em;
-    opacity: 0.9;
-}
-
 .gr-chatbot {
     background: rgba(255, 255, 255, 0.95)!important;
     border-radius: 20px!important;
     border: 2px solid rgba(255, 255, 255, 0.5)!important;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)!important;
-    animation: fadeInUp 1s ease 0.3s both;
-}
-
-@keyframes fadeInUp {
-    from { opacity: 0; transform: translateY(30px); }
-    to { opacity: 1; transform: translateY(0); }
 }
 
-.gr-button {
+#send-btn {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;
     border: none!important;
     color: white!important;
     font-weight: 600!important;
     border-radius: 12px!important;
-    transition: all 0.3s ease!important;
+    font-size: 1.1em!important;
+    padding: 12px 30px!important;
 }
 
-.gr-button:hover {
+#send-btn:hover {
     transform: translateY(-3px)!important;
     box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4)!important;
 }
@@ -120,20 +107,10 @@ custom_css = """
     background: rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(10px);
     border-radius: 20px;
-    animation: fadeIn 1s ease 0.6s both;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-.examples {
-    animation: fadeIn 1s ease 0.9s both;
 }
 """
 
-# Step 5: Create App with Premium UI
+# Step 5: Create App with Send Button
 with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
     gr.HTML("""
         <div id="header">
@@ -143,27 +120,33 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
         </div>
     """)
 
-    gr.ChatInterface(
-        fn=chatbot_response,
-        examples=[
-            ["What is CodeAlpha?"],
-            ["When is submission deadline?"],
-            ["What is TF-IDF?"],
-            ["What is cosine similarity?"]
-        ],
-        chatbot=gr.Chatbot(
-            height=500,
-            label="AI Assistant",
-            show_label=False,
-            avatar_images=("https://i.imgur.com/8Km9tLL.png", "https://i.imgur.com/2oBz7ag.png")
-        ),
-        textbox=gr.Textbox(
+    chatbot = gr.Chatbot(
+        height=500,
+        label="AI Assistant",
+        show_label=False,
+        avatar_images=("https://i.imgur.com/8Km9tLL.png", "https://i.imgur.com/2oBz7ag.png")
+    )
+
+    with gr.Row():
+        msg = gr.Textbox(
             placeholder="💭 Ask me about CodeAlpha or NLP...",
             label="Your Question",
-            show_label=False
-        ),
+            show_label=False,
+            scale=8,
+            container=False
+        )
+        send = gr.Button("Send 📤", elem_id="send-btn", scale=1)
+
+    gr.Examples(
+        examples=["What is CodeAlpha?", "When is submission deadline?", "What is TF-IDF?", "What is cosine similarity?"],
+        inputs=msg,
+        label="Click any example:"
     )
 
+    # Actions: Send button + Enter key
+    send.click(chatbot_response, [msg, chatbot], [chatbot, msg])
+    msg.submit(chatbot_response, [msg, chatbot], [chatbot, msg])
+
     gr.HTML("""
         <div id="footer">
             <p>© 2026 CodeAlpha AI Internship | Built with ❤️ using Gradio + Scikit-learn</p>