Wie ich 12 Sprachen gelernt habe - in einer Nacht

Mit den neuesten Erkenntnissen aus dem maschinellen Lernen und cleverem Caching

Ein langer Weg zu Sprachen

Ich habe schon seit geraumer Zeit eine Idee, die sich sowohl interessant als auch herausfordernd anhörte: Was wäre nötig, um mit möglichst geringem Wartungsaufwand eine mehrsprachige Unterstützung meiner Web-App zu erreichen? Berücksichtigen Sie auch die Kosten als Haupteinschränkung (diese Website liefert keine Anzeigen und verwendet überhaupt kein Tracking, also hier keine Einnahmen), wie würde eine gültige Lösung aussehen?

Der Plan

Alles beginnt und endet mit der zu verwendenden Übersetzungsmaschine. Dank der Verwendung von Ubuntu als einer meiner täglichen Treiber habe ich einmal im App Store eine nette kleine App namens „Argos translate“ entdeckt, eine Open-Source-Übersetzungsmaschine, die auf den neuesten ML-Modellen basiert, die denen von DeepL ähneln . Wenn Sie DeepL nicht kennen, ist dies ein großartiger Übersetzer, den Sie kostenlos auf ihrer Website verwenden können.

Aber zurück zu Argos: Nach einem Blick in das zugehörige Repository habe ich gesehen, dass es auch eine OSS-Python-Lib gibt, die gut in eine selbst gehostete Umgebung passen würde. Nach kurzem Herumspielen habe ich mich entschlossen, mir einige Übersetzer über SaaS-Angebote anzuschauen, da der ganze Ratenzahlungsprozess von argos translate nicht so gut geklappt hat, wie ich es mir erhofft hatte.

Ich setze daher auf einen anderen Dienst, Cloud Translations von GCP, der monatlich 500.000 Zeichen kostenlos anbietet und dann für jede 1.000.000 etwas Geld berechnet.

Alles dreht sich ums Caching

Dank der Einrichtung von Next.js mit ISG (Incremental Site Generation) kann ich die Übersetzungen für jede Seite on-demand abrufen, was die Planung sehr vereinfacht, da kein einzelnes Deployment mit allen Übersetzungen auf einmal durchgeführt werden muss.

Trotzdem war ich mir nicht sicher, wie ich mit dem Caching der übersetzten Strings umgehen sollte. Sicher, das Edge-Netzwerk von Vercel (in dem diese PWA gehostet wird) kann diese Aufgabe absolut nutzen. Aber ich wollte, dass die Bereitstellungen unabhängig von den Übersetzungen sind. Aus diesem Grund habe ich eine zusätzliche Caching-Ebene über eine einfache Firestore-Instanz erstellt, die ebenfalls auf der GCP gehostet wird.

Die größte Herausforderung war das Parsen + Ersetzen des Blockinhalts für jeden Artikel. Wenn Sie es nicht wissen. Der Blockinhalt beschreibt den eigentlichen Textkörper des Artikels, der von mir in einem CMS erstellt wird. Bei der Übersetzung liegen diese Blöcke nicht im Klartext vor, sondern sind jeweils in eine spezielle Datenstruktur eingebettet, um die Speicherung semantischer Informationen oder Metadaten zu ermöglichen. Das zuverlässige Erkennen + Übersetzen nur der relevanten Strings war einer der größeren Teile dieser Implementierung.

Ein Mann, 12+ Sprachen

Die (derzeit) unterstützten Sprachen sind:

  • "de": Deutsch
  • "de": Deutsch
  • "fr": Französisch
  • "es": Spanisch
  • "eo": Esperanto
  • "el": Griechisch
  • "ja": Japanisch
  • "ru": Russisch
  • "hallo": Hindi
  • "er": Hebräisch
  • "tr": Türkisch
  • "af": Afrikaans
  • "ar": Arabisch
  • "ko": Koreanisch

Um die verschiedenen Varianten zu testen, platzieren Sie einfach den Sprachcode hinter der Basis-URL. Beispiel: „https://flaming.codes/fr“. Und das ist es!

Zusammenfassend sieht das Setup wie folgt aus:

  • jede Seite wird mindestens alle 4 Stunden statisch erstellt, aber nur auf Anfrage; Dies bedeutet, dass für eine bestimmte Site höchstens alle 4 Stunden ein neuer Übersetzungsauftrag durchgeführt wird
  • die Übersetzungen selbst werden zuerst von Firestore geladen; nur wenn nichts verfügbar ist, werden die Strings übersetzt + in Firestore zwischengespeichert

Dieses Setup funktioniert so gut, dass ich keine Übersetzungen klassisch verwenden werde, z.B. manuelles Erstellen von Json-Dateien, die die Schlüssel-Wert-Paare beibehalten. Ich werde die Cloud Translation API für alles verwenden, was internationalisiert werden muss, um es vollständig dynamisch zu machen. Dank dieser Änderungen umfasst die PWA zum Zeitpunkt der Erstellung rund 430 Seiten.

Jede Seite wird aus dem Englischen in 13 weitere Sprachen übersetzt, die sowohl die am häufigsten gesprochenen als auch die zwischen ihnen auf der ganzen Welt befindlichen darstellen. Mal sehen, wie es sich entwickelt!

  • Tom