Google Colabratoryで実装する基本的なUI
Google ColabノートブックにUIコンポーネントを組み込むことできます。これによりユーザーはよりダイナミックでインタラクティブなプロジェクトを作成できます。
セルタイトル
入力フォーム
1
2
| variable = "デフォルト値"#@param {type:"string"}
variable_num = "123"#@param {type:"number"}
|
セレクトボックス
1
2
| # セレクトボックス
dropdown = 'value' #@param ["1", "2", "3"] {allow-input: true}
|
日付入力
1
| date_input = '2024-02-15' #@param {type:"date"}
|
スライダー
1
| number_slider = 0 #@param {type:"slider", min:0, max:100, step:1}
|
チェックボックス
1
| boolean_checkbox = True #@param {type:"boolean"}
|
マークダウン
#@markdown ---
#@markdown #タイトル
#@markdown - 1
#@markdown - 2
#@markdown ---
JavaScriptを使う
ボタンを表示してクリックイベントをつける。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| from IPython.display import display, Javascript
from google.colab import output
from google.colab.output import eval_js
js = Javascript('''
async function load_image() {
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('load_image()')
|
まとめ
Google Colabratoryでのプロジェクトにインタラクティブな要素を追加することは、ユーザー体験を向上させる素晴らしい方法です。上記のコード例は、基本的なUIコンポーネントを組み込むための出発点として役立ちます。これらのコンポーネントを使って、よりインタラクティブでユーザーフレンドリーなノートブックを作成しましょう。
