Spaces:
Running
Running
File size: 11,494 Bytes
417182d 6d577ed 417182d a66f242 1eee2b9 417182d 1eee2b9 417182d a66f242 1eee2b9 417182d 1eee2b9 a66f242 70a6252 046250c 1eee2b9 70a6252 417182d ded21fd 417182d 1eee2b9 ade8158 6d577ed 1eee2b9 3d2d284 417182d a66f242 417182d a66f242 70a6252 046250c 70a6252 046250c 70a6252 73e47ce a189512 73e47ce a189512 73e47ce ded21fd 8f13bc3 a66f242 70a6252 a66f242 417182d 8f13bc3 1eee2b9 a66f242 70a6252 a66f242 1eee2b9 a66f242 70a6252 a66f242 1eee2b9 a66f242 1eee2b9 8f13bc3 73e47ce 417182d 8f13bc3 417182d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 |
<!DOCTYPE html>
<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> |