Update app.py

app.py

@@ -39,6 +39,7 @@ scenario_builder = None
 
 import gradio as gr
 
+
 def build_dynamic_mcq_ui(scenario_data: list[dict[str, any]]):
     with gr.Blocks() as mcq_interface:
         gr.Markdown("## 🧪 Interactive Scenario Quiz")
@@ -95,51 +96,61 @@ def generate_scenario_ui(query: str, num_questions: int = 5):
         loop.close()
 
         if "error" in result:
-            return gr.Markdown(f"❌ Error: {result['error']}\nDetails: {result['details']}")
+            return [gr.Markdown(f"❌ Error: {result['error']}\nDetails: {result['details']}")]
 
         questions = result.get("questions", [])
 
-        with gr.Blocks() as quiz_ui:
-            gr.Markdown(f"## 🧪 Interactive Quiz for: {query}")
-            answer_radios = []
-
-            for i, q in enumerate(questions):
-                gr.Markdown(f"**Q{i+1}: {q['question']}**")
-                opts = [f"{k}: {v}" for k, v in q["options"].items()]
-                radio = gr.Radio(choices=opts, label=None, type="index")
-                answer_radios.append(radio)
-
-            submit_btn = gr.Button("✅ Submit")
-            result_output = gr.Markdown()
-
-            def evaluate(*user_indices):
-                results = []
-                for idx, selected in enumerate(user_indices):
-                    correct_key = questions[idx]["correct_answer"]
-                    correct_label = f"{correct_key}: {questions[idx]['options'][correct_key]}"
-                    selected_key = list(questions[idx]["options"].keys())[selected] if selected is not None else "N/A"
-                    selected_label = f"{selected_key}: {questions[idx]['options'].get(selected_key, 'No answer')}"
-                    is_correct = selected_key == correct_key
-                    results.append(
-                        f"""
+        # Create a list to hold the Gradio components for the quiz
+        quiz_components = []
+        answer_radios = []
+
+        quiz_components.append(gr.Markdown(f"## 🧪 Interactive Quiz for: {query}", elem_classes=["quiz-header"]))
+
+        for i, q in enumerate(questions):
+            quiz_components.append(gr.Markdown(f"**Q{i+1}: {q['question']}**", elem_classes=["quiz-question"]))
+            opts = [f"{k}: {v}" for k, v in q["options"].items()]
+            radio = gr.Radio(choices=opts, label=None, type="index", elem_classes=["quiz-options"])
+            answer_radios.append(radio)
+            quiz_components.append(radio)
+
+        submit_btn = gr.Button("✅ Submit", elem_classes=["quiz-submit-btn"])
+        result_output = gr.Markdown(elem_classes=["quiz-results"])
+        quiz_components.append(submit_btn)
+        quiz_components.append(result_output)
+
+        def evaluate(*user_indices):
+            results = []
+            for idx, selected in enumerate(user_indices):
+                correct_key = questions[idx]["correct_answer"]
+                correct_label = f"{correct_key}: {questions[idx]['options'][correct_key]}"
+                selected_key = list(questions[idx]["options"].keys())[selected] if selected is not None else "N/A"
+                selected_label = f"{selected_key}: {questions[idx]['options'].get(selected_key, 'No answer')}"
+                is_correct = selected_key == correct_key
+                result_class = "quiz-result-correct" if is_correct else "quiz-result-incorrect"
+                results.append(
+                    f"""
+<div class="quiz-result-item {result_class}">
 ### Q{idx+1}
 **Your answer:** {selected_label}  
 **Correct answer:** {correct_label}  
-{"✅ Correct!" if is_correct else "❌ Incorrect."}  
-🧠 {questions[idx]['feedback']}
+{"✅ Correct!" if is_correct else "❌ Incorrect."}
+<div class="quiz-feedback">🧠 {questions[idx]['feedback']}</div>
+</div>
 """)
-                return "\n".join(results)
+            return "\n".join(results)
 
-            submit_btn.click(
-                fn=evaluate,
-                inputs=answer_radios,
-                outputs=result_output
-            )
+        submit_btn.click(
+            fn=evaluate,
+            inputs=answer_radios,
+            outputs=result_output
+        )
 
-        return quiz_ui
+        return quiz_components
 
     except Exception as e:
-        return gr.Markdown(f"❌ Unexpected error: {str(e)}")
+        return [gr.Markdown(f"❌ Unexpected error: {str(e)}")]
+
+
 
 
 
@@ -314,13 +325,20 @@ def create_optimized_gradio_interface():
         with gr.Tab("🧪 Scenario Generator"):
             gr.Markdown("### Generate an Interactive Medical Scenario")
             num_questions_slider = gr.Slider(1, 10, value=5, step=1, label="Number of Questions")
-            scenario_output = gr.Column()
+            scenario_output = gr.Column(visible=False, elem_classes=["quiz-container"])
             scenario_submit = gr.Button("🚀 Generate Scenario")
             # ✅ Keep the click handler INSIDE here
             scenario_submit.click(
                 fn=generate_scenario_ui,
                 inputs=[query_input, num_questions_slider],
-                outputs=scenario_output
+                outputs=scenario_output,
+                show_progress='full'
+            )
+
+            scenario_submit.click(
+                lambda: gr.update(visible=True),
+                outputs=[scenario_output],
+                queue=False
             )
 
             submit_btn.click(