02. Tech Stack

Stack Tecnológico

DIRD+ es una aplicación local-first (Single Page Application). La mayoría de la funcionalidad se ejecuta íntegramente en el navegador: almacenamiento de datos, inferencia IA, generación de archivos y reportes PDF. El servidor tiene un rol auxiliar limitado (tokens, contribuciones, administración).

---

Core

Tecnología	Versión	Propósito
React	18.3	Framework UI
TypeScript	5.7	Tipado estático (strict mode)
Vite	6.0	Build tool + dev server con HMR
Tailwind CSS	3.4	Estilos utilitarios
i18next + react-i18next	24.2 / 15.2	Internacionalización (español/inglés)

---

Frontend y UI

Tecnología	Versión	Propósito
Radix UI	—	Primitivas accesibles (Dialog, Tabs, Select, Switch, Slider, Label, Collapsible)
Framer Motion	11	Animaciones y transiciones
Lucide React	—	Iconografía SVG
Zustand	5.0	Estado global (config, canvas, tokens, pacientes) con persistencia localStorage
DnD Kit	6.3 / 10.0	Drag-and-drop para reordenar imágenes
React Markdown + remark-gfm	10.1	Renderizado de contenido educativo (Academy)
Sonner	2.0	Notificaciones toast

---

Canvas y Visualización

Tecnología	Versión	Propósito
Konva	10	Motor canvas 2D de alto rendimiento
React-Konva	18.2	Bindings declarativos React para Konva

Canvas multicapa: imagen original, detecciones IA, segmentaciones, anotaciones manuales, mediciones, overlays clínicos.

---

Datos y Persistencia

Tecnología	Versión	Propósito
IndexedDB	—	Base de datos local en navegador
Dexie.js	4.0	Wrapper IndexedDB con esquema tipado, 16 versiones de migración

---

Archivos y Documentos

Tecnología	Versión	Propósito
jsPDF	2.5	Generación de PDF en cliente
jspdf-autotable	3.8	Tablas clínicas en PDF
PDF.js	5.4	Renderizado de PDFs de referencia clínica
JSZip	3.10	Formato .dird (ZIP portable con datos de paciente/sesión)
browser-image-compression	2.0	Compresión de imágenes antes de almacenamiento

---

IA e Inferencia

Tecnología	Versión	Propósito
ONNX Runtime Web	1.23	Motor de inferencia WebAssembly en navegador
Modelos ONNX	—	Detección (bounding boxes) + Segmentación (máscaras). Descargados desde GitHub Releases
OpenCV.js	—	Refinamiento del disco óptico. Cargado desde CDN

Pipeline: preprocesamiento → inferencia ONNX (SIMD + multi-thread) → NMS → análisis por cuadrante → clasificación clínica multi-guía.

---

Backend (opcional)

Tecnología	Propósito
PHP	API de tokens, contribuciones, administración y mensajería

Endpoints: get_tokens, consume_token, confirm_processing, receive_contribution, más panel admin completo.

---

Plataforma y Tooling

Tecnología	Versión	Propósito
Vite Plugin PWA	0.21	Service Worker con Workbox (cache de modelos ONNX, WASM, assets)
PostCSS + Autoprefixer	—	Procesamiento CSS
@types/*	—	Definiciones TypeScript para Node.js y React