neurovision / index.html
DHEIVER's picture
Add 3 files
ada4224 verified
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeuroVision EEG - Plataforma Avançada de Análise de EEG</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>
.signal-plot {
background-color: #1a202c;
height: 300px;
border-radius: 8px;
position: relative;
}
.montage-selector {
scrollbar-width: thin;
scrollbar-color: #4a5568 #2d3748;
}
.montage-selector::-webkit-scrollbar {
height: 8px;
}
.montage-selector::-webkit-scrollbar-track {
background: #2d3748;
}
.montage-selector::-webkit-scrollbar-thumb {
background-color: #4a5568;
border-radius: 4px;
}
.analysis-card {
transition: all 0.3s ease;
}
.analysis-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.eeg-electrode {
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
background: #4299e1;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 10px;
cursor: pointer;
transition: all 0.2s;
}
.eeg-electrode:hover {
transform: scale(1.2);
background: #3182ce;
}
.topography-map {
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
border-radius: 8px;
position: relative;
overflow: hidden;
}
.topography-contour {
position: absolute;
border-radius: 50%;
opacity: 0.3;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 font-sans">
<!-- Header -->
<header class="bg-gray-800 shadow-lg">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<i class="fas fa-brain text-blue-400 text-3xl"></i>
<h1 class="text-2xl font-bold">
<span class="text-blue-400">Neuro</span><span>Vision</span> <span class="text-sm bg-blue-600 px-2 py-1 rounded">EEG Pro</span>
</h1>
</div>
<div class="flex items-center space-x-6">
<button class="flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition">
<i class="fas fa-cloud-upload-alt"></i>
<span>Carregar EEG</span>
</button>
<div class="relative">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User" class="w-10 h-10 rounded-full cursor-pointer">
<div class="absolute -right-1 -bottom-1 bg-green-500 w-3 h-3 rounded-full border-2 border-gray-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-6">
<!-- Left Sidebar -->
<div class="lg:col-span-1 space-y-6">
<!-- Patient Info -->
<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
<div class="flex items-center space-x-4 mb-4">
<div class="relative">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient" class="w-16 h-16 rounded-full">
<div class="absolute -right-1 -bottom-1 bg-blue-500 w-4 h-4 rounded-full border-2 border-gray-800"></div>
</div>
<div>
<h3 class="font-bold">Dra. Ana Silva</h3>
<p class="text-sm text-gray-400">Neurologista</p>
</div>
</div>
<div class="space-y-3">
<div>
<p class="text-xs text-gray-400">Paciente</p>
<p class="font-medium">Carlos Mendes, 42 anos</p>
</div>
<div>
<p class="text-xs text-gray-400">ID do Exame</p>
<p class="font-mono text-blue-400">EEG-2023-08-4567</p>
</div>
<div>
<p class="text-xs text-gray-400">Data</p>
<p class="font-medium">15/08/2023 14:30</p>
</div>
<div>
<p class="text-xs text-gray-400">Equipamento</p>
<p class="font-medium">Natus Quantum LTM</p>
</div>
</div>
</div>
<!-- Montage Selector -->
<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
<h3 class="font-bold mb-3 flex items-center justify-between">
<span>Configuração de Montagem</span>
<i class="fas fa-cog 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-3 py-1 rounded-lg text-sm inline-block">10-20 Padrão</button>
<button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm inline-block">Bipolar Longitudinal</button>
<button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm inline-block">Bipolar Transversal</button>
<button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm inline-block">Referencial</button>
<button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm inline-block">Laplaciano</button>
</div>
</div>
<!-- Electrode Status -->
<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
<h3 class="font-bold mb-3 flex items-center justify-between">
<span>Status dos Eletrodos</span>
<span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded">Qualidade: 98%</span>
</h3>
<div class="grid grid-cols-4 gap-2">
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center">
<p class="text-xs">Fp1</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">
<p class="text-xs">Fp2</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">
<p class="text-xs">F3</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">
<p class="text-xs">F4</p>
<p class="text-green-400 text-xs">6.3kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center">
<p class="text-xs">C3</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">
<p class="text-xs">C4</p>
<p class="text-green-400 text-xs">5.7kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center">
<p class="text-xs">P3</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">
<p class="text-xs">P4</p>
<p class="text-green-400 text-xs">5.5kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center">
<p class="text-xs">O1</p>
<p class="text-green-400 text-xs">4.7kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center">
<p class="text-xs">O2</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">
<p class="text-xs">T3</p>
<p class="text-green-400 text-xs">6.1kΩ</p>
</div>
<div class="bg-green-900 bg-opacity-40 p-2 rounded text-center">
<p class="text-xs">T4</p>
<p class="text-green-400 text-xs">5.8kΩ</p>
</div>
</div>
</div>
<!-- Processing Controls -->
<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
<h3 class="font-bold mb-3">Controles de Processamento</h3>
<div class="space-y-4">
<div>
<label class="block text-sm text-gray-400 mb-1">Filtro Notch (Hz)</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-sm">
<option>60 Hz (Americas)</option>
<option selected>50 Hz (Brasil/Europa)</option>
<option>Desativado</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-400 mb-1">Filtro Passa-Baixa</label>
<div class="flex items-center space-x-2">
<input type="range" min="1" max="100" value="70" class="w-full">
<span class="text-sm w-12">70 Hz</span>
</div>
</div>
<div>
<label class="block text-sm text-gray-400 mb-1">Filtro Passa-Alta</label>
<div class="flex items-center space-x-2">
<input type="range" min="0.1" max="10" step="0.1" value="0.5" class="w-full">
<span class="text-sm w-12">0.5 Hz</span>
</div>
</div>
<div class="pt-2">
<button class="w-full bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center justify-center space-x-2 transition">
<i class="fas fa-bolt"></i>
<span>Processar EEG</span>
</button>
</div>
</div>
</div>
</div>
<!-- Main EEG Display -->
<div class="lg:col-span-3 space-y-6">
<!-- Signal Display -->
<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
<div class="flex justify-between items-center mb-4">
<h2 class="font-bold text-lg">Visualização do Sinal EEG</h2>
<div class="flex space-x-2">
<button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
<i class="fas fa-search-plus"></i>
</button>
<button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
<i class="fas fa-search-minus"></i>
</button>
<button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
<i class="fas fa-arrows-alt-h"></i>
</button>
<button class="bg-blue-600 hover:bg-blue-700 p-2 rounded-lg">
<i class="fas fa-video"></i>
</button>
</div>
</div>
<div class="signal-plot mb-4" id="eegPlot">
<!-- EEG signals will be plotted here -->
<div class="absolute inset-0 flex items-center justify-center text-gray-600">
<p>Carregando dados EEG em tempo real...</p>
</div>
</div>
<div class="flex justify-between items-center text-sm">
<div class="flex space-x-4">
<div>
<span class="text-gray-400">Taxa de amostragem:</span>
<span class="font-mono">1024 Hz</span>
</div>
<div>
<span class="text-gray-400">Resolução:</span>
<span class="font-mono">24 bits</span>
</div>
<div>
<span class="text-gray-400">Duração:</span>
<span class="font-mono">5:32 min</span>
</div>
</div>
<div class="flex space-x-2">
<button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm">
<i class="fas fa-pause"></i> Pausar
</button>
<button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded-lg text-sm">
<i class="fas fa-sync-alt"></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-gray-800 rounded-xl p-4 shadow-lg">
<h3 class="font-bold mb-3">Topografia Cerebral</h3>
<div class="topography-map h-64 mb-3">
<!-- Electrodes positioned on a scalp map -->
<div class="eeg-electrode" style="top: 15%; left: 30%;">Fp1</div>
<div class="eeg-electrode" style="top: 15%; left: 70%;">Fp2</div>
<div class="eeg-electrode" style="top: 25%; left: 25%;">F7</div>
<div class="eeg-electrode" style="top: 25%; left: 50%;">Fz</div>
<div class="eeg-electrode" style="top: 25%; left: 75%;">F8</div>
<div class="eeg-electrode" style="top: 35%; left: 30%;">F3</div>
<div class="eeg-electrode" style="top: 35%; left: 70%;">F4</div>
<div class="eeg-electrode" style="top: 45%; left: 20%;">T3</div>
<div class="eeg-electrode" style="top: 45%; left: 50%;">Cz</div>
<div class="eeg-electrode" style="top: 45%; left: 80%;">T4</div>
<div class="eeg-electrode" style="top: 55%; left: 30%;">C3</div>
<div class="eeg-electrode" style="top: 55%; left: 70%;">C4</div>
<div class="eeg-electrode" style="top: 65%; left: 25%;">T5</div>
<div class="eeg-electrode" style="top: 65%; left: 50%;">Pz</div>
<div class="eeg-electrode" style="top: 65%; left: 75%;">T6</div>
<div class="eeg-electrode" style="top: 75%; left: 30%;">P3</div>
<div class="eeg-electrode" style="top: 75%; left: 70%;">P4</div>
<div class="eeg-electrode" style="top: 85%; left: 40%;">O1</div>
<div class="eeg-electrode" style="top: 85%; left: 60%;">O2</div>
<!-- Topography contours -->
<div class="topography-contour" style="width: 80%; height: 80%; top: 10%; left: 10%; background: radial-gradient(circle, rgba(0,100,200,0.5) 0%, rgba(0,100,200,0) 70%);"></div>
<div class="topography-contour" style="width: 60%; height: 60%; top: 20%; left: 20%; background: radial-gradient(circle, rgba(200,50,50,0.5) 0%, rgba(200,50,50,0) 70%);"></div>
<div class="topography-contour" style="width: 40%; height: 40%; top: 30%; left: 30%; background: radial-gradient(circle, rgba(50,200,50,0.5) 0%, rgba(50,200,50,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-gray-800 rounded-xl p-4 shadow-lg">
<h3 class="font-bold mb-3">Análise de Frequência</h3>
<div class="bg-gray-900 rounded-lg p-3 mb-3">
<div class="flex justify-between text-xs mb-1">
<span>0 Hz</span>
<span>5 Hz (Delta)</span>
<span>8 Hz (Theta)</span>
<span>12 Hz (Alpha)</span>
<span>30 Hz (Beta)</span>
<span>>30 Hz (Gamma)</span>
</div>
<div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-blue-500 via-green-500 to-purple-500" style="width: 100%;"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-700 rounded-lg p-3">
<div class="text-center mb-1">
<p class="text-xs text-gray-400">Pico Alpha</p>
<p class="font-bold text-blue-400">9.8 Hz</p>
</div>
<div class="h-24 bg-gray-800 rounded">
<!-- Placeholder for alpha peak visualization -->
</div>
</div>
<div class="bg-gray-700 rounded-lg p-3">
<div class="text-center mb-1">
<p class="text-xs text-gray-400">Relação Theta/Beta</p>
<p class="font-bold text-purple-400">2.1</p>
</div>
<div class="h-24 bg-gray-800 rounded">
<!-- Placeholder for theta/beta ratio visualization -->
</div>
</div>
</div>
</div>
</div>
<!-- Deep Learning Analysis -->
<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-lg flex items-center">
<i class="fas fa-brain text-blue-400 mr-2"></i>
<span>Análise por Deep Learning</span>
</h3>
<div class="flex items-center space-x-2">
<span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded">Modelo: ResNet-EEG v4.2</span>
<span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded">Acurácia: 96.7%</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Analysis Card 1 -->
<div class="analysis-card bg-gray-700 rounded-lg p-4 border-l-4 border-blue-500">
<div class="flex justify-between items-start mb-2">
<h4 class="font-bold text-sm">Padrões Epileptiformes</h4>
<span class="text-xs bg-red-900 text-red-300 px-2 py-1 rounded">Alerta</span>
</div>
<p class="text-xs text-gray-400 mb-3">Detectados potenciais complexos de onda aguda em regiões temporais</p>
<div class="w-full bg-gray-800 rounded-full h-2 mb-1">
<div class="bg-red-500 h-2 rounded-full" style="width: 78%"></div>
</div>
<div class="flex justify-between text-xs">
<span>Probabilidade: 78%</span>
<span>Confiança: 92%</span>
</div>
</div>
<!-- Analysis Card 2 -->
<div class="analysis-card bg-gray-700 rounded-lg p-4 border-l-4 border-yellow-500">
<div class="flex justify-between items-start mb-2">
<h4 class="font-bold text-sm">Atividade Focal</h4>
<span class="text-xs bg-yellow-900 text-yellow-300 px-2 py-1 rounded">Moderado</span>
</div>
<p class="text-xs text-gray-400 mb-3">Desorganização focal no hemisfério esquerdo (T3, T5)</p>
<div class="w-full bg-gray-800 rounded-full h-2 mb-1">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div>
</div>
<div class="flex justify-between text-xs">
<span>Probabilidade: 65%</span>
<span>Confiança: 88%</span>
</div>
</div>
<!-- Analysis Card 3 -->
<div class="analysis-card bg-gray-700 rounded-lg p-4 border-l-4 border-green-500">
<div class="flex justify-between items-start mb-2">
<h4 class="font-bold text-sm">Padrões Normais</h4>
<span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded">Estável</span>
</div>
<p class="text-xs text-gray-400 mb-3">Ritmo alfa posterior preservado com boa reatividade</p>
<div class="w-full bg-gray-800 rounded-full h-2 mb-1">
<div class="bg-green-500 h-2 rounded-full" style="width: 89%"></div>
</div>
<div class="flex justify-between text-xs">
<span>Probabilidade: 89%</span>
<span>Confiança: 95%</span>
</div>
</div>
</div>
</div>
<!-- Neurologist Report -->
<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-lg">Relatório Neurológico Automatizado</h3>
<button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded-lg text-sm">
<i class="fas fa-file-pdf mr-1"></i> Exportar PDF
</button>
</div>
<div class="bg-gray-900 rounded-lg p-4">
<div class="prose prose-invert max-w-none text-sm">
<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.8 Hz, reativo à abertura ocular. Identificam-se descargas epileptiformes intermitentes na região temporal anterior esquerda (T3), 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-4">ACHADOS PRINCIPAIS</h4>
<ul class="list-disc pl-5">
<li><strong>Atividade epileptiforme:</strong> Descargas periódicas laterais temporais esquerdas (PLEDs-like) com probabilidade de 78% (confiança 92%)</li>
<li><strong>Atividade focal:</strong> Desorganização no lobo temporal esquerdo (65% probabilidade)</li>
<li><strong>Ritmo de base:</strong> Preservado com boa organização e simetria (89% probabilidade)</li>
<li><strong>Relação theta/beta:</strong> Elevada (2.1) sugerindo possível estado de baixa excitabilidade cortical</li>
</ul>
<h4 class="text-blue-400 mt-4">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-4">RECOMENDAÇÕES</h4>
<ol class="list-decimal pl-5">
<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-4 pt-4 border-t border-gray-700">
<p class="text-xs text-gray-400">Relatório gerado automaticamente pelo sistema NeuroVision EEG Pro. Este laudo não substitui a avaliação médica especializada. Última atualização do modelo: 12/08/2023.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-800 py-6 mt-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<p class="text-sm text-gray-400">© 2023 NeuroVision EEG Pro - Plataforma Avançada de Análise de EEG</p>
<p class="text-xs text-gray-600">Desenvolvido com algoritmos de deep learning e processamento digital de sinais</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-blue-400 transition">
<i class="fab fa-github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-400 transition">
<i class="fab fa-researchgate"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-400 transition">
<i class="fas fa-book"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-400 transition">
<i class="fas fa-question-circle"></i>
</a>
</div>
</div>
</div>
</footer>
<script>
// Simulate EEG data loading and processing
document.addEventListener('DOMContentLoaded', function() {
// Simulate loading animation
setTimeout(function() {
const eegPlot = document.getElementById('eegPlot');
eegPlot.innerHTML = `
<div class="absolute inset-0 flex items-center justify-center">
<p class="text-green-400 fade-in">
<i class="fas fa-check-circle mr-2"></i> Dados EEG carregados com sucesso - 19 canais ativos
</p>
</div>
`;
// Simulate processing completion
setTimeout(function() {
const analysisCards = document.querySelectorAll('.analysis-card');
analysisCards.forEach(card => {
card.classList.add('fade-in');
});
}, 1000);
}, 2000);
// Electrode interaction
const electrodes = document.querySelectorAll('.eeg-electrode');
electrodes.forEach(elec => {
elec.addEventListener('click', function() {
const channel = this.textContent;
alert(`Visualizando detalhes do canal ${channel}\nAmplitude média: 45.2µV\nFrequência dominante: 8.5Hz`);
});
});
});
</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/neurovision" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>