Update app.py

app.py

@@ -41,21 +41,21 @@ def preprocess_image(img):
 def predecir(rx_image):
     """Realiza la predicción y formatea la salida HTML."""
     if model is None:
-        return "<div style='color:#FF6B6B; text-align:center; padding-top:100px; font-weight: bold;'>Error: El modelo no se ha cargado.</div>"
+        return "<div class='result-box' style='color:#FF6B6B; font-weight: bold;'>Error: El modelo no se ha cargado.</div>"
     
     if rx_image is None:
-        return "<div style='color:#FF6B6B; text-align:center; padding-top:100px; font-weight: bold;'>Por favor, sube una imagen RX para analizar.</div>"
+        return "<div class='result-box' style='color:#FF6B6B; font-weight: bold;'>Por favor, sube una imagen RX para analizar.</div>"
         
     img_array = preprocess_image(rx_image)
     if img_array is None: # Si preprocess_image devuelve None por algún motivo
-        return "<div style='color:#FF6B6B; text-align:center; padding-top:100px; font-weight: bold;'>Error: No se pudo procesar la imagen.</div>"
+        return "<div class='result-box' style='color:#FF6B6B; font-weight: bold;'>Error: No se pudo procesar la imagen.</div>"
 
 
     try:
         preds = model.predict(img_array)
     except Exception as e:
         print(f"Error durante la predicción: {e}")
-        return f"<div style='color:#FF6B6B; text-align:center; padding-top:100px; font-weight: bold;'>Error al realizar la predicción: {e}</div>"
+        return f"<div class='result-box' style='color:#FF6B6B; font-weight: bold;'>Error al realizar la predicción: {e}</div>"
 
     score = tf.nn.softmax(preds[0])
     
@@ -67,24 +67,23 @@ def predecir(rx_image):
     other_class = CLASS_NAMES[other_index]
     other_confidence = score[other_index] * 100
     
-    # Colores para el borde y el texto del resultado
+    # Colores para el borde. El color del texto se heredará del CSS.
     color_borde = "#4CAF50" if predicted_class == "valido" else "#FF6B6B" # Verde para válido, Rojo para no válido
-    color_texto_principal = "#2C3E50" # Azul oscuro para el texto principal
-    color_texto_secundario = "#555555" # Gris oscuro para el texto secundario
     
     # HTML para el resultado con estilos mejorados
+    # Eliminamos los 'style' de color de texto para que se hereden de la clase 'result-box'
     resultado_texto = f"""
     <div class='result-box' style='
         border: 3px solid {color_borde}; 
         box-shadow: 0 6px 20px rgba(0,0,0,0.15); /* Sombra más pronunciada */
     '>
-        <div style='color:{color_texto_principal}; font-size:42px; font-weight:bold;'>
+        <div style='font-size:42px; font-weight:bold;'>
             Resultado: <span style='color: {color_borde};'>{predicted_class.upper()}</span>
         </div>
-        <div style='color:{color_texto_secundario}; font-size:30px; margin-top:15px;'>
+        <div style='font-size:30px; margin-top:15px;'>
             Confianza: <span style='font-weight:bold;'>{confidence:.2f}%</span>
         </div>
-        <div style='color:{color_texto_secundario}; font-size:24px; margin-top:10px;'>
+        <div style='font-size:24px; margin-top:10px;'>
             (Probabilidad {other_class}: <span style='font-weight:bold;'>{other_confidence:.2f}%</span>)
         </div>
     </div>
@@ -94,33 +93,34 @@ def predecir(rx_image):
 
 # --- Interfaz de Gradio ---
 with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.emerald, secondary_hue=gr.themes.colors.slate)) as demo:
-    # --- Estilos CSS personalizados ---
+    # --- Estilos CSS personalizados (Adaptados a Dark Mode) ---
     gr.HTML(f"""
     <style>
         body {{ 
-            background-color:#f8f9fa !important; 
+            /* Se elimina el background-color y color fijos */
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            color: #333;
         }}
         .gradio-container {{
             max-width: 1200px;
             margin: auto;
             padding: 20px;
-            background-color: #ffffff;
+            background-color: var(--background-fill-primary); /* Variable de Gradio para fondo */
             border-radius: 15px;
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
         }}
         h2 {{
-            color: #2C3E50; /* Azul oscuro para el título */
-            font-size: 2.8em; /* Tamaño más grande */
-            font-weight: 700; /* Más negrita */
+            color: var(--text-color-primary); /* Variable de Gradio para texto */
+            font-size: 2.8em;
+            font-weight: 700;
             text-align: center;
             margin-bottom: 30px;
             padding-bottom: 15px;
-            border-bottom: 2px solid #ECF0F1;
+            border-bottom: 2px solid var(--border-color-accent); /* Variable de Gradio para bordes */
         }}
+        
+        /* Estilos de botones (se mantienen, ya que definen su propio color y fondo) */
         .gr-button.primary {{
-            background-color: #28a745 !important; /* Verde principal */
+            background-color: #28a745 !important;
             border-color: #28a745 !important;
             color: white !important;
             font-weight: bold;
@@ -136,7 +136,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.emerald, second
             box-shadow: 0 4px 10px rgba(0,0,0,0.2);
         }}
         .gr-button.secondary {{
-            background-color: #6c757d !important; /* Gris secundario */
+            background-color: #6c757d !important;
             border-color: #6c757d !important;
             color: white !important;
             font-weight: bold;
@@ -151,17 +151,18 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.emerald, second
             transform: translateY(-2px);
             box-shadow: 0 4px 10px rgba(0,0,0,0.2);
         }}
+        
         .result-box {{
             font-size: 28px; 
             text-align: center; 
             padding: 50px; 
             min-height: 380px; 
             border-radius: 20px; 
-            background-color: #f0f4f7; /* Un fondo ligeramente azulado */
+            background-color: var(--background-fill-secondary); /* Variable de Gradio */
             display: flex; 
             flex-direction: column; 
             justify-content: center; 
-            color: #333; 
+            color: var(--text-color-primary); /* Variable de Gradio */
             transition: all 0.3s ease;
         }}
         .result-box:hover {{
@@ -170,20 +171,26 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.emerald, second
         }}
         .gr-image {{
             border-radius: 12px;
-            border: 1px solid #ddd;
+            border: 1px solid var(--border-color-primary); /* Variable de Gradio */
             box-shadow: 0 2px 10px rgba(0,0,0,0.08);
         }}
         .gr-label {{
             font-weight: 600;
-            color: #34495E;
+            color: var(--text-color-secondary); /* Variable de Gradio */
             font-size: 1.2em;
             margin-bottom: 8px;
         }}
+        /* Clase para el subtítulo */
+        .subtitle {{
+            text-align:center; 
+            font-size:1.1em; 
+            color: var(--text-color-secondary); /* Variable de Gradio */
+        }}
     </style>
     """)
     
     gr.Markdown("## Clasificador RX LAB 🦷 V1(529NV-348V) TFG Marta B.")
-    gr.Markdown("<p style='text-align:center; font-size:1.1em; color:#555;'>Sube una imagen para clasificarla como válida o no válida.</p>")
+    gr.Markdown("<p class='subtitle'>Sube una imagen de una radiografía dental para clasificarla como válida o no válida.</p>")
 
     # Mensaje de carga del modelo
     gr.Textbox(value=model_load_message, interactive=False, container=False, 
@@ -194,23 +201,27 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.emerald, second
                visible=True if "Cargando" in model_load_message or "Error" in model_load_message else False,
                )
     
+    # Texto de estado inicial para la caja de resultados
+    initial_result_html = f"<div class='result-box'><div style='font-size:24px; color: var(--text-color-secondary);'>Esperando imagen...</div></div>"
+
     with gr.Row(variant="panel", scale=1):
         with gr.Column(scale=1, min_width=400):
             gr.Markdown("### Sube tu Radiografía")
             rx_input = gr.Image(type="numpy", label="Imagen de Radiografía Dental", show_label=True, height=450)
             
             with gr.Row():
-                boton_limpiar = gr.Button("Limpiar", variant="secondary", size="lg", icon="🗑️")
-                boton_analizar = gr.Button("Analizar RX", variant="primary", size="lg", icon="🔍")
+                boton_limpiar = gr.Button("Limpiar", variant="secondary", size="lg", )
+                boton_analizar = gr.Button("Analizar RX", variant="primary", size="lg",)
                 
         with gr.Column(scale=1, min_width=400):
             gr.Markdown("### Resultado del Análisis")
-            resultado = gr.HTML(label="Análisis de Radiografía", show_label=True, value="<div class='result-box'><div style='color:#555; font-size:24px;'>Esperando imagen...</div></div>")
+            resultado = gr.HTML(label="Análisis de Radiografía", show_label=True, value=initial_result_html)
 
     # --- Conexiones de Eventos ---
     boton_analizar.click(fn=predecir, inputs=rx_input, outputs=resultado)
-    boton_limpiar.click(lambda: (None, "<div class='result-box'><div style='color:#555; font-size:24px;'>Esperando imagen...</div></div>"), inputs=[], outputs=[rx_input, resultado])
+    boton_limpiar.click(lambda: (None, initial_result_html), inputs=[], outputs=[rx_input, resultado])
 
 # --- Lanzar la App ---
 if __name__ == "__main__":
     demo.launch(share=False)
+