gradio遮罩修复1

gradio-web/test/test_queue_session_limit_e2e.py

@@ -268,6 +268,7 @@ def test_entry_rejects_immediately_when_session_limit_is_full(monkeypatch):
             assert overlay_snapshot["width"] and overlay_snapshot["width"] > 0
             assert overlay_snapshot["height"] and overlay_snapshot["height"] >= 400
             assert overlay_snapshot["background"] == "rgba(255, 255, 255, 0.92)"
+            assert pages[-1].evaluate("() => document.getElementById('robomme_episode_loading_copy') === null") is True
             rejection_snapshot = _read_session_wait_overlay_snapshot(pages[-1])
             assert rejection_snapshot["content"] == config.UI_TEXT["progress"]["entry_rejected"]
             assert _read_unified_overlay_text(pages[-1]) == config.UI_TEXT["progress"]["entry_rejected"]
@@ -372,6 +373,10 @@ def test_single_load_uses_native_episode_loading_copy(monkeypatch):
             assert overlay_snapshot["width"] and overlay_snapshot["width"] > 0
             assert overlay_snapshot["height"] and overlay_snapshot["height"] >= 400
             assert overlay_snapshot["background"] == "rgba(255, 255, 255, 0.92)"
+            assert _read_progress_text(page) == config.UI_TEXT["progress"]["episode_loading"]
+            assert page.evaluate("() => document.getElementById('robomme_episode_loading_copy') === null") is True
+            wait_snapshot = _read_session_wait_overlay_snapshot(page)
+            assert wait_snapshot["content"] is None
 
             page.wait_for_selector("#main_interface_root", state="visible", timeout=15000)
 
@@ -448,6 +453,7 @@ def test_execute_does_not_use_episode_loading_copy(monkeypatch):
             body_text = page.evaluate("() => document.body.innerText")
             assert "The episode is loading..." not in body_text
             assert "too many people playing" not in body_text
+            assert page.evaluate("() => document.getElementById('robomme_episode_loading_copy') === null") is True
 
             browser.close()
     finally:

gradio-web/test/test_ui_phase_machine_runtime_e2e.py

@@ -129,6 +129,72 @@ def _read_log_output_value(page) -> str | None:
     )
 
 
+def _read_progress_markdown_snapshot(page) -> dict[str, bool | str | None]:
+    return page.evaluate(
+        """() => {
+            const host = document.getElementById('native_progress_host');
+            const pending = host?.querySelector('.pending');
+            const markdown = host?.querySelector('[data-testid="markdown"]');
+            const prose = markdown ? markdown.querySelector('.prose, .md') || markdown : null;
+            if (!host) {
+                return {
+                    pendingPresent: false,
+                    pendingVisible: false,
+                    markdownVisible: false,
+                    text: null,
+                };
+            }
+            const pendingStyle = pending ? getComputedStyle(pending) : null;
+            const markdownStyle = markdown ? getComputedStyle(markdown) : null;
+            const text = prose ? ((prose.textContent || '').trim()) : '';
+            return {
+                pendingPresent: !!pending,
+                pendingVisible: !!pendingStyle && pendingStyle.display !== 'none' && pendingStyle.visibility !== 'hidden',
+                markdownVisible:
+                    !!markdownStyle &&
+                    markdownStyle.display !== 'none' &&
+                    markdownStyle.visibility !== 'hidden',
+                text: text || null,
+            };
+        }"""
+    )
+
+
+def _read_progress_text_snapshot(page) -> dict[str, float | bool | str | None]:
+    return page.evaluate(
+        """() => {
+            const node = document.querySelector('.progress-text');
+            if (!node) {
+                return {
+                    present: false,
+                    visible: false,
+                    text: null,
+                    x: null,
+                    y: null,
+                    width: null,
+                    height: null,
+                };
+            }
+            const style = getComputedStyle(node);
+            const rect = node.getBoundingClientRect();
+            return {
+                present: true,
+                visible:
+                    style.display !== 'none' &&
+                    style.visibility !== 'hidden' &&
+                    Number.parseFloat(style.opacity || '1') > 0 &&
+                    rect.width > 0 &&
+                    rect.height > 0,
+                text: (node.textContent || '').trim() || null,
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height,
+            };
+        }"""
+    )
+
+
 def _read_elem_classes(page, elem_id: str) -> list[str] | None:
     return page.evaluate(
         """(elemId) => {
@@ -1096,19 +1162,33 @@ def test_unified_loading_overlay_init_flow(monkeypatch):
             page.wait_for_function(
                 """() => {
                     const node = document.querySelector('.progress-text');
-                    return !!node && (node.textContent || '').includes('The episode is loading...');
-                }"""
-                ,
+                    if (!node) return false;
+                    const style = getComputedStyle(node);
+                    const rect = node.getBoundingClientRect();
+                    return (
+                        style.display !== 'none' &&
+                        style.visibility !== 'hidden' &&
+                        Number.parseFloat(style.opacity || '1') > 0 &&
+                        rect.width > 0 &&
+                        rect.height > 0 &&
+                        (node.textContent || '').includes('The episode is loading...')
+                    );
+                }""",
                 timeout=5000,
             )
-            progress_text = page.evaluate(
-                """() => {
-                    const node = document.querySelector('.progress-text');
-                    return node ? (node.textContent || '') : '';
-                }"""
-            )
-            assert canonical_copy in progress_text
-            assert superseded_copy not in progress_text
+            progress_snapshot = _read_progress_text_snapshot(page)
+            markdown_snapshot = _read_progress_markdown_snapshot(page)
+
+            assert progress_snapshot["present"] is True
+            assert progress_snapshot["visible"] is True
+            assert progress_snapshot["text"] == canonical_copy
+            assert progress_snapshot["x"] is not None and progress_snapshot["x"] < 500
+            assert progress_snapshot["y"] is not None and progress_snapshot["y"] > 300
+            assert markdown_snapshot["text"] is None
+            assert markdown_snapshot["pendingVisible"] is False
+            assert markdown_snapshot["markdownVisible"] is False
+            assert page.locator("#robomme_episode_loading_copy").count() == 0
+            assert superseded_copy not in str(progress_snapshot["text"] or "")
             assert legacy_copy not in page.content()
             assert page.locator("#loading_overlay_group").count() == 0
 
@@ -1139,6 +1219,141 @@ def test_unified_loading_overlay_init_flow(monkeypatch):
     assert calls["init"] >= 1
 
 
+def test_episode_loading_copy_after_change_episode(monkeypatch):
+    ui_layout = importlib.reload(importlib.import_module("ui_layout"))
+
+    fake_obs = np.zeros((24, 24, 3), dtype=np.uint8)
+    fake_obs_img = Image.fromarray(fake_obs)
+    calls = {"init": 0, "next": 0}
+
+    def _load_result(uid: str, episode_idx: int, log_text: str):
+        return (
+            uid,
+            gr.update(visible=True),  # main_interface
+            gr.update(value=fake_obs_img.copy(), interactive=False),  # img_display
+            log_text,  # log_output
+            gr.update(choices=[("pick", 0)], value=None),  # options_radio
+            "goal",  # goal_box
+            "No need for coordinates",  # coords_box
+            gr.update(value=None, visible=False),  # video_display
+            gr.update(visible=False, interactive=False),  # watch_demo_video_btn
+            f"PickXtimes (Episode {episode_idx})",  # task_info_box
+            f"Completed: {episode_idx - 1}",  # progress_info_box
+            gr.update(interactive=True),  # restart_episode_btn
+            gr.update(interactive=True),  # next_task_btn
+            gr.update(interactive=True),  # exec_btn
+            gr.update(visible=False),  # video_phase_group
+            gr.update(visible=True),   # action_phase_group
+            gr.update(visible=True),   # control_panel_group
+            gr.update(value="hint"),  # task_hint_display
+            gr.update(interactive=True),  # reference_action_btn
+        )
+
+    def fake_init_app(_request=None):
+        calls["init"] += 1
+        return _load_result("uid-next-episode", 1, "ready-1")
+
+    def fake_load_next_task_wrapper(uid):
+        calls["next"] += 1
+        time.sleep(0.8)
+        return _load_result(uid, 2, "ready-2")
+
+    monkeypatch.setattr(ui_layout, "init_app", fake_init_app)
+    monkeypatch.setattr(ui_layout, "load_next_task_wrapper", fake_load_next_task_wrapper)
+
+    demo = ui_layout.create_ui_blocks()
+
+    port = _free_port()
+    host = "127.0.0.1"
+    root_url = f"http://{host}:{port}/"
+
+    app = FastAPI(title="episode-loading-copy-change-episode-test")
+    app = gr.mount_gradio_app(app, demo, path="/")
+
+    config = uvicorn.Config(app, host=host, port=port, log_level="error")
+    server = uvicorn.Server(config)
+    thread = threading.Thread(target=server.run, daemon=True)
+    thread.start()
+    _wait_http_ready(root_url)
+
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True)
+            page = browser.new_page(viewport={"width": 1280, "height": 900})
+            page.goto(root_url, wait_until="domcontentloaded")
+            page.wait_for_selector("#main_interface_root", state="visible", timeout=15000)
+            page.wait_for_function(
+                """() => {
+                    const root = document.getElementById('header_task');
+                    if (!root) return false;
+                    const input = root.querySelector('input');
+                    if (input && typeof input.value === 'string' && input.value.trim() === 'PickXtimes') {
+                        return true;
+                    }
+                    const selected = root.querySelector('.single-select');
+                    return !!selected && (selected.textContent || '').trim() === 'PickXtimes';
+                }""",
+                timeout=5000,
+            )
+            page.wait_for_function(
+                """() => {
+                    const host = document.getElementById('native_progress_host');
+                    const markdown = host?.querySelector('[data-testid="markdown"]');
+                    const prose = markdown ? markdown.querySelector('.prose, .md') || markdown : null;
+                    const text = prose ? ((prose.innerText || prose.textContent || '').trim()) : '';
+                    return text === '';
+                }""",
+                timeout=5000,
+            )
+
+            page.locator("#next_task_btn button, button#next_task_btn").first.click()
+
+            page.wait_for_function(
+                """() => {
+                    const node = document.querySelector('.progress-text');
+                    if (!node) return false;
+                    const style = getComputedStyle(node);
+                    const rect = node.getBoundingClientRect();
+                    return (
+                        style.display !== 'none' &&
+                        style.visibility !== 'hidden' &&
+                        Number.parseFloat(style.opacity || '1') > 0 &&
+                        rect.width > 0 &&
+                        rect.height > 0 &&
+                        (node.textContent || '').trim() === 'The episode is loading...'
+                    );
+                }""",
+                timeout=5000,
+            )
+
+            progress_snapshot = _read_progress_text_snapshot(page)
+            markdown_snapshot = _read_progress_markdown_snapshot(page)
+            assert progress_snapshot["present"] is True
+            assert progress_snapshot["visible"] is True
+            assert progress_snapshot["text"] == "The episode is loading..."
+            assert markdown_snapshot["text"] is None
+            assert markdown_snapshot["pendingVisible"] is False
+            assert markdown_snapshot["markdownVisible"] is False
+            assert page.locator("#robomme_episode_loading_copy").count() == 0
+
+            deadline = time.time() + 15.0
+            while time.time() < deadline:
+                if _read_log_output_value(page) == "ready-2":
+                    break
+                time.sleep(0.1)
+            else:
+                raise AssertionError("next episode load did not complete")
+            assert page.locator("#robomme_episode_loading_copy").count() == 0
+
+            browser.close()
+    finally:
+        server.should_exit = True
+        thread.join(timeout=10)
+        demo.close()
+
+    assert calls == {"init": 1, "next": 1}
+
+
 def test_no_video_task_hides_manual_demo_button(monkeypatch):
     ui_layout = importlib.reload(importlib.import_module("ui_layout"))
 

gradio-web/ui_layout.py

@@ -367,17 +367,54 @@ 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;
+            return null;
         }}
         host.style.setProperty("position", "fixed", "important");
         host.style.setProperty("inset", "0", "important");
@@ -407,6 +444,12 @@ PROGRESS_TEXT_REWRITE_JS = f"""
             markdown instanceof HTMLElement
                 ? markdown.querySelector(".prose, .md") || markdown
                 : null;
+        const pending =
+            markdown instanceof HTMLElement ? markdown.closest(".pending") : host.querySelector(".pending");
+        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");
@@ -427,72 +470,165 @@ PROGRESS_TEXT_REWRITE_JS = f"""
             prose.style.setProperty("line-height", "1.5", "important");
             prose.style.setProperty("white-space", "pre-line", "important");
         }}
+        return {{
+            wrap,
+            markdown,
+            prose,
+            pending,
+            spinner,
+        }};
     }};
 
-    const splitSegments = (text) =>
-        text
-            .split("|")
-            .map((part) => part.trim())
-            .filter(Boolean);
+    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 = (node) => {{
+    const rewriteNode = (entry, overlayState) => {{
+        const node = entry.node;
         if (!(node instanceof HTMLElement)) {{
             return;
         }}
 
-        const displayed = (node.innerText || node.textContent || "").trim();
-        const previousCustom = node.dataset.robommeProgressCustom || "";
-        const raw =
-            node.dataset.robommeProgressCustomized === "1" && displayed === previousCustom
-                ? node.dataset.robommeProgressRaw || displayed
-                : displayed;
+        const raw = entry.raw;
         if (getMode() !== modeEpisodeLoad) {{
-            if (
-                (elapsedOnlyPattern.test(raw) ||
-                    /^processing/i.test(raw) ||
-                    /^queue:/i.test(raw))
-            ) {{
+            resetProgressNode(node);
+            if (isEpisodeLoadRaw(raw) || isQueueRaw(raw)) {{
                 node.textContent = "";
             }}
-            if (
-                node.dataset.robommeProgressCustomized === "1" &&
-                displayed === previousCustom &&
-                node.dataset.robommeProgressRaw
-            ) {{
-                node.textContent = node.dataset.robommeProgressRaw;
-            }}
-            delete node.dataset.robommeProgressCustomized;
-            delete node.dataset.robommeProgressRaw;
-            delete node.dataset.robommeProgressCustom;
             return;
         }}
 
-        const normalized = raw.toLowerCase();
-        let custom = null;
-
-        if (normalized.startsWith("processing")) {{
-            const segments = splitSegments(raw);
-            const suffix = segments.length > 1 ? ` | ${{segments.slice(1).join(" | ")}}` : "";
-            custom = `${{episodeLoadingText}}${{suffix}}`;
-        }} else if (normalized.startsWith("queue:")) {{
-            custom = `${{queueWaitText}} | ${{raw}}`;
+        node.dataset.robommeProgressRaw = raw;
+        if (overlayState === overlayStateEpisodeLoad && isEpisodeLoadRaw(raw)) {{
+            applyEpisodeLoadLayout(entry, window.__robommeOverlayRefs || null);
+            return;
         }}
 
-        if (!custom) {{
+        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;
         }}
 
-        node.dataset.robommeProgressCustomized = "1";
-        node.dataset.robommeProgressRaw = raw;
-        node.dataset.robommeProgressCustom = custom;
-        if (displayed !== custom) {{
-            node.textContent = custom;
+        resetProgressNode(node);
+    }};
+
+    const syncOverlayContent = (overlayRefs, overlayState) => {{
+        if (!overlayRefs) {{
+            return;
+        }}
+        const {{
+            wrap,
+            markdown,
+            prose,
+            pending,
+            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 (pending instanceof HTMLElement) {{
+            pending.style.setProperty("display", showMarkdown ? "block" : "none", "important");
+            pending.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 = () => {{
-        ensureOverlayStyles();
-        document.querySelectorAll(".progress-text").forEach(rewriteNode);
+        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 = () => {{
@@ -799,7 +935,7 @@ def create_ui_blocks():
 
         with gr.Column(visible=True, elem_id="main_interface_root") as main_interface:
             native_progress_host = gr.Markdown(
-                value=UI_TEXT["progress"]["episode_loading"],
+                value="",
                 visible=True,
                 container=False,
                 elem_id="native_progress_host",