text size control

gradio-web/config.py

@@ -15,6 +15,9 @@ CONTROL_PANEL_SCALE = 2
 RIGHT_TOP_ACTION_SCALE = 2
 RIGHT_TOP_LOG_SCALE = 1
 
+# 全局界面字号（不作用于页面主标题）
+UI_GLOBAL_FONT_SIZE = "20px"
+
 # Session超时配置
 SESSION_TIMEOUT = 300  # Session超时时间（秒），如果30秒内没有execute_step操作，将自动回收session
 

gradio-web/test/test_ui_native_layout_contract.py

@@ -23,6 +23,28 @@ def test_native_ui_has_no_legacy_runtime_js_or_card_shell_tokens(reload_module):
         assert token not in css
 
 
+def test_native_ui_css_uses_configured_global_font_size_variables(reload_module):
+    config = reload_module("config")
+    ui_layout = reload_module("ui_layout")
+
+    css = ui_layout.CSS
+
+    assert f"--body-text-size: {config.UI_GLOBAL_FONT_SIZE} !important;" in css
+    assert f"--prose-text-size: {config.UI_GLOBAL_FONT_SIZE} !important;" in css
+    assert f"--input-text-size: {config.UI_GLOBAL_FONT_SIZE} !important;" in css
+    assert f"--block-label-text-size: {config.UI_GLOBAL_FONT_SIZE} !important;" in css
+    assert f"--button-large-text-size: {config.UI_GLOBAL_FONT_SIZE} !important;" in css
+    assert f"--section-header-text-size: {config.UI_GLOBAL_FONT_SIZE} !important;" in css
+    assert f"--text-md: {config.UI_GLOBAL_FONT_SIZE} !important;" in css
+
+
+def test_native_ui_css_excludes_header_title_from_global_font_size(reload_module):
+    ui_layout = reload_module("ui_layout")
+
+    assert "#header_title h2" in ui_layout.CSS
+    assert "font-size: var(--text-xxl) !important;" in ui_layout.CSS
+
+
 def test_extract_last_goal_prefers_last_list_item(reload_module):
     ui_layout = reload_module("ui_layout")
 

gradio-web/test/test_ui_phase_machine_runtime_e2e.py

@@ -124,6 +124,54 @@ def _read_live_obs_geometry(page) -> dict[str, dict[str, float] | None]:
     )
 
 
+def _read_font_probe_snapshot(page) -> dict[str, str | None]:
+    return page.evaluate(
+        """() => {
+            const heading = document.querySelector('#header_title h2');
+            const field = document.querySelector('#font_probe textarea, #font_probe input');
+            const prose = document.querySelector('#body_probe p');
+            const readSize = (node) => (node ? getComputedStyle(node).fontSize : null);
+            return {
+                header: readSize(heading),
+                field: readSize(field),
+                body: readSize(prose),
+            };
+        }"""
+    )
+
+
+@pytest.fixture
+def font_size_probe_ui_url(monkeypatch):
+    config_module = importlib.reload(importlib.import_module("config"))
+    monkeypatch.setattr(config_module, "UI_GLOBAL_FONT_SIZE", "32px")
+    ui_layout = importlib.reload(importlib.import_module("ui_layout"))
+
+    with contextlib.closing(socket.socket(socket.AF_INET, socket.SOCK_STREAM)) as sock:
+        sock.bind(("127.0.0.1", 0))
+        port = int(sock.getsockname()[1])
+
+    with gr.Blocks(title="Native font size probe test") as demo:
+        gr.Markdown("## RoboMME Human Evaluation", elem_id="header_title")
+        gr.Textbox(value="font probe", label="Probe", elem_id="font_probe")
+        gr.Markdown("Probe body text", elem_id="body_probe")
+
+    _app, root_url, _share_url = demo.launch(
+        server_name="127.0.0.1",
+        server_port=port,
+        prevent_thread_lock=True,
+        quiet=True,
+        show_error=True,
+        ssr_mode=False,
+        css=ui_layout.CSS,
+    )
+    _wait_http_ready(root_url)
+
+    try:
+        yield root_url
+    finally:
+        demo.close()
+
+
 @pytest.fixture
 def phase_machine_ui_url():
     state = {"precheck_calls": 0}
@@ -292,6 +340,41 @@ def phase_machine_ui_url():
         demo.close()
 
 
+def test_global_font_size_applies_except_header_title(font_size_probe_ui_url):
+    root_url = font_size_probe_ui_url
+
+    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("#header_title h2", timeout=10000)
+        page.wait_for_selector("#font_probe textarea, #font_probe input", timeout=10000)
+        page.wait_for_selector("#body_probe p", timeout=10000)
+        page.wait_for_function(
+            """() => {
+                const heading = document.querySelector('#header_title h2');
+                const field = document.querySelector('#font_probe textarea, #font_probe input');
+                const prose = document.querySelector('#body_probe p');
+                if (!heading || !field || !prose) return false;
+                return (
+                    getComputedStyle(heading).fontSize === '26px' &&
+                    getComputedStyle(field).fontSize === '32px' &&
+                    getComputedStyle(prose).fontSize === '32px'
+                );
+            }""",
+            timeout=10000,
+        )
+
+        snapshot = _read_font_probe_snapshot(page)
+        assert snapshot["header"] == "26px"
+        assert snapshot["field"] == "32px"
+        assert snapshot["body"] == "32px"
+        assert snapshot["header"] != snapshot["field"]
+
+        browser.close()
+
+
 def test_phase_machine_runtime_flow_and_execute_precheck(phase_machine_ui_url):
     root_url, state = phase_machine_ui_url
 

gradio-web/ui_layout.py

@@ -14,6 +14,7 @@ from config import (
     KEYPOINT_SELECTION_SCALE,
     RIGHT_TOP_ACTION_SCALE,
     RIGHT_TOP_LOG_SCALE,
+    UI_GLOBAL_FONT_SIZE,
 )
 from gradio_callbacks import (
     execute_step,
@@ -194,9 +195,28 @@ LIVE_OBS_CLIENT_RESIZE_JS = r"""
 
 
 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;
+}}
+
 .native-card {{
 }}
 
+#header_title h2 {{
+    font-size: var(--text-xxl) !important;
+}}
+
 #loading_overlay_group {{
     position: fixed !important;
     inset: 0 !important;
@@ -289,16 +309,15 @@ def create_ui_blocks():
         return last_goal if last_goal else "—"
 
     with gr.Blocks(title="Oracle Planner Interface") as demo:
-        demo.theme = gr.themes.Soft()
         demo.css = CSS
 
-        gr.Markdown("## RoboMME Human Evaluation", elem_id="header_title")
+        gr.Markdown("## RoboMME Human Evaluation 🚀🚀🚀", elem_id="header_title")
         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",
+                    label="Current Task 🔥",
                     show_label=True,
                     interactive=True,
                     elem_id="header_task",
@@ -306,7 +325,7 @@ def create_ui_blocks():
             with gr.Column(scale=2):
                 header_goal_box = gr.Textbox(
                     value=render_header_goal(""),
-                    label="Goal",
+                    label="Goal 🎯",
                     show_label=True,
                     interactive=False,
                     lines=1,
@@ -330,7 +349,7 @@ def create_ui_blocks():
                     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="Demonstration Video",
+                                label="Demonstration Video 🎬",
                                 interactive=False,
                                 elem_id="demo_video",
                                 autoplay=True,
@@ -357,7 +376,7 @@ def create_ui_blocks():
                                 with gr.Column(elem_classes=["native-card"], elem_id="action_selection_card"):
                                     options_radio = gr.Radio(
                                         choices=[],
-                                        label=" Action Selection",
+                                        label="Action Selection 🦾",
                                         type="value",
                                         show_label=True,
                                         elem_id="action_radio",
@@ -380,19 +399,19 @@ def create_ui_blocks():
                                         show_label=True,
                                         interactive=False,
                                         elem_id="log_output",
-                                        label="System Log",
+                                        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")
+                                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",
+                                    "Ground Truth Action 🙋‍♀️",
                                     variant="secondary",
                                     interactive=False,
                                     elem_id="reference_action_btn",
@@ -403,7 +422,7 @@ def create_ui_blocks():
                                 elem_id="restart_episode_btn_card",
                             ):
                                 restart_episode_btn = gr.Button(
-                                    "restart episode",
+                                    "Restart Episode 🔄",
                                     variant="secondary",
                                     interactive=False,
                                     elem_id="restart_episode_btn",
@@ -414,7 +433,7 @@ def create_ui_blocks():
                                 elem_id="next_task_btn_card",
                             ):
                                 next_task_btn = gr.Button(
-                                    "change episode",
+                                    "Change Episode ⏩️",
                                     variant="primary",
                                     interactive=False,
                                     elem_id="next_task_btn",
@@ -426,7 +445,7 @@ def create_ui_blocks():
                                 lines=8,
                                 max_lines=16,
                                 show_label=True,
-                                label="Task Hint",
+                                label="Task Hint💡",
                                 interactive=True,
                                 elem_id="task_hint_display",
                             )

pyproject.toml

@@ -5,15 +5,21 @@ description = "Add your description here"
 readme = "README.md"
 requires-python = ">=3.11"
 dependencies = [
+    "gradio",
+    "gymnasium",
+    "h5py",
+    "imageio",
     "mani-skill",
+    "numpy",
     "opencv-python>=4.11.0.86",
+    "Pillow",
     "setuptools==80.9.0",
     "torch==2.9.1",
     "torchvision==0.24.1",
 ]
 
 [project.optional-dependencies]
-dev = ["opencv-python", "pytest"]
+dev = ["opencv-python", "playwright", "pytest", "uvicorn"]
 
 [tool.uv.sources]
 mani-skill = { git = "https://github.com/YinpeiDai/ManiSkill.git", rev = "07be6fbc66350ddca200abfb0a11b692f078f7fd" }