Blog

Ein voller Sonntag – eine KI, die Ihr Foto ansieht, und ein Blog in zwei SprachenA Busy Sunday — an AI That Looks at Your Photo, and a Blog in Two Languages

Das Highlight des Tages ist eine KI-Foto-Demo, die komplett in Ihrem Browser läuft. Das zweite: Jeden Blogbeitrag gibt es jetzt auf Deutsch und Englisch. Dazu ein neues Logo, schnellere Seiten und eine Handvoll Korrekturen.Today's special is an AI photo demo that runs entirely in your browser. The other highlight: every blog post now exists in German and English. Plus a new logo, faster pages and a handful of fixes.

Michael Roehn, Webentwickler in Bad Kreuznach
← Zurück zum Blog

Manche Sonntage sind ruhig. Dieser nicht. Vom Nachmittag bis spät in den Abend wurde fast jede Ecke dieser Website angefasst – hier ist der Rundgang, angefangen mit dem Teil, auf den ich am meisten stolz bin.

Das Highlight des Tages: eine KI, die Ihr Foto ansieht – ohne es hochzuladen

Die Experiment-Seite hat einen neuen Abschnitt: eine KI-Foto-Anfrage. Sie wählen ein Foto – zum Beispiel von einem verrosteten Balkongeländer –, und ein kleines KI-Modell erkennt, was darauf zu sehen ist: ein Geländer, ein Tor, eine Treppe, ein Vordach oder ein Zaun. Daraus entsteht der Entwurf einer kurzen Anfrage, den Sie bearbeiten und direkt in eine Nachricht an einen Betrieb kopieren können.

Das Besondere ist, wo das passiert. Das Modell läuft direkt in Ihrem Browser, auf Ihrem eigenen Gerät. Ihr Foto wird nirgendwohin geschickt – nicht zu mir, nicht zu einem Cloud-Dienst. Die Seite zeigt das nach jedem Durchlauf sogar in Zahlen: 0 Bytes hochgeladen.

Ein paar Dinge waren mir beim Bauen wichtig:

  • Nichts lädt, bevor Sie es wollen. Das Modell ist rund 11 MB groß und wird deshalb erst geladen, wenn Sie auf „KI-Demo starten“ drücken – einmalig. Beim nächsten Besuch kommt es direkt aus dem Zwischenspeicher Ihres Browsers.
  • Sie tut nicht so, als wäre sie sicher. Liegen zwei Antworten nah beieinander, fragt sie nach – „Geländer oder Balkongeländer? Bitte kurz antippen.“ –, statt zu raten. Material und Zustand entscheiden Sie: Sie tippen sie an, und die KI behauptet nicht, einen Rostgrad zu erkennen, den sie nicht zuverlässig beurteilen kann.
  • Drei Beispielfotos (KI-generiert und so gekennzeichnet) laden zum Ausprobieren ein, auch ohne eigenes Foto.
  • Lab und Werkstatt. Wie der Rest der Seite hat die Demo zwei Ansichten: Die Lab-Ansicht zeigt die technischen Details, die Werkstatt-Ansicht die ruhige Version, die ich tatsächlich auf die Kontaktseite eines Kunden setzen würde.
  • Sie spricht alle vier Sprachen der Website, funktioniert mit Tastatur und Screenreader und lässt die Seite für alle, die den Button nie drücken, genauso schnell laden wie vorher.

Warum das Ganze? Ein Metallbauer oder Schreiner bekommt Anfragen wie „Ich brauche ein neues Geländer, können Sie helfen?“ und braucht dann drei Mails, um herauszufinden, welche Art. Ein Foto sagt das in einer Sekunde – und wenn das Foto auf dem eigenen Handy bleibt, gibt es für niemanden Bedenken beim Datenschutz. Genau diese Art praktischer KI möchte ich auf Websites fürs Handwerk bringen.

Das zweite Highlight: Dieser Blog spricht jetzt Deutsch und Englisch

Bis heute war jeder Beitrag hier nur auf Englisch, selbst in der deutschen Version der Website. Jetzt gibt es jeden Beitrag in beiden Sprachen – alle fünfzehn bisherigen und diesen hier. Lesen Sie die Website auf Deutsch, bekommen Sie den deutschen Beitrag; wählen Sie Englisch, Chinesisch oder Japanisch, den englischen. Ein Sprachwechsel im Menü tauscht den Text sofort aus, ohne Neuladen.

Damit das funktioniert, hat das kleine Skript, das diesen Blog baut, ein Update bekommen: Jeder Beitrag besteht jetzt aus zwei Dateien, einer deutschen und einer englischen, und das Skript setzt beide in dieselbe Seite. Die beiden Fassungen sind eigenständig geschrieben – keine maschinelle Übersetzung, die am Ende angeklebt wird –, und die deutschen Beiträge verwenden dieselben Begriffe, mit denen die deutsche Website ihre eigenen Buttons und Seiten benennt.

Und alles andere

  • Ein neues Logo. Das sechseckige „MR“-Zeichen ersetzt das alte grüne, in einer hellen und einer dunklen Fassung, die dem hellen und dunklen Modus der Website folgen. Im Footer steht das Zeichen jetzt neben meinem Namen und dem Slogan als echtem Text, weil die Kleinschrift des vollständigen Logos dort schlicht zu winzig zum Lesen war. Neue Symbole für den Browser-Tab kamen gleich mit.
  • Leichter und schneller. Beim ersten Besuch wiegen Logo und Symbole jetzt rund 19 KB statt fast 100 KB. Textdateien werden auf der ganzen Website komprimiert, und jede Seite lädt nur noch ihre eigene Sprache statt alle vier – rund 88 KB weniger auf jeder Seite.
  • Barrierefreiheit bei 100. Lighthouse gibt den wichtigsten Seiten jetzt die volle Punktzahl für Barrierefreiheit: besserer Kontrast für kleine orange Schrift, den Footer und ein paar Kacheln, und Buttons, deren vorgelesene Namen zu dem passen, was darauf steht.
  • Ihre Sprachwahl wird respektiert. Die Website merkt sich eine Sprache nur, wenn Sie sie im Menü auswählen. Sonst schätzt sie bei jedem Besuch neu – und stellt Sie nie von selbst auf Englisch um, denn Deutsch ist hier die Voreinstellung.
  • Die zweite Adresse funktioniert richtig. Die Website ist auch unter www.roehn.de/michael/ erreichbar, und die Spracherkennung und der Besucherzähler funktionieren jetzt auch dort.
  • Das Porträt bleibt, wo es hingehört. Auf Seiten mit langer Überschrift rutschte mein Foto im Kopfbereich nach unten. Jetzt sitzt es auf jeder Seite und jedem Bildschirm oben rechts in der Ecke.

Ziemlich viel für einen Sonntag, und das meiste davon werden Sie nie bemerken – genau darum geht es. Probieren Sie die Foto-Demo aus – oder nehmen Sie Kontakt auf, wenn Ihr eigener Betrieb eine Kontaktseite gebrauchen kann, die Fotos versteht.

Some Sundays are quiet. This one wasn't. From mid-afternoon until late in the evening, almost every corner of this site got touched — so here's the tour, starting with the part I'm proudest of.

Today's special: an AI that looks at your photo — without uploading it

The Experiment page has a new section: an AI photo enquiry. You pick a photo — say, of a rusty balcony railing — and a small AI model works out what it shows: a railing, a gate, stairs, a canopy or a fence. From that, it drafts a short enquiry you can edit and copy straight into a message to a workshop.

The special part is where this happens. The model runs right in your browser, on your own device. Your photo is never sent anywhere — not to me, not to a cloud service. The page even says so in numbers after each run: 0 bytes uploaded.

A few things I cared about while building it:

  • Nothing loads unless you ask. The model is about 11 MB, so it only downloads after you press "Start AI demo" — once. On the next visit it comes straight from your browser's cache.
  • It doesn't pretend to be sure. When two answers are close, it asks you — "Railing or balcony railing? Please tap one." — instead of guessing. Material and condition are your call: you tap them, the AI doesn't claim to see rust levels it can't judge reliably.
  • Three sample photos (AI-generated, and labelled as such) let you try it without a photo of your own.
  • Lab and Werkstatt. Like the rest of the page, it has two views: the Lab view shows the technical details, the Werkstatt view shows the calm version I'd actually put on a client's contact page.
  • It speaks all four languages of the site, works with the keyboard and with screen readers, and still leaves the page loading fast for everyone who never presses the button.

Why build this? A metalworker or joiner gets enquiries like "I need a new railing, can you help?" and then spends three emails finding out what kind. A photo says it in a second — and if the visitor's photo stays on their own phone, there's no privacy worry for anyone. That's exactly the kind of practical AI I want to bring to Handwerk websites.

The other highlight: this blog now speaks German and English

Until today every post here was English-only, even on the German version of the site. Now every post exists in both languages — all fifteen older ones plus this one. If you read the site in German, you get the German post; choose English, Chinese or Japanese and you get the English one. Switching the language in the menu swaps the text instantly, no reload.

To make that work, the little script that builds this blog got an update: each post is now written as two files, one German, one English, and the script places both into the same page. The two versions are written separately — this isn't machine translation stitched on at the end — and the German posts use the same words the German site uses for its own buttons and pages.

And everything else

  • A new logo. The hexagon "MR" mark replaces the old green one, in a light and a dark version that follow the site's bright and dark mode. In the footer, the mark now sits next to my name and tagline as real text, because the full logo's small print was simply too tiny to read there. New browser-tab icons came with it.
  • Lighter and faster. On a first visit the logo and icons now weigh about 19 KB instead of almost 100 KB. Text files are compressed site-wide, and each page now loads only its own language instead of all four — about 88 KB less on every page.
  • Accessibility at 100. Lighthouse now gives the main pages a perfect accessibility score: better contrast for small orange text, the footer and a few tiles, and buttons whose spoken names match what you see on them.
  • Your language choice, respected. The site remembers a language only when you pick it in the menu. Otherwise it makes a fresh guess per visit — and it never switches you to English on its own, because German is the default here.
  • The second address works properly. The site can also be reached at www.roehn.de/michael/, and the language detection and the visitor counter now work there too.
  • The portrait stays put. On pages with a long headline my photo used to slide down the header. It now sits in the top-right corner on every page, on any screen.

That's a lot for one Sunday, and most of it you'll never notice — which is exactly the point. Go try the photo demo, or get in touch if your own workshop could use a contact page that understands photos.

Hat Ihnen dieser Beitrag gefallen?

Ich freue mich über Ihr Feedback oder ein Gespräch über Ihr eigenes Projekt.

Kontakt aufnehmen