Eine Mini-App, die zeigt, wie ein KI-Modell ein Foto „sieht“: Es zerschneidet es in 360 Patches, macht daraus Vektoren, reiht sie mit den Wörtern der Frage auf und gruppiert sie Schicht für Schicht nach Bedeutung bis zum Satz der Antwort. Drei gezeichnete Szenen und das eigene Foto, zerlegt, ohne den Browser zu verlassen.
**PhotoVisionAI** zeigt in sechs Etappen, was mit einem Foto in einem KI-Modell geschieht: Das Foto wird zu Patches, die Patches werden zu Vektoren, die Vektoren suchen sich über die Aufmerksamkeit, und am Ende bleibt die Bedeutung. Ich habe sie für die Besucher meines Portfolios gemacht und für alle, die neugierig auf KI sind, ohne technische Vorkenntnisse: keine Formeln, wenige Worte, alles ist zu sehen und anzufassen. Es ist eine populärwissenschaftliche Deutung, kein Blick in ein bestimmtes Modell, und die Seite sagt das auch.
**Was sie kann**
- **Sechs Etappen**: Foto, Patches, Vektoren, Sequenz, Aufmerksamkeit und Bedeutung. Die Wiedergabe führt in 16 Sekunden vom Foto bis zum Schlusssatz; mit dem Regler und den Etappen hält man an, wo man will. - **Patches und Vektoren**: Das Foto wird in 360 kleine Quadrate zerschnitten, 24 mal 15. Tippt man eines an, zeigt ein Kasten seine 1.200 Zahlen, Rot, Grün und Blau von 400 Pixeln, und den Vektor aus 24 Werten, zu dem sie verdichtet werden. - **Aufmerksamkeit**: Fährt man mit der Maus über einen Punkt, sieht man, auf welche Patches er achtet. Sie ist nicht von Hand gezeichnet: Sie entsteht aus dem Produkt der Vektoren, wie in einer echten Attention-Schicht. - **Bedeutung**: Die Gruppen bekommen Namen, goldene Fäden verbinden die Objekte, Begriffe tauchen auf, die nicht in den Pixeln stehen, und am Ende kommt der Satz der Antwort. - **Drei gezeichnete Szenen**: ein Sonnenuntergang am Meer, eine Stadt bei Nacht und ein Wald am Morgen. - **Das eigene Foto**: Wer die Seite besucht, kann ein eigenes Bild zerlegen; es bleibt im Browser und verschwindet mit der Seite. Ohne echtes Modell kommen die Gruppen aus Farben und Formen, und der Schlusssatz sagt das. - **Italienisch und Englisch**, helles und dunkles Design und reduzierte Bewegung für alle, die sie im System eingestellt haben.
**Der schwierige Teil**
Alles in eine leichte und ehrliche Seite zu packen. Die Szenen sind keine Bilder: Der Code zeichnet sie auf das Canvas, und daraus entstehen Patches, Vektoren und Gruppen. Es gibt keine Bibliothek außer Vue, keine Cookies und keine Anfragen über die Seite hinaus: Komprimiert wiegt sie etwa 44 KB. In der letzten Etappe sucht sich der Name jedes Fadens seinen Platz entlang der Kurve, bis er keine Gruppen, Namen oder Begriffe mehr verdeckt, am Computer wie am Handy.
Vue 3.5 und TypeScript mit Vite, ohne Server: Jede Änderung durchläuft 54 automatische Tests, und die Seite läuft in Docker auf meinem Server, hinter nginx.
Konzeption, Entwicklung und Veröffentlichung · 2026
Vue.js, TypeScript, Canvas API, Vite