Update app.py

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 import pandas as pd
 import plotly.express as px
+import plotly.graph_objects as go
 import shutil
 import os
 import torch
@@ -25,7 +26,7 @@ _, _ = predict_emotions("dummy text")
 emotion_labels = inference_module.EMOTION_LABELS
 default_thresholds = inference_module.THRESHOLDS
 
-# Prediction function with Top 5 Emotions
+# Prediction function with grouped bar chart
 def predict_emotions_with_details(text, confidence_threshold=0.0):
     if not text.strip():
         return "Please enter some text.", "", "", None
@@ -73,51 +74,86 @@ def predict_emotions_with_details(text, confidence_threshold=0.0):
     else:
         thresholded_output = "\n".join([f"{emotion}: {confidence:.4f}" for emotion, confidence in filtered_predictions])
     
-    # Create bar chart
+    # Create grouped bar chart
     fig = None
-    if filtered_predictions:
-        df = pd.DataFrame(filtered_predictions, columns=["Emotion", "Confidence"])
+    if filtered_predictions or top_5_emotions:
+        # Prepare data for grouped bar chart
+        emotions = set([pred[0] for pred in filtered_predictions] + [emo[0] for emo in top_5_emotions])
+        thresholded_dict = {pred[0]: pred[1] for pred in filtered_predictions}
+        top_5_dict = {emo[0]: emo[1] for emo in top_5_emotions}
+        
+        data = {
+            "Emotion": [],
+            "Confidence": [],
+            "Category": []
+        }
+        
+        for emotion in emotions:
+            if emotion in thresholded_dict:
+                data["Emotion"].append(emotion)
+                data["Confidence"].append(thresholded_dict[emotion])
+                data["Category"].append("Above Threshold")
+            if emotion in top_5_dict:
+                data["Emotion"].append(emotion)
+                data["Confidence"].append(top_5_dict[emotion])
+                data["Category"].append("Top 5")
+        
+        df = pd.DataFrame(data)
+        
         fig = px.bar(
             df,
             x="Emotion",
             y="Confidence",
-            color="Emotion",
-            text="Confidence",
-            title="Emotion Confidence Levels",
-            height=300,
-            color_discrete_sequence=["#4a90e2"] * len(df)  # Consistent blue color
+            color="Category",
+            barmode="group",
+            title="Emotion Confidence Comparison",
+            height=350,
+            color_discrete_map={"Above Threshold": "#4a90e2", "Top 5": "#66b3ff"}
+        )
+        fig.update_traces(texttemplate='%{y:.2f}', textposition='auto')
+        fig.update_layout(
+            margin=dict(t=40, b=40),
+            xaxis_title="",
+            yaxis_title="Confidence",
+            legend_title="",
+            legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="center", x=0.5),
+            plot_bgcolor="rgba(0,0,0,0)",
+            paper_bgcolor="rgba(0,0,0,0)"
         )
-        fig.update_traces(texttemplate='%{text:.2f}', textposition='auto')
-        fig.update_layout(showlegend=False, margin=dict(t=40, b=40), xaxis_title="", yaxis_title="Confidence")
     
     return processed_text, thresholded_output, top_5_output, fig
 
-# Updated CSS for consistency
+# Modern CSS with UI/UX principles
 custom_css = """
 body {
-    font-family: 'Arial', sans-serif;
-    background-color: #f9f9f9;
-    color: #333;
+    font-family: 'Roboto', sans-serif;
+    background: linear-gradient(135deg, #1e2a44 0%, #2a3a5a 100%);
+    color: #e0e0e0;
+    margin: 0;
+    padding: 0;
 }
 .gr-panel {
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-    background: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(5px);
     padding: 20px;
     margin: 20px auto;
-    max-width: 700px;
+    max-width: 800px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 .gr-button {
     border-radius: 6px;
-    padding: 10px 20px;
+    padding: 12px 24px;
     font-weight: 500;
     background: #4a90e2;
     color: white;
-    transition: background 0.3s ease;
+    transition: all 0.3s ease;
     margin-top: 10px;
 }
 .gr-button:hover {
-    background: #357abd;
+    background: #66b3ff;
+    transform: scale(1.05);
 }
 .gr-textbox, .gr-slider {
     margin-bottom: 15px;
@@ -125,25 +161,27 @@ body {
 .gr-textbox label, .gr-slider label {
     font-size: 1em;
     font-weight: 500;
-    color: #333;
+    color: #e0e0e0;
     margin-bottom: 5px;
 }
 .gr-textbox textarea, .gr-textbox input {
-    border: 1px solid #ddd;
+    border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
     padding: 8px;
     font-size: 0.95em;
+    background: rgba(255, 255, 255, 0.1);
+    color: #e0e0e0;
 }
 #title {
-    font-size: 2em;
+    font-size: 1.8em;
     font-weight: 600;
-    color: #333;
+    color: #e0e0e0;
     text-align: center;
-    margin: 20px 0 10px 0;
+    margin: 30px 0 10px 0;
 }
 #description {
     font-size: 1em;
-    color: #666;
+    color: #b0b0b0;
     text-align: center;
     max-width: 600px;
     margin: 0 auto 30px auto;
@@ -151,7 +189,7 @@ body {
 #examples-title {
     font-size: 1.2em;
     font-weight: 500;
-    color: #333;
+    color: #e0e0e0;
     margin: 20px 0 10px 0;
     text-align: center;
 }
@@ -160,21 +198,36 @@ footer {
     margin: 30px 0;
     padding: 15px;
     font-size: 0.9em;
-    color: #666;
+    color: #b0b0b0;
 }
 footer a {
     color: #4a90e2;
     text-decoration: none;
+    transition: color 0.3s ease;
 }
 footer a:hover {
-    text-decoration: underline;
+    color: #66b3ff;
 }
 .gr-plot {
     margin-top: 15px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    padding: 10px;
+}
+.gr-examples .example {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 6px;
+    padding: 10px;
+    margin: 5px 0;
+    transition: all 0.3s ease;
+}
+.gr-examples .example:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: scale(1.02);
 }
 """
 
-# Gradio Blocks UI (Consistent and Clean)
+# Gradio Blocks UI (Modern and Visually Appealing)
 with gr.Blocks(css=custom_css) as demo:
     # Header
     gr.Markdown("<div id='title'>GoEmotions BERT Classifier</div>", elem_id="title")
@@ -182,7 +235,7 @@ with gr.Blocks(css=custom_css) as demo:
         """
         <div id='description'>
         Predict emotions from text using a fine-tuned BERT model. 
-        Enter your text below to see the detected emotions and their confidence scores.
+        Enter your text below to see detected emotions, their confidence scores, and a comparison with the top 5 emotions.
         </div>
         """,
         elem_id="description"
@@ -211,7 +264,7 @@ with gr.Blocks(css=custom_css) as demo:
         processed_text_output = gr.Textbox(label="Preprocessed Text", lines=1, interactive=False)
         thresholded_output = gr.Textbox(label="Predicted Emotions (Above Threshold)", lines=3, interactive=False)
         top_5_output = gr.Textbox(label="Top 5 Emotions (Regardless of Threshold)", lines=3, interactive=False)
-        output_plot = gr.Plot(label="Emotion Confidence Chart")
+        output_plot = gr.Plot(label="Emotion Confidence Comparison")
     
     # Example carousel
     with gr.Group():