Suchen
blogia

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

jls /
Transcription Traduction IA Extension Chrome Innovation Multilangue
Einführung von Babel Fish AI : Chrome-Erweiterung für Sprachtranskription und -übersetzung

Babel Fish AI, ein persönliches Projekt, ist eine innovative Chrome-Erweiterung, die Sprache mit außergewöhnlicher Genauigkeit in Text umwandelt und gleichzeitig eine automatische Übersetzungsoption bietet. Entwickelt, um zuverlässig und werbefrei zu sein, liefert sie hochwertige Spracherkennung über die Whisper-API von OpenAI. Ich habe diese Erweiterung teilweise erstellt, um einem persönlichen Bedürfnis gerecht zu werden: die Kommunikation mit KI 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.

1. Vorstellung

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

2. Funktionen und Optionen

  • Fortgeschrittene Sprachtranskription :

    • Hochwertige Audioaufzeichnung über das Mikrofon.
    • Transkription durch die Whisper-API von OpenAI, mit automatischem Einfügen in das aktive Eingabefeld oder Anzeige in einem Dialogfenster.

  • Optionale automatische Übersetzung :

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

  • Umfassende Mehrsprachenunterstützung : Babel Fish AI verarbeitet die Spracheingabe und zeigt den Text in verschiedenen Sprachen an, was den internationalen Einsatz 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 Einfügen in das aktive Eingabeelement oder Anzeige in einem Dialogfenster.
    • Anpassbares Statusbanner (Farbe, Opazität, Dauer) für sofortiges visuelles Feedback.

  • Erweiterte Optionen :

    • Expertenmodus mit detaillierter Konfiguration (API-URLs, domänenabhängige Parameter usw.).
    • Erweiterungseinstellungen ü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 einer spannenden Experimentierphase 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, indem ich die Leistungsfähigkeit mehrerer KI-Modelle und eine einzigartige Entwicklungsumgebung genutzt habe.

3.1. Roo Code : Mein KI-Coding-Partner

Roo Code ist weit mehr als eine einfache VS Code-Erweiterung. Es ist ein echter autonome Coding-Agent, der Sie bei Ihrer Arbeit unterstützt. Stellen Sie sich einen KI-Kopiloten vor, der:

  • In natürlicher Sprache kommuniziert.
  • Dateien direkt in Ihrem Arbeitsbereich lesen und schreiben kann.
  • Terminalbefehle ausführt.
  • Sich mit verschiedenen APIs integriert (OpenAI, Google Gemini usw.).
  • Seine “Persönlichkeit” dank “angepasster Modi” anpasst.

Für die Entwicklung von Babel Fish AI habe ich Roo Code wie einen Dirigenten eingesetzt, der verschiedene KIs anleitet, zusammen an der Erweiterung zu arbeiten.

3.2. Ein KI-Cast für ein einzigartiges Projekt

Ich habe ein echtes Panel von KIs eingesetzt, 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, jeder trug seinen Teil zum Projekt bei.
  • Gemini (kostenlose Modelle) : Ihre Kostenfreiheit war ein großer Vorteil, auch wenn ich mit Quoten jonglieren musste (zum Glück verwaltet Roo Code erneute Versuche bei Ausfällen).

3.3. Hindernisse überwinden : Ein mit Herausforderungen (und Lösungen) gepflasterter Weg

Die Entwicklung war kein Spaziergang. Ich bin auf mehrere Herausforderungen gestoßen, insbesondere:

  • Zugriff auf das Mikrofon und Berechtigungen : Anfangs war es unmöglich, die Berechtigung für das Mikrofon zu erhalten! Die KIs bestanden darauf, eine “microphone”-Berechtigung hinzuzufügen, die im Chrome Manifest V3 nicht existiert. Ich musste in die offizielle Dokumentation eintauchen und diese Claude 3.5 Sonnet zur Lösung vorlegen.

  • Sichere Speicherung des API-Schlüssels : Eine weitere Kopfnuss war, wie der OpenAI-API-Schlüssel sicher in Chrome gespeichert und abgerufen werden kann. Ich gab die offizielle Dokumentation an Gemini weiter, das mir den passenden Code vorschlagen konnte, um mit dem Chrome-Storage zu interagieren.

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

Ich habe nahezu alle KIs für Optionen und Lokalisierungen eingesetzt und wollte Roo Code testen.

Über diese spezifischen Herausforderungen hinaus 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.
  • Icon und Hintergrundbild generieren : Dank DALL·E 3 (in OpenAI integriert) konnte ich eine einzigartige visuelle Identität für die Erweiterung erstellen.
  • Das Anzeigeband personalisieren : Ich nutzte GIMP, um Farben aus dem Bild zu extrahieren, und bat dann die KI, den Optionsbereich zum Einstellen der Bannerfarben zu programmieren.
  • Die Oberfläche in mehrere Sprachen übersetzen : Ich nutzte die KI-Power über Roo Code, um die Lokalisierungsdateien (_locales) zu generieren und die Optionen in zahlreiche Sprachen zu übersetzen — eine enorme Zeitersparnis !
  • Erstellung von Dropdown-Menüs: Die KI hat alles generiert, eine enorme Zeitersparnis.
  • HTML-Rendering der Optionen verwalten: in Zusammenarbeit mit der KI.

3.5 Aufgetretene Schwierigkeiten

  • Problem beim Einfügen von Text in ein iframe für Google Chat: Es wurde eine Ausnahme hinzugefügt, und ich habe ein Standard-Popup belassen.
  • Expertenmodus und Berechtigungen: Um das Ändern der API-URLs zu ermöglichen, musste ich alle Hosts im Manifest erlauben. Das scheint mit dem strengeren Navigationsmodus von Chrome Probleme zu bereiten, und momentan sehe ich keine Lösung (wenn jemand eine Idee hat, bin ich dankbar !).

4. Warum Babel Fish AI ? Eine Erweiterung aus einem Bedürfnis heraus

Bevor wir in die technischen Details eintauchen, ist es wichtig zu verstehen, warum ich Babel Fish AI geschaffen habe. Alles begann mit einem persönlichen Bedürfnis:

  • Keine Lust mehr, lange Prompts zu tippen : Ich wollte natürlicher mit KIs kommunizieren können, indem ich sie direkt anspreche.
  • Schlechte Transkriptionen : Die Transkriptions-Erweiterungen, die ich getestet hatte, waren enttäuschend.
  • Wunsch nach Transparenz : Ich wollte eine Open-Source-Erweiterung, werbefrei und deren Code ich kontrolliere.

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

5. Fokus auf den Code und technische Details

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

Hier ein Überblick über die Hauptkomponenten :

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 läuft. Er verwaltet Ereignisse (Klick auf das Symbol, Tastenkürzel), injiziert das content script falls nötig und kommuniziert mit dem content script.
  • content.js: Das in Webseiten injizierte Skript. Es interagiert direkt mit dem DOM, erfasst das Mikrofon-Audio, ruft die Transkriptions- und Übersetzungs-APIs auf und zeigt die Ergebnisse an.
  • src/utils/api.js: Enthält die Funktionen zum Aufruf der Whisper-API von OpenAI (Transkription).
  • src/utils/translation.js: Enthält die Funktionen zum Aufruf der GPT-API von OpenAI (Übersetzung).
  • src/utils/ui.js: Beinhaltet Hilfsfunktionen zur Verwaltung der Benutzeroberfläche (Banner, Dialog, Kopier-Button).
  • src/constants.js: Definiert Konstanten für Konfiguration, 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: Um den API-Schlüssel und die Erweiterungsoptionen zu speichern.
  • commands: Um Tastenkürzel zu definieren.
  • scripting: Um das content script zu injizieren.
  • host_permissions: https://api.openai.com/* für API-Aufrufe, und https://*/*, das im Expertenmodus notwendig ist, um dem Benutzer zu ermöglichen, benutzerdefinierte API-URLs anzugeben.

Die content_scripts werden in alle URLs (<all_urls>) injiziert und werden am Ende des Dokumentenladens ausgeführt ("run_at": "document_end"). Der background script ist als Service Worker vom Typ Modul deklariert ("type": "module").

5.3. background.js

Der background script hat mehrere Rollen:

  • Injektion des content script: Wenn das content script nicht bereits injiziert ist, injiziert background.js es bei einer Interaktion (Klick auf das Symbol oder Tastenkürzel).
  • Ereignisverwaltung : Er hört auf Ereignisse chrome.runtime.onMessage (Nachrichten vom content script), chrome.action.onClicked (Klick auf das Symbol) und chrome.commands.onCommand (Tastenkürzel).
  • Kommunikation mit dem content script: Er sendet Nachrichten an den content script, um die Aufnahme zu starten oder zu stoppen ({ action: ACTIONS.TOGGLE }).
  • Aktualisierung des Symbols : Er aktualisiert das Badge des Erweiterungssymbols, um den Aufnahmestatus anzuzeigen (läuft, gestoppt, Fehler).

5.4. content.js

Der content script ist das Herzstück der Erweiterung. Er führt folgende Aufgaben aus:

  • Initialisierung : Er initialisiert den API-Schlüssel und die Banner-Farben aus dem Chrome-Storage.
  • Audioaufnahme : Er verwendet die navigator.mediaDevices.getUserMedia-API, um auf das Mikrofon zuzugreifen und Audio aufzunehmen.
  • Transkription : Er nutzt 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) : Ist die Übersetzungsoption aktiviert, nutzt er 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 : Er zeigt die Transkription (und gegebenenfalls die Übersetzung) entweder im aktiven Element der Seite (wenn es sich um ein Texteingabefeld oder ein editierbares Element handelt) oder in einem Dialogfenster an.
  • Bannerverwaltung : Er zeigt ein Statusbanner oben auf der Seite an, um den Aufnahmestatus oder Fehlermeldungen anzuzeigen.
  • Kommunikation mit dem background script : Er sendet Nachrichten an den background script, um den Beginn, das Ende oder einen Fehler bei der Aufnahme mitzuteilen.
  • Überwachung von Optionsänderungen : Er 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 Messaging-API von Chrome (chrome.runtime.sendMessage und chrome.runtime.onMessage).

5.6. API

Die Erweiterung verwendet zwei OpenAI-APIs :

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

Die API-URLs können im Optionsbereich der Erweiterung (Expertenmodus) geändert werden.

5.7. Speicherung

Die Erweiterung verwendet chrome.storage.sync zur Speicherung von:

  • Dem OpenAI-API-Schlüssel (apiKey).
  • Den Erweiterungsoptionen (Anzeige, Übersetzung, Bannerfarben usw.).

5.8. Benutzeroberfläche

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

  • Banner : Ein Statusbanner wird oben auf der Seite angezeigt, um den Aufnahmestatus oder Fehlermeldungen anzuzeigen. Farbe und Opazität des Banners sind anpassbar.
  • Dialogfenster : Die Transkription (und die Übersetzung) können in einem Dialogfenster angezeigt werden. Die Anzeigedauer ist anpassbar.
  • Kopier-Button : Ein Kopier-Button wird dem Dialogfenster hinzugefügt, um den transkribierten Text leicht zu kopieren.

5.9. Fehlerbehandlung

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

6. Ressourcen

7. Fazit

Babel Fish AI bietet eine umfassende Lösung für präzise Sprachtranskription und optionale Übersetzung, wobei eine intuitive Oberfläche und erhöhte Sicherheit gewährleistet sind. Dank dieser Erweiterung ist die Umwandlung von Sprache in Text optimiert und die Sprachbarriere wird aufgehoben. Probieren Sie Babel Fish AI im Chrome Web Store aus und entdecken Sie, wie sie Ihre Kommunikation verändern kann.

Vielen Dank für Ihre Lektüre und viel Freude bei der Nutzung von Babel Fish AI !

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