Lancering van Babel Fish AI: Chrome-extensie voor transcriptie en spraakvertaling

Jls -

Babel Fish AI, een persoonlijk project, is een innovatieve Chrome-extensie die spraak omzet in tekst met een uitzonderlijke nauwkeurigheid, terwijl het een optie voor automatische vertaling biedt. Ontworpen om betrouwbaar en reclamevrij te zijn, levert het een kwalitatieve spraaktranscriptie via de Whisper API van OpenAI. Ik heb deze extensie onder andere ontwikkeld om in een persoonlijke behoefte te voorzien: het vereenvoudigen van de communicatie met AI door mijn commando’s in te spreken.
Je kunt het uitsluitend gebruiken voor transcriptie of de vertaling activeren om meertalige communicatie te vergemakkelijken.
Het was ook de ideale gelegenheid om Roo Code te testen, een AI-ondersteund ontwikkelingshulpmiddel.

1. Introductie

Babel Fish AI is een persoonlijk project, ontwikkeld met ondersteuning van AI’s zoals Claude, Gemini en OpenAI via Roo Code.
Dankzij de intuïtieve interface en de aanpasbare configuratie maakt Babel Fish AI het mogelijk om snel en nauwkeurig te transcriberen, met een onmiddellijke vertaaloptie om taalbarrières te doorbreken.

2. Functionaliteiten en Opties

  • Geavanceerde Spraaktranscriptie:

    • Hoogwaardige audio-opname via de microfoon.
    • Transcriptie uitgevoerd door de Whisper API van OpenAI, met automatische invoeging in het actieve veld of weergave in een dialoogvenster.

  • Optionele Automatische Vertaling:

    • Snelle en getrouwe vertaling van de getranscribeerde tekst, te activeren naar behoefte.
    • Mogelijkheid om de extensie uitsluitend voor transcriptie te gebruiken.

  • Volledige Ondersteuning voor Meertaligheid: Babel Fish AI verwerkt de spraakinput en toont de tekst in verschillende talen, wat het internationaal gebruik uitbreidt.
    Ondersteunde talen: 🇸🇦 Arabisch, 🇩🇪 Duits, 🇺🇸 Engels, 🇪🇸 Spaans, 🇫🇷 Frans, 🇮🇳 Hindi, 🇮🇹 Italiaans, 🇯🇵 Japans, 🇰🇷 Koreaans, 🇳🇱 Nederlands, 🇵🇱 Pools, 🇵🇹 Portugees, 🇷🇴 Roemeens, 🇸🇪 Zweeds, 🇨🇳 Chinees.

  • Intuïtieve en Aanpasbare Interface:

    • Keuze tussen weergave in het actieve invoerveld of in een dialoogvenster.
    • Aanpasbaar statusbalk (kleur, doorzichtigheid, duur) voor onmiddellijke visuele feedback.

  • Geavanceerde Opties:

    • Expertmodus die een gedetailleerde configuratie biedt (API-URL’s, domeinspecifieke instellingen, etc.).
    • Instellingen van de extensie toegankelijk via een gebruiksvriendelijke optiepagina.

3. Achter de Schermen van de Ontwikkeling: Mijn Avontuur met AI en Roo Code

Babel Fish AI is niet alleen een Chrome-extensie, het is ook het resultaat van een boeiend experiment met kunstmatige intelligentie en een innovatief hulpmiddel: Roo Code.

Laat me je vertellen hoe ik een idee heb omgezet in realiteit, door te leunen op de kracht van meerdere AI’s en een unieke ontwikkelomgeving.

3.1. Roo Code: Mijn AI-Codering Partner

Roo Code is veel meer dan een simpele VS Code-extensie. Het is een echte autonome coderingsagent die je ondersteunt in je werk. Stel je een AI-copiloot voor die in staat is om:

  • Natuurlijke taal te gebruiken.
  • Bestanden direct in je werkruimte te lezen en te schrijven.
  • Terminalcommando’s uit te voeren.
  • Te integreren met diverse API’s (OpenAI, Google Gemini, etc.).
  • Zijn “persoonlijkheid” aan te passen met behulp van “aangepaste modi”.

Voor de ontwikkeling van Babel Fish AI heb ik Roo Code gebruikt als een dirigent, die verschillende AI’s aanstuurde om samen te werken aan de creatie van de extensie.

3.2. Een Cast van AI’s voor een Uniek Project

Ik heb een werkelijk panel van AI’s ingezet, elk met hun eigen sterke en zwakke punten:

  • o3-mini, Claude 3.5 Sonnet, Gemini (exp 1206, 1.5 pro exp 0827, Flash Think), GPT-4o: Deze modellen waren mijn voornaamste samenwerkingspartners, waarbij ieder zijn steentje bijdroeg.
  • Gemini (gratis modellen): Hun gratis beschikbaarheid was een groot voordeel, al moest ik wel balanceren met quota’s (gelukkig regelt Roo Code herhaalde pogingen in geval van falen!).

3.3. Obstakels Overwinnen: Een Pad Vol Struikelblokken (en Oplossingen!)

De ontwikkeling verliep niet zonder hindernissen. Ik kwam verschillende uitdagingen tegen, waaronder:

  • Toegang tot de Microfoon en Machtigingen: In het begin was het onmogelijk om toestemming voor toegang tot de microfoon te krijgen! De AI’s stonden erop een “microfoon”-machtiging toe te voegen die niet bestaat in het Manifest V3 van Chrome. Ik moest diep in de officiële documentatie duiken en die voorleggen aan Claude 3.5 Sonnet, zodat hij met een oplossing kwam.

  • Veilige Opslag van de API-sleutel: Een ander hoofdbrekend probleem: hoe sla je de OpenAI API-sleutel veilig op en haal je deze weer op in Chrome? Ik heb de officiële documentatie aan Gemini verstrekt, die erin slaagde me de juiste code te geven om met Chrome-opslag te werken.

3.4. Samenwerking en Experimentatie: De Sleutel tot Succes

Ik heb een breed scala aan AI’s ingezet voor de opties en lokalisaties, en ik wilde Roo Code uitproberen.

Naast deze specifieke uitdagingen heb ik het volgende kunnen realiseren:

  • Roo Code in de Praktijk Testen: De ontwikkeling van Babel Fish AI was ook de gelegenheid om dit veelbelovende hulpmiddel in de praktijk te brengen.
  • Het Genereren van het Icoon en de Achtergrondafbeelding: Dankzij DALL-E 3 (geïntegreerd bij OpenAI) kon ik een unieke visuele identiteit voor de extensie creëren.
  • Het Personaliseren van de Statusbalk: Ik gebruikte GIMP om de kleuren uit de afbeelding te halen, en vervolgens vroeg ik de AI om de opties voor het configureren van de balkkleuren te coderen.
  • Het Vertalen van de Interface in Meerdere Talen: Met de kracht van AI via Roo Code genereerde ik de lokalisatiebestanden (_locales) en vertaalde ik de opties in talrijke talen, wat een enorme tijdwinst opleverde!
  • Het Aanmaken van de Dropdown-menu’s: de AI genereerde alles, een enorme tijdsbesparing.
  • Het Beheren van de HTML-weergave van de Opties: in overleg met de AI.

3.5. Ervaren Moeilijkheden

  • Probleem met het injecteren van tekst in een iframe voor Google Chat: Er is een uitzondering toegevoegd, en ik heb een standaardpop-up laten staan.
  • Expertmodus en machtigingen: Om het veranderen van de API-URL’s mogelijk te maken, moest ik alle hosts autoriseren in het manifest. Dit lijkt problemen te geven met de versterkte navigatie van Chrome, en voorlopig zie ik nog geen oplossing (als iemand een idee heeft, hoor ik het graag!).

4. Waarom Babel Fish AI? Een Extensie Geboren uit een Behoefte

Voordat we ingaan op de technische details, is het belangrijk te begrijpen waarom ik Babel Fish AI heb gecreëerd. Alles begon met een persoonlijke behoefte:

  • Verveling met het typen van lange prompts: Ik wilde op een natuurlijkere manier met AI communiceren, door er direct tegen te praten.
  • Slechte transcripties: De transcriptie-extensies die ik had getest, waren teleurstellend.
  • Verlangen naar transparantie: Ik wilde een open source-extensie, zonder reclame, waarvan ik de code volledig beheer.

Babel Fish AI is dus geboren uit de wens een tool te creëren die aan mijn eigen behoeften voldoet, en tegelijkertijd waardevol is voor de gemeenschap.

5. Inzichten in de Code en Technische Details

Babel Fish AI is opgebouwd volgens de typische architectuur van een Chrome-extensie, met enkele specificaties gerelateerd aan het gebruik van de OpenAI API’s.

Hier is een overzicht van de belangrijkste componenten:

5.1. Algemene Architectuur

De extensie bestaat uit meerdere JavaScript-bestanden die met elkaar communiceren:

  • manifest.json: Het hoofconfiguratiebestand van de extensie. Het definieert de machtigingen, scripts, toegankelijke bronnen, etc.
  • background.js: De serviceworker die op de achtergrond draait. Hij handelt evenementen af (klik op het icoon, sneltoetsen), injecteert het content script indien nodig, en communiceert met het content script.
  • content.js: Het script dat op webpagina’s wordt geïnjecteerd. Het gaat rechtstreeks in op de DOM, legt audio vast vanaf de microfoon, roept de transcriptie- en vertaal-API’s aan, en toont de resultaten.
  • src/utils/api.js: Bevat de functies om de Whisper API van OpenAI (voor transcriptie) aan te roepen.
  • src/utils/translation.js: Bevat de functies om de GPT API van OpenAI (voor vertaling) aan te roepen.
  • src/utils/ui.js: Bevat hulpfuncties voor het beheer van de gebruikersinterface (balk, dialoogvenster, kopieerknop).
  • src/constants.js: Definieert constanten voor de configuratie, statussen, acties, etc.
  • src/pages/options/: Bevat de bestanden voor de optiepagina van de extensie (HTML, CSS, JavaScript).

5.2. manifest.json

Het bestand manifest.json gebruikt versie 3 van het manifest. Het verklaart de volgende machtigingen:

  • activeTab : Voor toegang tot het actieve tabblad.
  • storage: Voor het opslaan van de API-sleutel en de opties van de extensie.
  • commands: Voor het definiëren van sneltoetsen.
  • scripting: Voor het injecteren van het content script.
  • host_permissions: https://api.openai.com/* voor de API-aanroepen, en https://*/* wat noodzakelijk is in de expertmodus om de gebruiker toe te staan aangepaste API-URL’s op te geven.

De content_scripts worden geïnjecteerd op alle URL’s (<all_urls>) en uitgevoerd aan het einde van het laden van het document ("run_at": "document_end"). Het background script wordt gedeclareerd als een serviceworker van het type module ("type": "module").

5.3. background.js

Het background script vervult meerdere rollen:

  • Injectie van het content script: Als het content script nog niet is geïnjecteerd, injecteert background.js het bij een interactie (klik op het icoon of sneltoets).
  • Afhandeling van evenementen: Het luistert naar de evenementen chrome.runtime.onMessage (berichten vanuit het content script), chrome.action.onClicked (klik op het icoon) en chrome.commands.onCommand (sneltoetsen).
  • Communicatie met het content script: Het stuurt berichten naar het content script om de opname te starten of te stoppen ({ action: ACTIONS.TOGGLE }).
  • Bijwerken van het icoon: Het werkt het badge op het icoon van de extensie bij om de status van de opname (bezig, gestopt, fout) aan te geven.

5.4. content.js

Het content script is het hart van de extensie. Het verricht de volgende taken:

  • Initialisatie: Het initialiseert de API-sleutel en de kleurinstellingen van de statusbalk vanuit de Chrome-opslag.
  • Audio-opname: Het maakt gebruik van de API navigator.mediaDevices.getUserMedia voor toegang tot de microfoon en registreert de audio.
  • Transcriptie: Het maakt gebruik van de functie transcribeAudio (src/utils/api.js) om de audio naar de Whisper API van OpenAI te sturen en de transcriptie te verkrijgen.
  • Vertaling (optioneel): Als de vertaaloptie is ingeschakeld, gebruikt het de functie translateText (src/utils/translation.js) om de getranscribeerde tekst naar de GPT API van OpenAI te sturen en de vertaling te verkrijgen.
  • Weergave: Het toont de transcriptie (en de vertaling, indien van toepassing) ofwel in het actieve element van de pagina (indien het een tekstveld of bewerkbaar element is), of in een dialoogvenster.
  • Beheer van de statusbalk: Het toont een statusbalk bovenaan de pagina om de status van de opname of foutmeldingen weer te geven.
  • Communicatie met het background script: Het stuurt berichten naar het background script om het begin, het einde of een fout tijdens de opname aan te geven.
  • Luisteren naar optie-veranderingen: Het luistert naar wijzigingen in de extensie-opties en werkt de weergave dienovereenkomstig bij.

5.5. Communicatie

De communicatie tussen het background script en het content script gebeurt via de berichten-API van Chrome (chrome.runtime.sendMessage en chrome.runtime.onMessage).

5.6. API

De extensie maakt gebruik van twee API’s van OpenAI:

  • Whisper: Voor spraaktranscriptie. De standaard URL is https://api.openai.com/v1/audio/transcriptions, en het gebruikte model is whisper-1.
  • GPT: Voor vertaling (optioneel). De standaard URL is https://api.openai.com/v1/chat/completions, en het gebruikte model is gpt-4o-mini.

De URL’s van de API’s kunnen worden aangepast in de opties van de extensie (expertmodus).

5.7. Opslag

De extensie maakt gebruik van chrome.storage.sync voor het opslaan van:

  • De OpenAI API-sleutel (apiKey).
  • De opties van de extensie (weergave, vertaling, kleuren van de statusbalk, etc.).

5.8. Gebruikersinterface

De gebruikersinterface van de extensie wordt beheerd door meerdere functies in src/utils/ui.js en content.js:

  • Statusbalk: Een statusbalk wordt bovenaan de pagina weergegeven om de status van de opname of foutmeldingen aan te geven. De kleur en doorzichtigheid van de balk zijn aanpasbaar.
  • Dialoogvenster: De transcriptie (en vertaling) kunnen worden weergegeven in een dialoogvenster. De weergaveduur is aanpasbaar.
  • Kopieerknop: Er wordt een kopieerknop toegevoegd aan het dialoogvenster om de getranscribeerde tekst gemakkelijk te kopiëren.

5.9. Foutafhandeling

Fouten worden centraal beheerd. De foutmeldingen zijn gedefinieerd in src/constants.js (object ERRORS). Fouten worden via de statusbalk aan de gebruiker getoond.

6. Bronnen

7. Conclusie

Babel Fish AI biedt een complete oplossing voor een nauwkeurige spraaktranscriptie en een optionele vertaling, terwijl het een intuïtieve interface en versterkte veiligheid garandeert. Dankzij deze extensie wordt de ervaring van spraak naar tekst conversie geoptimaliseerd en worden taalbarrières weggenomen. Test Babel Fish AI in de Chrome Web Store en ontdek hoe het jouw communicatie kan transformeren.

Bedankt voor het lezen en veel plezier met Babel Fish AI!

Dit document is vertaald van de fr-versie naar de nl-taal met behulp van het o3-mini model. Voor meer informatie over het vertaalproces, raadpleeg https://gitlab.com/jls42/ai-powered-markdown-translator