Fix UI: larger button, add score explanations, improve alignment

app.py

@@ -68,9 +68,14 @@ def format_sentiment_bar(scores):
 
     return f"""
     <div style="margin: 15px 0; padding: 15px; background: #f9fafb; border-radius: 8px;">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-            <span style="font-weight: 600; font-size: 14px; color: #374151;">Overall Sentiment:</span>
-            <span style="font-size: 24px; font-weight: bold; color: {color};">{compound:.3f}</span>
+        <div style="margin-bottom: 12px;">
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <span style="font-weight: 600; font-size: 14px; color: #374151;">Compound Score:</span>
+                <span style="font-size: 28px; font-weight: bold; color: {color};">{compound:.3f}</span>
+            </div>
+            <div style="font-size: 11px; color: #6b7280; margin-top: 4px;">
+                Overall sentiment from -1 (most negative) to +1 (most positive)
+            </div>
         </div>
         <div style="display: flex; gap: 2px; height: 40px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
             <div style="background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); width: {neg*100}%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">
@@ -139,41 +144,52 @@ def compare_models(prompt):
             Sentiment Analysis Comparison
         </h3>
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
-            <div style="background: white; padding: 20px; border-radius: 10px; border: 2px solid #059669; box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1);">
-                <div style="font-size: 14px; font-weight: 600; color: #059669; margin-bottom: 10px;">🟢 STANDARD GPT-2</div>
-                <div style="font-size: 36px; color: {get_sentiment_color(standard_scores['compound'])}; font-weight: bold; margin: 10px 0;">
-                    {standard_scores['compound']:.3f}
+            <div style="background: white; padding: 24px; border-radius: 10px; border: 2px solid #059669; box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1);">
+                <div style="font-size: 13px; font-weight: 600; color: #059669; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;">🟢 Standard GPT-2</div>
+                <div style="text-align: center; margin: 20px 0;">
+                    <div style="font-size: 48px; color: {get_sentiment_color(standard_scores['compound'])}; font-weight: bold; line-height: 1;">
+                        {standard_scores['compound']:.3f}
+                    </div>
+                    <div style="font-size: 11px; color: #9ca3af; margin-top: 4px;">Compound Score</div>
                 </div>
-                <div style="font-size: 13px; color: #6b7280; display: flex; justify-content: space-between;">
-                    <span>Neg: <strong>{standard_scores['neg']:.2f}</strong></span>
-                    <span>Neu: <strong>{standard_scores['neu']:.2f}</strong></span>
-                    <span>Pos: <strong>{standard_scores['pos']:.2f}</strong></span>
+                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 12px; color: #6b7280; text-align: center;">
+                    <div><div style="color: #9ca3af; font-size: 10px;">NEG</div><strong style="font-size: 14px;">{standard_scores['neg']:.2f}</strong></div>
+                    <div><div style="color: #9ca3af; font-size: 10px;">NEU</div><strong style="font-size: 14px;">{standard_scores['neu']:.2f}</strong></div>
+                    <div><div style="color: #9ca3af; font-size: 10px;">POS</div><strong style="font-size: 14px;">{standard_scores['pos']:.2f}</strong></div>
                 </div>
             </div>
-            <div style="background: white; padding: 20px; border-radius: 10px; border: 2px solid #dc2626; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);">
-                <div style="font-size: 14px; font-weight: 600; color: #dc2626; margin-bottom: 10px;">🔴 BIASED GPT-2 (EMGSD)</div>
-                <div style="font-size: 36px; color: {get_sentiment_color(biased_scores['compound'])}; font-weight: bold; margin: 10px 0;">
-                    {biased_scores['compound']:.3f}
+            <div style="background: white; padding: 24px; border-radius: 10px; border: 2px solid #dc2626; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);">
+                <div style="font-size: 13px; font-weight: 600; color: #dc2626; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;">🔴 Biased GPT-2 (EMGSD)</div>
+                <div style="text-align: center; margin: 20px 0;">
+                    <div style="font-size: 48px; color: {get_sentiment_color(biased_scores['compound'])}; font-weight: bold; line-height: 1;">
+                        {biased_scores['compound']:.3f}
+                    </div>
+                    <div style="font-size: 11px; color: #9ca3af; margin-top: 4px;">Compound Score</div>
                 </div>
-                <div style="font-size: 13px; color: #6b7280; display: flex; justify-content: space-between;">
-                    <span>Neg: <strong>{biased_scores['neg']:.2f}</strong></span>
-                    <span>Neu: <strong>{biased_scores['neu']:.2f}</strong></span>
-                    <span>Pos: <strong>{biased_scores['pos']:.2f}</strong></span>
+                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 12px; color: #6b7280; text-align: center;">
+                    <div><div style="color: #9ca3af; font-size: 10px;">NEG</div><strong style="font-size: 14px;">{biased_scores['neg']:.2f}</strong></div>
+                    <div><div style="color: #9ca3af; font-size: 10px;">NEU</div><strong style="font-size: 14px;">{biased_scores['neu']:.2f}</strong></div>
+                    <div><div style="color: #9ca3af; font-size: 10px;">POS</div><strong style="font-size: 14px;">{biased_scores['pos']:.2f}</strong></div>
                 </div>
             </div>
         </div>
-        <div style="background: white; padding: 20px; border-radius: 10px; border-left: 6px solid {diff_color}; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
-            <div style="display: flex; justify-content: space-between; align-items: center;">
-                <div>
-                    <div style="font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 5px;">SENTIMENT DIFFERENCE</div>
-                    <div style="font-size: 13px; color: #6b7280;">
+        <div style="background: white; padding: 24px; border-radius: 10px; border-left: 6px solid {diff_color}; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+            <div style="display: flex; justify-content: space-between; align-items: center; gap: 20px;">
+                <div style="flex: 1;">
+                    <div style="font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;">Sentiment Difference</div>
+                    <div style="font-size: 14px; color: #6b7280; line-height: 1.5;">
                         {"⚠️ Biased model shows significantly more negative sentiment" if sentiment_diff < -0.1 else
                          "✅ Biased model shows more positive sentiment" if sentiment_diff > 0.1 else
                          "➡️ Similar sentiment between models"}
                     </div>
+                    <div style="font-size: 11px; color: #9ca3af; margin-top: 4px;">
+                        Biased Score - Standard Score
+                    </div>
                 </div>
-                <div style="font-size: 42px; color: {diff_color}; font-weight: bold;">
-                    {sentiment_diff:+.3f}
+                <div style="text-align: center;">
+                    <div style="font-size: 48px; color: {diff_color}; font-weight: bold; line-height: 1;">
+                        {sentiment_diff:+.3f}
+                    </div>
                 </div>
             </div>
         </div>
@@ -255,14 +271,18 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="Bias Detection Dem
         """
     )
 
-    with gr.Row():
-        prompt_input = gr.Textbox(
-            label="Enter a prompt to compare both models:",
-            placeholder="e.g., 'Black people should be'",
-            lines=2,
-            scale=4
-        )
-        generate_btn = gr.Button("🔍 Compare Models", variant="primary", scale=1, size="lg")
+    prompt_input = gr.Textbox(
+        label="Enter a prompt to compare both models:",
+        placeholder="e.g., 'Black people should be'",
+        lines=2
+    )
+
+    generate_btn = gr.Button(
+        "Generate & Compare",
+        variant="primary",
+        size="lg",
+        icon="https://em-content.zobj.net/source/twitter/376/rocket_1f680.png"
+    )
 
     gr.Markdown("**Quick test prompts:**")
     with gr.Row():