gradio Gallery — the image grid that hands the clicked tile back

$ import gradio as gr
import numpy as np

def classify(img):
    a = np.asarray(img)
    mean = float(a.mean())
    return [(np.full((64, 64, 3), max(0, int(mean) - k * 35), dtype=np.uint8),
             f"class {k}: {max(0, int(mean) - k * 35)}") for k in range(4)]

demo = gr.Interface(fn=classify, inputs=gr.Image(type="numpy", label="photo"),
                    outputs=gr.Gallery(label="top-4 scores", columns=4, height=240),
                    title="tiny classifier")
demo.launch()

* Running on local URL:  http://127.0.0.1:7860
* To create a public link, set `share=True` in `launch()`.

Interface renders: h1 "tiny classifier", then gr.Image labeled "photo" as a drop zone (button text "Drop Image Here - or - Click to Upload"), then Clear / Submit / Flag / Use via API buttons. After Submit the output block becomes a div.grid-container holding four div.gallery-item tiles; each tile is button.thumbnail-item > img with a div.caption-label underneath reading "class 0: 150", "class 1: 115", "class 2: 80", "class 3: 45" for a flat grey input whose mean pixel is 150. The grid computes four equal columns (139.5px each) and .grid-wrap is pinned to exactly 240px, the height I passed.

Verified in gradio 6.18.0 with a real launch plus headless Chromium: a 96x96 grey PNG (mean 150) uploaded through the drop zone, Submit clicked, then the DOM and computed styles read back. The four caption strings are the captions the function returned — captions come from the tuples, not from the label.

$ import gradio as gr
import numpy as np

def frames():
    return [(np.full((64, 96, 3), 40 + i * 40, dtype=np.uint8), f"frame {i}") for i in range(6)]

def which(ev: gr.SelectData):
    path = ev.value["image"]["path"]
    return f"tile {ev.index} -> {ev.value['caption']} ({path.rsplit('/', 1)[-1]})"

with gr.Blocks() as demo:
    gal = gr.Gallery(value=frames(), columns=3, rows=2, height=200,
                     interactive=True, sources=["upload"])
    out = gr.Textbox(label="you picked")
    gal.select(which, None, out)

demo.launch()

* Running on local URL:  http://127.0.0.1:7860
* To create a public link, set `share=True` in `launch()`.

Six tiles in 3 columns x 2 rows, each with its caption under it, and — because interactive=True — a delete button on every tile (6 of them; the same gallery without interactive=True renders 0). Clicking tile index 2 posts two jobs to /gradio_api/queue/join and the handler receives SelectData: index=2, selected=True, value={'image': {'path': '.../gradio/86bfdb4a.../image.webp', 'url': 'http://127.0.0.1:7860/gradio_api/file=.../image.webp', 'size': None, 'orig_name': None, 'mime_type': None, 'is_stream': False}, 'caption': 'frame 2'}. The Textbox then reads "tile 2 -> frame 2 (image.webp)".

Verified in headless Chromium against gradio 6.18.0 with the select handler logging server-side. Uploading a real file named my_photo.png instead gives orig_name='my_photo.png', size=259, mime_type='image/png' — generated tiles keep no original filename.

$ import gradio as gr
import numpy as np

with gr.Blocks() as demo:
    gal = gr.Gallery(value=[(np.full((64, 96, 3), 60 + i * 45, dtype=np.uint8), f"shot {i}")
                            for i in range(5)],
                     columns=5, height=180, selected_index=2)
    status = gr.Textbox(label="lightbox")
    gal.preview_open(lambda: "preview opened", None, status)
    gal.preview_close(lambda: "preview closed", None, status)

demo.launch()

* Running on local URL:  http://127.0.0.1:7860
* To create a public link, set `share=True` in `launch()`.

Five tiles across one row. Because of selected_index=2, tile number 3 already carries the class `selected` on first paint and the span.preview lightbox is open on load (1 preview node in the DOM; the same gallery without the parameter has 0), with a strip of thumbnail-small navigator tiles beside the big image. Escape fires preview_close and the Textbox flips to "preview closed".

Verified in headless Chromium: with allow_preview=False on the same gallery, clicking a tile opens nothing and neither preview_open nor preview_close ever fires — the Textbox stays empty.

$ import time
import numpy as np
import gradio as gr

def sheet():
    step = int(time.time()) % 6
    return [(np.full((64, 96, 3), 30 + step * 35 + i * 5, dtype=np.uint8), f"frame {i}")
            for i in range(6)]

with gr.Blocks() as demo:
    gr.Gallery(value=sheet, every=1.5, columns=3, height=200, label="live sheet")

demo.launch()

* Running on local URL:  http://127.0.0.1:7860
* To create a public link, set `share=True` in `launch()`.

A self-refreshing contact sheet: every 1.5s the queue re-invokes sheet() and repaints the grid — 6 calls logged during roughly 15 seconds of headless browsing, with the first tile's img src moving from .../372e90072f9c.../image.webp to .../0dde3de51baa.../image.webp as the pixels change. When the returned pixels are identical, the src stays put: the cache directory is a content hash, so identical tiles dedupe.

Two practical consequences I hit while measuring: an every= gallery keeps the browser polling, so a Playwright page.goto(..., wait_until='networkidle') never returns — use 'load'; and the callable is re-invoked with no arguments on every tick, so any counter you keep in a closure keeps growing between runs.