watsonx.ai StudioでStreamlitを動かそう

Google ColabでStreamlitを動かす方法はよく書かれているのですが、watsonx.ai Studio(旧Watson Studio)のjupyter notebookでStreamlitを動かす方法は書かれていない気がするので書きます。

[Streamlit](https://streamlit.io/) はpythonでWebアプリを作成するためのオープンソースのフレームワークです。グラフィカルなWebアプリを簡単に作成することが可能です。

ローカルであれば、Streamlit導入後、基本 app.pyというようなStreamlitのコードを書いたファイルを作成して
```
streamlit run app.py 
```
で実行すると、Webアプリが立ち上がり、Webブラウザーでそのアプリにアクセス可能になります。

これをwatsonx.ai Studio(旧Watson Studio)のjupyter notebookでできるようする方法についての記事です。StreamlitのCoding方法は当記事では説明しません。

基本は一般的に書かれてるGoogle ColabでStreamlitを動かす方法と同じなのですが、watsonx.ai Studio(旧Watson Studio)のjupyter notebookにはnodeモジュールが導入されてないため、nodeモジュールを導入して動くようにします。

尚、下記のコードを記載したnotebookはhttps://github.com/kyokonishito/notebooks/blob/main/watsonstudio_streamlit_sample.ipynb にあります。

# 0. 前提
watsonx.ai Studio(旧Watson Studio)のjupyter notebookを開いてあることが前提です。

# 1. nodeモジュールの導入
jupyter notebookを使って、jupyter notebookのVMにnodeモジュールを導入します。
pipで導入できるものではないので、実行モジュールをダウンロードして配置し、PATHを通すという方法で導入します。

https://nodejs.org/download/release/ から、お好みのバージョンを選んで、linux-x64用のモジュールをダウンロードします。
どのバージョンを選んでよいかわからないという方は、https://nodejs.org/ のトップページからダウンロードできるバージョンにするとよいです。
2025年12月20日現在だと、`v22.12.0` でした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/2dbaa389-2a1a-4b69-a667-211148911334.png)

`v22.12.0` だとダウンロード元パスは以下になります:
https://nodejs.org/download/release/v22.12.0/node-v22.12.0-linux-x64.tar.gz

今回は上記をダウンロードしてnodeというディレクトリーに配置します。
以下がそのコードです。
jupyter notebookの最初のセルにコピペして実行してください:
```shell
!wget https://nodejs.org/download/release/v22.12.0/node-v22.12.0-linux-x64.tar.gz
!tar -xzf node-v22.12.0-linux-x64.tar.gz
!mv node-v22.12.0-linux-x64 node
```

nodeというディレクトリーにPATHを通します。
jupyter notebookのセルにコピペして実行してください:
```py
import os
%env PATH={os.environ['PATH']}:{os.environ['PWD']}/node/bin
```

これでnodeモジュールが使えるようになりました！

# 2. localtunnelの導入
[localtunnel](https://github.com/localtunnel/localtunnel)はローカルポートをフォワードして外部に公開してくれるモジュールです。

npmでnodeにlocaltunnelモジュールを導入します。
jupyter notebookのセルにコピペして実行してください:
```shell
!npm install localtunnel
```

# 3. streamlitの導入
pipでstreamlitモジュールを導入します。
jupyter notebookのセルにコピペして実行してください:
```shell
!pip install streamlit 
```

# 4. streamlit実行ソース`app.py`を作成
jupyter notebookのVM上にstreamlit実行ソース`app.py`を作成します。
ファイル名はなんでもOKですが、ここでは`app.py`とします。

`%%writefile app.py`とセルの最初に入れると、セルの内容がapp.pyに出力されます。
streamlit実行ソース　は　https://github.com/streamlit/hello の[Hello.py](https://github.com/streamlit/hello/blob/main/Hello.py)と同じにしました。

jupyter notebookのセルにコピペして実行してください:
```py
%%writefile app.py

import streamlit as st
from streamlit.logger import get_logger

LOGGER = get_logger(__name__)


def run():
    st.set_page_config(
        page_title="Hello",
        page_icon="👋",
    )

    st.write("# Welcome to Streamlit! 👋")

    st.sidebar.success("Select a demo above.")

    st.markdown(
        """
        Streamlit is an open-source app framework built specifically for
        Machine Learning and Data Science projects.
        **👈 Select a demo from the sidebar** to see some examples
        of what Streamlit can do!
        ### Want to learn more?
        - Check out [streamlit.io](https://streamlit.io)
        - Jump into our [documentation](https://docs.streamlit.io)
        - Ask a question in our [community
          forums](https://discuss.streamlit.io)
        ### See more complex demos
        - Use a neural net to [analyze the Udacity Self-driving Car Image
          Dataset](https://github.com/streamlit/demo-self-driving)
        - Explore a [New York City rideshare dataset](https://github.com/streamlit/demo-uber-nyc-pickups)
    """
    )


if __name__ == "__main__":
    run()
```
`app.py`の作成が成功したら、`Writing app.py`と出力が表示されます。

# 5. app.pyの起動
app.pyをjupyter notebookのVM上で起動させ、ポートを外部からアクセスできるようにします。
これによりStreamlitアプリにブラウザーからアクセスできるようになります。
jupyter notebookのセルにコピペして実行してください:
```shell
# your url is:で表示されたURLをクリック
#　パスワードはExternal URLのIP
# 停止は上の◾️ボタン
!streamlit run app.py & sleep 3 && npx localtunnel --port 8501
```
しばし待つと以下のような出力が表示されます(アドレスは別の数字や文字で置き換えています)

<table>
<tr><td>
Collecting usage statistics. To deactivate, set browser.gatherUsageStats to false.


  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://172.30.136.245:8501
  External URL: http://123.45.67.89:8501

⠙your url is: https://xxxxx-yyyyyy-sip.loca.lt 
</td><tr>
</table>

`External URL: `で表示されたIPアドレス、上記の例では`123.45.67.89` をクリップボードにコピーします。これは次で使うパスワードになります。
`your url is:`で示されたURLをクリックします。

ブラウザーの別タブ(またはウィンドウ)が開くので、`Tunnel Password:`の入力欄に先ほどコピーした、`External URL: `で表示されたIPアドレス、上記の例では`123.45.67.89`をペーストします。

その後、「Click to Submit」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/e86d3472-3c21-2346-24a8-340184dafcd0.png)

問題なければ下記のようなStreamlit画面が開きます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/8e4c4688-2329-89d0-7abe-2265620673d1.png)

停止はnotebookに戻り、上の◾️ボタンをクリックして停止させてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/a264bb20-ffc7-0c0b-ca59-29fdf90e1081.png)

以上が一通りの流れです。

再掲ですが、コードを記載したnotebookはhttps://github.com/kyokonishito/notebooks/blob/main/watsonstudio_streamlit_sample.ipynb にあります。


# 6.　まとめ
[streamlit実行ソース`app.py`を作成](https://qiita.com/drafts/2d1ca8e15bf01a7bc384/edit#4-streamlit%E5%AE%9F%E8%A1%8C%E3%82%BD%E3%83%BC%E3%82%B9apppy%E3%82%92%E4%BD%9C%E6%88%90) でのstreamlit実行ソースで、自分の実行したいstreamlit実行ソースを入れれば、自分のアプリの実行が可能です。

ぜひ自分のアプリで試してみてください。