Actualizar app.py

app.py

@@ -125,59 +125,71 @@ h1, h2 { font-weight: 600; color: #111827; margin-bottom: 0.5rem; }
 }
 .gradio-container { max-width: 900px; margin: auto; }
 img { border-radius: 0.5rem; }
-button, .gr-button {
+
+/* === Botón Analizar personalizado === */
+#analyze-btn {
     display: block;
-    margin: 1rem auto; 
-    border: 2px solid #374151; 
+    margin: 1.5rem auto; 
+    width: 90%;                   
+    padding: 0.75rem 1rem;        
+    background-color: #f97316;    
+    color: #7c2d12;               
+    border: 2px solid #f97316;    
+    border-radius: 0.75rem;       
     font-weight: bold;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background 0.3s ease, color 0.3s ease;
+}
+#analyze-btn:hover {
+    background-color: #ea580c;   
+    color: white;                
 }
 """) as demo:
 
     # === Título e introducción ===
     gr.HTML("""
     <section style="text-align:center; padding: 2rem;">
-        <h1>DermaScan - Clasificación de Lesiones</h1>
+        <h1>DermaScan - Clasificación de Melanomas</h1>
         <!-- 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
+        Una herramienta de apoyo basada en IA para la detección temprana de cáncer de piel.
         </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. 
+                <span style='font-weight:bold; color:#000000;'>El melanoma es un cáncer de piel agresivo</span> 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
+            En esta aplicación hemos implementado una <span style='font-weight:bold; color:#000000;'>red neuronal convolucional (CNN)</span>  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,
+            Además, incorporamos técnicas de interpretabilidad como <span style='font-weight:bold; color:#000000;'>Grad-CAM </span> y <span style='font-weight:bold; color:#000000;'>métricas geométricas </span> 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 style='color:#111827;'>Sube una imagen dermatoscópica de la lesión para analizarla.</p>")
+        gr.HTML("<p style='color:#111827;'>Sube una imagen clara de tu lunar Asegúrate de que esté bien iluminada y centrada.</p>")
         img_input = gr.Image(type="pil", label="Imagen de la lesión", elem_id="upload-img")
-        run_btn = gr.Button("Analizar", scale=0)
+        run_btn = gr.Button("Analizar", elem_id="analyze-btn", scale=0)
 
     # === Segmentación ===
     with gr.Column(elem_classes="section"):
         gr.HTML("<h2>Preprocesamiento y Segmentación</h2>")
         gr.HTML("""
-        <p style='color:#111827;'>En este paso se realizan varias operaciones</p>
+        <p style='color:#111827;'>En este apartado verás cómo preparamos tu imagen para que la red neuronal se concentre en la lesión:</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>
+                <li style="color:#111827; font-weight:bold;">Conversión de canales de color a HSV.</li>
+                <li style="color:#111827; font-weight:bold;">Eliminación de pelos y bordes para reducir ruido.</li>
+                <li style="color:#111827; font-weight:bold;">Segmentación del lunar.</li>
         </ul>
         """)
         img_mask = gr.Image(type="numpy", label="Máscara Binaria", elem_id="mask-img")
@@ -188,21 +200,86 @@ button, .gr-button {
         gr.HTML("<h2>Grad-CAM</h2>")
         gr.HTML("""
         <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.
+        El Grad-CAM resalta las zonas en las que la red neuronal ha puesto mayor atención para clasificar la lesión. 
+        Los colores cálidos indican mayor relevancia: rojo y amarillo muestran las áreas más importantes.
         </p>
         """)
         gradcam_img = gr.Image(type="numpy", label="Mapa de activación", elem_id="gradcam-img")
+        gr.HTML("""
+        <div style="display:flex; justify-content:center; margin-top:10px; gap:2rem;">
+            <div style="display:flex; align-items:center; gap:0.5rem;">
+                <div style="width:16px; height:16px; border-radius:50%; background:blue;"></div>
+                <span style="color:#111827;">Baja relevancia</span>
+            </div>
+            <div style="display:flex; align-items:center; gap:0.5rem;">
+                <div style="width:16px; height:16px; border-radius:50%; background:gold;"></div>
+                <span style="color:#111827;">Media relevancia</span>
+            </div>
+            <div style="display:flex; align-items:center; gap:0.5rem;">
+                <div style="width:16px; height:16px; border-radius:50%; background:red;"></div>
+                <span style="color:#111827;">Alta relevancia</span>
+            </div>
+        </div>
+        """)    
 
-    # === Resultados ===
+   # === Resultados ===
     with gr.Column(elem_classes="section"):
         gr.HTML("<h2>Resultados del modelo</h2>")
         result_text = gr.HTML()
         result_bar = gr.HTML()
 
+    # === Cuadro amarillo estilo ABCDE ===
         gr.HTML("""
-        <p style='color:#111827;'>Métricas geométricas basadas en el criterio ABCDE:
-        útiles para analizar lesiones en casos dudosos.</p>
+        <div style="background-color:#FFFBEB; border-radius:10px; padding:1.5rem; margin:1rem 0; 
+                    border:1px solid #FDE68A;">
+            <h3 style="color:#111827; font-weight:600; margin-bottom:1rem;">Criterio ABCDE del melanoma</h3>
+            <div style="display:flex; justify-content:space-around; text-align:center; margin-bottom:1rem;">
+                <div>
+                    <div style="background:#FDE68A; border-radius:50%; width:36px; height:36px; 
+                                display:flex; align-items:center; justify-content:center; font-weight:bold; color:#92400E; margin:auto;">
+                        A
+                    </div>
+                    <p style="margin-top:0.5rem; font-size:0.9rem; color:#111827;">Asimetría</p>
+                </div>
+                <div>
+                    <div style="background:#FDE68A; border-radius:50%; width:36px; height:36px; 
+                                display:flex; align-items:center; justify-content:center; font-weight:bold; color:#92400E; margin:auto;">
+                        B
+                    </div>
+                    <p style="margin-top:0.5rem; font-size:0.9rem; color:#111827;">Bordes irregulares</p>
+                </div>
+                <div>
+                    <div style="background:#FDE68A; border-radius:50%; width:36px; height:36px; 
+                                display:flex; align-items:center; justify-content:center; font-weight:bold; color:#92400E; margin:auto;">
+                        C
+                    </div>
+                    <p style="margin-top:0.5rem; font-size:0.9rem; color:#111827;">Color variado</p>
+                </div>
+                <div>
+                    <div style="background:#FDE68A; border-radius:50%; width:36px; height:36px; 
+                                display:flex; align-items:center; justify-content:center; font-weight:bold; color:#92400E; margin:auto;">
+                        D
+                    </div>
+                    <p style="margin-top:0.5rem; font-size:0.9rem; color:#111827;">Diámetro &gt; 6mm</p>
+                </div>
+                <div>
+                    <div style="background:#FDE68A; border-radius:50%; width:36px; height:36px; 
+                                display:flex; align-items:center; justify-content:center; font-weight:bold; color:#92400E; margin:auto;">
+                        E
+                    </div>
+                    <p style="margin-top:0.5rem; font-size:0.9rem; color:#111827;">Evolución</p>
+                </div>
+            </div>
+            <p style="color:#374151; font-size:0.9rem; text-align:center;">
+                Estas características aumentan la probabilidad de melanoma. 
+                Consulte a un dermatólogo si observa alguna.
+            </p>
+        </div>
+        """)
+
+        # === Tabla de métricas debajo ===
+        gr.HTML("""
+        <p style='color:#111827;'>Métricas lunar para consultar en casos</p>
         """)
         metrics_table = gr.Dataframe(
             headers=["Métrica", "Valor"],
@@ -214,6 +291,7 @@ button, .gr-button {
             col_count=(2, "fixed")
         )
 
+
     # === Aviso final ===
     gr.HTML("""
     <section style="text-align:center; padding: 1rem; margin-top: 2rem;">