Logo

Babel Fish AI, un proiect personal, este o extensie Chrome inovatoare care transformă vocea în text cu o precizie excepțională, oferind totodată o opțiune de traducere automată. Proiectată pentru a fi fiabilă și fără reclame, ea furnizează o transcriere vocală de calitate prin API-ul Whisper de la OpenAI. Am creat această extensie, parțial în scopul de a răspunde unei nevoi personale: simplificarea comunicării cu IA prin dictarea solicitărilor mele. Puteți să o folosiți exclusiv pentru transcriere sau să activați traducerea pentru a facilita comunicarea multilingvă. A fost, de asemenea, ocazia ideală pentru a testa Roo Code, un instrument de dezvoltare asistată de IA.

1. Prezentare

Babel Fish AI este un proiect personal, dezvoltat cu sprijinul IA precum Claude, Gemini și OpenAI prin Roo Code. Mulțumită interfeței intuitive și configurației personalizabile, Babel Fish AI permite obținerea rapidă și precisă a transcrierii, cu o opțiune de traducere imediată pentru a depăși barierele lingvistice.

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

  • Transcriere Vocală Avansată :

    • Captură audio de înaltă calitate prin microfon.
    • Transcriere efectuată prin 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ă în funcție de nevoie.
    • Posibilitatea de a utiliza extensia exclusiv pentru transcriere.

  • Suport Multi-lingv Complet : Babel Fish AI procesează intrarea vocală și afișează textul în diverse limbi, ceea ce îi extinde utilizarea la nivel internațional.
    Limbi suportate : 🇸🇦 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 introducere activă sau fereastră de dialog.
    • Panglică de stare personalizabilă (culoare, opacitate, durată) pentru un feedback vizual imediat.

  • Opțiuni Avansate :

    • Mod expert care oferă o configurație detaliată (URL-urile API, parametri pe domeniu, etc.).
    • Setările extensiei accesibile printr-o pagină de opțiuni prietenoasă.

3. În Culisele Dezvoltării: Aventura Mea cu IA și Roo Code

Babel Fish AI nu este doar o extensie Chrome, ci și rezultatul 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 și pe un mediu de dezvoltare unic.

3.1. Roo Code: Partenerul 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 vă asistă în munca voastră. Imaginați-vă un copilot IA capabil să:

  • Să comunice în limbaj natural.
  • Să citească și să scrie fișiere direct în spațiul dumneavoastră de lucru.
  • Să execute comenzi în terminal.
  • Să se integreze cu diverse API-uri (OpenAI, Google Gemini, etc.).
  • Să își adapteze „personalitatea” prin „moduri personalizate”.

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

3.2. Un Ansamblu de IA pentru un Proiect Unic

Am apelat la un veritabil panel de IA, fiecare cu punctele sale forte și slabe :

  • 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 contribuind la edificiul acestui proiect.
  • Gemini (modele gratuite) : Gratuitatea lor a fost un atu major, chiar dacă a trebuit să jonglez cu cotele (din fericire, Roo Code gestionează încercările repetate în caz de eșec !).

3.3. Depășirea Obstacolelor: Un Parcurs Plin de Capcane (și de Soluții !)

Dezvoltarea nu a fost un râu lin. Am întâmpinat mai multe provocări, în special :

  • Acces la Microfon și Permisiuni : La început, era imposibil să obțin permisiunea de acces la microfon! IA insistau pentru a adăuga o permisiune “microfon” care nu există în Manifestul V3 al Chrome. A trebuit să mă scufund în documentația oficială și să o ofer lui Claude 3.5 Sonnet pentru a găsi soluția.

  • Stocarea Securizată a Cheii API : Altă enigmă: cum să stochez și să recuperez cheia API OpenAI în mod securizat în Chrome? Am furnizat documentația oficială către Gemini, care a reușit să-mi ofere codul adecvat pentru a interacționa cu stocarea Chrome.

3.4. Colaborare și Experimentare: Cheia Succesului

Am folosit puțin din 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ă:

  • Testarea Roo Code în condiții reale : Dezvoltarea Babel Fish AI a fost, de asemenea, ocazia de a pune la încercare acest instrument promițător.
  • Generarea pictogramei și a imaginii de fundal : Mulțumită DALL-E 3 (integrat la OpenAI), am putut crea o identitate vizuală unică pentru extensie.
  • Personalizarea Panglicii de Afișare : Am folosit GIMP pentru a extrage culorile din imagine, apoi am cerut IA-ului să codifice partea de opțiuni care permite configurarea culorilor panglicii.
  • Traducerea Interfeței în Mai multe Limbi : Am exploatat puterea IA prin Roo Code pentru a genera fișierele de localizare (_locales) și a traduce opțiunile în numeroase limbi, un câștig considerabil de timp!
  • Crearea meniurilor derulante: IA a generat totul, un economisire de timp incredibilă.
  • Gestionarea redării HTML a opțiunilor: în colaborare cu IA.

3.5. Dificultăți Întâmpinate

  • Problemă de injectare a textului într-un iframe pentru Google Chat: A fost adăugată o excepție, iar eu am lăsat un pop-up implicit.
  • Mod Expert și permisiuni: Pentru a permite schimbarea URL-urilor API, a trebuit să autorizez toți gazdele în manifest. Acest lucru pare să genereze probleme cu navigarea îmbunătățită a Chrome, și momentan nu văd o soluție (dacă cineva are o idee, sunt deschis la sugestii !).

4. De ce Babel Fish AI? O Extensie Născută dintr-o Nevoie

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

  • Sătul de a tasta solicitări lungi : Doream să pot comunica cu IA într-un mod mai natural, vorbindu-le direct.
  • Transcrieri mediocre : Extensiile de transcriere pe care le testasem erau dezamăgitoare.
  • Dorința de transparență : Doream o extensie open source, fără reclame, și a cărei cod aș putea să o controlez.

Astfel, Babel Fish AI s-a născut din dorința de a crea un instrument care să răspundă propriilor mele nevoi, fiind totodată util comunității.

5. Detalii despre Cod și Aspectele 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 componentelor principale :

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-ul care rulează în fundal. Gestionează evenimentele (clic pe pictogramă, comenzi rapide 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 din microfon, apelează API-urile de transcriere și traducere și afișează rezultatele.
  • src/utils/api.js: Conține funcțiile pentru a apela API-ul Whisper de la OpenAI (transcriere).
  • src/utils/translation.js: Conține funcțiile pentru a apela API-ul GPT de la OpenAI (traducere).
  • src/utils/ui.js: Conține funcții utilitare pentru a gestiona interfața cu utilizatorul (bannière, fereastră 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 comenzi rapide de la tastatură.
  • scripting: Pentru a injecta content script.
  • host_permissions: https://api.openai.com/* pentru apelurile la API și https://*/* care este necesar în modul expert pentru a permite utilizatorului să specifice URL-uri API personalizate.

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

5.3. background.js

Scriptul background 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 comandă rapidă de la tastatură).
  • Gestionarea evenimentelor : Ascultă evenimentele chrome.runtime.onMessage (mesaje de la content script), chrome.action.onClicked (clic pe pictogramă) și chrome.commands.onCommand (comenzi rapide de la tastatură).
  • Comunicare cu content script: Trimite mesaje către content script pentru a porni sau opri înregistrarea ({ action: ACTIONS.TOGGLE }).
  • Actualizarea pictogramei : Actualizează badge-ul pictogramei extensiei pentru a indica starea înregistrării (în curs, oprit, eroare).

5.4. content.js

Scriptul content.js este inima extensiei. Efecuează următoarele sarcini :

  • Inițializare : Inițializează cheia API și opțiunile de culoare ale panglicii din stocarea Chrome.
  • Capturarea audio : Folosește API-ul navigator.mediaDevices.getUserMedia pentru a accesa microfonul și a înregistra audio.
  • Transcriere : Folosește funcția transcribeAudio (src/utils/api.js) pentru a trimite audio-ul la 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 pentru a obține traducerea.
  • Afișare : Afișează transcrierea (și traducerea, dacă este cazul) fie în elementul activ al paginii (dacă este un câmp de text sau un element editabil), fie într-o fereastră de dialog.
  • Gestionarea panglicii : Afișează o panglică de stare în partea de sus a paginii pentru a indica starea înregistrării sau pentru a afișa mesaje de eroare.
  • Comunicare cu background script : Trimite mesaje către background script pentru a indica începutul, sfârșitul sau o eroare a înregistrării.
  • Ascultarea schimbărilor opțiunilor : Ascultă schimbările din opțiunile extensiei și actualizează afișarea în consecință.

5.5. Comunicare

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 transcrierea vocală. URL-ul implicit este https://api.openai.com/v1/audio/transcriptions, iar modelul utilizat este whisper-1.
  • GPT : Pentru traducere (opțional). URL-ul implicit este https://api.openai.com/v1/chat/completions, iar modelul utilizat 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 panglicii, etc.).

5.8. Interfață Utilizator

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

  • Panglică : O panglică 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 panglicii sunt personalizabile.
  • Fereastră de dialog : Transcrierea (și traducerea) pot fi afișate într-o fereastră de dialog. Durata de afișare este personalizabilă.
  • Buton de copiere : Un buton de copiere este adăugat în fereastra 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 intermediul panglicii de stare.

6. Resurse

7. Concluzie

Babel Fish AI oferă o soluție completă pentru o transcriere vocală precisă și o traducere opțională, garantând totodată o interfață intuitivă și o securitate sporită. Datorită acestei extensii, experiența conversiei vocii în text este optimizată și 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 o bună utilizare a Babel Fish AI!

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