Update app.py

app.py

@@ -441,8 +441,47 @@ def infer(
 # =========================================================
 # UI
 # =========================================================
+# JS：等 ImageEditor 渲染完后，把绝对定位的工具栏改为相对定位，
+# 使其不再悬浮覆盖画布（CSS 选择器会被 Svelte 作用域哈希阻挡，
+# 所以用 JS 通过 getComputedStyle 精确检测并强制修改）
+_FIX_TOOLBAR_JS = """
+() => {
+    const setup = (ed) => {
+        if (ed.dataset.toggleReady) return;
+        // 找工具栏元素（Gradio/Svelte 会给 class 加哈希，用 includes 匹配）
+        const toolbar = Array.from(ed.querySelectorAll('*')).find(el => {
+            const cls = el.getAttribute('class') || '';
+            return cls.includes('toolbar') || cls.includes('tool-bar');
+        });
+        if (!toolbar) return;
+        ed.dataset.toggleReady = '1';
+
+        // 插入切换按钮，放在 toolbar 的父容器第一位
+        const btn = document.createElement('button');
+        btn.className = 'toolbar-toggle-btn';
+        btn.textContent = '🎨 隐藏画笔工具栏';
+        let hidden = false;
+        btn.onclick = () => {
+            hidden = !hidden;
+            // 用 visibility 而非 display，避免画布区域跳动
+            toolbar.style.visibility = hidden ? 'hidden' : '';
+            toolbar.style.pointerEvents = hidden ? 'none' : '';
+            btn.textContent = hidden ? '🎨 显示画笔工具栏' : '🎨 隐藏画笔工具栏';
+        };
+        toolbar.parentNode.insertBefore(btn, toolbar);
+    };
+
+    const mo = new MutationObserver(() => {
+        document.querySelectorAll('.src-editor').forEach(setup);
+    });
+    mo.observe(document.body, { childList: true, subtree: true });
+    setTimeout(() => document.querySelectorAll('.src-editor').forEach(setup), 1000);
+}
+"""
+
 with gr.Blocks(
     theme=theme,
+    js=_FIX_TOOLBAR_JS,
     css="""
 .gradio-container {
     max-width: 1400px !important;
@@ -463,13 +502,19 @@ with gr.Blocks(
     color: #666;
     margin-bottom: 0;
 }
-/* 画笔工具栏移到画布外部，不再遮挡图像 */
-.src-editor .toolbar-wrap,
-.src-editor .image-editor-toolbar,
-.src-editor [class*="toolbar"] {
-    position: relative !important;
-    bottom: auto !important;
-    top: auto !important;
+/* 工具栏隐藏时，隐藏按钮仍可点击 */
+.toolbar-toggle-btn {
+    display: block;
+    width: 100%;
+    padding: 4px 10px;
+    margin-bottom: 2px;
+    background: #f0f0f0;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    text-align: left;
+    color: #555;
 }
 """,
 ) as demo:
@@ -495,11 +540,9 @@ with gr.Blocks(
                             color_mode="defaults",
                         ),
                     )
-                    with gr.Accordion("画笔颜色说明（点击展开/折叠）", open=False):
-                        gr.Markdown(
-                            "🔴 红 · 🟢 绿 · 🔵 蓝 · 🟡 黄 · 🟣 紫 · ⬜ 白\n\n"
-                            "画好后提示词写：*去掉红色标注的区域* 等"
-                        )
+                    gr.Markdown(
+                        "<small>🔴红 🟢绿 🔵蓝 🟡黄 🟣紫 ⬜白 — 画好后提示词写：*去掉红色标注的区域* 等</small>"
+                    )
                     with gr.Row():
                         ref_input = gr.Image(
                             label="Reference Image（参考图，可选）",
@@ -572,17 +615,3 @@ with gr.Blocks(
                         type="numpy",
                         sources=["upload", "clipboard"],
                         image_mode="RGBA",
-                    )
-                    apply_button = gr.Button("Apply", variant="primary")
-
-                with gr.Column(scale=1):
-                    placement_output = gr.Image(label="Result", type="pil")
-
-            apply_button.click(
-                fn=paste_png_into_mask,
-                inputs=[mask_editor, png_input],
-                outputs=[placement_output],
-            )
-
-if __name__ == "__main__":
-    demo.launch()