Update app.py

app.py

@@ -1,6 +1,6 @@
 import gradio as gr
 import matplotlib.pyplot as plt
-import numpy as np
+from io import BytesIO
 
 # Define the 44 BFI questions
 questions = [
@@ -139,22 +139,23 @@ def compute_bfi_scores(*args):
         'Openness': "Openness measures your openness to new experiences and creativity. High scores are associated with imagination and curiosity, while low scores may indicate practicality and preference for routine."
     }
 
-    output = "## Your Big Five Personality Traits Scores\n\n"
+    markdown_output = "## Your Big Five Personality Traits Scores\n\n"
 
     # Prepare data for visualization
     trait_names = []
     trait_scores = []
     for trait, score in scores.items():
-        output += f"### **{trait}**\n"
+        markdown_output += f"### **{trait}**\n"
         if score == "Incomplete":
-            output += "Insufficient responses to compute this trait.\n\n"
+            markdown_output += "Insufficient responses to compute this trait.\n\n"
         else:
-            output += f"**Score**: {score}\n\n"
-            output += f"{explanations[trait]}\n\n"
+            markdown_output += f"**Score**: {score}\n\n"
+            markdown_output += f"{explanations[trait]}\n\n"
             trait_names.append(trait)
             trait_scores.append(score)
     
     # Generate bar chart
+    image = None
     if trait_scores:
         fig, ax = plt.subplots(figsize=(8, 4))
         bars = ax.bar(trait_names, trait_scores, color='skyblue')
@@ -173,15 +174,15 @@ def compute_bfi_scores(*args):
         
         plt.tight_layout()
         # Save the plot to a PNG image in memory
-        from io import BytesIO
         buf = BytesIO()
         plt.savefig(buf, format='png')
         buf.seek(0)
         plt.close(fig)
-        output += "### **Trait Scores Visualization**\n\n"
-        output += f"![Trait Scores]({gr.Image.update(value=buf.getvalue())})\n\n"
+        image = buf.getvalue()
 
-    return output
+        markdown_output += "### **Trait Scores Visualization**\n\n"
+
+    return markdown_output, image
 
 # Create the Gradio interface
 def create_interface():
@@ -203,30 +204,35 @@ def create_interface():
             'Openness': [5, 10, 15, 20, 25, 30, 35, 40, 41, 44]
         }
 
-        dropdowns = []
+        inputs = []
 
         with gr.Accordion("Answer the Questions", open=True):
             for trait, q_indices in trait_question_map.items():
-                with gr.Group():
-                    with gr.Accordion(trait, open=False):
-                        for i in q_indices:
-                            q = questions[i-1]
-                            radio = gr.Radio(
-                                choices=["No response", 1, 2, 3, 4, 5],
-                                label=q,
-                                value="No response",
-                                interactive=True
-                            )
-                            dropdowns.append(radio)
+                with gr.Accordion(trait, open=False):
+                    for i in q_indices:
+                        q = questions[i-1]
+                        radio = gr.Radio(
+                            choices=["No response", 1, 2, 3, 4, 5],
+                            label=q,
+                            value="No response",
+                            interactive=True
+                        )
+                        inputs.append(radio)
 
         # Submit button
         submit_btn = gr.Button("Submit", variant="primary")
 
         # Results display
-        result = gr.Markdown()
+        with gr.Row():
+            markdown_result = gr.Markdown(label="Textual Results")
+            image_result = gr.Image(label="Trait Scores Visualization")
 
         # Link the button to the function
-        submit_btn.click(fn=compute_bfi_scores, inputs=dropdowns, outputs=result)
+        submit_btn.click(
+            fn=compute_bfi_scores, 
+            inputs=inputs, 
+            outputs=[markdown_result, image_result]
+        )
 
     return demo