Lansering av Babel Fish AI: Chrome-tillägg för rösttranskription och översättning

Babel Fish AI, ett personligt projekt, är ett innovativt Chrome-tillägg som omvandlar röst till text med exceptionell noggrannhet, samtidigt som det erbjuder en automatisk översättningsfunktion. Designat för att vara tillförlitligt och utan reklam, levererar det högkvalitativ rösttranskription via OpenAI:s Whisper-API. Jag skapade detta tillägg delvis för mitt eget behov: att förenkla kommunikationen med AI genom att diktera mina förfrågningar. Du kan använda det enbart för transkription eller aktivera översättningen för att underlätta flerspråkig kommunikation. Det var också ett perfekt tillfälle att testa Roo Code, ett AI-assisterat utvecklingsverktyg.

1. Presentation

Babel Fish AI är ett personligt projekt, utvecklat med stöd av AI som Claude, Gemini och OpenAI via Roo Code. Tack vare ett intuitivt gränssnitt och anpassningsbara inställningar möjliggör Babel Fish AI snabb och exakt transkription, med en omedelbar översättningsfunktion för att övervinna språkbarriärer.

2. Funktioner och alternativ

Transkription av avancerad röst:
- Inspelning av högkvalitativt ljud via mikrofonen.
- Transkription genomförs av OpenAI:s Whisper-API, med automatisk insättning i det aktiva fältet eller visning i en dialogruta.
Valfri automatisk översättning:
- Snabb och trogen översättning av det transkriberade texten, kan aktiveras efter behov.
- Möjlighet att använda tillägget endast för transkription.
Fullständigt flerspråkigt stöd: Babel Fish AI behandlar röstinmatning och visar texten på flera språk, vilket breddar dess internationella användning.
Stödda språk: 🇸🇦 Arabiska, 🇩🇪 Tyska, 🇺🇸 Engelska, 🇪🇸 Spanska, 🇫🇷 Franska, 🇮🇳 Hindi, 🇮🇹 Italienska, 🇯🇵 Japanska, 🇰🇷 Koreanska, 🇳🇱 Nederländska, 🇵🇱 Polska, 🇵🇹 Portugisiska, 🇷🇴 Rumänska, 🇸🇪 Svenska, 🇨🇳 Kinesiska.
Intuitivt och anpassningsbart gränssnitt:
- Val mellan insättning i det aktiva inmatningsfältet eller visning i en dialogruta.
- Anpassningsbar statusremsa (färg, opacitet, varaktighet) för omedelbar visuell återkoppling.
Avancerade alternativ:
- Expertläge som erbjuder detaljerad konfiguration (API-URL:er, parametrar per domän, etc.).
- Tilläggets inställningar åtkomliga via en användarvänlig options-sida.

3. Bakom kulisserna i utvecklingen: Min resa med AI och Roo Code

Babel Fish AI är inte bara ett Chrome-tillägg, det är också resultatet av en spännande experimentering med artificiell intelligens och ett innovativt verktyg: Roo Code.

Låt mig berätta hur jag förvandlade en idé till verklighet, med stöd av flera AI-modeller och en unik utvecklingsmiljö.

3.1. Roo Code: Min AI-kodningskamrat

Roo Code är mer än en vanlig VS Code-extension. Det är en verklig autonom kodningsagent som assisterar i ditt arbete. Föreställ dig en AI-kopilot som kan:

Kommunicera i naturligt språk.
Läsa och skriva filer direkt i din arbetsyta.
Köra terminalkommandon.
Integrera med olika API:er (OpenAI, Google Gemini, etc.).
Anpassa sin “personlighet” genom “anpassade lägen”.

För att utveckla Babel Fish AI använde jag Roo Code som en dirigent, som styrde olika AI:er så att de samarbetade i skapandet av tillägget.

3.2. En ensemble av AI för ett unikt projekt

Jag anlitade en rad AI:er, var och en med sina styrkor och svagheter:

o3-mini, Claude 3.5 Sonnet, Gemini (exp 1206, 1.5 pro exp 0827, Flash Think), GPT-4o: Dessa modeller var mina huvudsakliga medarbetare, var och en bidrog till projektet.
Gemini (gratismodeller): Deras kostnadsfrihet var en stor fördel, även om jag var tvungen att jonglera med kvoterna (lyckligtvis hanterar Roo Code upprepade försök vid fel!).

3.3. Övervinna hinder: En resa med utmaningar (och lösningar!)

Utvecklingen var inte utan svårigheter. Jag stötte på flera utmaningar, bland annat:

Åtkomst till mikrofonen och behörigheter: I början var det omöjligt att få tillstånd att använda mikrofonen! AI:erna insisterade på att lägga till en “microphone”-behörighet som inte existerar i Chrome Manifest V3. Jag fick dyka ner i den officiella dokumentationen och ge den till Claude 3.5 Sonnet så att den kunde hitta en lösning.
Säker lagring av API-nyckeln: En annan huvudvärk var hur man lagrar och hämtar OpenAI-nyckeln säkert i Chrome. Jag gav den officiella dokumentationen till Gemini, som lyckades föreslå lämplig kod för att interagera med Chromes lagring.

3.4. Samarbete och experimenterande: Nyckeln till framgång

Jag använde många AI:er för funktioner och lokaliseringar, och jag ville testa Roo Code.

Utöver dessa specifika utmaningar kunde jag:

Testa Roo Code i verkliga förhållanden: Utvecklingen av Babel Fish AI var också ett tillfälle att pröva detta lovande verktyg.
Generera ikonen och bakgrundsbilden: Med DALL·E 3 (integrerat i OpenAI) skapade jag en unik visuellt identitet för tillägget.
Anpassa statusremsans färger: Jag använde GIMP för att extrahera färger från bilden, och bad sedan AI:n att koda delen i inställningarna som låter användaren konfigurera remsfärgerna.
Översätta gränssnittet till flera språk: Jag utnyttjade AI-kraften via Roo Code för att generera lokaliseringsfiler (_locales) och översätta alternativen till många språk — en enorm tidsbesparing!
Skapa rullgardinsmenyerna: AI:n genererade allt, en enorm tidsvinst.
Hantera HTML-renderingen av inställningarna: I samarbete med AI:n.

3.5 Svårigheter som möttes

Problem med att injicera text i en iframe för Google Chat: Ett undantag lades till, och jag lämnade en standard-popup.
Expertläge och behörigheter: För att kunna ändra API-URL:er var jag tvungen att tillåta alla värdar i manifestet. Detta verkar skapa problem med Chrome’s förstärkta navigation, och jag ser ingen lösning just nu (om någon har en idé tar jag gärna emot den!).

4. Varför Babel Fish AI? Ett tillägg fött ur ett behov

Innan vi går in på tekniska detaljer är det viktigt att förstå varför jag skapade Babel Fish AI. Allt började från ett personligt behov:

Trött på att skriva långa prompts: Jag ville kunna kommunicera med AI mer naturligt, genom att tala direkt till dem.
Mediokra transkriptioner: De transkriptionsextensions jag testat var besvikelse.
Önskan om transparens: Jag ville ha ett open source-tillägg utan reklam, där jag hade kontroll över koden.

Babel Fish AI föddes ur viljan att skapa ett verktyg som uppfyllde mina egna behov, samtidigt som det är användbart för communityn.

5. Fokus på koden och tekniska detaljer

Babel Fish AI är byggt på en typisk Chrome-tilläggsarkitektur, med några specifika delar kopplade till användningen av OpenAI:s API:er.

Här är en översikt över huvudkomponenterna:

5.1. Övergripande arkitektur

Tillägget består av flera JavaScript-filer som interagerar med varandra:

manifest.json: Huvudkonfigurationsfilen för tillägget. Den definierar behörigheter, skript, åtkomliga resurser, etc.
background.js: Service workern som körs i bakgrunden. Den hanterar händelser (klick på ikonen, kortkommandon), injicerar content script vid behov och kommunicerar med content script.
content.js: Skriptet som injiceras i webbsidor. Det interagerar direkt med DOM:en, fångar upp mikrofonljud, anropar transkriptions- och översättnings-API:er och visar resultaten.
src/utils/api.js: Innehåller funktioner för att anropa OpenAI:s Whisper-API (transkription).
src/utils/translation.js: Innehåller funktioner för att anropa OpenAI:s GPT-API (översättning).
src/utils/ui.js: Innehåller hjälpfunktioner för att hantera användargränssnittet (rem, dialogruta, kopieringsknapp).
src/constants.js: Definierar konfigurationskonstanter, tillstånd, åtgärder, etc.
src/pages/options/: Innehåller filer för tilläggens inställningssida (HTML, CSS, JavaScript).

5.2. `manifest.json`

Filen manifest.json använder version 3 av manifestet. Den deklarerar följande behörigheter:

activeTab : För att komma åt den aktiva fliken.
storage: För att lagra API-nyckeln och tilläggsinställningar.
commands: För att definiera kortkommandon.
scripting: För att injicera content script.
host_permissions: https://api.openai.com/* för API-anrop, och https://*/* som krävs i expertläge för att låta användaren ange anpassade API-URL:er.

content_scripts injiceras i alla URL:er (<all_urls>) och körs vid dokumentets slutladdning ("run_at": "document_end"). background script deklareras som en service worker av typ modul ("type": "module").

5.3. `background.js`

background script har flera roller:

Injection av content script: Om content script inte redan är injicerat, injicerar background.js det vid interaktion (klick på ikonen eller kortkommando).
Händelsehantering: Den lyssnar på händelser chrome.runtime.onMessage (meddelanden från content script), chrome.action.onClicked (klick på ikonen) och chrome.commands.onCommand (kortkommandon).
Kommunikation med content script: Den skickar meddelanden till content script för att starta eller stoppa inspelning ({ action: ACTIONS.TOGGLE }).
Uppdatering av ikonen: Den uppdaterar tilläggsikonen för att indikera inspelningsstatus (pågående, stoppad, fel).

5.4. `content.js`

content script är kärnan i tillägget. Den utför följande uppgifter:

Initialisering: Initierar API-nyckeln och remsfärgsinställningar från Chromes lagring.
Ljudinspelning: Använder API:t navigator.mediaDevices.getUserMedia för att få åtkomst till mikrofonen och spela in ljud.
Transkription: Använder funktionen transcribeAudio (src/utils/api.js) för att skicka ljudet till OpenAI:s Whisper-API och få transkriptionen.
Översättning (valfritt): Om översättningsalternativet är aktiverat använder den funktionen translateText (src/utils/translation.js) för att skicka den transkriberade texten till OpenAI:s GPT-API och få översättningen.
Visning: Visar transkriptionen (och översättningen, om tillämpligt) antingen i det aktiva elementet på sidan (om det är ett textfält eller redigerbart element) eller i en dialogruta.
Hantering av remsen: Visar en statusremsa högst upp på sidan för att indikera inspelningsstatus eller visa felmeddelanden.
Kommunikation med background script: Den skickar meddelanden till background script för att indikera start, slut eller fel vid inspelning.
Lyssning på inställningsändringar: Den lyssnar på ändringar i tilläggsinställningarna och uppdaterar visningen därefter.

5.5. Kommunikation

Kommunikationen mellan background script och content script sker via Chromes meddelande-API (chrome.runtime.sendMessage och chrome.runtime.onMessage).

5.6. API

Tillägget använder två OpenAI-API:er:

Whisper: För rösttranskription. Standard-URL:en är https://api.openai.com/v1/audio/transcriptions, och modellen som används är whisper-1.
GPT: För översättning (valfritt). Standard-URL:en är https://api.openai.com/v1/chat/completions, och modellen som används är gpt-4o-mini.

API-URL:erna kan ändras i tilläggets inställningar (expertläge).

5.7. Lagring

Tillägget använder chrome.storage.sync för att lagra:

OpenAI API-nyckeln (apiKey).
Tilläggsinställningar (visning, översättning, remsfärger, etc.).

5.8. Användargränssnitt

Tilläggets gränssnitt hanteras av flera funktioner i src/utils/ui.js och content.js:

Remsa: En statusremsa visas högst upp på sidan för att indikera inspelningsstatus eller visa felmeddelanden. Remsfärg och opacitet är anpassningsbara.
Dialogruta: Transkriptionen (och översättningen) kan visas i en dialogruta. Visningstiden är anpassningsbar.
Kopieringsknapp: En kopieringsknapp läggs till i dialogrutan för enkel kopiering av den transkriberade texten.

5.9. Felhantering

Fel hanteras centralt. Felmeddelanden definieras i src/constants.js (objektet ERRORS). Felen visas för användaren via statusremsan.

6. Resurser

GitHub-förråd: Babel Fish AI
Chrome Web Store: Babel Fish AI

7. Slutsats

Babel Fish AI erbjuder en komplett lösning för noggrann rösttranskription och valfri översättning, samtidigt som det garanterar ett intuitivt gränssnitt och förbättrad säkerhet. Med detta tillägg optimeras upplevelsen av att omvandla röst till text och språkbarriären lyfts. Testa Babel Fish AI på Chrome Web Store och upptäck hur det kan förändra din kommunikation.

Tack för att du läste, och trevlig användning av Babel Fish AI!

Detta dokument har översatts från fr-versionen till språket sv med hjälp av modellen gpt-5-mini. För mer information om översättningsprocessen, se https://gitlab.com/jls42/ai-powered-markdown-translator