Come insegnare al browser a leggere il testo dalle immagini senza magia lato server

Immagina di star costruendo una web app per la gestione delle spese, e l'utente deve inserire manualmente i dati dagli scontrini. È noioso, lento e, onestamente, superato. Vuoi semplicemente scattare una foto di un foglio di carta e ottenere immediatamente i numeri nel database. Di solito, per compiti del genere, configuri pesanti servizi Python con OCR o paghi i giganti del cloud per ogni richiesta. Ma c'è un modo più semplice e, cosa più importante, gratuito.

Stiamo parlando di Tesseract.js. È una porta in JavaScript del leggendario motore OCR Tesseract che funziona direttamente nel browser o su Node.js.

Cos'è esattamente questa cosa

Tesseract.js non è solo un wrapper attorno a un'API. Gli sviluppatori hanno preso il motore C++ originale, lo hanno compilato in WebAssembly e lo hanno impacchettato in una comoda libreria JS. Il risultato è un riconoscimento testuale completo che gira lato client.

Perché è necessario? Prima di tutto, la privacy. I dati dell'utente non volano al tuo server, tutto viene elaborato localmente. Secondo, risparmio sull'infrastruttura. I tuoi server non spendono risorse per complessi calcoli matematici di riconoscimento dei pattern — questo lavoro viene fatto dal processore dell'utente.

Come farlo funzionare in un paio di minuti

La libreria supporta oltre 100 lingue, incluso il russo. Per iniziare, servono solo un paio di righe di codice. Ecco un esempio base per Node.js o browser usando i moduli:

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 devi elaborare un batch di foto, creare un worker per ciascuna è una pessima idea. È meglio inizializzarlo una volta sola, far passare tutte le immagini attraverso il metodo recognize e solo dopo chiuderlo.

Cosa altro può fare la libreria oltre al testo normale

Il progetto ha da tempo superato la semplice lettura di lettere. Le versioni recenti (attualmente v5 e v6) hanno portato molte funzionalità utili.

La libreria rileva automaticamente l'orientamento del testo. Se l'utente carica una foto ruotata, Tesseract.js proverà a ruotarla per risultati migliori. Puoi persino estrarre immagini intermedie: vedi come l'algoritmo ha convertito l'immagine in B&W o rimosso il rumore.

Interessante, il progetto può lavorare con video in tempo reale. Puoi puntare la fotocamera del tuo smartphone su un'etichetta prezzo e lo script estrarrà immediatamente le parole rilevanti dal flusso.

Nella versione v5, gli sviluppatori hanno lavorato molto sulla dimensione dei file. I file dei modelli addestrati per l'inglese sono diventati del 54% più piccoli, e per il cinese — ben il 73%. Per il web, dove ogni megabyte conta, questo è critico.

Cosa dovresti sapere prima

Non c'è rosa senza spine. Tesseract.js è OCR puro. Gestisce bene il testo stampato su sfondi ad alto contrasto, ma fatica con input scritto a mano o design troppo complessi.

Un'altra sfumatura — i PDF. La libreria nativa non li supporta. Se il tuo compito è parsare documenti multipagina, dovrai o pre-convertirli in immagini, o cercare alternative come Scribe.js, che è nato dai tentativi di estendere le capacità di Tesseract.js.

Dovresti anche tenere a mente che WebAssembly è potente ma affamato di memoria. Se esegui il riconoscimento su uno smartphone debole con una dozzina di schede aperte, la pagina potrebbe semplicemente "crashare".

Dove puoi applicare questo

Nella mia esperienza, questi strumenti tornano utili più spesso in piccole utility interne. Per esempio:

• Compilazione automatica di moduli da scansioni di documenti.
• Strumenti di traduzione del testo dallo schermo (acquisizione screenshot).
• Indicizzazione del testo nelle immagini per la ricerca locale.

Se hai bisogno di aggiungere rapidamente il riconoscimento testuale e non vuoi avere a che fare con il backend, Tesseract.js è l'opzione più ovvia e testata nel tempo. Il progetto è vivo, mantenuto attivamente, e ha una comunità enorme, quindi la maggior parte dei problemi può essere risolta con una ricerca Google in cinque minuti.

Puoi provare la libreria in azione sul loro sito demo ufficiale. Lì puoi vedere chiaramente come il motore "vede" la struttura del documento e la suddivide in blocchi e parole.