the app runner Streamlit Season✨

Event

みんなのPython勉強会 #72

Presented

2021/08/11🎋 nikkie

❓ Question（Slidoへ🙏）

https://bit.ly/stapy72question

../_images/202108_stapy_slido_qrcode.png

❓ Question：Streamlitを

  • 初めて聞いた

  • 聞いたことある

  • 触ったことある

  • 使っている

このトーク：the app runner Streamlit Season✨

  • Streamlit初めて聞いた方向け

  • デモ & ハンズオンでStreamlitを 体験

  • 目標：Streamlitの概要を掴む

話すこと

  • Streamlitの特徴3点（3つの原則として紹介）

  • おまけ：Streamlitの限界

話さないこと

  • 網羅的な説明はしません

  • 代わりに、網羅している学習リソースを紹介します

一緒に体験するために pip install streamlit お願いします！

環境構築は 自身の慣れた方法で 行ってください（ pipenv など）

お前の環境、どうなってんのよ

  • Python 3.8.6

    • Requires: Python >=3.6 なので 3.9 でも動作するかも（未検証）

  • Streamlit, version 0.86.0

    • 2021/08/06 リリース版🚀

お前、誰よ

  • Python大好き にっきー （ @ftnext / @ftnext）

  • Python歴3年半

  • 仕事で楽しく書いています（データサイエンティストにしてNLPer）

お前、誰よ（承前）

  • みんなのPython勉強会4代目LT王子🤴・スタッフ

  • PyCon JP 2021 座長🇨🇭

お前、誰よ（趣味）

TODO Question：Streamlitを の確認！

みなさん、進捗どうですか？ pip install streamlit

❓ Question（再度Slidoへ🙏）

https://bit.ly/stapy72question

../_images/202108_stapy_slido_qrcode.png

❓ Question：PyCon JP 2021に

  • 参加予定

  • しないかな

  • ってなんすか？

PyCon JPって、何よ

  • Py thon Con ference JP

  • 日本最大のPython祭り

PyCon JP 2021 10/15(金)・16(土)開催

https://2021.pycon.jp/

PyCon JP 2021 10/15(金)・16(土)開催

TODO Question：PyCon JP 2021に の確認！

Python学び始めでも、うどんと海ー苔ー（Don't worry）

Djangoのカンファレンス（7月開催）公式さんの言

完了しましたか？ pip install streamlit

いよいよ本題：Streamlitとは

  • Pythonのライブラリ PyPIリンク

  • 機械学習分野で プロトタイピングツール として注目

百聞は一見に如かず

かっこいい動画🆒

  • Pythonを書くだけ

  • インタラクティブに動くWebアプリ

  • 簡単にデプロイできる

なぜStreamlitを作ったか？

機械学習を組み込んだツール作成

  • API(Flask)、HTML、JavaScript（コールバックの実装など）

  • ツール作成が、 Jupyter notebook でのモデル訓練やデータ分析のように感じられるには？

    • なぜ作ったか記事のslugに coding-ml-tools-like-you-code-ml-models

Streamlit 3つの原則

  • なぜ作ったか記事で読んだ解説をもとに、今回 nikkieの言葉で言語化

  • このトークで 一緒に手を動かしながら 3つの原則を体験しましょう

脱線：Streamlit Inc.

Streamlitの事例

  • 観測範囲で国内から2事例

  • エムスリー社

  • ティアフォー社

エムスリー社事例

ティアフォー社事例

Streamlitデモアプリ

デモアプリ埋め込み

デモアプリ

  • ユーザーが日本語テキストを入力

  • アプリ（機械学習モデル）が続きを生成 して表示します

入力テキスト例1

「みんなのPython勉強会」では、Pythonを中心としてプログラミングを仕事、研究、趣味など様々なシーンに生かす方法を一緒に学びます。

今回の勉強会のconnpass からコミュニティの概要

入力テキスト例2

2016〜ソフトウェアエンジニア。2019〜データサイエンティストとしてユーザベースにJoin、

nikkieのプロフィールの書き出しです

Streamlitデモアプリの裏側

  • 書いたのはPythonスクリプトだけ

  • Streamlit sharingにデプロイ

Pythonスクリプト

魔法みたいなデプロイ

  1. PythonスクリプトをGitHubに公開

  2. Streamlit sharing側で、リポジトリ、ブランチ、スクリプトを指定する だけ

Streamlit sharing

小まとめ🥟：Streamlitとは

  • 開発のモチベーション：ツール作成が、Jupyter notebookでのモデル訓練やデータ分析のように感じられるには？

  • 動画やデモアプリで体験十分。3つの原則を体得していきましょう🏃‍♂️

小休止（開始10分後だといい感じ）

十分に発達した科学技術は、魔法と見分けがつかない。（アーサー・C・クラーク）

クラークの三法則

入門 Streamlit

  • ハンズオン🤲🔛パート！

  • 一緒に手を動かしながら、3つの 原則 (principles)を押さえます

Streamlit Principle 1

Pythonスクリプト、是れ即ちアプリ

Pythonスクリプトを作りましょう

  1. 作業ディレクトリを mkdir 後、 cd

  2. そこにファイルを作ります


$ mkdir stapy72-streamlit
$ cd stapy72-streamlit
$ touch first.py

first.py の中身


import streamlit as st

st.title("My first app")

アプリとして動かす

現在のブラウザ画面

補足：使用統計の送信


[browser]
# Default: true
gatherUsageStats = false

tips💫 Run on save

  • 右上ハンバーガーメニューから Run on save を有効に

  • スクリプトを保存すると、 ただちに ブラウザ画面が 再描画 されます

  • プロトタイピング捗ります！（ st.write で値を確認しながら進む＝対話モード感）

first.py に追記


import pandas as pd
import streamlit as st

st.title("My first app")
st.write("Here's our first attempt at using data to create a table:")
st.write(
    pd.DataFrame(
        {"first column": [1, 2, 3, 4], "second column": [10, 20, 30, 40]}
    )
)

ブラウザ画面を確認

Pythonスクリプト、是れ即ちアプリ

  • あとはスクリプトをどう書くかを身に着けていきましょう

  • 本トークは体験重視！網羅性は重視しません

202102Streamlit勉強会スライドより

nikkieの言葉で雑にまとめると

  • 図の表示がイケてる（matplotlib, bokeh, plotly）

    • このトークでは取り上げません🙏

  • インタラクション ！（後述・お楽しみに）

体験重視のtips💫 streamlit run URL

  • streamlit run にローカルのPythonスクリプトのパスを渡した

  • Web上にあるPythonスクリプトの URL も渡せる


$ streamlit run https://raw.githubusercontent.com/ftnext/stapy72-streamlit-sample/main/first.py

Web上のオススメスクリプト

動かすだけではなく試行錯誤したいときは

  • curl で取得しましょう


$ curl https://raw.githubusercontent.com/ftnext/stapy72-streamlit-sample/main/app.py -O
$ streamlit run app.py

  • 実は streamlit run は、URLで指定したスクリプトをローカルに 一時ファイルとして保存 しています

インタラクション！！

Streamlitの強みの1つ、インタラクションを取り上げます

first.py を書き換える


from datetime import datetime

import streamlit as st

st.write(datetime.now())

x = st.slider("Select a value")
st.write(x, "squared is", x * x)

ブラウザ画面を確認

スライダーを動かすと

  • x は現在のスライダーの値

  • スライダーの下に2乗した値が計算される

  • スライダーを変えると、2乗した値が 再計算 される

再計算、すなわち再実行

  • スクリプト 全体を再実行 して実現

  • スライダーの上に出している現在日時の表示も変わっています

Streamlit Principle 2

値変わらば、最新の値を変数に代入してスクリプトを再実行

これによりインタラクティブなアプリを実現

ウィジェットの紹介

詳しくは https://docs.streamlit.io/en/stable/api.html#display-interactive-widgets

デモアプリで使用

  • 1行のテキスト入力 st.text_input

  • 数値の入力 st.number_input

  • パラメタの選択 st.slider

充実のウィジェット（一部を紹介）

ファイルアップロードも！

さらにメディアの表示も

詳しくは https://docs.streamlit.io/en/stable/api.html#display-media

メディア表示

  • 画像 st.image

  • 音声プレーヤー st.audio

  • 動画プレーヤー st.video

st.audio の例

st.audio の例

キャッシュ

  • 機械学習モデルをインタラクティブに触れるStreamlit製アプリ（例：デモアプリ）

  • モデルの推論には 時間がかかる ことも

  • インタラクションがあるたびにスクリプトを再実行🤔

first.py でシミュレート

  • モデルに推論させる関数（＝時間のかかる処理）を単純化

  • time.sleep で 必ず2秒かかる 関数とする

first.py


import time

import streamlit as st


def expensive_computation(a, b):
    time.sleep(2)
    return a * b


a = 2
b = 21
res = expensive_computation(a, b)

st.write("Result:", res)

ブラウザ画面を確認

  • 2秒経過してからResultを表示

  • ブラウザをリロードすると 毎回2秒待つ

@st.cache で関数をデコレート

  • 端的に言うと、 インメモリのKVS （key-value store）

  • イメージ「同じ引数で関数を実行した結果がキャッシュにあれば、 関数を呼び出さずに キャッシュから返す」

  • ⚠️キャッシュのキーは引数だけではないので「イメージ」です

first.py を変更


import time

import streamlit as st


@st.cache
def expensive_computation(a, b):
    time.sleep(2)
    return a * b


a = 2
b = 21
res = expensive_computation(a, b)

st.write("Result:", res)

ブラウザ画面を確認（キャッシュの効能）

  • 初回表示は、2秒経過してからResultを表示

  • ブラウザをリロードすると 2秒待たずに Resultを表示（キャッシュが効いている）

デモアプリでもキャッシュを利用

  • モデル・Tokenizerの読み込み（初回1回だけ）

  • テキスト生成

    • @st.cache によるキャッシュは ユーザー間で共通

    • 私が試したのと同じテキストなら、キャッシュを使って結果を返す

Streamlit Principle 3

スクリプトを再実行する方針ゆえ、キャッシュ利用を指定すべし

キャッシュについて詳しく知るために

小まとめ🥟：Streamlit Principles

  1. Pythonスクリプト、是れ即ちアプリ

  2. 値変わらば、最新の値を変数に代入してスクリプトを再実行

  3. スクリプトを再実行する方針ゆえ、キャッシュ利用を指定すべし

Streamlitに限界はあるのか？

  • プロトタイピングツールと紹介したStreamlit

  • 「これはもう、Webアプリなのでは」

  • 少し考察してみましょう

Webアプリかの考察

  • データベース

  • ユーザー認証

Streamlitでデータベースは使えるらしい（未検証）

秘密情報の扱い 1/2

  • .streamlit/secrets.toml に キー=値 形式で書く


├── .streamlit  # プロジェクト単位の設定情報ディレクトリ
│   └── secrets.toml
└── app.py

秘密情報の扱い 2/2

Webアプリかの考察

  • データベース： 使える （可視化アプリのプロトタイピング楽しそう）

  • ユーザー認証

Webアプリかの考察

  • データベース： 使える （可視化アプリのプロトタイピング楽しそう）

  • ユーザー認証 👈

ユーザー認証

  • ユーザーのログイン機能

  • 簡易版：Webに公開しているが、 パスワードを知っているユーザーにだけ 見せたい（ベーシック認証的）

ページにパスワードを掛ける実装

ページにパスワードを掛ける

  • パスワード入力欄を表示

  • パスワードが合致すると、スライダーの例が動かせる

  • リロードするとパスワード入力まで戻る（Session Stateはタブを閉じたらクリアされる）

ユーザー管理のハック例

Streamlitでユーザー認証

  • データベースと合わせれば、ユーザー管理はできそう（未検証）

  • IMO：nikkieは オススメしません （できる≠使える）

  • c-bataさんがこの後話すDjangoなど、Webアプリケーションフレームワークの出番かなと思います

脱線：Pythonスクリプト＝アプリなので

  • shimizukawaさんが話す『エキスパートPythonプログラミング 改訂3版』

  • Pythonスクリプトが上手く書けるようになれば、Streamlitにも活きるでしょう

  • （今回のテーマ 全方位Python、私の中ではつながった🙌）

認証の参考：ハックしない方向性

小まとめ🥟：Streamlitの限界の考察

  • データベースと接続できる！

  • ページにパスワードも掛けられる

  • IMO：ユーザー管理が必要なら for Teams or Webアプリフレームワーク

Streamlitの学習リソース📚

  • 豊富！（コミュニティが盛り上がっている）

  • nikkieは必要な情報をつまむ学び方なので、オススメ学習順は no idea です ¯_(ツ)_/¯

  • リンク集 的に使ってください

公式

公式さんはドッグフィーディングしています🐶

コミュニティ

コミュニティ その2

Awesomeあります😎

国内の巨人

まとめ🌯：the app runner Streamlit Season✨

  • Streamlitは機械学習分野で注目される プロトタイピングツール

  • ハンズオンを通して3つの原則を共有

  • Webアプリかの考察から、あくまでプロトタイピング

再掲 Streamlit Principles

  1. Pythonスクリプト、是れ即ちアプリ

  2. 値変わらば、 最新の値 を変数に代入してスクリプトを 再実行

  3. スクリプトを再実行する方針ゆえ、 キャッシュ利用を指定 すべし

Streamlit「とびっきりの魔法をかけてあげるわ！」

  • Pythonスクリプトを書くだけ でインタラクティブなアプリになる

  • スクリプトをGitHubで公開して、Streamlit sharingで指定するだけの 簡単デプロイ

Streamlit「とびっきりの魔法をかけてあげるわ！」承前

  • streamlit run URL コピペすら不要という、こんなに簡単なスクリプトの共有方法がかつてあっただろうか

  • キャッシュ！ スクリプトを何度も再実行しているので、積極利用しましょう

最後に Special thanks

  • 社内の勉強会でフィードバックくださった皆さま

  • 前哨戦のおかげで資料引き締まりました！

ご清聴ありがとうございました

Enjoy magical Streamlit Season!

Appendix

EOF