Streamlit Community Cloud を利用する方法

# はじめに

Streamlit を利用すると Python のみで簡単なWebアプリが作成可能です。
Streamlit のアプリを公開したいときに便利なのが、Streamlit Community Cloud で、 Streamlit をホスティングしてくれるWebサービスです。

一般公開設定であればフリーで簡単に利用することができます。

# 利用方法

前提条件として、GoogleとGitHubにアカウントを作成済みのところからスタートします。

## Streamlit Community Cloud にアカウントを作成 & サイトへのログイン

下記にアクセスします。

https://streamlit.io/cloud

左上の「Sign up」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575176/32467f14-7d29-b112-034d-b2eab79be7ce.png)

いくつかのサインアップ方法があります。
今回は、Googleアカウントと連携を行いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575176/585bfa36-1f83-cfe9-7cad-bb565c26673a.png)

Googleの認証画面に進むので、連携の許可を行います。

GitHubとも連携するか聞かれるので、連携を行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575176/09f923de-594c-b611-ee0e-c6e305646eaf.png)

アカウント作成画面になるので、適宜入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575176/b56080d3-a9a6-4e50-3341-124b703987ac.png)

ログイン完了すると次のような画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575176/5db17377-117f-57e2-c464-b3e2acd0f620.png)

## Streamlit のアプリを作成し、GitHubに登録する

Streamlitの使い方とGitHubの操作方法は省略します。

次のようなパブリックプロジェクトを作成しました。

https://github.com/ai-study-room-notat/streamlit-image-converter-sample

必要なものは次の２つです。

1. streamで動かすPythonスクリプト
    * ```python: app.py
      import streamlit as st
      from PIL import Image
      import numpy as np
      import cv2
      
      st.title("Image Converter")
        
      uploaded_file = st.file_uploader('Upload your image file.')
        
      if uploaded_file is not None:
          image = Image.open(uploaded_file)
          image = np.array(image)
      
          st.subheader('Uploaded image')
          st.image(image)
      
          gray_image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
      
          st.subheader('Converted image')
          st.image(gray_image)
       ```
1. 必要モジュールを記載した「requirements.txt」
    * ```text: requirements.txt
      streamlit==1.34.0
      opencv-python-headless==4.9.0.80
      pillow==10.3.0
      ```

## Streamlit Community Cloud でアプリを公開する

Streamlit Community Cloud のログイン後の画面より「New app」を選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575176/20602815-ce00-dee7-699a-1a1b3334c713.png)

「Deploy an app」の画面にて、GitHubの情報を入力する。

* URL
* ブランチ
* Streamlit アプリのファイル名
* 公開URLの設定（オプション）

入力が完了したら画面下の「Deploy!」を選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575176/6645ebe6-db4e-7a77-b898-29b436367421.png)

デプロイ後のアプリ画面が表示される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575176/f4f56489-f7df-8217-2dbe-3732971adcf1.png)

## おまけ：公開後のアプリの確認

デプロイしたアプリは Streamlit Community Cloud のログイン後画面から確認可能

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575176/52ad1fdf-18e6-a163-d835-9cf075a47bba.png)

左のケバブボタンより各種情報を確認できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575176/ed6583fd-9970-9ee4-0488-b2bb64f7fb6f.png)

例えば、「Settings」の「Sharing」項目より、公開範囲を指定することができる（デフォルトではパブリックに公開されている）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575176/710f48ec-791d-c919-585f-7c53c5b29457.png)