В этой статье мы познакомимся с модулем Streamlit-extras, который может легко придать особый вид нашим приложениям Streamlit с наименьшим возможным объемом кода.
- Что такое модуль streamlit-extras?
- Создание простого веб-приложения Streamlit
- Добавление вертикального пространства в наше веб-приложение
- Добавление аннотированных строк в наше веб-приложение
- Добавьте кнопку «Купить кофе» в наше веб-приложение
- Добавьте интерактивную карточку в свое веб-приложение
- Добавление фильтра в наш DataFrame
- Добавление привязок клавиатуры (нажатие определенной кнопки на клавиатуре что-то сделает)
- Добавьте смайлики дождя в WebApp
- Добавьте список дел с флажком
Что такое модуль streamlit-extras?
Streamlit-extras — это специальный модуль, основанный на традиционном модуле Streamlit. Он использует возможности модуля Streamlit и добавляет к нему некоторые «дополнительные» функции. Требуется помощь некоторых базовых HTML, CSS и JS, но разработчикам просто нужно написать код Python, чтобы использовать все его функции. Сегодня мы обсудим некоторые из его наиболее полезных функций.
Требуемые модули
Здесь мы будем использовать два модуля: streamlit и streamlit-extras. Чтобы установить их оба с помощью pip, напишите в терминале следующую команду.
pip install streamlit
pip install streamlit-extras
Создание простого веб-приложения Streamlit
Python3
import
streamlit as stm
stm.set_page_config(page_title
=
"This is a Simple Streamlit WebApp"
)
stm.title(
"This is the Home Page Geeks."
)
stm.text(
"Geeks Home Page"
)
Во-первых, мы импортируем модуль streamlit с псевдонимом stm, затем даем заголовок страницы, используя метод set_page_config() модуля streamlit, пользователь может указать любой заголовок страницы, который он хочет. Имя будет отображаться на вкладке «Панель заголовка» вверху. Затем, используя метод title(), чтобы дать заголовок тексту, который мы напишем впоследствии. Затем добавьте простой текст с помощью метода text().
Вывод:
Добавление вертикального пространства в наше веб-приложение
Теперь мы добавим n вертикальных пробелов в наше веб-приложение, используя функцию add_vertical_space().
Python3
import
streamlit as stm
from
streamlit_extras
import
add_vertical_space as avs
stm.set_page_config(page_title
=
"This is a Simple Streamlit WebApp"
)
stm.title(
"This is the Home Page Geeks."
)
stm.text(
"Geeks Home Page"
)
# Text before putting space
stm.write(
"The text after which we will put spaces"
)
# Putting 5 vertical spaces
avs.add_vertical_space(
5
)
# Text after the 5th space.
stm.write(
"The text after putting spaces"
)
Здесь мы впервые используем модуль streamlit_extras для импорта класса add_vertical_space с использованием псевдонима avs, который мы затем используем для вызова функции add_vertical_space() (имя класса и функции совпадают, поэтому мы должны написать их дважды. ) Передача значения 5 означает, что нам нужно 5 вертикальных пробелов. Написание текста до и после пробела, чтобы показать, как он выглядит и сколько места он дает.
Вывод:
Добавление аннотированных строк в наше веб-приложение
Что такое аннотации?
Аннотация — это примечание или комментарий, который добавляется к тексту, чтобы предложить комментарий или критику определенного отрывка. Аннотацию также можно использовать для описания процесса добавления аннотаций. К анализируемым научным статьям или литературным произведениям часто добавляются аннотации.
Python3
import
streamlit as stm
from
streamlit_extras
import
add_vertical_space as avs
import
annotated_text as ant
from
annotated_text
import
annotation
stm.set_page_config(page_title
=
"This is a Simple Streamlit WebApp"
)
stm.title(
"This is the Home Page Geeks."
)
stm.text(
"Geeks Home Page"
)
# Vertical Space
stm.write(
"The text after which we will put spaces"
)
avs.add_vertical_space(
5
)
stm.write(
"The text after putting spaces"
)
# Annotated Text
ant.annotated_text(
"Hey"
,
annotation(
"GeeksforGeeks"
, color
=
'#07a631'
),
(
"is"
,
"the"
,
'blue'
),
# Text is - 'is','the',
# the color of them is 'blue',
# we don't need to use color
# kwarg here like annotation
# function below to give color.
# We can also provide Hex values of colors as well as names
annotation(
"BEST"
, border
=
'3px groove yellow'
),
annotation(
"for"
,
"EVERYTHING"
, color
=
'#f7f8fa'
)
)
Здесь мы будем использовать модуль annotated_text, который автоматически устанавливается вместе с streamlit-extras, поэтому его не нужно устанавливать повторно. Просто импортируйте его и функцию аннотации того же модуля.
Затем вызовите метод annotated_text(), передав его параметры. Теперь аннотированный текст может принимать как строку, так и функцию annotation() в качестве параметра.
- Обычный текст— если внутри annotated_text() передается обычный текст, нам нужно передать все возможные стили, которые мы хотим применить к этому конкретному тексту, и этот стиль будет применен ко всему текстовому разделу, который мы напишем непосредственно внутри annotated_text()..
- annotation () —теперь, если мы хотим предоставить разные аннотации к определенным частям текстов, мы передадим их внутри функции annotation () и поместим разные стили по своему усмотрению. Эти стили не зависят от внешнего стиля, который мы можем предоставить, и не повлияют на него.
Вывод:
Добавьте кнопку «Купить кофе» в наше веб-приложение
В основном стримеры или создатели контента для Youtube используют это на своих блогах. Мы также можем разместить кнопку «Купить кофе » с помощью Streamlit-extras в очень коротком коде.
Python3
import
streamlit as stm
from
streamlit_extras.buy_me_a_coffee
import
button
stm.set_page_config(page_title
=
"This is a Simple Streamlit WebApp"
)
stm.title(
"This is the Home Page Geeks."
)
stm.text(
"Geeks Home Page"
)
button(username
=
"Geeks"
, floating
=
False
, width
=
250
)
Мы импортируем метод кнопки функции buy_me_a_coffee, который является частью модуля streamlit-extras. Затем мы просто вызовем метод кнопки, передав 3 параметра —
- имя пользователя— это параметр, в котором мы можем передать URL-адрес определенного веб-сайта или блога, на который нас приведет кнопка. Мы также можем предоставить некоторые имена пользователей, которые зарегистрированы на веб-сайте buymeacoffee, нажатие этой кнопки перенаправит нас туда.
- float —принимает логические значения, True или False. Если это правда, то эта кнопка будет внизу справа, если нет, то сразу после последнего элемента, который мы добавили с помощью Streamlit или чего-то еще.
- width —определяет ширину кнопки. Держите его выше 200, иначе весь текст » Купи мне кофе » не будет виден.
Вывод:
Добавьте интерактивную карточку в свое веб-приложение
Интерактивные карты — это гипермедиа, в которые можно встроить URL-адрес или что-то еще, и щелчок по этой карте перенаправит пользователя на любой веб-сайт или что-то еще. Мы можем добавить такую карту в наше веб-приложение, используя streamlit-extras.
Для этого мы будем использовать модуль streamlit_card, который также загружается вместе с модулем streamlit_extras, поэтому его не нужно устанавливать отдельно.
Python3
import
streamlit as stm
from
streamlit_card
import
card
stm.set_page_config(page_title
=
"This is a Simple Streamlit WebApp"
)
stm.title(
"This is the Home Page Geeks."
)
stm.text(
"Geeks Home Page"
)
# Card
card(
title
=
"Hello Geeks!"
,
text
=
"Click this card to redirect to GeeksforGeeks"
,
image
=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
,
url
=
"https://www.geeksforgeeks.org/"
,
)
Вывод :
Добавление фильтра в наш DataFrame
Это одна из самых полезных функций этого модуля. Эта функция dataframe_explorer позволяет нам добавлять фильтры к кадрам данных, которые мы добавим в наше потоковое веб-приложение.
Python3
import
streamlit as stm
from
streamlit_extras.dataframe_explorer
import
dataframe_explorer
import
pandas as pd
stm.set_page_config(page_title
=
"This is a Simple Streamlit WebApp"
)
stm.title(
"This is the Home Page Geeks."
)
stm.text(
"Geeks Home Page"
)
df
=
pd.read_csv(
'iris.csv'
)
filtered_df
=
dataframe_explorer(df)
stm.dataframe(filtered_df, use_container_width
=
True
)
Просто передайте кадр данных, который мы хотим добавить в веб-приложение Streamlit, в качестве параметра функции dataframe_explorer(). Затем добавьте кадр данных в наше потоковое веб-приложение, используя метод.dataframe(). параметр use_container_width используется для установки ширины фрейма данных на ширину родительского контейнера, если он равен True. Аргумент ширины заменяется этим. Для поддержки этого аргумента можно использовать только ключевое слово.
Вывод:.
Добавление привязок клавиатуры (нажатие определенной кнопки на клавиатуре что-то сделает)
Нажатие определенной клавиши на клавиатуре перенаправит нас на веб-сайт. Мы должны передать ключ как параметр, который пользователь должен нажать, чтобы попасть на веб-сайт. Для этого мы будем использовать два подмодуля библиотеки streamlit-extras, keyboard_url и keyboard_text.
Python3
import
streamlit as stm
from
streamlit_extras.keyboard_url
import
keyboard_to_url
from
streamlit_extras.keyboard_text
import
key
keyboard_to_url(key
=
"G"
, url
=
"https://www.geeksforgeeks.org/"
)
stm.write(
f
"""Now hit {key("G", False)} on your keyboard...!"""
,
unsafe_allow_html
=
True
,
)
# keeping it True after G will print G on screen, False will not show
Сначала мы импортируем функции keyboard_to_url и key из подмодулей keyboard_url и keyboard_text библиотеки streamlit_extras.
Вывод:
Добавьте смайлики дождя в WebApp
Мы можем дождаться определенных смайликов в нашем веб-приложении, используя этот подмодуль let_it_rain из streamlit_extras.
Python3
import
streamlit as stm
from
streamlit_extras.let_it_rain
import
rain
stm.set_page_config(page_title
=
"This is a Simple Streamlit WebApp"
)
stm.title(
"This is the Home Page Geeks."
)
stm.text(
"Geeks Home Page"
)
# Raining Emoji
rain(
emoji
=
"<copy paste an emoji from any site like emojipedia or iemoji>"
,
font_size
=
40
,
# the size of emoji
falling_speed
=
3
,
# speed of raining
animation_length
=
"infinite"
,
# for how much time the animation will happen
)
Мы импортируем функцию дождя из класса let_it_rain модуля streamlit_extras и передаем необходимые параметры.
Если пользователь хочет обрушить определенный текст, он также может передать текст в качестве значения параметра emoji функции дождя.
Вывод:
Добавьте список дел с флажком
Добавление списка дел стало очень простым благодаря этой функции Streamlit-Extras. Для этого мы будем использовать класс stodo модуля streamlit_extras, из которого мы импортируем функцию to_do и добавим задачи, используя метод write() модуля streamlit.
Python3
import
streamlit as stm
from
streamlit_extras.stodo
import
to_do
stm.set_page_config(page_title
=
"This is a Simple Streamlit WebApp"
)
stm.title(
"This is the Home Page Geeks."
)
stm.text(
"Geeks Home Page"
)
to_do(
[(stm.write, "<may
or
may
not
add emoji
or
\
shortcode here> Get Up Early")],
"coffee"
,
)
to_do(
[(stm.write, "<may
or
may
not
add emoji
or
shortcode \
here> Eat a healthy Breakfast")],
"pancakes"
,
)
to_do(
[(stm.write, ":computer: Start solving\
Problems on GeeksforGeeks!")],
"work"
,
)
Внутри to_do мы обычно используем метод write() для передачи текста, который хотим видеть, пользователь может добавить или не добавить несколько смайликов спереди, чтобы он выглядел лучше, или шорткод для смайликов. Как и в предыдущем случае, :computer: — это шорткод для смайлика ноутбука, после добавления которого в нашем потоковом веб-приложении он изменится на смайлик ноутбука..
Вывод: