Рубрики
Без рубрики

Представление компонентов потока

Первоначально это появилось 14 июля 2020 года Эдриеном Трейлом. Нажмите здесь, чтобы увидеть исходный контент … Теги с питоном, машинным обучением, наукой данных, Show Dev.

Первоначально это появилось 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

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

  1. Он версирует, компоненты API, так что изменения в будущем не нарушают существующие компоненты.
  2. Это напоминает нам, что мы начинаем использовать 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”