Update app.py

app.py

@@ -13,63 +13,71 @@ except Exception as e:
     sentiment_analyzer = None
     model_loaded_successfully = False
 
-# --- Custom CSS for a unique look ---
+# --- Custom CSS for a dark look inspired by the website ---
 custom_css = """
 body {
-    background-color: #f0f2f5; /* Light grey background */
+    background-color: #121212; /* Dark background */
+    color: #f8f8f2; /* Light text */
 }
 .gradio-container {
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 15px;
+    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
     overflow: hidden;
-    background-color: #ffffff; /* White card background */
+    background-color: #1e1e1e; /* Darker card background */
+    padding: 20px;
+    margin-bottom: 20px;
 }
 h1, h2, h3 {
-    color: #4CAF50; /* Green accents */
+    color: #80cbc4; /* Teal/Cyan accents */
     text-align: center;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     animation: fadeIn 1s ease-in-out;
 }
 .gr-button.primary {
-    background-color: #4CAF50 !important;
-    color: white !important;
-    border-radius: 8px;
+    background-color: #80cbc4 !important;
+    color: #1e1e1e !important;
+    border-radius: 6px;
     transition: background-color 0.3s ease;
+    padding: 10px 20px;
 }
 .gr-button.primary:hover {
-    background-color: #45a049 !important;
+    background-color: #26a69a !important;
 }
 .gradio-output {
-    border: 1px solid #e0e0e0;
-    border-radius: 10px;
+    border: 1px solid #424242;
+    border-radius: 8px;
     padding: 15px;
-    margin-top: 20px;
-    background-color: #f9f9f9;
+    margin-top: 15px;
+    background-color: #212121;
+    color: #f8f8f2;
 }
 .sentiment-display {
     text-align: center;
     padding: 10px;
-    border-radius: 8px;
-    margin-top: 15px;
-    font-size: 1.2em;
+    border-radius: 6px;
+    margin-top: 10px;
+    font-size: 1.1em;
     font-weight: bold;
 }
 .sentiment-positive {
-    background-color: #e6ffe6; /* Light green */
-    color: #28a745; /* Darker green */
+    background-color: #388e3c; /* Darker green */
+    color: #e8f5e9; /* Light green */
 }
 .sentiment-negative {
-    background-color: #ffe6e6; /* Light red */
-    color: #dc3545; /* Darker red */
+    background-color: #d32f2f; /* Darker red */
+    color: #ffebee; /* Light red */
 }
 .sentiment-neutral {
-    background-color: #e6f7ff; /* Light blue */
-    color: #007bff; /* Darker blue */
+    background-color: #1976d2; /* Darker blue */
+    color: #e3f2fd; /* Light blue */
 }
 @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
 }
+gr-textbox > label {
+    color: #80cbc4;
+}
 """
 
 # --- Helper Function for Sentiment Interpretation ---
@@ -78,18 +86,15 @@ def interpret_sentiment(label, score):
     description = ""
     color_class = ""
 
-    # IMPORTANT: Adjust 'LABEL_0', 'LABEL_1', 'LABEL_2' to your model's actual output labels
-    # Check your model's config.json on Hugging Face Hub under 'id2label' or 'label2id'
-    # Example: "id2label": {"0": "negative", "1": "neutral", "2": "positive"}
-    if label.lower() == "positive" or label.lower() == "label_2": # Assuming LABEL_2 is positive
+    if label.lower() == "positive" or label.lower() == "label_2":
         emoji = "😊"
         description = "This text expresses a **highly positive** sentiment." if score > 0.9 else "This text expresses a **positive** sentiment."
         color_class = "sentiment-positive"
-    elif label.lower() == "negative" or label.lower() == "label_0": # Assuming LABEL_0 is negative
+    elif label.lower() == "negative" or label.lower() == "label_0":
         emoji = "😠"
         description = "This text expresses a **highly negative** sentiment." if score > 0.9 else "This text expresses a **negative** sentiment."
         color_class = "sentiment-negative"
-    elif label.lower() == "neutral" or label.lower() == "label_1": # Assuming LABEL_1 is neutral
+    elif label.lower() == "neutral" or label.lower() == "label_1":
         emoji = "😐"
         description = "This text expresses a **neutral** sentiment."
         color_class = "sentiment-neutral"
@@ -97,7 +102,7 @@ def interpret_sentiment(label, score):
         emoji = "❓"
         description = "Could not confidently determine sentiment. Unexpected label."
         color_class = ""
-    
+
     return f"<div class='sentiment-display {color_class}'>{emoji} {label.upper()} ({score:.2f})</div>" + \
            f"<p>{description}</p>"
 
@@ -118,11 +123,11 @@ def analyze_sentiment(text):
         }
 
     try:
-        results = sentiment_analyzer(text)[0] 
+        results = sentiment_analyzer(text)[0]
 
         results_sorted = sorted(results, key=lambda x: x['score'], reverse=True)
 
-        top_sentiment = results_sorted[0]
+        top_sentiment = results_sorted(0)
         label = top_sentiment['label']
         score = top_sentiment['score']
 
@@ -143,60 +148,53 @@ def analyze_sentiment(text):
         }
 
 # --- Gradio Interface ---
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# ✨ Sentiment Spark ��")
-    gr.Markdown("---")
-    gr.Markdown("### Uncover the emotional tone of your English text instantly!")
-
-    with gr.Row():
-        with gr.Column(scale=2):
-            text_input = gr.Textbox(
-                lines=7,
-                placeholder="Type your English text here...",
-                label="Your Text",
-                interactive=True,
-                value="This movie was absolutely brilliant! A masterpiece of storytelling and emotion."
-            )
-            analyze_btn = gr.Button("Analyze Sentiment", variant="primary")
-
-            # --- Define outputs BEFORE gr.Examples ---
-            # These variables need to exist before they are referenced in gr.Examples
-            gr.Markdown("## 📈 Analysis Results 📉")
-            overall_sentiment_output = gr.HTML(label="Overall Sentiment")
-            confidence_scores_output = gr.Label(num_top_classes=3, label="Confidence Scores")
-            raw_output = gr.JSON(label="Raw Model Output", visible=False)
-            # ----------------------------------------
-
-            gr.Markdown("---")
-            gr.Markdown("### Try some examples:")
-            gr.Examples(
-                examples=[
-                    ["This product exceeded my expectations, truly amazing!"],
-                    ["I found the customer service to be quite disappointing and slow."],
-                    ["The weather forecast predicts light rain for tomorrow morning."],
-                    ["What a fantastic experience! Highly recommend it."],
-                    ["I'm so frustrated with this slow internet connection."],
-                    ["The meeting concluded without any major decisions."]
-                ],
-                inputs=text_input,
-                fn=analyze_sentiment, # Function to run for examples
-                outputs=[overall_sentiment_output, confidence_scores_output, raw_output], # Outputs for examples
-                cache_examples=True # Caching examples for faster loading
-            )
-
-
-    # --- Event Listeners ---
-    text_input.change(
+with gr.Blocks(css=custom_css, theme=gr.themes.BaseDark()) as demo:
+    gr.Markdown("<h1 style='color: #80cbc4; text-align: center;'>🌌 Sentiment Analyzer 🌌</h1>")
+    gr.Markdown("<p style='color: #f8f8f2; text-align: center;'>Uncover the emotional tone of your English text instantly.</p>")
+
+    with gr.Column(elem_classes="gradio-container"):
+        text_input = gr.Textbox(
+            lines=7,
+            placeholder="Type your English text here...",
+            label="Your Text",
+            interactive=True,
+            value="This movie was absolutely brilliant! A masterpiece of storytelling and emotion."
+        )
+        analyze_btn = gr.Button("Analyze Sentiment", variant="primary")
+
+        gr.Markdown("<hr style='border-top: 1px solid #424242;'>")
+        gr.Markdown("<h3 style='color: #80cbc4; text-align: center;'>Try some examples:</h3>")
+        examples = gr.Examples(
+            examples=[
+                ["This product exceeded my expectations, truly amazing!"],
+                ["I found the customer service to be quite disappointing and slow."],
+                ["The weather forecast predicts light rain for tomorrow morning."],
+                ["What a fantastic experience! Highly recommend it."],
+                ["I'm so frustrated with this slow internet connection."],
+                ["The meeting concluded without any major decisions."]
+            ],
+            inputs=text_input,
+            fn=analyze_sentiment,
+            outputs=[gr.HTML(label="Overall Sentiment"), gr.Label(num_top_classes=3, label="Confidence Scores"), gr.JSON(label="Raw Model Output", visible=False)],
+            cache_examples=True
+        )
+
+        gr.Markdown("<hr style='border-top: 1px solid #424242;'>")
+        gr.Markdown("<h2 style='color: #80cbc4;'>📊 Analysis Results</h2>")
+        overall_sentiment_output = gr.HTML(label="Overall Sentiment")
+        confidence_scores_output = gr.Label(num_top_classes=3, label="Confidence Scores")
+        raw_output = gr.JSON(label="Raw Model Output", visible=False)
+
+    analyze_btn.click(
         fn=analyze_sentiment,
         inputs=text_input,
-        outputs=[overall_sentiment_output, confidence_scores_output, raw_output],
-        # live=True
+        outputs=[overall_sentiment_output, confidence_scores_output, raw_output]
     )
-    analyze_btn.click(
+    text_input.change(
         fn=analyze_sentiment,
         inputs=text_input,
-        outputs=[overall_sentiment_output, confidence_scores_output, raw_output]
+        outputs=[overall_sentiment_output, confidence_scores_output, raw_output],
+        # live=True # Puedes descomentar si quieres actualizaciones en vivo (consume más recursos)
     )
 
-# Launch the Gradio application
 demo.launch()