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

Babel Fish AI, um projeto pessoal, é uma extensão Chrome inovadora que transforma a voz em texto com precisão excepcional, ao mesmo tempo que oferece uma opção de tradução automática. Projetada para ser confiável e sem anúncios, ela fornece uma transcrição vocal de qualidade via a API Whisper da OpenAI. Criei esta extensão em parte para responder a uma necessidade pessoal: simplificar a comunicação com as IA ditando minhas requisições. Você pode usá-la exclusivamente para transcrição ou ativar a tradução para facilitar a comunicação multilíngue. Foi também a oportunidade ideal para testar Roo Code, uma ferramenta de desenvolvimento assistido por IA.

1. Apresentação

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

2. Funcionalidades e Opções

Transcrição de Voz 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 necessário.
- Possibilidade de usar a extensão apenas para transcrição.
Suporte Multilíngue Completo : Babel Fish AI processa a entrada vocal e exibe o texto em várias línguas, ampliando seu uso internacional.
Idiomas suportados : 🇸🇦 Árabe, 🇩🇪 Alemão, 🇺🇸 Inglês, 🇪🇸 Espanhol, 🇫🇷 Francês, 🇮🇳 Hindi, 🇮🇹 Italiano, 🇯🇵 Japonês, 🇰🇷 Coreano, 🇳🇱 Neerlandês, 🇵🇱 Polonês, 🇵🇹 Português, 🇷🇴 Romeno, 🇸🇪 Sueco, 🇨🇳 Chinês.
Interface Intuitiva e Personalizável :
- Escolha entre exibição no campo de entrada ativo ou 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.).
- Parâmetros da extensão acessíveis via uma página de opções amigável.

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

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

Deixe-me contar como transformei uma ideia em realidade, apoiando-me na potência de várias IA e em um ambiente de desenvolvimento único.

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

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

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

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

3.2. Um Elenco de IA para um Projeto Único

Recorri a um verdadeiro painel de IA, 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 trazendo sua contribuição.
Gemini (modelos gratuitos) : A gratuidade deles foi uma vantagem importante, embora eu tenha tido que lidar com cotas (felizmente, o Roo Code gerencia tentativas repetidas em caso de falha!).

3.3. Superando Obstáculos : Um Percurso Repleto de Desafios (e Soluções!)

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

Acesso ao Microfone e Permissões : No início, foi impossível obter autorização para acessar o microfone! As IA insistiam em adicionar uma permissão “microphone” que não existe no Manifest V3 do Chrome. Tive de 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 quebra-cabeça : como armazenar e recuperar a chave da API OpenAI de forma segura no Chrome? Forneci a documentação oficial ao Gemini, que conseguiu me propor o código adequado para interagir com o armazenamento do Chrome.

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

Usei várias IA para as opções e localizações, e queria testar o Roo Code.

Para além desses desafios específicos, consegui :

Testar o Roo Code em condições reais : O desenvolvimento do Babel Fish AI foi também a oportunidade de pôr à prova essa ferramenta promissora.
Gerar o ícone e a imagem de fundo : Graças ao DALL-E 3 (integrado ao 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 e 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 : Aproveitei a potência da IA via Roo Code para gerar os ficheiros de localização (_locales) e traduzir as opções em muitas línguas, um ganho de tempo considerável!
Criação dos menus suspensos : a IA gerou tudo, um ganho de tempo enorme.
Gerir o render HTML das opções : em concerto com a IA.

3.5 Dificuldades encontradas

Problema da injeção de texto numa iframe para o Google Chat : Foi adicionada uma exceção, e deixei um pop-up por defeito.
Modo Expert e permissões : Para permitir alterar as URLs das APIs, tive de autorizar todos os hosts no manifesto. Isso parece causar problemas com a navegação reforçada do Chrome, e não vejo solução por agora (se alguém tiver uma ideia, agradeço!).

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

Antes de entrar 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 : Queria poder comunicar com as IA de forma mais natural, falando diretamente com elas.
Transcrições medíocres : As extensões de transcrição que testei eram dececionantes.
Vontade de transparência : Queria uma extensão open source, sem anúncios, e cujo código eu dominasse.

Babel Fish AI nasceu dessa vontade de criar uma ferramenta que respondesse às minhas próprias necessidades, sendo útil também à comunidade.

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

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

Aqui vai uma visão geral dos principais componentes :

5.1. Arquitetura Geral

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

manifest.json : O ficheiro de configuração principal da extensão. Define as permissões, os scripts, os recursos acessíveis, etc.
background.js : O service worker que corre em segundo plano. Gere os eventos (clique no ícone, atalhos de teclado), injeta o content script se necessário, e comunica com o content script.
content.js : O script injetado nas páginas web. Interage diretamente com o DOM, captura 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 gerir a interface do utilizador (faixa, caixa de diálogo, botão de cópia).
src/constants.js : Define constantes para a configuração, os estados, as ações, etc.
src/pages/options/ : Contém os ficheiros para a página de opções da extensão (HTML, CSS, JavaScript).

5.2. `manifest.json`

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

activeTab : Para aceder ao separador ativo.
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 chamadas às APIs, e https://*/* que é necessário em modo expert para permitir ao utilizador especificar URLs de APIs personalizadas.

Os content_scripts são injetados em todas as URLs (<all_urls>) e executam-se no fim 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ários papéis :

Injeção do content script : Se o content script não estiver já injetado, background.js o injeta durante uma interação (clique no ícone ou atalho de teclado).
Gestão de eventos : Ouve 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 ao 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 curso, parado, erro).

5.4. `content.js`

O content script é o coração da extensão. 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 : Usa a API navigator.mediaDevices.getUserMedia para aceder ao microfone e gravar o áudio.
Transcrição : Usa 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, usa 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) quer no elemento activo da página (se for um campo de texto ou um elemento editável), quer numa caixa de diálogo.
Gestão da faixa : Exibe uma faixa de estado no topo da página para indicar o estado da gravação ou exibir mensagens de erro.
Comunicação com o background script : Envia mensagens ao background script para indicar o início, o fim ou um erro na gravação.
Escuta das alterações nas opções : Ouve as mudanças nas opções da extensão e actualiza a exibição em conformidade.

5.5. Comunicação

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

5.6. API

A extensão usa duas APIs da OpenAI :

Whisper : Para transcrição de voz. A URL por defeito é https://api.openai.com/v1/audio/transcriptions, e o modelo usado é whisper-1.
GPT : Para tradução (opcional). A URL por defeito é https://api.openai.com/v1/chat/completions, e o modelo usado é gpt-4o-mini.

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

5.7. Armazenamento

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

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

5.8. Interface do Utilizador

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

Faixa : Uma faixa de estado é 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 numa caixa de diálogo. A duração de 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. Gestão de Erros

Os erros são geridos de forma centralizada. As mensagens de erro estão definidas em src/constants.js (objecto ERRORS). Os erros são exibidos ao utilizador via a faixa de estado.

6. Recursos

Repositório GitHub : Babel Fish AI
Chrome Web Store : Babel Fish AI

7. Conclusão

Babel Fish AI oferece uma solução completa para transcrição de voz precisa e tradução opcional, garantindo ao mesmo tempo uma interface intuitiva e segurança reforçada. Graças a esta extensão, a experiência de converter voz em texto é optimizada e a barreira linguística é removida. Experimente o Babel Fish AI na Chrome Web Store e descubra como ela 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 usando o modelo gpt-5-mini. Para mais informações sobre o processo de tradução, consulte https://gitlab.com/jls42/ai-powered-markdown-translator