gr.Label — the classifier output that draws its own confidence bars

$ import gradio as gr

def predict_intent(message):
    # stand-in for a real classifier — swap in model.predict_proba(...)[0]
    return {"shipping": 0.7212, "billing": 0.1506, "returns": 0.0789, "cancel": 0.0493}

with gr.Blocks(title="Support ticket router") as demo:
    gr.Markdown("### Support ticket router")
    msg = gr.Textbox(value="Where is order #10482?", label="customer message", lines=2)
    run = gr.Button("Route ticket", variant="primary")
    top = gr.Label(num_top_classes=3, label="predicted intent")
    run.click(predict_intent, inputs=msg, outputs=top)

demo.launch()

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

Rendered UI (headless Chromium against this exact app, gradio 6.18.0 / Python 3.12):
- Markdown heading, then Textbox "customer message" (2 lines) and primary Button "Route ticket"
- below: Label "predicted intent" -> <h2 data-testid="label-output-value">shipping</h2>
- three <button class="confidence-set"> rows, one <meter> each:
    shipping   72%   value 0.7212, style="width: 72.12%"
    billing    15%   value 0.1506, style="width: 15.06%"
    returns     8%   value 0.0789, style="width: 7.89%"
- "cancel" (0.0493) is nowhere in the DOM — num_top_classes=3 sliced it off server-side

Verified by launching this exact snippet and clicking "Route ticket" in Chromium. The click POSTs {"data":["Where is order #10482?"],"fn_index":1,...}; the returned dict goes through the component's postprocess(), which sorts it and promotes the top key to the headline. The scores are a hard-coded stand-in — drop your own predict_proba() in the same slot.

$ import gradio as gr

def predict(message):
    return {"shipping": 0.7212, "billing": 0.1506, "returns": 0.0789, "cancel": 0.0493}

def on_select(evt: gr.SelectData):
    print(f"[select] index={evt.index} value={evt.value}")
    return f"queued: {evt.value}"

with gr.Blocks(title="Click a bar") as demo:
    msg = gr.Textbox(value="Where is order #10482?", label="customer message")
    run = gr.Button("Route ticket")
    top = gr.Label(num_top_classes=3, label="predicted intent")
    picked = gr.Textbox(label="agent queue")
    run.click(predict, inputs=msg, outputs=top)
    top.select(on_select, inputs=None, outputs=picked)

demo.launch()

* Running on local URL:  http://127.0.0.1:7860
* To create a public link, set `share=True` in `launch()`.
[select] index=1 value=billing

Rendered UI and server output, verified on 6.18.0:
- after "Route ticket", every confidence row carries the class "confidence-set group ... selectable" — the bars are real <button> elements
- clicking the second bar sends {"data":[],"event_data":{"index":1,"value":"billing"},"fn_index":2,...}
- the handler prints [select] index=1 value=billing and Textbox "agent queue" reads "queued: billing"

End-to-end verified: I clicked the second bar in Chromium and read the handler line off the server stdout. The payload has exactly two keys — index (0-based, matching display order) and value (the class string). Add the .select listener and /config flips the component's "_selectable" prop to true; without it the bars are inert.

$ import gradio as gr

def estimate_price(sqft, beds):
    return 118.4 * sqft + 9000 * beds      # a float, not a dict

with gr.Blocks(title="Price regressor") as demo:
    sqft = gr.Number(value=1200, label="square feet")
    beds = gr.Slider(1, 5, value=3, step=1, label="bedrooms")
    run = gr.Button("Estimate price")
    price = gr.Label(label="estimated price (USD)", color="#009245")
    run.click(estimate_price, inputs=[sqft, beds], outputs=price)

demo.launch()

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

Rendered UI (verified on 6.18.0):
- Number "square feet" (1200), Slider "bedrooms" (1-5, step 1, value 3), Button "Estimate price"
- Label "estimated price (USD)" renders ONE element:
    <h2 data-testid="label-output-value" style="background-color: rgb(0, 146, 69);">169080.0</h2>
- <meter> element count: 0 — no scores, no bars
- postprocess() wrapped the float as LabelData(label="169080.0"): str(value), so the trailing .0 survives

Same component, three shapes: dict -> headline plus bars, float/str -> headline only, {} or None -> empty block. 118.4*1200 + 9000*3 = 169080.0 exactly, and that string is what the page shows — no thousands separator, no format hook. Read straight from the heading's textContent and style attribute.