Spaces:

Al1Abdullah
/

atomcamp-chatbot

Sleeping

App Files Files Community

Ali Abdullah commited on Jul 8, 2025

Commit

386945f

verified ·

1 Parent(s): fc96ff2

Update app.py

Browse files

Files changed (1) hide show

app.py +282 -585

app.py CHANGED Viewed

@@ -22,7 +22,9 @@ def initialize_groq():
     global groq_api_key
     groq_api_key = os.getenv("GROQ_API_KEY")
     if groq_api_key:
         return "Groq API key found"
     return "Groq API key not found"
 def initialize_vectorstore():
@@ -31,6 +33,7 @@ def initialize_vectorstore():
     try:
         vectorstore = FAISS.load_local("atomcamp_vector_db", embeddings, allow_dangerous_deserialization=True)
         retriever = vectorstore.as_retriever()
         return "Vectorstore loaded successfully"
     except:
         sample_data = [
@@ -67,6 +70,7 @@ def initialize_vectorstore():
         vectorstore.save_local("atomcamp_vector_db")
         retriever = vectorstore.as_retriever()
         return "Sample vectorstore created successfully"
 def call_groq_api(message, context):
@@ -253,606 +257,299 @@ Getting Started - How to begin your data science journey
 Would you like me to elaborate on any specific aspect?"""
-initialize_groq()
-init_message = initialize_vectorstore()
-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>
-    <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>
-    <div class="chat-container" id="chatContainer">
-        <div class="welcome-screen" id="welcomeScreen">
-            <div class="welcome-card">
-                <div class="welcome-icon">AI</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>
-    <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');
-        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 {
-                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.', 'bot');
-                setConnected(true);
-            } catch (error) {
-                console.error('Error:', error);
-                setConnected(false);
-                addMessage('I am 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' ? 'U' : 'AI';
-            const bubble = document.createElement('div');
-            bubble.className = 'message-bubble';
-            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 = 'AI';
-            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):
-    try:
-        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)
-        return response
-    except Exception as e:
-        return f"Sorry, I encountered an error: {str(e)}. Please try again."
-# Create the Gradio interface
-with gr.Blocks(
-    title="atomcamp AI Chatbot",
-    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:
-    # Hidden Gradio components for API functionality
-    with gr.Row(visible=False):
-        input_text = gr.Textbox()
-        output_text = gr.Textbox()
-        submit_btn = gr.Button()
-    # Custom HTML interface
-    gr.HTML(create_chat_interface())
-    # Set up the API endpoint
-    submit_btn.click(
-        fn=chat_response,
-        inputs=input_text,
-        outputs=output_text,
-        api_name="predict"
-    )
 if __name__ == "__main__":
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,

     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"
 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 = [
         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):
 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]}...")
+        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
+# 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;
+}
+"""
+def create_interface():
+    with gr.Blocks(
+        css=custom_css,
+        title="atomcamp AI Chatbot",
+        theme=gr.themes.Soft()
+    ) as demo:
+        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="status-dot"></div>
+                        <span>Online & Ready</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>
         </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"
+                )
+                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, ""
+            # Add user message to history
+            history.append({"role": "user", "content": message})
+            # Get bot response
+            bot_response = chat_response(message)
+            # Add bot response to history
+            history.append({"role": "assistant", "content": bot_response})
+            return history, ""
+        # Set up event handlers
+        submit.click(respond, [msg, chatbot], [chatbot, msg])
+        msg.submit(respond, [msg, chatbot], [chatbot, msg])
+        return demo
 if __name__ == "__main__":
+    print("Starting atomcamp AI Chatbot...")
+    demo = create_interface()
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,