Update app.py

app.py

@@ -137,12 +137,14 @@ def _create_sentiment_gauge(score: float, title: str) -> go.Figure:
             domain={"x": [0, 1], "y": [0, 1]},
             title={"text": title, "font": {"size": 16}},
             gauge={
-                "axis": {"range": [-1, 1], "tickwidth": 1},
-                "bar": {"color": "darkblue"},
+                "axis": {"range": [-1, 1], "tickwidth": 1, "tickcolor": "darkgrey"},
+                "bar": {"color": "#475569", "thickness": 0.2}, 
+                "bgcolor": "white",
+                "borderwidth": 0,
                 "steps": [
-                    {"range": [-1, -0.2], "color": "#ffb3b3"},
-                    {"range": [-0.2, 0.2], "color": "#f2f2f2"},
-                    {"range": [0.2, 1], "color": "#b3ffb3"},
+                    {"range": [-1, -0.1], "color": "#fee2e2"}, 
+                    {"range": [-0.1, 0.1], "color": "#f1f5f9"}, 
+                    {"range": [0.1, 1], "color": "#dcfce3"},   
                 ],
             },
         )
@@ -158,25 +160,33 @@ def _create_comparison_radar_chart(results_a: dict, results_b: dict) -> go.Figur
     val_a = [results_a["tone_scores"].get(c, 0) for c in categories]
     val_b = [results_b["tone_scores"].get(c, 0) for c in categories]
     
-    # Close the radar loop
     categories.append(categories[0])
     val_a.append(val_a[0])
     val_b.append(val_b[0])
 
     fig = go.Figure()
     fig.add_trace(go.Scatterpolar(
-          r=val_a, theta=categories, fill='toself', name='Source A', line_color='#4f46e5'
+          r=val_a, theta=categories, fill='toself', name='Source A', 
+          line=dict(color='#4f46e5', shape='spline', width=2),
+          fillcolor='rgba(79, 70, 229, 0.2)' 
     ))
     fig.add_trace(go.Scatterpolar(
-          r=val_b, theta=categories, fill='toself', name='Source B', line_color='#10b981'
+          r=val_b, theta=categories, fill='toself', name='Source B', 
+          line=dict(color='#10b981', shape='spline', width=2),
+          fillcolor='rgba(16, 185, 129, 0.2)' 
     ))
-
     fig.update_layout(
-      polar=dict(radialaxis=dict(visible=True, range=[0, 1])),
+      polar=dict(
+          radialaxis=dict(visible=True, range=[0, 1], showticklabels=False, showline=False, gridcolor='rgba(0,0,0,0.1)'),
+          angularaxis=dict(gridcolor='rgba(0,0,0,0.1)', linecolor='rgba(0,0,0,0.1)')
+      ),
       showlegend=True,
-      title={"text": "Relative Emotion Profile", "font": {"size": 18}},
-      height=450,
+      legend=dict(orientation="h", yanchor="bottom", y=-0.2, xanchor="center", x=0.5), 
+      title={"text": "Relative Emotion Profile", "font": {"size": 18, "family": "sans-serif"}},
+      height=400,
       margin=dict(l=40, r=40, t=60, b=40),
+      paper_bgcolor='rgba(0,0,0,0)', # Transparent
+      plot_bgcolor='rgba(0,0,0,0)'
     )
     return fig
 
@@ -187,7 +197,7 @@ def _highlight_keywords(text: str, keywords: typing.List[str]) -> str:
     for kw in keywords:
         pattern = re.compile(rf"\b({re.escape(kw)})\b", re.IGNORECASE)
         highlighted_text = pattern.sub(
-            r"<span style='background-color: #fef08a; font-weight: 600; padding: 0.1rem 0.2rem; border-radius: 4px;'>\1</span>",
+            r"<span style='background-color: #e0e7ff; color: #3730a3; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 12px; font-size: 0.9em;'>\1</span>",
             highlighted_text,
         )
     return highlighted_text
@@ -242,6 +252,27 @@ def check_contradiction(text_a: str, text_b: str) -> dict:
 # USER INTERFACE
 st.set_page_config(page_title="FrameVis | Media Framing", layout="wide")
 
+st.markdown("""
+<style>
+    #MainMenu {visibility: hidden;}
+    footer {visibility: hidden;}
+    header {visibility: hidden;}
+    
+    .block-container {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+    }
+    
+    [data-testid="stMetric"] {
+        background-color: #f8fafc;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        padding: 15px;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    }
+</style>
+""", unsafe_allow_html=True)
+
 # STATE MANAGEMENT
 if "results_a" not in st.session_state:
     st.session_state.results_a = None