2026•Proyecto Personal

Creative AI Studio

Herramienta de canvas interactivo construida con React Flow donde el usuario arma flujos de nodos para generar imágenes con IA. Cada nodo tiene un tipo (imagen de producto, texto, prompt, link externo, generación), y los bordes entre nodos definen el rol del input para la generación. El backend orquesta jobs async con Gemini y persiste resultados en PostgreSQL.

DURACIÓN
Mar 2026 - Abr 2026
ESTADO
Completado

Desafíos

  • Modelar roles de bordes entre nodos para construir prompts automáticos
  • Gestionar jobs async sin bloquear el canvas (polling cada 2s)
  • Definir nodeTypes fuera del componente para evitar remounts en React Flow
  • Almacenar assetUrl en node.data JSON para que el render loop no haga queries por nodo

Soluciones

  • Sistema de roles en bordes que el backend interpreta para construir el prompt de generación
  • API fire-and-forget que retorna job PENDING y el frontend hace polling cada 2 segundos
  • nodeTypes definido como constante fuera del componente canvas
  • Campo assetUrl en node.data JSON persistido junto con assetId

Características Principales

Canvas interactivo con nodos y bordes custom
6 tipos de nodos: IMAGE_ASSET, PRODUCT_IMAGE, EXTERNAL_LINK, TEXT_NOTE, PROMPT_BLOCK, GENERATION
Generación de imágenes con Gemini 2.0 Flash
Jobs async con polling en tiempo real
AI content extraction por nodo
Output reuse como nuevo nodo de referencia
Google OAuth + JWT auth
E2E testing con Playwright

Stack Tecnológico

React 19React FlowTypeScriptViteTailwindExpressPrismaPostgreSQLGemini APIGoogle OAuthPassport.jsJWTDockerPlaywright

Impacto y Resultados

Canvas visual donde no-técnicos pueden armar flujos de generación sin escribir prompts manualmente
Resultados reutilizables como reference inputs para nuevas generaciones
Pipeline completo: inputs → prompt automático → job → output → reuse
Ver todos los proyectosContactar