Создайте приложение React + Flask, которое предлагает новые романы с графиком Python

Краткое описание проекта:

• Создайте базу данных Graph пользователей и книг, которые они читают
• Разработайте приложение Flask, которое подает редкие, интересные книги для пользователей на основе их избранных
• Реализуйте приложение React, которое интегрируется с Flask + наш график, чтобы продемонстрировать пользователям их следующую любимую книгу

Существует множество полезных ресурсов для изучения техник Data Science: MOOCS, блоги, учебные пособия и буткемпы - все это возможности для обучения. Лично я учусь лучше всего, работая над проектами, которые мне кажутся интересными и интересными. Ничто так не мотивирует меня поднять уровень моего понимания на новые высоты, как работа над интригующей проблемой. Как определить новые возможности, которые я могу исследовать? Вообще, читая чужие работы!

Идея этого проекта была впервые реализована после прочтения великой книги Вики Бойкис.блогпост об изменении характераNetflixДвигатель рекомендации. Короче говоря (извините за хакерскую работу, Вики), ушли те дни, когда мы минимизировали среднеквадратическое среднеквадратичное отклонение предпочтений пользователя с помощью Matrix Factorization или Deep Learning. Рекомендации по-прежнему отчасти являются художественной формой, в которой контекст, нюансы и дизайн играют большую роль в предоставлении пользователю большого опыта. Кроме того, коммерческая ценность рекомендации заключается не просто в предоставлении пользователю наилучшего контента. В случаеNetflixможет быть, чтобы обеспечить лучшееNetflixконтент для пользователя.

Я имел большое удовольствие присутствоватьRecSys 2019в Копенгагене в этом году. ПобедительЛучшая бумагабыл тот, который былнесовременный нейронный сетевой подход. Вместо этого это был тщательный анализ предыдущих систем рекомендаций с открытым исходным кодом, общедоступных наборов данных и их фактической производительности в личном противостоянии. Результаты, спросите вы? Простые модели (основанные на графике, пользователь / элемент ближайших соседей, самые популярные элементы) почти всегда превосходят лучшие глубокие нейронные сети.

Можно с уверенностью сказать, что я переосмыслил Рекомендательные Системы в свете этих откровений. Что я, как пользователь, хочу отYouTubeДвигатель рекомендации? Как насчет поисковой системы, какEcosia/ DuckDuckGo? В первом примере я мог бы хотеть увидеть видео, которые развлекают / информируют меня в тот момент. В последнем примере я хочу быстро найти самую актуальную информацию, не беспокоясь о конфликте интересов. В любом случае возвращенные товары могут быть не самыми популярными, высоко оцененными или противоречивыми. Рекламодатели иногда находят вирусность выгодной, но я, возможно, не фанат.

Так чего же я действительно хочу? Как я могу построить систему, которая оптимизирует для этого неуловимого,убыточныйЦель? Когда я шел в библиотеку на днях, в моей голове был знаменательный момент ясности: мне очень нравится, когда я нахожу нового автора или книгу, о которой я не думал и не слышал. Чистое открытие, новизна того момента может вдохновить недели счастья, когда я пролистываю страницы.

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

Эта идея проста:

• Люди, которые читают и любят те же книги, что и я, могут иметь примерно одинаковые вкусы
• Эти же соседи, вероятно, читали несколько книг, некоторые из которых я не читал
• Некоторые из этих непрочитанных книг могут быть настолько неясными / непопулярными, что я вряд ли обнаружу их самостоятельно

Ни одно из приведенных выше утверждений не должно вас удивлять, особенно первые два пункта. Последний пункт, конечно, является наиболее фундаментальным для этой работы. Что если я построю базу данных Графа из книг, авторов и читателей, а затем прошёл по узлам графа, чтобы найти эти скрытые жемчужины книг?

Сайт GoodReads опубликовал набор данных из 10 000 книг, более 50 000 пользователей и почти 6 миллионов оценок (1–5 звезд) книг. Конечно, я мог найти что-то интересное в этой сокровищнице! Я никогда в своей жизни не строил реальный график, поэтому подумал, что это будет великое испытание огнем. Узлы и края, как трудно это может быть? Узлы этого графика являютсяUsers,Books, а такжеAuthors:

Края - это рейтинги, связанные с каждым(User, Book, Author, rating)кортеж:

Сначала я создал 4 класса для учета компонентов Graph. Каждый узел также будет иметь список, связанный с ним:Usersбудет иметь полкуBooks,Authorsбудет иметь свою библиографию, иBooksбудет иметь свою аудиторию.Graphсоединит все эти объекты вместе в единое целое, которое можно пройти.

Вышеприведенный блок кода довольно короткий, и внутри него есть ряд методов, которые здесь не рассматриваются. Мы сосредоточимся на том, который можно напрямую использовать с простым API React App, ориентированным на потребителя:_book2book, Итак, давайте скажем, что теперь мы можем ходить по нашему Графику, и все прекрасно собирается. Как мы можем найти значимоеBooksпредставитьUser? По нашему мнению, давайте сделаем гипотетическую прогулку:

1. Вы, какUserлюбиBookпоAuthor(например, пятизвездочный рейтинг)
2. этоAuthorимеет много поклонников, и она написала подобноеBooksВы также можете любить. Это нероманРоманы, как вы уже знаете о них.
3. этоAuthorимеет много поклонников, некоторые из которых могут быть похожи на вас
4. Один из этихUsers, выбранный случайным образом, будет иметь полку любимыхBooks
5. Выберите наименее популярный, пятизвездочный рейтингBookс этой полки
6. Либо представить этоUserили вернитесь к шагу 1 и продолжайте идти по графику

Теперь мы просто должны вернуть этоBookнашимUserкак возможное великое открытие! Однако нам не хватает ключевого компонента этого проекта. Нам нужно приложение, чтобы доставить эти интересныеBooks. Давайте начнем с части, которая все еще основана на Python, для ознакомления: нам нужно создать серверную часть нашего приложения, которая обрабатывает запросы API, и поэтому, конечно, мы собираемся использоватьколба, Flask позволяет нам сделать небольшой веб-сервер на Python, и он довольно прост в использовании. Я обнаружил, что два урока чрезвычайно полезны, и они были хорошо связаны друг с другом: настойруководствоиРеагировать приложениеэто вызывает вышеупомянутое приложение Flask.

Итак, мы сначала создаем новый каталог, который мы будем называтьapi/, Внутри этой папки у нас будет два файла Python.__init__.pyсоздаст основы нашего приложения Flask, импортирует необходимые переменные и т.д .:

а затемapp.py(или как вы хотите это назвать):

Внутриapp.pyМы делаем ряд важных вещей. Во-первых, мы вызываем наш код на python, который строит нашу графовую базу данных для поиска новых книг. Он также устанавливаетBlueprintнашего бэкэнда, поэтому, когда мы делаем вызовы API для этой службы, мы указываем в правильном направлении. Давайте распакуем эти вещи на самом базовом уровне:

• Наше имя приложения инициализировано, чтобы быть@mainно у нас могли бы быть и другие вещи
• Мы принимаем два.routesв нашем@mainприложение:/input_bookа также/novel_novel
• Вы можете думать об этом как об отдельных страницах нашего веб-приложения, и они оба работают по-разному
• Методы HTTPGETа такжеPOST, которые получают что-то из нашего бэкэнда или публикуют что-то (хорошая терминология!)

Для/input_bookвызов, что мы делаем, получая необработанный текстовый ввод отUserна веб-странице, упаковав его в формате JSON, который выглядит как{"book": "book_title"}и затем обновление внутреннего сервера. В этом случае мы используем эту первоначальную книгу, чтобы найти похожую, редкую книгуUserможет наслаждаться. Мы вызываем Graph с этим входом и устанавливаемglobalпеременная python для изображения URL выходной книги.

Теперь вы можете представить, что WebApp будет выполнять второй API-вызов приложения Flask, говоря: «Каков вывод этого ввода?». Это нашGETвызывать/novel_novel, который также возвращает JSON. Вероятно, сейчас это звучит довольно разумно для большинства из вас, и это также относится и ко мне. Возможно, вы даже раньше использовали Flask. Но вы когда-нибудь строилиReactПриложение раньше?

реагироватьбиблиотека JavaScript с открытым исходным кодом, спонсируемая Facebook, для упрощения кодирования пользовательского интерфейса. Мне все еще потребовалось немного времени, чтобы изучить некоторые основы JavaScript, понять синтаксис React и постараться, чтобы все выглядело достойно. Два важных ресурса, которые я использовалэто ранее упоминавшийся YouTubeа такжеэтоСтатья TowardsDataScience. Видеогид использует вторую библиотеку React,semantic-ui-react, что делает создание приложений еще проще, и поэтому я в основном следовал их советам. И, честно говоря, вы тоже должны. Основы установки необходимых инструментов, сборка шаблонаApp.jsфайл и объяснение функций написания лучше оставить профессионалам JavaScript.

Однако я подробно расскажу о реальных компонентах React, которые я взломал для интеграции с нашим Graph. Основной функцией здесь являетсяApp.jsфайл, поэтому мы сначала распакуем его. Мы импортируем наши необходимые библиотеки, инициируемApp(), а затем вернуть некоторые HTML / JavaScript-подобные объекты (разделы, контейнеры, изображения и т. д.):

Вы заметите внутриContainerу нас есть два компонента:<BookEntry/>а также<GrabBook/>, Они соответствуют нашим двум вызовам API в нашем приложении Flask, котороеPOSTназвание, которое понимает наш график, а затемGETпозвоните, чтобы получить наш новый интересный роман для пользователя. Давайте сначала посмотрим на более сложный компонент,BookEntry:

Мы импортируем несколько дополнительных пакетов изsemantic-ui-reactв этом компоненте:{ Form, Input, Button }, Мы хотим, чтобы пользователь вводил текст вFormв соответствии с названием книги, которую они любят, а затем нажмите кнопку отправитьButton, Сначала мы инициализируем несколько переменных (const [title, setTitle]) и установите значение по умолчанию= useState('');пустая строка.

Далее мы строим<Form.Field>и мы добавим вplaceholderзначение, которое дает инструкции пользователю о том, что делать Как только пользователь ввел некоторый текст, мы устанавливаемuseStateизtitleк тому из введенного текста. Легко!

Далее добавляем новый<Form.Field>в формеButtonчто пользователь может щелкнуть справа под вводом текста. По нажатию кнопки (<Button onClick= ...), мы делаем наш первый вызов нашего API черезawait fetch("/input_book"вызов. Напомним, что в нашем приложении Flask наш Blueprint имеет@main.route('/input_book'Таким образом, этот вызов попадает в наш бэкэнд в этой точке контакта. Возвращаемое значение этогоPOSTвызов простоresponseэто говорит о том, что все прошло хорошо, если и только если мы найдем заголовок на нашем графике. В противном случае мы возвращаем400и попросите пользователя отправить новый заголовок. Возможно, что в нашей базе данных нет заголовка, или, может быть, она написана по-другому, и т. Д., Поэтому мы не хотим, чтобы наше приложение ломалось в этих случаях.

Прежде чем перейти к следующему компоненту, я бы рекомендовал всем, кто пытается создать одно из этих веб-приложений, использоватьconsole.log()звонки повсюду в вашем коде. Они не только служат двойной цели в качестве комментария, они также могут быть полезны при отладке вашего кода. Напомним, что вы просто щелкаете правой кнопкой мыши на любой веб-странице в Chrome,Inspect, а затем откройтеconsoleвкладка, и вы можете увидеть все, что происходит.

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

Здесь мы делаем еще один вызов API дляPOSTконечная точка черезfetch("/novel_novel"), Помните, что мы возвращаем объект JSON, который выглядит как{"image_url": "http://image_of_book.png"}, Затем мы передаем это в<Image>блок, который отображает изображение и возвращает его в наше приложение. Круто!

Честно говоря, страница не выглядит великолепно. Если вы являетесь экспертом React, пожалуйста, дайте мне знать, как я могу сделать макет лучше:

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

Эта работа не предназначена для коммерческой, готовой к производству системы.Это должно быть обучающее приключение, которое забавно использовать и заставляет задуматься. Вот ссылка наСделки рЕПОесли вы заинтересованы в проверке.

Спасибо, что заглянули! Не стесняйтесь комментировать ниже и попросить книги. Я лично проверил 10+ рекомендаций из Графика, и я почти всегда был удивлен результатами. Я был рад, что изучил предложения, и, хотя некоторые из них не были моей чашкой чая, другие - замечательные открытия.

Оригинальная статья