A mini-app that shows how an artificial intelligence model “sees” a photo: it cuts it into 360 patches, turns them into vectors, lines them up with the words of the question and, layer after layer, groups them by meaning until the sentence of the answer. Three drawn scenes and your own photo, broken down without leaving the browser.
**PhotoVisionAI** shows in six stages what happens to a photo inside an artificial intelligence model: the photo becomes patches, the patches become vectors, the vectors look for each other through attention, and in the end meaning is what remains. I made it for visitors to my portfolio and for anyone curious about AI without a technical background: no formulas, few words, everything can be seen and touched. It is an interpretation for a general audience, not a look inside a specific model, and the page says so.
**What it does**
- **Six stages**: Photo, Patches, Vectors, Sequence, Attention, Meaning. Play goes from the photo to the final sentence in 16 seconds; with the slider and the stages you can stop wherever you like. - **Patches and vectors**: the photo is cut into 360 small squares, 24 by 15. Tap one and a box shows its 1,200 numbers, the red, green and blue of 400 pixels, and the 24-value vector they are compressed into. - **Attention**: hover over a point to see which patches it attends to. It is not drawn by hand: it comes from the product of the vectors, as in a real attention layer. - **Meaning**: the groups get names, golden threads link the objects, concepts that are not in the pixels emerge, and finally the sentence of the answer arrives. - **Three drawn scenes**: a sunset over the sea, a city at night and a forest in the morning. - **Your photo**: visitors can break down a picture of their own, which stays in the browser and disappears with the page. Without a real model the groups come from colours and shapes, and the final sentence says so. - **Italian and English**, light and dark themes, and reduced motion for anyone who asks their system for it.
**The hard part**
Fitting it all into a page that is light and honest. The scenes are not images: the code draws them on the canvas, and the patches, vectors and groups come from there. There is no library besides Vue, no cookies and no requests beyond the page itself: compressed, it weighs about 44 KB. In the last stage each thread's name looks for its place along the curve until it no longer covers groups, names or concepts, on computers and phones alike.
Vue 3.5 and TypeScript with Vite, no server: every change goes through 54 automated tests, and the site runs in Docker on my server, behind nginx.
Design, development and deployment · 2026
Vue.js, TypeScript, Canvas API, Vite