Update app.py

app.py

@@ -20,112 +20,187 @@ except Exception as e:
     model_loaded_successfully = False
     print("Sentiment analysis model failed to load. Please check MODEL_ID and network connection.")
 
-# --- Custom CSS with the NEW COLOR PALETTE ---
+# --- Custom CSS with the NEW COLOR PALETTE and MAXIMUM COMPACTNESS ---
 custom_css = """
+/* RESETEO BÁSICO Y FONDOS GENERALES */
 body {
     background-color: #1E2B38; /* Fondo General Oscuro */
     color: #FFFFFF; /* Blanco para texto principal */
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    padding: 0;
+    margin: 0;
+    overflow: hidden; /* Ocultar scrollbar si hay un pequeño desbordamiento */
+    height: 100vh; /* Asegurar que el body ocupe toda la altura del viewport */
+    display: flex;
+    flex-direction: column;
 }
+
+/* CONTENEDOR PRINCIPAL DE GRADIO */
 .gradio-container {
-    box-shadow: 0 4px 8px rgba(0, 122, 204, 0.2); /* Sombra con Azul Oscuro */
-    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 122, 204, 0.1); /* Sombra más sutil */
+    border-radius: 6px; /* Borde más pequeño */
     overflow: hidden;
-    background-color: #1E2B38; /* Fondo de la tarjeta, coincide con el body para un look unificado */
-    padding: 20px;
-    margin-bottom: 20px;
+    background-color: #1E2B38; /* Fondo de la tarjeta, coincide con el body */
+    padding: 10px; /* Reducir padding general del contenedor */
+    margin-bottom: 5px; /* Reducir margen inferior */
     border: 1px solid #007ACC; /* Borde sutil con Azul Oscuro */
+    flex-grow: 1; /* Permite que el contenedor ocupe el espacio disponible */
+    display: flex;
+    flex-direction: column;
 }
+
+/* AJUSTES DE TÍTULOS Y PÁRRAFOS */
 h1, h2, h3 {
     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 */
+    margin-top: 5px; /* Margen superior muy pequeño */
+    margin-bottom: 8px; /* Margen inferior reducido */
+    font-size: 1.4em; /* h1 más pequeño */
 }
+h2 { font-size: 1.1em; } /* h2 más pequeño */
+h3 { font-size: 0.95em; } /* h3 más pequeño, casi texto normal */
+
 p {
     color: #AAB7C4; /* Gris medio para texto secundario */
     text-align: center;
-    margin-bottom: 20px; /* Margen debajo de los párrafos */
+    margin-bottom: 10px; /* Margen debajo de los párrafos reducido */
+    font-size: 0.8em; /* Tamaño de fuente más pequeño para párrafos */
+    line-height: 1.3; /* Espaciado entre líneas para legibilidad */
 }
+
+/* COMPONENTES DE ENTRADA (TEXTBOX) */
 .gr-textbox label, .gradio-output .label {
-    color: #AAB7C4 !important; /* Gris medio para las etiquetas de los componentes */
+    color: #AAB7C4 !important; /* Gris medio para las etiquetas */
     font-weight: bold;
+    font-size: 0.85em; /* Etiqueta más pequeña */
+    margin-bottom: 3px; /* Espacio mínimo entre etiqueta y caja */
 }
 .gr-textbox textarea {
-    background-color: #007ACC20; /* Azul Oscuro muy transparente para el fondo del textarea */
+    background-color: rgba(0, 122, 204, 0.1); /* Azul Oscuro muy transparente */
     border: 1px solid #007ACC; /* Borde con Azul Oscuro */
     color: #FFFFFF; /* Texto blanco en el textarea */
-    border-radius: 6px;
-    padding: 10px;
+    border-radius: 5px; /* Bordes más pequeños */
+    padding: 6px; /* Reducir padding del textarea */
+    font-size: 0.9em; /* Fuente más pequeña en el textarea */
 }
+
+/* BOTONES PRINCIPALES */
 .gr-button.primary {
     background-color: #00BFFF !important; /* Azul Brillante para el botón primario */
     color: #1E2B38 !important; /* Texto oscuro para el botón primario */
-    border-radius: 6px;
+    border-radius: 5px;
     transition: background-color 0.3s ease;
-    padding: 12px 25px; /* Ajuste de padding para el botón */
-    font-size: 1.1em;
+    padding: 7px 12px; /* Padding más pequeño del botón */
+    font-size: 0.9em; /* Un poco más pequeño para el botón */
     font-weight: bold;
-    margin-top: 15px; /* Margen superior para separar del textarea */
+    margin-top: 8px; /* Reducir margen superior */
+    margin-bottom: 5px; /* Añadir un pequeño margen inferior */
 }
 .gr-button.primary:hover {
     background-color: #007ACC !important; /* Azul Oscuro al pasar el ratón */
     color: #FFFFFF !important; /* Texto blanco al pasar el ratón */
 }
+
+/* COMPONENTES DE SALIDA (HTML, LABEL, JSON) */
 .gradio-output {
     border: 1px solid #4A5B6C; /* Borde sutil con Gris Claro */
-    border-radius: 8px;
-    padding: 15px;
-    margin-top: 15px;
-    background-color: #007ACC15; /* Fondo más sutil para la salida */
+    border-radius: 5px; /* Borde más pequeño */
+    padding: 8px; /* Reducir padding de la salida */
+    margin-top: 8px; /* Reducir margen superior */
+    background-color: rgba(0, 122, 204, 0.08); /* Fondo más sutil para la salida */
     color: #FFFFFF; /* Texto blanco en la salida */
+    flex-grow: 1; /* Permitir que ocupe el espacio restante */
+    display: flex;
+    flex-direction: column;
+    justify-content: center; /* Centrar verticalmente el contenido */
+    min-height: 80px; /* Altura mínima para asegurar visibilidad */
+}
+.gradio-output .label-text {
+    color: #00BFFF !important; /* Color de acento para el texto del label (LABEL_1, LABEL_0, etc.) */
+    font-weight: bold;
 }
+.gradio-output .label-score {
+    color: #FFFFFF !important; /* Blanco para el score del label */
+}
+.gradio-output .label-container {
+    padding-bottom: 5px !important; /* Reducir padding entre elementos del label */
+}
+
+/* DISPLAY DE SENTIMIENTO (DENTRO DE HTML OUTPUT) */
 .sentiment-display {
     text-align: center;
-    padding: 10px;
-    border-radius: 6px;
-    margin-top: 10px;
-    font-size: 1.2em; /* Un poco más grande para el resultado principal */
+    padding: 6px; /* Reducir padding */
+    border-radius: 4px; /* Borde más pequeño */
+    margin-top: 3px; /* Margen muy pequeño */
+    font-size: 1em; /* Un poco más pequeño */
     font-weight: bold;
     color: #FFFFFF; /* Texto blanco para todos los sentimientos */
 }
-.sentiment-positive {
-    background-color: #28a745; /* Verde Bootstrap similar */
-}
-.sentiment-negative {
-    background-color: #dc3545; /* Rojo Bootstrap similar */
-}
-.sentiment-neutral {
-    background-color: #007BFF; /* Azul Bootstrap similar */
+.sentiment-display p { /* Estilo específico para el párrafo de descripción */
+    font-size: 0.75em; /* Tamaño más pequeño para la descripción */
+    margin-top: 3px;
+    margin-bottom: 0;
+    line-height: 1.2;
 }
+.sentiment-positive { background-color: #28a745; } /* Mantener estos colores por claridad de sentimiento */
+.sentiment-negative { background-color: #dc3545; }
+.sentiment-neutral { background-color: #007BFF; }
+
+/* EJEMPLOS */
 .gradio-example-highlighted {
-    background-color: #00BFFF20 !important; /* Un poco de azul brillante para ejemplos seleccionados */
+    background-color: rgba(0, 191, 255, 0.1) !important; /* Azul Brillante transparente */
     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;
+    border-radius: 3px; /* Borde más pequeño */
+    padding: 5px 8px; /* Padding más pequeño */
+    margin: 2px; /* Margen mínimo entre botones */
     transition: background-color 0.3s ease;
+    font-size: 0.75em; /* Tamaño de fuente más pequeño para los ejemplos */
+    white-space: nowrap; /* Evitar que el texto se rompa en varias líneas */
+    flex-shrink: 0; /* No permitir que se encojan si hay poco espacio */
 }
 .gradio-example-button:hover {
     background-color: #007ACC !important; /* Azul Oscuro al pasar el ratón por los ejemplos */
     border-color: #00BFFF !important;
 }
+.example-buttons-row {
+    flex-wrap: wrap; /* Permitir que los botones se envuelvan si no hay suficiente ancho */
+    justify-content: center; /* Centrar los botones de ejemplo */
+    margin-bottom: 5px !important; /* Reducir margen inferior */
+}
+
+
+/* LÍNEAS DIVISORIAS */
 hr {
     border-top: 1px solid #4A5B6C; /* Línea divisoria con Gris Claro */
-    margin-top: 25px;
-    margin-bottom: 25px;
+    margin-top: 10px; /* Reducir margen superior */
+    margin-bottom: 10px; /* Reducir margen inferior */
 }
+
+/* ANIMACIÓN */
 @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
 }
+
+/* OCULTAR EL PIE DE PÁGINA DE GRADIO (CRUCIAL PARA IFRAMES PEQUEÑOS) */
+footer {
+    opacity: 0; /* Hacerlo invisible */
+    height: 0 !important; /* Eliminar su altura */
+    margin: 0 !important; /* Eliminar sus márgenes */
+    padding: 0 !important; /* Eliminar su padding */
+    pointer-events: none; /* No interactuable */
+    visibility: hidden; /* Asegurar que no ocupe espacio visual */
+}
+.gradio-app > div > :last-child:not(.gradio-container) { /* Apuntar al elemento del pie de página */
+    display: none !important; /* Otra forma de ocultar completamente si lo anterior no funciona */
+}
 """
 
 # --- Helper Function for Sentiment Interpretation ---
@@ -138,36 +213,36 @@ def interpret_sentiment(label, score):
     # '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."
+        description = "Positive sentiment detected." # Mensaje más corto
         color_class = "sentiment-positive"
     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."
+        description = "Negative sentiment detected." # Mensaje más corto
         color_class = "sentiment-negative"
     elif label.lower() == "neutral" or label.lower() == "label_1":
         emoji = "😐"
-        description = "This text expresses a **neutral** sentiment."
+        description = "Neutral sentiment detected." # Mensaje más corto
         color_class = "sentiment-neutral"
     else:
         emoji = "❓"
-        description = "Could not confidently determine sentiment. Unexpected label."
+        description = "Sentiment not determined." # Mensaje más corto
         color_class = ""
     
     return f"<div class='sentiment-display {color_class}'>{emoji} {label.upper()} ({score:.2f})</div>" + \
-           f"<p style='color: #FFFFFF;'>{description}</p>" # Asegurar que la descripción también sea blanca
+           f"<p style='color: #FFFFFF; font-size: 0.75em; margin-top: 3px; margin-bottom: 0;'>{description}</p>" # Asegurar que la descripción sea pequeña
 
 # --- Sentiment Analysis Function ---
 def analyze_sentiment(text):
     if not model_loaded_successfully:
         return ( 
-            "<div class='sentiment-display'>⚠️ Model Not Loaded ⚠️</div><p style='color: #FFFFFF;'>Please contact the administrator. The sentiment analysis model failed to load.</p>",
+            "<div class='sentiment-display'>⚠️ Model Error ⚠️</div><p style='color: #FFFFFF; font-size: 0.75em;'>Model not loaded.</p>", # Mensaje más corto
             {}, 
             {"error": "Model loading failed."} 
         )
 
     if not text.strip():
         return ( 
-            "<div class='sentiment-display'>✍️ Please enter some text! ✍️</div><p style='color: #FFFFFF;'>Start typing to analyze its sentiment.</p>",
+            "<div class='sentiment-display'>✍️ Enter text ✍️</div><p style='color: #FFFFFF; font-size: 0.75em;'>Type text to analyze.</p>", # Mensaje más corto
             {}, 
             {"info": "No text entered."} 
         )
@@ -189,7 +264,7 @@ def analyze_sentiment(text):
         
     except Exception as e:
         return ( 
-            f"<div class='sentiment-display'>❌ Error ❌</div><p style='color: #FFFFFF;'>An error occurred during analysis: {e}</p>",
+            f"<div class='sentiment-display'>❌ Error ❌</div><p style='color: #FFFFFF; font-size: 0.75em;'>Analysis failed.</p>", # Mensaje más corto
             {}, 
             {"error_message": str(e)} 
         )
@@ -197,11 +272,11 @@ def analyze_sentiment(text):
 # --- Gradio Interface ---
 with gr.Blocks(css=custom_css, theme=None) as demo: 
     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>")
+    gr.Markdown("<p style='color: #AAB7C4;'>Analyze the emotional tone of your English text.</p>") # Párrafo más corto
 
     with gr.Column(elem_classes="gradio-container"):
         text_input = gr.Textbox(
-            lines=7,
+            lines=2, # REDUCIDO A 2 LÍNEAS
             placeholder="Type your English text here...",
             label="Your Text",
             interactive=True,
@@ -210,29 +285,30 @@ with gr.Blocks(css=custom_css, theme=None) as demo:
         analyze_btn = gr.Button("Analyze Sentiment", variant="primary")
 
         gr.Markdown("<hr>")
-        gr.Markdown("<h3 style='color: #00BFFF;'>Try some examples:</h3>")
+        gr.Markdown("<h3 style='color: #00BFFF;'>Try examples:</h3>") # Título de ejemplos más corto
         
-        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=False 
-        )
+        with gr.Row():
+            examples = gr.Examples(
+                examples=[
+                    ["Amazing product!"], # Ejemplos más cortos
+                    ["Very slow service."],
+                    ["Light rain tomorrow."],
+                    ["Fantastic experience!"],
+                    ["Frustrated with internet."],
+                    ["Meeting concluded."]
+                ],
+                inputs=text_input,
+                fn=analyze_sentiment,
+                outputs=[gr.HTML(label="Sentiment"), gr.Label(num_top_classes=3, label="Scores"), gr.JSON(label="Raw Output", visible=False)], # Labels de salida más cortos
+                cache_examples=False,
+                elem_classes="example-buttons-row" 
+            )
 
         gr.Markdown("<hr>")
-        gr.Markdown("<h2 style='color: #00BFFF;'>📊 Analysis Results</h2>")
+        gr.Markdown("<h2 style='color: #00BFFF;'>📊 Results</h2>") # Título de resultados más corto
         
         overall_sentiment_output = gr.HTML(label="Overall Sentiment")
         confidence_scores_output = gr.Label(num_top_classes=3, label="Confidence Scores")
-        # 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 ---
@@ -245,7 +321,7 @@ with gr.Blocks(css=custom_css, theme=None) as demo:
         fn=analyze_sentiment,
         inputs=text_input,
         outputs=[overall_sentiment_output, confidence_scores_output, raw_output],
-        # live=True # Puedes descomentar si quieres actualizaciones en vivo (consume más recursos)
+        # live=True 
     )
 
 # Launch the Gradio application