Spaces:

aarnal80
/

AppConsulta360

Running

App Files Files Community

aarnal80 commited on Apr 22

Commit

a66f242

verified ·

1 Parent(s): 2be59fa

Update index.html

Browse files

Files changed (1) hide show

index.html +138 -101

index.html CHANGED Viewed

@@ -3,144 +3,181 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Consulta Médica</title>
-  <!-- Bootstrap CSS -->
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     .recording-indicator { animation: pulse 1.5s infinite; }
     @keyframes pulse { 0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;} }
-  </style>
-  <style>
-    body { background-color: #f8f9fa; }
-    button { margin: 5px; padding: 10px 15px; border: none; background: #007BFF; color: white; border-radius: 4px; cursor: pointer; }
-    button:disabled { opacity: 0.6; cursor: not-allowed; }
     #configModal {
-  display: flex;
-  visibility: hidden;
-  opacity: 0;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0,0,0,0.7);
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-  transition: opacity 0.2s, visibility 0.2s;
-}
-#configModal.active {
-  visibility: visible;
-  opacity: 1;
-}
-#configContent {
-  background: white;
-  padding: 24px 20px;
-  border-radius: 8px;
-  width: 100%;
-  max-width: 420px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
-  position: relative;
-  z-index: 10000;
-}
     textarea, pre { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; }
   </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
-  <div class="mx-auto max-w-2xl p-6 my-8 bg-white rounded-xl shadow-md">
-    <div class="text-center mb-4">
       <h1 class="text-xl font-bold text-blue-800 flex items-center justify-center">
-        <i class="fas fa-user-md mr-3 text-blue-600"></i>Asistente de Consulta Médica
-      </h1>
       <p class="text-gray-600 mt-1">Herramienta para transcripción y análisis</p>
     </div>
-    <!-- Botón Configuración -->
     <div class="flex justify-end mb-4">
       <button id="btnConfig" class="border border-blue-500 text-blue-700 hover:bg-blue-50 px-4 py-2 rounded-lg flex items-center transition-colors">
         <i class="fas fa-cogs mr-2"></i>Configuración IA
       </button>
     </div>
-    <!-- Modal Configuración -->
     <div id="configModal">
       <div id="configContent">
-  <div id="iaConfigContainer"></div>
-</div>
     </div>
-    <!-- Controles de grabación -->
-    <div class="bg-blue-50 p-6 rounded-lg mb-6 border border-blue-100 shadow">
-      <h2 class="text-base font-semibold text-blue-700 mb-3 flex items-center">
-        <i class="fas fa-microphone-alt mr-2"></i>Audio de Consulta
-      </h2>
-      <div class="flex items-center gap-4 mb-3">
-        <button id="btnStart" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full flex items-center text-base shadow transition-colors" title="Iniciar">
-          <i class="fas fa-play mr-2"></i>Iniciar
         </button>
-        <button id="btnStop" disabled class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-full flex items-center text-base shadow transition-colors" title="Detener">
-          <i class="fas fa-stop mr-2"></i>Detener
         </button>
-      </div>
-      <p id="recorder-status" class="text-gray-500 text-sm flex items-center">
-        <i class="fas fa-circle text-gray-400 mr-2"></i>No hay consulta en progreso
-      </p>
     </div>
-    <!-- Transcripción -->
-    <div class="bg-purple-50 p-6 rounded-lg mb-6 border border-purple-100 shadow">
-      <h2 class="text-base font-semibold text-purple-700 mb-3 flex items-center">
-        <i class="fas fa-keyboard mr-2"></i>Transcripción <span id="trans-model-label" class="ml-2 text-sm font-normal text-purple-500"></span>
-      </h2>
-      <textarea id="transcript" rows="3" readonly
-        class="w-full p-4 mb-4 border border-gray-200 rounded-lg bg-white text-gray-800 resize-none shadow-inner focus:outline-none focus:ring-2 focus:ring-purple-300 transition overflow-y-auto"
-        style="min-height: 0; max-height: 90px; height: 90px;">Aquí aparecerá la transcripción...</textarea>
-      <div class="flex justify-end">
-        <button id="btnCopyTranscript" class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1.5 rounded-lg flex items-center text-sm transition-colors" type="button">
-          <i class="far fa-copy mr-2"></i>Copiar
-        </button>
-      </div>
-    </div>
-    <!-- Análisis Médico -->
-    <div class="bg-indigo-50 p-6 rounded-lg mb-6 border border-indigo-100 shadow">
-      <h2 class="text-base font-semibold text-indigo-700 mb-3 flex items-center">
-        <i class="fas fa-clipboard-check mr-2"></i>Análisis Médico <span id="analysis-model-label" class="ml-2 text-sm font-normal text-indigo-500"></span>
-      </h2>
-      <div class="bg-white p-4 rounded border border-gray-200 mb-4">
-        <div class="mb-4">
-          <h3 class="text-sm font-medium text-indigo-600 mb-1 flex items-center">
-            <i class="fas fa-notes-medical mr-2"></i>Enfermedad Actual
-          </h3>
-          <div id="output-enfermedad" class="bg-gray-50 p-3 rounded border border-gray-200 min-h-[48px]"></div>
         </div>
-        <div>
-          <h3 class="text-sm font-medium text-indigo-600 mb-1 flex items-center">
-            <i class="fas fa-procedures mr-2"></i>Exploración Física / Actuación
-          </h3>
-          <div id="output-exploracion" class="bg-gray-50 p-3 rounded border border-gray-200 min-h-[48px]"></div>
         </div>
       </div>
-      <div class="flex justify-end">
-        <button id="btnCopyAnalysis" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1.5 rounded-lg flex items-center text-sm transition-colors" type="button">
-          <i class="far fa-copy mr-2"></i>Copiar
-        </button>
       </div>
     </div>
-  </div> <!-- /.container -->
   <div class="text-center mt-8 pt-6 border-t border-gray-200">
     <p class="text-gray-600">
       Desarrollado por el Dr. Antonio J. Arnal Meinhardt<br>
       <span class="text-sm">Médico de Urgencias | Atención Primaria</span>
     </p>
   </div>
-  <!-- Bootstrap JS Bundle -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-  <!-- Main JS -->
   <script type="module" src="./js/main.js"></script>
-</body>
 </html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Asistente Médico Modular</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
+    /* Estilo base del body */
+    body { background-color: #f8f9fa; }
+    /* Indicador de grabación (sin cambios) */
     .recording-indicator { animation: pulse 1.5s infinite; }
     @keyframes pulse { 0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;} }
+    /* Modal de configuración (sin cambios) */
     #configModal {
+      display: flex; visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0;
+      width: 100vw; height: 100vh; background: rgba(0,0,0,0.7); align-items: center;
+      justify-content: center; z-index: 9999; transition: opacity 0.2s, visibility 0.2s;
+    }
+    #configModal.active { visibility: visible; opacity: 1; }
+    #configContent {
+      background: white; padding: 24px 20px; border-radius: 8px; width: 100%;
+      max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); position: relative; z-index: 10000;
+    }
+    /* Textarea y Pre (sin cambios) */
     textarea, pre { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; }
+    /* Estilo botones deshabilitados (usando Tailwind donde sea posible) */
+    button:disabled { opacity: 0.6; cursor: not-allowed; }
+    /* --- INICIO: Estilos para Pestañas y Contenido --- */
+    .tab-button {
+      /* Aplicamos clases Tailwind para estilo base y transiciones */
+      @apply px-4 py-2 rounded-t-lg border-b-2 border-transparent transition-colors duration-150 ease-in-out text-gray-500 hover:text-blue-600 hover:border-blue-300 focus:outline-none;
+    }
+    .tab-button.active {
+      /* Clases Tailwind para la pestaña activa */
+      @apply text-blue-700 border-blue-600 font-semibold;
+    }
+    .tab-content {
+      display: none; /* Ocultar contenido por defecto */
+    }
+    .tab-content.active {
+      display: block; /* Mostrar contenido activo */
+    }
+    /* --- FIN: Estilos para Pestañas y Contenido --- */
   </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
+  <div class="mx-auto max-w-2xl p-6 my-8 bg-white rounded-xl shadow-md"> <div class="text-center mb-4">
       <h1 class="text-xl font-bold text-blue-800 flex items-center justify-center">
+        <i class="fas fa-user-md mr-3 text-blue-600"></i>Asistente Médico Modular </h1>
       <p class="text-gray-600 mt-1">Herramienta para transcripción y análisis</p>
     </div>
     <div class="flex justify-end mb-4">
       <button id="btnConfig" class="border border-blue-500 text-blue-700 hover:bg-blue-50 px-4 py-2 rounded-lg flex items-center transition-colors">
         <i class="fas fa-cogs mr-2"></i>Configuración IA
       </button>
     </div>
     <div id="configModal">
       <div id="configContent">
+        <div id="iaConfigContainer"></div>
+      </div>
     </div>
+    <div class="border-b border-gray-200 mb-6">
+      <nav class="flex -mb-px" aria-label="Tabs">
+        <button id="tab-medical-analysis" class="tab-button active" data-target="content-medical-analysis" type="button">
+          <i class="fas fa-stethoscope mr-2"></i>Análisis Médico
         </button>
+        <button id="tab-lab-analysis" class="tab-button" data-target="content-lab-analysis" type="button">
+          <i class="fas fa-flask mr-2"></i>Análisis de Exámenes
         </button>
+      </nav>
     </div>
+    <div id="tab-content-container">
+      <div id="content-medical-analysis" class="tab-content active">
+        <div class="bg-blue-50 p-6 rounded-lg mb-6 border border-blue-100 shadow">
+          <h2 class="text-base font-semibold text-blue-700 mb-3 flex items-center">
+            <i class="fas fa-microphone-alt mr-2"></i>Audio de Consulta
+          </h2>
+          <div class="flex items-center gap-4 mb-3">
+            <button id="btnStart" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full flex items-center text-base shadow transition-colors" title="Iniciar">
+              <i class="fas fa-play mr-2"></i>Iniciar
+            </button>
+            <button id="btnStop" disabled class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-full flex items-center text-base shadow transition-colors" title="Detener">
+              <i class="fas fa-stop mr-2"></i>Detener
+            </button>
+          </div>
+          <p id="recorder-status" class="text-gray-500 text-sm flex items-center">
+            <i class="fas fa-circle text-gray-400 mr-2"></i>No hay consulta en progreso
+          </p>
+        </div>
+        <div class="bg-purple-50 p-6 rounded-lg mb-6 border border-purple-100 shadow">
+          <h2 class="text-base font-semibold text-purple-700 mb-3 flex items-center">
+            <i class="fas fa-keyboard mr-2"></i>Transcripción <span id="trans-model-label" class="ml-2 text-sm font-normal text-purple-500"></span>
+          </h2>
+          <textarea id="transcript" rows="3" readonly
+            class="w-full p-4 mb-4 border border-gray-200 rounded-lg bg-white text-gray-800 resize-none shadow-inner focus:outline-none focus:ring-2 focus:ring-purple-300 transition overflow-y-auto"
+            style="min-height: 0; max-height: 90px; height: 90px;">Aquí aparecerá la transcripción...</textarea>
+          <div class="flex justify-end">
+            <button id="btnCopyTranscript" class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1.5 rounded-lg flex items-center text-sm transition-colors" type="button">
+              <i class="far fa-copy mr-2"></i>Copiar
+            </button>
+          </div>
+        </div>
+        <div class="bg-indigo-50 p-6 rounded-lg mb-6 border border-indigo-100 shadow">
+          <h2 class="text-base font-semibold text-indigo-700 mb-3 flex items-center">
+            <i class="fas fa-clipboard-check mr-2"></i>Análisis Médico <span id="analysis-model-label" class="ml-2 text-sm font-normal text-indigo-500"></span>
+          </h2>
+          <div class="bg-white p-4 rounded border border-gray-200 mb-4">
+            <div class="mb-4">
+              <h3 class="text-sm font-medium text-indigo-600 mb-1 flex items-center">
+                <i class="fas fa-notes-medical mr-2"></i>Enfermedad Actual
+              </h3>
+              <div id="output-enfermedad" class="bg-gray-50 p-3 rounded border border-gray-200 min-h-[48px]"></div>
+            </div>
+            <div>
+              <h3 class="text-sm font-medium text-indigo-600 mb-1 flex items-center">
+                <i class="fas fa-procedures mr-2"></i>Exploración Física / Actuación
+              </h3>
+              <div id="output-exploracion" class="bg-gray-50 p-3 rounded border border-gray-200 min-h-[48px]"></div>
+            </div>
+          </div>
+          <div class="flex justify-end">
+            <button id="btnCopyAnalysis" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1.5 rounded-lg flex items-center text-sm transition-colors" type="button">
+              <i class="far fa-copy mr-2"></i>Copiar
+            </button>
+          </div>
         </div>
+        </div>
+      <div id="content-lab-analysis" class="tab-content">
+        <div class="bg-pink-50 p-6 rounded-lg mb-6 border border-pink-100 shadow"> <h2 class="text-base font-semibold text-pink-700 mb-4 flex items-center">
+            <i class="fas fa-vial mr-2"></i>Introducir Resultados de Laboratorio
+          </h2>
+          <textarea id="lab-input-text" rows="8"
+            class="w-full p-4 mb-4 border border-gray-300 rounded-lg bg-white text-gray-800 shadow-inner focus:outline-none focus:ring-2 focus:ring-pink-300 transition"
+            placeholder="Pega aquí los resultados del análisis de laboratorio..."
+          ></textarea>
+          <div class="flex items-center gap-4 mb-6">
+             <button id="btnAnalyzeLabs" class="bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded-lg flex items-center text-base shadow transition-colors" title="Analizar Resultados">
+               <i class="fas fa-cogs mr-2"></i>Analizar Resultados
+             </button>
+             <div id="lab-loading-indicator" style="display: none;" class="text-pink-600 flex items-center">
+                 <i class="fas fa-spinner fa-spin mr-2"></i>Procesando...
+             </div>
+          </div>
+          <div class="bg-white p-4 rounded border border-gray-200 mb-4">
+            <div class="flex justify-between items-center mb-3">
+               <h3 class="text-sm font-medium text-pink-600 flex items-center">
+                  <i class="fas fa-file-medical-alt mr-2"></i>Resultados Procesados <span id="lab-model-label" class="ml-2 text-xs font-normal text-pink-500"></span> </h3>
+               <div class="flex items-center">
+                 <input type="checkbox" id="filterAlteredLabs" class="mr-2 h-4 w-4 text-pink-600 rounded focus:ring-pink-500">
+                 <label for="filterAlteredLabs" class="text-sm text-gray-700 select-none cursor-pointer">Mostrar solo alterados</label>
+               </div>
+            </div>
+            <div id="lab-results-output" class="bg-gray-50 p-3 rounded border border-gray-200 min-h-[100px] whitespace-pre-wrap font-mono text-sm">
+              </div>
+          </div>
+           <div class="flex justify-end">
+            <button id="btnCopyLabResults" class="bg-pink-600 hover:bg-pink-700 text-white px-3 py-1.5 rounded-lg flex items-center text-sm transition-colors" type="button">
+              <i class="far fa-copy mr-2"></i>Copiar Resultados
+            </button>
+          </div>
         </div>
       </div>
       </div>
     </div>
   <div class="text-center mt-8 pt-6 border-t border-gray-200">
     <p class="text-gray-600">
       Desarrollado por el Dr. Antonio J. Arnal Meinhardt<br>
       <span class="text-sm">Médico de Urgencias | Atención Primaria</span>
     </p>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
   <script type="module" src="./js/main.js"></script>
+  </body>
 </html>