gradio Markdown — headers, tables and LaTeX, plus the live status board nobody uses it for

$ import numpy as np
import gradio as gr
from PIL import Image

def classify(img):
    if img is None:
        return {"upload something": 1.0}
    arr = np.asarray(img.convert("L"), dtype=float)
    b = arr.mean() / 255
    if b > 0.6:
        return {"sky": 0.83, "cloud": 0.12}
    if b > 0.3:
        return {"forest": 0.61, "meadow": 0.27}
    return {"night": 0.77, "cave": 0.18}

def status(img):
    if img is None:
        return "### Waiting for an image\n\nDrop a photo on the left and this panel fills itself in."
    arr = np.asarray(img.convert("L"), dtype=float)
    return ("### Input checked\n\n"
            "| measure | value |\n|---|---|\n"
            f"| size | {img.size[0]}x{img.size[1]} px |\n"
            f"| mean pixel | {arr.mean():.1f} |\n"
            f"| mode | {img.mode} |")

with gr.Blocks(title="Scenery classifier") as demo:
    with gr.Row():
        with gr.Column():
            img_in = gr.Image(type="pil", label="Input image")
            run = gr.Button("Classify", variant="primary")
        with gr.Column():
            board = gr.Markdown(status, inputs=[img_in])   # no .change() anywhere
            out = gr.Label(num_top_classes=2, label="Prediction")
    run.click(classify, img_in, out)

demo.launch(prevent_thread_lock=True)

* Running on local URL:  http://127.0.0.1:7861

Rendered UI (read from /config and from the live DOM on gradio 6.18.0):
- Row, two columns. Left: Image input "Input image" with upload/webcam/clipboard sources, then a primary Button "Classify". Right: a Markdown block, then Label "Prediction" with num_top_classes=2.
- The Markdown block paints no box at all: div.block.padded.hide-container.auto-margin > div[data-testid=markdown-wrapper] > div[data-testid=markdown].prose > span.md > your HTML.
- Registered dependencies: {"targets": [[image, "change"], [blocks, "load"]], "inputs": [image], "outputs": [markdown], "api_name": "status"} and {"targets": [[button, "click"]], "inputs": [image], "outputs": [label], "api_name": "classify"}
- Before any upload the panel reads: "Waiting for an image / Drop a photo on the left and this panel fills itself in."
- Uploading a 96x64 RGB test image redrew it with no click: "Input checked / size 96x64 px / mean pixel 127.2 / mode RGB", innerHTML = <h3>Input checked</h3> plus a real <table> with thead/tbody.
- Clicking Classify then filled the Label with "forest 61% / meadow 27%" (mean 127.2 -> 0.499 -> the middle branch, as written).

The value=callable + inputs= pair is the whole trick. Gradio binds the function to the input's 'change' event and to Blocks.load, so the panel is already filled on first paint. Verified by uploading a real file in headless Chromium and reading the DOM back.

$ import datetime
import gradio as gr

_n = 0

def metrics():
    global _n
    _n += 1
    now = datetime.datetime.now().strftime("%H:%M:%S")
    return (f"### Worker pool — refreshed at {now}\n\n"
            "| queue | running | avg latency |\n|---|---|---|\n"
            f"| {_n % 7} | 2 | {38 + _n % 5} ms |")

with gr.Blocks(title="Ops board") as demo:
    gr.Markdown(metrics, every=1.0)

demo.launch(prevent_thread_lock=True)

* Running on local URL:  http://127.0.0.1:7862

Rendered UI (gradio 6.18.0):
- One Markdown block, no buttons, no inputs, nothing else on the page.
- Dependency registered automatically: {"targets": [[timer, "tick"], [blocks, "load"]], "inputs": [], "outputs": [markdown], "api_name": "metrics"} — gradio creates the Timer component from every=1.0; you never declare it.
- Live check: the h3 text went from "Worker pool — refreshed at 09:47:44" to "Worker pool — refreshed at 09:47:47" between two samples taken 2.5 s apart, and the queue cell incremented on each call.
- Zero Python callbacks and zero browser-side JavaScript in the app file.

every= does nothing when value is a plain string — the docstring says so and the config shows no dependency. It only schedules the callable you passed as value.

$ import gradio as gr

ROWS = [("resnet50", 0.94, 41), ("vit_b32", 0.91, 88), ("efficientnet_b0", 0.87, 22)]

def report(query, top_k):
    rows = "\n".join(f"| {i+1} | `{m}` | {s:.2f} | {ms} ms |" for i, (m, s, ms) in enumerate(ROWS[:int(top_k)]))
    return (f"## Results for **{query}**\n\n"
            "| # | model | score | latency |\n|---|---|---|---|\n"
            f"{rows}\n\n"
            "```python\n"
            f"best = \"{ROWS[0][0]}\"\n"
            "```")

with gr.Blocks(title="Model leaderboard") as demo:
    q = gr.Textbox(value="golden retriever", label="query")
    k = gr.Slider(1, 3, value=3, step=1, label="top k")
    btn = gr.Button("Run benchmark", variant="primary")
    res = gr.Markdown()
    btn.click(report, [q, k], res)

demo.launch(prevent_thread_lock=True)

* Running on local URL:  http://127.0.0.1:7863

Rendered UI (gradio 6.18.0):
- Textbox "query" prefilled with "golden retriever", Slider "top k" (min 1, max 3, step 1, value 3), primary Button "Run benchmark", and an empty Markdown output under them.
- After the click the output's innerHTML contains a real <table> (thead: #, model, score, latency; three tbody rows) and a <pre><code> fence with exactly 1 <button class="copy_code_button">.
- Text read back out of the DOM: "Results for golden retriever / 1 resnet50 0.94 41 ms / 2 vit_b32 0.91 88 ms / 3 efficientnet_b0 0.87 22 ms / best = \"resnet50\"".
- No label ever appears above the block — see the flags table.

Markdown is a first-class output component: any listener can return a string and the block re-renders. The code fence gets its copy button for free; buttons=["copy"] only adds the block-level one.

$ import math
import gradio as gr

TEX = ("# Attention, in one screen\n\n"
       "The scaled dot-product attention of a single head is\n\n"
       "$$\\mathrm{Attention}(Q,K,V)=\\mathrm{softmax}\\!\\left(\\frac{QK^{\\top}}{\\sqrt{d_k}}\\right)V$$\n\n"
       "and the temperature is just a $1/\\sqrt{d_k}$ factor in disguise.\n\n"
       "```python\n"
       "scores = (q @ k.T) / math.sqrt(d_k)\n"
       "```")

with gr.Blocks(title="Paper notes") as demo:
    gr.Markdown(
        TEX,
        latex_delimiters=[
            {"left": "$$", "right": "$$", "display": True},
            {"left": "$", "right": "$", "display": False},
        ],
        header_links=True,
    )
    gr.Markdown(TEX)   # same string, default delimiters

demo.launch(prevent_thread_lock=True)

* Running on local URL:  http://127.0.0.1:7864

Rendered UI (gradio 6.18.0, frontend bundles katex + an auto-render script):
- Top block (delimiters given): 2 KaTeX nodes. $$...$$ became <span class="katex-display"><span class="katex">... (block maths, from display: True); $1/\sqrt{d_k}$ became an inline <span class="katex">.
- header_links=True: the h1 gets id="h-attention-in-one-screen-1" and one <a class="md-header-anchor" href="#h-attention-in-one-screen-1"> containing an inline SVG link icon. The id carries a -1 suffix.
- Bottom block (no latex_delimiters): exactly 1 KaTeX node. The $$...$$ still renders, and $1/\sqrt{d_k}$ stays literal text you can select. Verified: with only the default delimiter the DOM keeps "inline $a=1$ and" as plain text next to one katex-display span.
- The fenced python block renders a <div class="code_wrap"> with a copy button in both blocks, without buttons=["copy"].

The constructor default is [{left: '$$', right: '$$', display: True}] — one delimiter, display mode only. Inline $ math is opt-in, which is exactly what the 3.35.0 changelog says they did on purpose: $ shows up in ordinary prose too often. latex_delimiters=[] turns LaTeX off completely and leaves the dollars visible.