Navegador Multimodal
Neste artigo, você aprenderá a construir capacidades de inteligência artificial multimodal – classificação de imagens, legendagem de imagens e transcrição de fala – que funcionam completamente no navegador, utilizando a biblioteca Transformers.js, sem servidor, sem chave de API e sem que os dados deixem o dispositivo do usuário. Os tópicos que abordaremos incluem a criação de um navegador multimodal com Transformers.js para imagens e fala. A maioria dos tutoriais de inteligência artificial para navegadores aborda texto, pois é um ponto de partida natural, mas as aplicações que as pessoas realmente querem construir raramente são apenas de texto. Os usuários tiram fotos, gravam notas de voz, enviam telas. Os dados são multimodais e a inteligência artificial também deve ser.
A biblioteca Transformers.js lida com isso de forma nativa. Ela suporta visão computacional (classificação de imagens, detecção de objetos, segmentação), áudio (reconhecimento automático de fala, classificação de áudio, texto-para-fala) e tarefas multimodais, todas rodando localmente no navegador, sem servidor, sem chave de API e sem que os dados deixem o dispositivo do usuário. Este tutorial constrói três capacidades em sequência: classificação de imagens, legendagem de imagens e transcrição de fala. Cada uma delas é um arquivo HTML autônomo que pode ser aberto em um navegador. A seção final combina as três em um único analisador de mídia multimodal.
Você não precisa do Node.js, npm ou de qualquer ferramenta de compilação. A importação via CDN lida com a biblioteca. Basta escolher a opção que corresponda ao que você já tem instalado. Uma vez que o servidor esteja em execução, abra http://localhost:8080 no seu navegador. Crie uma pasta para o projeto. Cada tarefa tem seu próprio arquivo HTML.
Cada modelo é baixado uma vez na primeira execução e armazenado em cache no navegador. As cargas subsequentes são instantâneas e funcionam offline. Aqui está o que você pode esperar na primeira execução: o aplicativo combinado carrega as três capacidades, cerca de 400 MB no total na primeira execução. Um indicador de progresso para cada modelo é uma experiência de usuário não negociável.
A classificação de imagens atribui rótulos de um conjunto fixo a uma imagem de entrada. O modelo utilizado aqui é o ViT-Base/16, um Transformador de Visão treinado pelo Google no ImageNet-21k e ajustado no ImageNet-1k, convertido para o formato ONNX para uso no navegador. Ele classifica imagens em 1.000 categorias do ImageNet e retorna uma lista classificada com pontuações de confiança.
Cada objeto tem uma string de rótulo (o nome da classe do ImageNet) e um pontuação float entre 0 e 1. Por padrão, o pipeline retorna 5 resultados. Defina o parâmetro top_k na chamada para obter mais ou menos resultados. Salve este arquivo como classificador-de-imagens.html na pasta do seu projeto. Copie o código abaixo e abra-o no seu localhost.
O que este código faz: a legendagem de imagens gera uma sentença de linguagem natural que descreve o que está na imagem. É significativamente diferente da classificação: em vez de escolher entre 1.000 rótulos fixos, o modelo gera texto livre. “Um golden retriever correndo em um campo de grama alta” versus apenas “golden retriever”. Mais descritivo, mais flexível, modelo maior.
O modelo utilizado aqui é o Xenova/vit-gpt2-image-captioning, um codificador de Transformador de Visão que lê a imagem emparelhada com um decodificador GPT-2 que gera a legenda. A versão ONNX pesa 246 MB, notavelmente maior do que o classificador, pois o decodificador gerador é um modelo de linguagem completo.
O que a saída parece: a saída é um array com um objeto contendo uma string de texto gerado. É sempre um array, mesmo para uma única imagem, pois o pipeline suporta batch. Salve este arquivo como legendador-de-imagens.html. Execute-o em http://localhost.
O que este código faz: a transcrição de fala converte áudio em texto utilizando a arquitetura Whisper da OpenAI. As implementações de Whisper baseadas em navegador utilizam WebAssembly para executar a arquitetura de transformador diretamente em JavaScript, com a biblioteca Transformers.js lidando com o carregamento do modelo, compilação WASM e operações de tensor. O modelo utilizado aqui é o Xenova/whisper-tiny.en — apenas inglês, cerca de 78 MB quantizado, projetado especificamente para implantação no navegador.
O pipeline de reconhecimento automático de fala espera um Float32Array de amostras de áudio em 16.000 Hz. A API de Áudio do Navegador lida com a conversão: AudioContext.decodeAudioData() aceita qualquer formato de áudio suportado (WAV, MP3, MP4, OGG, FLAC) e retorna um AudioBuffer, e audioBuffer.getChannelData(0) extrai as amostras PCM brutos do primeiro canal. Se o áudio foi gravado ou armazenado em uma taxa de amostragem diferente, você precisa reamostrá-lo para 16.000 Hz. O construtor de AudioContext aceita um parâmetro de sampleRate que faz isso automaticamente.
Salve este arquivo como transcritor-de-fala.html. Para testar, eu usei este arquivo de áudio de exemplo. Para acessar o microfone, a página deve ser servida via HTTP (localhost conta) — abrir o arquivo diretamente não funcionará. O que este código faz: combina as três capacidades em um único analisador de mídia multimodal. Aqui está o que a saída parece: um array com objetos contendo as legendas, classificações e transcrições de fala.
A saída é um array com objetos contendo as legendas, classificações e transcrições de fala. É uma experiência de usuário rica e interativa, permitindo que os usuários explorem diferentes modos de mídia e obtenham insights valiosos a partir de suas interações. Com essa abordagem, você pode criar aplicações inovadoras e envolventes que sejam ao mesmo tempo acessíveis e fáceis de usar.
Além disso, a biblioteca Transformers.js forne
