Первоначально это появилось 14 июля 2020 года Эдриеном Трейлом. Нажмите здесь, чтобы увидеть исходный контент .
За десять месяцев с момента выхода Streamlit, сообщество создало более 250 000 приложений для всего, от Анализ футбольных матчей к Измерение органоидов и из COVID-19 Отслеживание к Ноль-выстрел Классификация темы Анкет Вдохновленный вашим творчеством, мы добавили Загрузчики файлов , цветовые сборщики , Дата диапазоны и другие функции. Но по мере того, как сложность служения сообществу росла, мы поняли, что нам нужен более масштабируемый способ выращивания функциональности Streamlit. Итак, мы обращаемся к лучшему источнику идей Streamlit: вы!
Сегодня мы рады объявить Компоненты потока, Кульминация многомесячного проекта, позволяющий сообществу по стрижкам создавать и делиться кусочками функциональности. Начиная с версии 0.63, вы можете нажать на компонентные экосистемы React, Vue и других структур. Создайте новые виджеты с пользовательскими стилями и поведением или добавьте новые визуализации и типы диаграмм. Возможности безграничны!
Галерея компонентов потока
Первое, что вы должны сделать, это проверить Галерея компонентов Streamlit Чтобы увидеть, что другие создали и поделились.
Каждый компонент может быть установлен только с одной строкой кода:
pip install some_cool_component
Если вы не найдете компонент, который работает для вас, вы можете сделать свой собственный!
Создание собственных компонентов
Streamlit имеет уникальный, функциональный стиль, который позволяет создавать богатый, интерактивный опыт в очень немногих строках кода. Например, давайте посмотрим это простое приложение для потоковой связи:
import streamlit as st
x = st.slider('x')st.markdown(f'`{x}` squared is `{x * x}`')
Глядя на этот код, вы можете увидеть, что вызовы потоковой связи бывают в двух вкусах: Статические компоненты как St.markdown
без сохранения состояния и отправляют только данные к Браузер, тогда как двунаправленные компоненты как St.slider
иметь внутреннее состояние и отправить данные назад от браузер.
Наша задача состояла в том, чтобы предоставить API, который охватывает функциональный стиль Streamlit, одновременно захватывая эти козырьки использования, насколько это возможно. Несколько месяцев назад два удивительных инженера по уходу, Тим Конклинг и Хенрих Кантани, решили этот вызов и разработали супер элегантное решение. Результат – новый Streamlit.components.v1
пакет, который состоит из трех функций. Для статических компонентов мы добавили:
-
html (...)
, который позволяет создавать компоненты из HTML, JavaScript и CSS -
iframe (...)
, который позволяет внедрять внешние сайты
Для двунаправленных компонентов мы добавили:
-
declare_component (...)
, что позволяет вам создавать интерактивные виджеты, которые двунаправленно общаются между потоковым и браузером.
Давайте погрузимся в то, как это работает!
Статические компоненты
Начнем с простого Статический компонент внедрить фрагменты кода под названием GitHub Gists в вашем приложении. В идеале, добавление компонента должно быть просто одним вызовом функции:
# Render a gist github_gist('tc87', '9382eafdb6eebde0bca0c33080d54b58')
что сделало бы такую суть:
Чтобы создать такой компонент, мы начинаем с импорта библиотеки компонентов Streamlit:
import streamlit.components.v1 as components
Это несколько словесное заявление импорта служит двум целям:
- Он версирует, компоненты API, так что изменения в будущем не нарушают существующие компоненты.
- Это напоминает нам, что мы начинаем использовать Deep Magic, которую мы должны скрывать от пользователя.
Теперь давайте воспользуемся html (...)
Метод для обслуживания суть:
def github_gist(gist_creator, gist_id, height=600, scrolling=True): components.html( f""" """, height=height, scrolling=scrolling, )
Этот подход имеет несколько потрясающих свойств. Во -первых, это действительно просто и функционально. На самом деле, этот шаблон позволяет вам скрывать уродливый HTML и обернуть его в красивый, питонический вызов функции, github_gist (...)
. Вы можете обернуть код в функцию и повторно использовать его на протяжении всего проекта. (Еще лучше, поместите его в упаковку и поделитесь им с сообществом в галерее.) Во-вторых, обратите внимание, что мы можем добавить произвольный HTML в этот компонент — div
S, Span
S и да, Скрипт
S! Мы можем сделать это безопасно, потому что компонент находится в песочнице в iframe
который позволяет нам включать внешние сценарии, не беспокоясь о проблемах безопасности.
Получить виджет с ним!
Что если вы хотите создать Stateful двунаправленный компонент Это передает информацию обратно в Python из браузера, или, другими словами, A виджет ? Ты тоже можешь это сделать! Например, давайте создадим встречный компонент:
count = counter(name="Fanilo")st.write('The count is', count)
Что создает это:
Обратите внимание, что этот код следует уникальному функциональному стилю Streamlit и захватывает счетчик Государство встроено в компонент. Как мы это достигли? К счастью, один вызов функции, declare_component
, выполняет всю работу, чтобы обеспечить двунаправленную связь с потоковой личкой.
# Declare a simple counter component.import streamlit.components.v1 as componentscounter = components.declare_component("counter", path=BUILD_PATH)
Хороший! Под капюшоном, Build_path
указывает на компонент, построенный с использованием React, Vue или любой технологии, которая вам нравится. Для этого примера мы решили использовать React и TypeScript, давая нам эту функцию рендеринга:
public render = (): ReactNode => {
return (
Hello, {this.props.args["name"]}!
)
}
И этот обратный вызов:
private onClicked = (): void => { this.setState( prevState => ({ numClicks: prevState.numClicks + 1 }), () => Streamlit.setComponentValue(this.state.numClicks) ) }
Донезо! Теперь вы создали простой, состоящий компонент, который «чувствует себя как React» на веб -сайте, и «чувствует себя как стрижка» на стороне Python. Информация передается обратно в Python, используя Streamlit.setComponentValue (...)
. Поскольку в этом случае мы используем React, состояние компонента хранится в this.state
Анкет Более подробную информацию об этом примере см. В нашем Шаблон компонента Анкет
Аккуратное преимущество этой архитектуры заключается в том, что вы не ограничиваете реагирование. Вы можете использовать любой язык или структуру, которые компилируются для Интернета. Вот тот же счетчик -компонент написано в Clojurescript.
(defonce counter (atom 0)) (defn increment-counter [] (swap! counter inc) (send-message-to-streamlit :set-component-value {:value @counter})) (defn app [] [:button {:on-click increment-counter} "Click Me!"]
Еще одна классная особенность этого API заключается в том, что вы можете делать горячую переработку, когда вы развиваете свой компонент, как это:
components.declare_component(name, url="http://localhost:3001")
Здесь URL
Параметр позволяет указать сервер Dev для компонента создан с [NPM Run Start] (https://github.com/streamlit/component-template#quickstart)
Анкет
То, что мы показали вам до сих пор, просто царапает поверхность. Для получения более подробной информации Пожалуйста, проверьте нашу документацию Анкет
Обмен с миром
Вы создали что -то в целом полезное для сообщества Streamlit? Конечно, вы могли бы сохранить эту сверхдержаву для себя, но было бы еще круче поделиться ею! Получите отзыв и похвалу сообщества. 😇 Вы можете легко обернуть свой компонент в пакет PYPI и Отправить его в нашу галерею, следуя этим инструкциям Анкет
Попробуйте и дайте нам знать, что вы думаете!
Мы рады разблокировать для сообщества новый способ подключения функциональности и игры в потоковую связь. Компоненты Streamlit позволяют написать простые расширения HTML или нажимать на всю экосистему, предоставленную React, Vue и другими рамками. Ваши отзывы стимулируют инновации в стриме. Пожалуйста, скажите нам, что вы думаете и что вы хотели бы дальше. Покажите свои блестящие новые компоненты и поделитесь ими с миром. Мы не можем дождаться, чтобы увидеть, что вы строите! 🎈
Особая благодарность Фанило Андрианасоло, Даниэлю Хазизу, Синоду и всему бета -сообществу компонентов, которые помогли уточнить эту архитектуру и вдохновлять нас своими отзывами и идеями. Также спасибо TC Ricks, Аманде Келли, Thiago Teixeira, Beverly Treuille, Regan Carey и Cullan Carey за их вклад в эту статью.
Оригинал: “https://dev.to/tc87/introducing-streamlit-components-31e0”