Buscar
blogia

Lanzamiento de Babel Fish AI: Extensión de Chrome para Transcripción y Traducción de Voz

jls /
Transcription Traduction IA Extension Chrome Innovation Multilangue
Lanzamiento de Babel Fish AI: Extensión de Chrome para Transcripción y Traducción de Voz

Babel Fish AI, un proyecto personal, es una extensión de Chrome innovadora que convierte la voz en texto con una precisión excepcional, y que además ofrece una opción de traducción automática. Diseñada para ser fiable y sin publicidad, proporciona una transcripción de voz de calidad mediante la API Whisper de OpenAI. Creé esta extensión en parte para cubrir una necesidad personal: simplificar la comunicación con las IA dictando mis peticiones. Puede usarla exclusivamente para la transcripción o activar la traducción para facilitar la comunicación multilingüe. También fue la ocasión ideal para probar Roo Code, una herramienta de desarrollo asistido por IA.

1. Presentación

Babel Fish AI es un proyecto personal, desarrollado con el apoyo de IA como Claude, Gemini y OpenAI a través de Roo Code. Gracias a su interfaz intuitiva y a su configuración personalizable, Babel Fish AI permite obtener una transcripción rápida y precisa, con una opción de traducción inmediata para superar las barreras lingüísticas.

2. Funcionalidades y Opciones

  • Transcripción de Voz Avanzada :

    • Captura de audio de alta calidad mediante el micrófono.
    • Transcripción realizada por la API Whisper de OpenAI, con inserción automática en el campo activo o visualización en una ventana de diálogo.

  • Traducción Automática Opcional :

    • Traducción rápida y fiel del texto transcrito, activable según las necesidades.
    • Posibilidad de usar la extensión únicamente para la transcripción.

  • Soporte Multilingüe Completo : Babel Fish AI procesa la entrada de voz y muestra el texto en diversos idiomas, lo que amplía su uso internacional.
    Idiomas soportados: 🇸🇦 Árabe, 🇩🇪 Alemán, 🇺🇸 Inglés, 🇪🇸 Español, 🇫🇷 Francés, 🇮🇳 Hindi, 🇮🇹 Italiano, 🇯🇵 Japonés, 🇰🇷 Coreano, 🇳🇱 Neerlandés, 🇵🇱 Polaco, 🇵🇹 Portugués, 🇷🇴 Rumano, 🇸🇪 Sueco, 🇨🇳 Chino.

  • Interfaz Intuitiva y Personalizable :

    • Elección entre mostrar en el área de entrada activa o en una ventana de diálogo.
    • Banner de estado personalizable (color, opacidad, duración) para una retroalimentación visual inmediata.

  • Opciones Avanzadas :

    • Modo experto que ofrece una configuración detallada (URLs de las API, parámetros por dominio, etc.).
    • Parámetros de la extensión accesibles mediante una página de opciones amigable.

3. Entre Bastidores del Desarrollo: Mi Aventura con la IA y Roo Code

Babel Fish AI no es solo una extensión de Chrome, es también el fruto de una experimentación apasionante con la inteligencia artificial y una herramienta innovadora: Roo Code.

Permítame contarle cómo transformé una idea en realidad, apoyándome en la potencia de varias IA y en un entorno de desarrollo único.

3.1. Roo Code: Mi Compañero de Codificación con IA

Roo Code es mucho más que una simple extensión para VS Code. Es un verdadero agente de codificación autónomo que le asiste en su trabajo. Imagine un copiloto IA capaz de:

  • Comunicar en lenguaje natural.
  • Leer y escribir archivos directamente en su espacio de trabajo.
  • Ejecutar comandos de terminal.
  • Integrarse con diversas API (OpenAI, Google Gemini, etc.).
  • Adaptar su “personalidad” gracias a “modos personalizados”.

Para desarrollar Babel Fish AI, utilicé Roo Code como un director de orquesta, guiando a diferentes IA para que colaboraran en la creación de la extensión.

3.2. Un Reparto de IA para un Proyecto Único

Recurrió a todo un panel de IA, cada una con sus fortalezas y debilidades:

  • o3-mini, Claude 3.5 Sonnet, Gemini (exp 1206, 1.5 pro exp 0827, Flash Think), GPT-4o: Estos modelos fueron mis principales colaboradores, cada uno aportando su grano de arena.
  • Gemini (modelos gratuitos): Su gratuidad fue una gran ventaja, aunque tuve que lidiar con los límites de cuota (¡por suerte, Roo Code gestiona los reintentos en caso de fallo!).

3.3. Superar los Obstáculos: Un Camino Lleno de Dificultades (¡y de Soluciones!)

El desarrollo no fue un camino de rosas. Me enfrenté a varios retos, entre ellos:

  • Acceso al micrófono y permisos: Al principio, ¡imposible obtener la autorización para acceder al micrófono! Las IA insistían en añadir un permiso “microphone” que no existe en el Manifiesto V3 de Chrome. Tuve que bucear en la documentación oficial y proporcionársela a Claude 3.5 Sonnet para que encontrara la solución.

  • Almacenamiento seguro de la clave API: Otro rompecabezas: ¿cómo almacenar y recuperar la clave API de OpenAI de forma segura en Chrome? Le facilité la documentación oficial a Gemini, que logró proponer el código adecuado para interactuar con el almacenamiento de Chrome.

3.4. Colaboración y Experimentación: La Clave del Éxito

Utilicé varias IA para las opciones y las localizaciones, y quería probar Roo Code.

Más allá de estos retos específicos, pude:

  • Probar Roo Code en condiciones reales: El desarrollo de Babel Fish AI también fue la ocasión para poner a prueba esta herramienta prometedora.
  • Generar el icono y la imagen de fondo: Gracias a DALL-E 3 (integrado en OpenAI), pude crear una identidad visual única para la extensión.
  • Personalizar el banner de visualización: Utilicé GIMP para extraer los colores de la imagen, luego pedí a la IA que codificara la parte de las opciones que permite configurar los colores del banner.
  • Traducir la interfaz a varios idiomas: Exploté la potencia de la IA vía Roo Code para generar los archivos de localización (_locales) y traducir las opciones a numerosos idiomas, ¡un ahorro de tiempo considerable!
  • Creación de los menús desplegables: la IA generó todo, un ahorro de tiempo enorme.
  • Gestionar el renderizado HTML de las opciones: en colaboración con la IA.

3.5 Dificultades encontradas

  • Problema de la inyección del texto en un iframe para Google Chat: se añadió una excepción, y dejé un pop-up por defecto.
  • Modo Experto y permisos: para permitir cambiar las URL de las API, tuve que autorizar todos los hosts en el manifiesto. Esto parece causar problemas con la navegación reforzada de Chrome, y por ahora no veo solución (si alguien tiene una idea, ¡soy todo oídos!).

4. ¿Por qué Babel Fish AI? Una Extensión Nacida de una Necesidad

Antes de entrar en detalles técnicos, es importante entender por qué creé Babel Fish AI. Todo partió de una necesidad personal:

  • Cansado de escribir largos prompts: Quería poder comunicarme con las IA de forma más natural, hablándoles directamente.
  • Transcripciones mediocres: Las extensiones de transcripción que había probado eran decepcionantes.
  • Voluntad de transparencia: Quería una extensión de código abierto, sin publicidad y cuyo código controlara por completo.

Babel Fish AI nació, pues, de ese deseo de crear una herramienta que respondiera a mis propias necesidades, y que además fuera útil para la comunidad.

5. Enfoque en el Código y los Detalles Técnicos

Babel Fish AI está construida sobre una arquitectura típica de extensión de Chrome, con algunas especificidades relacionadas con el uso de las API de OpenAI.

Aquí tiene una visión general de los principales componentes:

5.1. Arquitectura General

La extensión está compuesta por varios archivos JavaScript que interactúan entre sí:

  • manifest.json: El archivo de configuración principal de la extensión. Define los permisos, los scripts, los recursos accesibles, etc.
  • background.js: El service worker que se ejecuta en segundo plano. Gestiona los eventos (clic en el icono, atajos de teclado), inyecta el content script si es necesario, y se comunica con el content script.
  • content.js: El script que se inyecta en las páginas web. Interactúa directamente con el DOM, captura el audio del micrófono, llama a las API de transcripción y traducción, y muestra los resultados.
  • src/utils/api.js: Contiene las funciones para llamar a la API Whisper de OpenAI (transcripción).
  • src/utils/translation.js: Contiene las funciones para llamar a la API GPT de OpenAI (traducción).
  • src/utils/ui.js: Contiene funciones utilitarias para gestionar la interfaz de usuario (banner, cuadro de diálogo, botón de copia).
  • src/constants.js: Define constantes para la configuración, los estados, las acciones, etc.
  • src/pages/options/: Contiene los archivos para la página de opciones de la extensión (HTML, CSS, JavaScript).

5.2. manifest.json

El archivo manifest.json utiliza la versión 3 del manifiesto. Declara los siguientes permisos:

  • activeTab : Para acceder a la pestaña activa.
  • storage: Para almacenar la clave API y las opciones de la extensión.
  • commands: Para definir atajos de teclado.
  • scripting: Para inyectar el content script.
  • host_permissions: https://api.openai.com/* para las llamadas a las API, y https://*/* que es necesario en modo experto para permitir al usuario especificar URL de API personalizadas.

Los content_scripts se inyectan en todas las URLs (<all_urls>) y se ejecutan al final de la carga del documento ("run_at": "document_end"). El background script se declara como un service worker de tipo módulo ("type": "module").

5.3. background.js

El background script tiene varios roles:

  • Inyección del content script: Si el content script no está ya inyectado, background.js lo inyecta durante una interacción (clic en el icono o atajo de teclado).
  • Gestión de eventos: Escucha los eventos chrome.runtime.onMessage (mensajes del content script), chrome.action.onClicked (clic en el icono) y chrome.commands.onCommand (atajos de teclado).
  • Comunicación con el content script: Envía mensajes al content script para iniciar o detener la grabación ({ action: ACTIONS.TOGGLE }).
  • Actualización del icono: Actualiza el badge del icono de la extensión para indicar el estado de la grabación (en curso, detenido, error).

5.4. content.js

El content script es el corazón de la extensión. Realiza las siguientes tareas:

  • Inicialización: Inicializa la clave API y las opciones de color del banner a partir del almacenamiento de Chrome.
  • Captura de audio: Utiliza la API navigator.mediaDevices.getUserMedia para acceder al micrófono y grabar el audio.
  • Transcripción: Utiliza la función transcribeAudio (src/utils/api.js) para enviar el audio a la API Whisper de OpenAI y obtener la transcripción.
  • Traducción (opcional): Si la opción de traducción está activada, utiliza la función translateText (src/utils/translation.js) para enviar el texto transcrito a la API GPT de OpenAI y obtener la traducción.
  • Visualización: Muestra la transcripción (y la traducción, en su caso) ya sea en el elemento activo de la página (si es un campo de texto o un elemento editable), o en un cuadro de diálogo.
  • Gestión del banner: Muestra un banner de estado en la parte superior de la página para indicar el estado de la grabación o mostrar mensajes de error.
  • Comunicación con el background script: Envía mensajes al background script para indicar el inicio, el fin o un error de la grabación.
  • Escucha de cambios en las opciones: Escucha los cambios en las opciones de la extensión y actualiza la visualización en consecuencia.

5.5. Comunicación

La comunicación entre el background script y el content script se realiza mediante la API de mensajería de Chrome (chrome.runtime.sendMessage y chrome.runtime.onMessage).

5.6. API

La extensión utiliza dos API de OpenAI:

  • Whisper: Para la transcripción de voz. La URL por defecto es https://api.openai.com/v1/audio/transcriptions, y el modelo utilizado es whisper-1.
  • GPT: Para la traducción (opcional). La URL por defecto es https://api.openai.com/v1/chat/completions, y el modelo utilizado es gpt-4o-mini.

Las URL de las API se pueden modificar en las opciones de la extensión (modo experto).

5.7. Almacenamiento

La extensión usa chrome.storage.sync para almacenar:

  • La clave API de OpenAI (apiKey).
  • Las opciones de la extensión (visualización, traducción, colores del banner, etc.).

5.8. Interfaz de Usuario

La interfaz de usuario de la extensión está gestionada por varias funciones en src/utils/ui.js y content.js:

  • Banner: Se muestra un banner de estado en la parte superior de la página para indicar el estado de la grabación o mostrar mensajes de error. El color y la opacidad del banner son personalizables.
  • Cuadro de diálogo: La transcripción (y la traducción) pueden mostrarse en un cuadro de diálogo. La duración de la visualización es personalizable.
  • Botón de copia: Se añade un botón de copia al cuadro de diálogo para copiar fácilmente el texto transcrito.

5.9. Gestión de Errores

Los errores se gestionan de forma centralizada. Los mensajes de error están definidos en src/constants.js (objeto ERRORS). Los errores se muestran al usuario mediante el banner de estado.

6. Recursos

7. Conclusión

Babel Fish AI ofrece una solución completa para una transcripción de voz precisa y una traducción opcional, garantizando al mismo tiempo una interfaz intuitiva y una seguridad reforzada. Gracias a esta extensión, la experiencia de convertir la voz en texto se optimiza y la barrera lingüística se reduce. Pruebe Babel Fish AI en el Chrome Web Store y descubra cómo puede transformar su comunicación.

¡Gracias por leer y que disfrute usando Babel Fish AI!

Este documento ha sido traducido de la versión fr a la lengua es utilizando el modelo gpt-5-mini. Para más información sobre el proceso de traducción, consulte https://gitlab.com/jls42/ai-powered-markdown-translator