Start von Babel Fish AI: Chrome-Erweiterung für Sprachtranskription und -übersetzung

Jls -

Babel Fish AI, ein persönliches Projekt, ist eine innovative Chrome-Erweiterung, die Sprache mit außergewöhnlicher Präzision in Text umwandelt und gleichzeitig eine automatische Übersetzungsoption bietet. Entwickelt, um zuverlässig und werbefrei zu sein, liefert sie eine hochwertige Spracherkennung über die Whisper-API von OpenAI. Ich habe diese Erweiterung zum Teil entwickelt, um einen persönlichen Bedarf zu decken: die Kommunikation mit KIs zu vereinfachen, indem ich meine Anfragen diktiere. Sie können sie ausschließlich für die Transkription verwenden oder die Übersetzung aktivieren, um die mehrsprachige Kommunikation zu erleichtern. Es war auch die ideale Gelegenheit, Roo Code zu testen, ein KI-gestütztes Entwicklungswerkzeug.

1. Präsentation

Babel Fish AI ist ein persönliches Projekt, entwickelt mit Unterstützung von KIs wie Claude, Gemini und OpenAI über Roo Code. Dank seiner intuitiven Benutzeroberfläche und individuellen Konfigurationsmöglichkeiten ermöglicht Babel Fish AI eine schnelle und präzise Transkription, mit einer sofortigen Übersetzungsoption, um Sprachbarrieren zu überwinden.

2. Funktionen und Optionen

  • Fortschrittliche Spracherkennung:

    • Audioaufnahme in hoher Qualität über das Mikrofon.
    • Transkription erfolgt über die Whisper-API von OpenAI, mit automatischer Einfügung in das aktive Feld oder Anzeige in einem Dialogfenster.

  • Optionale Automatische Übersetzung:

    • Schnelle und getreue Übersetzung des transkribierten Textes, je nach Bedarf aktivierbar.
    • Möglichkeit, die Erweiterung ausschließlich für die Transkription zu verwenden.

  • Umfassende Mehrsprachige Unterstützung: Babel Fish AI verarbeitet die Spracheingabe und zeigt den Text in verschiedenen Sprachen an, was die internationale Nutzung erweitert.
    Unterstützte Sprachen: 🇸🇦 Arabisch, 🇩🇪 Deutsch, 🇺🇸 Englisch, 🇪🇸 Spanisch, 🇫🇷 Französisch, 🇮🇳 Hindi, 🇮🇹 Italienisch, 🇯🇵 Japanisch, 🇰🇷 Koreanisch, 🇳🇱 Niederländisch, 🇵🇱 Polnisch, 🇵🇹 Portugiesisch, 🇷🇴 Rumänisch, 🇸🇪 Schwedisch, 🇨🇳 Chinesisch.

  • Intuitive und anpassbare Benutzeroberfläche:

    • Wahl zwischen Anzeige im aktiven Eingabefeld oder in einem Dialogfenster.
    • Anpassbares Statusband (Farbe, Opazität, Dauer) für sofortiges visuelles Feedback.

  • Erweiterte Optionen:

    • Expertenmodus, der eine detaillierte Konfiguration ermöglicht (API-URLs, Einstellungen pro Domain etc.).
    • Einstellungen der Erweiterung sind über eine benutzerfreundliche Optionsseite zugänglich.

3. Hinter den Kulissen der Entwicklung: Mein Abenteuer mit KI und Roo Code

Babel Fish AI ist nicht nur eine Chrome-Erweiterung, sondern auch das Ergebnis eines spannenden Experiments mit künstlicher Intelligenz und einem innovativen Tool: Roo Code.

Lassen Sie mich erzählen, wie ich eine Idee in die Realität umgesetzt habe, unterstützt durch die Leistung mehrerer KIs und einer einzigartigen Entwicklungsumgebung.

3.1. Roo Code: Mein KI-Codierbegleiter

Roo Code ist weit mehr als eine einfache VS Code-Erweiterung. Es ist ein wahrer autonomer Codieragent, der Sie bei Ihrer Arbeit unterstützt. Stellen Sie sich einen KI-Copiloten vor, der in der Lage ist:

  • In natürlicher Sprache zu kommunizieren.
  • Dateien direkt in Ihrem Arbeitsbereich zu lesen und zu schreiben.
  • Terminalbefehle auszuführen.
  • Sich in verschiedene APIs (OpenAI, Google Gemini etc.) zu integrieren.
  • Seine “Persönlichkeit” dank “angepasster Modi” anzupassen.

Um Babel Fish AI zu entwickeln, habe ich Roo Code wie einen Dirigenten eingesetzt, der verschiedene KIs geleitet hat, um gemeinsam an der Erstellung der Erweiterung zu arbeiten.

3.2. Ein Ensemble von KIs für ein einzigartiges Projekt

Ich habe ein echtes Panel von KIs herangezogen, jede mit ihren Stärken und Schwächen:

  • o3-mini, Claude 3.5 Sonnet, Gemini (exp 1206, 1.5 pro exp 0827, Flash Think), GPT-4o: Diese Modelle waren meine Hauptmitarbeiter, die jeweils ihren Beitrag geleistet haben.
  • Gemini (kostenlose Modelle): Ihre Kostenfreiheit war ein großer Vorteil, auch wenn ich mit Quoten jonglieren musste (glücklicherweise kümmert sich Roo Code um wiederholte Versuche im Fehlerfall!).

3.3. Herausforderungen überwinden: Ein steiniger Weg (und Lösungen!)

Die Entwicklung verlief nicht reibungslos. Ich bin auf mehrere Herausforderungen gestoßen, unter anderem:

  • Zugriff auf das Mikrofon und Berechtigungen: Anfangs war es unmöglich, die Erlaubnis für den Mikrofonzugriff zu erhalten! Die KIs bestanden darauf, eine “Mikrofon”-Berechtigung hinzuzufügen, die im Manifest V3 von Chrome nicht existiert. Ich musste in die offizielle Dokumentation eintauchen und sie an Claude 3.5 Sonnet weitergeben, damit er eine Lösung findet.

  • Sichere Speicherung des API-Schlüssels: Ein weiteres Rätsel war, wie man den OpenAI-API-Schlüssel sicher in Chrome speichert und abruft. Ich habe die offizielle Dokumentation an Gemini weitergegeben, der mir den passenden Code für den Zugriff auf den Chrome-Speicher vorschlug.

3.4. Zusammenarbeit und Experimentieren: Der Schlüssel zum Erfolg

Ich habe alle KIs ein bisschen für die Optionen und Lokalisierungen genutzt und wollte Roo Code testen.

Neben diesen spezifischen Herausforderungen konnte ich:

  • Roo Code unter realen Bedingungen testen: Die Entwicklung von Babel Fish AI war auch eine Gelegenheit, dieses vielversprechende Tool auf die Probe zu stellen.
  • Das Icon und das Hintergrundbild generieren: Dank DALL-E 3 (integriert in OpenAI) konnte ich eine einzigartige visuelle Identität für die Erweiterung schaffen.
  • Das Anzeigenband anpassen: Ich habe GIMP verwendet, um die Farben des Bildes zu extrahieren, und die KI gebeten, den Optionsbereich zu codieren, der die Anpassung der Bandfarben ermöglicht.
  • Die Oberfläche in mehreren Sprachen übersetzen: Ich habe die Leistung der KI über Roo Code genutzt, um die Lokalisierungsdateien (_locales) zu erstellen und die Optionen in zahlreiche Sprachen zu übersetzen – eine enorme Zeitersparnis!
  • Erstellung der Dropdown-Menüs: Die KI hat alles generiert, was eine unglaubliche Zeitersparnis darstellt.
  • Verwaltung des HTML-Renders der Optionen: in Absprache mit der KI.

3.5. Aufgetretene Schwierigkeiten

  • Problem beim Einfügen des Textes in ein iframe für Google Chat: Eine Ausnahme wurde hinzugefügt und ich habe ein Standard-Pop-up beibehalten.
  • Expertenmodus und Berechtigungen: Um das Ändern der API-URLs zu ermöglichen, musste ich im Manifest alle Hosts zulassen. Dies scheint mit der verstärkten Navigation in Chrome problematisch zu sein, und ich sehe derzeit keine Lösung (falls jemand eine Idee hat, nehme ich sie gerne entgegen!).

4. Warum Babel Fish AI? Eine Erweiterung, geboren aus einem Bedarf

Bevor wir in die technischen Details einsteigen, ist es wichtig zu verstehen, warum ich Babel Fish AI erstellt habe. Alles begann mit einem persönlichen Bedarf:

  • Genug vom Tippen langer Prompts: Ich wollte in der Lage sein, mit KIs auf natürlichere Weise zu kommunizieren, indem ich direkt mit ihnen spreche.
  • Mangelhafte Transkriptionen: Die Transkriptionserweiterungen, die ich getestet hatte, waren enttäuschend.
  • Der Wunsch nach Transparenz: Ich wollte eine Open-Source-Erweiterung, die werbefrei ist und deren Code ich kontrollieren kann.

Babel Fish AI entstand also aus dem Wunsch, ein Tool zu schaffen, das meinen eigenen Bedürfnissen entspricht, und das gleichzeitig der Community nützlich ist.

5. Ein Blick auf den Code und die technischen Details

Babel Fish AI basiert auf einer typischen Architektur einer Chrome-Erweiterung, mit einigen Besonderheiten im Zusammenhang mit der Nutzung der OpenAI-APIs.

Hier ein Überblick über die wichtigsten Komponenten:

5.1. Gesamte Architektur

Die Erweiterung besteht aus mehreren JavaScript-Dateien, die miteinander interagieren:

  • manifest.json: Die Hauptkonfigurationsdatei der Erweiterung. Sie definiert Berechtigungen, Skripte, zugängliche Ressourcen usw.
  • background.js: Der Service Worker, der im Hintergrund ausgeführt wird. Er verwaltet Ereignisse (Klick auf das Symbol, Tastenkombinationen), injiziert das content script falls erforderlich und kommuniziert mit diesem.
  • content.js: Das Skript, das in Webseiten injiziert wird. Es interagiert direkt mit dem DOM, nimmt Audio vom Mikrofon auf, ruft die Transkriptions- und Übersetzungs-APIs auf und zeigt die Ergebnisse an.
  • src/utils/api.js: Enthält Funktionen, um die Whisper-API von OpenAI (Transkription) aufzurufen.
  • src/utils/translation.js: Enthält Funktionen, um die GPT-API von OpenAI (Übersetzung) aufzurufen.
  • src/utils/ui.js: Enthält Hilfsfunktionen zur Verwaltung der Benutzeroberfläche (Banner, Dialogfenster, Kopierschaltfläche).
  • src/constants.js: Definiert Konstanten für Konfigurationen, Zustände, Aktionen usw.
  • src/pages/options/: Enthält die Dateien für die Optionsseite der Erweiterung (HTML, CSS, JavaScript).

5.2. manifest.json

Die Datei manifest.json verwendet Manifest Version 3. Sie deklariert folgende Berechtigungen:

  • activeTab : Um auf den aktiven Tab zuzugreifen.
  • storage: Zur Speicherung des API-Schlüssels und der Optionen der Erweiterung.
  • commands: Zur Definition von Tastenkombinationen.
  • scripting: Zur Injektion des content script.
  • host_permissions: https://api.openai.com/* für API-Aufrufe und https://*/*, was im Expertenmodus notwendig ist, um dem Benutzer die Angabe benutzerdefinierter API-URLs zu ermöglichen.

Die content_scripts werden auf allen URLs (<all_urls>) injiziert und am Ende des Ladens des Dokuments ausgeführt ("run_at": "document_end"). Das background script wird als Service Worker vom Typ Modul deklariert ("type": "module").

5.3. background.js

Das background script übernimmt mehrere Aufgaben:

  • Injektion des content script: Falls das content script noch nicht injiziert wurde, fügt background.js es bei einer Interaktion (Klick auf das Symbol oder Tastenkombination) ein.
  • Verwaltung der Ereignisse: Es hört auf die Ereignisse chrome.runtime.onMessage (Nachrichten vom content script), chrome.action.onClicked (Klick auf das Symbol) und chrome.commands.onCommand (Tastenkombinationen).
  • Kommunikation mit dem content script: Es sendet Nachrichten an das content script, um die Aufnahme zu starten oder zu beenden ({ action: ACTIONS.TOGGLE }).
  • Aktualisierung des Symbols: Es aktualisiert das Badge des Erweiterungssymbols, um den Zustand der Aufnahme (laufend, gestoppt, Fehler) anzuzeigen.

5.4. content.js

Das content script ist das Herz der Erweiterung. Es führt folgende Aufgaben aus:

  • Initialisierung: Es initialisiert den API-Schlüssel und die Farboptionen für das Banner aus dem Chrome-Speicher.
  • Audioaufnahme: Es nutzt die API navigator.mediaDevices.getUserMedia, um auf das Mikrofon zuzugreifen und Audio aufzunehmen.
  • Transkription: Es verwendet die Funktion transcribeAudio (src/utils/api.js), um das Audio an die Whisper-API von OpenAI zu senden und die Transkription zu erhalten.
  • Übersetzung (optional): Falls die Übersetzungsoption aktiviert ist, nutzt es die Funktion translateText (src/utils/translation.js), um den transkribierten Text an die GPT-API von OpenAI zu senden und die Übersetzung zu erhalten.
  • Anzeige: Es zeigt die Transkription (und ggf. die Übersetzung) entweder im aktiven Element der Seite (falls es sich um ein Texteingabefeld oder ein editierbares Element handelt) oder in einem Dialogfenster an.
  • Verwaltung des Banners: Es zeigt ein Statusbanner oben auf der Seite an, um den Zustand der Aufnahme oder Fehlermeldungen darzustellen.
  • Kommunikation mit dem background script: Es sendet Nachrichten an das background script, um den Beginn, das Ende oder einen Fehler der Aufnahme zu signalisieren.
  • Beobachtung von Optionsänderungen: Es hört auf Änderungen in den Erweiterungsoptionen und aktualisiert die Anzeige entsprechend.

5.5. Kommunikation

Die Kommunikation zwischen dem background script und dem content script erfolgt über die Chrome-Messaging-API (chrome.runtime.sendMessage und chrome.runtime.onMessage).

5.6. API

Die Erweiterung nutzt zwei APIs von OpenAI:

  • Whisper: Für die Sprachtranskription. Die Standard-URL lautet https://api.openai.com/v1/audio/transcriptions und das verwendete Modell ist whisper-1.
  • GPT: Für die Übersetzung (optional). Die Standard-URL lautet https://api.openai.com/v1/chat/completions und das verwendete Modell ist gpt-4o-mini.

Die API-URLs können in den Optionen der Erweiterung (Expertenmodus) geändert werden.

5.7. Speicherung

Die Erweiterung verwendet chrome.storage.sync, um zu speichern:

  • Den OpenAI-API-Schlüssel (apiKey).
  • Die Optionen der Erweiterung (Anzeige, Übersetzung, Bannerfarben etc.).

5.8. Benutzeroberfläche

Die Benutzeroberfläche der Erweiterung wird von mehreren Funktionen in src/utils/ui.js und content.js gesteuert:

  • Banner: Ein Statusbanner wird oben auf der Seite angezeigt, um den Zustand der Aufnahme oder Fehlermeldungen anzuzeigen. Die Farbe und Opazität des Banners sind anpassbar.
  • Dialogfenster: Die Transkription (und Übersetzung) können in einem Dialogfenster angezeigt werden. Die Anzeigedauer ist anpassbar.
  • Kopierschaltfläche: Eine Schaltfläche zum Kopieren des transkribierten Textes wird dem Dialogfenster hinzugefügt, um das Kopieren des Textes zu erleichtern.

5.9. Fehlerverwaltung

Fehler werden zentral verwaltet. Die Fehlermeldungen sind in src/constants.js (Objekt ERRORS) definiert. Fehler werden dem Benutzer über das Statusbanner angezeigt.

6. Ressourcen

7. Fazit

Babel Fish AI bietet eine umfassende Lösung für eine präzise Sprachtranskription und eine optionale Übersetzung, während es eine intuitive Benutzeroberfläche und erhöhte Sicherheit gewährleistet. Dank dieser Erweiterung wird die Umwandlung von Sprache in Text optimiert und Sprachbarrieren werden überwunden. Testen Sie Babel Fish AI im Chrome Web Store und entdecken Sie, wie es Ihre Kommunikation transformieren kann.

Vielen Dank für Ihre Lektüre und viel Spaß mit Babel Fish AI!

Dieses Dokument wurde aus der Version fr in die Sprache en unter Verwendung des o3-mini-Modells übersetzt. Für weitere Informationen zum Übersetzungsprozess konsultieren Sie https://gitlab.com/jls42/ai-powered-markdown-translator