Update app.py

app.py

@@ -50,40 +50,6 @@ TOPIC_EXAMPLES = {
             "What do you think makes a destination culturally significant?",
             "Describe your most challenging travel experience."
         ]
-    },
-    "Food": {
-        "beginner": [
-            "Do you like fruit?",
-            "What’s your favorite snack?",
-            "Do you drink tea or coffee?"
-        ],
-        "intermediate": [
-            "What's your favorite food?",
-            "Can you describe how to cook a simple dish?",
-            "What did you eat today?"
-        ],
-        "advanced": [
-            "How do food choices reflect cultural identity?",
-            "What are your thoughts on sustainable eating?",
-            "Describe a memorable meal and why it stood out."
-        ]
-    },
-    "Work & School": {
-        "beginner": [
-            "Do you go to school?",
-            "Do you have a job?",
-            "Do you have homework?"
-        ],
-        "intermediate": [
-            "What do you do for work or study?",
-            "Describe your typical workday.",
-            "What subjects do you like or dislike?"
-        ],
-        "advanced": [
-            "What are the most important skills in your field?",
-            "How do you manage work-life balance?",
-            "Describe a major accomplishment and how you achieved it."
-        ]
     }
 }
 
@@ -144,28 +110,32 @@ def get_avatar_url():
     return "https://api.dicebear.com/7.x/bottts/svg?seed=rabbit&backgroundColor=b6e3f4"
 
 custom_css = """
-.compact-file-output > div {
-    min-height: 0 !important;
-    padding: 0 !important;
+.compact-btn {
+    padding: 0.75rem !important;
+    font-size: 1rem !important;
+    font-weight: 500;
+    border-radius: 8px;
+    background-color: #2f2f2f;
+    color: white;
+    transition: background-color 0.3s;
 }
-.compact-file-output .file-preview {
-    margin: 0 !important;
-    display: flex;
-    align-items: center;
+.compact-btn:hover {
+    background-color: #444;
 }
-.compact-btn {
-    padding: 0.5rem !important;
-    min-height: 0 !important;
-    height: auto !important;
-    line-height: 1.2 !important;
+#voice-controls {
+    margin-top: 1em;
+    text-align: center;
+    opacity: 0.5;
+    font-size: 0.9rem;
+    font-style: italic;
 }
 """
 
 with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
     gr.Markdown("""
     # 🐰 JoJo - Your Speaking Buddy
-    **Practice English by having natural conversations with JoJo.** 
-    Choose a topic and difficulty, then start chatting. JoJo will keep the conversation going and gently correct you if needed.
+    **Chat in English with JoJo — your kind and cheerful language partner.**  
+    Pick a topic, choose your level, and practice naturally. JoJo will guide you, ask questions, and gently correct you along the way!
     """)
 
     avatar = get_avatar_url()
@@ -190,8 +160,14 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
                 submit = gr.Button("Send", variant="primary")
                 clear = gr.Button("New Chat")
 
+            gr.Markdown("""
+            <div id="voice-controls">
+            🎤 Voice input and 🔈 playback coming soon!
+            </div>
+            """)
+
         with gr.Column(scale=1):
-            gr.Markdown("## Conversation Topics")
+            gr.Markdown("""### 🎯 Conversation Settings""")
             topic = gr.Dropdown(
                 choices=list(TOPIC_EXAMPLES.keys()),
                 label="Select Topic",
@@ -204,7 +180,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
                 value="intermediate"
             )
 
-            gr.Markdown("## Quick Starters")
+            gr.Markdown("""### 💬 Quick Starters""")
             starter_btn1 = gr.Button("Starter 1", scale=1, min_width=250, elem_classes="compact-btn")
             starter_btn2 = gr.Button("Starter 2", scale=1, min_width=250, elem_classes="compact-btn")
             starter_btn3 = gr.Button("Starter 3", scale=1, min_width=250, elem_classes="compact-btn")
@@ -239,4 +215,4 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
     demo.load(fn=lambda: tuple(default_starters[:3]), outputs=starter_buttons, queue=False)
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    demo.launch(server_name="0.0.0.0", server_port=7860)