Edit app.py

app.py

@@ -35,15 +35,11 @@ def make_gradcam_heatmap(img_array, model, last_conv_layer_name="conv4", pred_in
     )
     with tf.GradientTape() as tape:
         conv_outputs, predictions = grad_model(img_array)
-
-        # 👇 Aseguramos que predictions sea tensor
         if isinstance(predictions, list):
             predictions = predictions[0]
-
         if pred_index is None:
             pred_index = tf.argmax(predictions[0])
         class_channel = predictions[:, pred_index]
-
     grads = tape.gradient(class_channel, conv_outputs)
     pooled_grads = tf.reduce_mean(grads, axis=(0, 1, 2))
     conv_outputs = conv_outputs[0]
@@ -52,48 +48,40 @@ def make_gradcam_heatmap(img_array, model, last_conv_layer_name="conv4", pred_in
     heatmap = tf.maximum(heatmap, 0) / tf.math.reduce_max(heatmap)
     return heatmap.numpy()
 
-# === Función de predicción principal ===
+# === Función principal ===
 def preprocess_and_predict(img_input):
-    # Convertir PIL a OpenCV (BGR)
     img = np.array(img_input)[:, :, ::-1]
-
-    # 1. Zoom
     zoomed = apply_zoom(img, zoom_factor=0.9)
-
-    # 2. Quitar pelos
     rgb_clean = cv2.cvtColor(zoomed, cv2.COLOR_BGR2RGB)
     clean = quitar_pelos(rgb_clean)
 
-    # 3. Segmentar
     mask, lesion_rgb = segmentar_lesion(clean, size=(ROWS, COLS))
 
-    # 4. Preparar para SimpleNet
     lesion_resized = cv2.resize(lesion_rgb, (ROWS, COLS))
     img_array = image.img_to_array(lesion_resized) / 255.0
     img_array = np.expand_dims(img_array, axis=0)
 
-    # 5. Predicción con SimpleNet
     probs = model.predict(img_array)[0]
     classes = ["Benign", "Malignant"]
     pred_idx = np.argmax(probs)
     pred_label = classes[pred_idx]
     result_text = f"Predicción: {pred_label} ({probs[pred_idx]*100:.2f}%)"
 
-    # 6. Métricas geométricas
+    # === Métricas geométricas en formato tabla ===
     area = calcular_area(mask)
     perim = calcular_perimetro(mask)
     circ = calcular_circularidad(mask)
     sim_v, sim_h = calcular_simetria(mask)
 
-    metrics_text = (
-        f"Área: {area}\n"
-        f"Perímetro: {perim}\n"
-        f"Circularidad: {circ}\n"
-        f"Simetría Vertical: {sim_v}\n"
-        f"Simetría Horizontal: {sim_h}"
-    )
+    metrics_data = [
+        ["Área (px²)", area],
+        ["Perímetro (px)", perim],
+        ["Circularidad", round(circ, 3)],
+        ["Simetría Vertical", round(sim_v, 3)],
+        ["Simetría Horizontal", round(sim_h, 3)]
+    ]
 
-    # 7. Grad-CAM con ZoomNet (imagen en bruto)
+    # === Grad-CAM ===
     raw_resized = cv2.resize(np.array(img_input), (ROWS, COLS))
     raw_array = image.img_to_array(raw_resized) / 255.0
     raw_array = np.expand_dims(raw_array, axis=0)
@@ -104,22 +92,110 @@ def preprocess_and_predict(img_input):
     heatmap_color = cv2.applyColorMap(heatmap, cv2.COLORMAP_JET)
     overlay = cv2.addWeighted(raw_resized.astype("uint8"), 0.6, heatmap_color, 0.4, 0)
 
-    return mask, lesion_rgb, result_text, metrics_text, overlay
-
-# === Interfaz Gradio ===
-demo = gr.Interface(
-    fn=preprocess_and_predict,
-    inputs=gr.Image(type="pil", label="Sube una imagen de lesión"),
-    outputs=[
-        gr.Image(type="numpy", label="Máscara Binaria"),
-        gr.Image(type="numpy", label="Lesión Segmentada"),
-        gr.Textbox(label="Resultado del Modelo"),
-        gr.Textbox(label="Métricas de la Lesión"),
-        gr.Image(type="numpy", label="Grad-CAM (ZoomNet)")
-    ],
-    title="DermaScan - Clasificación de Lesiones",
-    description="Sube una imagen de piel. El sistema segmenta la lesión, muestra la máscara, la predicción, métricas geométricas y Grad-CAM."
-)
+    return mask, lesion_rgb, result_text, metrics_data, overlay
+
+
+# === Interfaz con estilo ===
+with gr.Blocks(css="""
+body, .gradio-container {
+    font-family: 'Inter', sans-serif;
+    background: #ffffff !important;
+}
+h1, h2 { font-weight: 600; color: #111827; margin-bottom: 0.5rem; }
+.section { background: white; border-radius: 0.75rem; padding: 1.5rem; margin: 1rem auto; 
+           box-shadow: 0 1px 4px rgba(0,0,0,0.05); max-width: 800px; }
+.gradio-container { max-width: 900px; margin: auto; }
+img { border-radius: 0.5rem; }
+#analyze-btn {
+    display: block;
+    margin: 1rem auto;
+    width: 150px;
+    background-color: #374151;
+    color: white;
+    font-weight: bold;
+}
+#metrics-table {
+    max-width: 320px;
+    margin: 1rem auto;
+}
+.expl-text {
+    color: #4B5563;
+    font-size: 0.95rem;
+    margin-bottom: 1rem;
+}
+""") as demo:
+
+    # === Título e introducción ===
+    gr.HTML("""
+    <section style="text-align:center; padding: 2rem;">
+        <h1>DermaScan - Clasificación de Lesiones</h1>
+        <p style="color:#374151; font-size:1.05rem; max-width: 700px; margin:auto;">
+        El melanoma es uno de los cánceres de piel más agresivos. 
+        Este sistema utiliza <b>Inteligencia Artificial</b> para apoyar el diagnóstico, 
+        mostrando resultados de clasificación, zonas relevantes (Grad-CAM) 
+        y métricas geométricas basadas en el criterio ABCDE.
+        </p>
+    </section>
+    """)
+
+    # === Subir imagen ===
+    with gr.Column(elem_classes="section"):
+        gr.HTML("<h2>Subir imagen</h2>")
+        gr.HTML('<p class="expl-text">Sube una imagen dermatoscópica de la lesión para analizarla.</p>')
+        img_input = gr.Image(type="pil", label="Imagen de la lesión", elem_id="upload-img")
+        run_btn = gr.Button("Analizar", elem_id="analyze-btn")
+
+    # === Segmentación ===
+    with gr.Column(elem_classes="section"):
+        gr.HTML("<h2>Preprocesamiento y Segmentación</h2>")
+        gr.HTML("""
+        <p class="expl-text">
+        En este paso se realizan varias operaciones:
+        <br>- Conversión de canales de color.<br>
+        - Eliminación de pelos.<br>
+        - Segmentación de la lesión.<br>
+        </p>
+        """)
+        img_mask = gr.Image(type="numpy", label="Máscara Binaria", elem_id="mask-img")
+        img_segmented = gr.Image(type="numpy", label="Lesión Segmentada", elem_id="seg-img")
+
+    # === Grad-CAM ===
+    with gr.Column(elem_classes="section"):
+        gr.HTML("<h2>Grad-CAM (ZoomNet)</h2>")
+        gr.HTML("""
+        <p class="expl-text">
+        El mapa de calor muestra las zonas con mayor relevancia para el modelo 
+        al determinar si la lesión es benigna o maligna.
+        </p>
+        """)
+        gradcam_img = gr.Image(type="numpy", label="Mapa de activación", elem_id="gradcam-img")
+
+    # === Resultados ===
+    with gr.Column(elem_classes="section"):
+        gr.HTML("<h2>Resultados del modelo</h2>")
+        result_text = gr.Textbox(label="Clasificación", max_lines=1, interactive=False)
+
+        gr.HTML("""
+        <p class="expl-text">
+        Métricas geométricas basadas en el criterio <b>ABCDE</b>: 
+        útiles para analizar lesiones en casos dudosos.
+        </p>
+        """)
+        metrics_table = gr.Dataframe(
+            headers=["Métrica", "Valor"],
+            datatype=["str", "number"],
+            interactive=False,
+            label="Métricas calculadas",
+            elem_id="metrics-table"
+        )
+
+    # === Conexión botón -> función ===
+    run_btn.click(
+        fn=preprocess_and_predict,
+        inputs=[img_input],
+        outputs=[img_mask, img_segmented, result_text, metrics_table, gradcam_img]
+    )
 
+# === Lanzar en tema claro ===
 if __name__ == "__main__":
     demo.launch()