Недавно мы опубликовали статью и видео о создании механизма рекомендаций по фильмам, и один из самых частых вопросов, которые я получил, был: «Как мне превратить этот сценарий / записную книжку в проект, который я могу продемонстрировать?». Итак, я решил создать интерфейс для нашей системы рекомендаций. Вы можете попробовать это здесь:

Http://www.codeheroku.com/static/movies/index.html

Опубликована вторая часть этой серии: Щелкните здесь

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

##Ingredients For this Recipe:
1. Web2py Framework : Download Here
2. Recommendations Model File:  item_similarity_df.csv
3. Test HTML Page: Download Here 
4. Completed Application Code with all above: Download Here

Давайте рассмотрим общие шаги по созданию пользовательского интерфейса для вашего ML-приложения:

  • Выбор инструментов и языков
  • Создание API / сервисов для демонстрации вашей модели машинного обучения
  • Создание клиентского веб / мобильного приложения

Шаг 1: Выбор инструментов и языков программирования

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

Вы должны использовать правильные инструменты для правильной цели!

Предполагая, что вы построили свою модель машинного обучения на Python, имеет смысл использовать этот мощный язык и для ваших веб-приложений / движка API. Это также означает, что вам не нужно переносить какой-либо код на какой-либо другой язык программирования. Вот моя рекомендация по стеку, с которым вы не ошибетесь:

Создавайте API с использованием фреймворка на основе Python (Flask, web2py, Django) и

Создайте свой интерфейс с помощью JavaScript с VueJS или ReactJS

Если вы любите Python, вам нужен JavaScript. Использование реактивных пакетов, таких как VueJS / ReactJS, необязательно, но упростит вашу жизнь, особенно создание одностраничного приложения, поскольку вам не придется беспокоиться об обновлении страниц и передаче параметров с одной страницы на другую!

В этом посте мы будем использовать веб-фреймворк на основе Python под названием web2py для создания API-интерфейсов и VueJS для создания интерфейса реактивного HTML.

Шаг 2. Создание API / сервисов для раскрытия вашей модели машинного обучения

Наши модели машинного обучения будут доступны внешнему миру с помощью веб-службы. Затем мы можем использовать эту услугу в мобильном / веб-приложении, чтобы сделать наши приложения умнее. Мы создадим сервис под названием getRecommendations

@service.json
def getRecommendations(watched_movies):
     
     ##Magic with our ML model goes here
return recommended_movies

Это JSON API, который принимает фильмы, которые пользователь смотрел / оценивал в прошлом, и возвращает список рекомендуемых фильмов. web2py отлично подходит для создания API с минимальными строками кода. Итак, давайте продолжим и Загрузите web2py отсюда.

После извлечения архива вы должны увидеть следующую структуру каталогов:

Небольшая заметка о некоторых важных папках / файлах:

  1. Приложения: все ваши приложения / проекты web2py содержатся в этом каталоге. Вы можете создавать резервные копии своих проектов и устанавливать новые, просто скопировав папку проекта в этот каталог.
  2. web2py.py: мы можем запустить наш веб-сервер, запустив этот скрипт:
>> cd Downloads/web2py_src
>> python web2py.py

Выберите пароль по вашему выбору и нажмите запустить сервер. Затем перейдите в админку, используйте только что введенный пароль и создайте простое приложение под названием «фильмы».

Теперь, если мы хотим, мы могли бы написать остальной код во встроенном веб-редакторе, который предоставляет web2py. Но я не большой поклонник этого редактора! Итак, давайте вернемся в каталог web2py и отредактируем приложение в нашем любимом редакторе кода - Sublime / Atom / VS Code.

Перейдите в папку приложений, и вы должны увидеть новую папку, созданную для нашего приложения с фильмами. Вот структура каталогов нашего приложения с фильмами web2py:

Web2py по своей сути поддерживает архитектуру MVC (Model View Controller).

  • M odels: определение схемы базы данных и проверки
  • V iews: размещает ваш HTML-код.
  • Контроллеры C: код Python, в котором вы будете писать бизнес-логику и управлять взаимодействием между интерфейсом пользователя и базой данных.

Несмотря на то, что MVC является хорошим архитектурным шаблоном, мир перешел на использование архитектуры микросервисов, так что наш интерфейс не зависит от логики контроллера (в основном). Прямо сейчас мы сосредоточимся только на контроллерах, на которых мы будем создавать наши API. Откройте файл контроллера, расположенный по адресу applications / movies / controllers / default.py

Во-первых, позвольте мне показать вам, насколько просто использовать web2py и создать простой API. давайте создадим API под названием myapi, который принимает два параметра a и b и возвращает конкатенацию строк этих двух параметров:

Хорошо, пока не волнуйтесь - в строках с 1 по 5 мы написали код, специфичный для web2py, который используется для инициализации веб-сервисов в нашем приложении. Декоратор @ service.json сообщает web2py, что мы хотим предоставить myapi как веб-службу JSON. Вы также можете попробовать @ service.xml или @ service.csv для создания служб в других протоколах.

Теперь давайте вызовем наш API из браузера и посмотрим, действительно ли он работает. Перейдите по следующему URL-адресу в своем браузере: http://127.0.0.1:8000/movies/default/call/json/myapi?a=3&b=2

Поздравляю! вы только что создали свой первый API!

Пришло время создать наш API рекомендаций. Напомним, наша подпись API выглядит примерно так:

@service.json
def getRecommendations(watched_movies):
     
     ##Magic with our ML model goes here
return recommended_movies

На первом этапе мы загрузим модель рекомендаций, созданную с помощью совместной фильтрации, в наше приложение. Мы создали item_similarity_df в нашем руководстве по совместной фильтрации. Щелкните здесь, чтобы загрузить этот файл CSV и поместите его в папку приложений / фильмов / статических файлов.

Поскольку мы не хотим загружать фрейм данных каждый раз, когда кто-то использует наше приложение, мы будем кэшировать его с помощью метода web2py cache.ram.

Далее следует то, чего мы ждали: создание API рекомендаций. Это почти тот же метод, который мы создали во время класса совместной фильтрации с мельчайшими изменениями в типе данных watched_movies. Мы также включили вспомогательный метод, который исключает фильмы, которые пользователь уже посмотрел / оценил, из списка рекомендаций.

Тестирование API рекомендаций

Чтобы протестировать наш API, нам нужно отправить POST-запрос в API, расположенный по адресу / movies / default / call / json / get_recommendations, с параметром watched_movies.

Чтобы упростить вам задачу, мы создали тестовую HTML-страницу, которая отправляет этот запрос. Идите вперед, скачайте отсюда и сохраните эту страницу в папке application / movies / static. Щелкните правой кнопкой мыши ›Сохранить страницу как (uhumm..uhumm)

Вы можете получить доступ к этой странице в своем браузере по URL-адресу http://127.0.0.1:8000/movies/static/test.html

Если вы видите такую ​​страницу, это означает, что ваш API работает должным образом, и вы готовы к следующей части этого руководства.

В следующей части мы создадим интерфейс на основе HTML / JavaScript с использованием VueJS для вызова этого API и отображения рекомендованных фильмов для наших пользователей в красивом интерфейсе. Мы решим опубликовать следующую часть на основе отзывов и количества ответов, которые мы получили на этот пост. Так что, если вы хотите получить следующую часть, прокомментируйте этот пост или свяжитесь с нами в WhatsApp.

Опубликована вторая часть этой серии: Щелкните здесь

##Ingredients For this Recipe:
1. Web2py Framework : Download Here
2. Recommendations Model File:  item_similarity_df.csv
3. Test HTML Page: Download Here 
4. Completed Application Code with all above: Download Here

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

Если вы где-то застряли при создании этого проекта, вы можете связаться с нами по электронной почте: [email protected] или в WhatsApp: + 91–9967578720