adjust UI so it hopefully works on Spaces prod

app.py

@@ -3,25 +3,27 @@ import os
 from dotenv import load_dotenv
 from huggingface_hub import InferenceClient
 
-load_dotenv()
-
 # ======================
-# Toggle between Mock / Real API
+# Config
 # ======================
-USE_MOCK = False  # Set False to use the real Cerebras API
+load_dotenv()
+
+MODEL = "meta-llama/Llama-3.3-70B-Instruct"
+USE_MOCK = False  # ✅ Toggle between mock and real API
 
 # ======================
-# Instantiate client (only if not using mock)
+# Instantiate client (if not mocking)
 # ======================
+client = None
 if not USE_MOCK:
     client = InferenceClient(
         provider="cerebras",
-        model="meta-llama/Llama-3.3-70B-Instruct",
+        model=MODEL,
         api_key=os.environ["HF_TOKEN"]
     )
 
 # ======================
-# Mock function for testing UI
+# Mock function for UI testing
 # ======================
 def generate_idiom_mock(situation: str):
     idiom = "对症下药"
@@ -47,12 +49,14 @@ Situation: {situation}
 Answer:
 """
     response = client.chat.completions.create(
+        model=MODEL,
         messages=[{"role": "user", "content": prompt}],
         max_tokens=150
     )
-    generated_text = response.choices[0].message.content.strip()
 
+    generated_text = response.choices[0].message.content.strip()
     lines = [line.strip() for line in generated_text.split("\n") if line.strip()]
+
     if len(lines) >= 3:
         idiom = lines[0]
         pinyin = lines[1]
@@ -61,43 +65,62 @@ Answer:
     else:
         idiom = generated_text
         explanation = ""
+
     return idiom, explanation
 
 # ======================
-# UI logic
+# UI Wrapper
 # ======================
 def update_ui(situation):
     if USE_MOCK:
         idiom, explanation = generate_idiom_mock(situation)
     else:
         idiom, explanation = generate_idiom(situation, client)
-    return f"<div class='idiom-output'>{idiom}</div>", f"<div class='explanation-output'>{explanation}</div>"
 
+    return (
+        f"<div class='idiom-output'>{idiom}</div>",
+        f"<div class='explanation-output'>{explanation}</div>"
+    )
+
+# ======================
+# Launch app
+# ======================
 def launch_app():
     with gr.Blocks(css="style.css") as demo:
-        gr.Markdown("## 🀄 Chinese Wisdom Generator\nEnter a situation, get a Chinese idiom with explanation.")
+        gr.Markdown("# 🎋 Chinese Idioms Generator")
+
         with gr.Row():
-            with gr.Column(scale=1):
+            with gr.Column():
                 situation = gr.Textbox(
-                    label="Describe your situation...",
-                    placeholder="e.g. I procrastinated on my homework again...",
-                    lines=3
+                    label="Enter a situation",
+                    lines=2,
+                    placeholder="e.g., When facing a big challenge"
                 )
-                submit_btn = gr.Button("✨ Find Idiom")
+                generate_btn = gr.Button("✨ Generate Idiom")
+
+                # ✅ Example situations
                 gr.Examples(
                     examples=[
-                        ["I studied hard but still failed my exam."],
-                        ["I missed my bus because I woke up late."],
-                        ["I finally finished a long project after months."],
+                        ["When facing a big challenge"],
+                        ["When someone helps you in a time of need"],
+                        ["When you need to stay calm under pressure"],
+                        ["When teamwork is important to succeed"],
+                        ["When rushing leads to mistakes"]
                     ],
-                    inputs=[situation]
+                    inputs=situation
                 )
-            with gr.Column(scale=1):
-                idiom_output = gr.HTML("<div class='idiom-output'>—</div>")
-                explanation_output = gr.HTML("<div class='explanation-output'>—</div>")
 
-        submit_btn.click(update_ui, inputs=[situation], outputs=[idiom_output, explanation_output])
-    demo.launch(debug=True)
+            with gr.Column():
+                idiom_output = gr.HTML(label="Idiom")
+                explanation_output = gr.HTML(label="Explanation")
+
+        generate_btn.click(
+            fn=update_ui,
+            inputs=situation,
+            outputs=[idiom_output, explanation_output]
+        )
+
+    demo.launch()
 
 if __name__ == "__main__":
     launch_app()