Lançamento do Babel Fish AI: Extensão Chrome de Transcrição e Tradução Vocal

Jls -

Babel Fish AI, um projeto pessoal, é uma extensão Chrome inovadora que transforma a voz em texto com uma precisão excepcional, além de oferecer uma opção de tradução automática. Projetada para ser confiável e sem publicidade, ela fornece uma transcrição vocal de qualidade através da API Whisper da OpenAI. Criei essa extensão em parte para atender a uma necessidade pessoal: simplificar a comunicação com as IAs ditando minhas solicitações.
Você pode usá-la exclusivamente para a transcrição ou ativar a tradução para facilitar a comunicação multilíngue.
Também foi a ocasião ideal para testar Roo Code, uma ferramenta de desenvolvimento assistida por IA.

1. Apresentação

Babel Fish AI é um projeto pessoal, desenvolvido com o apoio de IAs como Claude, Gemini e OpenAI via Roo Code.
Graças à sua interface intuitiva e configuração personalizável, o Babel Fish AI permite obter uma transcrição rápida e precisa, com uma opção de tradução imediata para superar as barreiras linguísticas.

2. Funcionalidades e Opções

  • Transcrição Vocal Avançada:

    • Captura de áudio de alta qualidade via microfone.
    • Transcrição realizada pela API Whisper da OpenAI, com inserção automática no campo ativo ou exibição em uma janela de diálogo.

  • Tradução Automática Opcional:

    • Tradução rápida e fiel do texto transcrito, ativável conforme a necessidade.
    • Possibilidade de usar a extensão apenas para a transcrição.

  • Suporte Multilíngua Completo: Babel Fish AI processa a entrada vocal e exibe o texto em diversas línguas, ampliando o seu uso internacional.
    Línguas suportadas: 🇸🇦 Árabe, 🇩🇪 Alemão, 🇺🇸 Inglês, 🇪🇸 Espanhol, 🇫🇷 Francês, 🇮🇳 Hindi, 🇮🇹 Italiano, 🇯🇵 Japonês, 🇰🇷 Coreano, 🇳🇱 Holandês, 🇵🇱 Polonês, 🇵🇹 Português, 🇷🇴 Romeno, 🇸🇪 Sueco, 🇨🇳 Chinês.

  • Interface Intuitiva e Personalizável:

    • Escolha entre exibição na área de texto ativa ou em uma janela de diálogo.
    • Faixa de status personalizável (cor, opacidade, duração) para um retorno visual imediato.

  • Opções Avançadas:

    • Modo expert oferecendo uma configuração detalhada (URLs das APIs, parâmetros por domínio, etc.).
    • Configurações da extensão acessíveis via uma página de opções amigável.

3. Nos Bastidores do Desenvolvimento: Minha Aventura com a IA e o Roo Code

Babel Fish AI não é apenas uma extensão Chrome, é também o fruto de uma experimentação apaixonante com a inteligência artificial e uma ferramenta inovadora: o Roo Code.

Deixe-me contar como transformei uma ideia em realidade, contando com o poder de várias IAs e um ambiente de desenvolvimento único.

3.1. Roo Code: Meu Companheiro de Codificação IA

Roo Code é muito mais do que uma simples extensão do VS Code. É um verdadeiro agente de codificação autônomo que o assiste em seu trabalho. Imagine um copiloto IA capaz de:

  • Comunicar-se em linguagem natural.
  • Ler e escrever arquivos diretamente em seu espaço de trabalho.
  • Executar comandos de terminal.
  • Integrar-se com diversas APIs (OpenAI, Google Gemini, etc.).
  • Adaptar sua “personalidade” através de “modos personalizados”.

Para desenvolver o Babel Fish AI, usei o Roo Code como um maestro, orientando diferentes IAs para que colaborassem na criação da extensão.

3.2. Um Elenco de IAs para um Projeto Único

Recorri a um verdadeiro painel de IAs, cada uma com seus pontos fortes e fracos:

  • o3-mini, Claude 3.5 Sonnet, Gemini (exp 1206, 1.5 pro exp 0827, Flash Think), GPT-4o: Esses modelos foram meus principais colaboradores, cada um contribuindo com sua parte na construção.
  • Gemini (modelos gratuitos): Sua gratuidade foi um grande trunfo, embora eu tenha tido que lidar com os limites de uso (felizmente, o Roo Code gerencia as tentativas repetidas em caso de falha!).

3.3. Superando os Obstáculos: Uma Jornada Repleta de Desafios (e Soluções!)

O desenvolvimento não foi um mar de rosas. Enfrentei vários desafios, especialmente:

  • Acesso ao Microfone e Permissões: No início, foi impossível obter a autorização de acesso ao microfone! As IAs insistiam em adicionar uma permissão “microphone” que não existe no Manifest V3 do Chrome. Tive que mergulhar na documentação oficial e fornecê-la ao Claude 3.5 Sonnet para que ele encontrasse a solução.

  • Armazenamento Seguro da Chave API: Outro desafio foi como armazenar e recuperar a chave API da OpenAI de forma segura no Chrome. Forneci a documentação oficial ao Gemini, que conseguiu me oferecer o código adequado para interagir com o armazenamento do Chrome.

3.4. Colaboração e Experimentação: A Chave do Sucesso

Utilizei um pouco todas as IAs para as opções e as localizações, e quis testar o Roo Code.

Além desses desafios específicos, pude:

  • Testar o Roo Code em condições reais: O desenvolvimento do Babel Fish AI também foi a ocasião para pôr à prova essa ferramenta promissora.
  • Gerar o ícone e a imagem de fundo: Graças ao DALL-E 3 (integrado à OpenAI), pude criar uma identidade visual única para a extensão.
  • Personalizar a Faixa de Exibição: Usei o GIMP para extrair as cores da imagem, depois pedi à IA para codificar a parte das opções que permite configurar as cores da faixa.
  • Traduzir a Interface para Várias Línguas: Explorei o poder da IA via Roo Code para gerar os arquivos de localização (_locales) e traduzir as opções para diversas línguas, economizando um tempo considerável!
  • Criação dos menus suspensos: a IA gerou tudo, economizando um tempo incrível.
  • Gerenciar a renderização HTML das opções: em conjunto com a IA.

3.5. Dificuldades Encontradas

  • Problema com a injeção de texto em um iframe para o Google Chat: Uma exceção foi adicionada, e deixei um pop-up padrão.
  • Modo Expert e permissões: Para permitir a alteração dos URLs das APIs, tive que autorizar todos os hosts no manifesto. Isso parece causar problemas com a navegação reforçada do Chrome, e por enquanto não vejo uma solução (se alguém tiver uma ideia, estou aberto a sugestões!).

4. Por que Babel Fish AI? Uma Extensão Nascida de uma Necessidade

Antes de mergulhar nos detalhes técnicos, é importante entender por que criei o Babel Fish AI. Tudo começou por uma necessidade pessoal:

  • Cansado de digitar prompts longos: Eu queria poder me comunicar com as IAs de maneira mais natural, falando diretamente com elas.
  • Transcrições medíocres: As extensões de transcrição que testei foram decepcionantes.
  • Desejo de transparência: Queria uma extensão open source, sem publicidade, e cujo código eu controlasse.

Babel Fish AI nasceu, portanto, desse desejo de criar uma ferramenta que atendesse às minhas próprias necessidades, ao mesmo tempo em que fosse útil para a comunidade.

5. Um Zoom no Código e nos Detalhes Técnicos

Babel Fish AI é construída com base em uma arquitetura típica de extensão Chrome, com algumas especificidades relacionadas ao uso das APIs da OpenAI.

Segue uma visão geral dos principais componentes:

5.1. Arquitetura Geral

A extensão é composta por vários arquivos JavaScript que interagem entre si:

  • manifest.json: O arquivo de configuração principal da extensão. Define as permissões, os scripts, os recursos acessíveis, etc.
  • background.js: O service worker que roda em segundo plano. Gerencia os eventos (clique no ícone, atalhos de teclado), injeta o content script se necessário, e se comunica com o content script.
  • content.js: O script que é injetado nas páginas web. Interage diretamente com o DOM, capta o áudio do microfone, chama as APIs de transcrição e tradução, e exibe os resultados.
  • src/utils/api.js: Contém as funções para chamar a API Whisper da OpenAI (transcrição).
  • src/utils/translation.js: Contém as funções para chamar a API GPT da OpenAI (tradução).
  • src/utils/ui.js: Contém funções utilitárias para gerenciar a interface do usuário (faixa, caixa de diálogo, botão de cópia).
  • src/constants.js: Define constantes para a configuração, estados, ações, etc.
  • src/pages/options/: Contém os arquivos para a página de opções da extensão (HTML, CSS, JavaScript).

5.2. manifest.json

O arquivo manifest.json utiliza a versão 3 do manifesto. Declara as seguintes permissões:

  • activeTab : Para acessar a aba ativa.
  • storage: Para armazenar a chave API e as opções da extensão.
  • commands: Para definir atalhos de teclado.
  • scripting: Para injetar o content script.
  • host_permissions: https://api.openai.com/* para as chamadas às APIs, e https://*/* que é necessário no modo expert para permitir ao usuário especificar URLs de APIs personalizadas.

Os content_scripts são injetados em todas as URLs (<all_urls>) e são executados ao final do carregamento do documento ("run_at": "document_end"). O background script é declarado como um service worker do tipo módulo ("type": "module").

5.3. background.js

O background script tem várias funções:

  • Injeção do content script: Se o content script ainda não estiver injetado, o background.js o injeta durante uma interação (clique no ícone ou atalho de teclado).
  • Gerenciamento de eventos: Ouve os eventos chrome.runtime.onMessage (mensagens do content script), chrome.action.onClicked (clique no ícone) e chrome.commands.onCommand (atalhos de teclado).
  • Comunicação com o content script: Envia mensagens para o content script para iniciar ou parar a gravação ({ action: ACTIONS.TOGGLE }).
  • Atualização do ícone: Atualiza o badge do ícone da extensão para indicar o estado da gravação (em andamento, parado, erro).

5.4. content.js

O content script é o núcleo da extensão. Ele realiza as seguintes tarefas:

  • Inicialização: Inicializa a chave API e as opções de cor da faixa a partir do armazenamento do Chrome.
  • Captura de Áudio: Utiliza a API navigator.mediaDevices.getUserMedia para acessar o microfone e gravar o áudio.
  • Transcrição: Utiliza a função transcribeAudio (src/utils/api.js) para enviar o áudio à API Whisper da OpenAI e obter a transcrição.
  • Tradução (opcional): Se a opção de tradução estiver ativada, utiliza a função translateText (src/utils/translation.js) para enviar o texto transcrito à API GPT da OpenAI e obter a tradução.
  • Exibição: Exibe a transcrição (e a tradução, quando aplicável) seja no elemento ativo da página (caso seja um campo de texto ou elemento editável), ou em uma caixa de diálogo.
  • Gerenciamento da Faixa: Exibe uma faixa de status no topo da página para indicar o estado da gravação ou mostrar mensagens de erro.
  • Comunicação com o background script: Envia mensagens para o background script para indicar o início, o fim ou um erro na gravação.
  • Escuta das mudanças de opções: Observa as alterações nas opções da extensão e atualiza a exibição conforme necessário.

5.5. Comunicação

A comunicação entre o background script e o content script ocorre via API de mensagens do Chrome (chrome.runtime.sendMessage e chrome.runtime.onMessage).

5.6. API

A extensão utiliza duas APIs da OpenAI:

  • Whisper: Para a transcrição vocal. A URL padrão é https://api.openai.com/v1/audio/transcriptions, e o modelo utilizado é whisper-1.
  • GPT: Para a tradução (opcional). A URL padrão é https://api.openai.com/v1/chat/completions, e o modelo utilizado é gpt-4o-mini.

As URLs das APIs podem ser modificadas nas opções da extensão (modo expert).

5.7. Armazenamento

A extensão utiliza chrome.storage.sync para armazenar:

  • A chave API da OpenAI (apiKey).
  • As opções da extensão (exibição, tradução, cores da faixa, etc.).

5.8. Interface do Usuário

A interface do usuário da extensão é gerida por várias funções em src/utils/ui.js e content.js:

  • Faixa: Uma faixa de status é exibida no topo da página para indicar o estado da gravação ou mostrar mensagens de erro. A cor e a opacidade da faixa são personalizáveis.
  • Caixa de Diálogo: A transcrição (e a tradução) podem ser exibidas em uma caixa de diálogo. A duração da exibição é personalizável.
  • Botão de Cópia: Um botão de cópia é adicionado à caixa de diálogo para copiar facilmente o texto transcrito.

5.9. Gerenciamento de Erros

Os erros são geridos de forma centralizada. As mensagens de erro são definidas em src/constants.js (objeto ERRORS). Os erros são exibidos para o usuário via faixa de status.

6. Recursos

7. Conclusão

Babel Fish AI oferece uma solução completa para uma transcrição vocal precisa e uma tradução opcional, garantindo ao mesmo tempo uma interface intuitiva e uma segurança reforçada. Graças a essa extensão, a experiência de converter voz em texto é otimizada, e a barreira linguística é superada. Teste o Babel Fish AI na Chrome Web Store e descubra como ele pode transformar a sua comunicação.

Obrigado pela leitura, e bom uso do Babel Fish AI!

Este documento foi traduzido da versão fr para a língua pt utilizando o modelo o3-mini. Para mais informações sobre o processo de tradução, consulte https://gitlab.com/jls42/ai-powered-markdown-translator