Update app.py

app.py

@@ -20,77 +20,112 @@ except Exception as e:
     model_loaded_successfully = False
     print("Sentiment analysis model failed to load. Please check MODEL_ID and network connection.")
 
-# --- Custom CSS for a dark look inspired by the website ---
-# Este CSS define todo el aspecto visual sin depender de un tema de Gradio
+# --- Custom CSS with the NEW COLOR PALETTE ---
 custom_css = """
 body {
-    background-color: #121212; /* Dark background */
-    color: #f8f8f2; /* Light text */
+    background-color: #1E2B38; /* Fondo General Oscuro */
+    color: #FFFFFF; /* Blanco para texto principal */
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 .gradio-container {
-    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 8px rgba(0, 122, 204, 0.2); /* Sombra con Azul Oscuro */
     border-radius: 10px;
     overflow: hidden;
-    background-color: #1e1e1e; /* Darker card background */
+    background-color: #1E2B38; /* Fondo de la tarjeta, coincide con el body para un look unificado */
     padding: 20px;
     margin-bottom: 20px;
+    border: 1px solid #007ACC; /* Borde sutil con Azul Oscuro */
 }
 h1, h2, h3 {
-    color: #80cbc4; /* Teal/Cyan accents */
+    color: #00BFFF; /* Azul Brillante para títulos */
     text-align: center;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     animation: fadeIn 1s ease-in-out;
+    margin-top: 5px; /* Reducir margen superior de títulos */
+    margin-bottom: 15px; /* Reducir margen inferior de títulos */
+}
+p {
+    color: #AAB7C4; /* Gris medio para texto secundario */
+    text-align: center;
+    margin-bottom: 20px; /* Margen debajo de los párrafos */
+}
+.gr-textbox label, .gradio-output .label {
+    color: #AAB7C4 !important; /* Gris medio para las etiquetas de los componentes */
+    font-weight: bold;
+}
+.gr-textbox textarea {
+    background-color: #007ACC20; /* Azul Oscuro muy transparente para el fondo del textarea */
+    border: 1px solid #007ACC; /* Borde con Azul Oscuro */
+    color: #FFFFFF; /* Texto blanco en el textarea */
+    border-radius: 6px;
+    padding: 10px;
 }
 .gr-button.primary {
-    background-color: #80cbc4 !important;
-    color: #1e1e1e !important;
+    background-color: #00BFFF !important; /* Azul Brillante para el botón primario */
+    color: #1E2B38 !important; /* Texto oscuro para el botón primario */
     border-radius: 6px;
     transition: background-color 0.3s ease;
-    padding: 10px 20px;
+    padding: 12px 25px; /* Ajuste de padding para el botón */
+    font-size: 1.1em;
+    font-weight: bold;
+    margin-top: 15px; /* Margen superior para separar del textarea */
 }
 .gr-button.primary:hover {
-    background-color: #26a69a !important;
+    background-color: #007ACC !important; /* Azul Oscuro al pasar el ratón */
+    color: #FFFFFF !important; /* Texto blanco al pasar el ratón */
 }
 .gradio-output {
-    border: 1px solid #424242;
+    border: 1px solid #4A5B6C; /* Borde sutil con Gris Claro */
     border-radius: 8px;
     padding: 15px;
     margin-top: 15px;
-    background-color: #212121;
-    color: #f8f8f2;
+    background-color: #007ACC15; /* Fondo más sutil para la salida */
+    color: #FFFFFF; /* Texto blanco en la salida */
 }
 .sentiment-display {
     text-align: center;
     padding: 10px;
     border-radius: 6px;
     margin-top: 10px;
-    font-size: 1.1em;
+    font-size: 1.2em; /* Un poco más grande para el resultado principal */
     font-weight: bold;
+    color: #FFFFFF; /* Texto blanco para todos los sentimientos */
 }
 .sentiment-positive {
-    background-color: #388e3c; /* Darker green */
-    color: #e8f5e9; /* Light green */
+    background-color: #28a745; /* Verde Bootstrap similar */
 }
 .sentiment-negative {
-    background-color: #d32f2f; /* Darker red */
-    color: #ffebee; /* Light red */
+    background-color: #dc3545; /* Rojo Bootstrap similar */
 }
 .sentiment-neutral {
-    background-color: #1976d2; /* Darker blue */
-    color: #e3f2fd; /* Light blue */
+    background-color: #007BFF; /* Azul Bootstrap similar */
+}
+.gradio-example-highlighted {
+    background-color: #00BFFF20 !important; /* Un poco de azul brillante para ejemplos seleccionados */
+    border: 1px solid #00BFFF !important;
+}
+.gradio-example-button {
+    background-color: #4A5B6C !important; /* Gris Claro para los botones de ejemplo */
+    color: #FFFFFF !important;
+    border: 1px solid #4A5B6C;
+    border-radius: 5px;
+    padding: 8px 12px;
+    margin: 5px;
+    transition: background-color 0.3s ease;
+}
+.gradio-example-button:hover {
+    background-color: #007ACC !important; /* Azul Oscuro al pasar el ratón por los ejemplos */
+    border-color: #00BFFF !important;
+}
+hr {
+    border-top: 1px solid #4A5B6C; /* Línea divisoria con Gris Claro */
+    margin-top: 25px;
+    margin-bottom: 25px;
 }
 @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
 }
-/* Estilos para las etiquetas de los componentes de entrada */
-gr-textbox > label {
-    color: #80cbc4;
-}
-/* Asegúrate de que las etiquetas de salida también tengan color */
-.gradio-output .label {
-    color: #80cbc4; /* Color de acento para las etiquetas de salida */
-}
 """
 
 # --- Helper Function for Sentiment Interpretation ---
@@ -99,6 +134,8 @@ def interpret_sentiment(label, score):
     description = ""
     color_class = ""
 
+    # Asegúrate de que las etiquetas coincidan con las salidas reales de tu modelo
+    # 'LABEL_0' es negativo, 'LABEL_1' es neutral, 'LABEL_2' es positivo
     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."
@@ -117,62 +154,50 @@ def interpret_sentiment(label, score):
         color_class = ""
     
     return f"<div class='sentiment-display {color_class}'>{emoji} {label.upper()} ({score:.2f})</div>" + \
-           f"<p>{description}</p>"
+           f"<p style='color: #FFFFFF;'>{description}</p>" # Asegurar que la descripción también sea blanca
 
 # --- Sentiment Analysis Function ---
 def analyze_sentiment(text):
     if not model_loaded_successfully:
-        # Devuelve 3 valores: HTML, dict, dict (para JSON)
         return ( 
-            "<div class='sentiment-display'>⚠️ Model Not Loaded ⚠️</div><p>Please contact the administrator. The sentiment analysis model failed to load.</p>",
-            {}, # Diccionario vacío para Confidence Scores
-            {"error": "Model loading failed."} # Diccionario de error para Raw Output JSON
+            "<div class='sentiment-display'>⚠️ Model Not Loaded ⚠️</div><p style='color: #FFFFFF;'>Please contact the administrator. The sentiment analysis model failed to load.</p>",
+            {}, 
+            {"error": "Model loading failed."} 
         )
 
     if not text.strip():
-        # Devuelve 3 valores: HTML, dict, dict (para JSON)
         return ( 
-            "<div class='sentiment-display'>✍️ Please enter some text! ✍️</div><p>Start typing to analyze its sentiment.</p>",
-            {}, # Diccionario vacío para Confidence Scores
-            {"info": "No text entered."} # Diccionario de info para Raw Output JSON
+            "<div class='sentiment-display'>✍️ Please enter some text! ✍️</div><p style='color: #FFFFFF;'>Start typing to analyze its sentiment.</p>",
+            {}, 
+            {"info": "No text entered."} 
         )
 
     try:
-        # Asegúrate de que la salida del pipeline es una lista de listas, y toma la primera.
         results = sentiment_analyzer(text)[0] 
 
-        # Ordenar los resultados por puntuación de confianza de mayor a menor
         results_sorted = sorted(results, key=lambda x: x['score'], reverse=True)
 
-        # Tomar el primer elemento (el de mayor confianza)
         top_sentiment = results_sorted[0] 
         label = top_sentiment['label']
         score = top_sentiment['score']
 
-        # Crear un diccionario de puntuaciones de confianza para la salida de la etiqueta
         confidence_scores_output = {item['label']: item['score'] for item in results}
 
-        # Generar el HTML para mostrar el sentimiento general
         overall_sentiment_display = interpret_sentiment(label, score)
 
-        # ¡CORRECCIÓN FINAL AQUÍ! Pasa 'results' directamente, no str(results)
-        # Gradio se encargará de serializar este objeto Python a JSON
         return (overall_sentiment_display, confidence_scores_output, results) 
         
     except Exception as e:
-        # En caso de cualquier error durante el análisis, devuelve 3 valores de error
         return ( 
-            f"<div class='sentiment-display'>❌ Error ❌</div><p>An error occurred during analysis: {e}</p>",
-            {}, # Diccionario vacío para Confidence Scores
-            {"error_message": str(e)} # Diccionario de error para Raw Output JSON
+            f"<div class='sentiment-display'>❌ Error ❌</div><p style='color: #FFFFFF;'>An error occurred during analysis: {e}</p>",
+            {}, 
+            {"error_message": str(e)} 
         )
 
 # --- Gradio Interface ---
-# Al establecer theme=None, Gradio no aplicará ningún tema predefinido.
-# Todo el estilo visual vendrá de nuestro `custom_css`.
 with gr.Blocks(css=custom_css, theme=None) 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>")
+    gr.Markdown("<h1 style='color: #00BFFF;'>🌌 Sentiment Analyzer 🌌</h1>")
+    gr.Markdown("<p style='color: #AAB7C4;'>Uncover the emotional tone of your English text instantly.</p>")
 
     with gr.Column(elem_classes="gradio-container"):
         text_input = gr.Textbox(
@@ -184,10 +209,9 @@ with gr.Blocks(css=custom_css, theme=None) as demo:
         )
         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>")
+        gr.Markdown("<hr>")
+        gr.Markdown("<h3 style='color: #00BFFF;'>Try some examples:</h3>")
         
-        # IMPORTANTE: Desactivamos cache_examples para evitar el FileNotFoundError
         examples = gr.Examples(
             examples=[
                 ["This product exceeded my expectations, truly amazing!"],
@@ -199,21 +223,19 @@ with gr.Blocks(css=custom_css, theme=None) as demo:
             ],
             inputs=text_input,
             fn=analyze_sentiment,
-            # Asegúrate de que estos 3 outputs coinciden con los 3 valores que devuelve 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=False # ESTE ES EL CAMBIO CLAVE PARA ELIMINAR EL FileNotFoundError
+            cache_examples=False 
         )
 
-        gr.Markdown("<hr style='border-top: 1px solid #424242;'>")
-        gr.Markdown("<h2 style='color: #80cbc4;'>📊 Analysis Results</h2>")
+        gr.Markdown("<hr>")
+        gr.Markdown("<h2 style='color: #00BFFF;'>📊 Analysis Results</h2>")
         
-        # Estas variables de salida deben coincidir en tipo y orden con lo que devuelve analyze_sentiment
         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)
+        # Deja Raw Model Output como visible=False para ahorrar espacio en el iframe por defecto
+        raw_output = gr.JSON(label="Raw Model Output", visible=False) 
 
     # --- Event Listeners ---
-    # Los outputs aquí también deben coincidir con los 3 valores que devuelve analyze_sentiment
     analyze_btn.click(
         fn=analyze_sentiment,
         inputs=text_input,