この記事は、の一部として公開されました データサイエンスブログソン.
概要
Streamlit は、HTML、CSS、JavaScript などの他のフロントエンド テクノロジと比較して少ないコーディングでデータ アプリケーションを構築および展開するためのオープン ソース ツールです。 これは、データ サイエンス アプリケーションを構築するために特別に設計されたローコード ツールです。
さらに、Streamlit ライブラリには、純粋な Python でデータ アプリケーションを開発するための関数とメソッドがあります。
この記事は XNUMX つのパートに分けて説明します。最初のパートでは Streamlit のコア API について説明し、次に Streamlit クラウドの展開について説明します。最後のパートでは、Streamlit アプリを構築して交通事故の深刻度を予測します。 それでは、streamlit ライブラリを詳しく調べて、データ Web アプリケーションを作成しましょう。
Streamlit ライブラリのコア API
Streamlit ライブラリは、データ駆動の Web アプリケーションを開発するためのウィジェットと UI レイアウト コンポーネントを提供します。 目で
1. テキスト要素
Streamlit には、タイトル、ヘッダー、サブヘッダー、プレーン テキストなどの形式でテキスト コンテンツを表示できる機能があります。 テキスト要素は、タイトルとサブヘッダーを含むテキスト コンテンツを Web サイトに表示するのに役立ちます。 streamlit によるテキスト ウィジェットの例をいくつか見てみましょう。
import streamlit as st # タイトル ウィジェット st.title('This is a title')
# プレーン テキスト wideget st.text("This is some text")
streamlit テキスト要素を使用すると、膨大なコードを書かなくても、テキスト、キャプション、さらにはコードやラテックス式を表示できます。 latex ウィジェットとコード ウィジェットの例も見てみましょう。
# Python 言語でのコード ウィジェットの例
code = '''def hello(): print("Hello, Streamlit!")''' st.code(code, language='python')
# Latex ウィジェットの例 st.latex(r''' a + ar + ar^2 + ar^3 + cdots + ar^{n-1} = sum_{k=0}^{n-1} ar^k = a left(frac{1-r^{n}}{1-r}right) ''')
2. データ表示要素
多くの場合、データ サイエンス プロジェクトでは、データセットを紹介して、取り組んだデータの問題とデータセットの複雑さの簡単な概要を提供する必要があります。 Streamlit には、データ サイエンティストがわずか XNUMX 行のコードでデータセット、テーブル、および JSON オブジェクトを表示できる機能が組み込まれています。
データ表示ウィジェットの例を見てみましょう。
# pandas データフレーム オブジェクトを表示する Pythonコード：
st.dataframe(df)
上記のコードの出力
streamlit 関数を使用して JSON オブジェクトを表示する例を見てみましょう。
import streamlit as st st.json({ 'foo': 'bar', 'baz': 'boz', 'stuff': [ 'stuff 1', 'stuff 2', 'stuff 3', 'stuff 5', ]、})
3. チャート要素
Streamlit は、一連のグラフとプロット ウィジェットを提供して、ユーザー側でデータの視覚化を表示します。 チャート ウィジェットは、インサイトを視覚的な形式で表示するのに非常に役立ちます。 また、ダッシュボードの開発にも使用されます。
Streamlit は、Mapbox の地球画像 API を使用して地理データを表示するために、折れ線グラフ、面グラフ、matplotlib pyplot Figure オブジェクト、plotly グラフ、さらには地図グラフなど、多くのプロットとグラフをサポートしています。 チャート ウィジェットの例をいくつか見てみましょう。
# 折れ線グラフの例
pandas を pd としてインポート numpy を np としてインポート streamlit を st としてインポート chart_data = pd.DataFrame( np.random.randn(20, 3), columns=['a', 'b', 'c']) st.line_chart(chart_data )
import numpy as np import plotly.figure_factory as ff import streamlit as st # ヒストグラムデータを追加 x1 = np.random.randn(200) - 2 x2 = np.random.randn(200) x3 = np.random.randn(200) + 2 # データをグループ化 hist_data = [x1, x2, x3] group_labels = ['Group 1', 'Group 2', 'Group 3'] # カスタム bin_size で distplot を作成 fig = ff.create_distplot( hist_data, group_labels, bin_size =[.1, .25, .5]) # プロット! st.plotly_chart(図、use_container_width=True)
4.入力ウィジェット
ユーザーが特定の値を入力できるインタラクティブな Web アプリを開発することは、データ アプリにとって非常に重要です。 データ サイエンスと機械学習のアプリの大半は、ユーザーから入力を受け取り、それらのユーザーに望ましい出力の予測を返す必要があります。
Streamlit は、テキストベースの入力、オプションの選択、チェック ボックス、日付入力、ファイルのアップロード、数値入力、スライダー入力、カメラ入力などの高度な入力など、さまざまなアプリケーションを開発するためのさまざまなユース ケースでユーザーから入力を受け取るための関数をいくつか提供します。 入力ウィジェットの例をいくつか見てみましょう。
# 複数のオプションから入力を受け取るラジオ ウィジェット ジャンル = st.radio( "お気に入りの映画のジャンル", ('コメディ', 'ドラマ', 'ドキュメンタリー')) if ジャンル == 'コメディ': st.write('コメディーを選択しました。') else: st.write("コメディーを選択しませんでした。")
# 複数選択ウィジェットの使用方法 import streamlit as st options = st.multiselect( 'What are your favorite colors', ['Green', 'Yellow', 'Red', 'Blue'], ['Yellow', 'Red'] ) st.write('You selected:', options)
また、同じデモ Web アプリケーションもチェックしてください。 ここをクリック
5. メディアとレイアウト要素
画像、オーディオ、ビデオなどの非構造化データを扱う場合、ユーザー インターフェイスにメディア ファイルを表示しなければならない場合があります。 そんなときに便利なのがメディアウィジェットです。 レイアウト ウィジェットは、よりユーザー フレンドリーなユーザー インターフェイスを開発するのに役立ち、多くのストリームライト機能を使用してユーザー インターフェイスをカスタマイズするために利用できます。
# PIL import からフロントエンドに画像を表示 Image image = Image.open('sunrise.jpg') st.image(image, caption='Sunrise by the山')
画像を表示する Web アプリの例を確認できます — ここをクリック
ストリームライト機能はこれで終わりではありません。グラフ、アプリのステータス、制御フロー、および Web アプリをユーザーにとってよりインタラクティブにするその他のユーティリティを表示するための他の多くの機能と方法があります。
Streamlit Community Cloud にアプリをデプロイするためのガイド
Streamlit での Web アプリケーションのデプロイは、従来のアプリのデプロイに比べてはるかに簡単です。 Streamlit Cloud は、Github リポジトリからアプリを直接起動します。バックエンドでの構成設定や、アプリケーションのルートの定義は必要ありません。
Streamlit Community Cloud はビルド プロセスを自動化し、開発者の介入なしでアプリをデプロイします。 さらに、Streamlit は継続的インテグレーションと継続的デプロイ (CI/CD) パイプラインをサポートし、プロジェクト リポジトリからコードの変更を自動的にプルします。 オープンソースおよびコミュニティ クラウド プロジェクトとして、Streamlit はすべてのサービスを無料で提供します。
また、Streamlit はビルド ログを提供して、クラウド上に Web アプリをデプロイする際のエラーをトラブルシューティングします。 一般的な問題を簡単に解決するための包括的な例外とエラー ドキュメントを提供します。 問題が解決しない場合は、streamlit サポート チームにお問い合わせください。
それでは、Streamlit クラウドにデータ アプリをデプロイする手順を見てみましょう。
1. アプリをデプロイするには、ワークスペースの右上隅にある [新しいアプリ] ボタンをクリックする必要があります。次に、以下のウィンドウがポップアップします。
2. 「アプリのデプロイ」ウィンドウを開いた後、プロジェクト ファイルが存在するリポジトリ、プロジェクト ファイルのブランチ、最後にメイン ファイル パスを選択して、ワンクリックでアプリをデプロイする必要があります。
ご覧のとおり、以下のリポジトリ、ブランチ、およびパス ファイルを選択して、「Road Traffic Severity」分類アプリをデプロイしました。
これとは別に、streamlit では、高度な設定で Python のバージョンをカスタマイズし、プロジェクトの要件に応じて API キーを保存できます。
3. その「デプロイ」ボタンをクリックすると、ストリームライトされたパブリック クラウドにアプリが自動的にデプロイされ、アプリを実行するためのすべての依存関係がインストールされます。 ビルド プロセスの最後に、streamlit によって割り当てられた標準の URL を介して Web ポータルにリダイレクトされます。
Streamlit アプリの URL の構造は次のようになります。
https://[user name]-[repo name]-[branch name]-[app path]-[short hash].streamlit.app
Streamlit は、AWS S3、BigQuery、MongoDB、MS SQL サーバー、MySQL などのさまざまなデータベース ソースもサポートしています。
ソース コードを使用して Streamlit アプリを開発、ビルド、デプロイする
このセクションでは、交通事故の深刻度を予測し、潜在的に致命的な事故を減らすための合理化された Web アプリケーションを開発します。
このアプリケーションのデータセットは、修士課程の学生が研究のためにアジス アベバ市警察から収集したものです。 データセットには、機械学習モデルをトレーニングおよびテストするための 32 の機能と 12316 のインスタンスが含まれていました。 データセットのソースを見つけることができます こちら.
この記事の範囲では、Web アプリケーションの開発とデプロイのみを取り上げます。 GitHub リポジトリに含めるファイルを見てみましょう。
1. app.py (Streamlit クラウドにデプロイするメイン パス ファイル)
2. Requirements.txt (アプリを実行するためのアプリの依存関係をインストールするため)
3. モデル。 ジョブライブラリ (推論用に開発されたモデル)
アプリを実行するには、カテゴリカル エンコーダー ファイルと画像も必要です。 Streamlight Cloud にアプリケーションをデプロイするためのステップ バイ ステップ ガイドを見てみましょう。
# アプリの依存関係をインストールする requirements.txt ファイル
pandas numpy streamlit scikit-learn joblib shap matplotlib ipython Pillow
2. app.py ファイルを作成し、requirements.txt ファイルに従って必要なライブラリをインポートし、モデルとカテゴリ エンコーダー オブジェクトを python ファイルに読み込みます。
# 必要なライブラリをインポートする import pandas as pd import numpy as np import sklearn import streamlit as st import joblib import shhap import matplotlib from IPython import get_ipython from PIL import Image # モデルとエンコーダ オブジェクトを python ファイルにロードします。 model = joblib.load("rta_model_deploy3.joblib") encoding = joblib.load("ordinal_encoder2.joblib") # streamlit ページ設定をセットアップします st.set_option('deprecation.showPyplotGlobalUse', False) st.set_page_config(page_title="事故重大度予測アプリ", page_icon="🚧", layout="wide")
3. 次に、各アプリケーション機能の入力オプションを設定します。 我々は持っています 7つのカテゴリ機能 & 3 数値特徴 入力を受け取り、予測を出力として取得します。 数値機能の場合、アプリの次のセクションで説明する streamlit 関数パラメーターに値を直接設定できます。
#ドロップダウン メニューのオプション リストの作成 options_day = ['Sunday', "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] options_age = ['18-30', '31- 50', 'Over 51', 'Unknown', 'Under 18'] # 関係する車両の数: 1 から 7 の範囲 # 死傷者の数: 1 から 8 の範囲 # 0 日の時間: 23 から 2 の範囲 options_types_collision = ['車と車の衝突','路側物との衝突','歩行者との衝突','横転','動物との衝突','不明','路上駐車車との衝突','車からの落下' , 'その他','電車あり'] options_sex = ['男','女','不明'] options_education_level = ['中学校','小学校','高校', '不明','以上高校','読み書き','文盲'] options_services_year = ['不明','5-10歳','5歳以上','10-1歳','2-1歳','XNUMX歳未満'] options_acc_area = [「その他」、「オフィスエリア」、「住宅エリア」、「教会エリア」、「工業エリア」、「学校エリア」、「レクリエーションエリア」、「外部の農村地域', '病院地域', '市場地域', '農村地域', '不明', '農村地域オフィス地域', 'レクリエーション地域'] # ユーザーからの入力を取得する機能リスト features = [' Number_of_vehicles_involved','Number_of_casualties','Hour_of_Day','Type_of_collision','Age_band_of_driver','Sex_of_driver', 'Educational_level','Service_year_of_vehicle','Day_of_week','Area_accident_occured'] # アプリの見出しをマークダウン形式 st.markdown で設定します("
事故重大度予測アプリ 🚧
「、unsafe_allow_html=True)
4. 最後に、ストリームリット メソッドを使用して入力を受け取るようにメイン関数を定義し、すべての機能のオプションを設定します。 「st」を使用します。 form」メソッドを使用して、ユーザーからの各入力を取得します。
def main(): # st.form 関数 with st.form("road_traffic_severity_form"): st.subheader("Pleas enter the following notifications:") # ユーザー入力を保存する変数を定義("関与した車両数:",1,7, value=0, format="%d") No_casualties = st.slider("死傷者数:",1,8, value=0, format="%d") ") Hour = st.slider("時刻:", 0, 23, value=0, format="%d") collision = st.selectbox("衝突の種類:",options=options_types_collision) Age_band = st.selectbox("ドライバーの年齢層?:", options=options_age) Sex = st.selectbox("ドライバーの性別:", options=options_sex) Education = st.selectbox("ドライバーの教育:",options=options_education_level ) service_vehicle = st.selectbox("車両のサービス年:", options=options_services_year) Day_week = st.selectbox("曜日:", options=options_day) Accident_area = st.selectbox("事故の地域:", options=options_acc_area) # モデルの出力を予測する送信ボタンを配置 submi t = st.form_submit_button("Predict") if submit: input_array = np.array([collision, Age_band,Sex,Education,service_vehicle, Day_week,Accident_area], ndmin=2) # すべてのカテゴリ特徴をエンコードする encoded_arr = list(encoder .transform(input_array).ravel()) num_arr = [No_vehicles,No_casualties,Hour] pred_arr = np.array(num_arr + encoded_arr).reshape(1,-1) # モデル オブジェクトを使用して出力を予測します predict = model.predict( pred_arr) if predict == 0: st.write(f"重症度予測は致命傷です⚠") elif predict == 1: st.write(f"重症度予測は重傷です") else: st.write(f 「重症度予測は軽傷」） # モデル説明はshapライブラリを用いた説明可能なAI。 st.subheader("予測を理解する説明可能な AI (XAI)") shap.initjs() shap_values = shap.TreeExplainer(model).shap_values(pred_arr) st.write(f"予測 {prediction} 用") shap.force_plot( shap.TreeExplainer(model).expected_value[0], shap_values[0], pred_arr, feature_names=features, matplotlib=True,show=False).savefig("pred_force_plot.jpg", bbox_inches='tight') img = 画像。 open("pred_force_plot.jpg") # Web サイトに表示する画像 st.image(img, caption='Shap を使用したモデル説明' if __name__ == '__main__': main()
5. すべてのファイルを Githubリポジトリ app.py ファイルを streamlit クラウドにデプロイします。 これを使用して、最終的にデプロイされた Web アプリケーションを確認できます。
まとめ
この記事では、Streamlit ライブラリを使用してアプリを開発するための完全なガイドと、Streamlit コミュニティ クラウドを使用して無料で Web アプリケーションを構築および展開するための完全なガイドを学びました。 この記事の要点をいくつか見てみましょう。
- HTML、CSS、または JS を知らなくても Web アプリケーションのフロントエンドを開発するための streamlit ライブラリのコア API の包括的な概要
- バックエンドの構成設定を気にせずに GitHub リポジトリから Web アプリをデプロイするためのガイド。
- 交通事故の重大度を予測するための機械学習 Web アプリケーションを開発およびデプロイするための完全なコード。
この記事に示されているメディアは Analytics Vidhya が所有するものではなく、著者の裁量で使用されています。
関連記事
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源： https://www.analyticsvidhya.com/blog/2022/12/streamlit-tutorial-building-web-apps-with-code-examples/
