Update app.py

app.py

@@ -106,7 +106,7 @@ def predict_emotions_with_details(text, confidence_threshold=0.0):
             barmode="group",
             title="Emotion Confidence Comparison",
             height=400,
-            color_discrete_map={"Above Threshold": "#ff6b6b", "Top 5": "#4ecdc4"}
+            color_discrete_map={"Above Threshold": "#6366f1", "Top 5": "#10b981"}
         )
         fig.update_traces(texttemplate='%{y:.2f}', textposition='auto')
         fig.update_layout(
@@ -117,142 +117,195 @@ def predict_emotions_with_details(text, confidence_threshold=0.0):
             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)",
-            font=dict(color="#e0e0e0")
+            font=dict(color="#e5e7eb")
         )
     
     return processed_text, thresholded_output, top_5_output, fig
 
-# Enhanced CSS with vibrant colors, animations, and better UX
+# Enhanced CSS with modern design
 custom_css = """
 body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    background: linear-gradient(145deg, #1a1a3d 0%, #2e2e5c 100%);
-    color: #e6e6fa;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+    color: #e5e7eb;
     margin: 0;
-    padding: 20px;
+    padding: 24px;
     min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
+
 .gr-panel {
-    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: 900px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    transition: transform 0.3s ease;
+    border-radius: 16px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+    background: rgba(31, 41, 55, 0.9);
+    backdrop-filter: blur(12px);
+    padding: 32px;
+    margin: 24px auto;
+    max-width: 960px;
+    width: 100%;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
+
 .gr-panel:hover {
-    transform: translateY(-5px);
+    transform: translateY(-4px);
+    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
 }
+
 .gr-button {
     border-radius: 8px;
-    padding: 12px 30px;
+    padding: 12px 32px;
     font-weight: 600;
-    background: linear-gradient(90deg, #ff6b6b 0%, #ff8e53 100%);
-    color: white;
+    font-size: 16px;
+    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
+    color: #ffffff;
     border: none;
     transition: all 0.3s ease;
     cursor: pointer;
-    margin-top: 15px;
+    margin-top: 16px;
 }
+
 .gr-button:hover {
-    background: linear-gradient(90deg, #ff8e53 0%, #ff6b6b 100%);
-    transform: scale(1.05);
-    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
+    background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
+}
+
+.gr-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
 }
+
 .gr-textbox, .gr-slider {
-    margin-bottom: 20px;
+    margin-bottom: 24px;
 }
+
 .gr-textbox label, .gr-slider label {
-    font-size: 1.1em;
+    font-size: 16px;
     font-weight: 600;
-    color: #e6e6fa;
+    color: #e5e7eb;
     margin-bottom: 8px;
     display: block;
 }
+
 .gr-textbox textarea, .gr-textbox input {
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 6px;
-    padding: 10px;
-    font-size: 1em;
-    background: rgba(255, 255, 255, 0.1);
-    color: #e6e6fa;
-    transition: border-color 0.3s ease;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    padding: 12px;
+    font-size: 16px;
+    background: rgba(55, 65, 81, 0.5);
+    color: #e5e7eb;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
+
 .gr-textbox textarea:focus, .gr-textbox input:focus {
-    border-color: #ff6b6b;
+    border-color: #6366f1;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
     outline: none;
 }
+
 #title {
-    font-size: 2.2em;
-    font-weight: 700;
+    font-size: 2.5rem;
+    font-weight: 800;
     color: #ffffff;
     text-align: center;
-    margin: 40px 0 15px 0;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    margin: 32px 0 16px 0;
+    background: linear-gradient(90deg, #6366f1, #8b5cf6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
+
 #description {
-    font-size: 1.1em;
-    color: #d3d3fa;
+    font-size: 1.125rem;
+    color: #d1d5db;
     text-align: center;
-    max-width: 700px;
-    margin: 0 auto 40px auto;
-    line-height: 1.5;
+    max-width: 720px;
+    margin: 0 auto 48px auto;
+    line-height: 1.75;
 }
+
 #examples-title {
-    font-size: 1.3em;
+    font-size: 1.25rem;
     font-weight: 600;
-    color: #e6e6fa;
-    margin: 30px 0 15px 0;
+    color: #e5e7eb;
+    margin: 32px 0 16px 0;
     text-align: center;
 }
+
 footer {
     text-align: center;
-    margin: 40px 0;
-    padding: 20px;
-    font-size: 1em;
-    color: #d3d3fa;
+    margin: 48px 0 24px 0;
+    padding: 16px;
+    font-size: 14px;
+    color: #d1d5db;
 }
+
 footer a {
-    color: #ff6b6b;
+    color: #6366f1;
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s ease;
 }
+
 footer a:hover {
-    color: #ff8e53;
+    color: #8b5cf6;
 }
+
 .gr-plot {
-    margin-top: 20px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-    padding: 15px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    margin-top: 24px;
+    background: rgba(31, 41, 55, 0.5);
+    border-radius: 12px;
+    padding: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
+
 .gr-examples .example {
-    background: rgba(255, 255, 255, 0.12);
-    border-radius: 8px;
-    padding: 12px;
-    margin: 8px 0;
+    background: rgba(55, 65, 81, 0.7);
+    border-radius: 10px;
+    padding: 16px;
+    margin: 12px 0;
     transition: all 0.3s ease;
     cursor: pointer;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
+
 .gr-examples .example:hover {
-    background: rgba(255, 107, 107, 0.2);
-    transform: translateY(-3px);
+    background: rgba(99, 102, 241, 0.15);
+    transform: translateY(-2px);
+    border-color: #6366f1;
 }
+
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px); }
+    from { opacity: 0; transform: translateY(16px); }
     to { opacity: 1; transform: translateY(0); }
 }
-.gr-panel, #title, #description, footer {
-    animation: fadeIn 0.5s ease-out;
+
+.gr-panel, #title, #description, footer, .gr-examples .example {
+    animation: fadeIn 0.6s ease-out;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .gr-panel {
+        padding: 24px;
+        margin: 16px;
+    }
+    #title {
+        font-size: 2rem;
+    }
+    #description {
+        font-size: 1rem;
+    }
+    .gr-button {
+        padding: 10px 24px;
+        font-size: 14px;
+    }
 }
 """
 
-# Gradio Blocks UI (Enhanced for vibrancy and UX)
+# Gradio Blocks UI (Modernized)
 with gr.Blocks(css=custom_css) as demo:
     # Header
     gr.Markdown(
@@ -262,8 +315,8 @@ with gr.Blocks(css=custom_css) as demo:
     gr.Markdown(
         """
         <div id='description'>
-        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.
+        Uncover the emotions in your text with our fine-tuned BERT model, trained on the GoEmotions dataset. 
+        Enter your text, fine-tune the confidence threshold, and visualize the results in a sleek, interactive chart.
         </div>
         """,
         elem_id="description"
@@ -271,23 +324,26 @@ with gr.Blocks(css=custom_css) as demo:
     
     # Input Section
     with gr.Group():
-        text_input = gr.Textbox(
-            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="Confidence Threshold",
-            info="Filter emotions below this confidence level (default thresholds apply)",
-            elem_classes=["input-slider"]
-        )
-        submit_btn = gr.Button("Analyze Emotions", variant="primary")
+        with gr.Row():
+            with gr.Column(scale=3):
+                text_input = gr.Textbox(
+                    label="Enter Your Text",
+                    placeholder="Try: 'I'm over the moon today!' or 'This is so frustrating... 😣'",
+                    lines=4,
+                    show_label=True,
+                    elem_classes=["input-textbox"]
+                )
+            with gr.Column(scale=1):
+                confidence_slider = gr.Slider(
+                    minimum=0.0,
+                    maximum=0.9,
+                    value=0.0,
+                    step=0.05,
+                    label="Confidence Threshold",
+                    info="Filter emotions below this confidence level",
+                    elem_classes=["input-slider"]
+                )
+                submit_btn = gr.Button("Analyze Emotions", variant="primary")
     
     # Output Section
     with gr.Group():
@@ -295,23 +351,23 @@ with gr.Blocks(css=custom_css) as demo:
             with gr.Column(scale=1):
                 processed_text_output = gr.Textbox(
                     label="Processed Text",
-                    lines=1,
+                    lines=2,
                     interactive=False,
                     elem_classes=["output-textbox"]
                 )
                 thresholded_output = gr.Textbox(
                     label="Detected Emotions (Above Threshold)",
-                    lines=4,
+                    lines=5,
                     interactive=False,
                     elem_classes=["output-textbox"]
                 )
                 top_5_output = gr.Textbox(
                     label="Top 5 Emotions",
-                    lines=4,
+                    lines=5,
                     interactive=False,
                     elem_classes=["output-textbox"]
                 )
-            with gr.Column(scale=1):
+            with gr.Column(scale=2):
                 output_plot = gr.Plot(
                     label="Emotion Confidence Visualization",
                     elem_classes=["output-plot"]
@@ -320,7 +376,7 @@ with gr.Blocks(css=custom_css) as demo:
     # Example carousel
     with gr.Group():
         gr.Markdown(
-            "<div id='examples-title'>Explore Example Texts</div>",
+            "<div id='examples-title'>Try These Examples</div>",
             elem_id="examples-title"
         )
         examples = gr.Examples(
@@ -340,8 +396,8 @@ with gr.Blocks(css=custom_css) as demo:
         """
         <footer>
             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>
+            <a href="https://huggingface.co/logasanjeev/emotion-analyzer-bert">Model Card</a> | 
+            <a href="https://www.kaggle.com/code/ravindranlogasanjeev/evaluation-logasanjeev-emotion-analyzer-bert/notebook">Kaggle Notebook</a>
         </footer>
         """
     )