Оформляем красивые отчеты и приложения в Streamlit и запускаем в облака

Каждый исследователь, студент или преподаватель рано или поздно сталкивается с необходимостью создавать интерактивные и красивые отчеты, которые позже следует приложить к статье, сдать на проверку или поделиться со студентами. Все чаще в топовых ВУЗах приевшиеся методички заменяют на Jupiter ноутбуки, а возможность сварганить красивый отчет «на коленке» прельщает огромное количество студентов.

Выделим основные недостатки отчетов в Jupiter Notebook:

• Много кода. В большинстве отчетов важны таблицы, графики и выводы, а не куски кода, которые помогли эти данные получить и составляют, как правило, более половины отчета.

• Сложность в интерактивной демонстрации. Для полноценной работы Jupiter Notebook необходимо иметь приложение и интерпретатор питон (или онлайн сервис).

Streamlit

Это low-code фреймворк, созданные для исследователей, которые используют python. Благодаря встроенному набору элементов можно быстро накидать свой отчет или веб приложение, а главное поделиться им с другими, развернув его в облаке всего за пять минут!

Установка

Устанавливается streamlit через pip:

pip install streamlit

После установки можно запустить пример, введя в терминале команду:

streamlit

Когда приложение запустится, в терминале будет приветственное сообщение и адрес, причем окно в браузере, скорее всего, откроется самостоятельно.

На страничке мы видим ссылку на сайт и много других полезных ссылок, которые пригодятся во время создания своего приложения.

Создаем свой отчет

Все начитается с того, что нужно установить и импортировать streamlit

import streamlit as st

Я хочу сделать так, чтобы в одном проекте можно было переключаться между разными отчетами, которые будут представлять отдельные странички. Для этого используется виджет sidebar:

page = st.sidebar.selectbox("Выбрать страницу",                              ["Тяжелые хвосты распределений",                               "Iris Dataset"])

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

Чтобы переключать страницы, нужно лишь использовать условный оператор if:

    if page == "Тяжелые хвосты распределений":         st.header("""Демонстрация Fisher's Iris датасета""")     elif page == "Iris Dataset":       st.header("""Сгенерировать N случайных событий из распределения Фреше с функцией распределения:""")

Для формирования заголовка используется виджет st.header

Так же есть возможность использовать latex:

st.latex(r'''                 F(x) = exp(-(\gamma x)^{-1/\gamma}1\{x>0\})           ''')

Итак, код для отображения страницы «Тяжелые хвосты распределений»:

def main():     page = st.sidebar.selectbox("Выбрать страницу", ["Тяжелые хвосты распределений", "Iris Dataset"])      if page == "Тяжелые хвосты распределений":         st.header("""Сгенерировать N случайных событий из распределения Фреше с функцией распределения:""")         st.latex(r'''                 F(x) = exp(-(\gamma x)^{-1/\gamma}1\{x>0\})             ''')         st.text("Для получения результата:")         st.markdown("* Сгенерируем N нормально распределенных случайных величин $U_i$ [0,1] (нулевое среднее и единичная диспресия).")         st.markdown("* Вычислим N cлучайных величин с распределением Фреше по формуле:")         st.latex(r'''                         X_i=\dfrac{1}{\gamma}\left(-lnU_i)^{-\gamma}\right)                 ''')         mu, sigma = 0, 1  # mean and standard deviation         gamma = st.slider('Желаемая гамма', 0.25, 2.25, 0.5, 0.25)         N = st.number_input("Желаемое N", 100, 10000, 10000)         U = np.abs(np.random.normal(mu, sigma, N))         X = 1 / gamma * (-np.log(U)) ** (-gamma)         X2 = X[X < 20]         fig, ax = plt.subplots()         count, bins, ignored = plt.hist(X2, 100, density=True)         plt.plot(bins,                  np.exp(- (gamma * bins) ** (-1 / gamma)) * (1 / gamma) * (gamma * bins) ** (-1 / gamma - 1) * gamma,                  linewidth=2, color='r')         st.pyplot(fig)

Кэширование данных

Каждый раз, когда пользователь нажимает что-то в интерфейсе весь скрипт выполняется заново. Это не очень хорошо, если мы скачиваем какие-то датасеты и работаем с ML моделями. Специально для этого есть две аннотации:

• st.cache_data — используется для кеширования загружаемых датасетов.

• st.cache_resource — используется для ML моделей.

Так, чтобы загрузить известный датасет ирисов, напишем функцию с аннотацией st.cache_data:

@st.cache_data def load_data():         if not os.path.isfile("data/iris.csv"):         # Download the Iris Fisher dataset         url = "https://archive.ics.uci.edu/ml/machine-learning-databases/iris/iris.data"         response = requests.get(url)         data = response.text         # Save the dataset to a local file         with open("data/iris.csv", "w") as file:             file.write(data)     # Load the dataset into a pandas DataFrame     df = pd.read_csv("data/iris.csv", header=None,                      names=["sepal_length", "sepal_width", "petal_length", "petal_width", "class"])     return df

Я поместил датсет в папку data не спроста, она нам потом понадобиться.

Отобразим его на соответствующей странице, используя st.pyplot:

    elif page == "Iris Dataset":         st.header("""Демонстрация Fisher's Iris датасета""")         df = load_data()          # Plotting the dataset         fig, ax = plt.subplots()         plt.scatter(df['sepal_length'], df['sepal_width'], c='blue', label='Iris-setosa')         plt.scatter(df['sepal_length'], df['petal_width'], c='red', label='Iris-versicolor')         plt.scatter(df['sepal_length'], df['petal_length'], c='green', label='Iris-virginica')          plt.xlabel('sepal_length')         plt.ylabel('sepal_width')          plt.title('Iris Fisher Dataset')          plt.legend()         st.pyplot(fig)

Запуск приложения

Для запуска проекта можно рассмотреть два варианта:

1. Запустить командой streamlit run app.py, через параметр--server.port=8057 можно указать, какой порт будет слушать приложение.

   Не забываем в нашем файле указать точку входа:

   if __name__ == "__main__":     main()

2. Для любителей запускать всего через python main.py:

   Создадим отдельный файл main.py и обозначим точку входа, где пропишем, что нужно запустить и с каким портом:

   from streamlit.web.cli import main import sys  if __name__ == "__main__":     # Set prog_name so that the Streamlit server sees the same command line     # string whether streamlit is called directly or via `python -m streamlit`.     sys.argv = ["streamlit", "run", "app.py", ""]     sys.exit(main(prog_name="streamlit"))

В итоге получаем красивый отчет:

Разворачиваем в облаке

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

• Воспользоваться Streamlit Community Cloud — облако от создателей данного фреймворка.

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

• Разворачивание в облаке через пуш в GIT. Это такие сервисы, как Heroku и Amvera.

Amvera Cloud

1. Переходим на страничку входа и создаем аккаунт, если его ещё нет.

2. Нажимаем на кнопку «Создать» и вводим название проекта и тариф. Для большинтства проектов подойдет «Начальный»

   

3. На ПК переходим в папку с нашим проектом. Создаем там GIT репозиторий командой git init

4. На странице проекта находим инструкцию, как подключиться к удаленному репозиторию. Для этого нужно выполнить git remote add amvera <адрес удаленного репозитория>

5. Генерируем инструкцию для облака, как развернуть наше приложение:

   1. Переходим на страницу генератора инструкций, которая, кстати, тоже написана с помощью streamlit.

   2. Указываем, что мы используем python, обязательно иметь файл requirements.txt, где указаны все используемые библиотеки (в том числе и streamlit).

   3. Если локально запускали все через команду streamlit run app.py, то ставим галку на «укажу свою» и прописываем эту команду.

   4. Тут ещё есть поле «Введите mountpoint», где указывается, где будут храниться данные, которые не стираются после перезапуска или остановки проекта. Так, если вы собираете какую-то статистику или собираетесь хранить данные, то их слудует класть в отдельную папку, путь до которой указывается в этом поле. Я не хочу аждый раз при перезапуске проекта скачивать заново весь датесет, поэтому положил его в папку data и указал этот путь в конфигурации.

   5. Нажимаем на кнопку Generate YAML. Добавляем полученный файл amvera.yml в корень нашего проекта.

   6. 

6. Моя папка с проектом выглядит следующим образом (venv у вас может отсутствовать)

   

7. Заносим наши изменения в репозиторий, выполнив:

git add . git commit -m "Initial commit" git push amvera master

7. Ждем статуса «Успешно развернуто на странице проекта

   

8. Переходи по ссылке, указанной на этой же странице, у меня это https://streamlit-amvera-services.amvera.io и наслаждаемся нашим отчетом.

9. (Опционально) В разделе «Настройки» можно привязать свое доменное имя.

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