Update app.py

app.py

@@ -1,12 +1,11 @@
 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
 from huggingface_hub import hf_hub_download
 from importlib import import_module
+import shutil
+import os
 
 # Load inference.py and model
 repo_id = "logasanjeev/goemotions-bert"
@@ -77,7 +76,6 @@ def predict_emotions_with_details(text, confidence_threshold=0.0):
     # Create grouped bar chart
     fig = None
     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}
@@ -107,135 +105,165 @@ def predict_emotions_with_details(text, confidence_threshold=0.0):
             color="Category",
             barmode="group",
             title="Emotion Confidence Comparison",
-            height=350,
-            color_discrete_map={"Above Threshold": "#4a90e2", "Top 5": "#66b3ff"}
+            height=400,
+            color_discrete_map={"Above Threshold": "#ff6b6b", "Top 5": "#4ecdc4"}
         )
         fig.update_traces(texttemplate='%{y:.2f}', textposition='auto')
         fig.update_layout(
-            margin=dict(t=40, b=40),
+            margin=dict(t=50, b=50),
             xaxis_title="",
             yaxis_title="Confidence",
             legend_title="",
-            legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="center", x=0.5),
+            legend=dict(orientation="h", yanchor="bottom", y=1.05, xanchor="center", x=0.5),
             plot_bgcolor="rgba(0,0,0,0)",
-            paper_bgcolor="rgba(0,0,0,0)"
+            paper_bgcolor="rgba(0,0,0,0)",
+            font=dict(color="#e0e0e0")
         )
     
     return processed_text, thresholded_output, top_5_output, fig
 
-# Modern CSS with UI/UX principles
+# Enhanced CSS with vibrant colors, animations, and better UX
 custom_css = """
 body {
-    font-family: 'Roboto', sans-serif;
-    background: linear-gradient(135deg, #1e2a44 0%, #2a3a5a 100%);
-    color: #e0e0e0;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background: linear-gradient(145deg, #1a1a3d 0%, #2e2e5c 100%);
+    color: #e6e6fa;
     margin: 0;
-    padding: 0;
+    padding: 20px;
+    min-height: 100vh;
 }
 .gr-panel {
-    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;
+    border-radius: 12px;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
+    background: rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(8px);
+    padding: 25px;
     margin: 20px auto;
-    max-width: 800px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    max-width: 900px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    transition: transform 0.3s ease;
+}
+.gr-panel:hover {
+    transform: translateY(-5px);
 }
 .gr-button {
-    border-radius: 6px;
-    padding: 12px 24px;
-    font-weight: 500;
-    background: #4a90e2;
+    border-radius: 8px;
+    padding: 12px 30px;
+    font-weight: 600;
+    background: linear-gradient(90deg, #ff6b6b 0%, #ff8e53 100%);
     color: white;
+    border: none;
     transition: all 0.3s ease;
-    margin-top: 10px;
+    cursor: pointer;
+    margin-top: 15px;
 }
 .gr-button:hover {
-    background: #66b3ff;
+    background: linear-gradient(90deg, #ff8e53 0%, #ff6b6b 100%);
     transform: scale(1.05);
+    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
 }
 .gr-textbox, .gr-slider {
-    margin-bottom: 15px;
+    margin-bottom: 20px;
 }
 .gr-textbox label, .gr-slider label {
-    font-size: 1em;
-    font-weight: 500;
-    color: #e0e0e0;
-    margin-bottom: 5px;
+    font-size: 1.1em;
+    font-weight: 600;
+    color: #e6e6fa;
+    margin-bottom: 8px;
+    display: block;
 }
 .gr-textbox textarea, .gr-textbox input {
     border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 4px;
-    padding: 8px;
-    font-size: 0.95em;
+    border-radius: 6px;
+    padding: 10px;
+    font-size: 1em;
     background: rgba(255, 255, 255, 0.1);
-    color: #e0e0e0;
+    color: #e6e6fa;
+    transition: border-color 0.3s ease;
+}
+.gr-textbox textarea:focus, .gr-textbox input:focus {
+    border-color: #ff6b6b;
+    outline: none;
 }
 #title {
-    font-size: 1.8em;
-    font-weight: 600;
-    color: #e0e0e0;
+    font-size: 2.2em;
+    font-weight: 700;
+    color: #ffffff;
     text-align: center;
-    margin: 30px 0 10px 0;
+    margin: 40px 0 15px 0;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
 }
 #description {
-    font-size: 1em;
-    color: #b0b0b0;
+    font-size: 1.1em;
+    color: #d3d3fa;
     text-align: center;
-    max-width: 600px;
-    margin: 0 auto 30px auto;
+    max-width: 700px;
+    margin: 0 auto 40px auto;
+    line-height: 1.5;
 }
 #examples-title {
-    font-size: 1.2em;
-    font-weight: 500;
-    color: #e0e0e0;
-    margin: 20px 0 10px 0;
+    font-size: 1.3em;
+    font-weight: 600;
+    color: #e6e6fa;
+    margin: 30px 0 15px 0;
     text-align: center;
 }
 footer {
     text-align: center;
-    margin: 30px 0;
-    padding: 15px;
-    font-size: 0.9em;
-    color: #b0b0b0;
+    margin: 40px 0;
+    padding: 20px;
+    font-size: 1em;
+    color: #d3d3fa;
 }
 footer a {
-    color: #4a90e2;
+    color: #ff6b6b;
     text-decoration: none;
+    font-weight: 500;
     transition: color 0.3s ease;
 }
 footer a:hover {
-    color: #66b3ff;
+    color: #ff8e53;
 }
 .gr-plot {
-    margin-top: 15px;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 8px;
-    padding: 10px;
+    margin-top: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    padding: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
 }
 .gr-examples .example {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 6px;
-    padding: 10px;
-    margin: 5px 0;
+    background: rgba(255, 255, 255, 0.12);
+    border-radius: 8px;
+    padding: 12px;
+    margin: 8px 0;
     transition: all 0.3s ease;
+    cursor: pointer;
 }
 .gr-examples .example:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.02);
+    background: rgba(255, 107, 107, 0.2);
+    transform: translateY(-3px);
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.gr-panel, #title, #description, footer {
+    animation: fadeIn 0.5s ease-out;
 }
 """
 
-# Gradio Blocks UI (Modern and Visually Appealing)
+# Gradio Blocks UI (Enhanced for vibrancy and UX)
 with gr.Blocks(css=custom_css) as demo:
     # Header
-    gr.Markdown("<div id='title'>GoEmotions BERT Classifier</div>", elem_id="title")
+    gr.Markdown(
+        "<div id='title'>GoEmotions BERT Classifier</div>",
+        elem_id="title"
+    )
     gr.Markdown(
         """
         <div id='description'>
-        Predict emotions from text using a fine-tuned BERT model. 
-        Enter your text below to see detected emotions, their confidence scores, and a comparison with the top 5 emotions.
+        Discover the emotions in your text with our fine-tuned BERT model! 
+        Type your thoughts below, adjust the confidence threshold, and explore the detected emotions with a vibrant visualization.
         </div>
         """,
         elem_id="description"
@@ -244,31 +272,57 @@ with gr.Blocks(css=custom_css) as demo:
     # Input Section
     with gr.Group():
         text_input = gr.Textbox(
-            label="Enter Your Text",
-            placeholder="Type something like 'I’m just chilling today'...",
-            lines=2,
-            show_label=True
+            label="Share Your Thoughts",
+            placeholder="Try something like 'I’m super excited today!' or 'This is so annoying...'",
+            lines=3,
+            show_label=True,
+            elem_classes=["input-textbox"]
         )
         confidence_slider = gr.Slider(
             minimum=0.0,
             maximum=0.9,
             value=0.0,
             step=0.05,
-            label="Minimum Confidence Threshold",
-            info="Filter predictions below this confidence level (default thresholds still apply)"
+            label="Confidence Threshold",
+            info="Filter emotions below this confidence level (default thresholds apply)",
+            elem_classes=["input-slider"]
         )
-        submit_btn = gr.Button("Predict Emotions")
+        submit_btn = gr.Button("Analyze Emotions", variant="primary")
     
     # Output Section
     with gr.Group():
-        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 Comparison")
+        with gr.Row():
+            with gr.Column(scale=1):
+                processed_text_output = gr.Textbox(
+                    label="Processed Text",
+                    lines=1,
+                    interactive=False,
+                    elem_classes=["output-textbox"]
+                )
+                thresholded_output = gr.Textbox(
+                    label="Detected Emotions (Above Threshold)",
+                    lines=4,
+                    interactive=False,
+                    elem_classes=["output-textbox"]
+                )
+                top_5_output = gr.Textbox(
+                    label="Top 5 Emotions",
+                    lines=4,
+                    interactive=False,
+                    elem_classes=["output-textbox"]
+                )
+            with gr.Column(scale=1):
+                output_plot = gr.Plot(
+                    label="Emotion Confidence Visualization",
+                    elem_classes=["output-plot"]
+                )
     
     # Example carousel
     with gr.Group():
-        gr.Markdown("<div id='examples-title'>Try These Examples</div>", elem_id="examples-title")
+        gr.Markdown(
+            "<div id='examples-title'>Explore Example Texts</div>",
+            elem_id="examples-title"
+        )
         examples = gr.Examples(
             examples=[
                 ["I’m thrilled to win this award! 😄", "Joy Example"],
@@ -285,7 +339,7 @@ with gr.Blocks(css=custom_css) as demo:
     gr.HTML(
         """
         <footer>
-            Built by logasanjeev | 
+            Created by logasanjeev | 
             <a href="https://huggingface.co/logasanjeev/goemotions-bert">Model Card</a> | 
             <a href="https://www.kaggle.com/code/ravindranlogasanjeev/evaluation-logasanjeev-goemotions-bert/notebook">Kaggle Notebook</a>
         </footer>