Можете ли вы создать веб-приложение без использования JavaScript, HTML и CSS?
Если вы не любите кодировать JS, HTML или CSS, но вам также необходимо развернуть и поделиться своими скриптами Python, моделями машинного обучения и идеально спроектированными панелями мониторинга с другими. Вы находитесь в нужном месте. Хотя есть несколько вариантов, таких как Dash, Bokeh, мы собираемся скрыть Streamlit в этом посте.
Я видел этот фреймворк для веб-приложений, но не нашел возможности попробовать его, пока не начал кодировать свое веб-приложение с помощью Flask. Поскольку я новичок в CSS и HTML, мне все еще трудно создавать свои веб-приложения.
К счастью, есть инструменты для создания простых веб-приложений, не требующих опыта работы с интерфейсом. Здесь я поделюсь своим опытом работы со Streamlit. Мы увидим это в действии на простом примере моделирования, который я сделал в своем последнем посте.
Прежде чем продолжить, давайте кратко рассмотрим, почему Streamlit является таким простым способом прототипирования ваших моделей машинного обучения или скриптов Python. Как они также упомянули на своей целевой странице, Streamlit основывается на этих принципах:
1) Вы можете писать свои скрипты с помощью Python и добавлять виджеты Streamlit в свой скрипт в том порядке, в котором вы хотите видеть. Это чистый Python.
2) Вам не нужно писать маршрут, HTML, CSS или Javascript. Просто выберите из множества виджетов Streamlit для назначения переменных и используйте их по своему усмотрению.
3) Я еще ничего не развернул, но они предоставляют свой вариант облачного развертывания среди других вариантов, таких как Heroku.
Я не хочу вдаваться в подробности, так как вы можете проверить это в Справочнике по API.
Отображение текста
Для отображения текста используются просто текстовые функции, как вы можете видеть на скриншотах ниже. Чтобы расположить виджеты бок о бок, вы можете использовать streamlit.column, а затем поместить свои виджеты в цикл with. Обратите внимание, что вы можете использовать уценку в Streamlit, что очень полезно для представления ваших идей или документации. См. Документацию.
Отображение данных
Думаю, вы уловили идею создания компонентов. Вы можете показать свои данные, используя удобные методы. Здесь я продемонстрировал только таблицу и Pandas DataFrame, но вы также можете показать JSON. См. Документацию.
Отображение диаграммы
Одна из наиболее важных и всеобъемлющих частей этого инструмента - отображение диаграмм. Есть много вариантов, которые вы можете выбрать, которые лучше всего подходят для вас. Невероятно просто для представления ваших моделей машинного обучения, статистического анализа, анализа данных и т. Д.
Согласно их целевой странице, он совместим с: Bokeh, Altair, PyTorch, OpenCV, DECK.GL, Pandas, Vega-Lite, Matplotlib, Numpy, Scikit-learn, TensorFlow, Plotly и Keras.
Вы можете сами увидеть в действии некоторые из них из галереи приложений.
Отображение виджетов
Еще одна важная функция - виджеты. С помощью виджетов вы можете настраивать графики, принимать данные от пользователей и т. Д. Например, вы можете изменять параметры моделирования. Ниже я просто поместил некоторые из виджетов, которые предоставляет Streamlit, но вы также можете создавать свои собственные виджеты. См. Документацию.
Демо
В моем предыдущем посте мы исследовали иглу Бюффона с математической точки зрения. В этом посте мы построим моделирование с помощью Python, а затем превратим этот сценарий в интерактивное веб-приложение с помощью Streamlit.
Прежде чем начать, убедитесь, что вы установили Streamlit.
pip install streamlit
Я делюсь короткой версией оригинального скрипта, чтобы упростить задачу, но, если вы хотите увидеть весь скрипт, вы также можете проверить оригинальную версию на моем Github.
После того, как мы установили Streamlit, мы можем просто запустить файл Python, используя,
streamlit run <filename>.py
Здесь мы просто запускаем пустой файл Python. Как видите, смотреть пока нечего, поскольку мы еще ничего не добавили. Это просто запуск локального веб-сервера. Вы можете изменить цветовую тему с помощью верхней правой кнопки меню.
1) Начнем с добавления заголовка и пары инструкций о том, как все работает.
2) Затем мы добавили расширитель, чтобы показать подробную информацию о моделировании.
3) Чтобы можно было поиграть с параметрами моделирования, мы добавили боковую панель с формой, позволяющей изменять параметры. Мы определили боковую панель внутри st.form, потому что каждое значение, которое мы получаем от виджета внутри st.form, будет отправлено в сценарий после отправки формы. Это полезно, потому что если вы определите виджет вне формы и измените его значение, это приведет к автоматическому повторному запуску скрипта.
4) Хотя мы можем поиграть с параметрами, ниже мы добавили параметры конфигурации графика, которые позволяют изменять цвет фона, тип маркера, размер маркера и т. д.
5) Для завершения скрипта мы добавили показатели моделирования и график. Здесь мы использовали st.session_state, чтобы сохранить результат нашего расчета в сеансе. Каждый раз при повторном запуске ваш скрипт будет выполняться сверху вниз. Чтобы сохранять переменные между каждым повторным запуском, вы можете использовать st.session_state. Например, мы использовали st.session_state [pi], чтобы сохранить результаты наших вычислений в сеансе. См. Документацию.
Заключение
В заключение, если вы работаете в области, связанной с данными, очень важно иметь возможность продемонстрировать свои модели машинного обучения или, несомненно, анализ данных впечатляющим образом. Кроме того, вы можете использовать преимущества Интернета, чтобы показывать свои модели людям с разным опытом.
- Ни CSS, ни JS, ни HTML. Вы разрабатываете свое веб-приложение без каких-либо навыков работы с веб-интерфейсом. Конечно, было бы лучше обладать этими навыками, но иногда вы предпочитаете быстрее строить и тестировать свои модели, что заставляет вас жертвовать гибкостью.
- Управляйте потоком. Мы сохранили результат моделирования в состоянии сеанса, который представляет собой словарь для обмена вашими переменными между каждым запуском. Используя состояние сеанса, нет необходимости повторно запускать моделирование после изменения конфигурации графа. Мы просто отделили расчет от построения графика. Вы можете определить переменные сеанса и построить свою логику для управления потоком. Другой пример - подготовка различных сюжетов для выступления или урока. Выбор графика для отображения может помочь вам привлечь внимание аудитории.
