Иметь визуальный продукт, веб-сайт или информационную панель, чтобы показать, к чему привели ваши напряженные усилия в проекте кодирования / машинного обучения, — это нечто поистине впечатляющее! Тем не менее, часто это чрезвычайно сложно, поскольку обычно требуется множество инструментов и технологий. Не переживайте, мы обсудим и сравним две платформы (Dash и Streamlit), которые позволяют просто и легко создать впечатляющее портфолио (без долгого обучения). )!

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

Вы делаете следующий естественный шаг и изучаете, как создать веб-сайт. Они начинаются с фреймворков Python, таких как Flask и Django, затем переходят к JavaScript, и вскоре вы застреваете в размышлениях о том, какой интерфейсный фреймворк использовать и как вы будете анализировать данные между серверной частью Python (моделью) и интерфейсом JavaScript. -end (фактический веб-сайт). О боже… это длинная и темная кроличья нора, через которую нужно бежать. Но вдруг вы слышите, что существует простое решение для простых веб-сайтов. Вы ищете этот новый блестящий фреймворк (Streamlit), и он действительно прост 😊 и быстр в использовании. Вскоре вы забыли все свои проблемы и неуверенность! Но затем вы вдруг понимаете, что уловка Streamlit… это работает только для простых веб-сайтов Jupyter для ноутбуков. Это все снова на борту поезда веб-разработчиков для вас. Запросы и JavaScript, вот вам 😰.

Так быть не должно… вы можете найти золотую середину. Что-то достаточно простое, чтобы понять его за несколько дней, но достаточно сложное… ну почти для всего 🤓! Добро пожаловать в Дашу. Вам все еще нужно знать несколько основ веб-разработки (HTML и CSS), но, по крайней мере, у вашего пути разработки есть четко определенный путь вперед. Даже если он кажется немного неуклюжим, он выполняет свою работу достаточно хорошо!

Весь процесс можно свести к трем решениям:

  1. Что вы хотите на странице (текст, графики, таблицы, изображения и т. д.)
  2. Как упорядочить и оформить страницу (с помощью CSS)
  3. Как вы хотите, чтобы пользователь взаимодействовал со страницей

Больше никакого JavaScript, HTTP-запросов или даже нескольких отдельных фреймворков для фронтенда и бэкенда!

Начать работу с Dash

Для начала убедитесь, что у вас установлен Dash. С простым ванильным Python используйте pip install dash, а для Anaconda conda install -c conda-forge dash. Затем создайте новый файл Python и импортируйте соответствующие библиотеки:

import dash
import dash_core_components as dcc
import dash_html_components as html

Если вы попытаетесь запустить приложение до сих пор, вы заметите одну вещь — ничего не происходит. Это потому, что на самом деле нам нужно создать объект приложения Dash и указать ему запуститься.

app = dash.Dash(__name__, external_stylesheets=["https://codepen.io/chriddyp/pen/bWLwgP.css"])
app.title = "Allocate++"

if __name__ == "__main__":
    app.run_server(debug=True)

Мы можем включить таблицу стилей (CSS с использованием external_stylesheets) и установить заголовок нашего веб-сайта (app.title), чтобы все выглядело лучше. Проверка that__name__ == "__main__" просто гарантирует, что веб-сайт запускается только при прямом запуске (а не при импорте в другой файл).

Если мы попытаемся запустить этот код, в терминале мы получим сообщение вида:

Running on http://127.0.0.1:8050/
Debugger PIN: 409-929-250
 * Serving Flask app "Main" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
Running on http://127.0.0.1:8050/
Debugger PIN: 791-028-264

Это указывает на то, что ваше приложение запущено, и его можно найти по URL-адресу http://127.0.0.1:8050/. Хотя в настоящее время это просто пустая страница (настоящая fancy-schmancy), это указывает на то, что все работает нормально.

Когда вы будете готовы продолжить, попробуйте добавить заголовок:

app.layout = html.H1(children="Fancy-Schmancy Website")

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

Теперь, когда вы знакомы с тем, как создать базовый веб-сайт, давайте перейдем к воплощению вашей концепции в код. Все начинается с так называемого макета, состоящего из компонентов. Dash предоставляет основные ( dash_core_components) и HTML ( dash_html_components) компоненты. Вы всегда начинаете использовать элементы HTML, поскольку они обеспечивают основные строительные блоки для текста и группировки компонентов, прежде чем переходить к основным компонентам. Основные компоненты предлагают больше интерактивности (графики, таблицы, флажки...). Теперь естественно спросить, как оформить веб-страницу. Короче говоря, для этого вы используете CSS (каскадные таблицы стилей). Сами Dash предоставляют конкретные обзоры основных компонентов, а у надежной Mozilla есть потрясающее введение HTML и CSS. Несколько примеров использования элементов находятся здесь.

Последняя часть любого приложения Dash — сделать его отзывчивым. Получение кнопок, которые вы нажимаете, текста, который вы вводите, и изображений, которые вы загружаете… сделайте что-нибудь! Здесь обычно возникают трудности, но здесь все действительно не так уж плохо. В Dash все, что вам нужно определить, — это функция, которая получает и управляет определенными свойствами элемента/ов. Свойства начинаются с символа «@».

@app.callback(
    [dash.dependencies.Output("output element id", "property to set value of")],
    [dash.dependencies.Input("input element id", "input property")]
)
def update_output(value):
       return value

Мы можем сделать это для нескольких элементов, добавив в эти списки больше объектов Input и Output! Одна вещь, на которую следует обратить внимание, — больше Input объектов означает, что требуется больше входных данных для функции, а большее количество Output объектов означает большее количество возвращаемых значений (звучит очевидно, но это может легко вылететь из головы). Также обратите внимание, что вы не должны изменять глобальные переменные внутри этих функций (по техническим причинам это является антипаттерном). По этим обратным вызовам предоставляется дополнительная документация.

Движение вперед и JavaScript

Вот и все, что вам нужно знать, чтобы приступить к созданию интерактивного и впечатляющего веб-приложения! Скорее всего, создать его все равно будет сложно, но официальная документация и туториалы для Steamlit и Dash потрясающие. Есть также классные галереи примеров приложений, использующих Dash и Streamlit (так что вы можете учиться на других примерах).

Конечно, есть варианты использования JavaScript. Фактически, вы можете создавать плагины для Dash с помощью JavaScript/React и D3.js. Черт, если вы уже знакомы с веб-технологиями, вам может быть даже проще их использовать. Однако использование JavaScript больше не является на 100 % обязательным для создания веб-сайтов (а скорее, необязательным). Может быть полезно знать о веб-технологиях, но если ваша цель не состоит в том, чтобы стать веб-разработчиком с полным стеком, вам не нужно становиться экспертом, чтобы собрать яркое портфолио 🥳!

Я надеюсь, что это помогло вам! Dash помог мне собрать мой первый дэшборд за день. Если вы сделали классный сайт, приложение или портфолио, не забудьте прокомментировать и рассказать мне о них. Не стесняйтесь проверить другие мои посты — некоторые основные моменты — это практические инструменты кодирования, веб-скраппинг и машинное обучение (с практическим проектом). Вы можете следить за обновлениями в моей рассылке и Твиттере 😉.

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