Zenn
🍣

ColabでインタラクティブなUIを使う方法

2022/12/02に公開
JavaScript
Python
Google Colaboratory
tech

こんにちは。Kaibaです。最近画像生成AIにどハマりしてColabに課金してしまい、ちょっと後悔してます。でもかわいい女の子には抗えなかった。

概要

Google Colaboratoryで出力欄にボタンなどインタラクティブなUIを配置し、ユーザーのアクションに応じて処理を行う方法です。この記事では以下の二つについてまとめます。他にもありそう。

  • JavascriptをColabのコードセルに埋め込んでブラウザで実行
  • ipywidgetのButtonを使ってColabのランタイムで実行

Javascriptを記述してボタンを生成する

こちらやこちらを参考にしました。他にもColabでUIを使う方法について纏められているので詳しく知りたい場合はこちらをどうぞ。

js = Javascript('''
            async function button_test() {
                const div = document.createElement('div');
                var button = document.createElement('button');
                var log = document.createElement('div');

                button.textContent = "button";
                button.onclick = function(){
                    log.innerHTML = "Button Clicked.";
                }
                div.appendChild(button)
                div.appendChild(log)

                document.querySelector("#output-area").appendChild(div);
                return
                } ''')

display(js)
eval_js('button_test()')

eval_jsでボタンが表示され、ボタンが押されるとbutton.onclickで指定されている関数が実行されます。
ブラウザで処理は実行されるので、fetchなどを行おうとするとCORSで弾かれたりします。（1敗）

余談ですが、JavascriptからPythonで定義した関数を呼び出したい場合は以下のようにして呼び出せます。

def test_func():
    #なんか処理
output.register_callback('notebook.test_func', test_func)

google.colab.kernel.invokeFunction('notebook.test_func', [], {});

引数がある場合はinvokeFunctionの第二引数に配列として渡せばOKっぽいです。

ipywidgetのButtonを使う

こちらを参考にしました。こちらもボタン以外のUIについても纏めて下さっているので詳しくはこちら。

from IPython.display import display
from ipywidgets import Button,Layout

button = widgets.Button(description="Clicke me",layout=Layout(width='50px', height='50px')) 

def on_button_clicked(b):
    print("clicked")

button.on_click(on_button_clicked)

display(button)

descriptionのテキストがボタンに表示されるテキスト、layoutがボタンのサイズです。コールバックにはボタンのインスタンスが引数として渡されます。

また、ボタンにはvalueというメンバがあるのでこれを用いればコールバックでボタンに応じて処理を変えることもできます。

button.value=0

def on_button_clicked(b):
    if b.value==0:
        print("0番のボタン")

button.on_click(on_button_clicked)

display(button)

こちらはボタンを押した時点でColabのランタイムで処理が実行されます。fetchなどWebリクエストを送りたい場合はこちらが適しているかも。
ただし、当然Colabのランタイムに接続していない時にボタンを押しても処理は実行されません。またどうやらセルを実行している最中だと処理してくれないっぽいです。（未調査）
微妙に使い勝手が悪いですね。

以上、ColabでインタラクティブなUIを使う方法でした。用途に応じて適切な方法を使用してください。

Discussion