Hugging Face's logo

Spaces:
DHEIVER
/
neuroinsight
Running

App Files Community
neuroinsight / index.html
DHEIVER's picture
DHEIVER
Add 3 files
027362d verified
raw
history blame contribute delete
40.4 kB
 <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeuroInsight EEG - Plataforma Avançada de Análise Neural</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>
.eeg-canvas {
background-color: #0f172a;
height: 350px;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.electrode-map {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-radius: 8px;
position: relative;
}
.electrode {
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
background: #3b82f6;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 11px;
cursor: pointer;
transition: all 0.2s;
border: 2px solid #1e40af;
}
.electrode:hover {
transform: scale(1.3);
background: #2563eb;
}
.heat-map {
position: absolute;
border-radius: 50%;
opacity: 0.4;
}
.analysis-card {
transition: all 0.3s ease;
border-left-width: 4px;
}
.analysis-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
.signal-wave {
position: absolute;
height: 100%;
width: 100%;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 19px,
#334155 19px,
#334155 20px
);
}
.montage-selector {
scrollbar-width: thin;
scrollbar-color: #4b5563 #1f2937;
}
.montage-selector::-webkit-scrollbar {
height: 6px;
}
.montage-selector::-webkit-scrollbar-track {
background: #1f2937;
border-radius: 3px;
}
.montage-selector::-webkit-scrollbar-thumb {
background-color: #4b5563;
border-radius: 3px;
}
</style>
</head>
<body class="bg-slate-900 text-slate-100 font-sans">
<!-- Header -->
<header class="bg-slate-800 shadow-xl">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<i class="fas fa-brain text-blue-400 text-4xl"></i>
<h1 class="text-2xl font-bold">
<span class="text-blue-400">Neuro</span><span>Insight</span> <span class="text-sm bg-blue-700 px-3 py-1 rounded-full">EEG AI</span>
</h1>
</div>
<div class="flex items-center space-x-6">
<button id="uploadBtn" class="flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 px-5 py-2 rounded-lg transition-all duration-200 shadow-md">
<i class="fas fa-cloud-upload-alt"></i>
<span>Carregar EEG</span>
</button>
<input type="file" id="eegUpload" accept=".edf,.bdf,.set,.fif" class="hidden">
<div class="relative group">
<img src="https://randomuser.me/api/portraits/med/men/75.jpg" alt="User" class="w-10 h-10 rounded-full cursor-pointer border-2 border-slate-600 group-hover:border-blue-400 transition">
<div class="absolute -right-1 -bottom-1 bg-green-500 w-3 h-3 rounded-full border-2 border-slate-800"></div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-6">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<!-- Left Sidebar -->
<div class="lg:col-span-1 space-y-6">
<!-- Patient Info -->
<div class="bg-slate-800 rounded-xl p-5 shadow-lg">
<div class="flex items-center space-x-4 mb-4">
<div class="relative">
<img src="https://randomuser.me/api/portraits/med/women/68.jpg" alt="Patient" class="w-16 h-16 rounded-full border-2 border-slate-600">
<div class="absolute -right-1 -bottom-1 bg-blue-500 w-4 h-4 rounded-full border-2 border-slate-800"></div>
</div>
<div>
<h3 class="font-bold">Dr. Rafael Costa</h3>
<p class="text-sm text-slate-400">Neurocirurgião</p>
</div>
</div>
<div class="space-y-3">
<div>
<p class="text-xs text-slate-400">Paciente</p>
<p class="font-medium">Ana Lúcia Mendes, 38 anos</p>
</div>
<div>
<p class="text-xs text-slate-400">ID do Exame</p>
<p class="font-mono text-blue-400">EEG-2023-09-7821</p>
</div>
<div>
<p class="text-xs text-slate-400">Data</p>
<p class="font-medium">22/09/2023 09:15</p>
</div>
<div>
<p class="text-xs text-slate-400">Equipamento</p>
<p class="font-medium">ANT Neuro eego mylab</p>
</div>
</div>
</div>
<!-- Montage Selector -->
<div class="bg-slate-800 rounded-xl p-5 shadow-lg">
<h3 class="font-bold mb-3 flex items-center justify-between">
<span>Configuração de Montagem</span>
<i class="fas fa-sliders-h text-blue-400"></i>
</h3>
<div class="montage-selector overflow-x-auto whitespace-nowrap pb-2 space-x-2">
<button class="bg-blue-600 px-4 py-2 rounded-lg text-sm inline-flex items-center">
<i class="fas fa-map-marked-alt mr-2"></i> 10-20
</button>
<button class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg text-sm inline-flex items-center">
<i class="fas fa-route mr-2"></i> Bipolar
</button>
<button class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg text-sm inline-flex items-center">
<i class="fas fa-project-diagram mr-2"></i> Referencial
</button>
<button class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg text-sm inline-flex items-center">
<i class="fas fa-atom mr-2"></i> Laplaciano
</button>
</div>
</div>
<!-- Electrode Status -->
<div class="bg-slate-800 rounded-xl p-5 shadow-lg">
<h3 class="font-bold mb-3 flex items-center justify-between">
<span>Status dos Eletrodos</span>
<span class="text-xs bg-green-800 text-green-300 px-3 py-1 rounded-full flex items-center">
<i class="fas fa-check-circle mr-1"></i> Qualidade: 97%
</span>
</h3>
<div class="grid grid-cols-3 gap-3">
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center border border-green-800">
<p class="text-xs font-bold">Fp1</p>
<p class="text-green-400 text-xs">4.8kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center border border-green-800">
<p class="text-xs font-bold">Fp2</p>
<p class="text-green-400 text-xs">5.1kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center border border-green-800">
<p class="text-xs font-bold">F3</p>
<p class="text-green-400 text-xs">4.9kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center border border-green-800">
<p class="text-xs font-bold">F4</p>
<p class="text-green-400 text-xs">5.3kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center border border-green-800">
<p class="text-xs font-bold">C3</p>
<p class="text-green-400 text-xs">5.0kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center border border-green-800">
<p class="text-xs font-bold">C4</p>
<p class="text-green-400 text-xs">5.2kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center border border-green-800">
<p class="text-xs font-bold">P3</p>
<p class="text-green-400 text-xs">5.4kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center border border-green-800">
<p class="text-xs font-bold">P4</p>
<p class="text-green-400 text-xs">5.6kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center border border-green-800">
<p class="text-xs font-bold">O1</p>
<p class="text-green-400 text-xs">4.7kΩ</p>
</div>
</div>
</div>
<!-- Processing Controls -->
<div class="bg-slate-800 rounded-xl p-5 shadow-lg">
<h3 class="font-bold mb-3 flex items-center justify-between">
<span>Processamento de Sinais</span>
<i class="fas fa-microchip text-blue-400"></i>
</h3>
<div class="space-y-4">
<div>
<label class="block text-sm text-slate-400 mb-1">Filtro Notch</label>
<select class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
<option>60 Hz (Americas)</option>
<option selected>50 Hz (Brasil/Europa)</option>
<option>Desativado</option>
</select>
</div>
<div>
<label class="block text-sm text-slate-400 mb-1">Filtro Passa-Baixa</label>
<div class="flex items-center space-x-3">
<input type="range" min="1" max="100" value="45" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer" id="lowPassFilter">
<span class="text-sm w-12 text-center" id="lowPassValue">45 Hz</span>
</div>
</div>
<div>
<label class="block text-sm text-slate-400 mb-1">Filtro Passa-Alta</label>
<div class="flex items-center space-x-3">
<input type="range" min="0.1" max="10" step="0.1" value="0.5" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer" id="highPassFilter">
<span class="text-sm w-12 text-center" id="highPassValue">0.5 Hz</span>
</div>
</div>
<div class="pt-3">
<button id="processBtn" class="w-full bg-blue-600 hover:bg-blue-700 px-5 py-3 rounded-lg flex items-center justify-center space-x-3 transition-all duration-200 shadow-md">
<i class="fas fa-bolt"></i>
<span class="font-medium">Processar com IA</span>
</button>
</div>
</div>
</div>
</div>
<!-- Main EEG Display -->
<div class="lg:col-span-3 space-y-6">
<!-- Signal Display -->
<div class="bg-slate-800 rounded-xl p-5 shadow-lg">
<div class="flex justify-between items-center mb-5">
<h2 class="font-bold text-xl flex items-center">
<i class="fas fa-wave-square text-blue-400 mr-3"></i>
<span>Visualização do Sinal EEG</span>
</h2>
<div class="flex space-x-3">
<button class="bg-slate-700 hover:bg-slate-600 p-2.5 rounded-lg transition-all">
<i class="fas fa-search-plus"></i>
</button>
<button class="bg-slate-700 hover:bg-slate-600 p-2.5 rounded-lg transition-all">
<i class="fas fa-search-minus"></i>
</button>
<button class="bg-slate-700 hover:bg-slate-600 p-2.5 rounded-lg transition-all">
<i class="fas fa-arrows-alt-h"></i>
</button>
<button class="bg-blue-600 hover:bg-blue-700 p-2.5 rounded-lg transition-all">
<i class="fas fa-video"></i>
</button>
</div>
</div>
<div class="eeg-canvas mb-5" id="eegPlot">
<div class="signal-wave"></div>
<div class="absolute inset-0 flex items-center justify-center text-slate-500">
<div class="text-center">
<i class="fas fa-cloud-upload-alt text-4xl mb-3"></i>
<p>Carregue um arquivo EEG para visualização</p>
<p class="text-sm mt-1">Formatos suportados: .edf, .bdf, .set, .fif</p>
</div>
</div>
</div>
<div class="flex justify-between items-center text-sm">
<div class="flex space-x-5">
<div>
<span class="text-slate-400">Taxa de amostragem:</span>
<span class="font-mono">-</span>
</div>
<div>
<span class="text-slate-400">Resolução:</span>
<span class="font-mono">-</span>
</div>
<div>
<span class="text-slate-400">Duração:</span>
<span class="font-mono">-</span>
</div>
</div>
<div class="flex space-x-3">
<button class="bg-slate-700 hover:bg-slate-600 px-4 py-1.5 rounded-lg text-sm flex items-center">
<i class="fas fa-pause mr-2"></i> Pausar
</button>
<button class="bg-blue-600 hover:bg-blue-700 px-4 py-1.5 rounded-lg text-sm flex items-center">
<i class="fas fa-sync-alt mr-2"></i> Atualizar
</button>
</div>
</div>
</div>
<!-- Topography and Analysis -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Topography Map -->
<div class="bg-slate-800 rounded-xl p-5 shadow-lg">
<h3 class="font-bold mb-4 flex items-center">
<i class="fas fa-map-marked-alt text-blue-400 mr-3"></i>
<span>Topografia Cerebral</span>
</h3>
<div class="electrode-map h-80 mb-4">
<!-- Scalp outline -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3/4 h-3/4 bg-slate-900 rounded-full border-2 border-slate-600"></div>
<!-- Electrodes positioned on a scalp map -->
<div class="electrode" style="top: 12%; left: 30%;">Fp1</div>
<div class="electrode" style="top: 12%; left: 70%;">Fp2</div>
<div class="electrode" style="top: 22%; left: 25%;">F7</div>
<div class="electrode" style="top: 22%; left: 50%;">Fz</div>
<div class="electrode" style="top: 22%; left: 75%;">F8</div>
<div class="electrode" style="top: 32%; left: 30%;">F3</div>
<div class="electrode" style="top: 32%; left: 70%;">F4</div>
<div class="electrode" style="top: 42%; left: 20%;">T7</div>
<div class="electrode" style="top: 42%; left: 50%;">Cz</div>
<div class="electrode" style="top: 42%; left: 80%;">T8</div>
<div class="electrode" style="top: 52%; left: 30%;">C3</div>
<div class="electrode" style="top: 52%; left: 70%;">C4</div>
<div class="electrode" style="top: 62%; left: 25%;">P7</div>
<div class="electrode" style="top: 62%; left: 50%;">Pz</div>
<div class="electrode" style="top: 62%; left: 75%;">P8</div>
<div class="electrode" style="top: 72%; left: 30%;">P3</div>
<div class="electrode" style="top: 72%; left: 70%;">P4</div>
<div class="electrode" style="top: 82%; left: 40%;">O1</div>
<div class="electrode" style="top: 82%; left: 60%;">O2</div>
<!-- Topography heat maps -->
<div class="heat-map" style="width: 80%; height: 80%; top: 10%; left: 10%; background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, rgba(59, 130, 246, 0) 70%);"></div>
<div class="heat-map" style="width: 60%; height: 60%; top: 20%; left: 20%; background: radial-gradient(circle, rgba(239, 68, 68, 0.6) 0%, rgba(239, 68, 68, 0) 70%);"></div>
<div class="heat-map" style="width: 40%; height: 40%; top: 30%; left: 30%; background: radial-gradient(circle, rgba(16, 185, 129, 0.6) 0%, rgba(16, 185, 129, 0) 70%);"></div>
</div>
<div class="flex justify-between text-sm">
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
<span>Potencial Negativo</span>
</div>
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
<span>Potencial Positivo</span>
</div>
</div>
</div>
<!-- Frequency Analysis -->
<div class="bg-slate-800 rounded-xl p-5 shadow-lg">
<h3 class="font-bold mb-4 flex items-center">
<i class="fas fa-chart-line text-blue-400 mr-3"></i>
<span>Análise de Frequência</span>
</h3>
<div class="bg-slate-900 rounded-lg p-4 mb-4">
<div class="flex justify-between text-xs mb-2">
<span>0 Hz</span>
<span class="text-blue-400">Delta</span>
<span class="text-green-400">Theta</span>
<span class="text-yellow-400">Alpha</span>
<span class="text-red-400">Beta</span>
<span class="text-purple-400">Gamma</span>
</div>
<div class="w-full bg-slate-700 h-3 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-blue-500 via-green-500 to-yellow-500 via-red-500 to-purple-500" style="width: 100%;"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-slate-700 rounded-lg p-4">
<div class="text-center mb-2">
<p class="text-xs text-slate-400">Pico Alpha</p>
<p class="font-bold text-yellow-400 text-xl">- Hz</p>
</div>
<div class="h-24 bg-slate-800 rounded flex items-center justify-center text-slate-600">
<i class="fas fa-wave-square text-2xl"></i>
</div>
</div>
<div class="bg-slate-700 rounded-lg p-4">
<div class="text-center mb-2">
<p class="text-xs text-slate-400">Relação Theta/Beta</p>
<p class="font-bold text-purple-400 text-xl">-</p>
</div>
<div class="h-24 bg-slate-800 rounded flex items-center justify-center text-slate-600">
<i class="fas fa-percentage text-2xl"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Deep Learning Analysis -->
<div class="bg-slate-800 rounded-xl p-5 shadow-lg">
<div class="flex justify-between items-center mb-5">
<h3 class="font-bold text-xl flex items-center">
<i class="fas fa-robot text-blue-400 mr-3"></i>
<span>Análise por Deep Learning</span>
</h3>
<div class="flex items-center space-x-3">
<span class="text-xs bg-blue-800 text-blue-300 px-3 py-1 rounded-full">Modelo: EEGNet 4.2</span>
<span class="text-xs bg-green-800 text-green-300 px-3 py-1 rounded-full">Acurácia: 97.3%</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5" id="analysisResults">
<!-- Placeholder for analysis cards -->
<div class="bg-slate-700 rounded-lg p-5 flex items-center justify-center h-48 text-slate-500">
<div class="text-center">
<i class="fas fa-brain text-3xl mb-3"></i>
<p>Processe o EEG para obter análise</p>
</div>
</div>
<div class="bg-slate-700 rounded-lg p-5 flex items-center justify-center h-48 text-slate-500">
<div class="text-center">
<i class="fas fa-project-diagram text-3xl mb-3"></i>
<p>Detecção de anomalias neurais</p>
</div>
</div>
<div class="bg-slate-700 rounded-lg p-5 flex items-center justify-center h-48 text-slate-500">
<div class="text-center">
<i class="fas fa-dna text-3xl mb-3"></i>
<p>Padrões de atividade cerebral</p>
</div>
</div>
</div>
</div>
<!-- Neurologist Report -->
<div class="bg-slate-800 rounded-xl p-5 shadow-lg">
<div class="flex justify-between items-center mb-5">
<h3 class="font-bold text-xl flex items-center">
<i class="fas fa-file-medical-alt text-blue-400 mr-3"></i>
<span>Relatório Neurológico Automatizado</span>
</h3>
<button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg text-sm flex items-center">
<i class="fas fa-file-pdf mr-2"></i> Exportar PDF
</button>
</div>
<div class="bg-slate-900 rounded-lg p-5">
<div class="prose prose-invert max-w-none text-sm">
<div id="reportContent" class="text-center py-10 text-slate-500">
<i class="fas fa-file-alt text-4xl mb-4"></i>
<p class="text-lg">Relatório médico completo será gerado após processamento</p>
<p class="text-sm mt-2">Incluindo achados, impressão diagnóstica e recomendações</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-slate-800 py-8 mt-10">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<p class="text-sm text-slate-400">© 2023 NeuroInsight EEG - Plataforma de Análise Neural Avançada</p>
<p class="text-xs text-slate-600">Tecnologia de deep learning aplicada à neurociência clínica</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-slate-400 hover:text-blue-400 transition-colors duration-200 text-xl">
<i class="fab fa-github"></i>
</a>
<a href="#" class="text-slate-400 hover:text-blue-400 transition-colors duration-200 text-xl">
<i class="fab fa-researchgate"></i>
</a>
<a href="#" class="text-slate-400 hover:text-blue-400 transition-colors duration-200 text-xl">
<i class="fas fa-book"></i>
</a>
<a href="#" class="text-slate-400 hover:text-blue-400 transition-colors duration-200 text-xl">
<i class="fas fa-question-circle"></i>
</a>
</div>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// File upload handling
const uploadBtn = document.getElementById('uploadBtn');
const eegUpload = document.getElementById('eegUpload');
uploadBtn.addEventListener('click', function() {
eegUpload.click();
});
eegUpload.addEventListener('change', function(e) {
if (e.target.files.length > 0) {
const fileName = e.target.files[0].name;
const eegPlot = document.getElementById('eegPlot');
// Simulate file loading
eegPlot.innerHTML = `
<div class="signal-wave"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center fade-in">
<i class="fas fa-spinner fa-spin text-blue-400 text-4xl mb-3"></i>
<p>Processando arquivo: ${fileName}</p>
<p class="text-sm mt-2 text-slate-400">Aplicando filtros e preparando visualização...</p>
</div>
</div>
`;
// Simulate successful load after 2 seconds
setTimeout(function() {
eegPlot.innerHTML = `
<div class="signal-wave"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center fade-in">
<i class="fas fa-check-circle text-green-400 text-4xl mb-3"></i>
<p>Arquivo processado com sucesso!</p>
<p class="text-sm mt-2 text-slate-400">19 canais ativos | 1024 Hz | 24 bits</p>
</div>
</div>
`;
// Update file info
document.querySelectorAll('.font-mono').forEach(el => {
if (el.textContent === '-') {
el.textContent = '1024 Hz';
el.nextElementSibling.textContent = '24 bits';
el.nextElementSibling.nextElementSibling.textContent = '5:32 min';
}
});
}, 2000);
}
});
// Filter controls
const lowPassFilter = document.getElementById('lowPassFilter');
const highPassFilter = document.getElementById('highPassFilter');
const lowPassValue = document.getElementById('lowPassValue');
const highPassValue = document.getElementById('highPassValue');
lowPassFilter.addEventListener('input', function() {
lowPassValue.textContent = this.value + ' Hz';
});
highPassFilter.addEventListener('input', function() {
highPassValue.textContent = this.value + ' Hz';
});
// Process button
const processBtn = document.getElementById('processBtn');
const analysisResults = document.getElementById('analysisResults');
const reportContent = document.getElementById('reportContent');
processBtn.addEventListener('click', function() {
// Show processing state
processBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processando...';
processBtn.classList.add('opacity-75');
processBtn.disabled = true;
// Simulate processing with AI
setTimeout(function() {
// Update analysis cards
analysisResults.innerHTML = `
<div class="analysis-card bg-slate-700 rounded-lg p-5 border-l-blue-500 fade-in">
<div class="flex justify-between items-start mb-3">
<h4 class="font-bold text-sm">Atividade Epileptiforme</h4>
<span class="text-xs bg-red-800 text-red-300 px-3 py-1 rounded-full">Alerta</span>
</div>
<p class="text-xs text-slate-400 mb-4">Detectados complexos de onda aguda em regiões temporais esquerdas</p>
<div class="w-full bg-slate-800 rounded-full h-2 mb-2">
<div class="bg-red-500 h-2 rounded-full" style="width: 82%"></div>
</div>
<div class="flex justify-between text-xs">
<span>Probabilidade: 82%</span>
<span>Confiança: 94%</span>
</div>
</div>
<div class="analysis-card bg-slate-700 rounded-lg p-5 border-l-yellow-500 fade-in">
<div class="flex justify-between items-start mb-3">
<h4 class="font-bold text-sm">Atividade Focal</h4>
<span class="text-xs bg-yellow-800 text-yellow-300 px-3 py-1 rounded-full">Moderado</span>
</div>
<p class="text-xs text-slate-400 mb-4">Desorganização focal no lobo temporal esquerdo (T7, T5)</p>
<div class="w-full bg-slate-800 rounded-full h-2 mb-2">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 68%"></div>
</div>
<div class="flex justify-between text-xs">
<span>Probabilidade: 68%</span>
<span>Confiança: 89%</span>
</div>
</div>
<div class="analysis-card bg-slate-700 rounded-lg p-5 border-l-green-500 fade-in">
<div class="flex justify-between items-start mb-3">
<h4 class="font-bold text-sm">Ritmo de Base</h4>
<span class="text-xs bg-green-800 text-green-300 px-3 py-1 rounded-full">Normal</span>
</div>
<p class="text-xs text-slate-400 mb-4">Ritmo alfa posterior preservado (9.2Hz) com boa reatividade</p>
<div class="w-full bg-slate-800 rounded-full h-2 mb-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 91%"></div>
</div>
<div class="flex justify-between text-xs">
<span>Probabilidade: 91%</span>
<span>Confiança: 97%</span>
</div>
</div>
`;
// Update frequency analysis
document.querySelector('.text-yellow-400.text-xl').textContent = '9.2 Hz';
document.querySelector('.text-purple-400.text-xl').textContent = '2.3';
// Generate medical report
reportContent.innerHTML = `
<h4 class="text-blue-400">RESUMO DA ANÁLISE</h4>
<p>O exame EEG mostra atividade de base organizada com ritmo alfa posterior a 9.2 Hz, reativo à abertura ocular. Identificam-se descargas epileptiformes intermitentes na região temporal anterior esquerda (T7, T5), com morfologia de complexos de onda aguda e duração de 1.5-2 segundos, ocorrendo aproximadamente a cada 2 minutos.</p>
<h4 class="text-blue-400 mt-6">ACHADOS PRINCIPAIS</h4>
<ul class="list-disc pl-5 space-y-2">
<li><strong>Atividade epileptiforme:</strong> Descargas periódicas laterais temporais esquerdas (PLEDs-like) com probabilidade de 82% (confiança 94%)</li>
<li><strong>Atividade focal:</strong> Desorganização no lobo temporal esquerdo (68% probabilidade)</li>
<li><strong>Ritmo de base:</strong> Preservado com boa organização e simetria (91% probabilidade)</li>
<li><strong>Relação theta/beta:</strong> Elevada (2.3) sugerindo possível estado de baixa excitabilidade cortical</li>
</ul>
<h4 class="text-blue-400 mt-6">IMPRESSÃO DIAGNÓSTICA</h4>
<p>Padrão EEG sugestivo de epilepsia focal do lobo temporal esquerdo, compatível com esclerose mesial temporal. Recomenda-se correlação com ressonância magnética e avaliação clínica para possível indicação cirúrgica.</p>
<h4 class="text-blue-400 mt-6">RECOMENDAÇÕES</h4>
<ol class="list-decimal pl-5 space-y-2">
<li>Correlacionar com quadro clínico e história médica do paciente</li>
<li>Considerar estudo de monitorização prolongada (vídeo-EEG)</li>
<li>Ressonância magnética de encéfalo com protocolo para epilepsia</li>
<li>Avaliação por equipe multidisciplinar de epilepsia</li>
</ol>
<div class="mt-6 pt-4 border-t border-slate-700">
<p class="text-xs text-slate-400">Relatório gerado automaticamente pelo sistema NeuroInsight EEG. Este laudo não substitui a avaliação médica especializada. Última atualização do modelo: 15/09/2023.</p>
</div>
`;
// Reset process button
processBtn.innerHTML = '<i class="fas fa-bolt mr-2"></i> Processar com IA';
processBtn.classList.remove('opacity-75');
processBtn.disabled = false;
}, 3000);
});
// Electrode interaction
document.querySelectorAll('.electrode').forEach(elec => {
elec.addEventListener('click', function() {
const channel = this.textContent;
alert(`Canal EEG: ${channel}\n\nAmplitude média: 42.7µV\nImpedância: 5.2kΩ\nFrequência dominante: 8.7Hz\nPotencial: ${Math.random() > 0.5 ? 'Negativo' : 'Positivo'}`);
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DHEIVER/neuroinsight" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>