Custom Colab widget example: Checkbox, ColorPicker, and Slider

checkbox.py

from ctypes import cast, py_object
from google.colab import output

def set_var(v_id, value):
  obj = cast(v_id, py_object).value
  obj.value = value
  
output.register_callback('set_var', set_var)

class Checkbox:
  def __init__(self, value=False):
    self.value = value
    
  def _repr_html_(self):
    checked = 'checked' if self.value else ""
    return """
    <input type='checkbox' %s 
     onchange="
       google.colab.kernel.invokeFunction(
         'set_var', [ %d, this.checked ],
         {})
     "
    >
    """ % (checked, id(self))

color.py

class ColorPicker:
  def __init__(self, value='#000000'):
    self.value = value
    
  def _repr_html_(self):
    return """
    <input type='color' value='%s' 
     onchange="
       google.colab.kernel.invokeFunction(
         'set_var', [ %d, this.value ],
         {})
     "
    >
    """ % (self.value, id(self))

slider.py

class Slider:
  def __init__(self, value=0, min=0, max=100, step=1):
    self.value = value
    self.min = min
    self.max = max
    self.step = step
    
  def _repr_html_(self):
    name = id(self)
    return f"""
    <input type="range" id="in{name}"
     min="{self.min}" max="{self.max}" step="{self.step}"
     value="{self.value}" 
     oninput="out{name}.value=in{name}.value"
     onchange="
       google.colab.kernel.invokeFunction(
         'set_var', [{name}, this.valueAsNumber],
         {{}})
     "
    >
    <output id="out{name}">{self.value}</output>
    """

เวลาใช้ก็

cb = Checkbox()
cb

เรา click เพื่อเปลี่ยน state แล้ว ผลจาก JavaScript จะส่งไปที่ python

print(cb.value)  # True

กรณี slider ก็เหมือนกัน

sl = Slider(50,0,100)
sl

เราเลื่อนเพื่อเปลี่ยน value แล้ว ผลจาก JavaScript จะส่งไปที่ python

print(sl.value)