Uma mini-app que mostra como um modelo de inteligência artificial «vê» uma fotografia: corta-a em 360 patches, transforma-os em vetores, alinha-os com as palavras da pergunta e, camada após camada, agrupa-os por significado até à frase da resposta. Três cenas desenhadas e a sua fotografia, decomposta sem sair do navegador.
**PhotoVisionAI** mostra em seis etapas o que acontece a uma fotografia dentro de um modelo de inteligência artificial: a fotografia torna-se patches, os patches vetores, os vetores procuram-se através da atenção e, no fim, fica o significado. Pensei-a para quem visita o meu portfólio e para os curiosos de IA sem formação técnica: sem fórmulas, com poucas palavras, tudo se vê e se toca. É uma interpretação de divulgação, não um olhar para dentro de um modelo concreto, e a página di-lo.
**O que faz**
- **Seis etapas**: a fotografia, os patches, os vetores, a sequência, a atenção e o significado. A reprodução vai da fotografia à frase final em 16 segundos; com o cursor e as etapas, para-se onde se quiser. - **Patches e vetores**: a fotografia é cortada em 360 quadradinhos, 24 por 15. Ao tocar num deles, uma caixa mostra os seus 1200 números, o vermelho, o verde e o azul de 400 píxeis, e o vetor de 24 valores em que são comprimidos. - **Atenção**: ao passar o rato sobre um ponto, vê-se a que patches presta atenção. Não é desenhada à mão: vem do produto dos vetores, como numa verdadeira camada de atenção. - **Significado**: os grupos ganham um nome, fios dourados ligam os objetos, surgem conceitos que não estão nos píxeis e, no fim, chega a frase da resposta. - **Três cenas desenhadas**: um pôr do sol sobre o mar, uma cidade à noite e um bosque de manhã. - **A sua fotografia**: quem visita pode decompor uma imagem sua, que fica no navegador e desaparece com a página. Sem um modelo verdadeiro, os grupos vêm das cores e das formas, e a frase final di-lo. - **Italiano e inglês**, tema claro e escuro, e movimento reduzido para quem o pede ao sistema.
**A parte difícil**
Fazer caber tudo numa página leve e honesta. As cenas não são imagens: é o código que as desenha na tela, e é daí que saem patches, vetores e grupos. Não há nenhuma biblioteca além do Vue, nenhum cookie e nenhum pedido além da página: comprimida, pesa cerca de 44 KB. Na última etapa, o nome de cada fio procura o seu lugar ao longo da curva até deixar de tapar grupos, nomes ou conceitos, no computador e no telemóvel.
Vue 3.5 e TypeScript com Vite, sem servidor: cada alteração passa por 54 testes automáticos, e o site corre em Docker no meu servidor, atrás do nginx.
Conceção, desenvolvimento e publicação · 2026
Vue.js, TypeScript, Canvas API, Vite