Делать модели — это хорошо. Развертывание их в производство лучше. Я хотел отойти от стандартного набора инструментов JS+JQuery (для выполнения вызовов AJAX, т. е. подключения к бэкенду)+HTML+CSS для веб-развертывания и попробовать эти две библиотеки и посмотреть, как онисравниваются. Vue.js — это легкая и простая в использовании среда JavaScript для создания более сложных интерфейсных веб-сайтов.
С другой стороны, React.js — это библиотека. Разрешение манипулирования DOM, архитектуры компонентов и управления состоянием (состояние на уровне компонента, а не Redux). Все остальное остается за пользователем. Vue, с другой стороны, более самоуверен и поставляется с большим количеством синтаксических сахаров, системой плагинов, встроенными директивами, переходами и т. д. Кроме того, основная команда создала сопутствующие библиотеки для маршрутизации и управления состоянием, а также другие полезные инструменты. Некоторыми примерами таких сопутствующих библиотек являются Vue-router, Vuex для управления состоянием и Vue CLI. Перевод. Существует гораздо больше готовых решений, которые легче внедрить с помощью Vue, но как разработчик у вас гораздо меньше контроля. Как мы увидим при соединении бэкенда с интерфейсом, кода намного меньше.
I. Рабочий процесс для развертывания машинного обучения:
- Моделирование завершено, вы оптимизировали его, сериализовали модель и написали код-оболочку для ее обслуживания. Вероятно, вы использовали Python (или внедрили некоторый код C и/или использовали Rust для критически медленных задач.)
- Затем вы готовы выставить конечные точки. Вы используете Flask, чтобы создать REST API и убедиться, что вы можете обслуживать выходные данные модели.
- Теперь последний вопрос: как вы подключаете его к внешнему коду. т.е. в случае веб-приложения, как убедиться, что целевая страница, на которой пользователь будет взаимодействовать, давать точки данных, маркировать данные и т. д., проста и интуитивно понятна в использовании? Стандартный способ html+css+jss недостаточно быстр и динамичен, чтобы предоставить пользователям желаемый контент. Это была реакция, и появились библиотеки и фреймворки vue.js. Несколько технических улучшений с точки зрения состояний, алгоритмов актуализации DOM, встраивания html непосредственно в синтаксис js и т. д. дали превосходную производительность. Вопрос в том, насколько легко мы можем подключить решение для бэкенда, если мы знаем основы обоих.
II. NLP-решение с Vue.js
Решение НЛП прямолинейно: классифицировать текст как спам или нет. Пользователь может ввести текст, и мы выполним бинарную классификацию. Я не буду утомлять вас подробностями, вы можете сами прочитать код. Интересная часть — это API, где мы в основном читаем в замаринованной модели и создаем конечную точку POST для использования и подключения к внешнему интерфейсу.
@app.route('/api/task', methods=['POST'])
def input_predict_text():
#load the serialised model
classifier = TextClassifier.load_from_file('models/best-model.pt')
title = request.get_json()['title']
sentence = Sentence(title)
#execute the classifier and make predictions
classifier.predict(sentence)
text = sentence.to_plain_string()
label = sentence.labels[0]
result = {'title' : text, 'tag' : label.value} session['my_result'] = result
#return json response
return jsonify({'result': result})
Теперь подключаемся к переднему концу. Код здесь. Главное отметить, что структура кода была сгенерирована с помощью
vue init webpack deployModel
команда, что делает ее общей структурой кода веб-пакета. Теперь, когда вы определили свои конечные точки в папке api вашего проекта, вы можете использовать библиотеку Axios. Axios — это клиентская библиотека HTTP, которая позволяет асинхронно выдавать HTTP-запросы для взаимодействия с конечными точками Flask REST. Функция addNewTask() использует Axios для отправки предоставленных входных данных в конечную точку /api/task, а getTasks() получает результаты, возвращаемые API. Обратите внимание, что api отсутствует в репозитории github, вы можете клонировать репозиторий и вставлять свои собственные конечные точки. Код выглядит следующим образом:
И окончательное решение выглядит следующим образом:
III. Решение для компьютерного зрения с React.js
Опять же, решение CV также прямолинейно. Войдите в систему распознавания лиц. Когда пользователь регистрирует учетную запись, мы также хотим убедиться, что впоследствии он сможет войти в систему, используя свое лицо. Поток приложения:
Опять же, я не собираюсь утомлять вас частью машинного обучения (подсказка, что использовалась модель facenet). Допустим, вы закончили и хотите его обслужить. Как бы это выглядело? По сути, мы пытаемся поиграть со всеми оболочками для AJAX. Вызаметили, что все они очень похожи друг на друга. Это означает, что существуют Axios для реакции и для vue, очевидно, с небольшими отличиями. Давайте определим нашу конечную точку Flask для части распознавания изображений:
app.route('/verify', methods=['POST'])
def verify():
img_data = request.get_json()['image64']
img_name = str(int(datetime.timestamp(datetime.now())))
with open('images/'+img_name+'.jpg', "wb") as fh:
fh.write(base64.b64decode(img_data[22:]))
path = 'images/'+img_name+'.jpg'
global sess
global graph
with graph.as_default():
set_session(sess)
min_dist, identity = who_is_it(path, database, model)
os.remove(path)
if min_dist > 5:
return json.dumps({"identity": 0})
return json.dumps({"identity": str(identity)})
Теперь подключаемся к переднему концу. Код здесь. Главное отметить, что здесь вместо обертки Axios для AJAX мы использовали встроенный в браузер fetch. А выглядит это примерно так (файл login.js на github):
И конечный продукт:
Вывод:
Это вопрос ванили против шоколада. Оба фреймворка отображают достижения в веб-технологиях, и оба легко подключаются к модели после того, как вы изучили js и получили базовое представление о самих библиотеках/фреймворках. Способы подключения также одинаковы на разных платформах, но одна вещь, которая выделяется, заключается в том, что с Vue.js вам нужно писать намного меньше кода, но именно поэтому вы более самоуверенны и обладаете меньшей гибкостью.
