Add loading state

app.py

@@ -3,7 +3,9 @@ import requests
 import json
 import os
 
+# ---------------------------
 # Hugging Face API Settings
+# ---------------------------
 HF_API_URL = "https://router.huggingface.co/v1/chat/completions"
 HF_API_TOKEN = os.environ.get("HF_TOKEN")
 if HF_API_TOKEN is None:
@@ -14,12 +16,17 @@ headers = {
     "Content-Type": "application/json"
 }
 
-# Function to generate analogy
+# ---------------------------
+# Function to generate analogy with loading placeholder
+# ---------------------------
 def generate_analogy(topic, theme):
+    # Immediately show loading text in the Textbox
+    yield "⏳ Generating analogy...\nPlease wait."
+
     prompt = (
         f"Explain the topic '{topic}' using an analogy themed around '{theme}'. "
-        f"Format the response using Markdown. Include headings, bold, italics, bullet points, "
-        f"and horizontal rules where appropriate."
+        f"Use clear, beginner-friendly language. Include line breaks and short paragraphs "
+        f"so it can be read in a Textbox."
     )
 
     payload = {
@@ -31,31 +38,38 @@ def generate_analogy(topic, theme):
     try:
         response = requests.post(HF_API_URL, headers=headers, data=json.dumps(payload))
         data = response.json()
-        return data["choices"][0]["message"]["content"]
+        # Preserve line breaks for Textbox
+        text = data["choices"][0]["message"]["content"].replace("\r\n", "\n")
+        yield text
     except Exception:
-        return "Error: Could not generate analogy."
+        yield "Error: Could not generate analogy."
 
-# Theme options
+# ---------------------------
+# Gradio UI
+# ---------------------------
 themes = ["Love Island", "One Piece", "Spiderman", "Premier League"]
 
-# Gradio Blocks UI
 with gr.Blocks() as demo:
     gr.Markdown("## Simple Analogy App")
-    gr.Markdown("Turn any topic into a themed analogy using DeepSeek AI!")
+    gr.Markdown("Turn any topic into a themed analogy!")
 
     with gr.Row():
         topic_input = gr.Textbox(label="Enter any topic", placeholder="e.g. Quantum Physics")
         theme_input = gr.Dropdown(choices=themes, label="Choose a Theme")
 
     generate_button = gr.Button("Generate Analogy")
-    output = gr.Markdown(label="Generated Analogy")
+    output = gr.Textbox(
+        label="Generated Analogy",
+        value="",    # always visible
+        lines=20,
+        max_lines=40
+    )
 
-    # Connect button click to function with loading spinner
+    # Connect button to generator function
     generate_button.click(
         fn=generate_analogy,
         inputs=[topic_input, theme_input],
-        outputs=output,
-        show_progress=True  # <-- This shows the spinner while generating
+        outputs=output
     )
 
 demo.launch()