Create app.py

app.py

@@ -0,0 +1,133 @@
+import gradio as gr
+import requests
+import json
+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
+
+def chat_with_bot(message, history):
+    """
+    Function to handle chat with the bot
+    """
+    if not message.strip():
+        return history, ""
+    
+    # Add user message to 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?"
+        
+        # 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.")
+        
+        # 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."
+    
+    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
+with gr.Blocks(
+    css=custom_css,
+    title="atomcamp AI Chatbot",
+    theme=gr.themes.Soft(
+        primary_hue="green",
+        secondary_hue="gray",
+        neutral_hue="gray",
+    )
+) 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,
+    )
+    
+    # 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)
+    
+    # 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])
+
+# Launch the app
+if __name__ == "__main__":
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=True
+    )