Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Asistente de Consulta Médica</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 */ | |
| .recording-indicator { animation: pulse 1.5s infinite; } | |
| @keyframes pulse { 0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;} } | |
| /* Modal de configuración */ | |
| #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 */ | |
| textarea, pre { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; } | |
| /* Botones deshabilitados */ | |
| button:disabled { opacity: 0.6; cursor: not-allowed; } | |
| /* --- INICIO: Estilos MÍNIMOS para Pestañas --- */ | |
| /* Control visibilidad contenido */ | |
| .tab-content { display: none; } | |
| .tab-content.active { display: block; } | |
| /* --- FIN: Estilos MÍNIMOS para Pestañas --- */ | |
| </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-2xl 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 de Transcripción y Análisis por IA</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 space-x-1" aria-label="Tabs"> | |
| <button id="tab-medical-analysis" | |
| class="tab-button w-16 h-12 flex items-center justify-center rounded-t-lg border-b-2 focus:outline-none transition-colors duration-150 ease-in-out cursor-pointer | |
| bg-indigo-600 text-white border-indigo-600" data-content-id="content-medical-analysis" | |
| data-active-classes="bg-indigo-600 text-white border-indigo-600" | |
| data-inactive-classes="text-indigo-600 border-transparent hover:bg-indigo-100" | |
| type="button" | |
| title="Análisis Médico"> | |
| <i class="fas fa-stethoscope text-xl"></i> | |
| </button> | |
| <button id="tab-lab-analysis" | |
| class="tab-button w-16 h-12 flex items-center justify-center rounded-t-lg border-b-2 focus:outline-none transition-colors duration-150 ease-in-out cursor-pointer | |
| text-pink-500 border-transparent hover:bg-pink-100" data-content-id="content-lab-analysis" | |
| data-active-classes="bg-pink-500 text-white border-pink-500" | |
| data-inactive-classes="text-pink-500 border-transparent hover:bg-pink-100" | |
| type="button" | |
| title="Análisis de Exámenes"> | |
| <i class="fas fa-flask text-xl"></i> | |
| </button> | |
| <a href="proa/proa.html" id="link-proa" | |
| class="w-16 h-12 flex items-center justify-center rounded-t-lg border-b-2 focus:outline-none transition-colors duration-150 ease-in-out cursor-pointer | |
| text-teal-600 border-transparent hover:bg-teal-100" | |
| title="Guías PROA"> | |
| <i class="fas fa-book-medical text-xl"></i> | |
| </a> | |
| <a href="GDPS/GDPS.html" id="link-gdps" | |
| class="w-16 h-12 flex items-center justify-center rounded-t-lg border-b-2 focus:outline-none transition-colors duration-150 ease-in-out cursor-pointer | |
| text-amber-600 border-transparent hover:bg-amber-100" | |
| title="Algoritmo DM2 – GDPS"> | |
| <i class="fas fa-pills text-xl"></i> | |
| </a> | |
| <a href="farmadosis/farmadosis.html" id="link-farmadosis" | |
| class="w-16 h-12 flex items-center justify-center rounded-t-lg border-b-2 focus:outline-none transition-colors duration-150 ease-in-out cursor-pointer | |
| text-fuchsia-600 border-transparent hover:bg-fuchsia-100" | |
| title="Calculadora de Dosis"> | |
| <i class="fas fa-syringe text-xl"></i> | |
| </a> | |
| </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 type="module" src="./js/main.js"></script> | |
| </body> | |
| </html> |