Update app.py

app.py

@@ -235,88 +235,139 @@ def analyze_narrative(content: str):
 def generate_predictions():
     """Generate enhanced predictions for current narratives with visualization"""
     try:
+        print("🔄 Starting prediction generation...")
         predictions = demo_data.get_sample_predictions()
+        print(f"✅ Got {len(predictions)} sample predictions")
+        
         table_html = generate_predictions_table(predictions)
+        print("✅ Generated predictions table")
         
         # Generate the entire dashboard
         dashboard_charts = create_prediction_dashboard(predictions)
+        print("✅ Generated dashboard charts")
         
         return (
             "🔮 Enhanced Prediction Dashboard Generated Successfully!", 
             table_html, 
             dashboard_charts['world_threat_map'],
-            dashboard_charts['sentiment_distribution'],
+            dashboard_charts['verification_distribution'],
             dashboard_charts['top_countries_by_threat'],
             dashboard_charts['threats_by_theme']
         )
     except Exception as e:
-        print(f"Prediction generation failed: {e}")
-        # Create empty charts for error case
-        empty_chart = go.Figure()
-        empty_chart.update_layout(
-            title="No Data Available",
-            template="plotly_dark",
-            height=300
-        )
+        print(f"❌ Prediction generation failed: {e}")
+        import traceback
+        traceback.print_exc()
+        # Create empty charts for error case with proper sizing
+        def create_empty_chart(title, height=500):
+            chart = go.Figure()
+            chart.update_layout(
+                title={'text': title, 'x': 0.5, 'font': {'family': 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', 'color': 'black', 'size': 16}},
+                font={'family': 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', 'color': 'black', 'size': 12},
+                template="plotly_white",
+                height=height,
+                autosize=True,
+                margin={"r":50,"t":60,"l":50,"b":50},
+                paper_bgcolor='rgba(255,255,255,1)',
+                plot_bgcolor='rgba(255,255,255,1)',
+                annotations=[
+                    dict(
+                        text="No Data Available<br>Click 'Generate Prediction Dashboard' to load data",
+                        xref="paper", yref="paper",
+                        x=0.5, y=0.5, xanchor='center', yanchor='middle',
+                        showarrow=False,
+                        font=dict(family='Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', color="black", size=14)
+                    )
+                ]
+            )
+            return chart
+        
         charts = {
-            'world_threat_map': empty_chart,
-            'sentiment_distribution': empty_chart,
-            'top_countries_by_threat': empty_chart,
-            'threats_by_theme': empty_chart
+            'world_threat_map': create_empty_chart("🌍 Global Predicted Reach Map", 500),
+            'verification_distribution': create_empty_chart("✅ Verification Status Distribution", 400),
+            'top_countries_by_threat': create_empty_chart("🏆 Top 10 Countries by Threat Count", 400),
+            'threats_by_theme': create_empty_chart("📊 Threats by Theme", 400)
         }
-        return "❌ Prediction Generation Error", "Error generating table.", charts['world_threat_map'], charts['sentiment_distribution'], charts['top_countries_by_threat'], charts['threats_by_theme']
+        return "❌ Prediction Generation Error", "Error generating table.", charts['world_threat_map'], charts['verification_distribution'], charts['top_countries_by_threat'], charts['threats_by_theme']
 
 def create_prediction_dashboard(predictions: List[Dict]):
     """Create a comprehensive and intuitive dashboard with multiple visualizations."""
     df = pd.DataFrame(predictions)
     
     # --- 1. Global Threat Map (Choropleth) ---
-    country_threats = df.groupby('country_iso')['risk_score'].mean().reset_index()
-    country_threats.columns = ['iso_code', 'avg_risk_score']
+    country_threats = df.groupby('country_iso')['predicted_reach'].sum().reset_index()
+    country_threats.columns = ['iso_code', 'total_predicted_reach']
     
     world_threat_map = go.Figure(data=go.Choropleth(
         locations=country_threats['iso_code'],
-        z=country_threats['avg_risk_score'],
+        z=country_threats['total_predicted_reach'],
         text=country_threats['iso_code'],
         colorscale='Reds',
         autocolorscale=False,
         reversescale=False,
         marker_line_color='darkgray',
         marker_line_width=0.5,
-        colorbar_title='Avg. Risk<br>Score',
-        hovertemplate='<b>%{text}</b><br>Avg. Risk: %{z:.2f}<extra></extra>'
+        colorbar_title='Total Predicted<br>Reach',
+        hovertemplate='<b>%{text}</b><br>Total Reach: %{z:,.0f}<extra></extra>'
     ))
     world_threat_map.update_layout(
-        title={'text': '🌍 Global Disinformation Threat Map', 'x': 0.5, 'font': {'color': 'white'}},
+            title={
+            'text': '🌍 Global Predicted Reach Map', 
+                'x': 0.5,
+            'font': {'family': 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', 'color': 'black', 'size': 16}
+        },
+        font={'family': 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', 'color': 'black', 'size': 12},
         geo=dict(
             showframe=False,
-            showcoastlines=False,
+            showcoastlines=True,
+            coastlinecolor="gray",
             projection_type='equirectangular',
-            bgcolor='rgba(0,0,0,0)',
-            lakecolor='rgba(0,0,0,0)'
+            bgcolor='rgba(255,255,255,1)',
+            lakecolor='rgba(240,240,240,1)'
         ),
-        template="plotly_dark",
+        template="plotly_white",
         height=500,
-        margin={"r":0,"t":40,"l":0,"b":0}
+        autosize=True,
+        margin={"r":20,"t":50,"l":20,"b":20},
+        paper_bgcolor='rgba(255,255,255,1)',
+        plot_bgcolor='rgba(255,255,255,1)'
     )
 
-    # --- 2. Sentiment Distribution (Donut Chart) ---
-    sentiment_counts = df['sentiment'].value_counts()
-    sentiment_colors = {'Negative': '#ef4444', 'Positive': '#10b981', 'Neutral': '#6b7280'}
+    # --- 2. Verification Status Distribution (Donut Chart) ---
+    verified_counts = df['verified'].value_counts()
+    verified_colors = {'Yes': '#10b981', 'No': '#ef4444'}
     
-    sentiment_distribution = go.Figure(data=[go.Pie(
-        labels=sentiment_counts.index,
-        values=sentiment_counts.values,
+    verification_distribution = go.Figure(data=[go.Pie(
+        labels=verified_counts.index,
+        values=verified_counts.values,
         hole=.4,
-        marker_colors=[sentiment_colors.get(s, '#374151') for s in sentiment_counts.index],
-        hovertemplate="<b>%{label}</b><br>Count: %{value}<br>(%{percent})<extra></extra>"
+        marker_colors=[verified_colors.get(s, '#6b7280') for s in verified_counts.index],
+        hovertemplate="<b>%{label}</b><br>Count: %{value}<br>(%{percent})<extra></extra>",
+        textinfo='label+percent',
+        textposition='auto'
     )])
-    sentiment_distribution.update_layout(
-        title={'text': '😊 Sentiment Distribution', 'x': 0.5, 'font': {'color': 'white'}},
-        template="plotly_dark",
+    verification_distribution.update_layout(
+            title={
+            'text': '✅ Verification Status Distribution', 
+                'x': 0.5,
+            'font': {'family': 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', 'color': 'black', 'size': 16}
+        },
+        font={'family': 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', 'color': 'black', 'size': 12},
+        template="plotly_white",
         height=400,
+        autosize=True,
         showlegend=True,
-        legend=dict(orientation="h", yanchor="bottom", y=-0.2, xanchor="center", x=0.5)
+        legend=dict(
+            orientation="h", 
+            yanchor="bottom", 
+            y=-0.2, 
+            xanchor="center", 
+            x=0.5,
+            font=dict(family='Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', color="black", size=12)
+        ),
+        margin={"r":50,"t":50,"l":50,"b":80},
+        paper_bgcolor='rgba(255,255,255,1)',
+        plot_bgcolor='rgba(255,255,255,1)'
     )
 
     # --- 3. Top 10 Countries by Threat Count ---
@@ -326,18 +377,39 @@ def create_prediction_dashboard(predictions: List[Dict]):
         y=country_counts.index,
         x=country_counts.values,
         orientation='h',
-        marker_color='#3b82f6',
+            marker_color='#3b82f6',
         text=country_counts.values,
-        textposition='outside',
+            textposition='outside',
+        textfont=dict(family='Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', color='black', size=12),
         hovertemplate='<b>%{y}</b><br>Threat Count: %{x}<extra></extra>'
     ))
     top_countries_by_threat.update_layout(
-        title={'text': '🏆 Top 10 Countries by Threat Count', 'x': 0.5, 'font': {'color': 'white'}},
+            title={
+            'text': '🏆 Top 10 Countries by Threat Count', 
+                'x': 0.5,
+            'font': {'family': 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', 'color': 'black', 'size': 16}
+        },
+        font={'family': 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', 'color': 'black', 'size': 12},
         xaxis_title="Number of Active Threats",
         yaxis_title="Country",
-        template="plotly_dark",
+        xaxis=dict(
+            color='black', 
+            gridcolor='rgba(0,0,0,0.2)',
+            title_font=dict(family='Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', color='black', size=14),
+            tickfont=dict(family='Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', color='black', size=12)
+        ),
+        yaxis=dict(
+            color='black', 
+            gridcolor='rgba(0,0,0,0.2)',
+            title_font=dict(family='Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', color='black', size=14),
+            tickfont=dict(family='Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', color='black', size=12)
+        ),
+        template="plotly_white",
         height=400,
-        margin=dict(l=100) # Adjust left margin for country codes
+        autosize=True,
+        margin=dict(l=120, r=50, t=50, b=50),
+        paper_bgcolor='rgba(255,255,255,1)',
+        plot_bgcolor='rgba(255,255,255,1)'
     )
 
     # --- 4. Threats by Theme (Bar Chart) ---
@@ -349,20 +421,42 @@ def create_prediction_dashboard(predictions: List[Dict]):
         marker_color='#8b5cf6',
         text=theme_counts.values,
         textposition='outside',
+        textfont=dict(family='Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', color='black', size=12),
         hovertemplate='<b>%{x}</b><br>Threat Count: %{y}<extra></extra>'
     ))
     threats_by_theme.update_layout(
-        title={'text': '📊 Threats by Theme', 'x': 0.5, 'font': {'color': 'white'}},
+        title={
+            'text': '📊 Threats by Theme', 
+                'x': 0.5,
+            'font': {'family': 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', 'color': 'black', 'size': 16}
+        },
+        font={'family': 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', 'color': 'black', 'size': 12},
         xaxis_title="Disinformation Theme",
         yaxis_title="Number of Threats",
-        template="plotly_dark",
+        xaxis=dict(
+            color='black', 
+            gridcolor='rgba(0,0,0,0.2)',
+            tickangle=-45,
+            title_font=dict(family='Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', color='black', size=14),
+            tickfont=dict(family='Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', color='black', size=12)
+        ),
+        yaxis=dict(
+            color='black', 
+            gridcolor='rgba(0,0,0,0.2)',
+            title_font=dict(family='Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', color='black', size=14),
+            tickfont=dict(family='Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif', color='black', size=12)
+        ),
+        template="plotly_white",
         height=400,
-        xaxis_tickangle=-45
+        autosize=True,
+        margin=dict(l=60, r=50, t=50, b=100),
+        paper_bgcolor='rgba(255,255,255,1)',
+        plot_bgcolor='rgba(255,255,255,1)'
     )
-
+    
     return {
         'world_threat_map': world_threat_map,
-        'sentiment_distribution': sentiment_distribution,
+        'verification_distribution': verification_distribution,
         'top_countries_by_threat': top_countries_by_threat,
         'threats_by_theme': threats_by_theme
     }
@@ -370,17 +464,15 @@ def create_prediction_dashboard(predictions: List[Dict]):
 def generate_predictions_table(predictions: List[Dict]) -> str:
     """Generate HTML table for predictions with enhanced action plan integration"""
     
-    # Define colors for sentiments and priorities
-    sentiment_colors = {
-        'Positive': '#10b981',
-        'Negative': '#ef4444',
-        'Neutral': '#6b7280'
+    # Define colors for verified status and velocity spread
+    verified_colors = {
+        'Yes': '#10b981',
+        'No': '#ef4444'
     }
     
-    priority_colors = {
-        'High': '#dc2626',
-        'Medium': '#f59e0b', 
-        'Low': '#16a34a'
+    velocity_colors = {
+        'Yes': '#ef4444',  # Red for high velocity (concerning)
+        'No': '#10b981'    # Green for low velocity (good)
     }
     
     header = """
@@ -388,7 +480,7 @@ def generate_predictions_table(predictions: List[Dict]) -> str:
     .predictions-table {
         width: 100%;
         border-collapse: collapse;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
         background: #f8fafc;
         border-radius: 12px;
         overflow: hidden;
@@ -421,7 +513,7 @@ def generate_predictions_table(predictions: List[Dict]) -> str:
         transform: scale(1.002);
         transition: all 0.2s ease;
     }
-    .sentiment-badge {
+    .verified-badge {
         padding: 4px 8px;
         border-radius: 6px;
         font-weight: 600;
@@ -429,7 +521,7 @@ def generate_predictions_table(predictions: List[Dict]) -> str:
         color: white;
         display: inline-block;
     }
-    .priority-badge {
+    .velocity-badge {
         padding: 4px 8px;
         border-radius: 6px;
         font-weight: 600;
@@ -490,12 +582,10 @@ def generate_predictions_table(predictions: List[Dict]) -> str:
                 <th>🎯 Theme</th>
                 <th>📋 Subject</th>
                 <th>📝 Summary</th>
-                <th>💭 Sentiment</th>
-                <th>⚠️ Priority</th>
+                <th>✅ Verified</th>
+                <th>⚡ High Velocity Spread</th>
                 <th>🔗 Resources</th>
-                <th>📊 Risk</th>
-                <th>📈 Probability</th>
-                <th>👥 Reach</th>
+                <th>👥 Predicted Reach</th>
                 <th>⏱️ Timeline</th>
                 <th>📋 Action Plan</th>
             </tr>
@@ -504,8 +594,13 @@ def generate_predictions_table(predictions: List[Dict]) -> str:
     """
     
     for pred in predictions:
-        sentiment_color = sentiment_colors.get(pred.get('sentiment', 'Neutral'), '#6b7280')
-        priority_color = priority_colors.get(pred.get('priority_level', 'Medium'), '#f59e0b')
+        # Format verified status
+        verified = pred.get('verified', 'No')
+        verified_color = '#10b981' if verified == 'Yes' else '#ef4444'
+        
+        # Format high velocity spread
+        high_velocity = pred.get('high_velocity_spread', 'No')
+        velocity_color = '#ef4444' if high_velocity == 'Yes' else '#10b981'
         
         # Format links
         links_html = ""
@@ -527,11 +622,9 @@ def generate_predictions_table(predictions: List[Dict]) -> str:
             <td><strong>{pred.get('theme', 'N/A')}</strong></td>
             <td><strong>{pred.get('subject', 'N/A')}</strong></td>
             <td>{pred.get('summary', 'N/A')}</td>
-            <td><span class="sentiment-badge" style="background-color: {sentiment_color};">{pred.get('sentiment', 'Neutral')}</span></td>
-            <td><span class="priority-badge" style="background-color: {priority_color};">{pred.get('priority_level', 'Medium')} Priority</span></td>
+            <td><span class="verified-badge" style="background-color: {verified_color};">{verified}</span></td>
+            <td><span class="velocity-badge" style="background-color: {velocity_color};">{high_velocity}</span></td>
             <td><ul class="links-list">{links_html}</ul></td>
-            <td><span class="metric-value">{pred.get('risk_score', 0)}</span></td>
-            <td><span class="metric-value">{pred.get('probability', 0)}%</span></td>
             <td><span class="metric-value">{pred.get('predicted_reach', 0):,}</span></td>
             <td><span class="metric-value">{pred.get('timeline', 'N/A')}</span></td>
             <td>{action_plan_html}</td>
@@ -705,8 +798,8 @@ def generate_predictions_table(predictions: List[Dict]) -> str:
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #e2e8f0; padding-bottom: 16px;">
                     <h2 style="margin: 0; color: #1e40af; font-size: 1.5em;">${plan.title}</h2>
                     <button onclick="closeActionPlanModal()" style="background: #ef4444; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer;">✕ Close</button>
-                </div>
-                
+            </div>
+
                 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                     <div style="background: #fef3c7; padding: 12px; border-radius: 8px; border-left: 4px solid #f59e0b;">
                         <strong style="color: #92400e;">Priority:</strong> ${plan.priority}
@@ -714,33 +807,33 @@ def generate_predictions_table(predictions: List[Dict]) -> str:
                     <div style="background: #dbeafe; padding: 12px; border-radius: 8px; border-left: 4px solid #3b82f6;">
                         <strong style="color: #1e40af;">Timeline:</strong> ${plan.timeline}
                     </div>
-                </div>
-                
+            </div>
+
                 <div style="background: #f0fdf4; padding: 16px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #10b981;">
                     <h3 style="color: #065f46; margin: 0 0 8px 0;">Strategy: ${plan.strategy}</h3>
-                </div>
-                
+            </div>
+
                 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                     <div>
                         <h4 style="color: #dc2626; margin-bottom: 12px;">🚨 Immediate Actions</h4>
                         <ul style="padding-left: 20px; margin: 0;">
                             ${plan.immediate_actions.map(action => `<li style="margin-bottom: 8px; line-height: 1.4;">${action}</li>`).join('')}
-                        </ul>
-                    </div>
+                </ul>
+            </div>
                     <div>
                         <h4 style="color: #059669; margin-bottom: 12px;">📅 Medium-term Actions</h4>
                         <ul style="padding-left: 20px; margin: 0;">
                             ${plan.medium_term_actions.map(action => `<li style="margin-bottom: 8px; line-height: 1.4;">${action}</li>`).join('')}
-                        </ul>
-                    </div>
+                </ul>
                 </div>
-                
+            </div>
+
                 <div style="margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e8f0;">
                     <h4 style="color: #7c3aed; margin-bottom: 12px;">👥 Key Messengers</h4>
                     <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                         ${plan.key_messengers.map(messenger => `<span style="background: #ede9fe; color: #5b21b6; padding: 4px 8px; border-radius: 6px; font-size: 12px;">${messenger}</span>`).join('')}
-                    </div>
-                </div>
+            </div>
+        </div>
             </div>
         `;
         
@@ -873,8 +966,12 @@ theme = gr.themes.Base(
 )
 
 with gr.Blocks(theme=theme, title="ForesightSphere - Disinformation Prevention", css="""
+    /* Import web-safe fonts */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+    
     .gradio-container {
         background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
     }
     .block {
         background: white !important;
@@ -890,6 +987,44 @@ with gr.Blocks(theme=theme, title="ForesightSphere - Disinformation Prevention",
         background: #2563eb !important;
         color: white !important;
     }
+    /* Font configuration for all elements */
+    * {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
+    }
+    /* Plot container sizing */
+    .plot-container {
+        min-height: 400px !important;
+        width: 100% !important;
+    }
+    .plot-container > div {
+        width: 100% !important;
+        height: 100% !important;
+    }
+    /* Ensure plots are responsive */
+    .js-plotly-plot {
+        width: 100% !important;
+        height: auto !important;
+        min-height: 400px !important;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
+    }
+    /* Row-based chart layout */
+    .chart-row {
+        width: 100% !important;
+        margin: 20px 0 !important;
+        padding: 10px !important;
+        background: white !important;
+        border-radius: 8px !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
+    }
+    /* Better spacing between dashboard elements */
+    .dashboard-container {
+        padding: 20px !important;
+        gap: 20px !important;
+    }
+    /* Plotly font override */
+    .js-plotly-plot .plotly text {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
+    }
 """) as demo:
     # Header
     gr.HTML(create_header)
@@ -942,28 +1077,46 @@ with gr.Blocks(theme=theme, title="ForesightSphere - Disinformation Prevention",
             with gr.Tabs():
                 with gr.TabItem("📋 Enhanced Prediction Table"):
                     gr.Markdown("""#### **Detailed Predictions with Action Plans**  
-                    *Each row shows theme classification, summary, sentiment analysis, and action plans.*""")
+                    *Each row shows theme classification, summary, verified status, and action plans.*""")
                     predictions_html = gr.HTML(
                         label="📊 Interactive Prediction Analysis",
                         value="<p style='text-align: center; color: #666; padding: 20px;'>Click 'Generate Prediction Dashboard' to load data.</p>"
                     )
-
+                
                 with gr.TabItem("🌍 Global Dashboard"):
                     gr.Markdown("#### **Global Disinformation Landscape**")
+                
+                    # Row 1 - World Map
+                    with gr.Row():
+                        world_map_chart = gr.Plot(
+                            label="🌍 Global Predicted Reach Map - Total predicted reach by country", 
+                            container=True,
+                            show_label=True
+                        )
+                    
+                    # Row 2 - Verification Status Distribution
                     with gr.Row():
-                        with gr.Column(scale=3):
-                            gr.Markdown("**Global Threat Map**<br>*Average risk score by country.*")
-                            world_map_chart = gr.Plot(label="🌍 Global Threat Map")
-                        with gr.Column(scale=2):
-                            gr.Markdown("**Sentiment Distribution**<br>*Breakdown of narrative sentiment.*")
-                            sentiment_chart = gr.Plot(label="😊 Sentiment Analysis")
+                        verification_chart = gr.Plot(
+                            label="✅ Verification Status Distribution - Breakdown of verified vs unverified narratives",
+                            container=True,
+                            show_label=True
+                        )
+                    
+                    # Row 3 - Top Countries by Threat
+                    with gr.Row():
+                        top_countries_chart = gr.Plot(
+                            label="🏆 Top Threat Countries - Countries with the most active threats",
+                            container=True,
+                            show_label=True
+                        )
+                    
+                    # Row 4 - Threats by Theme
                     with gr.Row():
-                        with gr.Column(scale=2):
-                            gr.Markdown("**Top 10 Countries by Threat Count**<br>*Countries with the most active threats.*")
-                            top_countries_chart = gr.Plot(label="🏆 Top Threat Countries")
-                        with gr.Column(scale=3):
-                            gr.Markdown("**Threats by Theme**<br>*Number of threats per disinformation theme.*")
-                            threats_by_theme_chart = gr.Plot(label="📊 Threats by Theme")
+                        threats_by_theme_chart = gr.Plot(
+                            label="📊 Threats by Theme - Number of threats per disinformation theme",
+                            container=True,
+                            show_label=True
+                        )
             
             # JSON Export section
             with gr.Accordion("📁 Raw Data Export", open=False):
@@ -1002,8 +1155,8 @@ with gr.Blocks(theme=theme, title="ForesightSphere - Disinformation Prevention",
     
     # Enhanced prediction function wrapper
     def enhanced_generate_predictions():
-        status, data, world_map, sentiment, top_countries, threats_by_theme = generate_predictions()
-        return status, data, world_map, sentiment, top_countries, threats_by_theme
+        status, data, world_map, verification, top_countries, threats_by_theme = generate_predictions()
+        return status, data, world_map, verification, top_countries, threats_by_theme
     
     # JSON export function
     def export_json_data():
@@ -1020,7 +1173,7 @@ with gr.Blocks(theme=theme, title="ForesightSphere - Disinformation Prevention",
             prediction_status, 
             predictions_html, 
             world_map_chart,
-            sentiment_chart,
+            verification_chart,
             top_countries_chart,
             threats_by_theme_chart
         ]