Lansarea Babel Fish AI : Extensie Chrome pentru Transcriere și Traducere Vocală

Babel Fish AI, un proiect personal, este o extensie Chrome inovatoare care transformă vocea în text cu o precizie excepțională, oferind în același timp o opțiune de traducere automată. Concepută pentru a fi fiabilă și fără reclame, oferă transcrieri vocale de calitate prin API-ul Whisper de la OpenAI. Am creat această extensie, în parte, pentru a răspunde unei nevoi personale: să simplific comunicarea cu IA-urile dictându-mi cererile. O puteți folosi exclusiv pentru transcriere sau puteți activa traducerea pentru a facilita comunicarea multilingvă. A fost, de asemenea, ocazia ideală de a testa Roo Code, un instrument de dezvoltare asistată de IA.

1. Prezentare

Babel Fish AI este un proiect personal, dezvoltat cu susținerea unor IA-uri precum Claude, Gemini și OpenAI prin Roo Code. Datorită interfeței sale intuitive și configurării personalizabile, Babel Fish AI permite obținerea unei transcrieri rapide și precise, cu o opțiune de traducere imediată pentru a depăși barierele lingvistice.

2. Funcționalități și Opțiuni

Transcriere vocală avansată :
- Captare audio de înaltă calitate prin microfon.
- Transcriere realizată de API-ul Whisper de la OpenAI, cu inserare automată în câmpul activ sau afișare într-o fereastră de dialog.
Traducere automată opțională :
- Traducere rapidă și fidelă a textului transcris, activabilă după necesitate.
- Posibilitatea de a folosi extensia doar pentru transcriere.
Suport multilingv complet : Babel Fish AI procesează intrarea vocală și afișează textul în diverse limbi, extinzând astfel utilizarea sa internațională.
Limbi acceptate: 🇸🇦 Arabă, 🇩🇪 Germană, 🇺🇸 Engleză, 🇪🇸 Spaniolă, 🇫🇷 Franceză, 🇮🇳 Hindi, 🇮🇹 Italiană, 🇯🇵 Japoneză, 🇰🇷 Coreeană, 🇳🇱 Olandeză, 🇵🇱 Poloneză, 🇵🇹 Portugheză, 🇷🇴 Română, 🇸🇪 Suedeză, 🇨🇳 Chineză.
Interfață intuitivă și personalizabilă :
- Alegere între afișarea în zona de input activă sau într-o fereastră de dialog.
- Panou de stare personalizabil (culoare, opacitate, durată) pentru un feedback vizual imediat.
Opțiuni avansate :
- Mod expert care oferă o configurare detaliată (URL-urile API, parametri pe domeniu etc.).
- Setările extensiei accesibile printr-o pagină de opțiuni prietenoasă.

3. În culisele dezvoltării : Aventură mea cu IA și Roo Code

Babel Fish AI nu este doar o extensie Chrome, este și rodul unei experimentări pasionante cu inteligența artificială și un instrument inovator: Roo Code.

Permiteți-mi să vă povestesc cum am transformat o idee în realitate, bazându-mă pe puterea mai multor IA-uri și pe un mediu de dezvoltare unic.

3.1. Roo Code : Tovarășul meu de codare IA

Roo Code este mult mai mult decât o simplă extensie VS Code. Este un adevărat agent de codare autonom care te asistă în munca ta. Imaginează-ți un copilot IA capabil să:

Comunice în limbaj natural.
Citească și scrie fișiere direct în spațiul tău de lucru.
Execuțe comenzi în terminal.
Se integreze cu diverse API-uri (OpenAI, Google Gemini etc.).
Adapteze „personalitatea” sa prin „moduri personalizate”.

Pentru a dezvolta Babel Fish AI, am folosit Roo Code ca pe un dirijor, ghidând diferite IA-uri să colaboreze la crearea extensiei.

3.2. Un casting de IA pentru un proiect unic

Am apelat la un adevărat panel de IA, fiecare cu punctele sale forte și slăbiciunile sale:

o3-mini, Claude 3.5 Sonnet, Gemini (exp 1206, 1.5 pro exp 0827, Flash Think), GPT-4o: Aceste modele au fost principalii mei colaboratori, fiecare aducând contribuția sa.
Gemini (modele gratuite): Gratuitatea lor a fost un avantaj major, chiar dacă a trebuit să jonglez cu cote (din fericire, Roo Code gestionează încercările repetate în caz de eșec!).

3.3. Depășirea obstacolelor : Un parcurs presărat cu provocări (și soluții!)

Dezvoltarea nu a fost un drum ușor. M-am confruntat cu mai multe provocări, în special:

Acces la microfon și permisiuni: La început, imposibil de obținut permisiunea pentru microfon! IA-urile insistau să adauge o permisiune “microphone” care nu există în Manifestul V3 al Chrome. A trebuit să sap în documentația oficială și să o furnizez lui Claude 3.5 Sonnet pentru ca el să găsească soluția.
Stocarea securizată a cheii API: Alt puzzle: cum să stochezi și să recuperezi cheia API OpenAI în mod sigur în Chrome? I-am dat documentația oficială lui Gemini, care a reușit să-mi propună codul adecvat pentru a interacționa cu stocarea din Chrome.

3.4. Colaborare și experimentare : Cheia succesului

Am folosit cam toate IA-urile pentru opțiuni și localizări, și am vrut să testez Roo Code.

Dincolo de aceste provocări specifice, am reușit să:

Testez Roo Code în condiții reale: Dezvoltarea Babel Fish AI a fost și o ocazie de a pune la încercare acest instrument promițător.
Generez pictograma și imaginea de fundal: Datorită DALL-E 3 (integrat în OpenAI), am putut crea o identitate vizuală unică pentru extensie.
Personalizez panoul de afișare: Am folosit GIMP pentru a extrage culorile din imagine, apoi i-am cerut IA-ului să codeze partea de opțiuni care permite configurarea culorilor panoului.
Traduacerea interfeței în mai multe limbi: Am exploatat puterea IA-ului prin Roo Code pentru a genera fișierele de localizare (_locales) și pentru a traduce opțiunile în numeroase limbi, o economie de timp considerabilă!
Crearea meniurilor derulante: IA a generat totul, o economie de timp uriașă.
Gestionarea redării HTML a opțiunilor: în colaborare cu IA.

3.5 Dificultăți întâlnite

Problemă la injectarea textului într-un iframe pentru Google Chat: A fost adăugată o excepție și am lăsat un pop-up implicit.
Mod Expert și permisiuni: Pentru a permite schimbarea URL-urilor API, a trebuit să autorizez toate gazdele în manifest. Aceasta pare să provoace probleme cu navigarea întărită a Chrome și momentan nu văd o soluție (dacă cineva are o idee, sunt recunoscător!).

4. De ce Babel Fish AI ? O extensie născută dintr-o nevoie

Înainte de a intra în detalii tehnice, este important să înțelegeți de ce am creat Babel Fish AI. Totul a pornit de la o nevoie personală:

Sătul să scriu prompturi lungi: Am vrut să pot comunica cu IA-urile într-un mod mai natural, vorbindu-le direct.
Transcrieri mediocre: Extensiile de transcriere pe care le testasem erau dezamăgitoare.
Dorinta de transparență: Am vrut o extensie open source, fără reclame și al cărei cod să-l controlez.

Babel Fish AI a luat naștere din dorința de a crea un instrument care să răspundă nevoilor mele, fiind în același timp util comunității.

5. Zoom pe cod și detalii tehnice

Babel Fish AI este construită pe o arhitectură tipică de extensie Chrome, cu câteva specificități legate de utilizarea API-urilor OpenAI.

Iată o privire de ansamblu asupra principalelor componente :

5.1. Arhitectura generală

Extensia este compusă din mai multe fișiere JavaScript care interacționează între ele :

manifest.json: Fișierul principal de configurare al extensiei. Definește permisiunile, scripturile, resursele accesibile etc.
background.js: Service worker care rulează în fundal. Gestionează evenimentele (clic pe pictogramă, scurtături de la tastatură), injectează content script dacă este necesar și comunică cu content script.
content.js: Scriptul care este injectat în paginile web. Interacționează direct cu DOM-ul, capturează audio de la microfon, apelează API-urile de transcriere și traducere și afișează rezultatele.
src/utils/api.js: Conține funcțiile pentru apelarea API-ului Whisper de la OpenAI (transcriere).
src/utils/translation.js: Conține funcțiile pentru apelarea API-ului GPT de la OpenAI (traducere).
src/utils/ui.js: Conține funcții utilitare pentru gestionarea interfeței utilizator (banner, casetă de dialog, buton de copiere).
src/constants.js: Definește constante pentru configurare, stări, acțiuni etc.
src/pages/options/: Conține fișierele pentru pagina de opțiuni a extensiei (HTML, CSS, JavaScript).

5.2. `manifest.json`

Fișierul manifest.json folosește versiunea 3 a manifestului. Declară următoarele permisiuni :

activeTab : Pentru a accesa fila activă.
storage: Pentru a stoca cheia API și opțiunile extensiei.
commands: Pentru a defini scurtături de la tastatură.
scripting: Pentru a injecta content script.
host_permissions: https://api.openai.com/* pentru apelurile către API-uri, și https://*/* care este necesar în modul expert pentru a permite utilizatorului să specifice URL-uri API personalizate.

content_scripts sunt injectate în toate URL-urile (<all_urls>) și rulează la sfârșitul încărcării documentului ("run_at": "document_end"). background script este declarat ca service worker de tip modul ("type": "module").

5.3. `background.js`

background script are mai multe roluri :

Injectarea content script: Dacă content script nu este deja injectat, background.js îl injectează la o interacțiune (clic pe pictogramă sau scurtătură de tastatură).
Gestionarea evenimentelor : Ascultă evenimentele chrome.runtime.onMessage (mesaje de la content script), chrome.action.onClicked (clic pe pictogramă) și chrome.commands.onCommand (scurtături de la tastatură).
Comunicarea cu content script : Trimite mesaje către content script pentru a porni sau opri înregistrarea ({ action: ACTIONS.TOGGLE }).
Actualizarea pictogramei : Actualizează insigna pictogramei extensiei pentru a indica starea înregistrării (în curs, oprit, eroare).

5.4. `content.js`

content script este inima extensiei. Efectuează următoarele sarcini :

Inițializare : Inițializează cheia API și opțiunile de culoare ale bannerului din stocarea Chrome.
Captare audio : Folosește API-ul navigator.mediaDevices.getUserMedia pentru a accesa microfonul și a înregistra audio.
Transcriere : Utiliza funcția transcribeAudio (src/utils/api.js) pentru a trimite audio către API-ul Whisper de la OpenAI și a obține transcrierea.
Traducere (opțional) : Dacă opțiunea de traducere este activată, folosește funcția translateText (src/utils/translation.js) pentru a trimite textul transcris la API-ul GPT de la OpenAI și a obține traducerea.
Afișare : Afișează transcrierea (și traducerea, după caz) fie în elementul activ al paginii (dacă este câmp de text sau element editabil), fie într-o casetă de dialog.
Gestionarea bannerului : Afișează un banner de stare în partea de sus a paginii pentru a indica starea înregistrării sau pentru a afișa mesaje de eroare.
Comunicarea cu background script : Trimite mesaje către background script pentru a indica începutul, sfârșitul sau o eroare a înregistrării.
Ascultarea modificărilor de opțiuni: Ascultă schimbările în opțiunile extensiei și actualizează afișarea în consecință.

5.5. Comunicarea

Comunicarea între background script și content script se face prin API-ul de mesagerie al Chrome (chrome.runtime.sendMessage și chrome.runtime.onMessage).

5.6. API

Extensia folosește două API-uri de la OpenAI :

Whisper : Pentru transcriere vocală. URL-ul implicit este https://api.openai.com/v1/audio/transcriptions, iar modelul folosit este whisper-1.
GPT : Pentru traducere (opțională). URL-ul implicit este https://api.openai.com/v1/chat/completions, iar modelul folosit este gpt-4o-mini.

URL-urile API pot fi modificate în opțiunile extensiei (mod expert).

5.7. Stocare

Extensia folosește chrome.storage.sync pentru a stoca :

Cheia API OpenAI (apiKey).
Opțiunile extensiei (afișare, traducere, culorile bannerului etc.).

5.8. Interfața utilizator

Interfața utilizator a extensiei este gestionată de mai multe funcții în src/utils/ui.js și content.js :

Banner : Un banner de stare este afișat în partea de sus a paginii pentru a indica starea înregistrării sau pentru a afișa mesaje de eroare. Culoarea și opacitatea bannerului sunt personalizabile.
Casetă de dialog : Transcrierea (și traducerea) pot fi afișate într-o casetă de dialog. Durata afișării este personalizabilă.
Buton de copiere : Un buton de copiere este adăugat în caseta de dialog pentru a copia ușor textul transcris.

5.9. Gestionarea erorilor

Erorile sunt gestionate centralizat. Mesajele de eroare sunt definite în src/constants.js (obiectul ERRORS). Erorile sunt afișate utilizatorului prin bannerul de stare.

6. Resurse

Depozit GitHub : Babel Fish AI
Chrome Web Store : Babel Fish AI

7. Concluzie

Babel Fish AI oferă o soluție completă pentru o transcriere vocală precisă și o traducere opțională, asigurând în același timp o interfață intuitivă și securitate sporită. Datorită acestei extensii, experiența conversiei vocii în text este optimizată, iar bariera lingvistică este ridicată. Testați Babel Fish AI pe Chrome Web Store și descoperiți cum vă poate transforma comunicarea.

Mulțumesc pentru lectură și spor la folosirea Babel Fish AI!

Acest document a fost tradus din versiunea fr în limba ro folosind modelul gpt-5-mini. Pentru mai multe informații despre procesul de traducere, consultați https://gitlab.com/jls42/ai-powered-markdown-translator