Files
MajoorWaldi-ComfyUI-Majoor-…/docs/mfv-demo.html
T

941 lines
35 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MFV Demo</title>
<style>
:root {
color-scheme: dark;
--bg: #081015;
--panel: rgba(14, 23, 30, 0.96);
--panel-2: rgba(19, 30, 39, 0.98);
--line: rgba(143, 173, 186, 0.2);
--text: #eef6fb;
--muted: #97adbb;
--accent: #69d2ad;
--accent-2: #8dcaf8;
--warn: #ffd27a;
--danger: #ff8f86;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
padding: 30px;
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(105, 210, 173, 0.18), transparent 30%),
radial-gradient(circle at top right, rgba(141, 202, 248, 0.14), transparent 24%),
linear-gradient(180deg, #0b1319 0%, #071015 100%);
}
.page {
width: 1440px;
margin: 0 auto;
display: grid;
gap: 28px;
}
.shot {
position: relative;
overflow: hidden;
border-radius: 30px;
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(15, 24, 32, 0.97), rgba(9, 15, 20, 0.99));
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
padding: 28px;
}
.header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 24px;
}
.eyebrow {
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 13px;
font-weight: 700;
margin-bottom: 8px;
}
h1, h2, h3, p { margin: 0; }
h1 {
font-size: 40px;
line-height: 1.1;
letter-spacing: -0.035em;
}
h2 {
font-size: 34px;
line-height: 1.1;
letter-spacing: -0.03em;
}
h3 {
font-size: 24px;
line-height: 1.15;
letter-spacing: -0.02em;
}
.sub {
margin-top: 12px;
max-width: 940px;
font-size: 17px;
color: var(--muted);
line-height: 1.5;
}
.pill-row, .toolbar-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pill {
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
color: var(--muted);
font-size: 14px;
}
.layout-2 {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.82fr);
gap: 22px;
}
.layout-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.layout-compare {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: 22px;
}
.card {
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, var(--panel), var(--panel-2));
}
.card-pad {
padding: 18px;
}
.viewer-shell {
padding: 18px;
}
.viewer-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.toolbar-left, .toolbar-right {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.tool {
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.05);
color: var(--text);
font-size: 13px;
}
.tool.active {
background: rgba(105, 210, 173, 0.13);
border-color: rgba(105, 210, 173, 0.28);
color: #d8faef;
}
.tool.warn {
background: rgba(255, 210, 122, 0.1);
border-color: rgba(255, 210, 122, 0.24);
}
.tool.danger {
background: rgba(255, 143, 134, 0.1);
border-color: rgba(255, 143, 134, 0.24);
}
.viewer-surface {
position: relative;
min-height: 530px;
overflow: hidden;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.06);
background:
radial-gradient(circle at 18% 28%, rgba(255, 209, 120, 0.28), transparent 23%),
radial-gradient(circle at 74% 34%, rgba(105, 210, 173, 0.2), transparent 28%),
linear-gradient(135deg, #1d2f3c 0%, #0d1820 52%, #142430 100%);
}
.viewer-media-card {
position: absolute;
inset: 26px 24px 70px 24px;
border-radius: 24px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at 22% 30%, rgba(255, 208, 122, 0.36), transparent 18%),
radial-gradient(circle at 70% 38%, rgba(105, 210, 173, 0.24), transparent 20%),
linear-gradient(135deg, #233947, #111a22 55%, #1b2d39);
}
.viewer-chip {
position: absolute;
top: 18px;
left: 18px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(10, 16, 22, 0.72);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 13px;
}
.play {
position: absolute;
inset: 0;
margin: auto;
width: 94px;
height: 94px;
border-radius: 999px;
background: rgba(8, 14, 18, 0.65);
border: 1px solid rgba(255, 255, 255, 0.1);
display: grid;
place-items: center;
}
.play::before {
content: "";
margin-left: 7px;
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 26px solid white;
}
.bottom-bar {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
display: grid;
gap: 10px;
}
.scrub {
height: 10px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
}
.scrub > span {
display: block;
width: 58%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.scrub-meta {
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--muted);
}
.guides {
position: absolute;
inset: 26px 24px 70px 24px;
pointer-events: none;
}
.guides::before,
.guides::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.12) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.12) 1px, transparent 1px);
background-size: 33.333% 100%, 100% 33.333%;
background-position: 33.333% 0, 0 33.333%;
background-repeat: no-repeat;
}
.guides::after {
inset: 8% 12%;
border: 1px solid rgba(141, 202, 248, 0.35);
border-radius: 14px;
background: none;
}
.guide-label {
position: absolute;
right: 16px;
top: 16px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(10, 16, 22, 0.72);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 13px;
}
.side-panel {
display: grid;
gap: 18px;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.stat {
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.04);
}
.stat .k {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
.stat .v {
margin-top: 8px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.03em;
}
.mini-note {
padding: 16px 18px;
border-radius: 18px;
border: 1px solid rgba(105, 210, 173, 0.18);
background: rgba(105, 210, 173, 0.08);
color: #d8f9ee;
font-size: 15px;
line-height: 1.5;
}
.compare-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.compare-card {
padding: 18px;
min-height: 340px;
}
.surface {
position: relative;
min-height: 220px;
overflow: hidden;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(135deg, #182633, #0d171f 60%, #172a36);
margin-top: 14px;
}
.surface.split::before,
.surface.split::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
.surface.split::before {
left: 0;
background: radial-gradient(circle at 32% 35%, rgba(255,210,122,0.35), transparent 22%), linear-gradient(135deg, #253949, #13202a);
}
.surface.split::after {
right: 0;
background: radial-gradient(circle at 66% 44%, rgba(105,210,173,0.25), transparent 22%), linear-gradient(135deg, #1e3140, #101922);
}
.surface.grid4 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
background: rgba(255,255,255,0.08);
}
.surface.grid4 > div {
background: linear-gradient(135deg, #233847, #111a22 58%, #182833);
position: relative;
}
.slot-badge {
position: absolute;
top: 10px;
left: 10px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(9, 15, 19, 0.7);
border: 1px solid rgba(255,255,255,0.08);
font-size: 12px;
}
.pins {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
.pin {
padding: 9px 12px;
border-radius: 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
font-size: 13px;
}
.pin.active {
background: rgba(255,210,122,0.12);
border-color: rgba(255,210,122,0.24);
color: #ffe6a8;
}
.stream-card {
padding: 18px;
min-height: 420px;
}
.stream-surface {
margin-top: 14px;
min-height: 220px;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.06);
background: linear-gradient(135deg, #1e3040, #0d171f 62%, #172733);
position: relative;
}
.stream-list {
display: grid;
gap: 10px;
margin-top: 14px;
}
.stream-item {
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.04);
font-size: 14px;
line-height: 1.45;
}
.stream-tag {
display: inline-block;
margin-bottom: 8px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
}
.steps {
position: absolute;
inset: 18px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.step {
position: relative;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.08);
background: linear-gradient(135deg, #2a4150, #15222c 58%, #1b2f3b);
overflow: hidden;
}
.step::after {
content: attr(data-step);
position: absolute;
left: 10px;
bottom: 10px;
font-size: 12px;
padding: 5px 8px;
border-radius: 999px;
background: rgba(8,14,18,0.7);
border: 1px solid rgba(255,255,255,0.08);
}
.control-layout {
display: grid;
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
gap: 22px;
}
.params-card {
padding: 18px;
min-height: 560px;
}
.params-header {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
margin-bottom: 16px;
}
.params-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.params-grid {
display: grid;
gap: 10px;
}
.param {
display: grid;
grid-template-columns: 118px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.04);
}
.param .k {
color: var(--warn);
font-weight: 600;
font-size: 13px;
}
.param .v {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
.dock-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
.dock {
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.04);
text-align: center;
}
.window-demo {
position: relative;
min-height: 510px;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.06);
background: linear-gradient(180deg, #0b1217, #071015);
}
.window-main,
.window-pop {
position: absolute;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.08);
background: linear-gradient(180deg, rgba(15,24,32,0.97), rgba(9,15,20,0.99));
box-shadow: 0 18px 60px rgba(0,0,0,0.34);
}
.window-main {
left: 22px;
top: 22px;
width: 58%;
height: 82%;
}
.window-pop {
right: 22px;
top: 60px;
width: 34%;
height: 58%;
}
.window-title {
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: var(--muted);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.window-body {
position: absolute;
inset: 52px 14px 14px 14px;
border-radius: 14px;
background: linear-gradient(135deg, #243847, #111a22 58%, #182833);
}
.legend {
display: grid;
gap: 10px;
margin-top: 18px;
}
.legend-item {
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.04);
font-size: 14px;
line-height: 1.45;
}
</style>
</head>
<body>
<div class="page">
<section class="shot" id="shot-overview">
<div class="header">
<div>
<div class="eyebrow">Majoor Floating Viewer</div>
<h1>A dedicated MFV guide should show the full workflow, not only one feature at a time</h1>
<p class="sub">This visual walkthrough presents the floating viewer as a single working surface: compare modes, pin slots, overlay controls, streams, node tools, run/stop actions, and pop-out workflow all fit into one compact panel.</p>
</div>
<div class="pill-row">
<div class="pill">Compare + pins</div>
<div class="pill">Format + guides</div>
<div class="pill">Live + node + KSampler streams</div>
<div class="pill">Node params + run/stop + pop-out</div>
</div>
</div>
<div class="layout-2">
<article class="card viewer-shell">
<div class="viewer-toolbar">
<div class="toolbar-left">
<div class="tool active">Simple</div>
<div class="tool">A/B</div>
<div class="tool">Side</div>
<div class="tool">Grid</div>
<div class="tool">Graph</div>
<div class="tool warn">A Pin</div>
<div class="tool active">B Pin</div>
</div>
<div class="toolbar-right">
<div class="tool active">Live Stream</div>
<div class="tool active">KSampler Preview</div>
<div class="tool">Node Stream</div>
<div class="tool">Guides</div>
<div class="tool">Format</div>
<div class="tool">Pop Out</div>
</div>
</div>
<div class="viewer-surface">
<div class="viewer-media-card">
<div class="viewer-chip">MFV surface · output / shot_0248.mp4</div>
<div class="guide-label">Format 2.39:1 · Guides on</div>
<div class="play"></div>
<div class="bottom-bar">
<div class="scrub"><span></span></div>
<div class="scrub-meta"><span>00:14 / 00:21</span><span>24 fps · Compare ready</span></div>
</div>
</div>
<div class="guides"></div>
</div>
</article>
<div class="side-panel">
<article class="card card-pad">
<h3>What the toolbar actually covers</h3>
<div class="stat-grid" style="margin-top: 16px;">
<div class="stat"><div class="k">Modes</div><div class="v">5</div></div>
<div class="stat"><div class="k">Pin slots</div><div class="v">A/B/C/D</div></div>
<div class="stat"><div class="k">Streams</div><div class="v">3</div></div>
<div class="stat"><div class="k">Pop-out</div><div class="v">Desktop-ready</div></div>
</div>
</article>
<article class="card card-pad">
<h3>Why a dedicated guide helps</h3>
<div class="mini-note" style="margin-top: 16px;">MFV is no longer just a floating preview. It is a compact workflow cockpit. A dedicated document is the cleanest place to explain how compare, pins, overlays, streams, parameters, and run controls fit together.</div>
</article>
</div>
</div>
</section>
<section class="shot" id="shot-compare-pins">
<div class="header">
<div>
<div class="eyebrow">Compare And Pins</div>
<h2>Compare modes and pin slots are the center of fast visual iteration</h2>
<p class="sub">Use compare modes to switch context, then lock references with A/B/C/D pins so new generations can be judged against a stable baseline.</p>
</div>
<div class="toolbar-pills">
<div class="pill">Simple</div>
<div class="pill">A/B</div>
<div class="pill">Side-by-side</div>
<div class="pill">Grid compare</div>
</div>
</div>
<div class="layout-compare">
<div class="compare-grid">
<article class="card compare-card">
<h3>A/B compare</h3>
<p class="sub" style="font-size:14px; max-width:none; margin-top:8px;">Toggle between two states to spot subtle prompt or sampler changes.</p>
<div class="surface split">
<div class="slot-badge">A baseline</div>
<div class="slot-badge" style="left:auto; right:10px;">B candidate</div>
</div>
<div class="pins">
<div class="pin active">A pinned</div>
<div class="pin">B live</div>
</div>
</article>
<article class="card compare-card">
<h3>Side-by-side</h3>
<p class="sub" style="font-size:14px; max-width:none; margin-top:8px;">Keep both assets on screen while zoom and pan stay synchronized.</p>
<div class="surface split">
<div class="slot-badge">Vertical split</div>
</div>
<div class="pins">
<div class="pin active">A pinned</div>
<div class="pin active">B pinned</div>
</div>
</article>
<article class="card compare-card" style="grid-column: span 2; min-height: 390px;">
<h3>Grid compare with four references</h3>
<p class="sub" style="font-size:14px; max-width:none; margin-top:8px;">Pin up to four outputs and review a full sweep at once.</p>
<div class="surface grid4" style="min-height: 240px;">
<div><div class="slot-badge">A pinned</div></div>
<div><div class="slot-badge">B pinned</div></div>
<div><div class="slot-badge">C pinned</div></div>
<div><div class="slot-badge">D pinned</div></div>
</div>
<div class="pins">
<div class="pin active">A</div>
<div class="pin active">B</div>
<div class="pin active">C</div>
<div class="pin active">D</div>
</div>
</article>
</div>
<article class="card card-pad">
<h3>Pin behavior in practice</h3>
<div class="legend">
<div class="legend-item"><strong>Baseline lock</strong><br>Pin your best result in A and let Live Stream replace only the unpinned slot.</div>
<div class="legend-item"><strong>Prompt sweep</strong><br>Keep A/B/C/D locked while reviewing different prompt or sampler passes in grid compare.</div>
<div class="legend-item"><strong>Before / after</strong><br>Use A as the original and B as the current variation while stepping through new runs.</div>
</div>
</article>
</div>
</section>
<section class="shot" id="shot-streams">
<div class="header">
<div>
<div class="eyebrow">Streams</div>
<h2>Live Stream, Node Stream, and KSampler Preview solve three different monitoring jobs</h2>
<p class="sub">The key to using MFV efficiently is understanding which stream follows final outputs, which one follows selected nodes, and which one shows denoising steps during execution.</p>
</div>
<div class="toolbar-pills">
<div class="pill">Final outputs</div>
<div class="pill">Selected node media</div>
<div class="pill">Execution preview frames</div>
</div>
</div>
<div class="layout-3">
<article class="card stream-card">
<h3>Live Stream</h3>
<p class="sub" style="font-size:14px; max-width:none; margin-top:8px;">Follow the newest generated asset automatically after each run finishes.</p>
<div class="stream-surface">
<div class="viewer-chip">Latest output · queue item 1287</div>
<div class="bottom-bar"><div class="scrub"><span style="width: 76%;"></span></div><div class="scrub-meta"><span>new output visible</span><span>auto-follow on</span></div></div>
</div>
<div class="stream-list">
<div class="stream-item"><span class="stream-tag">Best for</span><br>Watching final generations complete without touching the grid.</div>
<div class="stream-item"><span class="stream-tag">Does not do</span><br>It does not follow canvas node selection. That is Node Stream.</div>
</div>
</article>
<article class="card stream-card">
<h3>Node Stream</h3>
<p class="sub" style="font-size:14px; max-width:none; margin-top:8px;">Preview frontend media exposed by the node you click in ComfyUI.</p>
<div class="stream-surface">
<div class="viewer-chip">Selected node · PreviewImage #58</div>
<div class="bottom-bar"><div class="scrub"><span style="width: 43%;"></span></div><div class="scrub-meta"><span>node media attached</span><span>selection follow</span></div></div>
</div>
<div class="stream-list">
<div class="stream-item"><span class="stream-tag">Best for</span><br>Jumping to loader, preview, ImageOps, or save nodes that already expose frontend media.</div>
<div class="stream-item"><span class="stream-tag">Limit</span><br>No frontend media means nothing to display, even if the backend node exists.</div>
</div>
</article>
<article class="card stream-card">
<h3>KSampler Preview</h3>
<p class="sub" style="font-size:14px; max-width:none; margin-top:8px;">Show denoising-step frames while the workflow is still running.</p>
<div class="stream-surface">
<div class="steps">
<div class="step" data-step="step 04"></div>
<div class="step" data-step="step 11"></div>
<div class="step" data-step="step 17"></div>
<div class="step" data-step="step 24"></div>
</div>
</div>
<div class="stream-list">
<div class="stream-item"><span class="stream-tag">Best for</span><br>Watching execution evolve before the final file is written.</div>
<div class="stream-item"><span class="stream-tag">Different from</span><br>It streams sampler preview frames, not selected-node media and not final output follow.</div>
</div>
</article>
</div>
</section>
<section class="shot" id="shot-controls-actions">
<div class="header">
<div>
<div class="eyebrow">Controls And Actions</div>
<h2>Format, guides, node parameters, run, stop, and pop-out turn MFV into a compact workflow cockpit</h2>
<p class="sub">The dedicated MFV doc should explain how display overlays and workflow actions live side by side: tune the viewing surface, inspect node values, queue a prompt again, stop execution, or move the viewer into a separate window.</p>
</div>
<div class="toolbar-pills">
<div class="pill">Format + guides</div>
<div class="pill">Node parameters</div>
<div class="pill">Run / stop</div>
<div class="pill">Pop-out</div>
</div>
</div>
<div class="control-layout">
<article class="card params-card">
<div class="params-header">
<div>
<h3>Node Parameters</h3>
<p class="sub" style="font-size:14px; max-width:none; margin-top:8px;">Edit the workflow node that produced the current result without leaving MFV.</p>
</div>
<div class="tool active">Sidebar open</div>
</div>
<div class="params-actions">
<div class="tool active">Run</div>
<div class="tool danger">Stop</div>
<div class="tool">Graph Map</div>
<div class="tool">Pop Out</div>
</div>
<div class="params-grid">
<div class="param"><div class="k">positive</div><div class="v">cinematic portrait, glass reflections, moody contrast</div></div>
<div class="param"><div class="k">seed</div><div class="v">472198120</div></div>
<div class="param"><div class="k">steps</div><div class="v">24</div></div>
<div class="param"><div class="k">cfg</div><div class="v">6.5</div></div>
<div class="param"><div class="k">sampler</div><div class="v">dpmpp_2m_sde_gpu</div></div>
<div class="param"><div class="k">scheduler</div><div class="v">karras</div></div>
</div>
<div class="dock-grid">
<div class="dock"><strong>Right</strong><br><span class="sub" style="font-size:13px; margin-top:6px; display:block; max-width:none;">Default sidebar</span></div>
<div class="dock"><strong>Left</strong><br><span class="sub" style="font-size:13px; margin-top:6px; display:block; max-width:none;">Canvas-friendly</span></div>
<div class="dock"><strong>Bottom</strong><br><span class="sub" style="font-size:13px; margin-top:6px; display:block; max-width:none;">Wide review mode</span></div>
</div>
</article>
<article class="card card-pad">
<h3>Format and guides overlays</h3>
<div class="window-demo" style="margin-top: 16px; min-height: 260px;">
<div class="window-main" style="position:absolute; left:16px; top:16px; width:calc(100% - 32px); height:calc(100% - 32px);">
<div class="window-title"><span>Viewer overlays</span><span>Format 2.39:1 · Rule of thirds · Safe area</span></div>
<div class="window-body"></div>
<div class="guides" style="inset:52px 14px 14px 14px;"></div>
</div>
</div>
<div class="legend">
<div class="legend-item"><strong>Format</strong><br>Use framing overlays to preview the target crop or presentation ratio.</div>
<div class="legend-item"><strong>Guides</strong><br>Turn on thirds and safe-area guides when you want composition help during comparison.</div>
</div>
<h3 style="margin-top: 22px;">Pop-out workflow</h3>
<div class="window-demo" style="margin-top: 16px;">
<div class="window-main">
<div class="window-title"><span>Main ComfyUI window</span><span>MFV docked</span></div>
<div class="window-body"></div>
</div>
<div class="window-pop">
<div class="window-title"><span>Second-screen pop-out</span><span>MFV detached</span></div>
<div class="window-body"></div>
</div>
</div>
<div class="mini-note" style="margin-top: 18px;">Run is for fast iteration from the viewer. Stop is for aborting the current generation. Pop-out is for moving MFV to a second screen or keeping it detached while ComfyUI stays on the main canvas.</div>
</article>
</div>
</section>
</div>
<script>
(function () {
var params = new URLSearchParams(window.location.search);
var shot = params.get("shot");
if (!shot) {
return;
}
var targetId = shot.indexOf("shot-") === 0 ? shot : "shot-" + shot;
var sections = document.querySelectorAll(".shot");
var hasMatch = false;
sections.forEach(function (section) {
if (section.id === targetId) {
hasMatch = true;
return;
}
section.style.display = "none";
});
if (!hasMatch) {
sections.forEach(function (section) {
section.style.display = "";
});
return;
}
document.body.style.padding = "24px";
var page = document.querySelector(".page");
if (page) {
page.style.width = "1440px";
}
}());
</script>
</body>
</html>