Update app.py

app.py

@@ -1,4 +1,4 @@
-# CodeAlpha Task 2: Chatbot for FAQs
+# CodeAlpha Task 2: Chatbot for FAQs - Premium Design
 from sklearn.feature_extraction.text import TfidfVectorizer
 from sklearn.metrics.pairwise import cosine_similarity
 import numpy as np
@@ -6,14 +6,14 @@ import gradio as gr
 
 # Step 1: Collect FAQs
 faqs = {
-    "What is CodeAlpha?": "CodeAlpha is a tech platform offering free virtual internships in AI, Web Development, and Data Science to help students gain practical experience.",
+    "What is CodeAlpha?": "CodeAlpha is a tech platform offering free virtual internships in AI, Web Development, and Data Science to help students gain practical experience and build their portfolio.",
     "How long is CodeAlpha internship?": "CodeAlpha internships last 1 month. You must complete minimum 2 out of 4 tasks to receive the completion certificate and Letter of Recommendation.",
     "When is CodeAlpha submission deadline?": "Submission window: 10 May 2026 to 10 June 2026. Last date: 10 June 2026. Certificates issued: 11 June 2026.",
-    "Is CodeAlpha certificate valuable?": "Yes, CodeAlpha certificates are recognized and the LOR helps in job applications. It's a verified virtual internship experience.",
-    "How to contact CodeAlpha?": "Website: www.codealpha.tech | WhatsApp: +91 9336576683 | Tasks are shared via WhatsApp group.",
-    "What is TF-IDF?": "TF-IDF stands for Term Frequency-Inverse Document Frequency. It's an NLP technique used to convert text to numerical vectors for similarity matching.",
-    "What is cosine similarity?": "Cosine similarity measures the cosine of angle between two vectors. Used in NLP to find how similar two text documents are. Score from 0 to 1.",
-    "What is NLTK used for?": "NLTK is Natural Language Toolkit. Used for text preprocessing: tokenization, stemming, removing stopwords, and cleaning text data."
+    "Is CodeAlpha certificate valuable?": "Yes, CodeAlpha certificates are recognized by companies. The LOR highlights your practical skills and helps in job applications.",
+    "How to contact CodeAlpha?": "Website: www.codealpha.tech | WhatsApp: +91 9336576683 | Official tasks shared via WhatsApp group.",
+    "What is TF-IDF?": "TF-IDF = Term Frequency-Inverse Document Frequency. NLP technique that converts text to numbers. High TF-IDF = important word for that document.",
+    "What is cosine similarity?": "Cosine similarity measures angle between two text vectors. Score 1 = identical, 0 = completely different. Used to find best matching FAQ.",
+    "What is NLTK used for?": "NLTK = Natural Language Toolkit. Python library for text preprocessing: tokenization, stemming, stopword removal, and cleaning text data."
 }
 
 questions = list(faqs.keys())
@@ -23,31 +23,152 @@ answers = list(faqs.values())
 vectorizer = TfidfVectorizer(stop_words='english')
 tfidf_matrix = vectorizer.fit_transform(questions)
 
-# Step 3: Match user questions using cosine similarity
+# Step 3: Match user questions
 def chatbot_response(message, history):
     if not message.strip():
-        return "Please ask me a question about CodeAlpha or NLP concepts!"
+        return "👋 Please ask me a question about CodeAlpha or NLP concepts!"
 
     user_vec = vectorizer.transform([message])
     similarity = cosine_similarity(user_vec, tfidf_matrix)
     idx = np.argmax(similarity)
     confidence = similarity[0][idx]
 
-    # Step 4: Display best matching answer
     if confidence > 0.3:
-        return f"🤖 {answers[idx]}\n\nMatch Score: {confidence:.0%}"
+        return f"🤖 **Answer:** {answers[idx]}\n\n📊 **Confidence:** {confidence:.0%} | ✅ High Match"
     else:
-        return "🤖 I don't have info on that. Try asking about CodeAlpha internship, TF-IDF, or cosine similarity."
+        return "🤔 I don't have specific info on that. Try: 'What is CodeAlpha?' or 'What is TF-IDF?'"
 
-# Step 5: Create Chat UI - الصيغة الصحيحة
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# CodeAlpha FAQ Chatbot - Task 2")
-    gr.Markdown("Ask me about CodeAlpha internship or NLP concepts! Uses TF-IDF + Cosine Similarity")
+# Step 4: Premium CSS with Animations
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
+
+.gradio-container {
+    font-family: 'Poppins', sans-serif!important;
+    background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe)!important;
+    background-size: 400% 400%!important;
+    animation: gradientBG 15s ease infinite!important;
+}
+
+@keyframes gradientBG {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+#header {
+    text-align: center;
+    color: white;
+    padding: 40px 20px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(20px);
+    border-radius: 30px;
+    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 {
+    font-size: 3em;
+    font-weight: 700;
+    margin-bottom: 10px;
+    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 {
+    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;
+}
+
+.gr-button:hover {
+    transform: translateY(-3px)!important;
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4)!important;
+}
+
+#footer {
+    text-align: center;
+    color: white;
+    padding: 25px;
+    margin-top: 30px;
+    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
+with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
+    gr.HTML("""
+        <div id="header">
+            <h1>💬 CodeAlpha AI Assistant</h1>
+            <p>Task 2: FAQ Chatbot | CodeAlpha AI Internship 2026</p>
+            <p>Powered by NLP: TF-IDF + Cosine Similarity</p>
+        </div>
+    """)
 
     gr.ChatInterface(
         fn=chatbot_response,
-        examples=["What is CodeAlpha?", "When is submission deadline?", "What is TF-IDF?"],
-        chatbot=gr.Chatbot(height=400),
+        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(
+            placeholder="💭 Ask me about CodeAlpha or NLP...",
+            label="Your Question",
+            show_label=False
+        ),
     )
 
+    gr.HTML("""
+        <div id="footer">
+            <p>© 2026 CodeAlpha AI Internship | Built with ❤️ using Gradio + Scikit-learn</p>
+            <p>🚀 Demonstrating NLP Skills: Text Preprocessing + Vector Similarity + Chat UI</p>
+        </div>
+    """)
+
 demo.launch()