Adding UI to Colab
You can show UI in a Google Colaboratory notebook. Input forms, buttons, and so on are handy when other people use your notebook. A form's value is reflected into the cell's variable.
Cell title
#@title cell title
Input form
You can reflect the form's content into a variable in the cell.
variable = "the form is reflected into the variable" #@param {type:"string"}
# for a number: #@param {type:"number"}
Select box
dropdown = 'value' #@param ["1st option", "2nd option", "3rd option"] {allow-input: true}
Date input
date_input = '2018-03-22' #@param {type:"date"}
Slider
number_slider = 0.1 #@param {type:"slider", min:-1, max:1, step:0.1}
Checkbox
boolean_checkbox = True #@param {type:"boolean"}
Markdown
#@markdown ---
#@markdown #Big
#@markdown ###Middle
#@markdown #####Little
#@markdown ---
A button via the 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()')
Originally published in Japanese on Qiita. I build apps with Core ML and write about machine learning. GitHub / X