Update app.py

app.py

@@ -1,10 +1,8 @@
 import gradio as gr
 import os
 from dotenv import load_dotenv
-import json
 from langchain_community.vectorstores import FAISS
 from langchain_huggingface import HuggingFaceEmbeddings
-from langchain_core.prompts import ChatPromptTemplate
 from langchain.text_splitter import RecursiveCharacterTextSplitter
 from langchain_core.documents import Document
 import time
@@ -13,7 +11,6 @@ import requests
 load_dotenv()
 
 embeddings = HuggingFaceEmbeddings(model_name="sentence-transformers/all-MiniLM-L6-v2")
-
 vectorstore = None
 retriever = None
 groq_api_key = None
@@ -21,11 +18,7 @@ groq_api_key = None
 def initialize_groq():
     global groq_api_key
     groq_api_key = os.getenv("GROQ_API_KEY")
-    if groq_api_key:
-        print("Groq API key found")
-        return "Groq API key found"
-    print("Groq API key not found")
-    return "Groq API key not found"
+    return "Groq API key found" if groq_api_key else "Groq API key not found"
 
 def initialize_vectorstore():
     global vectorstore, retriever
@@ -33,7 +26,6 @@ def initialize_vectorstore():
     try:
         vectorstore = FAISS.load_local("atomcamp_vector_db", embeddings, allow_dangerous_deserialization=True)
         retriever = vectorstore.as_retriever()
-        print("Vectorstore loaded successfully")
         return "Vectorstore loaded successfully"
     except:
         sample_data = [
@@ -48,21 +40,10 @@ def initialize_vectorstore():
             {
                 "text": "Atomcamp offers flexible learning paths: Beginner Track (3 months) - Python basics, data manipulation, basic statistics. Intermediate Track (6 months) - Machine learning, advanced Python, real projects. Advanced Track (9 months) - Deep learning, AI, industry projects, job placement assistance.",
                 "url": "https://www.atomcamp.com/learning-paths"
-            },
-            {
-                "text": "Career services at Atomcamp include: Resume building, Interview preparation, Portfolio development, Job placement assistance, Industry networking events, Mentorship programs, and Career counseling sessions.",
-                "url": "https://www.atomcamp.com/career-services"
-            },
-            {
-                "text": "Atomcamp instructors are industry experts with 10+ years of experience at top companies like Google, Microsoft, Amazon, and Netflix. They bring real-world experience and practical knowledge to help students succeed in their data science careers.",
-                "url": "https://www.atomcamp.com/instructors"
             }
         ]
         
-        docs = []
-        for item in sample_data:
-            docs.append(Document(page_content=item["text"], metadata={"url": item["url"]}))
-        
+        docs = [Document(page_content=item["text"], metadata={"url": item["url"]}) for item in sample_data]
         splitter = RecursiveCharacterTextSplitter(chunk_size=500, chunk_overlap=50)
         chunks = splitter.split_documents(docs)
         
@@ -70,7 +51,6 @@ def initialize_vectorstore():
         vectorstore.save_local("atomcamp_vector_db")
         retriever = vectorstore.as_retriever()
         
-        print("Sample vectorstore created successfully")
         return "Sample vectorstore created successfully"
 
 def call_groq_api(message, context):
@@ -120,25 +100,21 @@ def call_groq_api(message, context):
             result = response.json()
             return result["choices"][0]["message"]["content"]
         else:
-            print(f"Groq API error: {response.status_code}")
             return None
             
     except Exception as e:
-        print(f"Groq API error: {e}")
         return None
 
-def generate_response_with_groq(message, context):
+def generate_response(message, context):
     groq_response = call_groq_api(message, context)
     
     if groq_response:
         return groq_response
-    else:
-        return generate_fallback_response(message, context)
-
-def generate_fallback_response(message, context):
+    
+    # Fallback responses
     message_lower = message.lower()
     
-    if any(word in message_lower for word in ['course', 'courses', 'learn', 'study', 'curriculum']):
+    if any(word in message_lower for word in ['course', 'courses', 'learn', 'study']):
         return """Atomcamp Courses:
 
 Core Programs:
@@ -155,8 +131,8 @@ Learning Tracks:
 • Advanced Track (9 months) - Industry-ready with job placement
 
 Would you like details about any specific course?"""
-
-    elif any(word in message_lower for word in ['career', 'job', 'placement', 'salary', 'work']):
+    
+    elif any(word in message_lower for word in ['career', 'job', 'placement']):
         return """Career Services at Atomcamp:
 
 Job Placement Support:
@@ -173,78 +149,8 @@ Career Growth:
 • Ongoing career mentorship
 • Industry networking events
 
-Success Stories:
-Our graduates work at top companies like Google, Microsoft, Amazon, Netflix, and leading startups worldwide.
-
 Ready to transform your career in data science?"""
-
-    elif any(word in message_lower for word in ['about', 'atomcamp', 'company', 'who', 'what']):
-        return """About Atomcamp:
-
-Atomcamp is a premier data science education platform dedicated to transforming careers through practical, industry-focused learning.
-
-What Makes Us Special:
-• Expert Instructors - Industry professionals with 10+ years experience
-• Hands-on Learning - Real projects, not just theory
-• Personalized Mentorship - 1-on-1 guidance throughout your journey
-• Job Guarantee - 95% placement rate with salary increases up to 300%
-• Flexible Learning - Online, part-time, and full-time options
-
-Our Mission:
-To make data science education accessible, practical, and career-focused, helping students become job-ready data scientists."""
-
-    elif any(word in message_lower for word in ['machine learning', 'ml', 'algorithm', 'model']):
-        return """Machine Learning at Atomcamp:
-
-Core ML Topics Covered:
-• Supervised Learning - Linear/Logistic Regression, Decision Trees, Random Forest
-• Unsupervised Learning - Clustering, PCA, Association Rules
-• Deep Learning - Neural Networks, CNN, RNN, LSTM
-• Natural Language Processing - Text analysis, sentiment analysis
-• Computer Vision - Image recognition, object detection
-
-Practical Projects:
-• Predictive analytics for business
-• Recommendation systems
-• Fraud detection models
-• Customer segmentation
-• Price prediction algorithms
-
-Want to dive deeper into any specific ML topic?"""
-
-    elif any(word in message_lower for word in ['python', 'programming', 'code', 'coding']):
-        return """Python for Data Science at Atomcamp:
-
-Python Fundamentals:
-• Variables, data types, and control structures
-• Functions, classes, and object-oriented programming
-• File handling and error management
-• Libraries and package management
-
-Data Science Libraries:
-• Pandas - Data manipulation and analysis
-• NumPy - Numerical computing
-• Matplotlib/Seaborn - Data visualization
-• Scikit-learn - Machine learning
-• TensorFlow/PyTorch - Deep learning
-
-Perfect for beginners and experienced programmers alike!"""
-
-    elif any(word in message_lower for word in ['start', 'begin', 'beginner', 'new', 'how']):
-        return """Getting Started with Atomcamp:
-
-Step 1: Choose Your Path
-• Complete Beginner? Start with Python Fundamentals
-• Some Programming Experience? Jump to Data Science Essentials
-• Want to Specialize? Pick Machine Learning or AI track
-
-Step 2: Learning Format
-• Self-paced Online - Learn at your own speed
-• Live Cohorts - Interactive sessions with peers
-• 1-on-1 Mentorship - Personalized guidance
-
-Ready to begin your data science journey?"""
-
+    
     else:
         return f"""Thank you for your question about "{message}"!
 
@@ -259,296 +165,751 @@ Would you like me to elaborate on any specific aspect?"""
 
 def chat_response(message):
     try:
-        print(f"Received message: {message}")
-        
         if retriever:
             docs = retriever.get_relevant_documents(message)
             context = "\n\n".join([doc.page_content for doc in docs[:3]])
         else:
             context = "I'm an AI assistant for Atomcamp, a data science education platform."
         
-        response = generate_response_with_groq(message, context)
-        print(f"Generated response: {response[:100]}...")
+        response = generate_response(message, context)
         return response
         
     except Exception as e:
-        error_msg = f"Sorry, I encountered an error: {str(e)}. Please try again."
-        print(f"Error in chat_response: {error_msg}")
-        return error_msg
+        return f"Sorry, I encountered an error: {str(e)}. Please try again."
 
 # Initialize systems
-print("Initializing systems...")
-groq_status = initialize_groq()
-vectorstore_status = initialize_vectorstore()
-print(f"Groq: {groq_status}")
-print(f"Vectorstore: {vectorstore_status}")
-
-# Custom CSS and HTML
-custom_css = """
-body {
-    font-family: 'Inter', sans-serif;
-    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-    margin: 0;
-    padding: 0;
-}
-
-.gradio-container {
-    max-width: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
-}
-
-.main {
-    max-width: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
-}
-
-#chatbot-interface {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-.header {
-    text-align: center;
-    padding: 2rem 1rem;
-    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-}
-
-.logo {
-    width: 160px;
-    height: 48px;
-    margin: 0 auto 1.5rem;
-    background: #22c55e;
-    border-radius: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-weight: 700;
-    font-size: 18px;
-}
-
-.title-bubble {
-    background: #f0fdf4;
-    border: 1px solid #bbf7d0;
-    border-radius: 1rem;
-    padding: 1.5rem;
-    display: inline-block;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    max-width: fit-content;
-}
-
-.title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #166534;
-    margin-bottom: 0.5rem;
-    text-align: left;
-}
-
-.status {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    text-align: left;
-    color: #166534;
-}
-
-.status-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #22c55e;
-    animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-}
-
-.welcome-section {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-}
-
-.welcome-card {
-    background: white;
-    border-radius: 1rem;
-    padding: 2rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    max-width: 600px;
-    text-align: center;
-}
-
-.welcome-icon {
-    width: 48px;
-    height: 48px;
-    background: #22c55e;
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto 1rem;
-    color: white;
-    font-size: 24px;
-    font-weight: bold;
-}
-
-.welcome-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    color: #374151;
-}
-
-.welcome-description {
-    color: #6b7280;
-    margin-bottom: 2rem;
-    font-size: 0.875rem;
-    line-height: 1.5;
-}
-
-.feature-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1rem;
-    text-align: left;
-}
-
-.feature-card {
-    background: #f9fafb;
-    padding: 1rem;
-    border-radius: 0.5rem;
-}
-
-.feature-title {
-    font-weight: 600;
-    margin-bottom: 0.5rem;
-    font-size: 0.875rem;
-    color: #374151;
-}
-
-.feature-list {
-    font-size: 0.75rem;
-    color: #6b7280;
-    line-height: 1.5;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.feature-list li {
-    margin-bottom: 0.25rem;
-}
-"""
+initialize_groq()
+initialize_vectorstore()
 
 def create_interface():
-    with gr.Blocks(
-        css=custom_css,
-        title="atomcamp AI Chatbot",
-        theme=gr.themes.Soft()
-    ) as demo:
+    interface_html = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>atomcamp AI Chatbot</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .header {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding-top: 2rem;
+            padding-bottom: 1.5rem;
+        }
+
+        .logo {
+            margin-bottom: 1.5rem;
+        }
+
+        .logo-img {
+            height: 3rem;
+            width: auto;
+            object-fit: contain;
+        }
+
+        .logo-placeholder {
+            width: 160px;
+            height: 48px;
+            background: #22c55e;
+            border-radius: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: 700;
+            font-size: 18px;
+        }
+
+        .title-bubble {
+            width: 100%;
+            max-width: 64rem;
+            padding: 0 1rem;
+        }
+
+        .bubble-container {
+            background: #f0fdf4;
+            border: 1px solid #e5e7eb;
+            border-radius: 1rem;
+            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+            padding: 1.5rem;
+            max-width: fit-content;
+        }
+
+        .bubble-content {
+            text-align: left;
+        }
+
+        .chatbot-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #166534;
+            margin-bottom: 0.25rem;
+            letter-spacing: -0.025em;
+        }
+
+        .typing-indicator {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .typing-dots {
+            display: flex;
+            gap: 0.25rem;
+        }
+
+        .typing-dot {
+            width: 0.375rem;
+            height: 0.375rem;
+            background: #166534;
+            border-radius: 50%;
+            animation: bounce 1s infinite;
+        }
+
+        .typing-dot:nth-child(2) {
+            animation-delay: 0.1s;
+        }
+
+        .typing-dot:nth-child(3) {
+            animation-delay: 0.2s;
+        }
+
+        .typing-text {
+            color: #166534;
+            font-size: 1rem;
+            font-weight: 500;
+        }
+
+        .status-indicator {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .status-dot {
+            width: 0.5rem;
+            height: 0.5rem;
+            border-radius: 50%;
+            background: #16a34a;
+        }
+
+        .status-text {
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #166534;
+        }
+
+        .chat-container {
+            max-width: 64rem;
+            margin: 0 auto;
+            padding: 0 1rem;
+            padding-bottom: 8rem;
+            flex: 1;
+        }
+
+        .welcome-screen {
+            text-align: center;
+            padding: 3rem 0;
+        }
+
+        .welcome-card {
+            background: white;
+            border-radius: 1rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            padding: 2rem;
+            max-width: 36rem;
+            margin: 0 auto;
+        }
+
+        .welcome-icon {
+            width: 3rem;
+            height: 3rem;
+            background: #22c55e;
+            border-radius: 0.75rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 1rem;
+            color: white;
+            font-size: 1.5rem;
+            font-weight: bold;
+        }
+
+        .welcome-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: 0.75rem;
+            letter-spacing: -0.025em;
+        }
+
+        .welcome-description {
+            color: #6b7280;
+            font-size: 0.875rem;
+            line-height: 1.5;
+            margin-bottom: 1.5rem;
+        }
+
+        .feature-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 0.75rem;
+            text-align: left;
+        }
+
+        .feature-card {
+            background: #f9fafb;
+            border-radius: 0.5rem;
+            padding: 0.75rem;
+        }
+
+        .feature-title {
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        .feature-list {
+            font-size: 0.75rem;
+            color: #6b7280;
+            line-height: 1.5;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .feature-list li {
+            margin-bottom: 0.25rem;
+        }
+
+        .messages-container {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .message {
+            display: flex;
+            animation: fadeIn 0.3s ease-out;
+        }
+
+        .message.user {
+            justify-content: flex-end;
+        }
+
+        .message.assistant {
+            justify-content: flex-start;
+        }
+
+        .message-content {
+            display: flex;
+            align-items: flex-end;
+            gap: 0.5rem;
+            max-width: 48rem;
+        }
+
+        .message.user .message-content {
+            max-width: 28rem;
+        }
+
+        .avatar {
+            width: 2rem;
+            height: 2rem;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+
+        .avatar.user {
+            background: #22c55e;
+            color: white;
+        }
+
+        .avatar.assistant {
+            background: #e5e7eb;
+            color: #6b7280;
+        }
+
+        .message-bubble {
+            padding: 0.75rem 1rem;
+            border-radius: 1rem;
+            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+        }
+
+        .message.user .message-bubble {
+            background: #22c55e;
+            color: white;
+            border-bottom-right-radius: 0.375rem;
+        }
+
+        .message.assistant .message-bubble {
+            background: #e5e7eb;
+            color: #1f2937;
+            border-bottom-left-radius: 0.375rem;
+        }
+
+        .message-text {
+            font-size: 0.875rem;
+            font-weight: 500;
+            line-height: 1.5;
+        }
+
+        .message-formatted {
+            font-size: 0.875rem;
+            line-height: 1.5;
+        }
+
+        .bullet-point {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 0.375rem;
+        }
+
+        .bullet-icon {
+            color: #16a34a;
+            margin-right: 0.5rem;
+            margin-top: 0.125rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        .bullet-text {
+            font-size: 0.875rem;
+            line-height: 1.5;
+        }
+
+        .numbered-point {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 0.375rem;
+        }
+
+        .number-icon {
+            color: #16a34a;
+            margin-right: 0.5rem;
+            font-weight: 600;
+            font-size: 0.875rem;
+        }
+
+        .input-area {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(8px);
+            border-top: 1px solid #e5e7eb;
+            padding: 1rem;
+        }
+
+        .input-container {
+            max-width: 64rem;
+            margin: 0 auto;
+        }
+
+        .input-form {
+            position: relative;
+        }
+
+        .input-wrapper {
+            position: relative;
+            background: #4b5563;
+            border-radius: 9999px;
+            overflow: hidden;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        .message-input {
+            width: 100%;
+            padding: 0.875rem 1.25rem;
+            padding-right: 3rem;
+            background: transparent;
+            border: none;
+            outline: none;
+            color: white;
+            font-size: 0.875rem;
+            font-weight: 500;
+            letter-spacing: 0.025em;
+        }
+
+        .message-input::placeholder {
+            color: #d1d5db;
+        }
+
+        .send-button {
+            position: absolute;
+            right: 0.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+            background: #22c55e;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 2.5rem;
+            height: 2.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.2s;
+            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+        }
+
+        .send-button:hover:not(:disabled) {
+            background: #16a34a;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        .send-button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .status-bar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 0.5rem;
+            padding: 0 0.5rem;
+        }
+
+        .connection-status {
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: #6b7280;
+        }
+
+        .char-count {
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: #9ca3af;
+        }
+
+        @keyframes bounce {
+            0%, 80%, 100% {
+                transform: scale(0);
+            }
+            40% {
+                transform: scale(1);
+            }
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(8px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        @media (max-width: 768px) {
+            .header {
+                padding-top: 1rem;
+                padding-bottom: 1rem;
+            }
+            
+            .chat-container {
+                padding-bottom: 6rem;
+            }
+            
+            .message-content {
+                max-width: calc(100vw - 2rem);
+            }
+            
+            .message.user .message-content {
+                max-width: calc(100vw - 2rem);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="logo">
+            <div class="logo-placeholder">atomcamp</div>
+        </div>
         
-        gr.HTML("""
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-        <div id="chatbot-interface">
-            <div class="header">
-                <div class="logo">atomcamp</div>
-                <div class="title-bubble">
-                    <div class="title">Chatbot</div>
-                    <div class="status">
+        <div class="title-bubble">
+            <div class="bubble-container">
+                <div class="bubble-content">
+                    <h1 class="chatbot-title">Chatbot</h1>
+                    
+                    <div id="typingIndicator" class="typing-indicator hidden">
+                        <div class="typing-dots">
+                            <div class="typing-dot"></div>
+                            <div class="typing-dot"></div>
+                            <div class="typing-dot"></div>
+                        </div>
+                        <span class="typing-text">Typing...</span>
+                    </div>
+                    
+                    <div id="statusIndicator" class="status-indicator">
                         <div class="status-dot"></div>
-                        <span>Online & Ready</span>
+                        <span class="status-text">Online</span>
                     </div>
                 </div>
             </div>
-            
-            <div class="welcome-section">
-                <div class="welcome-card">
-                    <div class="welcome-icon">AI</div>
-                    <h2 class="welcome-title">Welcome to atomcamp AI</h2>
-                    <p class="welcome-description">Ask me about courses, data science concepts, and learning paths.</p>
-                    
-                    <div class="feature-grid">
-                        <div class="feature-card">
-                            <h3 class="feature-title">Ask me about:</h3>
-                            <ul class="feature-list">
-                                <li>• Course information</li>
-                                <li>• Data science concepts</li>
-                                <li>• Learning paths</li>
-                                <li>• Career guidance</li>
-                            </ul>
-                        </div>
-                        <div class="feature-card">
-                            <h3 class="feature-title">Try asking:</h3>
-                            <ul class="feature-list">
-                                <li>• "What courses do you offer?"</li>
-                                <li>• "Explain machine learning"</li>
-                                <li>• "How do I get started?"</li>
-                                <li>• "Career opportunities?"</li>
-                            </ul>
-                        </div>
+        </div>
+    </div>
+
+    <div class="chat-container">
+        <div id="welcomeScreen" class="welcome-screen">
+            <div class="welcome-card">
+                <div class="welcome-icon">✨</div>
+                <h2 class="welcome-title">Welcome to atomcamp AI</h2>
+                <p class="welcome-description">Ask me about courses, data science concepts, and learning paths.</p>
+                
+                <div class="feature-grid">
+                    <div class="feature-card">
+                        <h3 class="feature-title">Ask me about:</h3>
+                        <ul class="feature-list">
+                            <li>• Course information</li>
+                            <li>• Data science concepts</li>
+                            <li>• Learning paths</li>
+                        </ul>
+                    </div>
+                    <div class="feature-card">
+                        <h3 class="feature-title">Try asking:</h3>
+                        <ul class="feature-list">
+                            <li>• "What courses do you offer?"</li>
+                            <li>• "Explain machine learning"</li>
+                            <li>• "How do I get started?"</li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </div>
-        """)
         
-        with gr.Row():
-            with gr.Column(scale=1):
-                chatbot = gr.Chatbot(
-                    label="Chat with atomcamp AI",
-                    height=400,
-                    show_label=True,
-                    container=True,
-                    type="messages"
-                )
+        <div id="messagesContainer" class="messages-container hidden"></div>
+    </div>
+
+    <div class="input-area">
+        <div class="input-container">
+            <form id="chatForm" class="input-form">
+                <div class="input-wrapper">
+                    <input 
+                        type="text" 
+                        id="messageInput" 
+                        class="message-input"
+                        placeholder="Ask me anything about atomcamp..."
+                        maxlength="1000"
+                        autocomplete="off"
+                    >
+                    <button type="submit" id="sendButton" class="send-button">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 19V5M5 12l7-7 7 7"/>
+                        </svg>
+                    </button>
+                </div>
                 
-                with gr.Row():
-                    msg = gr.Textbox(
-                        placeholder="Ask me anything about atomcamp...",
-                        container=False,
-                        scale=4,
-                        max_lines=3
-                    )
-                    submit = gr.Button(
-                        "Send",
-                        variant="primary",
-                        scale=1
-                    )
-        
-        def respond(message, history):
-            if not message.strip():
-                return history, ""
+                <div class="status-bar">
+                    <span id="connectionStatus" class="connection-status">Connected to atomcamp AI</span>
+                    <span id="charCount" class="char-count">0/1000</span>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script>
+        let messages = [];
+        let isTyping = false;
+        let isConnected = true;
+
+        const welcomeScreen = document.getElementById('welcomeScreen');
+        const messagesContainer = document.getElementById('messagesContainer');
+        const chatForm = document.getElementById('chatForm');
+        const messageInput = document.getElementById('messageInput');
+        const sendButton = document.getElementById('sendButton');
+        const typingIndicator = document.getElementById('typingIndicator');
+        const statusIndicator = document.getElementById('statusIndicator');
+        const connectionStatus = document.getElementById('connectionStatus');
+        const charCount = document.getElementById('charCount');
+
+        chatForm.addEventListener('submit', handleSubmit);
+        messageInput.addEventListener('input', updateCharCount);
+
+        function updateCharCount() {
+            const count = messageInput.value.length;
+            charCount.textContent = `${count}/1000`;
+        }
+
+        async function handleSubmit(e) {
+            e.preventDefault();
+            const message = messageInput.value.trim();
+            
+            if (!message || isTyping) return;
+            
+            addMessage(message, 'user');
+            messageInput.value = '';
+            updateCharCount();
+            setTyping(true);
+            
+            try {
+                const response = await fetch('/predict', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ data: [message] })
+                });
+                
+                const data = await response.json();
+                
+                await new Promise(resolve => setTimeout(resolve, 1200));
+                
+                addMessage(data.data[0] || 'Sorry, I could not generate a response.', 'assistant');
+                setConnected(true);
+                
+            } catch (error) {
+                console.error('Error:', error);
+                setConnected(false);
+                addMessage('I am having trouble connecting. Please try again.', 'assistant');
+            } finally {
+                setTyping(false);
+            }
+        }
+
+        function addMessage(content, role) {
+            if (messages.length === 0) {
+                welcomeScreen.classList.add('hidden');
+                messagesContainer.classList.remove('hidden');
+            }
+            
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${role}`;
+            
+            const messageContent = document.createElement('div');
+            messageContent.className = 'message-content';
             
-            # Add user message to history
-            history.append({"role": "user", "content": message})
+            const avatar = document.createElement('div');
+            avatar.className = `avatar ${role}`;
             
-            # Get bot response
-            bot_response = chat_response(message)
+            if (role === 'user') {
+                avatar.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>';
+            } else {
+                avatar.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><circle cx="12" cy="5" r="2"></circle><path d="M12 7v4"></path><line x1="8" y1="16" x2="8" y2="16"></line><line x1="16" y1="16" x2="16" y2="16"></line></svg>';
+            }
+            
+            const bubble = document.createElement('div');
+            bubble.className = 'message-bubble';
+            
+            if (role === 'user') {
+                bubble.innerHTML = `<div class="message-text">${content}</div>`;
+                messageContent.appendChild(bubble);
+                messageContent.appendChild(avatar);
+            } else {
+                bubble.innerHTML = `<div class="message-formatted">${formatMessageContent(content)}</div>`;
+                messageContent.appendChild(avatar);
+                messageContent.appendChild(bubble);
+            }
             
-            # Add bot response to history
-            history.append({"role": "assistant", "content": bot_response})
+            messageDiv.appendChild(messageContent);
+            messagesContainer.appendChild(messageDiv);
+            
+            scrollToBottom();
+            messages.push({ content, role, timestamp: new Date() });
+        }
+
+        function formatMessageContent(content) {
+            return content.split('\\n').map(line => {
+                if (line.trim().startsWith('•') || line.trim().startsWith('-')) {
+                    return `<div class="bullet-point">
+                        <span class="bullet-icon">•</span>
+                        <span class="bullet-text">${line.replace(/^[•-]\\s*/, '')}</span>
+                    </div>`;
+                } else if (/^\\d+\\./.test(line.trim())) {
+                    const match = line.match(/^\\d+\\./);
+                    return `<div class="numbered-point">
+                        <span class="number-icon">${match ? match[0] : ''}</span>
+                        <span class="bullet-text">${line.replace(/^\\d+\\.\\s*/, '')}</span>
+                    </div>`;
+                } else if (line.trim() === '') {
+                    return '<br>';
+                } else {
+                    return `<p style="margin-bottom: 0.375rem; font-size: 0.875rem; line-height: 1.5;">${line}</p>`;
+                }
+            }).join('');
+        }
+
+        function setTyping(typing) {
+            isTyping = typing;
+            sendButton.disabled = typing;
             
-            return history, ""
+            if (typing) {
+                typingIndicator.classList.remove('hidden');
+                statusIndicator.classList.add('hidden');
+            } else {
+                typingIndicator.classList.add('hidden');
+                statusIndicator.classList.remove('hidden');
+            }
+        }
+
+        function setConnected(connected) {
+            isConnected = connected;
+            connectionStatus.textContent = connected ? 'Connected to atomcamp AI' : 'Connection lost';
+        }
+
+        function scrollToBottom() {
+            setTimeout(() => {
+                window.scrollTo({
+                    top: document.body.scrollHeight,
+                    behavior: 'smooth'
+                });
+            }, 100);
+        }
+    </script>
+</body>
+</html>
+    """
+    
+    with gr.Blocks(
+        css=".gradio-container { display: none !important; }",
+        title="atomcamp AI Chatbot"
+    ) as demo:
         
-        # Set up event handlers
-        submit.click(respond, [msg, chatbot], [chatbot, msg])
-        msg.submit(respond, [msg, chatbot], [chatbot, msg])
+        # Hidden components for API
+        with gr.Row(visible=False):
+            input_text = gr.Textbox()
+            output_text = gr.Textbox()
+            submit_btn = gr.Button()
+        
+        # Display the interface
+        gr.HTML(interface_html)
+        
+        # Set up API endpoint
+        submit_btn.click(
+            fn=chat_response,
+            inputs=input_text,
+            outputs=output_text,
+            api_name="predict"
+        )
         
         return demo
 
 if __name__ == "__main__":
-    print("Starting atomcamp AI Chatbot...")
     demo = create_interface()
     demo.launch(
         server_name="0.0.0.0",