Update app.py

app.py

@@ -1,28 +1,38 @@
 import gradio as gr
 import tensorflow as tf
 import numpy as np
+import time # Para simular un retraso en la carga del modelo
 
 # --- Configuración ---
 IMG_SIZE = (224, 224)
 MODEL_PATH = "dental_classifier_model.keras" # Asegúrate de que esta ruta sea correcta
 CLASS_NAMES = ['no_valido', 'valido']
 
-# --- Cargar Modelo ---
-# Manejo de errores básico para la carga del modelo
+# --- Cargar Modelo con mensaje de carga ---
+model = None
+model_load_message = "Cargando modelo... por favor espera."
+
 try:
+    # Simular una carga lenta para ver el mensaje (puedes quitar esto en producción)
+    time.sleep(2) 
     model = tf.keras.models.load_model(MODEL_PATH)
+    model_load_message = "Modelo cargado exitosamente."
     print("Modelo cargado exitosamente.")
 except Exception as e:
-    print(f"Error cargando el modelo desde {MODEL_PATH}: {e}")
-    print("Asegúrate de que el archivo 'dental_classifier_model.keras' esté en el mismo directorio.")
-    # Salir o manejar el error como prefieras si el modelo no se carga
-    # Por ahora, Gradio mostrará un error si 'model' no está definido.
+    model_load_message = f"Error cargando el modelo: {e}. Asegúrate que 'dental_classifier_model.keras' existe."
+    print(model_load_message)
 
 # --- Funciones de Procesamiento ---
 def preprocess_image(img):
     """Preprocesa la imagen de entrada al formato que espera el modelo."""
     if img is None:
         return None
+    # Asegurarse de que la imagen tiene 3 canales si es en escala de grises
+    if len(img.shape) == 2:
+        img = np.stack((img,)*3, axis=-1)
+    elif img.shape[2] == 4: #RGBA a RGB
+        img = img[:, :, :3]
+
     img = tf.image.resize(img, IMG_SIZE)
     img_array = tf.expand_dims(img, 0)
     img_array = img_array / 255.0    # Normalizar
@@ -30,16 +40,22 @@ 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>"
+    
     if rx_image is None:
-        return "<div style='color:red; text-align:center; padding-top:100px;'>Por favor, sube una imagen primero.</div>"
+        return "<div style='color:#FF6B6B; text-align:center; padding-top:100px; 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>"
+
+
     try:
         preds = model.predict(img_array)
     except Exception as e:
         print(f"Error durante la predicción: {e}")
-        return f"<div style='color:red; text-align:center; padding-top:100px;'>Error al procesar el modelo: {e}</div>"
+        return f"<div style='color:#FF6B6B; text-align:center; padding-top:100px; font-weight: bold;'>Error al realizar la predicción: {e}</div>"
 
     score = tf.nn.softmax(preds[0])
     
@@ -51,32 +67,25 @@ def predecir(rx_image):
     other_class = CLASS_NAMES[other_index]
     other_confidence = score[other_index] * 100
     
-    # --- Modificación de Estilo ---
-    # El color del borde sigue siendo dinámico (verde/rojo)
-    color_borde = "#4CAF50" if predicted_class == "valido" else "#FF0000"
-    # El color del texto ahora es siempre negro (#000000)
-    color_texto_resultado = "#000000" 
+    # Colores para el borde y el texto del resultado
+    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
+    # HTML para el resultado con estilos mejorados
     resultado_texto = f"""
-    <div style='
-        font-size:36px; 
-        text-align:center; 
-        padding:40px; 
-        height:350px; 
-        border: 3px solid {color_borde}; /* Borde dinámico */
-        border-radius:25px; 
-        background-color:#ffffff;
-        display:flex; 
-        flex-direction:column; 
-        justify-content:center; 
-        color:{color_texto_resultado}; /* Texto siempre negro */
-        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    <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>Resultado: <b>{predicted_class.upper()}</b></div>
-        <div>Confianza: {confidence:.2f}%</div>
-        <div style='font-size: 24px; margin-top: 15px;'>
-            (Probabilidad {other_class}: {other_confidence:.2f}%)
+        <div style='color:{color_texto_principal}; 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;'>
+            Confianza: <span style='font-weight:bold;'>{confidence:.2f}%</span>
+        </div>
+        <div style='color:{color_texto_secundario}; font-size:24px; margin-top:10px;'>
+            (Probabilidad {other_class}: <span style='font-weight:bold;'>{other_confidence:.2f}%</span>)
         </div>
     </div>
     """
@@ -84,27 +93,124 @@ def predecir(rx_image):
     return resultado_texto
 
 # --- Interfaz de Gradio ---
-with gr.Blocks(theme="default") as demo:
-    # Forzar fondo claro en toda la app
-    gr.HTML("<style>body{background-color:#ffffff !important;}</style>")
+with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.emerald, secondary_hue=gr.themes.colors.slate)) as demo:
+    # --- Estilos CSS personalizados ---
+    gr.HTML(f"""
+    <style>
+        body {{ 
+            background-color:#f8f9fa !important; 
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            color: #333;
+        }}
+        .gradio-container {{
+            max-width: 1200px;
+            margin: auto;
+            padding: 20px;
+            background-color: #ffffff;
+            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 */
+            text-align: center;
+            margin-bottom: 30px;
+            padding-bottom: 15px;
+            border-bottom: 2px solid #ECF0F1;
+        }}
+        .gr-button.primary {{
+            background-color: #28a745 !important; /* Verde principal */
+            border-color: #28a745 !important;
+            color: white !important;
+            font-weight: bold;
+            padding: 12px 25px;
+            font-size: 1.1em;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }}
+        .gr-button.primary:hover {{
+            background-color: #218838 !important;
+            border-color: #1e7e34 !important;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+        }}
+        .gr-button.secondary {{
+            background-color: #6c757d !important; /* Gris secundario */
+            border-color: #6c757d !important;
+            color: white !important;
+            font-weight: bold;
+            padding: 12px 25px;
+            font-size: 1.1em;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }}
+        .gr-button.secondary:hover {{
+            background-color: #5a6268 !important;
+            border-color: #545b62 !important;
+            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 */
+            display: flex; 
+            flex-direction: column; 
+            justify-content: center; 
+            color: #333; 
+            transition: all 0.3s ease;
+        }}
+        .result-box:hover {{
+            transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
+        }}
+        .gr-image {{
+            border-radius: 12px;
+            border: 1px solid #ddd;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
+        }}
+        .gr-label {{
+            font-weight: 600;
+            color: #34495E;
+            font-size: 1.2em;
+            margin-bottom: 8px;
+        }}
+    </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>")
+
+    # Mensaje de carga del modelo
+    gr.Textbox(value=model_load_message, interactive=False, container=False, 
+               show_label=False, elem_id="model_status_message",
+               label="Estado del Modelo",
+               render=True, # Asegura que se renderiza inicialmente
+               info="El modelo está cargando..." if "Cargando" in model_load_message else None,
+               visible=True if "Cargando" in model_load_message or "Error" in model_load_message else False,
+               )
     
-    with gr.Row():
-        with gr.Column(scale=1):
-            rx_input = gr.Image(type="numpy", label="Sube tu RX")
+    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")
-                boton_analizar = gr.Button("Analizar", variant="primary")
+                boton_limpiar = gr.Button("Limpiar", variant="secondary", size="lg", icon="🗑️")
+                boton_analizar = gr.Button("Analizar RX", variant="primary", size="lg", icon="🔍")
                 
-        with gr.Column(scale=1):
-            resultado = gr.HTML(label="Resultado")
+        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>")
 
     # --- Conexiones de Eventos ---
     boton_analizar.click(fn=predecir, inputs=rx_input, outputs=resultado)
-    boton_limpiar.click(lambda: (None, None), inputs=[], outputs=[rx_input, 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])
 
 # --- Lanzar la App ---
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(share=False)