Jak nauczyć przeglądarkę odczytywania tekstu z obrazów bez serwerowej magii

Wyobraź sobie, że budujesz aplikację webową do śledzenia wydatków, a użytkownik musi ręcznie wprowadzać dane z paragonów. To nudne, wolne i szczerze mówiąc przestarzałe. Chcesz po prostu zrobić zdjęcie papieru i natychmiast uzyskać liczby w bazie danych. Zazwyczaj w takich przypadkach konfigurujesz ciężkie usługi Python z OCR lub płacisz gigantom chmurowym za każde żądanie. Ale jest łatwiejszy i, co ważniejsze, darmowy sposób.

Mowa o Tesseract. js. To port JavaScript legendarnej silnika OCR Tesseract, który działa bezpośrednio w przeglądarce lub na Node. js.

Co to w ogóle jest

Tesseract. js to nie tylko wrapper nad API. Deweloperzy wzięli oryginalny silnik C++, skompilowali go do WebAssembly i zapakowali w wygodną bibliotekę JS. W rezultacie otrzymujemy pełnoprawne rozpoznawanie tekstu działające po stronie klienta.

Po co to jest potrzebne? Po pierwsze, prywatność. Dane użytkownika nie lecą na Twój serwer, wszystko jest przetwarzane lokalnie. Po drugie, oszczędność infrastruktury. Twoje serwery nie zużywają zasobów na ciężkie obliczenia rozpoznawania wzorców — ta praca jest wykonywana przez procesor użytkownika.

Jak uruchomić w kilka minut

Biblioteka obsługuje ponad 100 języków, w tym rosyjski. Aby rozpocząć, potrzebujesz tylko kilku linijek kodu. Oto podstawowy przykład dla Node. js lub przeglądarki z użyciem modułów:

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

Jeśli musisz przetworzyć partię zdjęć, tworzenie workera dla każdego z nich to zły pomysł. Lepiej zainicjować go raz, przepuścić wszystkie obrazy przez metodę recognize, a dopiero potem go zamknąć.

Co jeszcze potrafi biblioteka oprócz zwykłego tekstu

Projekt dawno przestał być tylko prostym odczytywaniem liter. Najnowsze wersje (obecnie v5 i v6) wprowadziły wiele przydatnych funkcji.

Biblioteka automatycznie wykrywa orientację tekstu. Jeśli użytkownik prześle zdjęcie zrobione bokiem, Tesseract. js spróbuje je obrócić dla lepszych wyników. Możesz nawet wyodrębnić obrazy pośrednie: zobacz, jak algorytm przekonwertował obraz na czarno-biały lub usunął szum.

Co ciekawe, projekt może pracować z wideo w czasie rzeczywistym. Możesz skierować kamerę smartfona na cenę, a skrypt natychmiast „wyciągnie" odpowiednie słowa ze strumienia.

W wersji v5 deweloperzy dużo pracy włożyli w rozmiar plików. Pliki wytrenowanych modeli dla angielskiego stały się o 54% mniejsze, a dla chińskiego — aż o 73%. Dla sieci, gdzie liczy się każdy megabajt, jest to kluczowe.

O czym warto wiedzieć z góry

Nie ma róży bez kolców. Tesseract. js to czysty OCR. Dobrze radzi sobie z drukowanym tekstem na tle o wysokim kontraście, ale ma trudności z ręcznym pismem lub zbyt skomplikowanymi projektami.

Inny niuans — PDF. Natywna biblioteka ich nie obsługuje. Jeśli Twoim zadaniem jest parsowanie dokumentów wielostronicowych, będziesz musiał albo wcześniej przekonwertować je na obrazy, albo poszukać alternatyw jak Scribe. js, który wyrosły z prób rozszerzenia możliwości Tesseract. js.

Warto też pamiętać, że WebAssembly jest potężne, ale żarłoczne jeśli chodzi o pamięć. Jeśli uruchomisz rozpoznawanie na słabym smartfonie z tuzinem otwartych kart, strona może po prostu „się zawiesić".

Gdzie to można zastosować

Z mojego doświadczenia, takie narzędzia najczęściej przydają się w małych wewnętrznych narzędziach. Na przykład:

• Automatyczne wypełnianie formularzy ze skanów dokumentów.
• Narzędzia do tłumaczenia tekstu z ekranu (przechwytywanie zrzutów ekranu).
• Indeksowanie tekstu w obrazach do wyszukiwania lokalnego.

Jeśli potrzebujesz szybko dodać rozpoznawanie tekstu i nie chcesz bawić się z backendem, Tesseract. js jest najbardziej oczywistym i sprawdzonym rozwiązaniem. Projekt żyje, jest aktywnie rozwijany i ma ogromną społeczność, większość problemów można znaleźć w Google w pięć minut.

Możesz wypróbować bibliotekę w akcji na ich oficjalnej stronie demo. Tam możesz wyraźnie zobaczyć, jak silnik „widzi" strukturę dokumentu i dzieli go na bloki i słowa.