Zoeken
blogia

Lancering van Babel Fish AI: Chrome-extensie voor spraaktranscriptie en -vertaling

jls /
Transcription Traduction IA Extension Chrome Innovation Multilangue
Lancering van Babel Fish AI: Chrome-extensie voor spraaktranscriptie en -vertaling

Babel Fish AI, een persoonlijk project, is een innovatieve Chrome-extensie die spraak met uitzonderlijke nauwkeurigheid omzet naar tekst en tegelijkertijd een automatische vertaaloptie biedt. Ontworpen om betrouwbaar en reclamevrij te zijn, levert het hoogwaardige spraaktranscriptie via de Whisper-API van OpenAI. Ik heb deze extensie gedeeltelijk gemaakt om aan een persoonlijke behoefte te voldoen: eenvoudiger communiceren met AI door mijn verzoeken in te spreken. Je kunt het exclusief gebruiken voor transcriptie of de vertaalfunctie inschakelen om meertalige communicatie te vergemakkelijken. Het was ook de perfecte gelegenheid om Roo Code te testen, een door AI ondersteund ontwikkelhulpmiddel.

1. Introductie

Babel Fish AI is een persoonlijk project, ontwikkeld met de hulp van AI zoals Claude, Gemini en OpenAI via Roo Code. Dankzij de intuïtieve interface en de aanpasbare configuratie biedt Babel Fish AI snelle en nauwkeurige transcripties, met een directe vertaaloptie om taalbarrières te overwinnen.

2. Functies en opties

  • Transcription vocale avancée :

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

  • Automatische vertaling (optioneel) :

    • Snelle en trouwe vertaling van de getranscribeerde tekst, in te schakelen naar behoefte.
    • Mogelijkheid om de extensie alleen voor transcriptie te gebruiken.

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

  • Intuïtieve en aanpasbare interface :

    • Keuze tussen weergeven in het actieve invoerveld of in een dialoogvenster.
    • Aanpasbare statusbalk (kleur, dekking, duur) voor directe visuele feedback.

  • Geavanceerde opties :

    • Expertmodus met gedetailleerde configuratie (API-URL’s, domeinspecifieke parameters, enz.).
    • Extensie-instellingen toegankelijk via een gebruiksvriendelijke optionele pagina.

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 boeiende experimentatie met kunstmatige intelligentie en een innovatief hulpmiddel: Roo Code.

Laat me vertellen hoe ik een idee tot werkelijkheid maakte, door te vertrouwen op de kracht van meerdere AI-modellen en een unieke ontwikkelomgeving.

3.1. Roo Code: mijn AI-coderingpartner

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

  • In natuurlijke taal communiceert.
  • Bestanden direct kan lezen en schrijven in je werkruimte.
  • Terminalopdrachten kan uitvoeren.
  • Integreert met diverse API’s (OpenAI, Google Gemini, enz.).
  • Zijn “persoonlijkheid” kan aanpassen via “aangepaste modi”.

Om Babel Fish AI te ontwikkelen gebruikte ik Roo Code als dirigent, waarbij verschillende AI’s werden aangestuurd om samen te werken aan de extensie.

3.2. Een cast van AI’s voor een uniek project

Ik heb een heel scala aan AI’s ingeschakeld, elk met hun 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 medewerkers, elk leverde een bijdrage.
  • Gemini (gratis modellen): hun gratis beschikbaarheid was een groot voordeel, hoewel ik met quota moest jongleren (gelukkig kan Roo Code herhaalde pogingen beheren bij fouten!).

3.3. Obstakels overwinnen: een pad vol hindernissen (en oplossingen!)

De ontwikkeling was geen sinecure. Ik kwam verschillende uitdagingen tegen, onder andere:

  • Toegang tot de microfoon en machtigingen: in het begin was het onmogelijk om toestemming voor microfoontoegang te krijgen! De AI’s wilden een “microphone”-machtiging toevoegen die niet bestaat in het Chrome Manifest V3. Ik moest de officiële documentatie induiken en die aan Claude 3.5 Sonnet geven zodat hij een oplossing vond.

  • Veilige opslag van de API-sleutel: een andere puzzel was hoe de OpenAI API-sleutel veilig op te slaan en terug te halen in Chrome? Ik gaf de officiële documentatie aan Gemini, die erin slaagde me de juiste code voor te stellen om met de Chrome-opslag te werken.

3.4. Samenwerking en experimentatie: de sleutel tot succes

Ik heb vrijwel alle AI’s gebruikt voor opties en lokalisaties, en ik wilde Roo Code testen.

Naast deze specifieke uitdagingen kon ik:

  • Roo Code in realistische omstandigheden testen: de ontwikkeling van Babel Fish AI was ook een gelegenheid om dit veelbelovende hulpmiddel op de proef te stellen.
  • Het pictogram en de achtergrondafbeelding genereren: dankzij DALL-E 3 (geïntegreerd in OpenAI) kon ik een unieke visuele identiteit voor de extensie creëren.
  • De kleur van de statusbalk personaliseren: ik gebruikte GIMP om kleuren uit de afbeelding te halen en vroeg de AI vervolgens om de optiesectie te coderen die het mogelijk maakt de kleuren van de balk te configureren.
  • De interface in meerdere talen vertalen: ik gebruikte de kracht van AI via Roo Code om de lokale bestanden (_locales) te genereren en de opties in vele talen te vertalen — een enorme tijdsbesparing!
  • Dropdownmenu’s creëren: de AI genereerde alles, wat veel tijd scheelde.
  • De HTML-rendering van de opties beheren: in overleg met de AI.

3.5 Problemen ondervonden

  • Probleem met het injecteren van tekst in een iframe voor Google Chat: er is een uitzondering toegevoegd en ik heb een standaard pop-up achtergelaten.
  • Expertmodus en machtigingen: om het mogelijk te maken de API-URL’s te wijzigen, moest ik alle hosts toestaan in het manifest. Dit lijkt problemen te geven met Chrome’s strengere navigatie en ik zie voorlopig geen oplossing (als iemand een idee heeft, hoor ik het graag!).

4. Waarom Babel Fish AI? Een extensie geboren uit een behoefte

Voordat we in technische details duiken, is het belangrijk te begrijpen waarom ik Babel Fish AI maakte. Het begon met een persoonlijke behoefte:

  • Moe van het typen van lange prompts: ik wilde natuurlijker met AI’s kunnen communiceren, door ze rechtstreeks aan te spreken.
  • Slechte transcripties: de transcriptie-extensies die ik had geprobeerd waren teleurstellend.
  • Wille naar transparantie: ik wilde een open-source extensie, zonder reclame, waarvan ik de code beheer.

Babel Fish AI is dus ontstaan uit de wens een tool te maken die aan mijn eigen behoeften voldoet en tegelijk nuttig is voor de gemeenschap.

5. Focus op de code en technische details

Babel Fish AI is gebouwd op een typische Chrome-extensiearchitectuur, met enkele specificiteiten gerelateerd aan het gebruik van 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 hoofdconfiguratiebestand van de extensie. Het definieert de permissies, scripts, toegankelijke bronnen, enz.
  • background.js: De service worker die op de achtergrond draait. Het beheert gebeurtenissen (klik op het pictogram, sneltoetsen), injecteert de content script indien nodig, en communiceert met de content script.
  • content.js: Het script dat in webpagina’s wordt geïnjecteerd. Het werkt direct met de DOM, neemt audio van de microfoon op, 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 aan te roepen (transcriptie).
  • src/utils/translation.js: Bevat de functies om de GPT-API van OpenAI aan te roepen (vertaling).
  • src/utils/ui.js: Bevat hulpfuncties voor het beheren van de gebruikersinterface (balk, dialoogvenster, kopieerknop).
  • src/constants.js: Definieert constanten voor configuratie, statussen, acties, enz.
  • src/pages/options/: Bevat de bestanden voor de optiespagina van de extensie (HTML, CSS, JavaScript).

5.2. manifest.json

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

  • activeTab : Om toegang te krijgen tot het actieve tabblad.
  • storage: Om de API-sleutel en extensie-opties op te slaan.
  • commands: Om sneltoetsen in te stellen.
  • scripting: Om de content script te injecteren.
  • host_permissions: https://api.openai.com/* voor API-aanroepen, en https://*/* die nodig is in 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 worden uitgevoerd aan het einde van het documentladen ("run_at": "document_end"). De background script is gedeclareerd als een service worker van het moduletype ("type": "module").

5.3. background.js

De background script heeft meerdere rollen:

  • Injectie van de content script: als de content script nog niet geïnjecteerd is, injecteert background.js deze bij een interactie (klik op het pictogram of sneltoets).
  • Eventbeheer: het luistert naar events chrome.runtime.onMessage (berichten van de content script), chrome.action.onClicked (klik op het pictogram) en chrome.commands.onCommand (sneltoetsen).
  • Communicatie met de content script: het verstuurt berichten naar de content script om opname te starten of te stoppen ({ action: ACTIONS.TOGGLE }).
  • Bijwerken van het pictogram: het werkt de badge van het extensiepictogram bij om de opname-status aan te geven (actief, gestopt, fout).

5.4. content.js

De content script is het hart van de extensie. Het voert de volgende taken uit:

  • Initialisatie: het initialiseert de API-sleutel en de kleurinstellingen van de balk vanuit de Chrome-opslag.
  • Audio-opname: het gebruikt de navigator.mediaDevices.getUserMedia API om toegang te krijgen tot de microfoon en audio op te nemen.
  • Transcriptie: het gebruikt 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 eventueel de vertaling) in het actieve element van de pagina (als het een tekstveld of bewerkbaar element is) of in een dialoogvenster.
  • Beheer van de balk: het toont een statusbalk bovenaan de pagina om de opname-status of foutmeldingen weer te geven.
  • Communicatie met de background script: het stuurt berichten naar de background script om het begin, het einde of een fout van de opname aan te geven.
  • Luisteren naar optie-wijzigingen: het luistert naar wijzigingen in de extensie-opties en werkt de weergave dienovereenkomstig bij.

5.5. Communicatie

De communicatie tussen de background script en de content script verloopt via de Chrome messaging API (chrome.runtime.sendMessage en chrome.runtime.onMessage).

5.6. API

De extensie gebruikt twee OpenAI-API’s:

  • 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 API-URL’s kunnen worden gewijzigd in de extensie-opties (expertmodus).

5.7. Opslag

De extensie gebruikt chrome.storage.sync om op te slaan:

  • De OpenAI API-sleutel (apiKey).
  • Extensie-opties (weergave, vertaling, balkkleur, enz.).

5.8. Gebruikersinterface

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

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

5.9. Foutafhandeling

Fouten worden gecentraliseerd afgehandeld. Foutmeldingen zijn gedefinieerd in src/constants.js (object ERRORS). Fouten worden aan de gebruiker getoond via de statusbalk.

6. Bronnen

7. Conclusie

Babel Fish AI biedt een complete oplossing voor nauwkeurige spraaktranscriptie en een optionele vertaling, terwijl het een intuïtieve interface en verbeterde veiligheid garandeert. Dankzij deze extensie is de ervaring van spraak-naar-tekst geoptimaliseerd en wordt de taalbarrière opgeheven. Probeer Babel Fish AI in de Chrome Web Store en ontdek hoe het je 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‑versie met behulp van het model gpt-5-mini. Voor meer informatie over het vertaalproces, raadpleeg https://gitlab.com/jls42/ai-powered-markdown-translator