Como ensinar o navegador a ler texto de imagens sem mágica no servidor

Imagine que você está construindo um app web para controle de gastos, e o usuário precisa inserir manualmente dados de recibos. É tedioso, lento e francamente ultrapassado. Você quer simplesmente tirar uma foto de um pedaço de papel e imediatamente obter os números no banco de dados. Geralmente, para tarefas assim, você configura serviços pesados em Python com OCR ou paga gigantes da nuvem por cada requisição. Mas existe um jeito mais fácil e, mais importante, gratuito.

Estamos falando do Tesseract.js. Este é uma porta JavaScript do lendário motor OCR Tesseract que funciona diretamente no navegador ou no Node.js.

O que exatamente é isso

Tesseract.js não é apenas um wrapper sobre uma API. Os desenvolvedores pegaram o motor original em C++, compilaram para WebAssembly e empacotaram em uma biblioteca JS conveniente. Como resultado, obtemos reconhecimento de texto completo que roda no lado do cliente.

Por que isso é necessário? Primeiro, privacidade. Os dados do usuário não vão para o seu servidor, tudo é processado localmente. Segundo, economia de infraestrutura. Seus servidores não gastam recursos com matemática pesada de reconhecimento de padrões — esse trabalho é feito pelo processador do usuário.

Como fazer funcionar em poucos minutos

A biblioteca suporta mais de 100 idiomas, incluindo português. Para começar, você só precisa de algumas linhas de código. Aqui está um exemplo básico para Node.js ou navegador usando módulos:

import { createWorker } from 'tesseract.js';

(async () => {
  // Создаем воркер и указываем язык (например, английский)
  const worker = await createWorker('eng');
  
  // Скармливаем картинку — это может быть URL, путь к файлу или Blob
  const ret = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
  
  console.log(ret.data.text);
  
  // Не забываем прибраться за собой
  await worker.terminate();
})();

Se você precisa processar um lote de fotos, criar um worker para cada uma é uma má ideia. É melhor inicializar uma vez, passar todas as imagens pelo método recognize, e só então fechá-lo.

O que mais a biblioteca consegue fazer além de texto simples

O projeto há muito superou a leitura simples de letras. As versões recentes (atualmente v5 e v6) trouxeram muitos recursos úteis.

A biblioteca detecta automaticamente a orientação do texto. Se o usuário enviar uma foto deitada, o Tesseract.js vai tentar girá-la para melhores resultados. Você até pode extrair imagens intermediárias: ver como o algoritmo converteu a imagem para P&B ou removeu ruído.

Curiosamente, o projeto pode trabalhar com vídeo em tempo real. Você pode apontar a câmera do celular para uma etiqueta de preço, e o script vai imediatamente "extrair" as palavras relevantes do stream.

Na versão v5, os desenvolvedores fizeram um trabalho intenso no tamanho dos arquivos. Os arquivos de modelos treinados para inglês ficaram 54% menores, e para chinês — impressionantes 73%. Para a web, onde cada megabyte conta, isso é crítico.

O que você deve saber antecipadamente

Não há nuvem sem lado negativo. Tesseract.js é OCR puro. Ele lida bem com texto impresso em fundos de alto contraste, mas tem dificuldades com entradas manuscritas ou designs excessivamente complexos.

Outra nuance — PDF. A biblioteca nativa não suporta. Se sua tarefa é analisar documentos de várias páginas, você vai precisar pré-converter para imagens, ou procurar alternativas como Scribe.js, que surgiu de tentativas de estender as capacidades do Tesseract.js.

Você também deve lembrar que WebAssembly é poderoso, mas faminto por memória. Se você rodar reconhecimento em um celular fraco com uma dúzia de abas abertas, a página pode simplesmente "travar".

Onde você pode aplicar isso

Na minha experiência, essas ferramentas são mais úteis em pequenas utilidades internas. Por exemplo:

• Preenchimento automático de formulários a partir de digitalizações de documentos.
• Ferramentas de tradução de texto de tela (captura de screenshot).
• Indexação de texto em imagens para busca local.

Se você precisa adicionar rapidamente reconhecimento de texto e não quer lidar com backend, Tesseract.js é a opção mais óbvia e testada pelo tempo. O projeto está vivo, ativamente mantido, e tem uma enorme comunidade, então a maioria dos problemas pode ser encontrada no Google em cinco minutos.

Você pode experimentar a biblioteca em ação no site de demonstração oficial deles. Lá você pode ver claramente como o motor "vê" a estrutura do documento e divide em blocos e palavras.