"""The numbered setup bar above the desktop: 1 model, 2 look, 3 task, then Start.
It is one gr.HTML component with its own markup, styles and script, so it can use
the Docling Agent design's elements (bordered pills, mono captions, popover cards)
instead of stock Gradio widgets. Each pill opens a popover with the full options,
including the advanced ones. The script sends its state to Python as event data:
"change" whenever a choice changes, "input" when a look should be applied now,
"submit" for Start and "stop" for Stop.
"""
LOOK_SHUFFLE = "🎲 Shuffle"
RANDOM_TASK = "🎲 Random task"
MODEL_NOTES = { # mean grounding accuracy on DeskForge-1M held-out conditions, from the model cards
"Gemma4-E4B": "DeskForge 85% vs base 12% grounding accuracy",
"Qwen3.5-4B": "DeskForge 88% vs base 76% grounding accuracy",
}
LOOK_SWATCHES = {
"Xfce default": "#9aa5b1", "Windows-like": "#3B6A9E", "macOS-like": "#D9D9D4",
"Dark": "#2E333F", "Big text": "#C9B79A",
}
def default_state(models, tasks):
return {"model": models[0], "look": LOOK_SHUFFLE, "roulette": False, "tokens": 128,
"task": tasks[0], "random": False}
def props(models, looks, tasks_by_name):
"""Option lists the script renders from."""
return dict(
models=[{"id": m, "sub": MODEL_NOTES.get(m, "")} for m in models],
looks=[{"id": LOOK_SHUFFLE, "swatch": ""}] + [{"id": l, "swatch": LOOK_SWATCHES.get(l, "#ccc")} for l in looks],
tasks=[{"id": name, "app": app, "steps": steps} for name, (app, steps) in tasks_by_name.items()],
)
TEMPLATE = ''
SCRIPT = r"""
const S = Object.assign({}, props.value || {});
const M = props.models || [], L = props.looks || [], T = props.tasks || [];
let open = null;
const root = element.querySelector('.dfs') || element;
const esc = s => String(s).replace(/[&<>"]/g, c => ({'&': '&', '<': '<', '>': '>', '"': '"'}[c]));
function pill(key, n, cap, val) {
return ``;
}
function card(title, body, adv) {
return `
${title}
${body}
${adv ? `
Advanced
${adv}
` : ''}
`;
}
function opt(set, id, label, sub, on, lead) {
return ``;
}
function popModel() {
const body = M.map(m => opt('model', m.id, m.id, m.sub, S.model === m.id)).join('');
const adv = `
Max new tokens${[64, 128, 256].map(t =>
``).join('')}
`;
return card('Model pair · DeskForge vs its base', body, adv);
}
function popLook() {
const body = L.map(l => opt('look', l.id, l.id, l.swatch ? '' : 'A new random theme, font, DPI and panel',
S.look === l.id, l.swatch ? `` : '🎲')).join('');
const adv = ``;
return card('Desktop look · applies now', body, adv);
}
function popTask() {
let body = opt('task', '__random', '🎲 Random task', 'Surprise me', S.random, '');
let app = null;
for (const t of T) {
if (t.app !== app) { app = t.app; body += `