2026
This Website: Redesign 2026 React · TypeScript · Vite · Embeddings · Model2Vec · Hybrid Search · BM25 · Physics Simulation · View Transitions
Das Redesign dieser Seite: eine Seite auf Deutsch und Englisch, die komplett in deinem Browser läuft, mit einer mehrsprachigen semantischen Suche auf einem von 512 MB auf 5 MB geschrumpften Modell, einer Handvoll kleiner Physiksimulationen zum Spielen und ein paar Easter Eggs für Neugierige.
Die Version dieser Seite von 2020 war ein React-Template, das in die Jahre gekommen war. Das Redesign bleibt bei React, jetzt mit TypeScript und Vite, und wird zu statischen Seiten auf Deutsch und Englisch vorgerendert, auch eine pro Projekt, damit sie schnell lädt und für Suchmaschinen gut lesbar ist. Es gibt kein Backend und keine Anfragen an Dritte: Eine strenge Content Security Policy erlaubt nur die eigenen Dateien der Seite, und alles, auch die Suche, läuft in deinem Browser.
Der Look ist ruhiger: standardmäßig dunkel, Serifen-Überschriften, weiße Karten, eine Akzentfarbe. Bewegung soll zeigen, woher etwas kommt. Die Suche wächst aus dem Feld oben heraus und gleitet wieder hinein, eine Projektkarte verwandelt sich in ihre Detailansicht (View Transitions), ein Punkt auf der Ähnlichkeitskarte wächst zu seinem Artikel, und der Slogan oben wird Token für Token „generiert“, mit einem Regler zum Zurückspulen.
Das Suchfeld oben sortiert seine Antworten mit BM25, dem klassischen Keyword-Algorithmus hinter Suchmaschinen wie Elasticsearch, tolerant gegenüber Tippfehlern und mit einer Erklärung, warum ein Treffer kam. Es vergleicht nur Wörter, nicht Bedeutung, also hat das Redesign mehr versucht: eine mehrsprachige semantische Suche mit potion-multilingual-128M, einem Model2Vec-Modell von Minish Lab, das aus bge-m3 destilliert wurde. Es ist kein Transformer, sondern eine Tabelle mit einem Vektor pro Token. Ein Text wird mit einem Unigram-Tokenizer zerlegt (die wahrscheinlichste Zerlegung, gefunden mit dem Viterbi-Algorithmus), seine Vektoren werden nachgeschlagen und gemittelt; Tokenizer und Modell sind etwa 150 Zeilen TypeScript ohne ML-Bibliothek, und keine Anfrage verlässt die Seite.
Die ursprüngliche Tabelle hat 500.353 Tokens mit je 256 Dimensionen, 512 MB. Ein Build-Skript behält die 41.605 wahrscheinlichsten Tokens in lateinischer Schrift, reduziert sie per PCA auf 128 Dimensionen und speichert sie als 8-Bit-Ganzzahlen: etwa 5 MB, die erst laden, wenn du die Suche öffnest. Jeder Eintrag wird mit Titel, Antwort und englischen und deutschen Stichwörtern eingebettet, häufige Wörter entfernt; Treffer unter einer Kosinus-Ähnlichkeit von 0,47 fallen weg, und der Rest wird per gewichteter Reciprocal Rank Fusion mit der BM25-Rangfolge kombiniert. Dasselbe Modell legt beim Bauen der Seite auch die Ähnlichkeitskarte der Projekte an.
Das ehrliche Ergebnis: Bei 24 Testfragen (12 englisch, 12 deutsch) fand das geschrumpfte Modell allein für 16 die richtige Antwort, und Unsinn erreichte oft ähnliche Werte wie echte Treffer. Zusammen mit BM25 beantwortet es 18 von 24 ohne Fehltreffer, genau so viele wie die Keyword-Suche, sobald sie deutsche Stichwörter hatte; der größte Gewinn kam also von diesen. Statische Embeddings mitteln Wörter und verstehen Fragen nicht wirklich, dafür bräuchte es einen Transformer wie multilingual-e5-small, etwa 118 MB. Der semantische Teil bleibt deshalb ein Proof of Concept.
Hinter den verspielten Teilen stecken kleine Physiksimulationen, jede ohne DOM und mit Tests abgedeckt. Die Regatta hinter der Zeitleiste segelt nach einem Polardiagramm, das einem etwa elf Meter langen Kielboot nachempfunden ist: Die Boote kreuzen zu ihren Bojen, krängen mit dem scheinbaren Wind und zählen Punkte, und dein Mauszeiger ist der Wind, gemessen in Beaufort. Das Meer im Kontaktbereich ist eine Reihe federnder Wassersäulen, in denen die Flaschenpost schwimmt, sich werfen lässt und der Brief darin herumrollt.
Der Radfahrer auf der untersten Linie der Seite ist ein starrer Körper mit Kontakten an Rädern, Sattel und Kopf: Er steht nach einem Sturz wieder auf, nutzt Textzeilen als Vorsprünge und platscht ins Meer. Die Kacheln um das Profil hängen an Federn. Und der Schwerkraft-Knopf lässt das Projekt-Karussell zu einem Haufen starrer Kisten zerfallen, eine kleine Portierung von Box2D-Lite mit Reibung und Stapeln, bevor die Karten zurück an ihren Platz schweben.
Das meiste findest du durch Ausprobieren. Greif die Flasche, den Radfahrer oder eine Kachel und wirf sie, schau nachts in die Flaschenpost-Box, dreh bei der Regatta den Wind auf, oder schalte die Schwerkraft ein und schüttle den Haufen. Wem die Geduld fehlt: Die Suche weiß, wo was ist.
