Полнофункциональное веб-приложение на основе искусственного интеллекта с интерфейсом React и серверной частью Flask.

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

Конечная цель этого проекта — показать вам, что вы можете использовать идеально разработанные удобные для разработчиков инструменты от замечательного сообщества для решения действительно сложных проблем в CS, и вам не нужно пачкать руки, если вы в принципе этого не хотите.

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

Реагировать и Тессеракт

Как я объяснил выше, я не буду рассказывать вам о каждом шаге приложения, однако я объясню, как вы можете получить этот код и заставить его работать в вашей собственной локальной среде.

Во-первых, нам нужно клонировать репозиторий, мы можем получить его по ссылке окончательная версия здесь (такая же, как выше), затем мы можем либо скачать zip-версию, либо вы можете клонировать ее через git.

После этого структура папок должна выглядеть так, как показано ниже.

Мы должны продолжить и сначала установить пакеты npm, для этого мы можем перейти в папку «react-tesseract-ocr» и выполнить следующие команды:

npm install

После того, как все работает нормально, мы должны увидеть страницу, подобную этой ниже.

Фактически, на этой странице мы можем запустить OCR (оптическое распознавание символов) с любым изображением, которое мы хотели бы попробовать. OCR на самом деле довольно сложная концепция, и запуск такого проекта с нуля — это просто кошмар (по крайней мере, если у вас нет большого опыта, как у меня). Репозиторий, который мы разветвили, использует библиотеку Tesseract от Google, которая в основном автоматизирует для нас весь процесс OCR, фактически JS-порт оригинального Tesseract.

Единственное место, которое мы изменим для урока, это часть ниже.

Именно в этой части первоначальный автор проекта React печатал извлеченный текст из изображения. Для этого извлечения мы используем JS-версию библиотеки Google Tesseract. Если вы хотите узнать больше о tesseract.js, вы можете перейти по ссылке здесь.

Мы заменили эту часть запросом «POST» к заданной конечной точке на порту 8080 и в основном добавили извлеченный текст в тело запроса.

С этого момента мы можем быстро перейти к нашему бэкенду.

Колба и Наивный Байес

Для простоты я также перешел к той части, где мы обычно берем данные и обучаем модель. Обычно это должно быть болезненной частью такого проекта, и я не пытаюсь отрицать этот факт своим подходом. На самом деле, вы можете пойти дальше и обучить свою собственную модель, используя учебник в ссылке. Я лично так делал некоторое время назад.

Итак, для запуска серверной части в нашей среде Python установлены две зависимости: nltk и Flask по следующим ссылкам (это руководства по conda, потому что я использую Anaconda в своей локальной среде. Если вы хотите узнать подробнее об Анаконде)

Как видите, наша модель находится в корневом каталоге папки «sentiment-backend». После того, как у нас есть все наши зависимости, запустить сервер довольно просто. Все, что нам нужно сделать, это запустить «python server.py», и наш сервер должен запуститься.

Теперь я покажу вам код нашего сервера.

Импорт

Это наш импорт для кода сервера, первые 2 строки необходимы для сервера Flask, но 3-я немного сложнее, так как мы отправляем запрос POST, который нам нужен, чтобы включить совместное использование ресурсов между источниками, импортируя CORS из flask_cors. Pickle — для чтения нашего модуля, remove_noise — функция для удаления ненужных или даже опасно бесполезных данных из входящего текста, это поможет нам лучше принять решение. work_tokenize — это модуль для токенизации входящего текста и очень часто используемая практика машинного обучения, если вы хотите узнать больше об этом, вы можете проверить здесь.

Инициализация

Мы импортируем нашу модель ML, создаем объект приложения Flask и включаем CORS.

Конечная точка и запуск сервера

После того, как мы подготовим все с помощью предыдущих шагов, теперь мы можем создать нашу конечную точку API с помощью декоратора Flask. По сути, этот декоратор превращает нашу «домашнюю» функцию в конечную точку API, в нашем случае один и тот же адрес принимает запросы GET и POST.

Когда запрос достигает нашей конечной точки, мы проверяем, является ли это запросом POST или нет, и если это так, мы пытаемся получить наше предложение из тела запроса.

После того, как у нас есть наше предложение, мы удаляем шумы и токенизируем их по причинам, описанным выше.

Теперь мы можем проверить, является ли контекст предложения отрицательным или положительным, а затем вернуть результат.

Теперь мы можем запустить необходимый код для запуска нашего сервера Flask с функциями run и keep_alive.

Тестирование нашей системы

Я добавил 1 положительный и 1 отрицательный текст, содержащий изображения, в директорию Frontend. Теперь мы можем просто пойти дальше и выбрать один из них в пользовательском интерфейсе.

После того, как мы выберем наше изображение для применения OCR, а затем анализа настроений, наше приложение React автоматически начнет выполнять OCR. После того, как все будет решено, если наша система может предоставить значимый текст, мы можем получить ответ от сервера.

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

Он говорит, что это отрицательно, и я согласен. Я имею в виду, что я могу отстой, но пока не эта модель: P.

Примечание. Я специально использовал эти простые изображения, сделанные мной, потому что я не хочу иметь дело с какими-либо нарушениями авторских прав. Пожалуйста, не стесняйтесь и попробуйте использовать более сложные изображения.

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

До следующего раза, берегите себя. :)

Первоначально опубликовано на https://blog.akbuluteren.com.

Ознакомьтесь со статьями о криптографии на странице https://margin.io/blogs