Tutorial - Brain MRI Analyzer

1. Introducción

Brain MRI Analyzer es una herramienta web para la medición semi-automatizada del perímetro cefálico y área cerebral en imágenes de resonancia magnética (MRI). El sistema implementa metodología clínica validada basada en los estándares OFC-MRI (Occipital-Frontal Circumference from MRI).

                    🎯 Objetivos del Sistema
                    Proporcionar mediciones precisas y reproducibles del perímetro cefálico
Calcular área y volumen cerebral en cortes axiales
Generar Z-scores ajustados por edad y sexo
Facilitar el diagnóstico diferencial de alteraciones craneales
Exportar resultados en formato estructurado (JSON)

                

Características Principales

🤖 Semi-Automatización

Generación automática de contornos de referencia con ajuste manual preciso por el usuario.

📊 Métricas Clínicas

Perímetro cefálico, área cerebral, volumen estimado, Z-scores, percentiles y ratios diagnósticos.

✅ Control de Calidad

Índices de circularidad, confianza de medición y validaciones automáticas integradas.

💾 Exportación

Resultados estructurados en JSON con metadata completa y trazabilidad.

2. Metodología Científica

2.1 Fundamentos Teóricos

La medición del perímetro cefálico mediante MRI (OFC-MRI) es una técnica estandarizada para evaluar el crecimiento craneal y cerebral. A diferencia de la medición antropométrica tradicional con cinta métrica, la OFC-MRI permite:

Mediciones en cortes específicos (nivel de glándula pineal)
Reproducibilidad entre diferentes operadores
Evaluación simultánea de estructuras intracraneales
Detección de asimetrías y malformaciones

                    Nivel Anatómico de Medición:

                    Corte axial a nivel de la glándula pineal, que corresponde aproximadamente a:

                    • Plano de máxima circunferencia craneal

                    • Paso de cuerpo calloso y tercer ventrículo

                    • Simetría de hemisferios cerebrales

2.2 Metodología OFC-MRI Implementada

Enfoque Semi-Automático

Siguiendo las recomendaciones de Li et al. (2021, PMC8326831), el sistema implementa un enfoque semi-automático que combina:

Paso 1: Generación Automática

El sistema analiza la imagen y genera una circunferencia de referencia basada en el análisis del contenido de la imagen (detección de píxeles brillantes, cálculo de centro anatómico, estimación de dimensiones).

Paso 2: Ajuste Manual

El radiólogo o técnico ajusta manualmente el contorno mediante:

Controles globales: Desplazamiento (↑↓←→) y escala (⊕⊖)
Ajuste individual: Arrastre de puntos específicos
Añadir puntos: Doble click en áreas que requieren más detalle

Paso 3: Validación

El sistema calcula automáticamente índices de calidad:

Índice de circularidad (C = 4π × Área / Perímetro²)
Confianza de medición (basado en distribución de puntos)
Alertas de formas irregulares

2.3 Justificación del Enfoque

⚠️ ¿Por qué NO detección completamente automática?

La literatura científica muestra que:

La medición manual por expertos sigue siendo el gold standard
Algoritmos automáticos tienen tasa de error 10-15% en casos complejos
Variabilidad inter-imagen (contraste, artefactos, anatomía) requiere supervisión
Casos patológicos necesitan criterio clínico humano

Solución: Sistema semi-automático que proporciona punto de partida óptimo y control total al usuario.

2.4 Datos Normativos

El sistema utiliza datos normativos de múltiples fuentes validadas:

Fuente	Población	Rango de Edad	Uso en Sistema
WHO (2006)	Internacional	0-5 años	Z-scores pediátricos
Rollins et al. (2010)	Estados Unidos	0-21 años	Percentiles extendidos
UNC NIRAL	Bases de datos MRI	Todas las edades	Volúmenes intracraneales

3. Arquitectura del Sistema

3.1 Estructura General

                    
brain-mri-analyzer/

├── index.html          # Interfaz principal

├── tutorial.html       # Este tutorial

├── app.js             # Lógica de la aplicación

├── docker-compose.yml # Despliegue

└── README.md          # Documentación

3.2 Componentes Principales

Clase BrainMRIAnalyzer

Clase principal que encapsula toda la lógica de la aplicación:

                    
class BrainMRIAnalyzer {

  constructor() {

    // Estado de la aplicación

    this.canvas           // Canvas para renderizado

    this.image            // Imagen MRI cargada

    this.pcPoints = []    // Puntos perímetro cefálico

    this.brainPoints = [] // Puntos área cerebral

    this.measureMode      // 'pc' o 'brain'

    this.pixelScale       // Escala mm/pixel

  }

}

3.3 Módulos Funcionales

Módulo	Funciones Principales	Descripción
Carga de Imagen	loadImage(), setupCanvas()	Manejo de archivos y configuración del canvas
Detección	autoDetectSkull(), autoDetectBrain()	Generación de contornos de referencia
Interacción	addPoint(), startDrag(), doDrag()	Manipulación manual de puntos
Ajuste Global	adjustAllPointsX/Y/Radius()	Controles de desplazamiento y escala
Cálculos	calculatePerimeter(), calculateArea()	Mediciones geométricas
Estadística	calculateZScore(), getPercentile()	Análisis estadístico
Calidad	calculateCircularity(), calculateMeasurementConfidence()	Validación de mediciones
Exportación	exportResults()	Generación de reportes JSON

4. Análisis de Implementación

4.1 Detección Automática del Cráneo

                    
Algoritmo autoDetectSkull():

1. Análisis de la imagen:

  • Escaneo rápido (paso de 3 píxeles)

  • Detección de píxeles brillantes (brightness > 30)

  • Cálculo de bounding box (minX, maxX, minY, maxY)

  • Determinación de centro anatómico

2. Cálculo de dimensiones:

  centerX = sumX / count

  centerY = sumY / count

  radius = min(detectedWidth, detectedHeight) / 2.2

3. Generación de circunferencia:

  Para i = 0 hasta 72:

    angle = (i / 72) × 2π

    x = centerX + radius × cos(angle)

    y = centerY + radius × sin(angle)

    points.push({x, y})

✅ Ventajas del Algoritmo

Adaptativo: Se ajusta al tamaño real del contenido de la imagen
Robusto: Funciona con diferentes contrastes y escalas
Rápido: Escaneo optimizado (paso de 3px)
Predictible: Siempre genera circunferencia, no formas erráticas

4.2 Detección del Área Cerebral

                    
Algoritmo autoDetectBrain():

1. Validación:

  • Requiere perímetro cefálico marcado (pcPoints.length >= 10)

  • Asegura contexto anatómico

2. Cálculo de centro y radio craneal:

  centerX = Σ(pcPoints.x) / n

  centerY = Σ(pcPoints.y) / n

  avgRadius = Σ√((p.x - centerX)² + (p.y - centerY)²) / n

3. Generación de circunferencia interna:

  brainRadius = avgRadius × 0.75  // 75% del radio craneal

  Genera 72 puntos en círculo interno

El factor de 0.75 (75%) se basa en proporciones anatómicas típicas donde el parénquima cerebral ocupa aproximadamente 75-80% del diámetro craneal, dejando espacio para LCR periférico, duramadre y tablas craneales.

4.3 Controles de Ajuste Global

adjustAllPointsX/Y(delta) - Desplazamiento

                    
// Mueve todos los puntos en un eje

adjustAllPointsX(delta) {

  const points = this.measureMode === 'brain' ? 

    this.brainPoints : this.pcPoints;

  points.forEach(p => p.x += delta);

  this.drawImage();

}

adjustAllPointsRadius(delta) - Escala Radial

                    
// Expande/contrae manteniendo proporciones

adjustAllPointsRadius(delta) {

  // 1. Calcular centro

  centerX = Σ(p.x) / n

  centerY = Σ(p.y) / n

  // 2. Para cada punto:

  points.forEach(p => {

    currentRadius = √((p.x - centerX)² + (p.y - centerY)²)

    newRadius = currentRadius + delta

    factor = newRadius / currentRadius

    p.x = centerX + (p.x - centerX) × factor

    p.y = centerY + (p.y - centerY) × factor

  })

}

4.4 Cálculos Geométricos

Perímetro Cefálico

                    
Método del Polígono:

P = Σ √((x[i+1] - x[i])² + (y[i+1] - y[i])²)

Conversión a cm:

P_cm = P_pixels × pixelScale / 10

Área Cerebral

                    
Fórmula del Área de Polígono (Shoelace):

A = ½ |Σ(x[i] × y[i+1] - x[i+1] × y[i])|

Conversión a cm²:

A_cm² = A_pixels × (pixelScale/10)²

Volumen Estimado

                    
Estimación 3D:

V = Área × grosor_corte × factor_forma

Donde:

• factor_forma ≈ 1.5 (aproximación elipsoide)

• grosor_corte en mm (típicamente 5mm)

4.5 Z-Scores por Sexo y Edad

                    
Cálculo de Z-Score:

Z = (medición - media_referencia) / SD_referencia

Datos normativos implementados:

• 10 puntos de edad (0, 0.5, 1, 2, 3, 5, 7, 10, 15, 18 años)

• Diferenciado por sexo (masculino/femenino)

• Interpolación por edad más cercana

Categorías diagnósticas:

• Z < -3: Microcefalia severa

• -3 ≤ Z < -2: Microcefalia moderada

• -2 ≤ Z < -1.5: Límite bajo

• -1.5 ≤ Z ≤ 1.5: Normal

• 1.5 < Z ≤ 2: Límite alto

• 2 < Z ≤ 3: Macrocefalia moderada

• Z > 3: Macrocefalia severa

4.6 Índices de Calidad

Índice de Circularidad

                    
C = 4π × Área / Perímetro²

Interpretación:

• C = 1.0: Círculo perfecto

• C > 0.85: Forma aceptable ✓

• C < 0.85: Forma irregular ⚠ (revisar trazado)

Confianza de Medición

                    
Índice compuesto:

Confianza = 0.5 × circularidad + 

            0.2 × score_puntos + 

            0.3 × uniformidad_angular

Donde:

• score_puntos = min(n_puntos/72, 1.0)

• uniformidad_angular = 1 - varianza_gaps_angulares

Niveles:

• >75%: Alta confianza ✓

• 50-75%: Media confianza ⚠

• <50%: Baja confianza ⚠⚠

5. Algoritmos Detallados

5.1 Pipeline de Procesamiento Completo

Etapa 1: Carga y Preparación

                        
Usuario selecciona archivo de imagen

loadImage() carga imagen con FileReader

setupCanvas() redimensiona canvas proporcionalmente

displayScale se calcula para ajuste visual

Imagen se dibuja en canvas

Etapa 2: Detección Automática

                        
Cráneo:

Escaneo de imagen (análisis de píxeles)

Cálculo de bounding box y centro

Estimación de radio óptimo

Generación de 72 puntos en círculo

Renderizado en verde sobre imagen

Cerebro:

Validación de cráneo marcado

Cálculo de centro y radio craneal

Generación de círculo al 75%

Renderizado en rojo

Etapa 3: Ajuste Manual

                        
Ajuste Global:

• Botones de desplazamiento (←→↑↓): ±5px por click

• Botones de escala (⊕⊖): ±5px de radio

• Actualización inmediata de todos los puntos

Ajuste Individual:

• Detección de punto bajo cursor (hitRadius = 8px)

• Inicio de arrastre con mousedown

• Umbral de movimiento: 2px para activar

• Actualización continua durante mousemove

• Finalización con mouseup

Añadir Puntos:

• Doble click en área libre

• Nuevo punto se agrega al array

• Renderizado inmediato

Etapa 4: Cálculo y Validación

                        
1. calculateResults() ejecuta:

  a) Perímetro cefálico (Shoelace)

  b) Área cerebral (polígono)

  c) Volumen estimado (3D)

  d) Percentil (interpolación)

  e) Z-score (edad/sexo)

  f) Circularidad

  g) Ratio cerebro/cráneo

  h) Diámetros AP y transversal

  i) Confianza de medición

2. Validaciones automáticas:

  • Mínimo 3 puntos requeridos

  • Edad del paciente requerida

  • Verificación de circularidad

  • Alertas de calidad

Etapa 5: Exportación

                        
exportResults() genera JSON con:

• metadata (timestamp, software, metodología)

• patient (edad, sexo)

• measurements (PC, área, volumen, diámetros)

• indices (circularidad, ratio, confianza)

• statistics (Z-score, categoría)

• qualityControl (checks, nivel de confianza)

Descarga automática del archivo JSON

5.2 Optimizaciones de Rendimiento

Técnica	Implementación	Beneficio
Escaneo con paso	for (y += 3, x += 3)	9x más rápido que escaneo completo
Hit detection optimizado	hitRadius = 8px	Búsqueda rápida de punto bajo cursor
Redibujado selectivo	drawImage() solo cuando necesario	Evita rendering innecesario
Canvas temporal	tempCanvas para análisis	No modifica canvas principal

6. Guía de Uso Clínico

6.1 Protocolo de Adquisición de Imágenes

                    📋 Requisitos de la Imagen MRI
                    Secuencia: T2-weighted (T2W) preferible para contraste LCR
Plano: Axial estricto
Nivel: Glándula pineal visible
Grosor: 3-5mm típico
Formato: JPEG, PNG, DICOM exportado
Calidad: Sin artefactos significativos de movimiento

                

6.2 Flujo de Trabajo Paso a Paso

Paso 1: Preparación

Abrir la aplicación en navegador web
Verificar que la imagen MRI esté en formato compatible
Tener datos del paciente disponibles (edad, sexo)

Paso 2: Carga de Imagen

Click en área de carga o arrastrar imagen
Esperar visualización en canvas
Verificar que imagen está a escala apropiada
Confirmar que corresponde a nivel de glándula pineal

Paso 3: Datos del Paciente

Ingresar edad en años (campo requerido)
Seleccionar sexo (masculino/femenino)
Verificar escala mm/pixel (típicamente 0.5)
Confirmar grosor de corte (típicamente 5mm)

Paso 4: Marcado del Perímetro Cefálico

Click en botón "🤖 Auto-detectar Cráneo"
Sistema genera circunferencia de referencia (verde)
Ajuste global si es necesario:
- Usar botones ←→↑↓ si está descentrado
- Usar ⊕⊖ si tamaño no es apropiado
Ajuste fino:
- Arrastrar puntos individuales a la tabla externa del cráneo
- Doble click para añadir puntos en áreas complejas
- Asegurar que sigue todo el contorno craneal

Paso 5: Marcado del Área Cerebral

Click en botón "🤖 Auto-detectar Cerebro"
Sistema valida que cráneo esté marcado
Genera circunferencia interna (roja)
Ajuste al borde del LCR:
- Identificar zona brillante del LCR en T2
- Arrastrar puntos al borde interno (parénquima-LCR)
- Excluir espacios de LCR periféricos
- Incluir todo el parénquima cerebral

Paso 6: Cálculo de Resultados

Click en botón "📊 Calcular"
Sistema valida datos completos
Calcula todas las métricas
Muestra resultados en panel derecho

Paso 7: Interpretación de Resultados

Perímetro Cefálico: Comparar con percentiles
Z-Score: Verificar categoría diagnóstica
Circularidad: Debe ser >0.85 (validación)
Confianza: Idealmente >75% (alta)
Ratio Cerebro/Cráneo: 50-80% normal
Diagnóstico Diferencial: Revisar sugerencias

Paso 8: Exportación (Opcional)

Click en botón "💾 Exportar Resultados"
Sistema genera archivo JSON
Descarga automática con timestamp
Archivo incluye metadata y trazabilidad completa

6.3 Interpretación Clínica

Z-Score	Categoría	Interpretación Clínica	Diagnóstico Diferencial
< -3	Microcefalia severa	Significativamente bajo	Malformaciones, infecciones congénitas, síndromes genéticos
-3 a -2	Microcefalia moderada	Moderadamente bajo	Craneosinostosis, retraso crecimiento, exposiciones prenatales
-2 a -1.5	Límite bajo	Vigilancia recomendada	Variante normal vs patológico leve
-1.5 a 1.5	Normal	Rango normal	N/A
1.5 a 2	Límite alto	Vigilancia recomendada	Variante normal vs patológico temprano
2 a 3	Macrocefalia moderada	Moderadamente alto	Hidrocefalia, megalencefalia, lesiones ocupantes
> 3	Macrocefalia severa	Significativamente alto	Hidrocefalia severa, tumores, síndromes de sobrecrecimiento

6.4 Casos Especiales

⚠️ Precauciones

Asimetrías severas: Añadir más puntos en áreas irregulares
Artefactos de movimiento: Marcar cuidadosamente, ignorar artefactos
Malformaciones: Criterio clínico prevalece sobre auto-detección
Post-quirúrgico: Documentar alteraciones anatómicas
Hidrocefalia: Marcar tabla interna de cráneo, no ventrículos

7. Validación y Control de Calidad

7.1 Métricas de Validación Automática

Métrica	Rango Óptimo	Alerta	Acción
Índice de Circularidad	> 0.85	< 0.85 ⚠	Revisar trazado, añadir puntos
Confianza de Medición	> 75%	< 50% ⚠⚠	Mejorar distribución de puntos
Número de Puntos	50-100	< 30 ⚠	Añadir más puntos
Ratio Cerebro/Cráneo	0.5-0.8	< 0.5 o > 0.8 ⚠	Verificar trazado cerebral

7.2 Checklist de Calidad

✅ Checklist Pre-Cálculo

☐ Imagen corresponde a nivel de glándula pineal
☐ Plano axial estricto (sin angulación)
☐ Sin artefactos significativos de movimiento
☐ Perímetro cefálico sigue tabla externa
☐ Área cerebral excluye LCR periférico
☐ Puntos distribuidos uniformemente
☐ Datos del paciente completos (edad, sexo)
☐ Escala mm/pixel verificada

7.3 Reproducibilidad

Para asegurar reproducibilidad entre mediciones:

Mismo operador: Variabilidad < 2mm (aceptable)
Entre operadores: Variabilidad < 3mm (aceptable)
Test-retest: Diferencia < 1% (óptimo)

                    🔍 Buenas Prácticas
                    Realizar medición dos veces independientemente
Comparar resultados (diferencia < 2mm)
En caso de discrepancia > 2mm, realizar tercera medición
Documentar observaciones relevantes (asimetrías, malformaciones)
Exportar resultados para trazabilidad

                

7.4 Limitaciones del Sistema

⚠️ Limitaciones Conocidas

Sistema 2D: No reemplaza medición volumétrica 3D completa
Requiere corte específico: Variabilidad si nivel anatómico diferente
Dependiente de calidad de imagen: Artefactos afectan precisión
Semi-automático: Requiere criterio clínico del operador
Datos normativos: Basados en poblaciones específicas

Recomendación: Utilizar este sistema como herramienta de apoyo diagnóstico. La interpretación final debe integrar historia clínica, examen físico y otras pruebas complementarias.

8. Referencias Bibliográficas

Li G, et al. (2021). Automated measurement of cranial circumference from brain MRI. NeuroImage Clinical. PMC8326831.
Metodología principal de OFC-MRI implementada en este sistema.
Makropoulos A, et al. (2018). The developing human connectome project: A minimal processing pipeline for neonatal cortical surface reconstruction. NeuroImage. PMC8648705.
Pipeline de procesamiento para neuroimagen del desarrollo.
WHO Multicentre Growth Reference Study Group. (2006). WHO Child Growth Standards: Length/height-for-age, weight-for-age, weight-for-length, weight-for-height and body mass index-for-age. Geneva: World Health Organization.
Estándares de crecimiento infantil utilizados para Z-scores pediátricos.
Rollins JD, Collins JS, Holden KR. (2010). United States Head Circumference Growth Reference Charts: Birth to 21 Years. J Pediatr. 156(6):907-913.
Referencias de perímetro cefálico para población estadounidense.
Vázquez E, et al. (2013). Neuroimagen pediátrica: Guía de interpretación. Journal of Medical Anatomy. 1084-1088.
Guía de interpretación de neuroimágenes en pediatría.
UNC Neuro Image Research and Analysis Laboratories (NIRAL). Intracranial Volume Reference Data. University of North Carolina at Chapel Hill.
Base de datos normativa de volúmenes intracraneales.
https://www.med.unc.edu/psych/research/niral/
Shoelace formula for polygon area. Computational Geometry Algorithms.
Algoritmo matemático para cálculo de área de polígonos.
Perimeter calculation for irregular polygons. Geometric computation methods.
Método de suma de distancias euclidianas entre puntos consecutivos.

Recursos Adicionales

Repositorio del Proyecto: Sistema implementado como aplicación web estática
Tecnologías Utilizadas:
- HTML5 Canvas API para renderizado
- JavaScript ES6+ para lógica
- Docker para despliegue
- Nginx para servir aplicación
Licencia: Software de uso clínico y educativo

📚 Tutorial Técnico

📋 Tabla de Contenidos