Update app.py

app.py

@@ -18,6 +18,61 @@ model = HfApiModel(
     token=hf_token  # Pass token explicitly
 )
 
+# Add this formatting function
+def format_analysis_report(raw_output, visuals):
+    try:
+        # Convert string output to dictionary
+        analysis_dict = ast.literal_eval(str(raw_output))
+        
+        report = f"""
+        <div style="font-family: Arial, sans-serif; padding: 20px; color: #333;">
+            <h1 style="color: #2B547E; border-bottom: 2px solid #2B547E; padding-bottom: 10px;">📊 Data Analysis Report</h1>
+            
+            <div style="margin-top: 25px; background: #f8f9fa; padding: 20px; border-radius: 8px;">
+                <h2 style="color: #2B547E;">🔍 Key Observations</h2>
+                {format_observations(analysis_dict.get('observations', {}))}
+            </div>
+            
+            <div style="margin-top: 30px;">
+                <h2 style="color: #2B547E;">💡 Insights & Visualizations</h2>
+                {format_insights(analysis_dict.get('insights', {}), visuals)}
+            </div>
+        </div>
+        """
+        return report, visuals
+    except:
+        return raw_output, visuals
+
+def format_observations(observations):
+    items = []
+    for key, value in observations.items():
+        if 'proportions' in key:
+            items.append(f"""
+            <div style="margin: 15px 0; padding: 15px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
+                <h3 style="margin: 0 0 10px 0; color: #4A708B;">{key.replace('_', ' ').title()}</h3>
+                <pre style="margin: 0; padding: 10px; background: #f8f9fa; border-radius: 4px;">{value}</pre>
+            </div>
+            """)
+    return '\n'.join(items)
+
+def format_insights(insights, visuals):
+    items = []
+    for idx, (key, insight) in enumerate(insights.items()):
+        img_tag = ""
+        if idx < len(visuals):
+            img_tag = f'<img src="/file={visuals[idx]}" style="max-width: 100%; height: auto; margin-top: 10px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">'
+        
+        items.append(f"""
+        <div style="margin: 20px 0; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
+            <div style="display: flex; align-items: center; gap: 10px;">
+                <div style="background: #2B547E; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">{idx+1}</div>
+                <p style="margin: 0; font-size: 16px;">{insight}</p>
+            </div>
+            {img_tag}
+        </div>
+        """)
+    return '\n'.join(items)
+
 def analyze_data(csv_file, additional_notes=""):
     # Clear previous figures
     if os.path.exists('./figures'):
@@ -56,7 +111,8 @@ def analyze_data(csv_file, additional_notes=""):
     visuals = [os.path.join('./figures', f) for f in os.listdir('./figures') 
               if f.endswith(('.png', '.jpg', '.jpeg'))]
 
-    return analysis_result, visuals
+    
+    return format_analysis_report(analysis_result, visuals)
 
 # Create Gradio interface
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
@@ -69,7 +125,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             analyze_btn = gr.Button("Analyze", variant="primary")
         
         with gr.Column():
-            analysis_output = gr.Textbox(label="Analysis Report", interactive=False)
+            analysis_output = gr.Markdown("### Analysis results will appear here...")
             gallery = gr.Gallery(label="Data Visualizations", columns=2)
 
     analyze_btn.click(