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

Jls -

Babel Fish AI, ett personligt projekt, är ett innovativt Chrome-tillägg som omvandlar röst till text med exceptionell precision, samtidigt som det erbjuder ett alternativ för automatisk översättning. Utformat för att vara pålitligt och reklamfritt, levererar det en rösttranskription av hög kvalitet via OpenAIs Whisper API. Jag skapade detta tillägg delvis för att tillgodose ett personligt 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 dess intuitiva gränssnitt och anpassningsbara inställningar möjliggör Babel Fish AI en snabb och noggrann transkription, med ett omedelbart översättningsalternativ för att övervinna språkbarriärer.

2. Funktioner och Alternativ

  • Avancerad Rösttranskription:

    • Fångar ljud i hög kvalitet via mikrofonen.
    • Transkription utförs av OpenAIs 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 den transkriberade texten, som kan aktiveras vid behov.
    • Möjlighet att använda tillägget enbart för transkription.

  • Fullständigt Flerspråkigt Stöd: Babel Fish AI bearbetar röstinmatningen och visar texten på flera språk, vilket utökar 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 att visa i ett aktivt inmatningsfält eller i en dialogruta.
    • Anpassningsbar statusremsa (färg, opacitet, varaktighet) för omedelbar visuell feedback.

  • Avancerade Alternativ:

    • Expertläge med detaljerad konfiguration (API-URL:er, inställningar per domän, etc.).
    • Tilläggsinställningar tillgängliga via en användarvänlig inställningssida.

3. Bakom Kulisserna: Mitt Äventyr med AI och Roo Code

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

Låt mig berätta hur jag förvandlade en idé till verklighet, med hjälp av kraften hos flera AI och en unik utvecklingsmiljö.

3.1. Roo Code: Min AI-kodningskompanjon

Roo Code är mycket mer än bara ett VS Code-tillägg. Det är en verklig självständig kodagent som assisterar dig i ditt arbete. Föreställ dig en AI-bidragsgivare som kan:

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

För att utveckla Babel Fish AI använde jag Roo Code som en dirigent som styrde olika AI för att samarbeta i skapandet av tillägget.

3.2. En Samling AI för ett Unikt Projekt

Jag använde mig av ett verkligt panel av AI, 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 samarbetspartners, där var och en tillförde sin del till helheten.
  • Gemini (gratismodeller): Deras kostnadsfrihet var en stor fördel, även om jag var tvungen att jonglera med kvoter (tack och lov hanterar Roo Code upprepade försök vid misslyckanden!).

3.3. Att Övervinna Hinder: En Resa Fylld av Utmaningar (och Lösningar!)

Utvecklingen var långt ifrån en dans på rosor. Jag stötte på flera utmaningar, bland annat:

  • Åtkomst till Mikrofonen och Behörigheter: Till en början var det omöjligt att få behörighet att få åtkomst till mikrofonen! AI krävde att en “mikrofon”-behörighet skulle läggas till, vilket inte finns i Chrome Manifest V3. Jag var tvungen att gräva i den officiella dokumentationen och ge den till Claude 3.5 Sonnet för att han skulle hitta lösningen.

  • Säker Lagring av API-nyckeln: En annan knivig fråga: hur man på ett säkert sätt lagrar och hämtar OpenAI:s API-nyckel i Chrome? Jag tillhandahöll den officiella dokumentationen till Gemini, som lyckades föreslå den rätta koden för att interagera med Chromes lagring.

3.4. Samarbete och Experimenterande: Nyckeln till Framgång

Jag använde nästan alla AI för inställningar och lokaliseringsalternativ, och jag ville testa Roo Code.

Utöver dessa specifika utmaningar kunde jag:

  • Testa Roo Code under Riktiga Förhållanden: Utvecklingen av Babel Fish AI var också ett tillfälle att pröva detta lovande verktyg.
  • Generera Ikonen och Bakgrundsbilden: Tack vare DALL-E 3 (integrerat i OpenAI) kunde jag skapa en unik visuell identitet för tillägget.
  • Anpassa Visningsremsan: Jag använde GIMP för att extrahera färgerna från bilden, och bad sedan AI att koda den del av inställningarna som gör det möjligt att konfigurera färgerna på remsan.
  • Översätta Gränssnittet till Flera Språk: Jag utnyttjade AI:s kraft via Roo Code för att generera lokalisationsfilerna (_locales) och översätta inställningarna till många språk, vilket sparade avsevärd tid!
  • Skapa Lösenhetsmenyer: AI genererade allt, vilket var en enorm tidssparare.
  • Hantera HTML-renderingen av inställningarna: i samarbete med AI.

3.5. Möjliga Svårigheter

  • Problem med att injicera text i en iframe för Google Chat: Ett undantag lades till, och jag använde en standard popup.
  • Expertläge och behörigheter: För att tillåta ändring av API-URL:erna var jag tvungen att godkänna alla värdar i manifestet. Detta verkar vara ett problem med Chromes förstärkta säkerhet, och jag ser ingen lösning just nu (om någon har en idé, är jag intresserad!).

4. Varför Babel Fish AI? Ett Tillägg Född ur ett Behov

Innan vi dyker in i de tekniska detaljerna är det viktigt att förstå varför jag skapade Babel Fish AI. Allt började med ett personligt behov:

  • Trött på att skriva långa promtar: Jag ville kunna kommunicera med AI på ett mer naturligt sätt, genom att tala direkt med dem.
  • Dåliga transkriptioner: De transkriptionstillägg jag testade var under all kritik.
  • Ö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 alltså ur en önskan att skapa ett verktyg som tillgodoser mina egna behov, samtidigt som det är användbart för gemenskapen.

5. En Närmare Titt på Koden och de Tekniska Detaljerna

Babel Fish AI är byggt på en typisk Chrome-tilläggsarkitektur, med några särdrag relaterade till användningen av OpenAIs API:er.

Här är en översikt över de viktigaste komponenterna:

5.1. Allmän 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, tillgängliga resurser, etc.
  • background.js: Servicearbetaren som körs i bakgrunden. Den hanterar händelser (klick på ikonen, snabbkommandon), injicerar content script vid behov, och kommunicerar med content script.
  • content.js: Skriptet som injiceras i webbsidor. Det interagerar direkt med DOM, fångar ljud från mikrofonen, anropar API:erna för transkription och översättning, och visar resultaten.
  • src/utils/api.js: Innehåller funktioner för att anropa OpenAIs Whisper API (transkription).
  • src/utils/translation.js: Innehåller funktioner för att anropa OpenAIs GPT API (översättning).
  • src/utils/ui.js: Innehåller hjälpfunktioner för att hantera användargränssnittet (remsa, dialogruta, kopieringsknapp).
  • src/constants.js: Definierar konstanter för konfiguration, statusar, åtgärder, etc.
  • src/pages/options/: Innehåller filer för tilläggets 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 få åtkomst till den aktiva fliken.
  • storage: För att lagra API-nyckeln och tilläggets inställningar.
  • commands: För att definiera snabbkommandon.
  • scripting: För att injicera content script.
  • host_permissions: https://api.openai.com/* för API-anrop, och https://*/* vilket är nödvändigt i expertläge för att ge användaren möjlighet att specificera egna API-URL:er.

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

5.3. background.js

background script har flera roller:

  • Injektion av content script: Om content script inte redan har injicerats, injicerar background.js det vid en interaktion (klick på ikonen eller snabbkommandon).
  • Hantering av händelser: Det lyssnar på händelser från chrome.runtime.onMessage (meddelanden från content script), chrome.action.onClicked (klick på ikonen) och chrome.commands.onCommand (snabbkommandon).
  • Kommunikation med content script: Det skickar meddelanden till content script för att starta eller stoppa inspelning ({ action: ACTIONS.TOGGLE }).
  • Uppdatering av ikonen: Det uppdaterar tilläggets badge för att indikera inspelningsstatus (pågår, stoppad, fel).

5.4. content.js

content script är tilläggets kärna. Det utför följande uppgifter:

  • Initialisering: Det initierar API-nyckeln och färginställningarna för remsan från Chromes lagring.
  • Ljudinspelning: Det använder API:et navigator.mediaDevices.getUserMedia för att få åtkomst till mikrofonen och spela in ljud.
  • Transkription: Det använder funktionen transcribeAudio (src/utils/api.js) för att skicka ljudet till OpenAIs Whisper API och erhålla transkriptionen.
  • Översättning (valfritt): Om översättningsalternativet är aktiverat, använder det funktionen translateText (src/utils/translation.js) för att skicka den transkriberade texten till OpenAIs GPT API och erhålla översättningen.
  • Visning: Det visar transkriptionen (och översättningen, om tillämpligt) antingen i det aktiva elementet på sidan (om det är ett textfält eller ett redigerbart element), eller i en dialogruta.
  • Hantering av remsan: Det visar en statusremsa högst upp på sidan för att indikera inspelningsstatus eller visa felmeddelanden.
  • Kommunikation med background script: Det skickar meddelanden till background script för att indikera starten, slutet eller ett fel under inspelningen.
  • Lyssnande på inställningsförändringar: Det lyssnar på förändringar i tilläggets inställningar 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:

  • 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:s API-nyckel (apiKey).
  • Tilläggsinställningarna (visning, översättning, remsfärger, etc.).

5.8. Användargränssnitt

Användargränssnittet i tillägget 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. Färgen och opaciteten på remsan ä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 att enkelt kopiera den transkriberade texten.

5.9. Felhantering

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

6. Resurser

7. Slutsats

Babel Fish AI erbjuder en komplett lösning för en noggrann rösttranskription och en valfri översättning, samtidigt som den garanterar ett intuitivt gränssnitt och stärkt säkerhet. Tack vare detta tillägg optimeras upplevelsen av att omvandla röst till text, och språkbarriären bryts ned. Testa Babel Fish AI i Chrome Web Store och upptäck hur det kan förvandla din kommunikation.

Tack för din läsning, och njut av att använda Babel Fish AI!

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