File size: 1,891 Bytes
fd5ea05 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
"""A reactive image viewer that allows you to select a class and see 16 random
images from that class.
This is a tutorial on how to use `reactive` functions in Meerkat, to
build complex reactive workflows.
"""
import meerkat as mk
df = mk.get("imagenette", version="160px")
IMAGE_COL = "img"
LABEL_COL = "label"
@mk.reactive()
def random_images(df: mk.DataFrame):
images = df.sample(16)[IMAGE_COL]
formatter = images.formatters["base"]
# formatter = images.formatters['tiny']
return [formatter.encode(img) for img in images]
labels = list(df[LABEL_COL].unique())
class_selector = mk.gui.Select(
values=list(labels),
value=labels[0],
)
# Note that neither of these will work:
# filtered_df = df[df[LABEL_COL] == class_selector.value]
# (doesn't react to changes in class_selector.value)
# filtered_df = mk.reactive(lambda df: df[df[LABEL_COL] == class_selector.value])(df)
# (doesn't react to changes in class_selector.value)
filtered_df = mk.reactive(lambda df, label: df[df[LABEL_COL] == label])(
df, class_selector.value
)
images = random_images(filtered_df)
# This won't work with a simple reactive fn like a random_images
# that only has df.sample
# as the encoding needs to be done in the reactive fn
# grid = mk.gui.html.gridcols2([
# mk.gui.Image(data=images.formatters["base"].encode(img)) for img in images
# ])
grid = mk.gui.html.div(
[
# Make the image square
mk.gui.html.div(mk.gui.Image(data=img))
for img in images
],
classes="h-fit grid grid-cols-4 gap-1",
)
layout = mk.gui.html.div(
[
mk.gui.html.div(
[mk.gui.Caption("Choose a class:"), class_selector],
classes="flex justify-center items-center mb-2 gap-2",
),
grid,
],
classes="h-full flex flex-col m-2",
)
page = mk.gui.Page(layout, id="reactive-viewer")
page.launch()
|