← Volver al índice | App Móvil | API REST
Especificación — Web SPA
Tipo: Especificación Funcional
Audiencia: Equipo de desarrollo frontend web, diseño UX
Fecha: 20 de marzo de 2026
Relacionado con: Arquitectura del Sistema | App Móvil
1. Descripción General
Aplicación web SPA (Single Page Application) que proporciona las mismas capacidades core que la app móvil, adaptadas al navegador. Funciona como estrategia de contingencia para laboratorios y estaciones de trabajo donde la app móvil no es viable.
Stack Tecnológico
| Componente |
Tecnología |
| Framework |
React 18+ |
| Build |
Vite |
| Captura de vídeo |
navigator.mediaDevices.getUserMedia (HTML5) |
| ML en cliente |
TensorFlow.js |
| Pre-procesado |
Canvas API + WebAssembly (WASM) |
| Estado |
Zustand + @tanstack/react-query |
| Estilos |
CSS Modules + Design Tokens |
| Routing |
React Router v6 |
| Auth |
MSAL.js (Microsoft Authentication Library) |
2. Pantallas y Navegación
flowchart TB
subgraph AUTH2 ["Autenticación"]
LOGIN2["Login - Entra ID - MSAL.js"]
end
subgraph LAYOUT ["Layout Principal"]
NAV["Sidebar de Navegación"]
TOP["Barra Superior"]
end
subgraph PAGES ["Páginas"]
DASH["Dashboard"]
CAM3["Cámara Web"]
HIST2["Historial de Muestras"]
DET2["Detalle de Muestra"]
SEARCH["Búsqueda Semántica"]
UPLOAD["Subida de Imágenes"]
end
LOGIN2 --> LAYOUT
NAV --> DASH
NAV --> CAM3
NAV --> HIST2
NAV --> SEARCH
NAV --> UPLOAD
HIST2 --> DET2
style CAM3 fill:#e74c3c,color:#fff
style SEARCH fill:#9b59b6,color:#fff
3. Detalle de Páginas
3.1 Dashboard
| Elemento |
Descripción |
| KPIs |
Total muestras, identificaciones hoy, precisión media |
| Gráfica temporal |
Muestras registradas por semana/mes |
| Últimas identificaciones |
Lista de las 10 últimas con thumbnail, especie, confianza |
| Estado de servicios |
Indicador de conectividad con backend, Ollama, ChromaDB |
3.2 Cámara Web
| Elemento |
Descripción |
| Acceso |
getUserMedia con solicitud de permisos |
| Resolución |
Preferencia por máxima resolución disponible |
| Captura |
Frame extraído via Canvas API |
| Pre-procesado |
Resize + normalización via WASM |
| Inferencia local |
TensorFlow.js para pre-clasificación (opcional) |
| Envío al servidor |
Via API REST POST /api/v1/samples |
flowchart LR
MCAM["getUserMedia"] --> CANVAS["Canvas API"]
CANVAS --> WASM["WASM - Pre-procesado"]
WASM --> TFJS["TensorFlow.js"]
TFJS --> API5["API REST"]
API5 --> RES2["Resultado IA"]
style WASM fill:#e67e22,color:#fff
style TFJS fill:#9b59b6,color:#fff
3.3 Búsqueda Semántica
| Elemento |
Descripción |
| Input |
Barra de búsqueda con lenguaje natural |
| Ejemplos sugeridos |
"Otolitos de sardina del Mediterráneo 2015-2020" |
| Resultados |
Grid de muestras con imagen, especie, score de relevancia |
| Filtros |
Panel lateral: especie, fecha, departamento, colección |
| Paginación |
Scroll infinito con carga progresiva |
3.4 Subida de Imágenes (Batch)
| Elemento |
Descripción |
| Drag & Drop |
Zona de arrastre para múltiples imágenes |
| Formatos |
JPEG, PNG, TIFF, RAW (con conversión automática) |
| Cola de procesamiento |
Barra de progreso por imagen |
| Metadatos por lote |
Asignación de metadatos comunes al lote |
| Resultados |
Tabla con resultado IA de cada imagen procesada |
3.5 Historial y Detalle de Muestra
| Elemento |
Descripción |
| Vista de lista |
Tabla con columnas: código, especie, fecha, confianza, estado |
| Vista de grid |
Thumbnails con overlay de información |
| Detalle |
Imagen a máxima resolución, metadatos completos, resultado IA, historial de modificaciones |
| Acciones |
Confirmar/Rechazar identificación IA, editar metadatos, descargar informe |
4. Comparativa con App Móvil
| Funcionalidad |
App Móvil |
Web SPA |
| Captura de foto con cámara |
✅ Visión Camera (nativa) |
✅ getUserMedia (HTML5) |
| Vídeo en tiempo real con overlay |
✅ 60 FPS via Frame Processor |
⚠️ Limitado por navegador (~15 FPS) |
| Edge AI on-device |
✅ TFLite (C++ nativo) |
⚠️ TensorFlow.js (menos rendimiento) |
| Modo offline completo |
✅ MMKV + sync |
❌ No disponible |
| Subida batch de imágenes |
❌ No aplica |
✅ Drag & Drop |
| Búsqueda semántica avanzada |
⚠️ Básica |
✅ Completa con filtros |
| Dashboard analítico |
⚠️ Simplificado |
✅ Completo |
5. Diseño Responsive
| Breakpoint |
Layout |
Uso Típico |
| ≥ 1440px |
Sidebar + contenido amplio |
Monitor de laboratorio |
| 1024px - 1439px |
Sidebar colapsable + contenido |
Portátil |
| 768px - 1023px |
Navegación superior + contenido |
Tablet |
| < 768px |
Navegación hamburguesa |
Uso puntual en móvil |
6. Requisitos No Funcionales
| Requisito |
Valor |
| Navegadores |
Chrome 90+, Firefox 90+, Safari 15+, Edge 90+ |
| Rendimiento |
First Contentful Paint < 1.5s, LCP < 2.5s |
| Bundle size |
< 500KB (gzipped, sin TF.js) |
| Accesibilidad |
WCAG 2.1 nivel AA |
| i18n |
Español (principal), preparado para inglés |
| Seguridad |
CSP headers, HTTPS obligatorio, tokens en memoria |
Documentos Relacionados