baukit/notebooks/using_show_and_widgets.ipynb

In [ ]:

%%bash
!(stat -t /usr/local/lib/*/dist-packages/google/colab > /dev/null 2>&1) && exit
pip install git+https://github.com/davidbau/baukit > /dev/null

Using baukit show()

show() is similar to notebook's display(), but it is gives you more control over layout and rendering of the HTML.

To start, you can use it just like print() or display().

In [ ]:

from baukit import show

show('hello', 'world')

A doubly nested array shows as a row.

In [ ]:

show([[1,2,3,4,5]])

The first level of nesting stack vertically, so you can make a table by stacking rows.

In [ ]:

show([
      [  1,   2,   3,   4,   5],
      ['a', 'b', 'c', 'd', 'e']
     ])

Easy layouts by nesting arrays

show() makes it easy to produce layouts of data by arranging it in nested arrays. At the top level, data is arranged in rows; then at the second level, data is arranged in columns; then at the third level, it is split into rows again, and so on.

(Technical detail: the HTML it produces uses CSS flexbox layouts, alternating row and column flex containers for each level of nesting.)

In [ ]:

show(['first row ' * 30,
      ['second row ' * 10, 'second row second item ' * 5],
      ['third row ' * 10, ['third row second item ' * 5, ['some more', 'data', 'here']]]])

A simple grid layout example

A very common pattern is to show data in a grid. Here is a three-level nested piece of retangular data:

In [ ]:

show([[['hello', [i, j]] for j in range(1, 8)] for i in range(1, 6)])

Showing images

Unlike display(), show() knows how to directly render PIL images and matplotlib figures and other types of data.

In [ ]:

from PIL import Image
from numpy.random import randint

show([[[f'image {i}',
        Image.fromarray(randint(0,255,(128,128,3),dtype='uint8'))]
       for i in range(10)]])

Controlling CSS

The style of anything emitted by show can be controlled by using show.style() to inject CSS properties. show.style will alter the CSS style of the next item rendered by show().

In [ ]:

show([show.style(background='pink', font='italic 24px serif'), 'A demonstration of CSS control',
      [show.style(background='skyblue'), 2, show.style(background='yellow', flex=2), 3],
      show.style(background='lightgreen'), 4])

In the following style we define a style object for our favorite style, so we can use it repeatedly.

In [ ]:

italic = show.style(background='pink', font='italic 24px serif', border='1px solid black')

show(['hello', [italic, 'world', italic, 'look at me!']])

Tight columns and wrapped rows

A few useful show.style instances are predefined as constants. For example, show.style(display='inline-flex') is also called show.TIGHT, because it provides a tight layout of rows that are sized to fit the content instead of making the flexbox expand to fill its container. Similaly show.WRAP makes a row that packs the data to the left and wraps it (like the way text flows), instead of as spaced-out columns.

In [ ]:

show(show.TIGHT,
     [[[show.style(font='italic 24px serif'), 'lots of data',
        show.style(background='gainsboro'),
     show.WRAP, [f'({a},{b})' for a in range(i) for b in range(j)]]
       for j in range(1, 5)] for i in range(1, 3)])

Showing widgets

baukit also contains a bunch of widgets like Range() and Numberbox() that can be shown and included in a layout.

In [ ]:

from baukit import Range, Numberbox

nb = Numberbox()
ra = Range()

show([[nb, show.style(flex=5), ra]])

Getting and setting widget values

Widgets are live data-bound objects. So if you change a value in the widget, it will display that value right away. Also, if the user enters some input, it will be reflected in the python value right away. To see that effect, run the following cells while interacting with the widgets above:

In [ ]:

import random
ra.value = random.randrange(100)

In [ ]:

print(nb.value)
print(ra.value)

Binding live widget properties

Widget properties can be bound together - if you refer to a widget property using the widget.prop() method, it will return a live property object that can be bound to another property.

(Also notice that if you show the same widget instance multiple times, all the rendered views will in sync.)

In [ ]:

nb2 = Numberbox()
ra2 = Range(max=1, step=0.001, value=0.5)

nb2.value = ra2.prop('value')

show([[nb2, show.style(flex=8), ra2]])
show(ra2)

Making buttons, and responding to events

Widgets fire events when their state changes, and you can have those events call a function using the on() method. For example, the following button randomizes the sliders above.

In [ ]:

from baukit import Button

btn = Button('Click Me')
def dosomething():
    ra2.value = random.randrange(100) / 100
btn.on('click', dosomething)
show(show.style(fontSize=20, height=28), btn)

You can also respond to any property change using the on() method. Here we show a message whenever ra3 changes.

In [ ]:

from baukit import Div

div = Div('change the slider')
ra3 = Range()

def print_value():
    div.innerHTML = f'the value is {ra3.value}'
ra3.on('value', print_value)

show([[div, show.style(flex=7), ra3]])

Menus, Choices, and Datalists

You can make dropdown menus using Menu; radio button choices using Choice; and editable dropdowns (combobox) using Datalist.

In [ ]:

from baukit import Menu

menu = Menu(choices=list(range(0,101,10)))
ra4 = Range(step=10)
menu.value = ra4.prop('value')

show([[menu, show.style(flex=7), ra4]])

Radio button choice arrays can be arranged horizontally or vertically based on the level of nesting.

In [ ]:

from baukit import Choice

choice = Choice(choices=list(range(0,101,50)))
ra6 = Range(step=50)
choice.value = ra6.prop('value')

show([[choice, show.style(flex=6), ra6]])
show([[[choice], show.style(flex=6), ra6]])

A Datalist allows free-form input while also providing a dropdown menu for choices.

In [ ]:

from baukit import Datalist
dl = Datalist(choices=[0, 40, 60, 100])
ra5 = Range(step=1)
dl.value = ra5.prop('value')

show([[dl, show.style(flex=7), ra5]])

Using PlotWidget

Matplotlib plots can be displayed within HTML by showing the matplotlib figure.

PlotWidget is a widget that manages the matplotlib figure and allows you to create a parameterized plot by writing a plotting function. Any arguments in your plotting function become parameters of the PlotWidget that you can adjust.

In [ ]:

import torch
from baukit import PlotWidget

def myplot(plt, frequency=1.0, amplitude=1.0):
    [ax] = plt.axes
    ax.clear()
    ax.set_title(f'Sine wave of frequency {frequency:.2f}, amplitude {amplitude:.2f}')
    x = torch.linspace(0, 20, 300)
    y = (frequency * x).sin()
    ax.plot(x, amplitude * y)
    ax.set_ylim(-5, 5)

show([[PlotWidget(myplot),
       PlotWidget(myplot, frequency=2, amplitude=3)]])

Making interactive matplotlib plots with PlotWidget

PlotWidget properties can be bound together just like any other widget properties, so it is easy to define an interactive plot interface.

In [ ]:

freq_ra = Range(min=0.1, max=5.0, step=0.01, value=1.0)
freq_nb = Numberbox(freq_ra.prop('value'))
amp_ra = Range(min=0.1, max=5.0, step=0.01, value=1.0)
amp_nb = Numberbox(amp_ra.prop('value'))
pw = PlotWidget(myplot, frequency=freq_ra.prop('value'), amplitude=amp_ra.prop('value'), format='svg')
show(show.TIGHT, [[pw],
                  ['frequency', show.style(flex=10), freq_ra, freq_nb],
                  ['amplitude', show.style(flex=10), amp_ra, amp_nb]])

Handling PlotWidget clicks

When an image or PlotWidget is clicked, you can get the coordinates by listening to the click event.

In [ ]:

from baukit import Textbox
coord_b = Textbox()
def handle_click(e):
    loc = e.location
    coord_b.value = f'x,y=({loc.x:.2f}, {loc.y:.2f}) inside={loc.inside}'
pw.on('click', handle_click)
show(show.TIGHT, [['Click the previous plot to see coordinates here:', coord_b]])

There are many other widgets that come in the kit. You can read about them in the source code - see labwidget.py.