Aquí tienes la documentación oficial perfecta para la Versión 1 (simple) de tu proyecto. Está escrita en tono académico pero claro, ideal para Proyecto Integrador. Puedes copiar y pegar directamente en tu informe o PDF.
Documentación Técnica – Pictionary IA (Versión 1 – Frontend puro)1. Resumen
Pictionary IA es una aplicación web que permite al usuario dibujar una palabra asignada aleatoriamente en dos modos de juego:
- Modo Timed (30 segundos): la IA completa el dibujo usando Stable Diffusion Inpainting.
- Modo Libre: la IA intenta adivinar qué se dibujó mediante un modelo de visión por computadora (BLIP / GIT).
Todo funciona 100 % en el navegador, sin backend ni base de datos.
2. Introducción
El objetivo era crear una experiencia divertida que combinara dibujo manual con inteligencia artificial en tiempo real. El problema clásico de “¿qué tan bien puede una IA entender dibujos hechos a mano?” es algo que siempre genera curiosidad y risas. Decidí hacerlo porque quería explorar dos APIs de IA muy potentes (Replicate y Hugging Face) y ver hasta dónde llegaba con un proyecto 100 % frontend.
3. Marco Teórico / Lo que ya existe
- Quick, Draw! de Google (2016) – dataset de millones de dibujos humanos, demuestra que los modelos pueden aprender a reconocer dibujos simples.
- Stable Diffusion Inpainting (RunwayML / Replicate) – permite completar imágenes a partir de máscaras y prompts.
- BLIP y GIT-large (Salesforce, Microsoft) – modelos de captioning que funcionan razonablemente bien con dibujos infantiles.
- react-konva – wrapper de Konva.js para React que permite lienzos profesionales en componentes declarativos.
Mi aporte: integrar todo esto en una sola aplicación interactiva, sencilla y sin servidor.
4. Cómo lo hiciste
Tecnologías principales
- React 18 + Vite (estructura y velocidad)
- react-konva + Konva (lienzo de dibujo profesional con soporte touch)
- Replicate API → Stable Diffusion Inpainting (versión pública)
- Hugging Face Inference API → modelo BLIP / GIT-large-textcaps