106 lines
4.2 KiB
HTML
106 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<style>
|
||
/* INJECTED CSS */
|
||
__CSS_CONTENT__
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="header">
|
||
<div class="meta-box">
|
||
<span class="meta-label">Model</span>
|
||
<span id="meta-model" class="meta-val">-</span>
|
||
</div>
|
||
|
||
<div style="width:1px; height:12px; background:#222;"></div>
|
||
|
||
<div class="meta-box">
|
||
<span class="meta-label">Pos</span>
|
||
<span id="meta-pos" class="meta-val">-</span>
|
||
</div>
|
||
<div class="meta-box">
|
||
<span class="meta-label">Neg</span>
|
||
<span id="meta-neg" class="meta-val">-</span>
|
||
</div>
|
||
|
||
<div style="flex-grow: 1;"></div>
|
||
|
||
<div class="zoom-controls">
|
||
<button class="action-btn" onclick="resetZoom()" title="Reset Zoom (0)">⊙</button>
|
||
<button class="action-btn" onclick="zoomOut()" title="Zoom Out (-)">−</button>
|
||
<button class="action-btn" onclick="zoomIn()" title="Zoom In (+)">+</button>
|
||
</div>
|
||
|
||
<div class="meta-box">
|
||
<span class="meta-label">Cols</span>
|
||
<input type="number" id="col-count" min="0" max="20" placeholder="Auto" title="Set grid columns (0 = Auto)">
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toolbar">
|
||
<div class="session-ctrl">
|
||
<span style="color:#666; font-size:10px; align-self:center; margin-left:4px;">SESSION:</span>
|
||
<input id="session-input" class="session-input" type="text" value="__TITLE__" onchange="loadSession()">
|
||
<button class="action-btn" onclick="saveState()">SAVE</button>
|
||
<button class="action-btn" onclick="loadSession()">LOAD</button>
|
||
</div>
|
||
|
||
<div class="filter-group"><span class="filter-label">Model</span> <div id="filter-model"></div></div>
|
||
<div class="filter-group"><span class="filter-label">Sampler</span> <div id="filter-sampler"></div></div>
|
||
<div class="filter-group"><span class="filter-label">Sched</span> <div id="filter-scheduler"></div></div>
|
||
<div class="filter-group"><span class="filter-label">Denoise</span> <div id="filter-denoise"></div></div>
|
||
<div class="filter-group"><span class="filter-label">LoRA</span> <div id="filter-lora"></div></div>
|
||
|
||
<div class="toolbar-spacer"></div>
|
||
|
||
<button id="sort-btn" class="action-btn" onclick="toggleSort()">Sort: Oldest</button>
|
||
<button class="fs-btn" onclick="toggleFullscreen()" title="Toggle Fullscreen">⛶</button>
|
||
</div>
|
||
|
||
<div id="viewport">
|
||
<div id="canvas">
|
||
<div class="grid" id="grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="json-container">
|
||
<div id="json-bar-good" class="json-bar" title="ACCEPTED CONFIGS" onclick="selectJSON('json-bar-good')">[]</div>
|
||
<div id="json-bar-bad" class="json-bar" title="REJECTED CONFIGS" onclick="selectJSON('json-bar-bad')">[]</div>
|
||
</div>
|
||
|
||
<div id="modal">
|
||
<div class="modal-main">
|
||
<div class="preview"><img id="m-img" src=""></div>
|
||
<div class="controls">
|
||
<h2 style="margin:0 0 10px 0; color:#fff;">Revise & Generate</h2>
|
||
<div class="field"><label>Sampler</label><input id="f-smp"></div>
|
||
<div class="field"><label>Scheduler</label><input id="f-sch"></div>
|
||
<div class="field"><label>Steps</label><input id="f-stp" type="number"></div>
|
||
<div class="field"><label>CFG</label><input id="f-cfg" type="number" step="0.5"></div>
|
||
<div class="field"><label>Denoise</label><input id="f-den" type="number" step="0.05"></div>
|
||
<div class="field"><label>LoRA</label><input id="f-lor"></div>
|
||
<div style="margin-top:auto; display:flex; gap:10px;">
|
||
<button class="action-btn" style="flex:2; background:var(--accent); color:#000; border:none; height:36px; font-weight:800" onclick="triggerGen()">GENERATE NEW</button>
|
||
<button class="action-btn" style="flex:1" onclick="closeM()">CANCEL</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reel-wrap">
|
||
<div style="font-size:10px; font-weight:bold; color:#666;">RELATED VARIANTS</div>
|
||
<div class="reel" id="reel"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// INJECTED DATA
|
||
const TARGET_NODE_ID = "__NODE_ID__";
|
||
let fullManifest = __JSON_DATA__;
|
||
|
||
// INJECTED LOGIC
|
||
__JS_CONTENT__
|
||
</script>
|
||
</body>
|
||
</html> |