| | """ |
| | Native Gradio UI layout. |
| | Sequential media phases: Demo Video -> Action+Point -> Execute Video. |
| | Two-column layout: Point Selection | Right Panel. |
| | """ |
| |
|
| | import ast |
| | import json |
| |
|
| | import gradio as gr |
| |
|
| | from config import ( |
| | CONTROL_PANEL_SCALE, |
| | LIVE_OBS_BASE_CLASS, |
| | LIVE_OBS_POINT_WAIT_CLASS, |
| | SESSION_CONCURRENCY_ID, |
| | SESSION_CONCURRENCY_LIMIT, |
| | SESSION_TIMEOUT, |
| | POINT_SELECTION_SCALE, |
| | RIGHT_TOP_ACTION_SCALE, |
| | RIGHT_TOP_LOG_SCALE, |
| | UI_TEXT, |
| | UI_GLOBAL_FONT_SIZE, |
| | get_live_obs_elem_classes, |
| | ) |
| | from gradio_callbacks import ( |
| | cleanup_current_request_session, |
| | cleanup_user_session, |
| | execute_step, |
| | init_app, |
| | load_next_task_wrapper, |
| | on_map_click, |
| | on_demo_video_play, |
| | on_demo_video_end_transition, |
| | on_execute_video_end_transition, |
| | on_option_select, |
| | on_reference_action, |
| | precheck_execute_inputs, |
| | restart_episode_wrapper, |
| | switch_env_wrapper, |
| | switch_to_execute_phase, |
| | touch_session, |
| | ) |
| | from user_manager import user_manager |
| |
|
| |
|
| | PHASE_INIT = "init" |
| | PHASE_DEMO_VIDEO = "demo_video" |
| | PHASE_ACTION_POINT = "action_point" |
| | PHASE_EXECUTION_VIDEO = "execution_video" |
| | LOAD_STATUS_MODE_IDLE = "idle" |
| | LOAD_STATUS_MODE_EPISODE_LOAD = "episode_load" |
| |
|
| | APP_THEME = gr.themes.Default() |
| |
|
| |
|
| | |
| | SYNC_JS = "" |
| |
|
| |
|
| | DEMO_VIDEO_PLAY_BINDING_JS = r""" |
| | () => { |
| | const bindPlayButton = () => { |
| | const button = |
| | document.querySelector("#watch_demo_video_btn button") || |
| | document.querySelector("button#watch_demo_video_btn"); |
| | if (!button || button.dataset.robommeDemoPlayBound === "1") { |
| | return; |
| | } |
| | button.dataset.robommeDemoPlayBound = "1"; |
| | button.addEventListener("click", () => { |
| | const videoEl = document.querySelector("#demo_video video"); |
| | if (!videoEl) { |
| | return; |
| | } |
| | const playPromise = videoEl.play(); |
| | if (playPromise && typeof playPromise.catch === "function") { |
| | playPromise.catch(() => {}); |
| | } |
| | }); |
| | }; |
| | |
| | if (!window.__robommeDemoPlayBindingInstalled) { |
| | const observer = new MutationObserver(() => bindPlayButton()); |
| | observer.observe(document.body, { |
| | childList: true, |
| | subtree: true, |
| | }); |
| | window.__robommeDemoPlayBindingInstalled = true; |
| | } |
| | |
| | bindPlayButton(); |
| | } |
| | """ |
| |
|
| |
|
| | LIVE_OBS_CLIENT_RESIZE_JS = r""" |
| | () => { |
| | if (window.__robommeLiveObsResizerInstalled) { |
| | if (typeof window.__robommeLiveObsSchedule === "function") { |
| | window.__robommeLiveObsSchedule(); |
| | } |
| | return; |
| | } |
| | |
| | const state = { |
| | rafId: null, |
| | intervalId: null, |
| | lastAppliedWidth: null, |
| | lastWrapperNode: null, |
| | lastFrameNode: null, |
| | lastImageNode: null, |
| | rootObserver: null, |
| | layoutObserver: null, |
| | phaseObserver: null, |
| | bodyObserver: null, |
| | }; |
| | |
| | const getTargets = () => { |
| | const root = document.getElementById("live_obs"); |
| | if (!root) { |
| | return null; |
| | } |
| | return { |
| | root, |
| | container: root.querySelector(".image-container"), |
| | frame: root.querySelector(".image-frame"), |
| | image: root.querySelector("img"), |
| | mediaCard: document.getElementById("media_card"), |
| | actionPhaseGroup: document.getElementById("action_phase_group"), |
| | }; |
| | }; |
| | |
| | const applyResize = () => { |
| | state.rafId = null; |
| | const targets = getTargets(); |
| | const wrapper = targets?.root?.querySelector(".upload-container") || targets?.frame?.parentElement; |
| | if (!targets || !targets.container || !wrapper || !targets.frame || !targets.image) { |
| | return; |
| | } |
| | |
| | const containerWidth = Math.floor(targets.container.getBoundingClientRect().width); |
| | if (!Number.isFinite(containerWidth) || containerWidth < 2) { |
| | return; |
| | } |
| | |
| | if ( |
| | state.lastAppliedWidth === containerWidth && |
| | state.lastWrapperNode === wrapper && |
| | state.lastFrameNode === targets.frame && |
| | state.lastImageNode === targets.image |
| | ) { |
| | return; |
| | } |
| | |
| | wrapper.style.width = `${containerWidth}px`; |
| | wrapper.style.maxWidth = "none"; |
| | wrapper.style.display = "block"; |
| | |
| | targets.frame.style.width = `${containerWidth}px`; |
| | targets.frame.style.maxWidth = "none"; |
| | targets.frame.style.display = "block"; |
| | |
| | targets.image.style.width = `${containerWidth}px`; |
| | targets.image.style.maxWidth = "none"; |
| | targets.image.style.height = "auto"; |
| | targets.image.style.display = "block"; |
| | targets.image.style.objectFit = "contain"; |
| | targets.image.style.objectPosition = "center center"; |
| | |
| | state.lastAppliedWidth = containerWidth; |
| | state.lastWrapperNode = wrapper; |
| | state.lastFrameNode = targets.frame; |
| | state.lastImageNode = targets.image; |
| | }; |
| | |
| | const scheduleResize = () => { |
| | if (state.rafId !== null) { |
| | return; |
| | } |
| | state.rafId = window.requestAnimationFrame(applyResize); |
| | }; |
| | |
| | const observeLiveObs = () => { |
| | const targets = getTargets(); |
| | if (!targets) { |
| | return false; |
| | } |
| | |
| | state.rootObserver?.disconnect(); |
| | state.rootObserver = new MutationObserver(scheduleResize); |
| | state.rootObserver.observe(targets.root, { |
| | childList: true, |
| | subtree: true, |
| | attributes: true, |
| | }); |
| | |
| | state.layoutObserver?.disconnect(); |
| | if (window.ResizeObserver) { |
| | state.layoutObserver = new ResizeObserver(scheduleResize); |
| | [targets.root, targets.container, targets.mediaCard, targets.actionPhaseGroup] |
| | .filter(Boolean) |
| | .forEach((node) => state.layoutObserver.observe(node)); |
| | } |
| | |
| | state.phaseObserver?.disconnect(); |
| | state.phaseObserver = new MutationObserver(scheduleResize); |
| | [targets.root, targets.actionPhaseGroup, targets.root.parentElement, targets.root.parentElement?.parentElement] |
| | .filter(Boolean) |
| | .forEach((node) => |
| | state.phaseObserver.observe(node, { |
| | attributes: true, |
| | attributeFilter: ["class", "style", "hidden"], |
| | }) |
| | ); |
| | |
| | scheduleResize(); |
| | return true; |
| | }; |
| | |
| | window.__robommeLiveObsSchedule = scheduleResize; |
| | window.addEventListener("resize", scheduleResize, { passive: true }); |
| | document.addEventListener("visibilitychange", scheduleResize); |
| | |
| | if (!observeLiveObs()) { |
| | state.bodyObserver = new MutationObserver(() => { |
| | if (observeLiveObs()) { |
| | state.bodyObserver?.disconnect(); |
| | state.bodyObserver = null; |
| | } |
| | scheduleResize(); |
| | }); |
| | state.bodyObserver.observe(document.body, { |
| | childList: true, |
| | subtree: true, |
| | }); |
| | } |
| | |
| | state.intervalId = window.setInterval(scheduleResize, 250); |
| | |
| | window.__robommeLiveObsResizerInstalled = true; |
| | } |
| | """ |
| |
|
| |
|
| | THEME_LOCK_HEAD = r""" |
| | <script> |
| | (() => { |
| | const applyLightTheme = () => { |
| | const normalizeThemeState = (store) => { |
| | try { |
| | store.setItem("theme", "light"); |
| | store.setItem("color-scheme", "light"); |
| | store.setItem("gradio-theme", "light"); |
| | for (const key of Object.keys(store)) { |
| | if (!/theme|color-scheme/i.test(key)) { |
| | continue; |
| | } |
| | const value = store.getItem(key); |
| | if (typeof value === "string" && /dark/i.test(value)) { |
| | store.setItem(key, value.replace(/dark/gi, "light")); |
| | } |
| | } |
| | } catch (error) { |
| | console.debug("Failed to normalize theme state", error); |
| | } |
| | }; |
| | const normalizeNode = (node) => { |
| | if (!node) { |
| | return; |
| | } |
| | if (node.classList.contains("dark")) { |
| | node.classList.remove("dark"); |
| | } |
| | if (node.dataset.theme !== "light") { |
| | node.dataset.theme = "light"; |
| | } |
| | if (node.getAttribute("data-color-scheme") !== "light") { |
| | node.setAttribute("data-color-scheme", "light"); |
| | } |
| | if (node.style.colorScheme !== "light") { |
| | node.style.colorScheme = "light"; |
| | } |
| | }; |
| | |
| | normalizeThemeState(window.localStorage); |
| | normalizeThemeState(window.sessionStorage); |
| | normalizeNode(document.documentElement); |
| | normalizeNode(document.body); |
| | }; |
| | |
| | applyLightTheme(); |
| | window.__robommeForceLightTheme = applyLightTheme; |
| | |
| | if (window.__robommeThemeLockInstalled) { |
| | return; |
| | } |
| | |
| | const observer = new MutationObserver(() => applyLightTheme()); |
| | observer.observe(document.documentElement, { |
| | attributes: true, |
| | attributeFilter: ["class", "data-theme", "style"], |
| | }); |
| | |
| | const attachBodyObserver = () => { |
| | if (!document.body || document.body.dataset.robommeThemeObserved === "1") { |
| | return; |
| | } |
| | document.body.dataset.robommeThemeObserved = "1"; |
| | observer.observe(document.body, { |
| | attributes: true, |
| | attributeFilter: ["class", "data-theme", "style"], |
| | }); |
| | }; |
| | |
| | attachBodyObserver(); |
| | document.addEventListener("DOMContentLoaded", attachBodyObserver, { once: true }); |
| | window.addEventListener("load", applyLightTheme, { once: true }); |
| | window.setTimeout(applyLightTheme, 0); |
| | window.setTimeout(applyLightTheme, 100); |
| | window.__robommeThemeLockInstalled = true; |
| | })(); |
| | </script> |
| | """ |
| |
|
| |
|
| | THEME_LOCK_JS = r""" |
| | () => { |
| | if (typeof window.__robommeForceLightTheme === "function") { |
| | window.__robommeForceLightTheme(); |
| | window.setTimeout(window.__robommeForceLightTheme, 0); |
| | } |
| | } |
| | """ |
| |
|
| |
|
| | SET_EPISODE_LOAD_MODE_JS = f""" |
| | () => {{ |
| | window.__robommeLoadStatusMode = {json.dumps(LOAD_STATUS_MODE_EPISODE_LOAD)}; |
| | }} |
| | """ |
| |
|
| | |
| | SET_EPISODE_LOAD_MODE_IF_SWITCH_JS = f""" |
| | (uid, selectedEnv, currentTaskEnv) => {{ |
| | const normalize = (value) => (value == null ? "" : String(value).trim().toLowerCase()); |
| | const nextEnv = normalize(selectedEnv); |
| | const currentEnv = normalize(currentTaskEnv); |
| | window.__robommeLoadStatusMode = |
| | nextEnv && nextEnv !== currentEnv |
| | ? {json.dumps(LOAD_STATUS_MODE_EPISODE_LOAD)} |
| | : {json.dumps(LOAD_STATUS_MODE_IDLE)}; |
| | return [uid, selectedEnv, currentTaskEnv]; |
| | }} |
| | """ |
| |
|
| |
|
| | RESET_EPISODE_LOAD_MODE_JS = f""" |
| | () => {{ |
| | window.__robommeLoadStatusMode = {json.dumps(LOAD_STATUS_MODE_IDLE)}; |
| | }} |
| | """ |
| |
|
| |
|
| | PROGRESS_TEXT_REWRITE_JS = f""" |
| | () => {{ |
| | const modeEpisodeLoad = {json.dumps(LOAD_STATUS_MODE_EPISODE_LOAD)}; |
| | const modeIdle = {json.dumps(LOAD_STATUS_MODE_IDLE)}; |
| | const overlayStateIdle = "idle"; |
| | const overlayStateEpisodeLoad = "episode-load"; |
| | const overlayStateQueue = "queue"; |
| | const episodeLoadingText = {json.dumps(UI_TEXT["progress"]["episode_loading"])}; |
| | const queueWaitText = {json.dumps(UI_TEXT["progress"]["queue_wait"])}; |
| | const elapsedOnlyPattern = /^\\d+(?:\\.\\d+)?s$/i; |
| | const progressStyleKeys = [ |
| | "position", |
| | "top", |
| | "right", |
| | "bottom", |
| | "left", |
| | "transform", |
| | "width", |
| | "max-width", |
| | "display", |
| | "margin", |
| | "text-align", |
| | "color", |
| | "font-size", |
| | "font-weight", |
| | "line-height", |
| | "white-space", |
| | "z-index", |
| | "order", |
| | ]; |
| | const wrapStyleKeys = ["flex-direction", "gap"]; |
| | const spinnerStyleKeys = ["order"]; |
| | |
| | window.__robommeLoadStatusMode = window.__robommeLoadStatusMode || modeIdle; |
| | const getMode = () => window.__robommeLoadStatusMode || modeIdle; |
| | |
| | const isEpisodeLoadRaw = (raw) => |
| | elapsedOnlyPattern.test(raw) || /^processing/i.test(raw); |
| | |
| | const isQueueRaw = (raw) => /^queue:/i.test(raw); |
| | |
| | const clearInlineStyles = (node, keys) => {{ |
| | if (!(node instanceof HTMLElement)) {{ |
| | return; |
| | }} |
| | keys.forEach((key) => node.style.removeProperty(key)); |
| | }}; |
| | |
| | const ensureOverlayStyles = () => {{ |
| | const host = document.getElementById("native_progress_host"); |
| | if (!(host instanceof HTMLElement)) {{ |
| | return null; |
| | }} |
| | host.style.setProperty("position", "fixed", "important"); |
| | host.style.setProperty("inset", "0", "important"); |
| | host.style.setProperty("z-index", "9999", "important"); |
| | host.style.setProperty("pointer-events", "none", "important"); |
| | host.style.setProperty("width", "100vw", "important"); |
| | host.style.setProperty("height", "100vh", "important"); |
| | host.style.setProperty("min-height", "100vh", "important"); |
| | host.style.setProperty("overflow", "visible", "important"); |
| | |
| | const wrap = host.querySelector(".wrap"); |
| | if (wrap instanceof HTMLElement) {{ |
| | wrap.style.setProperty("position", "fixed", "important"); |
| | wrap.style.setProperty("inset", "0", "important"); |
| | wrap.style.setProperty("width", "100vw", "important"); |
| | wrap.style.setProperty("height", "100vh", "important"); |
| | wrap.style.setProperty("min-height", "100vh", "important"); |
| | wrap.style.setProperty("padding", "0", "important"); |
| | wrap.style.setProperty("display", "flex", "important"); |
| | wrap.style.setProperty("align-items", "center", "important"); |
| | wrap.style.setProperty("justify-content", "center", "important"); |
| | wrap.style.setProperty("background", "rgba(255, 255, 255, 0.92)", "important"); |
| | wrap.style.setProperty("backdrop-filter", "blur(2px)", "important"); |
| | }} |
| | const markdown = host.querySelector('[data-testid="markdown"]'); |
| | const prose = |
| | markdown instanceof HTMLElement |
| | ? markdown.querySelector(".prose, .md") || markdown |
| | : null; |
| | const markdownWrapper = |
| | markdown instanceof HTMLElement && markdown.parentElement instanceof HTMLElement |
| | ? markdown.parentElement |
| | : null; |
| | const spinner = |
| | host.querySelector("svg") instanceof SVGElement |
| | ? host.querySelector("svg").closest("div") |
| | : null; |
| | if (markdown instanceof HTMLElement) {{ |
| | markdown.style.setProperty("position", "fixed", "important"); |
| | markdown.style.setProperty("inset", "0", "important"); |
| | markdown.style.setProperty("display", "flex", "important"); |
| | markdown.style.setProperty("align-items", "center", "important"); |
| | markdown.style.setProperty("justify-content", "center", "important"); |
| | markdown.style.setProperty("padding", "24px", "important"); |
| | }} |
| | if (prose instanceof HTMLElement) {{ |
| | prose.style.setProperty("width", "min(720px, calc(100vw - 48px))", "important"); |
| | prose.style.setProperty("max-width", "calc(100vw - 48px)", "important"); |
| | prose.style.setProperty("margin", "0", "important"); |
| | prose.style.setProperty("padding", "0", "important"); |
| | prose.style.setProperty("text-align", "center", "important"); |
| | prose.style.setProperty("color", "#0f172a", "important"); |
| | prose.style.setProperty("font-size", "var(--text-lg)", "important"); |
| | prose.style.setProperty("font-weight", "600", "important"); |
| | prose.style.setProperty("line-height", "1.5", "important"); |
| | prose.style.setProperty("white-space", "pre-line", "important"); |
| | }} |
| | return {{ |
| | wrap, |
| | markdown, |
| | prose, |
| | markdownWrapper, |
| | spinner, |
| | }}; |
| | }}; |
| | |
| | const resolveRawText = (node) => {{ |
| | const displayed = (node.innerText || node.textContent || "").trim(); |
| | return node.dataset.robommeProgressRaw || displayed; |
| | }}; |
| | |
| | const setProgressNodeVisible = (node, visible) => {{ |
| | node.style.setProperty("visibility", visible ? "visible" : "hidden", "important"); |
| | node.style.setProperty("opacity", visible ? "1" : "0", "important"); |
| | }}; |
| | |
| | const resetProgressNode = (node) => {{ |
| | const raw = node.dataset.robommeProgressRaw || (node.innerText || node.textContent || "").trim(); |
| | if (raw) {{ |
| | node.textContent = raw; |
| | }} |
| | delete node.dataset.robommeProgressCustomized; |
| | delete node.dataset.robommeProgressRaw; |
| | delete node.dataset.robommeProgressCustom; |
| | clearInlineStyles(node, progressStyleKeys); |
| | setProgressNodeVisible(node, true); |
| | }}; |
| | |
| | const applyEpisodeLoadLayout = (entry, overlayRefs) => {{ |
| | const node = entry.node; |
| | const {{ |
| | wrap, |
| | spinner, |
| | }} = overlayRefs || {{}}; |
| | if (wrap instanceof HTMLElement) {{ |
| | wrap.style.setProperty("flex-direction", "column", "important"); |
| | wrap.style.setProperty("gap", "24px", "important"); |
| | }} |
| | if (spinner instanceof HTMLElement) {{ |
| | spinner.style.setProperty("order", "1", "important"); |
| | }} |
| | node.dataset.robommeProgressCustomized = "1"; |
| | node.dataset.robommeProgressCustom = episodeLoadingText; |
| | node.textContent = episodeLoadingText; |
| | setProgressNodeVisible(node, true); |
| | node.style.setProperty("position", "static", "important"); |
| | node.style.setProperty("top", "auto", "important"); |
| | node.style.setProperty("right", "auto", "important"); |
| | node.style.setProperty("bottom", "auto", "important"); |
| | node.style.setProperty("left", "auto", "important"); |
| | node.style.setProperty("transform", "none", "important"); |
| | node.style.setProperty("width", "min(720px, calc(100vw - 48px))", "important"); |
| | node.style.setProperty("max-width", "calc(100vw - 48px)", "important"); |
| | node.style.setProperty("display", "block", "important"); |
| | node.style.setProperty("margin", "0", "important"); |
| | node.style.setProperty("text-align", "center", "important"); |
| | node.style.setProperty("color", "#0f172a", "important"); |
| | node.style.setProperty("font-size", "var(--text-lg)", "important"); |
| | node.style.setProperty("font-weight", "600", "important"); |
| | node.style.setProperty("line-height", "1.5", "important"); |
| | node.style.setProperty("white-space", "pre-line", "important"); |
| | node.style.setProperty("z-index", "20", "important"); |
| | node.style.setProperty("order", "2", "important"); |
| | }}; |
| | |
| | const rewriteNode = (entry, overlayState) => {{ |
| | const node = entry.node; |
| | if (!(node instanceof HTMLElement)) {{ |
| | return; |
| | }} |
| | |
| | const raw = entry.raw; |
| | if (getMode() !== modeEpisodeLoad) {{ |
| | resetProgressNode(node); |
| | if (isEpisodeLoadRaw(raw) || isQueueRaw(raw)) {{ |
| | node.textContent = ""; |
| | }} |
| | return; |
| | }} |
| | |
| | node.dataset.robommeProgressRaw = raw; |
| | if (overlayState === overlayStateEpisodeLoad && isEpisodeLoadRaw(raw)) {{ |
| | applyEpisodeLoadLayout(entry, window.__robommeOverlayRefs || null); |
| | return; |
| | }} |
| | |
| | if (overlayState === overlayStateQueue && isQueueRaw(raw)) {{ |
| | const custom = `${{queueWaitText}} | ${{raw}}`; |
| | node.dataset.robommeProgressCustomized = "1"; |
| | node.dataset.robommeProgressCustom = custom; |
| | if ((node.innerText || node.textContent || "").trim() !== custom) {{ |
| | node.textContent = custom; |
| | }} |
| | setProgressNodeVisible(node, true); |
| | return; |
| | }} |
| | |
| | resetProgressNode(node); |
| | }}; |
| | |
| | const syncOverlayContent = (overlayRefs, overlayState) => {{ |
| | if (!overlayRefs) {{ |
| | return; |
| | }} |
| | const {{ |
| | wrap, |
| | markdown, |
| | prose, |
| | markdownWrapper, |
| | spinner, |
| | }} = overlayRefs; |
| | const markdownText = |
| | prose instanceof HTMLElement ? ((prose.innerText || prose.textContent || "").trim()) : ""; |
| | const showMarkdown = overlayState === overlayStateIdle && markdownText.length > 0; |
| | |
| | if (wrap instanceof HTMLElement && overlayState !== overlayStateEpisodeLoad) {{ |
| | clearInlineStyles(wrap, wrapStyleKeys); |
| | }} |
| | if (spinner instanceof HTMLElement && overlayState !== overlayStateEpisodeLoad) {{ |
| | clearInlineStyles(spinner, spinnerStyleKeys); |
| | }} |
| | if (markdownWrapper instanceof HTMLElement) {{ |
| | markdownWrapper.style.setProperty("display", showMarkdown ? "block" : "none", "important"); |
| | markdownWrapper.style.setProperty("visibility", showMarkdown ? "visible" : "hidden", "important"); |
| | }} |
| | if (markdown instanceof HTMLElement) {{ |
| | markdown.style.setProperty("display", showMarkdown ? "flex" : "none", "important"); |
| | markdown.style.setProperty("visibility", showMarkdown ? "visible" : "hidden", "important"); |
| | }} |
| | }}; |
| | |
| | const rewriteAll = () => {{ |
| | const overlayRefs = ensureOverlayStyles(); |
| | window.__robommeOverlayRefs = overlayRefs; |
| | const progressEntries = Array.from(document.querySelectorAll(".progress-text")) |
| | .filter((node) => node instanceof HTMLElement) |
| | .map((node) => {{ |
| | const raw = resolveRawText(node); |
| | return {{ |
| | node, |
| | raw, |
| | }}; |
| | }}); |
| | let overlayState = overlayStateIdle; |
| | if (getMode() === modeEpisodeLoad) {{ |
| | const hasEpisodeLoad = progressEntries.some((entry) => isEpisodeLoadRaw(entry.raw)); |
| | const hasQueue = progressEntries.some((entry) => isQueueRaw(entry.raw)); |
| | if (hasEpisodeLoad) {{ |
| | overlayState = overlayStateEpisodeLoad; |
| | }} else if (hasQueue) {{ |
| | overlayState = overlayStateQueue; |
| | }} |
| | }} |
| | |
| | progressEntries.forEach((entry) => rewriteNode(entry, overlayState)); |
| | syncOverlayContent(overlayRefs, overlayState); |
| | }}; |
| | |
| | const scheduleRewrite = () => {{ |
| | if (window.__robommeProgressRewriteRaf) {{ |
| | return; |
| | }} |
| | window.__robommeProgressRewriteRaf = window.requestAnimationFrame(() => {{ |
| | window.__robommeProgressRewriteRaf = null; |
| | rewriteAll(); |
| | }}); |
| | }}; |
| | |
| | if (!window.__robommeProgressRewriteInstalled) {{ |
| | const observer = new MutationObserver(scheduleRewrite); |
| | observer.observe(document.body, {{ |
| | childList: true, |
| | subtree: true, |
| | characterData: true, |
| | }}); |
| | window.setInterval(scheduleRewrite, 200); |
| | window.__robommeProgressRewriteInstalled = true; |
| | }} |
| | |
| | scheduleRewrite(); |
| | }} |
| | """ |
| |
|
| |
|
| | CSS = f""" |
| | :root {{ |
| | --body-text-size: {UI_GLOBAL_FONT_SIZE} !important; |
| | --prose-text-size: {UI_GLOBAL_FONT_SIZE} !important; |
| | --input-text-size: {UI_GLOBAL_FONT_SIZE} !important; |
| | --block-label-text-size: {UI_GLOBAL_FONT_SIZE} !important; |
| | --block-title-text-size: {UI_GLOBAL_FONT_SIZE} !important; |
| | --block-info-text-size: {UI_GLOBAL_FONT_SIZE} !important; |
| | --checkbox-label-text-size: {UI_GLOBAL_FONT_SIZE} !important; |
| | --button-large-text-size: {UI_GLOBAL_FONT_SIZE} !important; |
| | --button-medium-text-size: {UI_GLOBAL_FONT_SIZE} !important; |
| | --button-small-text-size: {UI_GLOBAL_FONT_SIZE} !important; |
| | --section-header-text-size: {UI_GLOBAL_FONT_SIZE} !important; |
| | --text-md: {UI_GLOBAL_FONT_SIZE} !important; |
| | color-scheme: light !important; |
| | }} |
| | |
| | .native-card {{ |
| | }} |
| | |
| | #header_title h2 {{ |
| | font-size: var(--text-xxl) !important; |
| | }} |
| | |
| | #native_progress_host {{ |
| | position: fixed !important; |
| | inset: 0 !important; |
| | z-index: 9999 !important; |
| | pointer-events: none !important; |
| | }} |
| | |
| | #native_progress_host .wrap {{ |
| | width: 100vw !important; |
| | min-height: 100vh !important; |
| | }} |
| | |
| | #native_progress_host .wrap.translucent {{ |
| | background: rgba(255, 255, 255, 0.92) !important; |
| | backdrop-filter: blur(2px); |
| | }} |
| | |
| | #native_progress_host .pending {{ |
| | min-height: 100vh !important; |
| | }} |
| | |
| | #reference_action_btn button:not(:disabled), |
| | button#reference_action_btn:not(:disabled) {{ |
| | background: #1f8b4c !important; |
| | border-color: #1f8b4c !important; |
| | color: #ffffff !important; |
| | }} |
| | |
| | #reference_action_btn button:not(:disabled):hover, |
| | button#reference_action_btn:not(:disabled):hover {{ |
| | background: #19713d !important; |
| | border-color: #19713d !important; |
| | }} |
| | |
| | #live_obs.live-obs-resizable .image-container {{ |
| | width: 100%; |
| | }} |
| | |
| | #live_obs.live-obs-resizable .upload-container {{ |
| | width: 100%; |
| | }} |
| | |
| | #watch_demo_video_btn, |
| | #watch_demo_video_btn button, |
| | button#watch_demo_video_btn {{ |
| | width: 100%; |
| | }} |
| | |
| | #media_card {{ |
| | --media-card-radius: 8px; |
| | position: relative; |
| | border-radius: var(--media-card-radius); |
| | overflow: visible; |
| | }} |
| | |
| | #media_card > div, |
| | #media_card #action_phase_group, |
| | #media_card #video_phase_group, |
| | #media_card #execution_video_group, |
| | #media_card #live_obs, |
| | #media_card #live_obs button, |
| | #media_card #live_obs .image-frame, |
| | #media_card #live_obs img, |
| | #media_card #demo_video, |
| | #media_card #demo_video video, |
| | #media_card #execute_video, |
| | #media_card #execute_video video {{ |
| | border-radius: var(--media-card-radius); |
| | }} |
| | |
| | #media_card::after {{ |
| | content: ""; |
| | position: absolute; |
| | inset: 0; |
| | border-radius: inherit; |
| | border: 3px solid rgba(225, 29, 72, 0.00); |
| | box-sizing: border-box; |
| | box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.00); |
| | opacity: 0; |
| | pointer-events: none; |
| | transition: opacity 180ms ease, border-color 180ms ease, box-shadow 180ms ease; |
| | z-index: 0; |
| | }} |
| | |
| | @keyframes media-card-point-ring {{ |
| | 0% {{ |
| | box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.00); |
| | border-color: rgba(225, 29, 72, 0.72); |
| | opacity: 0.72; |
| | }} |
| | 18% {{ |
| | box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.28); |
| | border-color: rgba(225, 29, 72, 0.94); |
| | opacity: 1; |
| | }} |
| | 36% {{ |
| | box-shadow: 0 0 0 10px rgba(225, 29, 72, 0.12); |
| | border-color: rgba(225, 29, 72, 0.88); |
| | opacity: 0.94; |
| | }} |
| | 62% {{ |
| | box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.18); |
| | border-color: rgba(225, 29, 72, 0.96); |
| | opacity: 1; |
| | }} |
| | 100% {{ |
| | box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.00); |
| | border-color: rgba(225, 29, 72, 0.72); |
| | opacity: 0.72; |
| | }} |
| | }} |
| | |
| | #media_card:has(#live_obs.{LIVE_OBS_POINT_WAIT_CLASS})::after {{ |
| | border-color: rgba(225, 29, 72, 0.94); |
| | box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.00); |
| | opacity: 1; |
| | animation: media-card-point-ring 1.2s ease-in-out infinite; |
| | }} |
| | """ |
| |
|
| |
|
| | def extract_last_goal(goal_text): |
| | """Extract last goal from goal text that may be a list representation.""" |
| | if not goal_text: |
| | return "" |
| | text = goal_text.strip() |
| | if text.startswith("[") and text.endswith("]"): |
| | try: |
| | goals = ast.literal_eval(text) |
| | if isinstance(goals, list) and goals: |
| | for goal in reversed(goals): |
| | goal_text = str(goal).strip() |
| | if goal_text: |
| | return goal_text |
| | except Exception: |
| | pass |
| | return text.split("\n")[0].strip() |
| |
|
| |
|
| | def capitalize_first_letter(text): |
| | """Uppercase only the first character for display.""" |
| | if not text: |
| | return text |
| | if len(text) == 1: |
| | return text.upper() |
| | return text[0].upper() + text[1:] |
| |
|
| |
|
| | def render_header_goal(goal_text): |
| | """Render header goal from raw goal text using display-only normalization.""" |
| | last_goal = extract_last_goal(goal_text or "") |
| | if not last_goal: |
| | return "—" |
| | return capitalize_first_letter(last_goal) |
| |
|
| |
|
| | def _phase_from_updates(main_interface_update, demo_video_phase_update): |
| | if isinstance(main_interface_update, dict) and main_interface_update.get("visible") is False: |
| | return PHASE_INIT |
| | if isinstance(demo_video_phase_update, dict) and demo_video_phase_update.get("visible") is True: |
| | return PHASE_DEMO_VIDEO |
| | return PHASE_ACTION_POINT |
| |
|
| |
|
| | def _with_phase_from_load(load_result): |
| | load_result = _normalize_load_result(load_result) |
| | phase = _phase_from_updates(load_result[1], load_result[15]) |
| | return ( |
| | *load_result, |
| | phase, |
| | gr.update(value=""), |
| | ) |
| |
|
| |
|
| | def _with_rejected_init(load_result, message): |
| | load_result = _normalize_load_result(load_result) |
| | return ( |
| | *load_result, |
| | PHASE_INIT, |
| | gr.update(value=message), |
| | ) |
| |
|
| |
|
| | def _normalize_load_result(load_result): |
| | if not isinstance(load_result, (tuple, list)): |
| | return load_result |
| | normalized = list(load_result) |
| | if len(normalized) in {19, 20}: |
| | normalized.insert(8, gr.update(value=None, visible=False, playback_position=0)) |
| | normalized.insert(16, gr.update(visible=False)) |
| | if len(normalized) == 21: |
| | normalized.append( |
| | { |
| | "preserve_terminal_log": False, |
| | "terminal_log_value": None, |
| | } |
| | ) |
| | return tuple(normalized) |
| |
|
| |
|
| | def _phase_visibility_updates(phase): |
| | if phase == PHASE_DEMO_VIDEO: |
| | return ( |
| | gr.update(visible=True), |
| | gr.update(visible=False), |
| | gr.update(visible=False), |
| | gr.update(visible=False), |
| | ) |
| | if phase == PHASE_EXECUTION_VIDEO: |
| | return ( |
| | gr.update(visible=False), |
| | gr.update(visible=True), |
| | gr.update(visible=False), |
| | gr.update(visible=True), |
| | ) |
| | if phase == PHASE_ACTION_POINT: |
| | return ( |
| | gr.update(visible=False), |
| | gr.update(visible=False), |
| | gr.update(visible=True), |
| | gr.update(visible=True), |
| | ) |
| | return ( |
| | gr.update(visible=False), |
| | gr.update(visible=False), |
| | gr.update(visible=False), |
| | gr.update(visible=False), |
| | ) |
| |
|
| |
|
| | def create_ui_blocks(): |
| | """构建 Gradio Blocks，并完成页面阶段状态（phase）的联动绑定。""" |
| |
|
| | def render_header_task(task_text): |
| | clean_task = str(task_text or "").strip() |
| | if not clean_task: |
| | return None |
| | if clean_task.lower().startswith("current task:"): |
| | clean_task = clean_task.split(":", 1)[1].strip() |
| | marker = " (Episode " |
| | if marker in clean_task: |
| | clean_task = clean_task.split(marker, 1)[0].strip() |
| | return " ".join(clean_task.splitlines()).strip() or None |
| |
|
| | with gr.Blocks(title="Oracle Planner Interface") as demo: |
| | demo.css = CSS |
| | demo.theme = APP_THEME |
| | demo.head = THEME_LOCK_HEAD |
| |
|
| | gr.Markdown("## 🔥 RoboMME Interactive Demo 🚀🚀🚀", elem_id="header_title") |
| | gr.Markdown("### Curious about memory-based robotic tasks? 🤖 Try it yourself 👇") |
| | with gr.Row(): |
| | with gr.Column(scale=1): |
| | header_task_box = gr.Dropdown( |
| | choices=list(user_manager.env_choices), |
| | value=render_header_task(""), |
| | label="Current Task 📚", |
| | show_label=True, |
| | interactive=True, |
| | elem_id="header_task", |
| | ) |
| | with gr.Column(scale=2): |
| | header_goal_box = gr.Textbox( |
| | value=render_header_goal(""), |
| | label="Task Goal 🏆", |
| | show_label=True, |
| | interactive=False, |
| | lines=1, |
| | elem_id="header_goal", |
| | ) |
| |
|
| | uid_state = gr.State( |
| | value=None, |
| | time_to_live=SESSION_TIMEOUT, |
| | delete_callback=cleanup_user_session, |
| | ) |
| | ui_phase_state = gr.State(value=PHASE_INIT) |
| | post_execute_controls_state = gr.State( |
| | value={ |
| | "exec_btn_interactive": True, |
| | "reference_action_interactive": True, |
| | } |
| | ) |
| | post_execute_log_state = gr.State( |
| | value={ |
| | "preserve_terminal_log": False, |
| | "terminal_log_value": None, |
| | "preserve_execute_video_log": False, |
| | "execute_video_log_value": None, |
| | } |
| | ) |
| | current_task_env_state = gr.State(value=None) |
| | suppress_next_option_change_state = gr.State(value=False) |
| |
|
| | task_info_box = gr.Textbox(visible=False, elem_id="task_info_box") |
| | progress_info_box = gr.Textbox(visible=False) |
| | goal_box = gr.Textbox(visible=False) |
| |
|
| | with gr.Column(visible=True, elem_id="main_interface_root") as main_interface: |
| | native_progress_host = gr.Markdown( |
| | value="", |
| | visible=True, |
| | container=False, |
| | elem_id="native_progress_host", |
| | ) |
| | with gr.Row(elem_id="main_layout_row"): |
| | with gr.Column(scale=POINT_SELECTION_SCALE): |
| | with gr.Column(elem_classes=["native-card"], elem_id="media_card"): |
| | with gr.Column(visible=False, elem_id="video_phase_group") as video_phase_group: |
| | video_display = gr.Video( |
| | label="Video Playback 🎬", |
| | interactive=False, |
| | elem_id="demo_video", |
| | autoplay=False, |
| | show_label=True, |
| | visible=True, |
| | ) |
| | watch_demo_video_btn = gr.Button( |
| | "Watch Video Input 🎬", |
| | variant="primary", |
| | size="lg", |
| | interactive=False, |
| | visible=False, |
| | elem_id="watch_demo_video_btn", |
| | ) |
| |
|
| | with gr.Column(visible=False, elem_id="execution_video_group") as execution_video_group: |
| | execute_video_display = gr.Video( |
| | label="Execution Playback 🎬", |
| | interactive=False, |
| | elem_id="execute_video", |
| | autoplay=True, |
| | show_label=True, |
| | visible=True, |
| | ) |
| |
|
| | with gr.Column(visible=False, elem_id="action_phase_group") as action_phase_group: |
| | img_display = gr.Image( |
| | label="Point Selection", |
| | interactive=False, |
| | type="pil", |
| | elem_id="live_obs", |
| | elem_classes=get_live_obs_elem_classes(), |
| | show_label=True, |
| | buttons=[], |
| | sources=[], |
| | ) |
| |
|
| | with gr.Column(scale=CONTROL_PANEL_SCALE): |
| | with gr.Column(visible=False, elem_id="control_panel_group") as control_panel_group: |
| | with gr.Row(elem_id="right_top_row", equal_height=False): |
| | with gr.Column(scale=RIGHT_TOP_ACTION_SCALE, elem_id="right_action_col"): |
| | with gr.Column(elem_classes=["native-card"], elem_id="action_selection_card"): |
| | options_radio = gr.Radio( |
| | choices=[], |
| | label="Action Selection 🦾", |
| | type="value", |
| | show_label=True, |
| | elem_id="action_radio", |
| | ) |
| | coords_box = gr.Textbox( |
| | label="Coords", |
| | value="", |
| | interactive=False, |
| | show_label=False, |
| | visible=False, |
| | elem_id="coords_box", |
| | ) |
| |
|
| | with gr.Column(scale=RIGHT_TOP_LOG_SCALE, elem_id="right_log_col"): |
| | with gr.Column(elem_classes=["native-card"], elem_id="log_card"): |
| | log_output = gr.Textbox( |
| | value="", |
| | lines=4, |
| | max_lines=None, |
| | show_label=True, |
| | interactive=False, |
| | elem_id="log_output", |
| | label="System Log 📝", |
| | ) |
| |
|
| | with gr.Row(elem_id="action_buttons_row"): |
| | with gr.Column(elem_classes=["native-card", "native-button-card"], elem_id="exec_btn_card"): |
| | exec_btn = gr.Button("EXECUTE 🤖", variant="stop", size="lg", elem_id="exec_btn") |
| |
|
| | with gr.Column( |
| | elem_classes=["native-card", "native-button-card"], |
| | elem_id="reference_btn_card", |
| | ): |
| | reference_action_btn = gr.Button( |
| | "Ground Truth Action 🙋♀️", |
| | variant="secondary", |
| | interactive=False, |
| | elem_id="reference_action_btn", |
| | ) |
| |
|
| | with gr.Column( |
| | elem_classes=["native-card", "native-button-card"], |
| | elem_id="restart_episode_btn_card", |
| | ): |
| | restart_episode_btn = gr.Button( |
| | "Restart Episode 🔄", |
| | variant="secondary", |
| | interactive=False, |
| | elem_id="restart_episode_btn", |
| | ) |
| |
|
| | with gr.Column( |
| | elem_classes=["native-card", "native-button-card"], |
| | elem_id="next_task_btn_card", |
| | ): |
| | next_task_btn = gr.Button( |
| | "Change Episode ⏩️", |
| | variant="primary", |
| | interactive=False, |
| | elem_id="next_task_btn", |
| | ) |
| |
|
| | with gr.Accordion( |
| | "Task Hint💡", |
| | open=False, |
| | visible=True, |
| | elem_classes=["native-card"], |
| | elem_id="task_hint_card", |
| | ): |
| | task_hint_display = gr.Textbox( |
| | value="", |
| | lines=8, |
| | max_lines=16, |
| | show_label=False, |
| | interactive=True, |
| | elem_id="task_hint_display", |
| | ) |
| |
|
| | load_flow_outputs = [ |
| | uid_state, |
| | main_interface, |
| | img_display, |
| | log_output, |
| | options_radio, |
| | goal_box, |
| | coords_box, |
| | video_display, |
| | execute_video_display, |
| | watch_demo_video_btn, |
| | task_info_box, |
| | progress_info_box, |
| | restart_episode_btn, |
| | next_task_btn, |
| | exec_btn, |
| | video_phase_group, |
| | execution_video_group, |
| | action_phase_group, |
| | control_panel_group, |
| | task_hint_display, |
| | reference_action_btn, |
| | post_execute_log_state, |
| | ui_phase_state, |
| | native_progress_host, |
| | ] |
| | phase_visibility_outputs = [ |
| | video_phase_group, |
| | execution_video_group, |
| | action_phase_group, |
| | control_panel_group, |
| | ] |
| | action_queue_kwargs = { |
| | "concurrency_id": SESSION_CONCURRENCY_ID, |
| | "concurrency_limit": SESSION_CONCURRENCY_LIMIT, |
| | } |
| |
|
| | def _skip_load_flow(): |
| | return tuple(gr.skip() for _ in range(len(load_flow_outputs))) |
| |
|
| | def _coerce_init_load_result(result): |
| | if isinstance(result, dict): |
| | status = result.get("status") |
| | if status == "ready": |
| | return _with_phase_from_load(result.get("load_result")) |
| | if status == "rejected": |
| | return _with_rejected_init( |
| | result.get("load_result"), |
| | result.get("message", UI_TEXT["progress"]["entry_rejected"]), |
| | ) |
| | return _with_phase_from_load(result) |
| |
|
| | def _normalize_env_choice(env_value, choices): |
| | if env_value is None: |
| | return None |
| | env_text = str(env_value).strip() |
| | if not env_text: |
| | return None |
| | lower_map = {} |
| | for choice in choices: |
| | choice_text = str(choice).strip() |
| | if choice_text: |
| | lower_map.setdefault(choice_text.lower(), choice_text) |
| | return lower_map.get(env_text.lower(), env_text) |
| |
|
| | def _resolve_header_task_state(task_text, fallback_env=None): |
| | base_choices = list(user_manager.env_choices) |
| | parsed_env = render_header_task(task_text) |
| | selected_env = _normalize_env_choice(parsed_env, base_choices) |
| | if selected_env is None: |
| | selected_env = _normalize_env_choice(fallback_env, base_choices) |
| |
|
| | choices = list(base_choices) |
| | if selected_env and selected_env not in choices: |
| | choices.append(selected_env) |
| | return choices, selected_env |
| |
|
| | def _build_header_task_update(task_text, fallback_env=None): |
| | choices, selected_env = _resolve_header_task_state(task_text, fallback_env=fallback_env) |
| | return gr.update(choices=choices, value=selected_env) |
| |
|
| | def sync_header_from_task(task_text, goal_text): |
| | _, selected_env = _resolve_header_task_state(task_text) |
| | return _build_header_task_update(task_text), render_header_goal(goal_text), selected_env |
| |
|
| | def sync_header_from_goal(goal_text, task_text, current_header_task): |
| | _, selected_env = _resolve_header_task_state(task_text, fallback_env=current_header_task) |
| | return ( |
| | _build_header_task_update(task_text, fallback_env=current_header_task), |
| | render_header_goal(goal_text), |
| | selected_env, |
| | ) |
| |
|
| | def init_app_with_phase(request: gr.Request): |
| | return _coerce_init_load_result(init_app(request)) |
| |
|
| | def load_next_task_with_phase(uid): |
| | return _with_phase_from_load(load_next_task_wrapper(uid)) |
| |
|
| | def restart_episode_with_phase(uid): |
| | return _with_phase_from_load(restart_episode_wrapper(uid)) |
| |
|
| | def switch_env_with_phase(uid, selected_env): |
| | return _with_phase_from_load(switch_env_wrapper(uid, selected_env)) |
| |
|
| | def _normalize_selected_env(selected_env, current_task_env): |
| | base_choices = list(user_manager.env_choices) |
| | normalized_selected_env = _normalize_env_choice(selected_env, base_choices) |
| | normalized_current_env = _normalize_env_choice(current_task_env, base_choices) |
| | return normalized_selected_env, normalized_current_env |
| |
|
| | def maybe_switch_env_with_phase(uid, selected_env, current_task_env): |
| | normalized_selected_env, normalized_current_env = _normalize_selected_env( |
| | selected_env, |
| | current_task_env, |
| | ) |
| | if not normalized_selected_env or normalized_selected_env == normalized_current_env: |
| | return _skip_load_flow() |
| | return switch_env_with_phase(uid, normalized_selected_env) |
| |
|
| | task_info_box.change( |
| | fn=sync_header_from_task, |
| | inputs=[task_info_box, goal_box], |
| | outputs=[header_task_box, header_goal_box, current_task_env_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| | goal_box.change( |
| | fn=sync_header_from_goal, |
| | inputs=[goal_box, task_info_box, header_task_box], |
| | outputs=[header_task_box, header_goal_box, current_task_env_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| |
|
| | header_task_switch = header_task_box.select( |
| | fn=maybe_switch_env_with_phase, |
| | inputs=[uid_state, header_task_box, current_task_env_state], |
| | outputs=load_flow_outputs, |
| | show_progress="full", |
| | js=SET_EPISODE_LOAD_MODE_IF_SWITCH_JS, |
| | show_progress_on=[native_progress_host], |
| | **action_queue_kwargs, |
| | ).then( |
| | fn=_phase_visibility_updates, |
| | inputs=[ui_phase_state], |
| | outputs=phase_visibility_outputs, |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=sync_header_from_task, |
| | inputs=[task_info_box, goal_box], |
| | outputs=[header_task_box, header_goal_box, current_task_env_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| | header_task_switch.success( |
| | fn=None, |
| | js=RESET_EPISODE_LOAD_MODE_JS, |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| | header_task_switch.failure( |
| | fn=None, |
| | js=RESET_EPISODE_LOAD_MODE_JS, |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| |
|
| | next_task_click = next_task_btn.click( |
| | fn=load_next_task_with_phase, |
| | inputs=[uid_state], |
| | outputs=load_flow_outputs, |
| | show_progress="full", |
| | js=SET_EPISODE_LOAD_MODE_JS, |
| | show_progress_on=[native_progress_host], |
| | **action_queue_kwargs, |
| | ).then( |
| | fn=_phase_visibility_updates, |
| | inputs=[ui_phase_state], |
| | outputs=phase_visibility_outputs, |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=sync_header_from_task, |
| | inputs=[task_info_box, goal_box], |
| | outputs=[header_task_box, header_goal_box, current_task_env_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| | next_task_click.success( |
| | fn=None, |
| | js=RESET_EPISODE_LOAD_MODE_JS, |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| | next_task_click.failure( |
| | fn=None, |
| | js=RESET_EPISODE_LOAD_MODE_JS, |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| |
|
| | restart_episode_click = restart_episode_btn.click( |
| | fn=restart_episode_with_phase, |
| | inputs=[uid_state], |
| | outputs=load_flow_outputs, |
| | show_progress="full", |
| | js=SET_EPISODE_LOAD_MODE_JS, |
| | show_progress_on=[native_progress_host], |
| | **action_queue_kwargs, |
| | ).then( |
| | fn=_phase_visibility_updates, |
| | inputs=[ui_phase_state], |
| | outputs=phase_visibility_outputs, |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=sync_header_from_task, |
| | inputs=[task_info_box, goal_box], |
| | outputs=[header_task_box, header_goal_box, current_task_env_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| | restart_episode_click.success( |
| | fn=None, |
| | js=RESET_EPISODE_LOAD_MODE_JS, |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| | restart_episode_click.failure( |
| | fn=None, |
| | js=RESET_EPISODE_LOAD_MODE_JS, |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| |
|
| | video_display.end( |
| | fn=on_demo_video_end_transition, |
| | inputs=[uid_state, ui_phase_state], |
| | outputs=[ |
| | video_phase_group, |
| | action_phase_group, |
| | control_panel_group, |
| | log_output, |
| | watch_demo_video_btn, |
| | ui_phase_state, |
| | ], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| | video_display.stop( |
| | fn=on_demo_video_end_transition, |
| | inputs=[uid_state, ui_phase_state], |
| | outputs=[ |
| | video_phase_group, |
| | action_phase_group, |
| | control_panel_group, |
| | log_output, |
| | watch_demo_video_btn, |
| | ui_phase_state, |
| | ], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| |
|
| | execute_video_display.end( |
| | fn=on_execute_video_end_transition, |
| | inputs=[uid_state, post_execute_controls_state, post_execute_log_state], |
| | outputs=[ |
| | execution_video_group, |
| | action_phase_group, |
| | control_panel_group, |
| | options_radio, |
| | exec_btn, |
| | restart_episode_btn, |
| | next_task_btn, |
| | img_display, |
| | log_output, |
| | reference_action_btn, |
| | task_hint_display, |
| | post_execute_log_state, |
| | ui_phase_state, |
| | ], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| | execute_video_display.stop( |
| | fn=on_execute_video_end_transition, |
| | inputs=[uid_state, post_execute_controls_state, post_execute_log_state], |
| | outputs=[ |
| | execution_video_group, |
| | action_phase_group, |
| | control_panel_group, |
| | options_radio, |
| | exec_btn, |
| | restart_episode_btn, |
| | next_task_btn, |
| | img_display, |
| | log_output, |
| | reference_action_btn, |
| | task_hint_display, |
| | post_execute_log_state, |
| | ui_phase_state, |
| | ], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| |
|
| | img_display.select( |
| | fn=on_map_click, |
| | inputs=[uid_state, options_radio], |
| | outputs=[img_display, coords_box, log_output], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| |
|
| | options_radio.change( |
| | fn=on_option_select, |
| | inputs=[uid_state, options_radio, coords_box, suppress_next_option_change_state, post_execute_log_state], |
| | outputs=[coords_box, img_display, log_output, suppress_next_option_change_state, post_execute_log_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| |
|
| | watch_demo_video_btn.click( |
| | fn=on_demo_video_play, |
| | inputs=[uid_state], |
| | outputs=[watch_demo_video_btn], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| |
|
| | reference_action_btn.click( |
| | fn=on_reference_action, |
| | inputs=[uid_state, options_radio], |
| | outputs=[img_display, options_radio, coords_box, log_output, suppress_next_option_change_state], |
| | **action_queue_kwargs, |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| |
|
| | exec_btn.click( |
| | fn=precheck_execute_inputs, |
| | inputs=[uid_state, options_radio, coords_box], |
| | outputs=[], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=switch_to_execute_phase, |
| | inputs=[uid_state], |
| | outputs=[ |
| | options_radio, |
| | exec_btn, |
| | restart_episode_btn, |
| | next_task_btn, |
| | img_display, |
| | reference_action_btn, |
| | task_hint_display, |
| | ], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=execute_step, |
| | inputs=[uid_state, options_radio, coords_box], |
| | outputs=[ |
| | img_display, |
| | log_output, |
| | task_info_box, |
| | progress_info_box, |
| | restart_episode_btn, |
| | next_task_btn, |
| | exec_btn, |
| | execute_video_display, |
| | action_phase_group, |
| | control_panel_group, |
| | execution_video_group, |
| | options_radio, |
| | coords_box, |
| | reference_action_btn, |
| | task_hint_display, |
| | post_execute_controls_state, |
| | post_execute_log_state, |
| | ui_phase_state, |
| | ], |
| | show_progress="hidden", |
| | **action_queue_kwargs, |
| | ).then( |
| | fn=_phase_visibility_updates, |
| | inputs=[ui_phase_state], |
| | outputs=phase_visibility_outputs, |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| |
|
| | demo.load( |
| | fn=None, |
| | js=THEME_LOCK_JS, |
| | queue=False, |
| | ) |
| |
|
| | demo.load( |
| | fn=None, |
| | js=LIVE_OBS_CLIENT_RESIZE_JS, |
| | queue=False, |
| | ) |
| |
|
| | demo.load( |
| | fn=None, |
| | js=DEMO_VIDEO_PLAY_BINDING_JS, |
| | queue=False, |
| | ) |
| |
|
| | demo.load( |
| | fn=None, |
| | js=PROGRESS_TEXT_REWRITE_JS, |
| | queue=False, |
| | ) |
| |
|
| | init_load = demo.load( |
| | fn=init_app_with_phase, |
| | inputs=[], |
| | outputs=load_flow_outputs, |
| | show_progress="full", |
| | js=SET_EPISODE_LOAD_MODE_JS, |
| | show_progress_on=[native_progress_host], |
| | queue=False, |
| | ).then( |
| | fn=_phase_visibility_updates, |
| | inputs=[ui_phase_state], |
| | outputs=phase_visibility_outputs, |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=sync_header_from_task, |
| | inputs=[task_info_box, goal_box], |
| | outputs=[header_task_box, header_goal_box, current_task_env_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ).then( |
| | fn=touch_session, |
| | inputs=[uid_state], |
| | outputs=[uid_state], |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| | init_load.success( |
| | fn=None, |
| | js=RESET_EPISODE_LOAD_MODE_JS, |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| | init_load.failure( |
| | fn=None, |
| | js=RESET_EPISODE_LOAD_MODE_JS, |
| | queue=False, |
| | show_progress="hidden", |
| | ) |
| |
|
| | demo.unload(fn=cleanup_current_request_session) |
| | demo.queue(max_size=None, default_concurrency_limit=None) |
| |
|
| | return demo |
| |
|
