Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
28 kB · 578 lines
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579// image-generation-workflow — transform a reference image with Gemini Image.//// This is the first listing-oriented Captutor lesson: it starts on a staged// graph, teaches creative intent and data provenance, performs one real image// generation, and leaves the result ready for a downstream video, compositor,// or app node. English is the editorial master; Simplified Chinese uses Fuser's// own locale labels and translated seed prompt.
// This Iris-owned rehearsal flow is intentionally kept as the exact two-node// source for both localized takes. Fuser's workspace "Tutorial" button now// seeds a much larger apparel graph, so rebuilding from that mutable sample// would make this focused lesson change underneath us.import fuserBrandChrome, { fuserEffectTheme } from "../themes/fuser.mjs";
const SEED_FLOW = "https://app.fuser.studio/flow/12f89eb1-fdd4-495f-bd1a-5d28fefc4062";const line = (en, zh) => ({ en, "zh-CN": zh });
const IMAGE_NODE = ".react-flow__node-ImageNode";const GEMINI_NODE = ".react-flow__node-FalGeminiImageNode";const SOURCE_IMAGE_OUTPUT = `${IMAGE_NODE} .react-flow__handle-right.source`;const GEMINI_IMAGE_INPUT = `${GEMINI_NODE} .react-flow__handle-left.target.h-4`;const PROMPT = `${GEMINI_NODE} textarea`;const PROMPT_PANEL = `js=document.querySelector(${JSON.stringify(PROMPT)}).parentElement`;const GENERATED_IMAGE = `${GEMINI_NODE} img[alt="Displaying input"]`;const GENERATED_IMAGE_PREVIEW = `${GEMINI_NODE} [aria-label="image preview"]`;const EXECUTE = '[data-ph-capture-attribute-node-toolbar-action="execute_node"]';let outputSignatureBeforeRun = "";let creditsBeforeRun = "";
async function suppressDuplicateIrisPresence(cdp) { await cdp.eval(`(() => { window.__captutorPresenceObserver?.disconnect(); const suppress = () => { for (const element of document.querySelectorAll('[title]')) { if (element.title !== 'iris@fuser.studio') continue; element.dataset.captutorDuplicatePresence = 'true'; element.style.display = 'none'; } // Fuser's collaboration layer can also render the same self-presence as // a small initial badge attached to the node being edited. It has no // title, so suppress only the tiny one-letter chip—not arbitrary text. for (const element of document.querySelectorAll('.react-flow__node *')) { if (element.childElementCount > 1 || element.textContent?.trim() !== 'I') continue; const rect = element.getBoundingClientRect(); if (rect.width > 0 && rect.width <= 42 && rect.height > 0 && rect.height <= 42) { const chip = element.closest('[class*="rounded-full"]') || element; chip.dataset.captutorDuplicatePresence = 'true'; chip.style.display = 'none'; } } }; suppress(); window.__captutorPresenceObserver = new MutationObserver(suppress); window.__captutorPresenceObserver.observe(document.documentElement, { childList: true, subtree: true, }); return true; })()`);}
async function installFuserFilmingTheme(cdp) { await cdp.eval(`(() => { let style = document.getElementById('__captutor_fuser_filming_theme'); if (!style) { style = document.createElement('style'); style.id = '__captutor_fuser_filming_theme'; style.textContent = ${JSON.stringify(` ${IMAGE_NODE}, ${GEMINI_NODE}, ${IMAGE_NODE} [role="textbox"], ${GEMINI_NODE} [role="textbox"] { box-shadow: none !important; filter: none !important; } ${IMAGE_NODE} [role="textbox"], ${GEMINI_NODE} [role="textbox"] { outline-color: transparent !important; } ${IMAGE_NODE} [role="textbox"].backglow::after, ${GEMINI_NODE} [role="textbox"].backglow::after { opacity: 0 !important; background: none !important; filter: none !important; } ${GEMINI_NODE}[data-captutor-engaged="true"] [role="textbox"] { outline: 2px solid #111111 !important; outline-offset: 2px !important; box-shadow: 0 3px 3px rgba(0,0,0,.42) !important; } .react-flow__edge path { stroke: #4b4b4b !important; } `)}; document.documentElement.appendChild(style); } return true; })()`);}
async function hideStaleGeneratedOutput(cdp) { await cdp.eval(`(() => { let style = document.getElementById('__captutor_hide_stale_output'); if (!style) { style = document.createElement('style'); style.id = '__captutor_hide_stale_output'; style.textContent = ${JSON.stringify(`${GENERATED_IMAGE_PREVIEW} { display:none !important; }`)}; document.documentElement.appendChild(style); } return true; })()`);}
export default { slug: "image-generation-workflow", voice: "jeffrey", window: "Fuser", desktopFrame: true, match: "fuser.studio", theme: "light", // Fuser is neutral and graphic. Captutor otherwise uses the filming // machine's system accent, so future clients can bring their own palette // without forking or hard-coding the shared effect engine. effectTheme: fuserEffectTheme, brandChrome: fuserBrandChrome, acceptance: { minimumDurationSec: 45, requireOpeningCard: true, requireEndingCard: true, requireBrandChrome: true, loudnessLufs: [-18, -14], requiredChecks: [ "two_node_canvas_present", "reference_edge_connected", "prompt_panel_verified", "gemini_generation_started", "generated_image_returned", "generated_output_framed", "final_tableau_complete", ], }, billable: true, fps: 60, title: { en: "Image-to-image generation in Fuser", "zh-CN": "在 Fuser 中进行图生图生成", }, subtitle: { en: "Reference image → Gemini → reusable result", "zh-CN": "参考图像 → Gemini → 可复用结果", }, openingCard: { title: line("Generate a new image from a reference", "从参考图像生成一张新图像"), durationMs: 2400, transition: "slide", }, closingCard: { title: line("Image ready. Thank you.", "图像已生成。谢谢。"), durationMs: 2200, transition: "genie", },
setup: async ({ cdp, click, locale, setLocale, sleep, t }) => { await setLocale(cdp, locale, SEED_FLOW); await cdp.waitFor("location.pathname.startsWith('/flow/')"); await cdp.waitFor("document.querySelector('.react-flow')"); await cdp.waitFor(` document.querySelectorAll(${JSON.stringify(IMAGE_NODE)}).length === 1 && document.querySelectorAll(${JSON.stringify(GEMINI_NODE)}).length === 1 `);
// Each take demonstrates the connection from zero. Reset only this // rehearsal edge off-camera; the source image and authored prompt remain. while (await cdp.eval("document.querySelectorAll('.react-flow__edge').length > 0")) { await click(".react-flow__edge", { moveMs: 80, settleMs: 80 }); await cdp.key("Backspace", "Backspace", 8); await sleep(180); } await cdp.waitFor("document.querySelectorAll('.react-flow__edge').length === 0");
// Dismiss the product's own onboarding cards before the camera rolls. The // Captutor narration replaces them with a tighter listing-ready lesson. const buttonExpression = (label) => `[...document.querySelectorAll('button')].some(button => (button.innerText || '').trim() === ${JSON.stringify(label)})`; const maybeClickOnboarding = async (label, waitMs = 0) => { const deadline = Date.now() + waitMs; while (!(await cdp.eval(buttonExpression(label)))) { if (Date.now() >= deadline) return false; await sleep(120); } await click(`text=${label}`); return true; }; const gotIt = t("flow.navigationOverlay.gotIt"); if (await maybeClickOnboarding(gotIt, 2500)) { await maybeClickOnboarding(t("flow.onboarding.dialog.skip"), 2500); } await cdp.waitFor( `document.querySelector(${JSON.stringify(IMAGE_NODE)}) && document.querySelector(${JSON.stringify(GEMINI_NODE)})`, ); await hideStaleGeneratedOutput(cdp); await click(".react-flow__pane", { moveMs: 80, settleMs: 80, anchorX: 0.90, anchorY: 0.88, }); await suppressDuplicateIrisPresence(cdp); },
// Theme pinning reloads Fuser and Stage then resizes Chrome to the delivery // frame. Fit the graph only after both operations so the nodes cannot inherit // an off-screen viewport. This is deliberately before the reel starts: the // lesson should teach image provenance, not spend time narrating zoom chrome. beforeRecord: async ({ cdp, click, sleep }) => { await cdp.waitFor( `document.querySelector(${JSON.stringify(IMAGE_NODE)}) && document.querySelector(${JSON.stringify(GEMINI_NODE)})`, ); // Captutor pins Fuser's theme with a navigation after `setup`. Reinstall // DOM-only filming treatments here, after that navigation, or the stale // returned image expands Gemini and a persisted 100% viewport can place // both nodes entirely offscreen. The same reload also recreates presence // badges, so duplicate-self suppression belongs at this boundary too. await hideStaleGeneratedOutput(cdp); await installFuserFilmingTheme(cdp); await suppressDuplicateIrisPresence(cdp); await click("js=[...document.querySelectorAll('button')].find(button => /^\\d+%$/.test((button.innerText || '').trim()))"); await click("js=[...document.querySelectorAll('[role=menuitem]')].find(item => (item.innerText || '').includes('⌘0'))"); await sleep(900); // wait for React Flow's animated fit-view transform // Fit View's zoom varies with the filming window (and can become over-eager // for only two nodes). Preserve its centering, then use Fuser's deterministic // 100% command so the board has the same natural scale on every machine. await click("js=[...document.querySelectorAll('button')].find(button => /^\\d+%$/.test((button.innerText || '').trim()))"); await click("js=[...document.querySelectorAll('[role=menuitem]')].find(item => /100\\s*%/.test(item.innerText || ''))"); await sleep(900); await cdp.waitFor(`(() => { const zoomLabel = [...document.querySelectorAll('button')] .map(button => (button.innerText || '').trim()) .find(text => /^\\d+%$/.test(text)); const zoom = Number.parseInt(zoomLabel || '0', 10); const nodes = [...document.querySelectorAll('.react-flow__node')]; return zoom >= 99 && zoom <= 101 && nodes.length === 2 && nodes.every(node => { const rect = node.getBoundingClientRect(); return rect.left >= 0 && rect.top >= 0 && rect.right <= innerWidth && rect.bottom <= innerHeight; }); })()`); await suppressDuplicateIrisPresence(cdp); },
teardown: async ({ cdp }) => cdp.eval(`(() => { window.__captutorPresenceObserver?.disconnect(); delete window.__captutorPresenceObserver; document.getElementById('__captutor_hide_stale_output')?.remove(); document.getElementById('__captutor_fuser_filming_theme')?.remove(); for (const element of document.querySelectorAll('[data-captutor-duplicate-presence]')) { element.style.display = ''; delete element.dataset.captutorDuplicatePresence; } return true; })()`),
beats: [ { say: line( "This Fuser workflow turns one reference image into a directed visual variation. The source, instruction, and result stay visible together on the canvas.", "这个 Fuser 工作流把一张参考图像转化为有明确方向的视觉变体。源图、指令和结果始终在同一张画布上清晰可见。", ), logic: line( "Assert the authored rehearsal canvas contains exactly one Image node and one Gemini Image node.", "确认排练画布中恰好包含一个图像节点和一个 Gemini 图像节点。", ), cursorIntent: line( "Park in lower-right empty canvas; do not cover either node.", "停在右下方空白画布，不遮挡任何节点。", ), do: async ({ cdp, check, point }) => { await point(".react-flow__pane", { moveMs: 620, anchorX: 0.92, anchorY: 0.90, }); check("two_node_canvas_present", await cdp.eval(`({ imageNodes:document.querySelectorAll(${JSON.stringify(IMAGE_NODE)}).length, geminiNodes:document.querySelectorAll(${JSON.stringify(GEMINI_NODE)}).length, visibleIris:[...document.querySelectorAll('[title="iris@fuser.studio"]')] .filter(element => getComputedStyle(element).display !== 'none').length })`)); }, }, { say: line( "The Image node holds the original photograph. It remains unchanged, so the graph always preserves a traceable visual source.", "左侧的图像节点保存原始照片。它不会被覆盖，因此工作流始终保留可追溯的视觉来源。", ), logic: line( "Identify the immutable reference source and frame its full visible card.", "识别不可变的参考来源，并完整框选其可见卡片。", ), cursorIntent: line( "Sit just outside the Image node's right edge.", "停在图像节点右边缘外侧。", ), do: async ({ check, point, spotlight }) => { await point(IMAGE_NODE, { moveMs: 420, anchorX: 1.06, anchorY: 0.54 }); const rect = await spotlight(IMAGE_NODE, { label: "Reference image", dim: 0.28, ring: true, feather: 30, durationMs: 3200, }); check("reference_image_framed", { selector:IMAGE_NODE, rect }); }, }, { say: line( "Gemini Image can generate from text alone, or use one or more connected images as references for composition, subject, and style.", "Gemini 图像节点既能根据文字生成图像，也能将一个或多个连接的图像作为构图、主体和风格参考。", ), logic: line( "Identify Gemini Image as the generation operator without changing node state.", "识别 Gemini 图像生成节点，同时不改变节点状态。", ), cursorIntent: line( "Sit just outside Gemini's left edge, away from fields.", "停在 Gemini 左边缘外侧，避开输入字段。", ), do: async ({ check, point, outline }) => { await point(GEMINI_NODE, { moveMs: 420, anchorX: -0.07, anchorY: 0.54 }); const rect = await outline(GEMINI_NODE, { label: "Generative transformation", feather: 28, durationMs: 3200, }); check("gemini_operator_framed", { selector:GEMINI_NODE, rect }); }, }, { say: line( "Connect the Image output to Gemini's Image input. The edge carries the photograph into the model while keeping its origin visible.", "把图像输出连接到 Gemini 的图像输入。这条连线会把照片传入模型，同时保留清晰可见的来源。", ), logic: line( "Create exactly one typed edge from Image output to Gemini's Image input.", "从图像输出到 Gemini 图像输入创建且仅创建一条类型匹配的连线。", ), cursorIntent: line( "Follow the connector during drag, then park on empty canvas.", "拖动时跟随连接线，完成后停在空白画布。", ), do: async ({ cdp, check, click, drag }) => { await drag(SOURCE_IMAGE_OUTPUT, GEMINI_IMAGE_INPUT, { moveMs: 520, dragMs: 820, }); await cdp.waitFor("document.querySelectorAll('.react-flow__edge').length === 1"); check("reference_edge_connected", { edgeCount:1, from:SOURCE_IMAGE_OUTPUT, to:GEMINI_IMAGE_INPUT }); await click(".react-flow__pane", { moveMs: 260, anchorX: 0.88, anchorY: 0.86, }); }, }, { say: line( "The prompt describes only the transformation: replace the backdrop with a red-and-purple twilight, and turn the sand into a field of grass.", "提示词只描述需要发生的变化：把背景改成红紫色的黄昏，并把沙地变成茂盛的草地。", ), logic: line( "Verify the authored transformation text and frame the visible rounded prompt panel—not the textarea internals.", "核验转换指令，并框选可见的圆角提示词面板，而不是文本框内部。", ), cursorIntent: line( "Park in the inter-node gap so prompt text stays unobstructed.", "停在节点之间的空隙，确保提示词不被遮挡。", ), do: async ({ cdp, check, format, outline, point }) => { await point(".react-flow__pane", { moveMs: 520, anchorX: 0.88, anchorY: format === "vertical" ? 0.72 : 0.82, }); const rect = await outline(PROMPT_PANEL, { label: "Transformation prompt", labelPosition: format === "vertical" ? "above" : "side", labelGap: format === "vertical" ? 120 : 12, labelOffsetY: format === "vertical" ? 0 : 78, feather: 22, durationMs: 3000, }); check("prompt_panel_verified", { text:await cdp.eval(`document.querySelector(${JSON.stringify(PROMPT)}).value`), selector:PROMPT_PANEL, rect, }); }, }, { say: line( "Run the node once. Fuser sends the reference image and prompt together to the model to create a new visual result.", "运行一次节点。Fuser 会把参考图像和提示词一起交给模型，生成新的视觉结果。", ), logic: line( "Select Gemini, activate Generate once, and require an observed running signal before proceeding.", "选择 Gemini，只触发一次生成，并在继续前确认已观察到真实运行信号。", ), cursorIntent: line( "Touch the Gemini border and Generate control, then park away from the running node.", "触碰 Gemini 边框和生成按钮后，停到运行节点之外。", ), do: async ({ cdp, check, click, sleep }) => { outputSignatureBeforeRun = await cdp.eval( `document.querySelector(${JSON.stringify(GENERATED_IMAGE)})?.currentSrc || ` + `document.querySelector(${JSON.stringify(GENERATED_IMAGE)})?.src || ''`, ); creditsBeforeRun = await cdp.eval( `[...document.querySelectorAll('button')]` + `.map(button => (button.innerText || '').trim())` + `.find(text => /^[\\d,]+✦$/.test(text)) || ''`, ); const started = `(() => { const node = document.querySelector(${JSON.stringify(GEMINI_NODE)}); const execute = document.querySelector(${JSON.stringify(EXECUTE)}); const credits = [...document.querySelectorAll('button')] .map(button => (button.innerText || '').trim()) .find(text => /^[\\d,]+✦$/.test(text)) || ''; const generatedImage = document.querySelector(${JSON.stringify(GENERATED_IMAGE)}); const output = generatedImage?.currentSrc || generatedImage?.src || ''; return credits !== ${JSON.stringify(creditsBeforeRun)} || output !== ${JSON.stringify(outputSignatureBeforeRun)} || !!execute?.disabled || !!node?.querySelector('[aria-busy=true],[role=progressbar],.animate-spin'); })()`; const selectGemini = async (moveMs) => { await click(GEMINI_NODE, { moveMs, anchorY: 0.01 }); await sleep(220); if (!(await cdp.eval(`!!document.querySelector(${JSON.stringify(EXECUTE)})`))) { // The filmed pointer is already sitting on this border. Reinforce // the same trusted hit without another native cursor warp, whose // queued hover event is what can clear React Flow's selection. const border = await cdp.eval(`(() => { const rect = document.querySelector(${JSON.stringify(GEMINI_NODE)}).getBoundingClientRect(); return { x: rect.left + rect.width / 2, y: rect.top + 5 }; })()`); await cdp.mouse("mousePressed", border.x, border.y); await cdp.mouse("mouseReleased", border.x, border.y); await sleep(220); } await cdp.waitFor( `document.querySelector(${JSON.stringify(EXECUTE)}) && !document.querySelector(${JSON.stringify(EXECUTE)}).disabled`, ); }; // The node's center is an interactive field, so click its card border // to select the node and reveal the toolbar without changing a value. await cdp.eval(`document.querySelector(${JSON.stringify(GEMINI_NODE)}) .dataset.captutorEngaged = 'true'`); await selectGemini(480); await click(EXECUTE, { moveMs: 520 }); await sleep(900);
// React-Aria can occasionally lose the pointer activation when a final // native hover event crosses the floating toolbar. If no running signal // appeared, reselect the same node and activate its focused Generate // button with trusted Enter. The guard prevents a double generation. if (!(await cdp.eval(started))) { await selectGemini(260); await cdp.eval(`document.querySelector(${JSON.stringify(EXECUTE)}).focus()`); await cdp.key("Enter", "Enter", 13); } await cdp.waitFor(started, { timeoutMs: 10000, everyMs: 100 }); console.log(" ✓ Gemini generation started"); check("gemini_generation_started", { creditsBeforeRun, outputSignatureBeforeRun }); check("grayscale_execution_glow_suppressed", await cdp.eval(`(() => { const card = document.querySelector(${JSON.stringify(GEMINI_NODE)} + ' [role="textbox"]'); const after = getComputedStyle(card, '::after'); return { afterOpacity:after.opacity, afterBackgroundImage:after.backgroundImage, cardOutline:getComputedStyle(card).outline, cardShadow:getComputedStyle(card).boxShadow, }; })()`)); // Selection is required to expose Generate, but Fuser's selected-node // violet glow should not compete with the client's grayscale filming // palette for the rest of the lesson. await click(".react-flow__pane", { moveMs: 260, anchorX: 0.84, anchorY: 0.88, }); await cdp.eval(`delete document.querySelector(${JSON.stringify(GEMINI_NODE)}) .dataset.captutorEngaged`); }, }, { say: line( "The original stays on the canvas while the model works. The edge records exactly where the generated result came from.", "模型运行时，原图仍然保留在画布上。连线会清楚记录生成结果来自哪里。", ), logic: line( "Keep the single provenance edge visible while Gemini is running.", "Gemini 运行时保持唯一的来源连线可见。", ), cursorIntent: line( "Remain parked on empty canvas; never cover the provenance edge.", "保持停在空白画布，不遮挡来源连线。", ), do: async ({ check, outline }) => { const rect = await outline(".react-flow__edge", { label: "Visible provenance", feather: 20, durationMs: 3200, }); check("provenance_edge_visible", { edgeCount:1, rect }); }, }, { say: line( "The output is a new image, not a destructive edit. The original remains beside it, so the source and transformation stay easy to understand.", "生成结果是一张新图像，而不是对原图的覆盖。原图仍保留在旁边，因此来源和转换过程始终清晰易懂。", ), logic: line( "Require a newly returned, decoded image URL, reveal it, refit the expanded graph, and frame the output pixels.", "要求返回新的、已解码的图像 URL；显示结果、重新适配扩展后的画布，并框选输出图像。", ), cursorIntent: line( "Park outside the output's left edge; do not cover returned pixels.", "停在输出图像左边缘外侧，不遮挡生成结果。", ), do: async ({ cdp, check, click, point, sleep, spotlight }) => { await cdp.waitFor( `(() => { const image = document.querySelector(${JSON.stringify(GENERATED_IMAGE)}); const source = image?.currentSrc || image?.src || ''; return image?.complete && image.naturalWidth > 0 && source && source !== ${JSON.stringify(outputSignatureBeforeRun)}; })()`, { timeoutMs: 120000, everyMs: 250 }, ); await cdp.eval("document.getElementById('__captutor_hide_stale_output')?.remove()"); const returned = await cdp.eval(`(() => { const image = document.querySelector(${JSON.stringify(GENERATED_IMAGE)}); return { src:image.currentSrc || image.src, width:image.naturalWidth, height:image.naturalHeight }; })()`); check("generated_image_returned", { before:outputSignatureBeforeRun, after:returned.src, naturalWidth:returned.width, naturalHeight:returned.height, }); // The output makes Gemini taller. Refit only now so the returned image // is actually visible rather than sitting below the filming window. await click("js=[...document.querySelectorAll('button')].find(button => /^\\d+%$/.test((button.innerText || '').trim()))"); await click("js=[...document.querySelectorAll('[role=menuitem]')].find(item => (item.innerText || '').includes('⌘0'))"); await sleep(900); await cdp.waitFor(`(() => { const preview = document.querySelector(${JSON.stringify(GENERATED_IMAGE_PREVIEW)}); if (!preview) return false; const rect = preview.getBoundingClientRect(); return rect.left >= 0 && rect.top >= 0 && rect.right <= innerWidth && rect.bottom <= innerHeight; })()`); await point(".react-flow__pane", { moveMs: 420, anchorX: 0.88, anchorY: 0.82, }); const rect = await spotlight(GENERATED_IMAGE_PREVIEW, { label: "Reusable generated image", dim: 0.24, labelPosition: "side", ring: true, feather: 30, durationMs: 3600, }); check("generated_output_framed", { selector:GENERATED_IMAGE_PREVIEW, rect }); }, }, { say: line( "That is image-to-image generation in Fuser: one clear source, one deliberate instruction, and one reusable result ready for whatever comes next.", "这就是 Fuser 中的图生图工作流：一个明确的来源、一条有意图的指令，以及一个可继续复用的结果。", ), logic: line( "Finish with source, instruction, provenance, and returned result all visible in one graph.", "以同一画布中同时可见的来源、指令、来源连线和生成结果结束。", ), cursorIntent: line( "Park in lower-right empty canvas for the final tableau.", "停在右下方空白画布，形成最终画面。", ), do: async ({ cdp, check, point }) => { await point(".react-flow__pane", { moveMs: 720, anchorX: 0.92, anchorY: 0.90, }); check("final_tableau_complete", await cdp.eval(`({ nodes:document.querySelectorAll('.react-flow__node').length, edges:document.querySelectorAll('.react-flow__edge').length, generatedImageLoaded:(() => { const image = document.querySelector(${JSON.stringify(GENERATED_IMAGE)}); return !!image?.complete && image.naturalWidth > 0; })() })`)); }, }, ],};