Придайте смысл данным квитанции, используя JavaScript fetch() и Space OCR API

В рамках учебной программы по разработке программного обеспечения студенты местного института по обучению программному обеспечению выбирают проект после того, как в течение 3 недель изучали ванильный JavaScript-контент с требованиями, согласно которым он должен манипулировать DOM и делать запросы к API.

Читатель квитанций родился от скуки и удовольствия от кучи квитанций, накопленных за год. Да, существуют существующие решения, но ни одно из них не размещено локально, так что давайте создадим его.

Шаг 1: Интерфейс: HTML и немного клиентского JavaScript

Начальная часть этого проекта включает в себя создание простой HTML-формы с вводом, свойство «тип» которого установлено в «файл».

Затем мы можем использовать JavaScript для чтения переданного файла при отправке формы.

let photo = document.getElementById("filename").files[0];

Затем давайте проанализируем необработанные данные, содержащиеся в фотографии, с помощью объекта FileReader().

if (photo) {
var reader = new FileReader();
reader.onloadend = function () {uploadFile(reader.result)};
reader.readAsDataURL(photo);
}

Теперь, имея в руках содержание изображения, мы можем перейти к его осмыслению.

Шаг 2. Обработайте изображение чека.

В качестве тестовых данных мы будем использовать квитанции с изображений с камер, как показано ниже.

Попытка 1: использование API OCR Google Cloud

Google Cloud предлагает обширную библиотеку API и щедрые бесплатные кредиты в размере 300 долларов США при первой регистрации, включая API Google Cloud Vision и Google Cloud Documents, которые подходят для выполнения поставленной задачи.

Для этой задачи Google предоставляет следующее руководство, которое включает следующие шаги:

Настройте свою учетную запись Google Cloud и установите Google cli локально
Создать проект
Установите Google Document/Google Vision API в проект
Создать учетную запись службы
Настроить процессор

Честно говоря, на данный момент создание такой обширной инфраструктуры кажется излишним для первой итерации. Изменение планов.

Попытка 2 и последняя: измените стратегию и используйте OCR Space

Мудрый человек меняет свое мнение — Неизвестно

Зная желаемый ввод: строковое изображение base 64 и вывод: JSON, мы можем попробовать еще раз с меньшими настройками. Войдите в бесплатный API OCR от OCR Space, который так любезно предоставляет бесплатную конечную точку без необходимости кредитной карты.

Чтобы протестировать конечную точку, мы можем запустить коллекцию почтальонов, предоставленную OCR Space. После того, как вы убедились, что конечная точка работает и возвращает правильный ответ, мы можем приступить к созданию эквивалента JavaScript. Удобный ярлык для этого предоставляется Postman в виде фрагмента кода.

Сначала создайте объект Header и добавьте свой ключ API следующим образом:

var myHeaders = new Headers();
myHeaders.append("apikey", "mykey");

Затем мы можем создать объект FormData и добавить язык отсканированного изображения, а также дополнительные свойства.

var formdata = new FormData();
formdata.append("language", "eng");

Из-за зернистого и табличного характера изображений с камеры было бы целесообразно увеличить масштаб изображений и проанализировать их как табличные данные. Полный список всех возможных свойств, которые можно добавить к данным формы, см. в разделе Описание параметров POST. Также следует отметить, что у вас есть несколько доступных механизмов OCR. Внимательно изучив документацию по API, можно с уверенностью сделать вывод, что механизм OCR 3 лучше всего подходит для этой задачи, поскольку он предлагает дополнительную языковую поддержку, поэтому давайте продолжим и настроим его.

formdata.append("base64Image", blobFile);
formdata.append("scale", "true");
formdata.append("isTable", "true");
formdata.append("OCREngine", "3");

Теперь, чтобы волшебство произошло.

fetch("https://api.ocr.space/parse/image", {
method: 'POST',
headers: myHeaders,
body: formdata,
redirect: 'follow'
}).then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

В духе быстрой первой итерации из возвращенного JSON нам нужно только 4 элемента: общая сумма в квитанции, название магазина, налог на добавленную стоимость (НДС), дата покупки и URL-адрес изображения. Для следующего шага эта информация должна содержаться в хранилище данных.

В этом случае я использую локальный файл db.json в качестве своей базы данных и смоделировал API, который запускает CRUD-операции с ним, используя JSON-сервер.

Шаг 3: Визуализация полученной информации

Чтобы украсить начальную форму, вы можете использовать стили Tailwind CSS, используя Библиотеку компонентов Mamba. Нам также нужна таблица, которая позволит нам отображать проанализированный вывод квитанций, а также позволит нам удалить существующую квитанцию.

Конечный результат по-прежнему выглядит как WIP, но работает.

Вы можете найти код для этого проекта на GitHub с обновлениями, поскольку я продолжаю изучать API Google Cloud Document.

Придайте смысл данным квитанции, используя JavaScript fetch() и Space OCR API