Update app.py

app.py

@@ -70,12 +70,14 @@ p {
 }
 
 /* COMPONENTES DE ENTRADA (TEXTBOX) */
+/* Selector para el label del textbox */
 .gr-textbox label, .gradio-output .label {
     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 */
 }
+/* Selector para el textarea del textbox */
 .gr-textbox textarea {
     background-color: rgba(0, 122, 204, 0.1); /* Azul Oscuro muy transparente */
     border: 1px solid #007ACC; /* Borde con Azul Oscuro */
@@ -83,11 +85,18 @@ p {
     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 */
+    resize: vertical; /* Permite redimensionar verticalmente */
+    min-height: 50px; /* Altura mínima */
+    white-space: pre-wrap; /* Permite saltos de línea y respeta espacios */
+    word-wrap: break-word; /* Rompe palabras largas */
+    overflow-wrap: break-word; /* Estándar más moderno */
 }
 
+
 /* BOTONES PRINCIPALES */
+/* Cambiado el color del botón primario */
 .gr-button.primary {
-    background-color: #00BFFF !important; /* Azul Brillante para el botón primario (Acento) */
+    background-color: #00BFFF !important; /* ¡Azul Brillante para el botón primario (Acento)! */
     color: #1E2B38 !important; /* Texto oscuro para el botón primario */
     border-radius: 5px;
     transition: background-color 0.3s ease;
@@ -138,18 +147,26 @@ p {
     font-size: 1em; /* Un poco más pequeño */
     font-weight: bold;
     color: #FFFFFF; /* Texto blanco para todos los sentimientos */
+    /* Asegurar que el texto se envuelva */
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
 }
 .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;
+    white-space: normal; /* Asegurar que el párrafo se envuelva */
+    word-wrap: break-word;
+    overflow-wrap: break-word;
 }
 .sentiment-positive { background-color: #28a745; } /* Mantener estos colores por claridad de sentimiento */
 .sentiment-negative { background-color: #dc3545; }
 .sentiment-neutral { background-color: #007BFF; }
 
 /* NUEVOS BOTONES DE EJEMPLO DIRECTOS (NO gr.Examples) */
+/* Ajustes para el texto de los botones de ejemplo */
 .example-button {
     background-color: #4A5B6C !important; /* Gris Claro para los botones de ejemplo */
     color: #FFFFFF !important;
@@ -158,12 +175,15 @@ p {
     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 */
+    font-size: 0.7em; /* ¡Tamaño de fuente más pequeño para los ejemplos! */
+    white-space: normal; /* ¡Permitir que el texto se rompa en varias líneas! */
+    word-wrap: break-word; /* Rompe palabras largas */
+    overflow-wrap: break-word; /* Estándar más moderno */
+    flex-shrink: 1; /* Permitir que se encojan si es necesario */
     cursor: pointer; /* Indicar que son clickeables */
     flex-grow: 1; /* Permitir que los botones de ejemplo crezcan para llenar el espacio */
     min-width: 80px; /* Asegurar un ancho mínimo para cada botón */
+    text-align: center; /* Centrar el texto dentro del botón */
 }
 .example-button:hover {
     background-color: #007ACC !important; /* Azul Oscuro al pasar el ratón por los ejemplos */
@@ -173,8 +193,9 @@ p {
 /* Contenedor de los botones de ejemplo para forzar el "wrap" con flexbox */
 .example-buttons-container {
     display: flex;
-    flex-wrap: wrap; /* ¡Esto simula el wrap que no podemos usar en gr.Row! */
+    flex-wrap: wrap; /* ¡Esto simula el wrap! */
     justify-content: center; /* Centrar los botones si no llenan la línea */
+    align-items: stretch; /* Asegura que los botones tengan la misma altura si el texto envuelve */
     margin-top: 5px; /* Pequeño margen superior */
     margin-bottom: 10px; /* Pequeño margen inferior */
 }
@@ -204,6 +225,31 @@ footer {
 .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 */
 }
+
+/* Ajustes para el contenedor de la salida de Label (para que el texto interno envuelva) */
+.gradio-output > .label {
+    white-space: normal !important; /* Permitir que el texto envuelva */
+    word-wrap: break-word !important; /* Romper palabras largas */
+    overflow-wrap: break-word !important; /* Estándar moderno */
+}
+/* Asegurarse de que el texto dentro de los resultados de Gradio (si no es HTML) también envuelva */
+.gradio-output > div {
+    white-space: normal !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+}
+
+/* Ajustes para el texto dentro del gr.Label (Confidence Scores) si se hace visible */
+.gr-label-container {
+    font-size: 0.8em; /* Reducir la fuente de los scores de confianza */
+}
+.gr-label-container .label-text {
+    font-size: 1em !important; /* Mantener la etiqueta del score legible */
+}
+.gr-label-container .label-score {
+    font-size: 0.9em !important; /* Un poco más pequeño que la etiqueta */
+}
+
 """
 
 # --- Helper Function for Sentiment Interpretation ---
@@ -228,32 +274,33 @@ def interpret_sentiment(label, score):
         emoji = "❓"
         description = "Sentiment not determined."
         color_class = ""
-    
+        
+    # El HTML de salida también debe permitir el salto de línea y reducir la fuente del párrafo
     return f"<div class='sentiment-display {color_class}'>{emoji} {label.upper()} ({score:.2f})</div>" + \
-           f"<p style='color: #FFFFFF; font-size: 0.75em; margin-top: 3px; margin-bottom: 0;'>{description}</p>"
+           f"<p style='color: #FFFFFF; font-size: 0.7em; margin-top: 3px; margin-bottom: 0; line-height: 1.2; white-space: normal; word-wrap: break-word;'>{description}</p>"
 
 # --- Sentiment Analysis Function ---
 def analyze_sentiment(text):
     if not model_loaded_successfully:
-        return ( 
-            "<div class='sentiment-display'>⚠️ Model Error ⚠️</div><p style='color: #FFFFFF; font-size: 0.75em;'>Model not loaded.</p>",
-            {}, 
-            {"error": "Model loading failed."} 
+        return (    
+            "<div class='sentiment-display'>⚠️ Model Error ⚠️</div><p style='color: #FFFFFF; font-size: 0.7em;'>Model not loaded.</p>",
+            {},    
+            {"error": "Model loading failed."}    
         )
 
     if not text.strip():
-        return ( 
-            "<div class='sentiment-display'>✍️ Enter text ✍️</div><p style='color: #FFFFFF; font-size: 0.75em;'>Type text to analyze.</p>",
-            {}, 
-            {"info": "No text entered."} 
+        return (    
+            "<div class='sentiment-display'>✍️ Enter text ✍️</div><p style='color: #FFFFFF; font-size: 0.7em;'>Type text to analyze.</p>",
+            {},    
+            {"info": "No text entered."}    
         )
 
     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']
 
@@ -261,13 +308,13 @@ def analyze_sentiment(text):
 
         overall_sentiment_display = interpret_sentiment(label, score)
 
-        return (overall_sentiment_display, confidence_scores_output, results) 
+        return (overall_sentiment_display, confidence_scores_output, results)    
         
     except Exception as e:
-        return ( 
-            f"<div class='sentiment-display'>❌ Error ❌</div><p style='color: #FFFFFF; font-size: 0.75em;'>Analysis failed.</p>",
-            {}, 
-            {"error_message": str(e)} 
+        return (    
+            f"<div class='sentiment-display'>❌ Error ❌</div><p style='color: #FFFFFF; font-size: 0.7em;'>Analysis failed.</p>",
+            {},    
+            {"error_message": str(e)}    
         )
 
 # --- Lista completa de ejemplos para selección aleatoria ---
@@ -287,7 +334,7 @@ ALL_EXAMPLES = [
 ]
 
 # --- Gradio Interface ---
-with gr.Blocks(css=custom_css, theme=None) as demo: 
+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;'>Analyze the emotional tone of your English text.</p>")
 
@@ -304,11 +351,11 @@ with gr.Blocks(css=custom_css, theme=None) as demo:
         # --- Definir las salidas ANTES de usarlas en los eventos de los botones ---
         overall_sentiment_output = gr.HTML(label="Overall Sentiment")
         confidence_scores_output = gr.Label(num_top_classes=3, label="Confidence Scores", visible=False)
-        raw_output = gr.JSON(label="Raw Model Output", visible=False) 
+        raw_output = gr.JSON(label="Raw Model Output", visible=False)    
 
         # --- Título para los ejemplos ---
         gr.Markdown("<h3 style='color: #00BFFF; margin-top: 5px; margin-bottom: 5px;'>Try examples:</h3>")
-        
+            
         # Contenedor para los botones de ejemplo para manejar el "wrap" vía CSS
         with gr.Row(elem_classes="example-buttons-container"):
             # Generar 3 botones de ejemplo aleatorios
@@ -325,10 +372,10 @@ with gr.Blocks(css=custom_css, theme=None) as demo:
                     inputs=text_input,
                     outputs=[overall_sentiment_output, confidence_scores_output, raw_output]
                 )
-        
+            
         gr.Markdown("<hr>") # Separador
         gr.Markdown("<h2 style='color: #00BFFF;'>📊 Results</h2>")
-        
+            
         # Las salidas ya están definidas arriba, ahora solo las colocamos en el layout
         # (overall_sentiment_output ya se definió, y su visibilidad y escala se controlan arriba)
         # No es necesario re-definirlas aquí, solo asegurarnos de que estén en el flujo de la interfaz
@@ -345,7 +392,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 
+        # live=True    
     )
 
 # Launch the Gradio application