Una mini-app que muestra cómo un modelo de inteligencia artificial «ve» una foto: la corta en 360 parches, los convierte en vectores, los pone en fila con las palabras de la pregunta y, capa tras capa, los agrupa por significado hasta la frase de la respuesta. Tres escenas dibujadas y tu foto, descompuesta sin salir del navegador.
**PhotoVisionAI** muestra en seis etapas qué le pasa a una foto dentro de un modelo de inteligencia artificial: la foto se convierte en parches, los parches en vectores, los vectores se buscan con la atención y al final queda el significado. La pensé para quien visita mi portfolio y para los curiosos de la IA sin conocimientos técnicos: sin fórmulas, con pocas palabras, todo se ve y se toca. Es una interpretación divulgativa, no una mirada dentro de un modelo concreto, y la página lo dice.
**Qué hace**
- **Seis etapas**: la foto, los parches, los vectores, la secuencia, la atención y el significado. La reproducción va de la foto a la frase final en 16 segundos; con el control deslizante y las etapas uno se detiene donde quiere. - **Parches y vectores**: la foto se corta en 360 cuadraditos, 24 por 15. Al tocar uno, un recuadro muestra sus 1.200 números, el rojo, el verde y el azul de 400 píxeles, y el vector de 24 valores en el que se comprimen. - **Atención**: al pasar sobre un punto se ve a qué parches presta atención. No está dibujada a mano: sale del producto de los vectores, como en una verdadera capa de atención. - **Significado**: los grupos reciben un nombre, hilos dorados unen los objetos, aparecen conceptos que no están en los píxeles y al final llega la frase de la respuesta. - **Tres escenas dibujadas**: un atardecer sobre el mar, una ciudad de noche y un bosque por la mañana. - **Tu foto**: quien visita puede descomponer una imagen propia, que se queda en el navegador y desaparece con la página. Sin un modelo real, los grupos salen de los colores y las formas, y la frase final lo dice. - **Italiano e inglés**, tema claro y oscuro, y movimiento reducido para quien lo pide a su sistema.
**La parte difícil**
Que todo quepa en una página ligera y honesta. Las escenas no son imágenes: las dibuja el código en el lienzo, y de ahí salen parches, vectores y grupos. No hay ninguna librería aparte de Vue, ninguna cookie y ninguna petición más allá de la página: comprimida pesa unos 44 KB. En la última etapa el nombre de cada hilo busca su sitio a lo largo de la curva hasta no tapar grupos, nombres ni conceptos, en el ordenador y en el móvil.
Vue 3.5 y TypeScript con Vite, sin servidor: cada cambio pasa por 54 pruebas automáticas, y el sitio funciona en Docker en mi servidor, detrás de nginx.
Diseño, desarrollo y publicación · 2026
Vue.js, TypeScript, Canvas API, Vite