Update web/diagnosis.html

web/diagnosis.html

@@ -9,7 +9,7 @@
     <title>Diagnóstico IA</title>
     <link rel="stylesheet" href="css/simplebar.css">
     <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="css/feather.css">
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <link rel="stylesheet" href="css/select2.css">
     <link rel="stylesheet" href="css/dropzone.css">
     <link rel="stylesheet" href="css/uppy.min.css">
@@ -195,7 +195,7 @@
     <!-- Navegación superior -->
     <nav class="topnav navbar navbar-light">
         <button type="button" class="navbar-toggler text-muted mt-2 p-0 mr-3 collapseSidebar">
-            <i class="fe fe-menu navbar-toggler-icon"></i>
+            <i data-feather="menu" class="navbar-toggler-icon"></i>
         </button>
 
         <ul class="nav">
@@ -213,7 +213,7 @@
     </nav>
     <aside class="sidebar-left border-right bg-white shadow" id="leftSidebar" data-simplebar>
         <a href="#" class="btn collapseSidebar toggle-btn d-lg-none text-muted ml-2 mt-3" data-toggle="toggle">
-            <i class="fe fe-x"><span class="sr-only"></span></i>
+            <i data-feather="x"><span class="sr-only"></span></i>
         </a>
         <nav class="vertnav navbar navbar-light">
             <!-- nav bar -->
@@ -226,31 +226,31 @@
             <ul class="navbar-nav flex-fill w-100 mb-2">
                 <li class="nav-item">
                     <a class="nav-link" href="./index.html">
-                        <i class="fe fe-home fe-16"></i>
+                        <i data-feather="home" class="fe-16"></i>
                         <span class="ml-3 item-text">Dashboard</span>
                     </a>
                 </li>
                 <li class="nav-item active">
                     <a class="nav-link" href="./diagnosis.html">
-                        <i class="fe fe-eye fe-16"></i>
+                        <i data-feather="eye" class="fe-16"></i>
                         <span class="ml-3 item-text">Diagnóstico</span>
                     </a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="./patients.html">
-                        <i class="fe fe-users fe-16"></i>
+                        <i data-feather="users" class="fe-16"></i>
                         <span class="ml-3 item-text">Pacientes</span>
                     </a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="./historial-consultas.html">
-                        <i class="fe fe-file-text fe-16"></i>
+                        <i data-feather="file-text" class="fe-16"></i>
                         <span class="ml-3 item-text">Consultas</span>
                     </a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="./users.html">
-                        <i class="fe fe-user fe-16"></i>
+                        <i data-feather="user" class="fe-16"></i>
                         <span class="ml-3 item-text">Usuarios</span>
                     </a>
                 </li>
@@ -267,7 +267,7 @@
                     <div class="row align-items-center mb-4">
                         <div class="col">
                             <h2 class="h3 page-title">
-                                <i class="fe fe-eye fe-24 mr-2 text-primary"></i>
+                                <i data-feather="eye" class="fe-24 mr-2 text-primary"></i>
                                 Diagnóstico con Inteligencia Artificial
                             </h2>
                             <p class="text-muted">Diagnostico de retinopatía diabética mediante análisis de imágenes</p>
@@ -280,7 +280,7 @@
                             <div class="card shadow mb-4">
                                 <div class="card-header">
                                     <h5 class="card-title mb-0">
-                                        <i class="fe fe-upload fe-16 mr-2"></i>Cargar Imágenes para Análisis
+                                        <i data-feather="upload" class="fe-16 mr-2"></i>Cargar Imágenes para Análisis
                                     </h5>
                                 </div>
                                 <div class="card-body">
@@ -294,7 +294,7 @@
 
                                             <!-- Zona de carga 2 -->
                                             <div id="uploadZone2" class="upload-zone" data-zone="2">
-                                                <i class="fe fe-camera fe-48 text-muted mb-3"></i>
+                                                <i data-feather="camera" class="fe-48 text-muted mb-3"></i>
                                                 <h5 class="text-muted">Arrastra una imagen aquí o haz clic para seleccionar</h5>
                                                 <p class="text-muted mb-0">Formatos soportados: JPG, PNG, JPEG (Máx. 10MB)</p>
                                             </div>
@@ -304,13 +304,13 @@
                                                 <img id="previewImg2" class="image-preview" alt="Vista previa">
                                                 <div class="mt-3">
                                                     <button class="btn btn-success btn-lg mr-2" id="analyzeBtn2">
-                                                        <i class="fe fe-zap fe-16 mr-2"></i>Analizar con IA
+                                                        <i data-feather="zap" class="fe-16 mr-2"></i>Analizar con IA
                                                     </button>
                                                     <button class="btn btn-outline-secondary mr-2" id="clearBtn2">
-                                                        <i class="fe fe-x fe-16 mr-2"></i>Limpiar
+                                                        <i data-feather="x" class="fe-16 mr-2"></i>Limpiar
                                                     </button>
                                                     <button class="btn btn-warning gradcam-btn" id="gradcamBtn2" style="display: none;">
-                                                        <i class="fe fe-eye fe-16 mr-2"></i>Ver Grad-CAM
+                                                        <i data-feather="eye" class="fe-16 mr-2"></i>Ver Grad-CAM
                                                     </button>
                                                 </div>
                                             </div>
@@ -320,7 +320,7 @@
                                                 <div class="card shadow mb-4 analysis-card">
                                                     <div class="card-body">
                                                         <h5 class="mb-4">
-                                                            <i class="fe fe-activity fe-16 mr-2"></i>Resultados - Ojo Derecho
+                                                            <i data-feather="activity" class="fe-16 mr-2"></i>Resultados - Ojo Derecho
                                                         </h5>
                                                         <div id="resultContent2"></div>
                                                     </div>
@@ -337,7 +337,7 @@
 
                                             <!-- Zona de carga 1 -->
                                             <div id="uploadZone1" class="upload-zone" data-zone="1">
-                                                <i class="fe fe-camera fe-48 text-muted mb-3"></i>
+                                                <i data-feather="camera" class="fe-48 text-muted mb-3"></i>
                                                 <h5 class="text-muted">Arrastra una imagen aquí o haz clic para seleccionar</h5>
                                                 <p class="text-muted mb-0">Formatos soportados: JPG, PNG, JPEG (Máx. 10MB)</p>
                                             </div>
@@ -347,13 +347,13 @@
                                                 <img id="previewImg1" class="image-preview" alt="Vista previa">
                                                 <div class="mt-3">
                                                     <button class="btn btn-success btn-lg mr-2" id="analyzeBtn1">
-                                                        <i class="fe fe-zap fe-16 mr-2"></i>Analizar con IA
+                                                        <i data-feather="zap" class="fe-16 mr-2"></i>Analizar con IA
                                                     </button>
                                                     <button class="btn btn-outline-secondary mr-2" id="clearBtn1">
-                                                        <i class="fe fe-x fe-16 mr-2"></i>Limpiar
+                                                        <i data-feather="x" class="fe-16 mr-2"></i>Limpiar
                                                     </button>
                                                     <button class="btn btn-warning gradcam-btn" id="gradcamBtn1" style="display: none;">
-                                                        <i class="fe fe-eye fe-16 mr-2"></i>Ver Grad-CAM
+                                                        <i data-feather="eye" class="fe-16 mr-2"></i>Ver Grad-CAM
                                                     </button>
                                                 </div>
                                             </div>
@@ -363,7 +363,7 @@
                                                 <div class="card shadow mb-4 analysis-card">
                                                     <div class="card-body">
                                                         <h5 class="mb-4">
-                                                            <i class="fe fe-activity fe-16 mr-2"></i>Resultados - Ojo Izquierdo
+                                                            <i data-feather="activity" class="fe-16 mr-2"></i>Resultados - Ojo Izquierdo
                                                         </h5>
                                                         <div id="resultContent1"></div>
                                                     </div>
@@ -380,7 +380,7 @@
                             <div class="card shadow mb-4">
                                 <div class="card-header">
                                     <h6 class="card-title mb-0">
-                                        <i class="fe fe-user fe-16 mr-2"></i>Información del Paciente y Consulta
+                                        <i data-feather="user" class="fe-16 mr-2"></i>Información del Paciente y Consulta
                                     </h6>
                                 </div>
                                 <div class="card-body">
@@ -436,7 +436,7 @@
                                     </div>
 
                                     <button class="btn btn-primary btn-block" id="saveConsultationBtn" type="button">
-                                        <i class="fe fe-save fe-16 mr-2"></i>Guardar Consulta
+                                        <i data-feather="save" class="fe-16 mr-2"></i>Guardar Consulta
                                     </button>
                                 </div>
                             </div>
@@ -445,7 +445,7 @@
                             <div class="card shadow mb-4">
                                 <div class="card-header">
                                     <h6 class="card-title mb-0">
-                                        <i class="fe fe-info fe-16 mr-2"></i>Importante
+                                        <i data-feather="info" class="fe-16 mr-2"></i>Importante
                                     </h6>
                                 </div>
                                 <div class="card-body">
@@ -725,7 +725,7 @@
                     }
 
                     $(`#analyzeBtn${zoneNumber}`).prop('disabled', false)
-                        .html('<i class="fe fe-zap fe-16 mr-2"></i>Analizar con IA')
+                        .html('<i data-feather="zap" class="fe-16 mr-2"></i>Analizar con IA')
                         .removeClass('pulse-animation');
 
                     showAnalysisResults(mockResult, zoneNumber);
@@ -738,7 +738,7 @@
             api.predict(imageData, fileName).then(function(result) {
                 // Restaurar boton
                 $(`#analyzeBtn${zoneNumber}`).prop('disabled', false)
-                    .html('<i class="fe fe-zap fe-16 mr-2"></i>Analizar con IA')
+                    .html('<i data-feather="zap" class="fe-16 mr-2"></i>Analizar con IA')
                     .removeClass('pulse-animation');
 
                 if (result && result.success) {
@@ -820,7 +820,7 @@
         <div class="card shadow-sm mt-3">
             <div class="card-header d-flex justify-content-between align-items-center">
                 <h6 class="mb-0">
-                    <i class="fe fe-bar-chart-2 fe-16 mr-2"></i>Detalles del Análisis
+                    <i data-feather="bar-chart-2" class="fe-16 mr-2"></i>Detalles del Análisis
                 </h6>
                 <span class="badge badge-pill ${isPositive ? 'badge-warning' : 'badge-success'}">${confidence}%</span>
             </div>
@@ -848,7 +848,7 @@
                         <div class="border-right">
                             <h6 class="text-muted mb-0">Análisis realizado</h6>
                             <small class="text-muted">
-                                <i class="fe fe-clock fe-12 mr-1"></i>
+                                <i data-feather="clock" class="fe-12 mr-1"></i>
                                 ${moment ? moment(result.timestamp).format('DD/MM/YYYY HH:mm') : new Date(result.timestamp).toLocaleString()}
                             </small>
                         </div>
@@ -856,7 +856,7 @@
                     <div class="col-6">
                         <h6 class="text-muted mb-0">Modelo utilizado</h6>
                         <small class="text-muted">
-                            <i class="fe fe-cpu fe-12 mr-1"></i>
+                            <i data-feather="cpu" class="fe-12 mr-1"></i>
                             EfficientNetB0
                         </small>
                     </div>
@@ -1011,7 +1011,7 @@
                 console.log('Eel no disponible - simulando guardado');
                 setTimeout(() => {
                     $('#saveConsultationBtn').prop('disabled', false)
-                        .html('<i class="fe fe-save fe-16 mr-2"></i>Guardar Consulta');
+                        .html('<i data-feather="save" class="fe-16 mr-2"></i>Guardar Consulta');
                     showAlert('success', 'Consulta guardada correctamente (simulación)');
                 }, 1500);
                 return;
@@ -1023,7 +1023,7 @@
 
                 // Restaurar boton
                 $('#saveConsultationBtn').prop('disabled', false)
-                    .html('<i class="fe fe-save fe-16 mr-2"></i>Guardar Consulta');
+                    .html('<i data-feather="save" class="fe-16 mr-2"></i>Guardar Consulta');
 
                 if (response && response.success) {
                     showAlert('success', 'Consulta guardada correctamente');
@@ -1067,7 +1067,7 @@ if (false) { /* removed */ }
             api.gradcam(imageData, fileName, lastResult).then(function(response) {
                 // Restaurar boton
                 $(`#gradcamBtn${zoneNumber}`).prop('disabled', false)
-                    .html('<i class="fe fe-eye fe-16 mr-2"></i>Ver Grad-CAM');
+                    .html('<i data-feather="eye" class="fe-16 mr-2"></i>Ver Grad-CAM');
 
                 if (response && response.success) {
                     console.log('Grad-CAM generado exitosamente');
@@ -1097,7 +1097,7 @@ if (false) { /* removed */ }
         <div class="modal-content">
             <div class="modal-header bg-danger text-white">
                 <h5 class="modal-title">
-                    <i class="fe fe-eye mr-2"></i>Zoom HD - ${eyeName}
+                    <i data-feather="eye" class="mr-2"></i>Zoom HD - ${eyeName}
                     <span class="badge badge-light text-danger ml-2">Retinopatía Detectada</span>
                 </h5>
                 <button type="button" class="close text-white" data-dismiss="modal">
@@ -1112,7 +1112,7 @@ if (false) { /* removed */ }
                          alt="Zoom HD - Región Crítica">
                     <div class="mt-3">
                         <h6 class="text-danger mb-2">
-                            <i class="fe fe-zoom-in mr-2"></i>Zona Crítica en Alta Resolución
+                            <i data-feather="zoom-in" class="mr-2"></i>Zona Crítica en Alta Resolución
                         </h6>
                         <p class="text-muted mb-0">
                             <strong>Activación máxima:</strong> ${maxAct} |
@@ -1129,7 +1129,7 @@ if (false) { /* removed */ }
                     </div>
                     <div class="alert alert-${alertType}">
                         <small>
-                            <i class="fe fe-info mr-1"></i>
+                            <i data-feather="info" class="mr-1"></i>
                             ${clinical}
                         </small>
                     </div>
@@ -1137,10 +1137,10 @@ if (false) { /* removed */ }
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-outline-primary" onclick="downloadGradCAMImage(${zoneNumber})">
-                    <i class="fe fe-download mr-2"></i>Descargar Imagen
+                    <i data-feather="download" class="mr-2"></i>Descargar Imagen
                 </button>
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">
-                    <i class="fe fe-x mr-2"></i>Cerrar
+                    <i data-feather="x" class="mr-2"></i>Cerrar
                 </button>
             </div>
         </div>
@@ -1232,7 +1232,7 @@ if (false) { /* removed */ }
 
             const alertHtml = `
         <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
-            <i class="fe fe-${type === 'error' ? 'x-circle' : type === 'success' ? 'check-circle' : type === 'warning' ? 'alert-triangle' : 'info'} mr-2"></i>
+            ${(function(){var n=type==='error'?'x-circle':type==='success'?'check-circle':type==='warning'?'alert-triangle':'info';return typeof feather!=='undefined'?feather.icons[n].toSvg({'width':16,'height':16,'stroke-width':1.8,'style':'margin-right:6px;vertical-align:middle;'}):'';})()}
             ${message}
             <button type="button" class="close" data-dismiss="alert">
                 <span aria-hidden="true">&times;</span>
@@ -1408,5 +1408,17 @@ if (false) { /* removed */ }
 <script src="js/gauge.min.js"></script>
 <script src="js/jquery.sparkline.min.js"></script>
 <script src="js/apps.js"></script>
+<script>
+    function _initFeather() {
+        if (typeof feather !== 'undefined') feather.replace({ 'stroke-width': 1.8 });
+    }
+    document.addEventListener('DOMContentLoaded', _initFeather);
+    var _fObserver = new MutationObserver(function(mutations) {
+        if (mutations.some(function(m){ return m.addedNodes.length > 0; })) _initFeather();
+    });
+    document.addEventListener('DOMContentLoaded', function() {
+        _fObserver.observe(document.body, { childList: true, subtree: true });
+    });
+</script>
 </body>
 </html>