Open2023/06/09にコメント追加6

streamlit compornent

(base) macpro:dev sharland$ cd streamlit/
(base) macpro:streamlit sharland$ git clone https://github.com/streamlit/component-template.git

実行結果

Cloning into 'component-template'...
remote: Enumerating objects: 738, done.
remote: Counting objects: 100% (362/362), done.
remote: Compressing objects: 100% (167/167), done.
remote: Total 738 (delta 240), reused 266 (delta 184), pack-reused 376
Receiving objects: 100% (738/738), 1.96 MiB | 13.10 MiB/s, done.
Resolving deltas: 100% (411/411), done.

(base) macpro:streamlit sharland$ cd template
(base) macpro:template sharland$ python3 -m venv ./venv
(base) macpro:template sharland$ . venv/bin/activate
(venv) (base) macpro:template sharland$ pip install --upgrade pip

実行結果

Collecting pip
  Using cached https://files.pythonhosted.org/packages/08/e3/57d4c24a050aa0bcca46b2920bff40847db79535dc78141eb83581a52eb8/pip-23.1.2-py3-none-any.whl
Installing collected packages: pip
  Found existing installation: pip 19.0.3
    Uninstalling pip-19.0.3:
      Successfully uninstalled pip-19.0.3
Successfully installed pip-23.1.2

(venv) (base) macpro:template sharland$ pip install streamlit

実行結果

Collecting streamlit
  Downloading streamlit-1.23.1-py2.py3-none-any.whl (8.9 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 8.9/8.9 MB 12.1 MB/s eta 0:00:00
Collecting altair<6,>=4.0 (from streamlit)
  Downloading altair-5.0.1-py3-none-any.whl (471 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 471.5/471.5 kB 11.2 MB/s eta 0:00:00
Collecting blinker<2,>=1.0.0 (from streamlit)
  Downloading blinker-1.6.2-py3-none-any.whl (13 kB)
Collecting cachetools<6,>=4.0 (from streamlit)
  Downloading cachetools-5.3.1-py3-none-any.whl (9.3 kB)
Collecting click<9,>=7.0 (from streamlit)
  Using cached click-8.1.3-py3-none-any.whl (96 kB)
Collecting importlib-metadata<7,>=1.4 (from streamlit)
  Using cached importlib_metadata-6.6.0-py3-none-any.whl (22 kB)
Collecting numpy<2,>=1 (from streamlit)
  Using cached numpy-1.21.6-cp37-cp37m-macosx_10_9_x86_64.whl (16.9 MB)
Collecting packaging<24,>=14.1 (from streamlit)
  Using cached packaging-23.1-py3-none-any.whl (48 kB)
Collecting pandas<3,>=0.25 (from streamlit)
  Using cached pandas-1.3.5-cp37-cp37m-macosx_10_9_x86_64.whl (11.0 MB)
Collecting pillow<10,>=6.2.0 (from streamlit)
  Downloading Pillow-9.5.0-cp37-cp37m-macosx_10_10_x86_64.whl (3.4 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 3.4/3.4 MB 13.1 MB/s eta 0:00:00
Collecting protobuf<5,>=3.20 (from streamlit)
  Downloading protobuf-4.23.2-cp37-abi3-macosx_10_9_universal2.whl (400 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 400.3/400.3 kB 10.0 MB/s eta 0:00:00
Collecting pyarrow>=4.0 (from streamlit)
  Downloading pyarrow-12.0.0-cp37-cp37m-macosx_10_14_x86_64.whl (24.7 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 24.7/24.7 MB 6.2 MB/s eta 0:00:00
Collecting pympler<2,>=0.9 (from streamlit)
  Downloading Pympler-1.0.1-py3-none-any.whl (164 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 164.8/164.8 kB 15.3 MB/s eta 0:00:00
Collecting python-dateutil<3,>=2 (from streamlit)
  Using cached python_dateutil-2.8.2-py2.py3-none-any.whl (247 kB)
Collecting requests<3,>=2.4 (from streamlit)
  Downloading requests-2.31.0-py3-none-any.whl (62 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 62.6/62.6 kB 7.2 MB/s eta 0:00:00
Collecting rich<14,>=10.11.0 (from streamlit)
  Downloading rich-13.4.1-py3-none-any.whl (239 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 239.4/239.4 kB 15.7 MB/s eta 0:00:00
Collecting tenacity<9,>=8.0.0 (from streamlit)
  Downloading tenacity-8.2.2-py3-none-any.whl (24 kB)
Collecting toml<2 (from streamlit)
  Using cached toml-0.10.2-py2.py3-none-any.whl (16 kB)
Collecting typing-extensions<5,>=4.0.1 (from streamlit)
  Downloading typing_extensions-4.6.3-py3-none-any.whl (31 kB)
Collecting tzlocal<5,>=1.1 (from streamlit)
  Downloading tzlocal-4.3-py3-none-any.whl (20 kB)
Collecting validators<1,>=0.2 (from streamlit)
  Downloading validators-0.20.0.tar.gz (30 kB)
  Installing build dependencies ... done
  Getting requirements to build wheel ... done
  Preparing metadata (pyproject.toml) ... done
Collecting gitpython!=3.1.19,<4,>=3 (from streamlit)
  Downloading GitPython-3.1.31-py3-none-any.whl (184 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 184.3/184.3 kB 14.7 MB/s eta 0:00:00
Collecting pydeck<1,>=0.1.dev5 (from streamlit)
  Downloading pydeck-0.8.1b0-py2.py3-none-any.whl (4.8 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 4.8/4.8 MB 11.6 MB/s eta 0:00:00
Collecting tornado<7,>=6.0.3 (from streamlit)
  Downloading tornado-6.2-cp37-abi3-macosx_10_9_x86_64.whl (419 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 419.7/419.7 kB 8.2 MB/s eta 0:00:00
Collecting jinja2 (from altair<6,>=4.0->streamlit)
  Downloading Jinja2-3.1.2-py3-none-any.whl (133 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 133.1/133.1 kB 11.6 MB/s eta 0:00:00
Collecting jsonschema>=3.0 (from altair<6,>=4.0->streamlit)
  Downloading jsonschema-4.17.3-py3-none-any.whl (90 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 90.4/90.4 kB 1.7 MB/s eta 0:00:00
Collecting toolz (from altair<6,>=4.0->streamlit)
  Downloading toolz-0.12.0-py3-none-any.whl (55 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 55.8/55.8 kB 6.1 MB/s eta 0:00:00
Collecting gitdb<5,>=4.0.1 (from gitpython!=3.1.19,<4,>=3->streamlit)
  Downloading gitdb-4.0.10-py3-none-any.whl (62 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 62.7/62.7 kB 5.4 MB/s eta 0:00:00
Collecting zipp>=0.5 (from importlib-metadata<7,>=1.4->streamlit)
  Using cached zipp-3.15.0-py3-none-any.whl (6.8 kB)
Collecting pytz>=2017.3 (from pandas<3,>=0.25->streamlit)
  Using cached pytz-2023.3-py2.py3-none-any.whl (502 kB)
Collecting six>=1.5 (from python-dateutil<3,>=2->streamlit)
  Using cached six-1.16.0-py2.py3-none-any.whl (11 kB)
Collecting charset-normalizer<4,>=2 (from requests<3,>=2.4->streamlit)
  Using cached charset_normalizer-3.1.0-cp37-cp37m-macosx_10_9_x86_64.whl (121 kB)
Collecting idna<4,>=2.5 (from requests<3,>=2.4->streamlit)
  Using cached idna-3.4-py3-none-any.whl (61 kB)
Collecting urllib3<3,>=1.21.1 (from requests<3,>=2.4->streamlit)
  Downloading urllib3-2.0.3-py3-none-any.whl (123 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 123.6/123.6 kB 9.8 MB/s eta 0:00:00
Collecting certifi>=2017.4.17 (from requests<3,>=2.4->streamlit)
  Downloading certifi-2023.5.7-py3-none-any.whl (156 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 157.0/157.0 kB 8.4 MB/s eta 0:00:00
Collecting markdown-it-py<3.0.0,>=2.2.0 (from rich<14,>=10.11.0->streamlit)
  Downloading markdown_it_py-2.2.0-py3-none-any.whl (84 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 84.5/84.5 kB 8.1 MB/s eta 0:00:00
Collecting pygments<3.0.0,>=2.13.0 (from rich<14,>=10.11.0->streamlit)
  Downloading Pygments-2.15.1-py3-none-any.whl (1.1 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1.1/1.1 MB 12.5 MB/s eta 0:00:00
Collecting pytz-deprecation-shim (from tzlocal<5,>=1.1->streamlit)
  Downloading pytz_deprecation_shim-0.1.0.post0-py2.py3-none-any.whl (15 kB)
Collecting backports.zoneinfo (from tzlocal<5,>=1.1->streamlit)
  Downloading backports.zoneinfo-0.2.1-cp37-cp37m-macosx_10_14_x86_64.whl (35 kB)
Collecting decorator>=3.4.0 (from validators<1,>=0.2->streamlit)
  Downloading decorator-5.1.1-py3-none-any.whl (9.1 kB)
Collecting smmap<6,>=3.0.1 (from gitdb<5,>=4.0.1->gitpython!=3.1.19,<4,>=3->streamlit)
  Downloading smmap-5.0.0-py3-none-any.whl (24 kB)
Collecting MarkupSafe>=2.0 (from jinja2->altair<6,>=4.0->streamlit)
  Downloading MarkupSafe-2.1.3-cp37-cp37m-macosx_10_9_x86_64.whl (13 kB)
Collecting attrs>=17.4.0 (from jsonschema>=3.0->altair<6,>=4.0->streamlit)
  Using cached attrs-23.1.0-py3-none-any.whl (61 kB)
Collecting importlib-resources>=1.4.0 (from jsonschema>=3.0->altair<6,>=4.0->streamlit)
  Downloading importlib_resources-5.12.0-py3-none-any.whl (36 kB)
Collecting pkgutil-resolve-name>=1.3.10 (from jsonschema>=3.0->altair<6,>=4.0->streamlit)
  Downloading pkgutil_resolve_name-1.3.10-py3-none-any.whl (4.7 kB)
Collecting pyrsistent!=0.17.0,!=0.17.1,!=0.17.2,>=0.14.0 (from jsonschema>=3.0->altair<6,>=4.0->streamlit)
  Downloading pyrsistent-0.19.3-cp37-cp37m-macosx_10_9_x86_64.whl (69 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 69.8/69.8 kB 6.1 MB/s eta 0:00:00
Collecting mdurl~=0.1 (from markdown-it-py<3.0.0,>=2.2.0->rich<14,>=10.11.0->streamlit)
  Downloading mdurl-0.1.2-py3-none-any.whl (10.0 kB)
Collecting tzdata (from pytz-deprecation-shim->tzlocal<5,>=1.1->streamlit)
  Downloading tzdata-2023.3-py2.py3-none-any.whl (341 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 341.8/341.8 kB 12.3 MB/s eta 0:00:00
Building wheels for collected packages: validators
  Building wheel for validators (pyproject.toml) ... done
  Created wheel for validators: filename=validators-0.20.0-py3-none-any.whl size=19579 sha256=f9c5c89908200dcad51a99c627c56f3d22fabc25a17be3bfe05c8aa7626b3d30
  Stored in directory: /Users/sharland/Library/Caches/pip/wheels/5f/55/ab/36a76989f7f88d9ca7b1f68da6d94252bb6a8d6ad4f18e04e9
Successfully built validators
Installing collected packages: pytz, zipp, urllib3, tzdata, typing-extensions, tornado, toolz, toml, tenacity, smmap, six, pyrsistent, pympler, pygments, protobuf, pkgutil-resolve-name, pillow, packaging, numpy, mdurl, MarkupSafe, idna, decorator, charset-normalizer, certifi, cachetools, blinker, backports.zoneinfo, validators, requests, pytz-deprecation-shim, python-dateutil, pyarrow, markdown-it-py, jinja2, importlib-resources, importlib-metadata, gitdb, tzlocal, rich, pydeck, pandas, gitpython, click, attrs, jsonschema, altair, streamlit
Successfully installed MarkupSafe-2.1.3 altair-5.0.1 attrs-23.1.0 backports.zoneinfo-0.2.1 blinker-1.6.2 cachetools-5.3.1 certifi-2023.5.7 charset-normalizer-3.1.0 click-8.1.3 decorator-5.1.1 gitdb-4.0.10 gitpython-3.1.31 idna-3.4 importlib-metadata-6.6.0 importlib-resources-5.12.0 jinja2-3.1.2 jsonschema-4.17.3 markdown-it-py-2.2.0 mdurl-0.1.2 numpy-1.21.6 packaging-23.1 pandas-1.3.5 pillow-9.5.0 pkgutil-resolve-name-1.3.10 protobuf-4.23.2 pyarrow-12.0.0 pydeck-0.8.1b0 pygments-2.15.1 pympler-1.0.1 pyrsistent-0.19.3 python-dateutil-2.8.2 pytz-2023.3 pytz-deprecation-shim-0.1.0.post0 requests-2.31.0 rich-13.4.1 six-1.16.0 smmap-5.0.0 streamlit-1.23.1 tenacity-8.2.2 toml-0.10.2 toolz-0.12.0 tornado-6.2 typing-extensions-4.6.3 tzdata-2023.3 tzlocal-4.3 urllib3-2.0.3 validators-0.20.0 zipp-3.15.0

(venv) (base) macpro:template sharland$ cd my_component/frontend/
(venv) (base) macpro:frontend sharland$ npm install
(venv) (base) macpro:frontend sharland$ npm run start

実行結果

Compiled successfully!

You can now view streamlit_component_template in the browser.

  Local:            http://localhost:3001
  On Your Network:  http://192.168.0.25:3001

Note that the development build is not optimized.
To create a production build, use npm run build.

別ターミナル
(base) macpro:~ sharland$ cd dev/streamlit/component-template/template
(base) macpro:template sharland$ . venv/bin/activate
(venv) (base) macpro:template sharland$ streamlit run my_component/__init__.py

実行結果

      Welcome to Streamlit!

      If you’d like to receive helpful onboarding emails, news, offers, promotions,
      and the occasional swag, please enter your email address below. Otherwise,
      leave this field blank.

      Email:  

  You can find our privacy policy at https://streamlit.io/privacy-policy

  Summary:
  - This open source library collects usage statistics.
  - We cannot see and do not store information contained inside Streamlit apps,
    such as text, charts, images, etc.
  - Telemetry data is stored in servers in the United States.
  - If you'd like to opt out, add the following to ~/.streamlit/config.toml,
    creating that file if necessary:

    [browser]
    gatherUsageStats = false

  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://192.168.0.25:8501

  For better performance, install the Watchdog module:

  $ xcode-select --install
  $ pip install watchdog

アプリ起動
フロントエンド：my_component/frontend/src/MyComponent.tsx
バックエンド：my_component/__init__.py

バックエンドmy_component/__init__.py

import streamlit.components.v1 as compontents
import streamlit as st

_my_component = compontents.declare_component(
        "my_component",
        url="http://localhost:3001"
)

st.title("Component Tutorial")

def my_component(name,greeting="Streamlit",key=None):
    return _my_component(name=name, greeting=greeting, default=0, key=key)

return_value = my_component("Hello")
st.write("Number of clicks", return_value)

フロントエンドmy_component/__init__.py


import {
  Streamlit,
  StreamlitComponentBase,
  withStreamlitConnection,
} from "streamlit-component-lib"
import React, { ReactNode } from "react"

interface State {
  numClicks: number
}

/**
 * This is a React-based component template. The `render()` function is called
 * automatically when your component should be re-rendered.
 */
class MyComponent extends StreamlitComponentBase<State> {
  public state = { numClicks: 0, isFocused: false }

  public render = (): ReactNode => {
    // Arguments that are passed to the plugin in Python are accessible
    // via `this.props.args`. Here, we access the "name" arg.
    const name = this.props.args["name"]
    const greeting=this.props.args["greeting"]

    // Streamlit sends us a theme object via props that we can use to ensure
    // that our component has visuals that match the active theme in a
    // streamlit app.
    const { theme } = this.props
    const style: React.CSSProperties = {}

    // Maintain compatibility with older versions of Streamlit that don't send
    // a theme object.
    if (theme) {
      // Use the theme object to style our button border. Alternatively, the
      // theme style is defined in CSS vars.
      const borderStyling = `1px solid ${
        this.state.isFocused ? theme.primaryColor : "gray"
      }`
      style.border = borderStyling
      style.outline = borderStyling
    }

    // Show a button and some text.
    // When the button is clicked, we'll increment our "numClicks" state
    // variable, and send its new value back to Streamlit, where it'll
    // be available to the Python program.
    return (
      <span>
        {greeting}, {name}! &nbsp;
        <button
          style={style}
          onClick={this.onClicked}
          disabled={this.props.disabled}
        >
          Click Me!
        </button>
      </span>
    )
  }

  /** Click handler for our "Click Me!" button. */
  private onClicked = (): void => {
    // Increment state.numClicks, and pass the new value back to
    // Streamlit via `Streamlit.setComponentValue`.
    this.setState(
      prevState => ({ numClicks: prevState.numClicks + 1 }),
      () => Streamlit.setComponentValue(this.state.numClicks)
    )
  }
}

// "withStreamlitConnection" is a wrapper function. It bootstraps the
// connection between your component and the Streamlit app, and handles
// passing arguments from Python -> Component.
//
// You don't need to edit withStreamlitConnection (but you're welcome to!).
export default withStreamlitConnection(MyComponent)

ブラウザ再読み込み：http://localhost:8501/

__init__.py

import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt

def 折れ線グラフを表示する():
    st.title('折れ線グラフ')
    # データフレームを作成
    df = pd.DataFrame(
        np.random.randn(30, 2),
        columns=['a', 'b']
    )

    # 折れ線グラフを表示
    st.line_chart(df)

    # データフレームを表示
    st.write(df)

def 棒グラフを表示する():
    st.title('棒グラフ')
    # データフレームを作成
    df = pd.DataFrame(
        np.random.randn(30, 2),
        columns=['a', 'b']
    )

    # 棒グラフを表示
    st.bar_chart(df)

def ヒストグラムを表示する():
    st.title('ヒストグラム')
    # 生成数を設定
    n = 500

    # データフレームを作成
    df = pd.DataFrame(
        np.random.randn(int(n), 3),
        columns=['a', 'b', 'c']
    )

    # ヒストグラムを作成
    fig, ax = plt.subplots()
    ax.hist(df)
    ax.set_facecolor("black")
    st.pyplot(fig)

def main():
    折れ線グラフを表示する()
    棒グラフを表示する()
    ヒストグラムを表示する()

main()

アプリ稼働サイト