Streamlitを試す（インストールからSreamlitCloudへのデプロイまで）

tags: tech survey

---

References

• StreamlitでWebアプリ開発！インストールからデプロイまで徹底解説
• STREAMLITを活用してデータ可視化アプリを作ろう （パート1）
• STREAMLITを活用してデータ可視化アプリを作ろう （パート2）

Source

作成したソースはすべて下記に置いてあります。

• Github

Motivation

Herokuが有料化したことに伴い、個人的なちょっとしたツールをホスティングできる代替となるPaasを探していました。
Pythonによる数理最適化勉強会でStreamlitおよびそれをホスティングできるStreamlitCloudが紹介されていて便利そうに感じたので試してみることにしました。
会社のHackathon Timeを利用して試していたので、同僚向けに英語訳も交えながら作業メモを作成したのでZennでも公開しておきます。
内容はStreamlitでWebアプリ開発！インストールからデプロイまで徹底解説をほぼ参考にさせていただきました。

What is Streamlit

StreamlitとはPythonでWebアプリを簡単に作成できるフレームワークです。
Streamlitは、Webアプリ開発でも特にデータサイエンス領域で開発する際に利用されるフレームワークです。
一番の特徴はなによりも手軽に開発できることです。最短一行でWebアプリを開発でき、WebUIを簡単に作成できるため、ひとまず動くか確認したい場合などに適しています。
Streamlit is a framework that makes it easy to create web applications in Python.
Streamlit is a framework used for web application development, especially in the data science area.
The best feature is that it can be developed easily. Web applications can be developed in as little as one line, and WebUI can be easily created, so it is suitable for cases such as when you want to check whether it works for the time being.

フロントエンドの開発スキルがないデータサイエンティストでも簡単にウェブアプリケーションを開発することができます。
Even data scientists without front-end development skills can easily develop web applications.

Install and Create first app

Install Streamlit

# create environment
cd /path/to/project_root
pipenv install

# install streamlit
pip install streamlit

execute sample streamlit app

streamlit hello

we can get below message.

  Welcome to Streamlit. Check out our demo in your browser.

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

  Ready to create your own Python apps super quickly?
  Head over to https://docs.streamlit.io

  May you create awesome apps!

Also we can see below

画面左のChoose a demoから様々なサンプルアプリを確認できます。
You can check various sample apps from Choose a demo on the left side of the screen.

Create first app

公式ドキュメントを確認してみましょう。
画面上部のGalleryには先ほどのようなサンプルが紹介されています。全体の構成や使用例を確認したい場合はこちらを確認しましょう。
Check the official documentation.
In the Gallery at the top of the screen, samples like the one above are introduced. If you want to check the overall configuration and usage examples, check here.
https://streamlit.io/

事前準備としてapp.pyというファイルを作成してください。作成後、以下のソースコードを記述しましょう。
As a preparation, create a file called app.py. After creating, let's write the following source code.

import streamlit as st

st.title("hello")

コードが作成できたらターミナルで以下のコマンドを実行しましょう。
After creating the code, run the following command in the terminal.

streamlit run app.py

Frequently used components

・title、write、markdown

文字を表示する際に利用できるコンポーネントです。
A component that can be used to display characters.

import streamlit as st

st.title("title")
st.write("write")
st.markdown("# Head1")
st.markdown("## Head2")

Some Widges

Streamlitでは様々なウィジェットが簡単に作成できます。ここからはよく使われるウィジェットを紹介します。
You can easily create various widgets with Streamlit. Here are some commonly used widgets.

import streamlit as st

st.markdown("----")
st.title("title")
st.write("write")
st.markdown("# Head1")
st.markdown("## Head2")
st.markdown("----")

check = st.checkbox("他のウィジェットを表示する") #引数に入れることでboolを返す

if check:
   st.button("ボタン") #引数に入れるとboolで返す
   st.selectbox("メニューリスト", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名、第二引数：選択肢
   st.multiselect("メニューリスト（複数選択可）", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名、第二引数：選択肢、複数選択可
   st.radio("ラジオボタン", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名（選択肢群の上に表示）、第二引数：選択肢
   st.text_input("文字入力欄") #引数に入力内容を渡せる
   st.text_area("テキストエリア")

Add SideBar

サンプルページにあったようなサイドバーを作成します。
Create a sidebar like the one on the sample page.

import streamlit as st

st.markdown("----")

check = st.checkbox("他のウィジェットを表示する") #引数に入れることでboolを返す

if check:
   st.button("ボタン") #引数に入れるとboolで返す
   st.selectbox("メニューリスト", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名、第二引数：選択肢
   st.multiselect("メニューリスト（複数選択可）", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名、第二引数：選択肢、複数選択可
   st.radio("ラジオボタン", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名（選択肢群の上に表示）、第二引数：選択肢

# 以下をサイドバーに表示
st.sidebar.text_input("文字入力欄") #引数に入力内容を渡せる
st.sidebar.text_area("テキストエリア")

Deploy to Streamlit Cloud

Streamlit CloudとはStreamlitで作成したWebアプリを簡単にデプロイできるサービスです。
Streamlit Cloud is a service that allows you to easily deploy web applications created with Streamlit.

1． Streamlit Cloudにサインイン https://share.streamlit.io/signup
ご覧のページが開いたら、Googleアカウント、Githubアカウント、メールアドレスのいずれかを利用してアカウントを作成します。

2． Githubアカウント連携
上記画面に遷移したらConnect Github accountをクリックしましょう。

3．GithubリポジトリにWebアプリのソースコードをアップロード
作成したソースコードをGithubにアップロードしましょう。ここではソースコードのアップロード方法は割愛します。

4．リポジトリ、ブランチ、ファイルパスを選択
管理画面の右上にあるNew appを選択します。

5．デプロイする
必要項目を入力しDeploy!をクリックするとデプロイされます。

1. Sign in to Streamlit Cloud https://share.streamlit.io/signup
   When the page you are looking at opens, create an account using either your Google account, Github account, or email address.

2. Github account linkage
   After transitioning to the above screen, click Connect Github account.

3. Upload web app source code to Github repository
   Let's upload the created source code to Github. I will omit the method of uploading the source code here.

Four. Select repository, branch and file path
Select New app in the upper right corner of the admin screen.

Five. deploy
Enter the required items and click Deploy! to deploy.

my impression

• I was able to install and deploy in just an hour.Very easy.
• It took 1-2 seconds from the time the PR was merged into the main branch until the deploy was reflected. Very fast.
• It's a unique DSL, but once you get used to it, you'll be able to write like Markdown.
• However, I haven't seen a service that is enough to put the application into production.
• This service seems to focus on hosting and visualizing data output by data scientists with Pandas and Matplotlib.