Cerca
blogia

Lancio di Babel Fish AI : Estensione Chrome per Trascrizione e Traduzione Vocale

jls /
Transcription Traduction IA Extension Chrome Innovation Multilangue
Lancio di Babel Fish AI : Estensione Chrome per Trascrizione e Traduzione Vocale

Babel Fish AI, un progetto personale, è un’estensione Chrome innovativa che trasforma la voce in testo con una precisione eccezionale, offrendo anche un’opzione di traduzione automatica. Progettata per essere affidabile e senza pubblicità, fornisce una trascrizione vocale di qualità tramite l’API Whisper di OpenAI. Ho creato questa estensione in parte per rispondere a un bisogno personale: semplificare la comunicazione con le IA dettando le mie richieste. Puoi usarla esclusivamente per la trascrizione o attivare la traduzione per facilitare la comunicazione multilingue. È stata anche l’occasione ideale per testare Roo Code, uno strumento di sviluppo assistito dall’IA.

1. Presentazione

Babel Fish AI è un progetto personale, sviluppato con il supporto di IA come Claude, Gemini e OpenAI tramite Roo Code. Grazie alla sua interfaccia intuitiva e alla configurazione personalizzabile, Babel Fish AI permette di ottenere una trascrizione rapida e precisa, con un’opzione di traduzione immediata per superare le barriere linguistiche.

2. Funzionalità e Opzioni

  • Trascrizione Vocale Avanzata :

    • Cattura audio di alta qualità tramite il microfono.
    • Trascrizione effettuata dall’API Whisper di OpenAI, con inserimento automatico nel campo attivo o visualizzazione in una finestra di dialogo.

  • Traduzione Automatica Opzionale :

    • Traduzione rapida e fedele del testo trascritto, attivabile secondo le necessità.
    • Possibilità di usare l’estensione solo per la trascrizione.

  • Supporto Multilingue Completo : Babel Fish AI tratta l’input vocale e visualizza il testo in diverse lingue, ampliandone l’uso a livello internazionale.
    Lingue supportate : 🇸🇦 Arabo, 🇩🇪 Tedesco, 🇺🇸 Inglese, 🇪🇸 Spagnolo, 🇫🇷 Francese, 🇮🇳 Hindi, 🇮🇹 Italiano, 🇯🇵 Giapponese, 🇰🇷 Coreano, 🇳🇱 Olandese, 🇵🇱 Polacco, 🇵🇹 Portoghese, 🇷🇴 Rumeno, 🇸🇪 Svedese, 🇨🇳 Cinese.

  • Interfaccia Intuitiva e Personalizzabile :

    • Scelta tra inserimento nel campo di testo attivo o visualizzazione in una finestra di dialogo.
    • Barra di stato personalizzabile (colore, opacità, durata) per un feedback visivo immediato.

  • Opzioni Avanzate :

    • Modalità esperto che offre una configurazione dettagliata (URL delle API, parametri per dominio, ecc.).
    • Impostazioni dell’estensione accessibili tramite una pagina di opzioni user-friendly.

3. Dietro le Quinte dello Sviluppo : La Mia Avventura con l’IA e Roo Code

Babel Fish AI non è solo un’estensione Chrome; è anche il frutto di un’esperienza entusiasmante con l’intelligenza artificiale e uno strumento innovativo: Roo Code.

Lasciami raccontare come ho trasformato un’idea in realtà, basandomi sulla potenza di diverse IA e su un ambiente di sviluppo unico.

3.1. Roo Code : Il Mio Compagno di Coding IA

Roo Code è molto più di una semplice estensione per VS Code. È un vero e proprio agente di coding autonomo che ti assiste nel lavoro. Immagina un copilota IA capace di:

  • Comunicare in linguaggio naturale.
  • Leggere e scrivere file direttamente nel tuo spazio di lavoro.
  • Eseguire comandi nel terminale.
  • Integrarsi con varie API (OpenAI, Google Gemini, ecc.).
  • Adattare la sua “personalità” grazie a “modalità personalizzate”.

Per sviluppare Babel Fish AI, ho usato Roo Code come un direttore d’orchestra, coordinando diverse IA affinché collaborassero alla creazione dell’estensione.

3.2. Un Casting di IA per un Progetto Unico

Ho coinvolto un vero e proprio panel di IA, ciascuna con i suoi punti di forza e limiti:

  • o3-mini, Claude 3.5 Sonnet, Gemini (exp 1206, 1.5 pro exp 0827, Flash Think), GPT-4o : Questi modelli sono stati i miei principali collaboratori, ognuno contribuendo al progetto.
  • Gemini (modelli gratuiti) : La loro gratuità è stata un vantaggio importante, anche se ho dovuto destreggiarmi con i limiti di quota (per fortuna Roo Code gestisce i tentativi ripetuti in caso di errore!).

3.3. Superare gli Ostacoli : Un Percorso Costellato di Insidie (e Soluzioni!)

Lo sviluppo non è stato una passeggiata. Ho incontrato diverse sfide, tra cui:

  • Accesso al Microfono e Permessi : All’inizio era impossibile ottenere l’autorizzazione per accedere al microfono! Le IA insistevano per aggiungere un permesso “microphone” che non esiste nel Manifest V3 di Chrome. Ho dovuto immergermi nella documentazione ufficiale e fornirla a Claude 3.5 Sonnet perché trovasse la soluzione.

  • Archiviazione Sicura della Chiave API : Un altro rompicapo è stato come memorizzare e recuperare la chiave API OpenAI in modo sicuro in Chrome. Ho fornito la documentazione ufficiale a Gemini, che è riuscito a propormi il codice adeguato per interagire con lo storage di Chrome.

3.4. Collaborazione ed Esperimenti : La Chiave del Successo

Ho usato un po’ tutte le IA per le opzioni e le localizzazioni, e volevo mettere alla prova Roo Code.

Oltre a queste sfide specifiche, sono riuscito a:

  • Testare Roo Code in condizioni reali : Lo sviluppo di Babel Fish AI è stata anche l’occasione per mettere alla prova questo strumento promettente.
  • Generare l’icona e l’immagine di sfondo : Grazie a DALL-E 3 (integrato in OpenAI), ho potuto creare un’identità visiva unica per l’estensione.
  • Personalizzare la Barra di Visualizzazione : Ho usato GIMP per estrarre i colori dall’immagine, poi ho chiesto all’IA di programmare la parte delle opzioni che permette di configurare i colori della barra.
  • Tradurre l’Interfaccia in Diverse Lingue : Ho sfruttato la potenza dell’IA tramite Roo Code per generare i file di localizzazione (_locales) e tradurre le opzioni in molte lingue, risparmiando moltissimo tempo!
  • Creazione dei menu a discesa: l’IA ha generato tutto, un risparmio di tempo enorme.
  • Gestire il rendering HTML delle opzioni: in concerto con l’IA.

3.5 Difficoltà incontrate

  • Problema dell’iniezione del testo in un iframe per Google Chat: è stata aggiunta un’eccezione, e ho lasciato un pop-up predefinito.
  • Modalità Esperto e permessi: per permettere di cambiare gli URL delle API, ho dovuto autorizzare tutti gli host nel manifesto. Questo sembra creare problemi con la navigazione rafforzata di Chrome, e al momento non vedo una soluzione (se qualcuno ha un’idea, sono ben accetto!).

4. Perché Babel Fish AI ? Un’Estensione Nata da un Bisogno

Prima di entrare nei dettagli tecnici, è importante capire perché ho creato Babel Fish AI. Tutto è nato da un’esigenza personale:

  • Stanco di digitare lunghi prompt : volevo poter comunicare con le IA in modo più naturale, parlando direttamente.
  • Trascrizioni mediocri : le estensioni di trascrizione che avevo provato erano deludenti.
  • Volontà di trasparenza : volevo un’estensione open source, senza pubblicità, e di cui controllassi il codice.

Babel Fish AI è quindi nata dal desiderio di creare uno strumento che rispondesse alle mie necessità, continuando a essere utile anche alla comunità.

5. Zoom sul Codice e Dettagli Tecnici

Babel Fish AI è costruita su un’architettura tipica di estensione Chrome, con alcune specificità legate all’uso delle API di OpenAI.

Ecco una panoramica dei principali componenti :

5.1. Architettura Generale

L’estensione è composta da diversi file JavaScript che interagiscono tra loro :

  • manifest.json : Il file di configurazione principale dell’estensione. Definisce i permessi, gli script, le risorse accessibili, ecc.
  • background.js : Il service worker che viene eseguito in background. Gestisce gli eventi (clic sull’icona, scorciatoie da tastiera), inietta il content script se necessario, e comunica con il content script.
  • content.js : Lo script che viene iniettato nelle pagine web. Interagisce direttamente con il DOM, cattura l’audio dal microfono, chiama le API di trascrizione e traduzione, e visualizza i risultati.
  • src/utils/api.js : Contiene le funzioni per chiamare l’API Whisper di OpenAI (trascrizione).
  • src/utils/translation.js : Contiene le funzioni per chiamare l’API GPT di OpenAI (traduzione).
  • src/utils/ui.js : Contiene funzioni di utilità per gestire l’interfaccia utente (barra, finestra di dialogo, pulsante di copia).
  • src/constants.js : Definisce costanti per la configurazione, gli stati, le azioni, ecc.
  • src/pages/options/ : Contiene i file per la pagina di opzioni dell’estensione (HTML, CSS, JavaScript).

5.2. manifest.json

Il file manifest.json utilizza la versione 3 del manifesto. Dichiara i seguenti permessi :

  • activeTab : Per accedere alla scheda attiva.
  • storage: Per memorizzare la chiave API e le opzioni dell’estensione.
  • commands: Per definire scorciatoie da tastiera.
  • scripting: Per iniettare il content script.
  • host_permissions: https://api.openai.com/* per le chiamate alle API, e https://*/* che è necessario in modalità esperto per permettere all’utente di specificare URL di API personalizzate.

I content_scripts vengono iniettati in tutti gli URL (<all_urls>) e vengono eseguiti al termine del caricamento del documento ("run_at": "document_end"). Il background script è dichiarato come service worker di tipo modulo ("type": "module").

5.3. background.js

Il background script ha diversi ruoli :

  • Iniezione del content script : Se il content script non è già iniettato, background.js lo inietta durante un’interazione (clic sull’icona o scorciatoia da tastiera).
  • Gestione degli eventi : Ascolta gli eventi chrome.runtime.onMessage (messaggi dal content script), chrome.action.onClicked (clic sull’icona) e chrome.commands.onCommand (scorciatoie da tastiera).
  • Comunicazione con il content script : Invia messaggi al content script per avviare o fermare la registrazione ({ action: ACTIONS.TOGGLE }).
  • Aggiornamento dell’icona : Aggiorna il badge dell’icona dell’estensione per indicare lo stato della registrazione (in corso, fermata, errore).

5.4. content.js

Il content script è il cuore dell’estensione. Svolge le seguenti attività :

  • Inizializzazione : Inizializza la chiave API e le opzioni di colore della barra dallo storage di Chrome.
  • Cattura audio : Utilizza l’API navigator.mediaDevices.getUserMedia per accedere al microfono e registrare l’audio.
  • Trascrizione : Usa la funzione transcribeAudio (src/utils/api.js) per inviare l’audio all’API Whisper di OpenAI e ottenere la trascrizione.
  • Traduzione (opzionale) : Se l’opzione di traduzione è attivata, utilizza la funzione translateText (src/utils/translation.js) per inviare il testo trascritto all’API GPT di OpenAI e ottenere la traduzione.
  • Visualizzazione : Mostra la trascrizione (e la traduzione, se presente) nell’elemento attivo della pagina (se è un campo di testo o un elemento editabile), oppure in una finestra di dialogo.
  • Gestione della barra : Visualizza una barra di stato in cima alla pagina per indicare lo stato della registrazione o mostrare messaggi di errore.
  • Comunicazione con il background script : Invia messaggi al background script per indicare l’inizio, la fine o un errore della registrazione.
  • Ascolto delle modifiche delle opzioni : Ascolta i cambiamenti nelle opzioni dell’estensione e aggiorna la visualizzazione di conseguenza.

5.5. Comunicazione

La comunicazione tra il background script e il content script avviene tramite l’API di messaggistica di Chrome (chrome.runtime.sendMessage e chrome.runtime.onMessage).

5.6. API

L’estensione utilizza due API di OpenAI :

  • Whisper : Per la trascrizione vocale. L’URL predefinito è https://api.openai.com/v1/audio/transcriptions, e il modello utilizzato è whisper-1.
  • GPT : Per la traduzione (opzionale). L’URL predefinito è https://api.openai.com/v1/chat/completions, e il modello utilizzato è gpt-4o-mini.

Gli URL delle API possono essere modificati nelle opzioni dell’estensione (modalità esperto).

5.7. Archiviazione

L’estensione usa chrome.storage.sync per memorizzare :

  • La chiave API OpenAI (apiKey).
  • Le opzioni dell’estensione (visualizzazione, traduzione, colori della barra, ecc.).

5.8. Interfaccia Utente

L’interfaccia utente dell’estensione è gestita da diverse funzioni in src/utils/ui.js e content.js :

  • Barra : Una barra di stato viene mostrata in cima alla pagina per indicare lo stato della registrazione o mostrare messaggi di errore. Il colore e l’opacità della barra sono personalizzabili.
  • Finestra di dialogo : La trascrizione (e la traduzione) possono essere visualizzate in una finestra di dialogo. La durata di visualizzazione è personalizzabile.
  • Pulsante di copia : Un pulsante di copia è aggiunto alla finestra di dialogo per copiare facilmente il testo trascritto.

5.9. Gestione degli Errori

Gli errori sono gestiti in modo centralizzato. I messaggi di errore sono definiti in src/constants.js (oggetto ERRORS). Gli errori vengono mostrati all’utente tramite la barra di stato.

6. Risorse

7. Conclusione

Babel Fish AI offre una soluzione completa per una trascrizione vocale precisa e una traduzione opzionale, garantendo al contempo un’interfaccia intuitiva e una maggiore sicurezza. Grazie a questa estensione, l’esperienza di conversione della voce in testo è ottimizzata e la barriera linguistica viene eliminata. Prova Babel Fish AI sul Chrome Web Store e scopri come può trasformare la tua comunicazione.

Grazie per la lettura, e buon utilizzo di Babel Fish AI!

Questo documento è stato tradotto dalla versione fr alla lingua it utilizzando il modello gpt-5-mini. Per ulteriori informazioni sul processo di traduzione, consultare https://gitlab.com/jls42/ai-powered-markdown-translator