Streamlit 101: подробное введение

Погрузитесь в Streamlit с данными Airbnb NYC

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

Лучшее в Streamlit - это то, что он не требует каких-либо знаний в области веб-разработки. Если вы знаете Python, готово!

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

Почему Streamlit невероятно крутой

Одним предложением: это дает вам невероятно быстрый, итеративный и интерактивный цикл разработки.

Разделите экран так, чтобы инструмент для редактирования кода находился на одной половине, а ваш браузер - на другой, отредактируйте код и мгновенно обновите свое приложение! Моя любимая часть Streamlit - это то, как - за несколько часов - он позволяет перейти от Jupyter Notebook к элегантному веб-приложению, достойному представления клиенту.

Настроить

Шаги установки:

$ pip install streamlit
$ streamlit hello

Импорт:

import pandas as pd
import streamlit as st
import plotly.express as px

Чтобы запустить приложение Streamlit:

$ streamlit run app.py

Получение данных о объявлениях Airbnb в Нью-Йорке

Airbnb официально не публикует свои данные. Другая группа под названием Inside Airbnb периодически публикует объявления Airbnb и просматривает данные.

@st.cache
def get_data():
    url = "http://data.insideairbnb.com/united-states/ny/new-york-city/2019-09-12/visualisations/listings.csv"
    return pd.read_csv(url)
df = get_data()

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

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

За кулисами Streamlit отслеживает имя функции, код в теле функции и входные аргументы, которые мы передаем в вызове функции. При первом вызове он сохраняет возвращаемое значение функции в локальном кеше. При последующих вызовах функции с теми же аргументами Streamlit возвращает результат из локального кеша.

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

Начните с заголовка (и цитаты)

st.title("Streamlit 101: An in-depth introduction")
st.markdown("Welcome to this in-depth introduction to [...].")
st.header("Customary quote")
st.markdown("> I just love to go home, no matter where I am [...]")

Приведенный выше код отображает следующее.

St.title подходит для основного названия. Для заголовков разделов используйте st.header или st.subheader.

St.markdown отображает любую строку, написанную с использованием Markdown со вкусом Github. Он также поддерживает HTML, но Streamlit не рекомендует его разрешать из-за потенциальных проблем безопасности пользователя.

Краткий обзор данных

Это первое, что мы обычно делаем, начиная исследовательский анализ. St.dataframe отображает фреймы данных pandas.

st.dataframe(df.head())

Мне нравится, как он позволяет сортировать фрейм данных при нажатии любого заголовка столбца (обратите внимание на маленький шеврон в заголовке host_name).

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

Он также поддерживает стилизованные фреймы данных.

Блоки кода

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

st.code("""
@st.cache
def get_data():
    url = "http://data.insideairbnb.com/[...]"
    return pd.read_csv(url)
""", language="python")

В качестве альтернативы, использование блока with st.echo выполняет код внутри него, а также отображает его как раздел кода в приложении.

Самые дорогие объявления на Airbnb в Нью-Йорке

Где находится самая дорогая недвижимость Airbnb?

На карте

St.map отображает местоположения на карте без необходимости писать одну строку стандартного кода для подготовки объекта карты. Единственное требование - фрейм данных должен содержать столбцы с именами широта / широта или долгота / долгота.

Неудивительно, что на острове Манхэттен самая высокая концентрация дорогих Airbnbs. Некоторые разбросаны по Бруклину. Самый большой ценник - 10000 долларов.

St.deck_gl_chart позволяет использовать больше параметров для создания более интересных и настраиваемых карт.

Выбор подмножества столбцов

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

cols = ["name", "host_name", "neighbourhood", "room_type", "price"]
st_ms = st.multiselect("Columns", df.columns.tolist(), default=cols)

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

Средняя цена по типу номера

Какие типы номеров в среднем самые дорогие?

В статической таблице

St.table отображает статическую таблицу. Однако вы не можете отсортировать его, щелкнув заголовок столбца.

st.table(df.groupby("room_type").price.mean().reset_index()\
.round(2).sort_values("price", ascending=False)\
.assign(avg_price=lambda x: x.pop("price").apply(lambda y: "%.2f" % y)))

На каких хостах указано больше всего объектов недвижимости?

Sonder (Нью-Йорк) занимает первое место с 387 объектами недвижимости. Blueground занимает второе место с 240 объявлениями. Ниже приведены случайно выбранные листинги из двух, представленных как JSON с использованием st.json.

Streamlit отображает полностью интерактивные разделы JSON с поддержкой свертывания / развертывания объектов и массивов, а также функции копирования в буфер обмена.

Каково распределение цен на недвижимость?

Мы отображаем гистограмму цен на недвижимость в виде графического графика с помощью st.plotly_chart.

Боковая панель и слайдер диапазона цен

Мы используем st.slider, чтобы предоставить слайдер, который позволяет выбрать произвольный диапазон для гистограммы. Убираем его в сайдбар.

values = st.sidebar.slider(“Price range”, float(df.price.min()), 1000., (50., 300.))
f = px.histogram(df.query(f”price.between{values}”), x=”price”, nbins=15, title=”Price distribution”)
f.update_xaxes(title=”Price”)
f.update_yaxes(title=”No. of listings”)
st.plotly_chart(f)

Самый высокий столбец соответствует ценовому диапазону $ 60–79, в котором имеется 7229 позиций.

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

Распределение доступности в различных районах

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

Используя st.radio, мы показываем список групп соседства на выбор. По умолчанию мы исключаем объявления с ценой ≥ 200 долларов и устанавливаем флажок Включить дорогие объявления с помощью st.checkbox.

St.write - это своего рода зонтичная функция, которая принимает строки, фреймы данных, словари, графики, карты и так далее (полный список в документации). Он позволяет передавать несколько аргументов, и его поведение зависит от их типов.

st.write("Using a radio button restricts selection to only one option at a time.")
neighborhood = st.radio("Neighborhood", df.neighbourhood_group.unique())
show_exp = st.checkbox("Include expensive listings")

Самый низкий средний показатель доступности в Бруклине составляет 169 дней. На Статен-Айленде (226) самый высокий средний показатель доступности. Если мы включим дорогие объявления (цена ›= 200 долларов), то получится 171 и 230 соответственно.

Примечание. Есть 18431 запись с availability_365 0 (ноль), которые я проигнорировал.

Средняя доступность по районам

St.pyplot отображает графики, построенные с использованием matplotlib, как показано ниже.

df.query("availability_365>0")\
.groupby("neighbourhood_group")\
.availability_365.mean()\
.plot.bar(rot=0)\
.set(title="Average availability by neighborhood group",
xlabel="Neighborhood group", ylabel="Avg. availability (in no. of days)")
st.pyplot()

Количество отзывов

Мы хотим просматривать свойства с количеством отзывов, попадающих в диапазон, который мы можем настроить.

На боковой панели мы предоставляем селектор числового диапазона, используя st.number_input. Если minimum ›maximum, мы выводим сообщение об ошибке с помощью st.error .

minimum = st.sidebar.number_input("Minimum", min_value=0)
maximum = st.sidebar.number_input("Maximum", min_value=0, value=5)
if minimum > maximum:
    st.error("Please enter a valid range")
else:
    df.query("@minimum<=number_of_reviews<=@maximum")

486 - это максимальное количество отзывов. У двух списков столько отзывов. Оба находятся в районе Ист-Элмхерст и представляют собой отдельные комнаты по цене 65 и 45 долларов. Как правило, объявления с ›400 отзывами стоят ниже 100 долларов. Некоторые из них стоят от 100 до 200 долларов, и только один стоит выше 200 долларов.

Изображения и выпадающие списки

Используйте st.image для отображения изображений кошек, щенков, графиков важности объектов, видеокадров с тегами и т. Д.

А теперь немного повеселимся.

pics = {
    "Cat": "https://cdn.pixabay.com/photo/2016/09/24/22/20/cat-1692702_960_720.jpg",
    "Puppy": "https://cdn.pixabay.com/photo/2019/03/15/19/19/puppy-4057786_960_720.jpg",
    "Sci-fi city": "https://storage.needpix.com/rsynced_images/science-fiction-2971848_1280.jpg"
}
pic = st.selectbox("Picture choices", list(pics.keys()), 0)
st.image(pics[pic], use_column_width=True, caption=pics[pic])

Магия

Обратите внимание, как в разделе Количество отзывов выше мы написали df.query("@minimum<=number_of_reviews<=@maximum") в отдельной строке, не заключая ее в вызов st.dataframe. При этом фрейм данных по-прежнему рендерится, потому что Streamlit обнаруживает переменную или литерал в своей собственной строке и использует st.write для ее рендеринга.

Заключение

Мы рассмотрели интерактивные виджеты, фреймы данных, таблицы, изображения, Markdown, рендеринг графика, карты и текстовое содержимое. Streamlit позволяет изменять существующие элементы и показывать прогресс, которые мы не рассмотрели в этом руководстве. Например, вы можете добавить строки в существующую таблицу или добавить новые данные в диаграмму. Вы также можете показать индикатор выполнения для длительно выполняющихся процессов.

Поздравляем, вы готовы приступить к созданию собственных приложений Streamlit.

Время веселиться!

Когда вы запускаете приложение, созданное для этого руководства, нажмите кнопку Celebrate!, отображаемую приведенным ниже кодом.

st.markdown("## Party time!")
st.write("Yay! You're done with this tutorial of Streamlit. Click below to celebrate.")
btn = st.button("Celebrate!")
if btn:
    st.balloons()

Что дальше?

Моя следующая статья будет о моем решении, завоевавшем серебряную медаль (35 место / лучшие 4%), в конкурсе по классификации типов торговых поездок в Walmart на Kaggle.

Ссылки и ссылки