Update app.py

app.py

@@ -1,63 +1,41 @@
 import gradio as gr
 from utils import generate_lesson, generate_image
 
+TOPICS = [
+    "Python Basics",
+    "HTML & CSS Fundamentals",
+    "JavaScript Loops",
+    "React Components",
+    "Python OOP",
+    "APIs and JSON",
+    "Git and Version Control"
+]
 
 def generate(topic):
     file_path, _ = generate_lesson(topic)
     image_url = generate_image(topic)
     return image_url, file_path
 
-with gr.Blocks(css="""
-  body {
-    background-color: #0a0a0a;
-    color: #ffffff;
-    font-family: 'JetBrains Mono', monospace;
-  }
-  .gradio-container {
-    background-color: transparent !important;
-  }
-  .terminal-box {
-    background-color: #1e1e1e;
-    border-radius: 10px;
-    padding: 20px;
-    box-shadow: 0 0 20px rgba(250, 41, 188, 0.3);
-    margin-bottom: 20px;
-  }
-  .download-link a {
-    background-color: #fa29bc;
-    color: #fff;
-    padding: 10px 20px;
-    border-radius: 6px;
-    text-decoration: none;
-    font-weight: bold;
-    transition: all 0.3s ease;
-  }
-  .download-link a:hover {
-    background-color: #ff4dd2;
-  }
-""") as demo:
-
-    gr.Markdown("## 💫 Code Lesson Generator")
-
-    topic_dropdown = gr.Dropdown(
-        ["Python Basics", "HTML Structure", "CSS Styling", "JavaScript Functions"],
-        label="Choose a Lesson Topic",
-        interactive=True
-    )
-
-    generate_btn = gr.Button("✨ Generate Lesson")
-
-    with gr.Row():
-        with gr.Column(scale=2):
-            terminal_preview = gr.Image(label="Lesson Preview", elem_classes="terminal-box")
-        with gr.Column(scale=1):
-            lesson_file = gr.File(label="Download Lesson", elem_classes="download-link")
-
-    generate_btn.click(
-        fn=generate,
-        inputs=topic_dropdown,
-        outputs=[terminal_preview, lesson_file],
-        show_progress="full"
-    )
-
-demo.launch()
+
+custom_css = """
+body { background-color: #0d0d0d; color: #00ffcc; font-family: 'Consolas', monospace; }
+footer { display: none !important; }
+#app-title { font-size: 2.2em; font-weight: bold; color: #00ffcc; text-align: center; margin-top: 15px; }
+button { background-color: #00ffcc !important; color: #0d0d0d !important; font-weight: bold; border-radius: 8px; border: none; padding: 10px 16px; }
+button:hover { background-color: #00e6b8 !important; }
+#favicon { display:none; }
+"""
+
+with gr.Blocks(css=custom_css, title="CodeMode", analytics_enabled=False) as demo:
+    gr.HTML("<div id='app-title'>CodeMode — AI Coding Lessons</div>")
+
+    with gr.Column():
+        topic_dropdown = gr.Dropdown(choices=TOPICS, label="Select Lesson Topic", value=TOPICS[0])
+        generate_btn = gr.Button("Generate Lesson", variant="primary")
+        code_image = gr.Image(label="Lesson Preview", show_download_button=False)
+        download_file = gr.File(label="Download Lesson File")
+
+    generate_btn.click(fn=generate, inputs=topic_dropdown, outputs=[code_image, download_file])
+
+if __name__ == "__main__":
+    demo.launch()