LoginSignup
35

More than 3 years have passed since last update.

ColabにUIをつける

Google Colabratory NoteBook で UIを表示できます。
入力フォームやボタンなど、他の人に使ってもらうときに便利です。
フォームの値は、セルの値に反映されます。
実際のColabNoteBookサンプル
スクリーンショット 2020-12-20 2.10.31.png
スクリーンショット 2020-12-20 1.47.46.png

セルタイトル


#@title セルのタイトル

スクリーンショット 2020-12-20 0.58.38.png

入力フォーム

フォームの内容をセル内の変数に反映できます。

variable = "フォームが変数に反映されます"#@param {type:"string"}
# 数値の場合は #@param {type:"number"}

スクリーンショット 2020-12-20 1.04.09.png

セレクトボックス


dropdown = 'value' #@param ["1st option", "2nd option", "3rd option"] {allow-input: true}

スクリーンショット 2020-12-20 1.52.12.png

日付入力


date_input = '2018-03-22' #@param {type:"date"}

スクリーンショット 2020-12-20 1.57.18.png

スライダー


number_slider = 0.1 #@param {type:"slider", min:-1, max:1, step:0.1}

スクリーンショット 2020-12-20 1.57.22.png

チェックボックス


boolean_checkbox = True #@param {type:"boolean"}

スクリーンショット 2020-12-20 1.57.26.png

マークダウン


#@markdown ---
#@markdown #Big
#@markdown ###Middle
#@markdown #####Little
#@markdown ---

スクリーンショット 2020-12-20 2.00.51.png

DOMでボタン表示


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()')

スクリーンショット 2020-12-20 1.47.46.png

🐣


フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

Twitter
Medium

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35