Una mini-app che mostra come un modello di intelligenza artificiale «vede» una foto: la taglia in 360 patch, le trasforma in vettori, le mette in fila con le parole della domanda e, strato dopo strato, le raggruppa per significato fino alla frase della risposta. Tre scene disegnate e la tua foto, scomposta senza uscire dal browser.
**PhotoVisionAI** mostra in sei tappe che cosa succede a una foto dentro un modello di intelligenza artificiale: la foto diventa patch, le patch vettori, i vettori si cercano con l'attenzione e alla fine resta il significato. L'ho pensata per chi visita il mio portfolio e per chi è curioso di AI senza basi tecniche: niente formule, poche parole, tutto si vede e si tocca. È un'interpretazione divulgativa, non uno sguardo dentro un modello preciso, e la pagina lo dice.
**Che cosa fa**
- **Sei tappe**: Foto, Patch, Vettori, Sequenza, Attenzione, Significato. Riproduci va dalla foto alla frase finale in 16 secondi; con il cursore e le tappe ci si ferma dove si vuole. - **Patch e vettori**: la foto è tagliata in 360 quadratini, 24 per 15. Toccandone uno, un riquadro mostra i suoi 1.200 numeri, il rosso, il verde e il blu di 400 pixel, e il vettore di 24 valori in cui si comprimono. - **Attenzione**: passando su un punto si vede a quali patch presta attenzione. Non è disegnata a mano: viene dal prodotto dei vettori, come in un vero strato di attenzione. - **Significato**: i gruppi prendono un nome, fili d'oro legano gli oggetti, affiorano concetti che nei pixel non ci sono, e alla fine arriva la frase della risposta. - **Tre scene disegnate**: un tramonto sul mare, una città di notte e un bosco al mattino. - **La tua foto**: chi visita può scomporre una propria immagine, che resta nel browser e sparisce con la pagina. Senza un modello vero i gruppi vengono dai colori e dalle forme, e la frase finale lo dice. - **Italiano e inglese**, tema chiaro e scuro, e il movimento ridotto per chi lo chiede al sistema.
**La parte difficile**
Far stare tutto in una pagina leggera e onesta. Le scene non sono immagini: le disegna il codice sul canvas, e da lì escono patch, vettori e gruppi. Non c'è nessuna libreria oltre a Vue, nessun cookie e nessuna richiesta oltre alla pagina: compressa pesa circa 44 KB. Nell'ultima tappa il nome di ogni filo cerca il suo posto lungo la curva finché non copre più gruppi, nomi o concetti, sul computer e sul telefono.
Vue 3.5 e TypeScript con Vite, senza server: ogni modifica passa da 54 prove automatiche, e il sito gira in Docker sul mio server, dietro nginx.
Progettazione, sviluppo e pubblicazione · 2026
Vue.js, TypeScript, Canvas API, Vite