Lancement de Babel Fish AI : Extension Chrome de Transcription et Traduction Vocale

Jls -

Babel Fish AI, un projet personnel, est une extension Chrome innovante qui transforme la voix en texte avec une précision exceptionnelle, tout en offrant une option de traduction automatique. Conçue pour être fiable et sans publicité, elle fournit une transcription vocale de qualité via l’API Whisper d’OpenAI. J’ai créé cette extension en partie pour répondre à un besoin personnel : simplifier la communication avec les IA en dictant mes requêtes. Vous pouvez l’utiliser exclusivement pour la transcription ou activer la traduction pour faciliter la communication multi-langue. C’était aussi l’occasion idéale de tester Roo Code, un outil de développement assisté par IA.

1. Présentation

Babel Fish AI est un projet personnel, développé avec l’appui d’IA telles que Claude, Gemini et OpenAI via Roo Code. Grâce à son interface intuitive et à sa configuration personnalisable, Babel Fish AI permet d’obtenir une transcription rapide et précise, avec une option de traduction immédiate pour surmonter les barrières linguistiques.

2. Fonctionnalités et Options

  • Transcription Vocale Avancée :

    • Capture audio de haute qualité via le microphone.
    • Transcription effectuée par l’API Whisper d’OpenAI, avec insertion automatique dans le champ actif ou affichage dans une fenêtre de dialogue.

  • Traduction Automatique Optionnelle :

    • Traduction rapide et fidèle du texte transcrit, activable selon les besoins.
    • Possibilité d’utiliser l’extension uniquement pour la transcription.

  • Support Multi-langue Complet : Babel Fish AI traite l’entrée vocale et affiche le texte dans diverses langues, ce qui élargit son usage international.
    Langues supportées : 🇸🇦 Arabe, 🇩🇪 Allemand, 🇺🇸 Anglais, 🇪🇸 Espagnol, 🇫🇷 Français, 🇮🇳 Hindi, 🇮🇹 Italien, 🇯🇵 Japonais, 🇰🇷 Coréen, 🇳🇱 Néerlandais, 🇵🇱 Polonais, 🇵🇹 Portugais, 🇷🇴 Roumain, 🇸🇪 Suédois, 🇨🇳 Chinois.

  • Interface Intuitive et Personnalisable :

    • Choix entre affichage en zone de saisie active ou fenêtre de dialogue.
    • Bandeau de statut personnalisable (couleur, opacité, durée) pour un retour visuel immédiat.

  • Options Avancées :

    • Mode expert offrant une configuration détaillée (URLs des API, paramètres par domaine, etc.).
    • Paramètres de l’extension accessibles via une page d’options conviviale.

3. Dans les Coulisses du Développement : Mon Aventure avec l’IA et Roo Code

Babel Fish AI n’est pas seulement une extension Chrome, c’est aussi le fruit d’une expérimentation passionnante avec l’intelligence artificielle et un outil innovant : Roo Code.

Laissez-moi vous raconter comment j’ai transformé une idée en réalité, en m’appuyant sur la puissance de plusieurs IA et sur un environnement de développement unique.

3.1. Roo Code : Mon Compagnon de Codage IA

Roo Code est bien plus qu’une simple extension VS Code. C’est un véritable agent de codage autonome qui vous assiste dans votre travail. Imaginez un copilote IA capable de :

  • Communiquer en langage naturel.
  • Lire et écrire des fichiers directement dans votre espace de travail.
  • Exécuter des commandes terminal.
  • S’intégrer avec diverses API (OpenAI, Google Gemini, etc.).
  • Adapter sa “personnalité” grâce à des “modes personnalisés”.

Pour développer Babel Fish AI, j’ai utilisé Roo Code comme un chef d’orchestre, guidant différentes IA pour qu’elles collaborent à la création de l’extension.

3.2. Un Casting d’IA pour un Projet Unique

J’ai fait appel à un véritable panel d’IA, chacune avec ses forces et ses faiblesses :

  • o3-mini, Claude 3.5 Sonnet, Gemini (exp 1206, 1.5 pro exp 0827, Flash Think), GPT-4o : Ces modèles ont été mes principaux collaborateurs, chacun apportant sa pierre à l’édifice.
  • Gemini (modèles gratuits) : Leur gratuité a été un atout majeur, même si j’ai dû jongler avec les quotas (heureusement, Roo Code gère les tentatives répétées en cas d’échec !).

3.3. Surmonter les Obstacles : Un Parcours Semé d’Embûches (et de Solutions !)

Le développement n’a pas été un long fleuve tranquille. J’ai rencontré plusieurs défis, notamment :

  • Accès au Microphone et Permissions : Au début, impossible d’obtenir l’autorisation d’accès au microphone ! Les IA insistaient pour ajouter une permission “microphone” qui n’existe pas dans le Manifeste V3 de Chrome. J’ai dû plonger dans la documentation officielle et la fournir à Claude 3.5 Sonnet pour qu’il trouve la solution.

  • Stockage Sécurisé de la Clé API : Autre casse-tête : comment stocker et récupérer la clé API OpenAI de manière sécurisée dans Chrome ? J’ai fourni la documentation officielle à Gemini, qui a réussi à me proposer le code adéquat pour interagir avec le stockage de Chrome.

3.4. Collaboration et Expérimentation : La Clé du Succès

J’ai utilisé un peu toutes les IA pour les options et les localisations, et je voulais tester Roo Code.

Au-delà de ces défis spécifiques, j’ai pu :

  • Tester Roo Code en conditions réelles : Le développement de Babel Fish AI était aussi l’occasion de mettre à l’épreuve cet outil prometteur.
  • Générer l’icône et l’image de fond : Grâce à DALL-E 3 (intégré à OpenAI), j’ai pu créer une identité visuelle unique pour l’extension.
  • Personnaliser le Bandeau d’Affichage : J’ai utilisé GIMP pour extraire les couleurs de l’image, puis j’ai demandé à l’IA de coder la partie des options permettant de configurer les couleurs du bandeau.
  • Traduire l’Interface en Plusieurs Langues : J’ai exploité la puissance de l’IA via Roo Code pour générer les fichiers de localisation (_locales) et traduire les options dans de nombreuses langues, un gain de temps considérable !
  • Création des menus déroulants: l’IA à tout généré, un gain de temps fou.
  • Gérer le rendu HTML des options: en concertation avec l’IA.

3.5 Difficultés rencontrées

  • Problème de l’injection du texte dans une iframe pour Google Chat: Une exception a été ajoutée, et j’ai laissé un pop-up par défaut.
  • Mode Expert et permissions: Pour permettre de changer les URL des API, j’ai dû autoriser tous les hôtes dans le manifeste. Cela semble poser problème avec la navigation renforcée de Chrome, et je ne vois pas de solution pour l’instant (si quelqu’un a une idée, je suis preneur !).

4. Pourquoi Babel Fish AI ? Une Extension Née d’un Besoin

Avant de plonger dans les détails techniques, il est important de comprendre pourquoi j’ai créé Babel Fish AI. Tout est parti d’un besoin personnel :

  • Marre de taper de longs prompts : Je voulais pouvoir communiquer avec les IA de manière plus naturelle, en leur parlant directement.
  • Transcriptions médiocres : Les extensions de transcription que j’avais testées étaient décevantes.
  • Volonté de transparence : Je voulais une extension open source, sans publicité, et dont je maîtrisais le code.

Babel Fish AI est donc née de cette envie de créer un outil qui réponde à mes propres besoins, tout en étant utile à la communauté.

5. Zoom sur le Code et les Détails Techniques

Babel Fish AI est construite sur une architecture typique d’extension Chrome, avec quelques spécificités liées à l’utilisation des API d’OpenAI.

Voici un aperçu des principaux composants :

5.1. Architecture Générale

L’extension est composée de plusieurs fichiers JavaScript qui interagissent entre eux :

  • manifest.json: Le fichier de configuration principal de l’extension. Il définit les permissions, les scripts, les ressources accessibles, etc.
  • background.js: Le service worker qui s’exécute en arrière-plan. Il gère les événements (clic sur l’icône, raccourcis clavier), injecte le content script si nécessaire, et communique avec le content script.
  • content.js: Le script qui est injecté dans les pages web. Il interagit directement avec le DOM, capture l’audio du microphone, appelle les API de transcription et de traduction, et affiche les résultats.
  • src/utils/api.js: Contient les fonctions pour appeler l’API Whisper d’OpenAI (transcription).
  • src/utils/translation.js: Contient les fonctions pour appeler l’API GPT d’OpenAI (traduction).
  • src/utils/ui.js: Contient des fonctions utilitaires pour gérer l’interface utilisateur (bannière, boîte de dialogue, bouton de copie).
  • src/constants.js: Définit des constantes pour la configuration, les états, les actions, etc.
  • src/pages/options/: Contient les fichiers pour la page d’options de l’extension (HTML, CSS, JavaScript).

5.2. manifest.json

Le fichier manifest.json utilise la version 3 du manifeste. Il déclare les permissions suivantes :

  • activeTab : Pour accéder à l’onglet actif.
  • storage: Pour stocker la clé API et les options de l’extension.
  • commands: Pour définir des raccourcis clavier.
  • scripting: Pour injecter le content script.
  • host_permissions: https://api.openai.com/* pour les appels aux API, et https://*/* qui est nécessaire en mode expert pour permettre à l’utilisateur de spécifier des URL d’API personnalisées.

Les content_scripts sont injectés dans toutes les URLs (<all_urls>) et s’exécutent à la fin du chargement du document ("run_at": "document_end"). Le background script est déclaré comme un service worker de type module ("type": "module").

5.3. background.js

Le background script a plusieurs rôles :

  • Injection du content script: Si le content script n’est pas déjà injecté, background.js l’injecte lors d’une interaction (clic sur l’icône ou raccourci clavier).
  • Gestion des événements : Il écoute les événements chrome.runtime.onMessage (messages du content script), chrome.action.onClicked (clic sur l’icône) et chrome.commands.onCommand (raccourcis clavier).
  • Communication avec le content script: Il envoie des messages au content script pour démarrer ou arrêter l’enregistrement ({ action: ACTIONS.TOGGLE }).
  • Mise à jour de l’icône : Il met à jour le badge de l’icône de l’extension pour indiquer l’état de l’enregistrement (en cours, arrêté, erreur).

5.4. content.js

Le content script est le cœur de l’extension. Il effectue les tâches suivantes :

  • Initialisation : Il initialise la clé API et les options de couleur du bandeau à partir du stockage de Chrome.
  • Capture audio : Il utilise l’API navigator.mediaDevices.getUserMedia pour accéder au microphone et enregistrer l’audio.
  • Transcription : Il utilise la fonction transcribeAudio (src/utils/api.js) pour envoyer l’audio à l’API Whisper d’OpenAI et obtenir la transcription.
  • Traduction (optionnelle) : Si l’option de traduction est activée, il utilise la fonction translateText (src/utils/translation.js) pour envoyer le texte transcrit à l’API GPT d’OpenAI et obtenir la traduction.
  • Affichage : Il affiche la transcription (et la traduction, le cas échéant) soit dans l’élément actif de la page (si c’est un champ de texte ou un élément éditable), soit dans une boîte de dialogue.
  • Gestion de la bannière : Il affiche une bannière d’état en haut de la page pour indiquer l’état de l’enregistrement ou afficher des messages d’erreur.
  • Communication avec le background script : Il envoie des messages au background script pour indiquer le début, la fin ou une erreur de l’enregistrement.
  • Écoute des changements d’options: Il écoute les changements dans les options de l’extension et met à jour l’affichage en conséquence.

5.5. Communication

La communication entre le background script et le content script se fait via l’API de messagerie de Chrome (chrome.runtime.sendMessage et chrome.runtime.onMessage).

5.6. API

L’extension utilise deux API d’OpenAI :

  • Whisper : Pour la transcription vocale. L’URL par défaut est https://api.openai.com/v1/audio/transcriptions, et le modèle utilisé est whisper-1.
  • GPT : Pour la traduction (optionnelle). L’URL par défaut est https://api.openai.com/v1/chat/completions, et le modèle utilisé est gpt-4o-mini.

Les URL des API peuvent être modifiées dans les options de l’extension (mode expert).

5.7. Stockage

L’extension utilise chrome.storage.sync pour stocker :

  • La clé API OpenAI (apiKey).
  • Les options de l’extension (affichage, traduction, couleurs du bandeau, etc.).

5.8. Interface Utilisateur

L’interface utilisateur de l’extension est gérée par plusieurs fonctions dans src/utils/ui.js et content.js :

  • Bannière : Une bannière d’état est affichée en haut de la page pour indiquer l’état de l’enregistrement ou afficher des messages d’erreur. La couleur et l’opacité de la bannière sont personnalisables.
  • Boîte de dialogue : La transcription (et la traduction) peuvent être affichées dans une boîte de dialogue. La durée d’affichage est personnalisable.
  • Bouton de copie : Un bouton de copie est ajouté à la boîte de dialogue pour copier facilement le texte transcrit.

5.9. Gestion des Erreurs

Les erreurs sont gérées de manière centralisée. Les messages d’erreur sont définis dans src/constants.js (objet ERRORS). Les erreurs sont affichées à l’utilisateur via la bannière d’état.

6. Ressources

7. Conclusion

Babel Fish AI offre une solution complète pour une transcription vocale précise et une traduction optionnelle, tout en garantissant une interface intuitive et une sécurité renforcée. Grâce à cette extension, l’expérience de conversion de la voix en texte est optimisée, et la barrière linguistique est levée. Testez Babel Fish AI sur le Chrome Web Store et découvrez comment elle peut transformer votre communication.

Merci de votre lecture, et bonne utilisation de Babel Fish AI !