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

Jls -

Babel Fish AI, un progetto personale, è un’estensione Chrome innovativa che trasforma la voce in testo con una precisione eccezionale, offrendo al contempo 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’esigenza 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. Era anche l’occasione ideale per testare Roo Code, uno strumento di sviluppo assistito da 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 sua 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 tramite l’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 necessità.
    • Possibilità di utilizzare l’estensione esclusivamente per la trascrizione.

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

  • Interfaccia Intuitiva e Personalizzabile:

    • Scelta tra visualizzazione in area di inserimento attivo o in finestra di dialogo.
    • Barra di stato personalizzabile (colore, opacità, durata) per un riscontro 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 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’appassionante sperimentazione con l’intelligenza artificiale e uno strumento innovativo: Roo Code.

Lasciami raccontarti 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 tuo lavoro. Immagina un copilota IA capace di:

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

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

3.2. Un Cast di IA per un Progetto Unico

Ho fatto affidamento su un vero e proprio panel di IA, ognuna con i propri punti di forza e di debolezza:

  • 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 apportando il proprio contributo.
  • 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 fallimento!).

3.3. Superare gli Ostacoli: Un Percorso Pieno 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 l’accesso al microfono! Le IA insistevano per aggiungere un permesso “microfono” che non esiste nel Manifest V3 di Chrome. Ho dovuto immergermi nella documentazione ufficiale e fornirla a Claude 3.5 Sonnet affinché trovasse la soluzione.

  • Memorizzazione Sicura della Chiave API: Un altro rompicapo: 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 e Sperimentazione: La Chiave del Successo

Ho utilizzato un po’ tutte le IA per le opzioni e le localizzazioni, e volevo testare 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 promettente strumento.
  • Generare l’icona e l’immagine di sfondo: Grazie a DALL-E 3 (integrato in OpenAI), sono riuscito a 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 codificare la parte delle opzioni per 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 numerose lingue, un notevole risparmio di tempo!
  • Creazione dei menu a tendina: l’IA ha generato tutto, un risparmio di tempo incredibile.
  • Gestione del rendering HTML delle opzioni: in collaborazione con l’IA.

3.5. Difficoltà Incontrate

  • Problema con l’iniezione del testo in un iframe per Google Chat: è stata aggiunta un’eccezione, e ho lasciato un pop-up di default.
  • 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 interessato!).

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

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

  • Stanco di digitare lunghi prompt: Volevo poter comunicare con le IA in modo più naturale, parlandogli direttamente.
  • Trascrizioni mediocri: Le estensioni per la trascrizione che avevo testato erano deludenti.
  • Volontà di trasparenza: Volevo un’estensione open source, senza pubblicità, e di cui potessi controllare il codice.

Babel Fish AI è quindi nata dal desiderio di creare uno strumento che rispondesse alle mie esigenze personali, pur essendo utile alla comunità.

5. Focus sul Codice e i Dettagli Tecnici

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

Ecco una panoramica dei componenti principali:

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 del 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 utilitarie per gestire l’interfaccia utente (banner, finestra di dialogo, bottone per copiare).
  • src/constants.js: Definisce le costanti per la configurazione, gli stati, le azioni, ecc.
  • src/pages/options/: Contiene i file per la pagina delle opzioni dell’estensione (HTML, CSS, JavaScript).

5.2. manifest.json

Il file manifest.json usa 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 le 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 API personalizzati.

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

5.3. background.js

Lo script di background 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 col 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 operazioni:

  • Inizializzazione: Inizializza la chiave API e le opzioni di colore della barra d’avviso dallo storage di Chrome.
  • Cattura audio: Utilizza l’API navigator.mediaDevices.getUserMedia per accedere al microfono e registrare l’audio.
  • Trascrizione: Utilizza 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, usa 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) o nell’elemento attivo della pagina (se si tratta di un campo di testo o di un elemento modificabile), o in una finestra di dialogo.
  • Gestione del banner: Visualizza un banner di stato in cima alla pagina per indicare lo stato della registrazione o mostrare messaggi di errore.
  • Comunicazione con lo script di background: Invia messaggi allo script di background per indicare l’inizio, la fine o un errore nella registrazione.
  • Controllo delle modifiche delle opzioni: Ascolta le modifiche nelle opzioni dell’estensione e aggiorna la visualizzazione di conseguenza.

5.5. Comunicazione

La comunicazione tra lo script di background 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 usato è whisper-1.
  • GPT: Per la traduzione (opzionale). L’URL predefinito è https://api.openai.com/v1/chat/completions, e il modello usato è gpt-4o-mini.

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

5.7. Storage

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

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

5.8. Interfaccia Utente

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

  • Banner: Un banner di stato viene mostrato in cima alla pagina per indicare lo stato della registrazione o visualizzare messaggi di errore. Il colore e l’opacità del banner sono personalizzabili.
  • Finestra di dialogo: La trascrizione (e la traduzione) possono essere visualizzate in una finestra di dialogo. La durata della visualizzazione è personalizzabile.
  • Bottone per copiare: Un bottone per copiare viene 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 il banner 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 abbattuta. Prova Babel Fish AI sul Chrome Web Store e scopri come può trasformare la tua comunicazione.

Grazie per aver letto, e buon utilizzo di Babel Fish AI!

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