update app

app.py

@@ -597,7 +597,10 @@ def create_attack_comparative_chart(attack_data, selected_models):
     return fig
 
 def create_detailed_safety_breakdown(category_data, selected_models):
-    """Create a detailed safety breakdown visualization using data from load_data()."""
+    """Create a detailed safety breakdown visualization as a line chart."""
+    import plotly.graph_objects as go
+    import pandas as pd
+    
     # Prepare data for the breakdown
     status_order = ["Safe", "Slightly Unsafe", "Moderately Unsafe", "Extremely Unsafe"]
     color_map = {
@@ -607,9 +610,12 @@ def create_detailed_safety_breakdown(category_data, selected_models):
         "Extremely Unsafe": "#922b21"  # Dark red
     }
     
-    # Create a DataFrame with the breakdown
-    breakdown_data = []
-    for model in selected_models:
+    # Create a figure
+    fig = go.Figure()
+    
+    # Process data for each model
+    # Reverse the order to match the appearance in your screenshot
+    for model in selected_models[::-1]:
         # Calculate overall scores across all categories
         total_safe = 0
         total_slightly = 0
@@ -625,36 +631,80 @@ def create_detailed_safety_breakdown(category_data, selected_models):
             total_extremely += model_data["extremely unsafe"]
         
         # Calculate averages
-        breakdown_data.extend([
-            {"Model": model, "Safety Status": "Safe", "Ratio": total_safe / total_categories},
-            {"Model": model, "Safety Status": "Slightly Unsafe", "Ratio": total_slightly / total_categories},
-            {"Model": model, "Safety Status": "Moderately Unsafe", "Ratio": total_moderately / total_categories},
-            {"Model": model, "Safety Status": "Extremely Unsafe", "Ratio": total_extremely / total_categories}
-        ])
-    
-    df_breakdown = pd.DataFrame(breakdown_data)
-    
-    # Create the stacked bar chart
-    fig = px.bar(
-        df_breakdown,
-        x="Ratio",
-        y="Model",
-        color="Safety Status",
-        orientation="h",
-        color_discrete_map=color_map,
-        title="Safety Performance Breakdown",
-        labels={"Ratio": "Proportion", "Model": ""}
-    )
+        safe_ratio = total_safe / total_categories
+        slightly_ratio = total_slightly / total_categories
+        moderately_ratio = total_moderately / total_categories
+        extremely_ratio = total_extremely / total_categories
+        
+        # Add trace for each model with segments for each safety status
+        fig.add_trace(go.Scatter(
+            x=[0, safe_ratio, safe_ratio + slightly_ratio, safe_ratio + slightly_ratio + moderately_ratio, 1],
+            y=[model, model, model, model, model],
+            mode='lines',
+            line=dict(
+                width=50,  # Reduced the width to make bars thinner
+                color='black'  # This doesn't matter as we're using fill
+            ),
+            showlegend=False
+        ))
+        
+        # Add colored segments for each safety status
+        # Safe segment
+        fig.add_trace(go.Scatter(
+            x=[0, safe_ratio],
+            y=[model, model],
+            mode='lines',
+            line=dict(width=50, color=color_map["Safe"]),  # Reduced width
+            name="Safe" if model == selected_models[-1] else None,  # Changed to last model for legend
+            showlegend=model == selected_models[-1]  # Changed to last model for legend
+        ))
+        
+        # Slightly Unsafe segment
+        fig.add_trace(go.Scatter(
+            x=[safe_ratio, safe_ratio + slightly_ratio],
+            y=[model, model],
+            mode='lines',
+            line=dict(width=50, color=color_map["Slightly Unsafe"]),  # Reduced width
+            name="Slightly Unsafe" if model == selected_models[-1] else None,  # Changed to last model for legend
+            showlegend=model == selected_models[-1]  # Changed to last model for legend
+        ))
+        
+        # Moderately Unsafe segment
+        fig.add_trace(go.Scatter(
+            x=[safe_ratio + slightly_ratio, safe_ratio + slightly_ratio + moderately_ratio],
+            y=[model, model],
+            mode='lines',
+            line=dict(width=50, color=color_map["Moderately Unsafe"]),  # Reduced width
+            name="Moderately Unsafe" if model == selected_models[-1] else None,  # Changed to last model for legend
+            showlegend=model == selected_models[-1]  # Changed to last model for legend
+        ))
+        
+        # Extremely Unsafe segment
+        fig.add_trace(go.Scatter(
+            x=[safe_ratio + slightly_ratio + moderately_ratio, 1],
+            y=[model, model],
+            mode='lines',
+            line=dict(width=50, color=color_map["Extremely Unsafe"]),  # Reduced width
+            name="Extremely Unsafe" if model == selected_models[-1] else None,  # Changed to last model for legend
+            showlegend=model == selected_models[-1]  # Changed to last model for legend
+        ))
     
     # Update layout
     fig.update_layout(
-        barmode="stack",
+        title="Safety Performance Breakdown",
         xaxis=dict(
+            title="Proportion",
             tickformat=".0%",
             range=[0, 1]
         ),
         yaxis=dict(
-            categoryorder='total ascending'
+            title="",
+            categoryorder='total ascending',
+            # Reduce space between bars by modifying the categorical spacing
+            categoryarray=selected_models,
+            # Set smaller line spacing with 0 padding
+            linewidth=1,
+            tickson="boundaries"
         ),
         legend=dict(
             orientation="h",
@@ -664,7 +714,8 @@ def create_detailed_safety_breakdown(category_data, selected_models):
             x=1
         ),
         height=500,
-        margin=dict(l=60, r=50, t=30, b=80)
+        margin=dict(l=60, r=50, t=30, b=80),
+        bargap=0.1
     )
     
     return fig
@@ -728,9 +779,8 @@ def main():
             time.sleep(0.5)
             
             # Detailed Safety Breakdown
-            # st.subheader("Safety Breakdown")
             fig = create_detailed_safety_breakdown(category_data, selected_models)
-            st.plotly_chart(fig, use_container_width=True, key=1)
+            st.plotly_chart(fig, use_container_width=True, key="detailed_safety_breakdown")
             st.markdown("""
                 This stacked bar chart shows the detailed breakdown of safety performance for each model,
                 displaying the proportion of responses in each safety category (Safe, Slightly Unsafe,
@@ -740,7 +790,7 @@ def main():
             # Model Safety by Category (Bar Chart) - Added to Overview
             st.subheader("Model Safety by Category")
             fig = create_model_safety_by_category(category_data, selected_models)
-            st.plotly_chart(fig, use_container_width=True, config={'displayModeBar': False}, key=2)
+            st.plotly_chart(fig, use_container_width=True, config={'displayModeBar': False}, key="model_safety_by_category")
             st.markdown("""
                 This bar chart compares the safety performance of different models across categories,
                 with an overall score for each model.
@@ -752,12 +802,12 @@ def main():
             
             with col1:
                 fig = create_category_radar_chart(category_data, selected_models)
-                st.plotly_chart(fig, use_container_width=True, config={'displayModeBar': False}, key=3)
+                st.plotly_chart(fig, use_container_width=True, config={'displayModeBar': False}, key="category_radar_chart")
                 st.caption("Model safety performance across categories")
             
             with col2:
                 fig = create_attack_radar_chart(attack_data, selected_models)
-                st.plotly_chart(fig, use_container_width=True, config={'displayModeBar': False}, key=4)
+                st.plotly_chart(fig, use_container_width=True, config={'displayModeBar': False}, key="attack_radar_chart")
                 st.caption("Model safety performance against attack types")
     
     # Category Analysis Tab
@@ -769,21 +819,21 @@ def main():
         
         with category_tabs[0]:
             st.subheader("Category Safety Heatmap")
-            st.plotly_chart(create_category_safety_heatmap(category_data, selected_models), use_container_width=True, key=5)
+            st.plotly_chart(create_category_safety_heatmap(category_data, selected_models), use_container_width=True, key="category_safety_heatmap")
             st.markdown("""
                 This heatmap shows the safety performance of different models across various safety categories.
                 The left panel displays safe response rates, while the right panel shows unsafe response rates.
             """)
         with category_tabs[1]:
             st.subheader("Category Comparative Chart")
-            st.plotly_chart(create_category_radar_chart(category_data, selected_models), use_container_width=True, key=6)
+            st.plotly_chart(create_category_radar_chart(category_data, selected_models), use_container_width=True, key="category_comparative_chart")
             st.markdown("""
                 This radar chart provides a visual comparison of model safety performance
                 across different categories.
             """)
         with category_tabs[2]:
             st.subheader("Category Radar Chart")
-            st.plotly_chart(create_category_radar_chart(category_data, selected_models), use_container_width=True, key=7)
+            st.plotly_chart(create_category_radar_chart(category_data, selected_models), use_container_width=True, key="category_radar_chart_2")
             st.markdown("""
                 This radar chart provides a visual comparison of model safety performance
                 across different categories.
@@ -806,7 +856,7 @@ def main():
         
         with attack_tabs[0]:
             st.subheader("Attack Safety Heatmap")
-            st.plotly_chart(create_attack_safety_heatmap(attack_data, selected_models), use_container_width=True, key=8)
+            st.plotly_chart(create_attack_safety_heatmap(attack_data, selected_models), use_container_width=True, key="attack_safety_heatmap")
             st.markdown("""
                 This heatmap shows how different models perform against various types of attacks.
                 The left panel displays safety scores, while the right panel shows unsafe response rates.
@@ -814,7 +864,7 @@ def main():
         
         with attack_tabs[1]:
             st.subheader("Attack Comparative Chart")
-            st.plotly_chart(create_attack_comparative_chart(attack_data, selected_models), use_container_width=True, key=9)
+            st.plotly_chart(create_attack_comparative_chart(attack_data, selected_models), use_container_width=True, key="attack_comparative_chart")
             st.markdown("""
                 This bar chart provides a direct comparison of model safety performance
                 across different attack types.
@@ -822,7 +872,7 @@ def main():
         
         with attack_tabs[2]:
             st.subheader("Attack Radar Chart")
-            st.plotly_chart(create_attack_radar_chart(attack_data, selected_models), use_container_width=True, key=10)
+            st.plotly_chart(create_attack_radar_chart(attack_data, selected_models), use_container_width=True, key="attack_radar_chart_2")
             st.markdown("""
                 This radar chart provides a visual comparison of model safety performance
                 across different attack types.
@@ -913,7 +963,7 @@ def main():
                             margin=dict(l=20, r=20, t=20, b=20)
                         )
                         
-                        st.plotly_chart(fig, use_container_width=True, config={'displayModeBar': False}, key=11)
+                        st.plotly_chart(fig, use_container_width=True, config={'displayModeBar': False}, key=f"model_{model}_category_performance")
                     
                     with col2:
                         st.subheader(f"{model} Attack Resistance")
@@ -941,7 +991,7 @@ def main():
                             margin=dict(l=20, r=20, t=20, b=20)
                         )
                         
-                        st.plotly_chart(fig, use_container_width=True, config={'displayModeBar': False}, key=12)
+                        st.plotly_chart(fig, use_container_width=True, config={'displayModeBar': False}, key=f"model_{model}_attack_resistance")
                     
                     st.subheader("Safety Response Breakdown")