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

Jls -

Babel Fish AI, un proyecto personal, es una extensión Chrome innovadora que transforma la voz en texto con una precisión excepcional, a la vez que ofrece una opción de traducción automática. Diseñada para ser fiable y sin publicidad, proporciona una transcripción vocal de calidad a través de la API Whisper de OpenAI. Creé esta extensión en parte para responder a una necesidad personal: simplificar la comunicación con las IA dictando mis solicitudes. Puedes utilizarla 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 asistida 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 Vocal Avanzada:

    • Captura de audio de alta calidad a través del 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 utilizar la extensión únicamente para la transcripción.

  • Soporte Multilenguaje Completo: Babel Fish AI procesa la entrada vocal y muestra el texto en diversos idiomas, ampliando así su uso a nivel 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:

    • Opció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 un feedback visual inmediato.

  • Opciones Avanzadas:

    • Modo experto que ofrece una configuración detallada (URLs de las API, parámetros por dominio, etc.).
    • Configuración de la extensión accesible a través de una página de opciones amigable.

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

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

Déjame contarte cómo convertí una idea en realidad, apoyándome en el poder de varias IA y en un entorno de desarrollo único.

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

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

  • Comunicar en lenguaje natural.
  • Leer y escribir archivos directamente en tu 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

Hice uso de un auténtico 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 granito de arena.
  • Gemini (modelos gratuitos) : Su gratuidad fue una gran ventaja, aunque tuve que lidiar con las cuotas (¡afortunadamente, Roo Code gestiona los intentos repetidos en caso de fallo!).

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

El desarrollo no fue un camino de rosas. Me encontré con varios desafíos, entre ellos:

  • Acceso al Micrófono y Permisos : Al principio, ¡fue imposible obtener el permiso de acceso al micrófono! Las IA insistían en añadir un permiso “micrófono” que no existe en el Manifiesto V3 de Chrome. Tuve que sumergirme 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? Proporcioné la documentación oficial a Gemini, quien logró proponerme 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 opciones y localizaciones, y quería probar Roo Code.

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

  • Probar Roo Code en condiciones reales : El desarrollo de Babel Fish AI fue también la ocasión de poner a prueba esta prometedora herramienta.
  • Generar el ícono 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 : Usé GIMP para extraer los colores de la imagen, y luego pedí a la IA que codificara la parte de opciones que permitía configurar los colores del banner.
  • Traducir la Interfaz a Varios Idiomas : Aproveché el poder de la IA a través de 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 Menús Desplegables: la IA lo generó todo, un ahorro de tiempo increíble.
  • Gestionar el Renderizado HTML de las Opciones: en concierto con la IA.

3.5 Dificultades encontradas

  • Problema de inyección de texto en una 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 URLs 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, se la agradezco!).

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

Antes de profundizar en los detalles técnicos, es importante comprender por qué creé Babel Fish AI. Todo surgió de una necesidad personal:

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

Babel Fish AI nació, por lo tanto, de la voluntad de crear una herramienta que respondiera a mis propias necesidades, a la vez que 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 Chrome, con algunas especificidades relacionadas con el uso de las API de OpenAI.

Aquí tienes un resumen de los principales componentes:

5.1. Arquitectura General

La extensión se compone de 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 ícono, 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, ventana de diálogo, botón de copiar).
  • src/constants.js: Define constantes para la configuración, estados, 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 URLs 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 varias funciones:

  • Inyección del content script: Si el content script no está ya inyectado, background.js lo inyecta durante una interacción (clic en el ícono o atajo de teclado).
  • Gestión de eventos: Escucha los eventos chrome.runtime.onMessage (mensajes del content script), chrome.action.onClicked (clic en el ícono) 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 ícono: Actualiza el badge del ícono de la extensión para indicar el estado de la grabación (en curso, detenida, error).

5.4. content.js

El content script es el núcleo 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 una ventana 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 en 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 a través de 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 vocal. 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 URLs de las API pueden ser modificadas en las opciones de la extensión (modo experto).

5.7. Almacenamiento

La extensión utiliza 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 es 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.
  • Ventana de diálogo: La transcripción (y la traducción) pueden mostrarse en una ventana de diálogo. La duración de la visualización es personalizable.
  • Botón de copiar: Se añade un botón de copiar en la ventana de diálogo para copiar fácilmente el texto transcrito.

5.9. Gestión de Errores

Los errores se gestionan de manera centralizada. Los mensajes de error se definen en src/constants.js (objeto ERRORS). Los errores se muestran al usuario a través del banner de estado.

6. Recursos

7. Conclusión

Babel Fish AI ofrece una solución completa para lograr una transcripción vocal precisa y una traducción opcional, garantizando al mismo tiempo una interfaz intuitiva y un nivel de seguridad reforzado. Gracias a esta extensión, la conversión de voz a texto se optimiza y se eliminan las barreras lingüísticas. Prueba Babel Fish AI en el Chrome Web Store y descubre cómo puede transformar tu comunicación.

¡Gracias por tu lectura y que disfrutes utilizando Babel Fish AI!

Este documento se ha traducido de la versión fr al idioma es utilizando el modelo o3-mini. Para más información sobre el proceso de traducción, consulta https://gitlab.com/jls42/ai-powered-markdown-translator