Hoe je de browser leert om tekst uit afbeeldingen te lezen zonder server-side magie

Stel je voor dat je een webapp bouwt voor uitgavenbeheer, en de gebruiker moet handmatig gegevens van bonnetjes invoeren. Het is saai, langzaam en eerlijk gezegd achterhaald. Je wilt gewoon een foto maken van een papiertje en direct de cijfers in de database krijgen. Meestal stel je voor zulke taken zware Python-services met OCR in of betaal je cloudgiganten voor elk verzoek. Maar er is een makkelijkere en, belangrijker nog, gratis manier.

We hebben het over Tesseract.js. Dit is een JavaScript-port van de legendarische Tesseract OCR-engine die rechtstreeks in de browser of op Node.js werkt.

Wat is dit ding eigenlijk

Tesseract.js is niet zomaar een wrapper rond een API. De ontwikkelaars hebben de originele C++-engine genomen, gecompileerd naar WebAssembly, en verpakt in een handige JS-bibliotheek. Het resultaat is volwaardige tekstherkenning die aan de clientzijde draait.

Waarom is dit nodig? Ten eerste privacy. Gebruikersgegevens gaan niet naar je server, alles wordt lokaal verwerkt. Ten tweede bespaart het infrastructuur. Je servers besteden geen resources aan zware patroonherkenningsberekeningen — dit werk wordt gedaan door de processor van de gebruiker.

Hoe het in een paar minuten aan de praat te krijgen

De bibliotheek ondersteunt meer dan 100 talen, waaronder Russisch. Om te beginnen heb je maar een paar regels code nodig. Hier is een basisvoorbeeld voor Node.js of browser met modules:

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();
})();

Als je een batch foto's moet verwerken, is het maken van een worker voor elk ervan een slecht idee. Het is beter om het één keer te initialiseren, alle afbeeldingen door de recognize methode te halen, en het dan pas te sluiten.

Wat kan de bibliotheek nog meer naast gewone tekst

Het project is allang voorbij eenvoudig letters lezen. Recente versies (momenteel v5 en v6) brachten veel nuttige functies met zich mee.

De bibliotheek detecteert automatisch de tekstoriëntatie. Als de gebruiker een zijwaartse foto uploadt, zal Tesseract.js proberen deze te roteren voor betere resultaten. Je kunt zelfs tussenliggende afbeeldingen extraheren: zie hoe het algoritme de afbeelding naar zwart-wit converteerde of ruis verwijderde.

Interessant is dat het project met realtime video kan werken. Je kunt je smartphonecamera op een prijskaartje richten, en het script zal onmiddellijk de relevante woorden uit de stream "trekken".

In versie v5 hebben de ontwikkelaars veel werk verricht aan de bestandsgrootte. Getrainde modellenbestanden voor Engels werden 54% kleiner, en voor Chinees — maar liefst 73%. Voor het web, waar elke megabyte telt, is dit cruciaal.

Wat je van tevoren moet weten

Geen voordeel zonder nadeel. Tesseract.js is pure OCR. Het verwerkt gedrukte tekst op hoog-contrast achtergronden goed, maar heeft moeite met handgeschreven invoer of overdreven complexe ontwerpen.

Nog een nuance — PDF. De native bibliotheek ondersteunt ze niet. Als je taak het parseren van multi-page documenten is, moet je ze ofwel vooraf naar afbeeldingen converteren, of alternatieven zoals Scribe.js overwegen, die ontstaan zijn uit pogingen om Tesseract.js-mogelijkheden uit te breiden.

Je moet ook in gedachten houden dat WebAssembly krachtig is maar geheugenhongerig. Als je herkenning draait op een zwakke smartphone met een dozijn open tabs, kan de pagina gewoon "crashen".

Waar kun je dit toepassen

Uit ervaring blijkt dat dergelijke tools het meest nuttig zijn in kleine interne hulpprogramma's. Bijvoorbeeld:

• Formulieren automatisch invullen van document scans.
• Schermtekst vertaaltools (schermafdruk vastleggen).
• Tekst in afbeeldingen indexeren voor lokaal zoeken.

Als je snel tekstherkenning wilt toevoegen en geen backend wilt beheren, is Tesseract.js de meest voor de hand liggende en tijdbestendige optie. Het project leeft, wordt actief onderhouden, en heeft een enorme community, dus de meeste problemen zijn binnen vijf minuten te Googelen.

Je kunt de bibliotheek in actie zien op hun officiële demosite. Daar kun je duidelijk zien hoe de engine de documentstructuur "ziet" en opsplitst in blokken en woorden.