Update app.py

app.py

@@ -65,9 +65,21 @@ def preprocess_and_predict(img_input):
     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}%)"
-
-    # === Métricas geométricas en formato tabla ===
+    prob_percent = int(probs[pred_idx] * 100)
+
+    # Color dinámico para la barra
+    color = "green" if pred_label == "Benign" else "red"
+    result_text_html = f"<h3 style='color:{color}; font-weight:bold;'>Predicción: {pred_label}</h3>"
+    result_bar_html = f"""
+    <div style='width:100%; background:#eee; border-radius:8px;'>
+      <div style='width:{prob_percent}%; background:{color}; padding:6px; 
+                  border-radius:8px; color:white; text-align:center; font-weight:bold;'>
+        {prob_percent}%
+      </div>
+    </div>
+    """
+
+    # === Métricas geométricas ===
     area = calcular_area(mask)
     perim = calcular_perimetro(mask)
     circ = calcular_circularidad(mask)
@@ -92,7 +104,7 @@ 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_data, overlay
+    return mask, lesion_rgb, result_text_html, result_bar_html, metrics_data, overlay
 
 
 # === Interfaz con estilo ===
@@ -100,70 +112,82 @@ with gr.Blocks(css="""
 body, .gradio-container {
     font-family: 'Inter', sans-serif;
     background: #ffffff !important;
+    font-weight: bold !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; }
+.section { 
+    background: #f9fafb;   /* gris muy claro */
+    border-radius: 0.75rem; 
+    padding: 1.5rem; 
+    margin: 1.5rem auto; 
+    box-shadow: 0 1px 3px rgba(0,0,0,0.08); 
+    max-width: 900px; 
+}
 .gradio-container { max-width: 900px; margin: auto; }
 img { border-radius: 0.5rem; }
-#analyze-btn {
+button, .gr-button {
     display: block;
-    margin: 1rem auto;
-    width: 150px;
-    background-color: #374151;
-    color: white;
+    margin: 1rem auto; 
+    border: 2px solid #374151; 
     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.
+        <!-- Caption breve -->
+        <p style="color:#6b7280; font-size:1rem; font-style:italic; margin-top:0.5rem;">
+            Detección asistida por IA para apoyar el diagnóstico temprano del melanoma
+        </p>
+    </section>
+
+    <!-- Texto introductorio alineado a la izquierda -->
+    <section style="text-align:justify; padding: 1.5rem; max-width: 800px; margin:auto; line-height:1.6;">
+        <p style="color:#111827; font-size:1.05rem;">
+                El melanoma es un cáncer de piel agresivo que se origina en los melanocitos. 
+            Aunque poco frecuente, es el más peligroso por su capacidad de generar metástasis si no se detecta a tiempo.
+        </p>
+        <p style="color:#111827; font-size:1.05rem; margin-top:1rem;">
+            En esta aplicación hemos implementado una red neuronal convolucional (CNN) entrenada con imágenes dermatoscópicas
+            para estimar la probabilidad de que una lesión sea  benigna o maligna.
+        </p>
+        <p style="color:#111827; font-size:1.05rem; margin-top:1rem;">
+            Además, incorporamos técnicas de interpretabilidad como Grad-CAM  y métricas geométricas basadas en el criterio clínico ABCDE,
+            que sirven como apoyo en la exploración médica.
         </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>')
+        gr.HTML("<p style='color:#111827;'>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")
+        run_btn = gr.Button("Analizar", scale=0)
 
     # === 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>
+        <p style='color:#111827;'>En este paso se realizan varias operaciones:</p>
+        <ul style='color:#111827;'>
+                <li style="color:#111827; font-weight:bold;">Conversión de canales de color.</li>
+                <li style="color:#111827; font-weight:bold;">Eliminación de pelos.</li>
+                <li style="color:#111827; font-weight:bold;">Segmentación de la lesión.</li>
+        </ul>
         """)
         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("<h2>Grad-CAM</h2>")
         gr.HTML("""
-        <p class="expl-text">
+        <p style='color:#111827;'>
         El mapa de calor muestra las zonas con mayor relevancia para el modelo 
         al determinar si la lesión es benigna o maligna.
         </p>
@@ -173,27 +197,37 @@ img { border-radius: 0.5rem; }
     # === 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)
+        result_text = gr.HTML()
+        result_bar = gr.HTML()
 
         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>
+        <p style='color:#111827;'>Métricas geométricas basadas en el criterio ABCDE:
+        ú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"
+            wrap=True,
+            row_count=(5, "fixed"),
+            col_count=(2, "fixed")
         )
 
+    # === Aviso final ===
+    gr.HTML("""
+    <section style="text-align:center; padding: 1rem; margin-top: 2rem;">
+        <p style="color:#b91c1c; font-weight:bold; font-size:1rem;">
+         Este sistema es solo de apoyo y nunca sustituye la valoración de un experto médico.
+        </p>
+    </section>
+    """)
+
     # === 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]
+        outputs=[img_mask, img_segmented, result_text, result_bar, metrics_table, gradcam_img]
     )
 
 # === Lanzar en tema claro ===