SWF | Michaell Alavedra

Como arquitecto de software, me enfrenté al desafío de construir un sistema capaz de interpretar información visual compleja —específicamente, simbologías geométricas y frecuencias de onda en el contexto de las tecnologías Dakila— y cruzarla con una base de conocimiento altamente especializada. El problema fundamental radicaba en la dificultad de procesar artefactos visuales no estructurados y correlacionarlos con precisión con registros documentales extensos, sin incurrir en alucinaciones por parte de los modelos de lenguaje.

Para resolver esto, diseñé una plataforma web progresiva (PWA) que actúa como puente entre la visión artificial y la recuperación de información estructurada (RAG). El sistema no es un simple chatbot; es un motor de inferencia que orquesta modelos multimodales para extraer características de las imágenes (patrones geométricos, líneas, curvas, colores) y utiliza esos atributos como vectores de búsqueda contra una base de datos vectorial especializada.

Flujo Operativo Principal

Desde una perspectiva operativa, el sistema ejecuta una secuencia determinista en tres fases principales:

Ingesta Analítica: El usuario provee una imagen y, opcionalmente, contexto textual. El sistema procesa y almacena temporalmente el archivo visual utilizando Vercel Blob, preparándolo para el análisis multimodal.
Extracción y Búsqueda Vectorial (RAG): El agente de inteligencia artificial (impulsado por Mastra y modelos fundacionales) ejecuta un análisis visual inicial para extraer metadatos de la imagen. Inmediatamente después, el sistema vectoriza estos hallazgos y consulta la base de conocimiento interna. Este paso garantiza que cualquier afirmación posterior esté anclada estrictamente en la literatura oficial.
Síntesis y Retorno de Estado: El motor consolida los hallazgos visuales con los registros recuperados, generando una respuesta estructurada. La conversación mantiene el estado a lo largo de la sesión mediante un sistema de memoria dedicado, permitiendo iteraciones de seguimiento sobre el mismo artefacto visual.

Disección Arquitectónica

Para construir este sistema, opté por una arquitectura modular desacoplada, priorizando el rendimiento y una clara separación de responsabilidades entre la capa de presentación y la orquestación cognitiva.

Arquitectura General

El proyecto sigue un patrón de Arquitectura Desacoplada Orientada a Servicios dentro de un ecosistema basado en Astro. La razón técnica subyacente para esta decisión es aislar la complejidad computacional del agente de inteligencia artificial del renderizado de la interfaz de usuario, garantizando escalabilidad y mantenibilidad.

Capa de Presentación (Frontend): Construida con Astro y React. Opté por Astro por su filosofía de “islas”, lo que permite hidratar interacciones complejas (como visualizadores 3D o la interfaz de chat) únicamente cuando es necesario. La interfaz está orquestada por componentes de alto nivel que delegan el renderizado a subcomponentes especializados.
Capa de Orquestación y API: Expuesta a través de rutas de API seguras que actúan como middleware. Aquí se maneja la carga de archivos, la verificación de configuración distribuida en tiempo real y la delegación de peticiones de streaming al motor cognitivo subyacente.
Motor Cognitivo (Agentic Layer): Constituye el núcleo del dominio. He configurado un Agente autónomo equipado con herramientas de consulta vectorial y capacidades multimodales, encapsulando completamente la lógica de inferencia e interacción RAG.

graph TD
    %% Architecture Diagram
    User([Usuario]) --> |Carga Imagen / Mensaje| UI[Capa de Presentación UI\nReact / Astro]
    UI --> |FormData| API[Middleware API\n/api/analyze.ts]

    subgraph Edge Infrastructure
        API --> |Upload| BlobStore[(Vercel Blob)]
        API --> |Verificación Estado| EdgeConfig[(Edge Config)]
    end

    API --> |Stream Request\nContexto + URL Imagen| Agent[Motor Cognitivo\nMastra Agent]

    subgraph Cognitive Layer
        Agent --> |Extracción de Entidades| LLM[Google Gemini Multimodal]
        Agent --> |Consulta Vectorial| VectorTool[Herramienta de Búsqueda RAG]
        VectorTool --> |Embeddings Text-004| VectorDB[(LibSQL Vector Store)]
        Agent --> |Manejo de Contexto| Memory[(LibSQL Store\nMastra Memory)]
    end

    LLM --> |Respuesta Sintetizada| Agent
    Agent --> |Server-Sent Events| API
    API --> |Stream| UI

Modelado de Datos y Gestión del Estado

La aplicación exige un control estricto sobre el estado conversacional y los artefactos procesados. Para ello, implementé un modelo de persistencia fundamentado en hilos de ejecución.

Gestión del Estado Frontend: Se maneja de forma centralizada a través de hooks y context containers en React, manteniendo un flujo unidireccional de datos estricto hacia los componentes de renderizado (chat, visualizador interactivo, feedback visual).
Gestión del Estado Backend: El framework agencial utiliza módulos de memoria transaccional para persistir el historial de mensajes de forma autónoma en una base de datos embebida, vinculándolos mediante identificadores únicos.

erDiagram
    %% Data Model
    THREAD {
        string threadId PK
        datetime createdAt
    }
    MESSAGE {
        string messageId PK
        string role "user | assistant"
        text content
        string threadId FK
    }
    RESOURCE {
        string resourceId PK
        string publicUrl "Blob Storage Access URL"
    }
    KNOWLEDGE_CHUNK {
        string chunkId PK
        vector embedding "Dimension: 768"
        text content
        string source
    }

    THREAD ||--o{ MESSAGE : contains
    THREAD ||--o| RESOURCE : contextualizes

Stack Tecnológico

La selección de herramientas en este proyecto responde a un balance meticuloso entre innovación teórica, velocidad de desarrollo y eficiencia de ejecución.

Capa / Dominio	Tecnología	Justificación Técnica y Rol
Framework Base	Astro + React 19	Astro provee enrutamiento eficiente y un modelo de renderizado optimizado. React gestiona el estado reactivo en las islas interactivas.
Estilos e Interfaz	Tailwind CSS v4, shadcn/ui, Framer Motion	Sistema de diseño utilitario, componentes accesibles sin acoplamiento y animaciones declarativas de alto rendimiento.
Renderizado 3D	react-three-fiber, @react-three/postprocessing	Abstracción declarativa de WebGL para renderizar escenas y efectos visuales complejos vinculados a las características analizadas.
Motor Cognitivo	Mastra Framework (@mastra/core)	Orquestador de agentes de IA y flujos de trabajo. Define el esquema de herramientas, manejo de memoria e instrucciones base de análisis.
Modelos de IA	Google Gemini (2.0 Flash / 3.0 Pro)	Motores fundacionales responsables del análisis visual, generación de embeddings de alta dimensionalidad y síntesis de lenguaje natural.
Inferencia y RAG	Mistral AI (OCR)	Procesamiento de ingesta documental mediante reconocimiento óptico avanzado para la estructuración de PDFs antes de su vectorización.
Persistencia de Datos	LibSQL / Vercel Edge Config / Vercel Blob	LibSQL opera de forma dual como motor transaccional y vectorial. Edge Config y Blob gestionan configuraciones distribuidas y binarios estáticos.

Impacto Arquitectónico

La implementación de este diseño ha consolidado un ecosistema cohesivo donde el análisis multimodal opera de manera integrada, garantizando una alta fidelidad en las respuestas gracias a una arquitectura profunda de Retrieval-Augmented Generation. Al trasladar la lógica de inferencia a un entorno de agentes autónomos y abstraer el almacenamiento a través de bases de datos embebidas nativas de Edge, he aislado la capa de presentación de los cuellos de botella computacionales típicos en sistemas de IA generativa. El resultado es un sistema que escala de forma limpia, determinista y que mantiene una consistencia arquitectónica rigurosa en cada flujo de datos.