Update app.py

app.py

@@ -1,133 +1,845 @@
 import gradio as gr
-import requests
+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
 
-# Your backend URL (you can change this to your Flask backend)
-BACKEND_URL = "http://localhost:5000/api/chat"  # Change this when you deploy your backend
+# Load environment variables
+load_dotenv()
 
-def chat_with_bot(message, history):
-    """
-    Function to handle chat with the bot
+# Initialize embeddings
+embeddings = HuggingFaceEmbeddings(model_name="sentence-transformers/all-MiniLM-L6-v2")
+
+# Global variables
+vectorstore = None
+retriever = None
+
+def initialize_vectorstore():
+    """Initialize or create vectorstore"""
+    global vectorstore, retriever
+    
+    try:
+        # Try to load existing vectorstore
+        vectorstore = FAISS.load_local("atomcamp_vector_db", embeddings, allow_dangerous_deserialization=True)
+        retriever = vectorstore.as_retriever()
+        return "✅ Vectorstore loaded successfully!"
+    except:
+        # If no vectorstore exists, create sample data
+        sample_data = [
+            {
+                "text": "Atomcamp is a leading data science education platform offering comprehensive courses in machine learning, Python programming, data analysis, and AI. We provide hands-on projects, expert mentorship, and career guidance to help students become successful data scientists.",
+                "url": "https://www.atomcamp.com/about"
+            },
+            {
+                "text": "Our courses include: Python for Data Science, Machine Learning Fundamentals, Deep Learning with TensorFlow, Data Visualization with Matplotlib and Seaborn, SQL for Data Analysis, Statistics for Data Science, and Advanced AI Techniques.",
+                "url": "https://www.atomcamp.com/courses"
+            },
+            {
+                "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"
+            }
+        ]
+        
+        # Create documents
+        docs = []
+        for item in sample_data:
+            docs.append(Document(page_content=item["text"], metadata={"url": item["url"]}))
+        
+        # Split documents
+        splitter = RecursiveCharacterTextSplitter(chunk_size=500, chunk_overlap=50)
+        chunks = splitter.split_documents(docs)
+        
+        # Create vectorstore
+        vectorstore = FAISS.from_documents(chunks, embeddings)
+        vectorstore.save_local("atomcamp_vector_db")
+        retriever = vectorstore.as_retriever()
+        
+        return "✅ Sample vectorstore created successfully!"
+
+def generate_response(message, context):
+    """Generate contextual responses"""
+    message_lower = message.lower()
+    
+    # Course-related queries
+    if any(word in message_lower for word in ['course', 'courses', 'learn', 'study', 'curriculum']):
+        return """🎓 **Atomcamp Courses:**
+
+**Core Programs:**
+• **Python for Data Science** - Master Python programming fundamentals
+• **Machine Learning Fundamentals** - Learn ML algorithms and applications  
+• **Deep Learning with TensorFlow** - Build neural networks and AI models
+• **Data Visualization** - Create stunning charts with Matplotlib & Seaborn
+• **SQL for Data Analysis** - Database querying and data manipulation
+• **Statistics for Data Science** - Statistical analysis and hypothesis testing
+
+**Learning Tracks:**
+• **Beginner Track** (3 months) - Perfect for newcomers
+• **Intermediate Track** (6 months) - Build real-world projects
+• **Advanced Track** (9 months) - Industry-ready with job placement
+
+Would you like details about any specific course?"""
+
+    # Career-related queries
+    elif any(word in message_lower for word in ['career', 'job', 'placement', 'salary', 'work']):
+        return """💼 **Career Services at Atomcamp:**
+
+**Job Placement Support:**
+• Resume building and optimization
+• Technical interview preparation
+• Portfolio development guidance
+• Direct connections with hiring partners
+• Mock interviews with industry experts
+
+**Career Growth:**
+• Average salary increase: 150-300%
+• 95% job placement rate within 6 months
+• Access to exclusive job opportunities
+• 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?"""
+
+    # About Atomcamp
+    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."""
+
+    # Machine Learning specific
+    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?"""
+
+    # Python programming
+    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!"""
+
+    # Getting started
+    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?"""
+
+    # Default response with context
+    else:
+        return f"""Thank you for your question about "{message}"!
+
+As an Atomcamp AI assistant, I'm here to help you with:
+
+🎓 **Course Information** - Learn about our data science programs
+💼 **Career Guidance** - Job placement and career growth
+🐍 **Technical Topics** - Python, ML, AI, and data analysis
+🚀 **Getting Started** - How to begin your data science journey
+
+Would you like me to elaborate on any specific aspect?"""
+
+# Initialize vectorstore on startup
+init_message = initialize_vectorstore()
+
+# Create the custom HTML interface
+def create_chat_interface():
+    return """
+<!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, #f8fafc 0%, #f1f5f9 100%);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .header {
+            text-align: center;
+            padding: 2rem 1rem;
+        }
+
+        .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;
+        }
+
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #22c55e;
+        }
+
+        .status.typing .status-dot {
+            animation: pulse 1s infinite;
+        }
+
+        .typing-dots {
+            display: flex;
+            gap: 4px;
+            margin-right: 8px;
+        }
+
+        .typing-dot {
+            width: 6px;
+            height: 6px;
+            background: #16a34a;
+            border-radius: 50%;
+            animation: bounce 1.4s infinite ease-in-out;
+        }
+
+        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+
+        .chat-container {
+            flex: 1;
+            max-width: 4rem;
+            margin: 0 auto;
+            padding: 0 1rem;
+            overflow-y: auto;
+            max-height: calc(100vh - 300px);
+        }
+
+        .welcome-screen {
+            text-align: center;
+            padding: 3rem 1rem;
+        }
+
+        .welcome-card {
+            background: white;
+            border-radius: 1rem;
+            padding: 2rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        .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;
+        }
+
+        .message {
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: flex-end;
+            gap: 0.5rem;
+            animation: fadeIn 0.3s ease-out;
+        }
+
+        .message.user {
+            justify-content: flex-end;
+        }
+
+        .message-bubble {
+            max-width: 70%;
+            padding: 0.75rem 1rem;
+            border-radius: 1rem;
+            font-size: 0.875rem;
+            line-height: 1.5;
+        }
+
+        .message.user .message-bubble {
+            background: #22c55e;
+            color: white;
+            border-bottom-right-radius: 0.25rem;
+        }
+
+        .message.bot .message-bubble {
+            background: #f3f4f6;
+            color: #374151;
+            border-bottom-left-radius: 0.25rem;
+        }
+
+        .avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            flex-shrink: 0;
+        }
+
+        .avatar.user {
+            background: #22c55e;
+            color: white;
+        }
+
+        .avatar.bot {
+            background: #e5e7eb;
+            color: #6b7280;
+        }
+
+        .typing-indicator {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.75rem 1rem;
+            background: #f3f4f6;
+            border-radius: 1rem;
+            border-bottom-left-radius: 0.25rem;
+            max-width: 70%;
+        }
+
+        .input-area {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid #e5e7eb;
+            padding: 1rem;
+        }
+
+        .input-container {
+            max-width: 4rem;
+            margin: 0 auto;
+            position: relative;
+        }
+
+        .input-wrapper {
+            background: #4b5563;
+            border-radius: 2rem;
+            display: flex;
+            align-items: center;
+            padding: 0.5rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        .message-input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            outline: none;
+            color: white;
+            padding: 0.75rem 1rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        .message-input::placeholder {
+            color: #d1d5db;
+        }
+
+        .send-button {
+            background: #22c55e;
+            border: none;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .send-button:hover:not(:disabled) {
+            background: #16a34a;
+            transform: scale(1.05);
+        }
+
+        .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 1rem;
+            font-size: 0.75rem;
+            color: #6b7280;
+            font-weight: 500;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+
+        @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); }
+        }
+
+        @media (max-width: 768px) {
+            .chat-container {
+                max-width: 100%;
+            }
+            .input-container {
+                max-width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <div class="header">
+        <div class="logo">atomcamp</div>
+        <div class="title-bubble">
+            <div class="title">Chatbot</div>
+            <div class="status" id="status">
+                <div class="status-dot"></div>
+                <span id="status-text">Online</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Chat Container -->
+    <div class="chat-container" id="chatContainer">
+        <div class="welcome-screen" id="welcomeScreen">
+            <div class="welcome-card">
+                <div class="welcome-icon">✨</div>
+                <h2 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: #374151;">Welcome to atomcamp AI</h2>
+                <p style="color: #6b7280; margin-bottom: 2rem; font-size: 0.875rem; line-height: 1.5;">Ask me about courses, data science concepts, and learning paths.</p>
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; text-align: left;">
+                    <div style="background: #f9fafb; padding: 1rem; border-radius: 0.5rem;">
+                        <h3 style="font-weight: 600; margin-bottom: 0.5rem; font-size: 0.875rem;">Ask me about:</h3>
+                        <ul style="font-size: 0.75rem; color: #6b7280; line-height: 1.5;">
+                            <li>• Course information</li>
+                            <li>• Data science concepts</li>
+                            <li>• Learning paths</li>
+                        </ul>
+                    </div>
+                    <div style="background: #f9fafb; padding: 1rem; border-radius: 0.5rem;">
+                        <h3 style="font-weight: 600; margin-bottom: 0.5rem; font-size: 0.875rem;">Try asking:</h3>
+                        <ul style="font-size: 0.75rem; color: #6b7280; line-height: 1.5;">
+                            <li>• "What courses do you offer?"</li>
+                            <li>• "Explain machine learning"</li>
+                            <li>• "How do I get started?"</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Input Area -->
+    <div class="input-area">
+        <div class="input-container">
+            <form id="chatForm">
+                <div class="input-wrapper">
+                    <input 
+                        type="text" 
+                        class="message-input" 
+                        id="messageInput" 
+                        placeholder="Ask me anything about atomcamp..."
+                        maxlength="1000"
+                        autocomplete="off"
+                    >
+                    <button type="submit" class="send-button" id="sendButton">
+                        <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>
+            </form>
+            <div class="status-bar">
+                <span id="connectionStatus">Connected to atomcamp AI</span>
+                <span id="charCount">0/1000</span>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let messages = [];
+        let isTyping = false;
+        let isConnected = true;
+
+        const chatContainer = document.getElementById('chatContainer');
+        const welcomeScreen = document.getElementById('welcomeScreen');
+        const chatForm = document.getElementById('chatForm');
+        const messageInput = document.getElementById('messageInput');
+        const sendButton = document.getElementById('sendButton');
+        const status = document.getElementById('status');
+        const statusText = document.getElementById('status-text');
+        const connectionStatus = document.getElementById('connectionStatus');
+        const charCount = document.getElementById('charCount');
+
+        // Initialize
+        chatForm.addEventListener('submit', handleSubmit);
+        messageInput.addEventListener('input', updateCharCount);
+
+        function updateCharCount(e) {
+            const count = e.target.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({ target: { value: '' } });
+            setTyping(true);
+            
+            try {
+                // Simulate API call to your backend
+                const response = await fetch('/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message })
+                });
+                
+                const data = await response.json();
+                
+                // Simulate typing delay
+                await new Promise(resolve => setTimeout(resolve, 1200));
+                
+                addMessage(data.response || 'Sorry, I couldn\\'t generate a response.', 'bot');
+                setConnected(true);
+                
+            } catch (error) {
+                console.error('Error:', error);
+                setConnected(false);
+                addMessage('I\\'m having trouble connecting. Please try again.', 'bot');
+            } finally {
+                setTyping(false);
+            }
+        }
+
+        function addMessage(content, role) {
+            if (messages.length === 0) {
+                welcomeScreen.style.display = 'none';
+            }
+            
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${role}`;
+            
+            const avatar = document.createElement('div');
+            avatar.className = `avatar ${role}`;
+            avatar.textContent = role === 'user' ? '👤' : '🤖';
+            
+            const bubble = document.createElement('div');
+            bubble.className = 'message-bubble';
+            
+            // Format message content
+            if (role === 'bot') {
+                bubble.innerHTML = formatMessageContent(content);
+            } else {
+                bubble.textContent = content;
+            }
+            
+            if (role === 'user') {
+                messageDiv.appendChild(bubble);
+                messageDiv.appendChild(avatar);
+            } else {
+                messageDiv.appendChild(avatar);
+                messageDiv.appendChild(bubble);
+            }
+            
+            chatContainer.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 style="display: flex; align-items: flex-start; margin-bottom: 6px;">
+                        <span style="color: #16a34a; margin-right: 8px; margin-top: 2px; font-size: 0.875rem; font-weight: 500;">•</span>
+                        <span style="font-size: 0.875rem; line-height: 1.5;">${line.replace(/^[•-]\\s*/, '')}</span>
+                    </div>`;
+                } else if (/^\\d+\\./.test(line.trim())) {
+                    const match = line.match(/^\\d+\\./);
+                    return `<div style="display: flex; align-items: flex-start; margin-bottom: 6px;">
+                        <span style="color: #16a34a; margin-right: 8px; font-weight: 600; font-size: 0.875rem;">${match ? match[0] : ''}</span>
+                        <span style="font-size: 0.875rem; line-height: 1.5;">${line.replace(/^\\d+\\.\\s*/, '')}</span>
+                    </div>`;
+                } else if (line.trim() === '') {
+                    return '<br>';
+                } else {
+                    return `<p style="margin-bottom: 6px; font-size: 0.875rem; line-height: 1.5;">${line}</p>`;
+                }
+            }).join('');
+        }
+
+        function setTyping(typing) {
+            isTyping = typing;
+            sendButton.disabled = typing;
+            
+            if (typing) {
+                status.classList.add('typing');
+                statusText.innerHTML = `
+                    <div class="typing-dots">
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                    </div>
+                    Typing...
+                `;
+                showTypingIndicator();
+            } else {
+                status.classList.remove('typing');
+                statusText.innerHTML = `<div class="status-dot"></div> ${isConnected ? 'Online' : 'Offline'}`;
+                hideTypingIndicator();
+            }
+        }
+
+        function showTypingIndicator() {
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'message bot';
+            typingDiv.id = 'typingIndicator';
+            
+            const avatar = document.createElement('div');
+            avatar.className = 'avatar bot';
+            avatar.textContent = '🤖';
+            
+            const indicator = document.createElement('div');
+            indicator.className = 'typing-indicator';
+            indicator.innerHTML = `
+                <div style="display: flex; gap: 4px;">
+                    <div style="width: 8px; height: 8px; background: #9ca3af; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out;"></div>
+                    <div style="width: 8px; height: 8px; background: #9ca3af; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out; animation-delay: -0.32s;"></div>
+                    <div style="width: 8px; height: 8px; background: #9ca3af; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out; animation-delay: -0.16s;"></div>
+                </div>
+                <span style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">typing...</span>
+            `;
+            
+            typingDiv.appendChild(avatar);
+            typingDiv.appendChild(indicator);
+            chatContainer.appendChild(typingDiv);
+            scrollToBottom();
+        }
+
+        function hideTypingIndicator() {
+            const indicator = document.getElementById('typingIndicator');
+            if (indicator) indicator.remove();
+        }
+
+        function setConnected(connected) {
+            isConnected = connected;
+            connectionStatus.textContent = connected ? 'Connected to atomcamp AI' : 'Connection lost';
+            
+            if (!isTyping) {
+                statusText.innerHTML = `<div class="status-dot"></div> ${connected ? 'Online' : 'Offline'}`;
+            }
+        }
+
+        function scrollToBottom() {
+            setTimeout(() => {
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }, 100);
+        }
+    </script>
+</body>
+</html>
     """
+
+def chat_response(message, history):
+    """Handle chat responses"""
     if not message.strip():
         return history, ""
     
     # Add user message to history
+    if history is None:
+        history = []
+    
     history = history + [[message, None]]
     
     try:
         # Simulate typing delay
         time.sleep(1)
         
-        # For demo purposes, we'll create a simple response
-        # Replace this with actual API call to your backend
-        response = f"Thanks for asking about '{message}'! This is atomcamp AI assistant. I can help you with:\n\n• Data Science courses\n• Machine Learning concepts\n• Programming tutorials\n• Career guidance\n\nWhat specific topic would you like to explore?"
+        # Get relevant documents
+        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."
         
-        # You can uncomment this when you have your backend ready:
-        # response_data = requests.post(BACKEND_URL, json={"message": message})
-        # response = response_data.json().get("response", "Sorry, I couldn't process your request.")
+        # Generate response
+        response = generate_response(message, context)
         
         # Add bot response to history
         history[-1][1] = response
         
     except Exception as e:
-        history[-1][1] = "Sorry, I'm having trouble connecting to the server. Please try again later."
+        history[-1][1] = f"Sorry, I encountered an error: {str(e)}. Please try again."
     
     return history, ""
 
-# Custom CSS for atomcamp branding
-custom_css = """
-.gradio-container {
-    font-family: 'Inter', sans-serif !important;
-}
-
-.chat-message {
-    font-size: 14px !important;
-}
-
-#chatbot {
-    height: 500px !important;
-}
-
-.message.user {
-    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
-    color: white !important;
-}
-
-.message.bot {
-    background: #f3f4f6 !important;
-    color: #374151 !important;
-}
-
-.contain {
-    max-width: 800px !important;
-    margin: 0 auto !important;
-}
-
-footer {
-    display: none !important;
-}
-"""
-
-# Create the Gradio interface
+# Create Gradio interface with custom HTML
 with gr.Blocks(
-    css=custom_css,
     title="atomcamp AI Chatbot",
-    theme=gr.themes.Soft(
-        primary_hue="green",
-        secondary_hue="gray",
-        neutral_hue="gray",
-    )
+    css="""
+    .gradio-container { display: none !important; }
+    body { margin: 0 !important; padding: 0 !important; }
+    """,
+    head="""
+    <style>
+    .gradio-container { display: none !important; }
+    #root { display: none !important; }
+    </style>
+    """
 ) as demo:
     
-    # Header
-    gr.HTML("""
-    <div style="text-align: center; padding: 2rem 0; background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-radius: 10px; margin-bottom: 2rem;">
-        <div style="background: #22c55e; color: white; padding: 12px 24px; border-radius: 24px; display: inline-block; font-weight: 700; font-size: 18px; margin-bottom: 1rem;">
-            atomcamp
-        </div>
-        <h1 style="color: #166534; font-size: 2rem; font-weight: 600; margin: 0;">AI Chatbot Assistant</h1>
-        <p style="color: #6b7280; margin-top: 0.5rem;">Ask me about data science, courses, and learning paths!</p>
-    </div>
-    """)
-    
-    # Chat interface
-    chatbot = gr.Chatbot(
-        elem_id="chatbot",
-        label="Chat with atomcamp AI",
-        show_label=False,
-        avatar_images=["👤", "🤖"],
-        bubble_full_width=False,
-        show_share_button=False,
-    )
+    # Hidden Gradio components for backend functionality
+    with gr.Row(visible=False):
+        chatbot_hidden = gr.Chatbot()
+        msg_hidden = gr.Textbox()
+        submit_hidden = gr.Button()
     
-    # Input area
-    with gr.Row():
-        msg = gr.Textbox(
-            placeholder="Ask me anything about atomcamp...",
-            show_label=False,
-            scale=4,
-            container=False
-        )
-        submit_btn = gr.Button("Send", variant="primary", scale=1)
+    # Custom HTML interface
+    gr.HTML(create_chat_interface())
     
-    # Footer info
-    gr.HTML("""
-    <div style="text-align: center; padding: 1rem; color: #6b7280; font-size: 0.875rem; margin-top: 2rem;">
-        <p>🚀 Built with ❤️ for atomcamp | Data Science Education Platform</p>
-        <p>💡 This chatbot can help you with courses, concepts, and career guidance</p>
-    </div>
-    """)
-    
-    # Event handlers
-    msg.submit(chat_with_bot, [msg, chatbot], [chatbot, msg])
-    submit_btn.click(chat_with_bot, [msg, chatbot], [chatbot, msg])
+    # Backend API endpoint
+    @demo.api_name("chat")
+    def api_chat(message):
+        try:
+            # Get relevant documents
+            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."
+            
+            # Generate response
+            response = generate_response(message, context)
+            return {"response": response}
+            
+        except Exception as e:
+            return {"response": f"Sorry, I encountered an error: {str(e)}"}
 
-# Launch the app
+# Launch configuration
 if __name__ == "__main__":
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
-        share=True
-    )
+        share=True,
+        show_error=True
+    )