watsonx.ai StudioでStreamlitを動かそう

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

Streamlit は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 でした。

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

今回は上記をダウンロードしてnodeというディレクトリーに配置します。
以下がそのコードです。
jupyter notebookの最初のセルにコピペして実行してください:

!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のセルにコピペして実行してください:

import os
%env PATH={os.environ['PATH']}:{os.environ['PWD']}/node/bin

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

2. localtunnelの導入

localtunnelはローカルポートをフォワードして外部に公開してくれるモジュールです。

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

!npm install localtunnel

3. streamlitの導入

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

!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と同じにしました。

jupyter notebookのセルにコピペして実行してください:

%%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のセルにコピペして実行してください:

# your url is:で表示されたURLをクリック
#　パスワードはExternal URLのIP
# 停止は上の◾️ボタン
!streamlit run app.py & sleep 3 && npx localtunnel --port 8501

しばし待つと以下のような出力が表示されます(アドレスは別の数字や文字で置き換えています)

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

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

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

その後、「Click to Submit」をクリックします。

問題なければ下記のようなStreamlit画面が開きます！

停止はnotebookに戻り、上の◾️ボタンをクリックして停止させてください。

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

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

6.　まとめ

streamlit実行ソースapp.pyを作成 でのstreamlit実行ソースで、自分の実行したいstreamlit実行ソースを入れれば、自分のアプリの実行が可能です。

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