Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c0289afa0e | ||
|
|
a9799e4920 | ||
|
|
52bd6cf4a8 |
|
After Width: | Height: | Size: 285 KiB |
|
After Width: | Height: | Size: 1.6 MiB |
@@ -0,0 +1,149 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>AIGen — Display mock (Classic | Studio)</title>
|
||||||
|
<link rel="stylesheet" href="./tokens/display.css" />
|
||||||
|
<style>
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body { margin: 0; font-family: ui-sans-serif, system-ui, Inter, sans-serif; background: #0e0e10; color: #f3f1ea; }
|
||||||
|
.app { min-height: 100vh; display: flex; flex-direction: column; gap: var(--chrome-gap); padding: var(--chrome-gap); }
|
||||||
|
header.top {
|
||||||
|
height: var(--header-h); display: flex; align-items: center; gap: 12px;
|
||||||
|
border: 1px solid var(--line); border-radius: var(--radius); padding: 0 12px; background: var(--bg-raise);
|
||||||
|
}
|
||||||
|
.brand { font-weight: 650; letter-spacing: .02em; }
|
||||||
|
.grow { flex: 1; }
|
||||||
|
.pill { font-size: var(--type-sm); color: #b8e0a8; border: 1px solid #2d4a2a; background: #142016; border-radius: 999px; padding: 4px 10px; }
|
||||||
|
.nav { color: var(--muted); font-size: var(--type-sm); display: flex; gap: 14px; }
|
||||||
|
.nav b { color: var(--text); font-weight: 600; }
|
||||||
|
.identity-header, .classic-hide { display: flex; gap: 10px; align-items: center; font-size: var(--type-sm); color: var(--muted); }
|
||||||
|
.rail { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||||
|
.seg {
|
||||||
|
height: var(--rail-h); padding: 0 12px; border-radius: var(--radius);
|
||||||
|
border: 1px solid var(--line); background: var(--bg-slot); color: var(--muted); cursor: pointer;
|
||||||
|
}
|
||||||
|
.seg[aria-pressed="true"] { background: #2a1f0c; border-color: var(--amber); color: var(--amber); }
|
||||||
|
.seg:disabled { opacity: .45; cursor: not-allowed; }
|
||||||
|
.classic-selects { display: flex; gap: 8px; }
|
||||||
|
.classic-selects select {
|
||||||
|
background: var(--bg-slot); color: var(--text); border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius); height: var(--rail-h); padding: 0 8px;
|
||||||
|
}
|
||||||
|
.grid { display: grid; grid-template-columns: 240px 1fr 260px; gap: var(--chrome-gap); flex: 1; }
|
||||||
|
.col { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); }
|
||||||
|
.slot { background: var(--bg-slot); border: 1px dashed var(--line); border-radius: var(--radius); min-height: 72px; margin-bottom: 8px; padding: 8px; font-size: var(--type-sm); color: var(--muted); }
|
||||||
|
.slot strong { display: block; color: var(--text); margin-bottom: 4px; }
|
||||||
|
.viewer { position: relative; background: #111; border-radius: var(--radius); min-height: 320px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); }
|
||||||
|
.eye-viewer { position: absolute; top: 8px; right: 8px; background: #000a; border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
|
||||||
|
.strip { display: flex; gap: 8px; margin-top: 10px; }
|
||||||
|
.tile { width: 72px; height: 48px; background: #222; border-radius: 6px; border: 1px solid var(--line); position: relative; }
|
||||||
|
.eye-tile { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; }
|
||||||
|
textarea, input {
|
||||||
|
width: 100%; background: var(--bg-slot); color: var(--text); border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius); padding: 8px; font: inherit;
|
||||||
|
}
|
||||||
|
.cta { width: 100%; height: 44px; border: 0; border-radius: var(--radius); background: var(--amber); color: #1a1204; font-weight: 700; cursor: pointer; margin-top: 10px; }
|
||||||
|
.hint { font-size: 11px; color: var(--muted); margin: 6px 0 10px; }
|
||||||
|
.settings {
|
||||||
|
position: fixed; right: 16px; bottom: 16px; width: 360px; background: var(--bg-raise);
|
||||||
|
border: 1px solid var(--line); border-radius: 10px; padding: 14px; box-shadow: 0 12px 40px #0008;
|
||||||
|
}
|
||||||
|
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||||
|
.card {
|
||||||
|
border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--bg-slot); cursor: pointer; text-align: left; color: inherit;
|
||||||
|
}
|
||||||
|
.card[aria-pressed="true"] { border-color: var(--amber); background: #2a1f0c; }
|
||||||
|
.card small { display: block; color: var(--muted); margin-top: 4px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="app" data-display="studio" id="root">
|
||||||
|
<header class="top">
|
||||||
|
<span class="brand">AIGen</span>
|
||||||
|
<span class="muted" style="color:var(--muted);font-size:12px">/ Inbox</span>
|
||||||
|
<div class="grow"></div>
|
||||||
|
<div class="identity-header">
|
||||||
|
<label><input type="checkbox" checked /> Lock face</label>
|
||||||
|
<label><input type="checkbox" checked /> Lock outfit</label>
|
||||||
|
</div>
|
||||||
|
<div class="classic-hide">
|
||||||
|
<label><input type="checkbox" /> Hide input</label>
|
||||||
|
<label><input type="checkbox" /> Hide output</label>
|
||||||
|
</div>
|
||||||
|
<nav class="nav"><span>Library</span><b>Queue</b><span>Settings</span></nav>
|
||||||
|
<span class="pill">5080 Ready</span>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="rail rail-task" role="tablist">
|
||||||
|
<button class="seg" aria-pressed="false">Image</button>
|
||||||
|
<button class="seg" aria-pressed="false">Edit</button>
|
||||||
|
<button class="seg" aria-pressed="false">Refine</button>
|
||||||
|
<button class="seg" aria-pressed="true">Video</button>
|
||||||
|
<button class="seg" aria-pressed="false">Extend</button>
|
||||||
|
<button class="seg" aria-pressed="false">Music</button>
|
||||||
|
</div>
|
||||||
|
<div class="rail rail-model">
|
||||||
|
<button class="seg" aria-pressed="true">MiniMax H3</button>
|
||||||
|
<button class="seg" disabled title="xAIGen only">LTX</button>
|
||||||
|
</div>
|
||||||
|
<div class="classic-selects">
|
||||||
|
<select><option>Video</option><option>Image</option><option>Extend</option><option>Music</option></select>
|
||||||
|
<select><option>MiniMax H3</option><option disabled>LTX (xAIGen only)</option></select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<aside class="col">
|
||||||
|
<div class="slot"><strong>Hero</strong>car_bee still</div>
|
||||||
|
<div class="slot"><strong>Start</strong>Select still or clip</div>
|
||||||
|
<div class="slot"><strong>End</strong>Optional</div>
|
||||||
|
<div class="identity-slots">
|
||||||
|
<label><input type="checkbox" checked /> Lock face</label><br />
|
||||||
|
<label><input type="checkbox" checked /> Lock outfit</label>
|
||||||
|
<p class="hint">hero encode + lock text — not a MiniMax face/clothes split on stills</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<main class="col">
|
||||||
|
<div class="viewer">
|
||||||
|
<button class="eye-viewer" title="Toggle viewer">eye</button>
|
||||||
|
viewer · last frame / waveform
|
||||||
|
</div>
|
||||||
|
<div class="strip">
|
||||||
|
<div class="tile"><span class="eye-tile">👁</span></div>
|
||||||
|
<div class="tile"><span class="eye-tile">👁</span></div>
|
||||||
|
<div class="tile"><span class="eye-tile">👁</span></div>
|
||||||
|
<div class="tile"><span class="eye-tile">👁</span></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<aside class="col">
|
||||||
|
<textarea rows="5">car_bee walks the Great Hall, cinematic</textarea>
|
||||||
|
<p class="hint">YuE2 target length is a plan hint, not a trim.</p>
|
||||||
|
<input value="seed unlocked" />
|
||||||
|
<button class="cta">Generate</button>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="settings">
|
||||||
|
<strong>Settings → Display</strong>
|
||||||
|
<p class="hint">Layout only. Jobs, engines, and library IDs stay the same.</p>
|
||||||
|
<div class="cards">
|
||||||
|
<button class="card" id="btnClassic" aria-pressed="false">Classic<small>packed header, dropdowns</small></button>
|
||||||
|
<button class="card" id="btnStudio" aria-pressed="true">Studio<small>task rail, model rail, slots + eyes</small></button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<script>
|
||||||
|
const root = document.getElementById("root");
|
||||||
|
const classic = document.getElementById("btnClassic");
|
||||||
|
const studio = document.getElementById("btnStudio");
|
||||||
|
function setMode(mode) {
|
||||||
|
root.setAttribute("data-display", mode);
|
||||||
|
classic.setAttribute("aria-pressed", mode === "classic" ? "true" : "false");
|
||||||
|
studio.setAttribute("aria-pressed", mode === "studio" ? "true" : "false");
|
||||||
|
}
|
||||||
|
classic.onclick = () => setMode("classic");
|
||||||
|
studio.onclick = () => setMode("studio");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<path d="M3 3l18 18"/>
|
||||||
|
<path d="M10.6 10.6A3 3 0 0 0 12 15a3 3 0 0 0 2.4-4.4"/>
|
||||||
|
<path d="M9.9 5.1A11 11 0 0 1 12 5c6.5 0 10 7 10 7a18 18 0 0 1-3.2 3.8"/>
|
||||||
|
<path d="M6.1 6.1C3.7 7.8 2 12 2 12s3.5 7 10 7a10.5 10.5 0 0 0 4.2-.9"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 446 B |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/>
|
||||||
|
<circle cx="12" cy="12" r="3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 308 B |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<rect x="4" y="11" width="16" height="10" rx="2"/>
|
||||||
|
<path d="M8 11V8a4 4 0 0 1 8 0v3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 302 B |
@@ -0,0 +1,56 @@
|
|||||||
|
/* AIGen display tokens — Classic | Studio
|
||||||
|
Apply on [data-display] wrapper. Do not fork components. */
|
||||||
|
|
||||||
|
:root,
|
||||||
|
[data-display="studio"] {
|
||||||
|
--bg: #0e0e10;
|
||||||
|
--bg-raise: #161618;
|
||||||
|
--bg-slot: #1c1c1f;
|
||||||
|
--line: #2a2a2e;
|
||||||
|
--text: #f3f1ea;
|
||||||
|
--muted: #9a9588;
|
||||||
|
--amber: #f5a524;
|
||||||
|
--amber-dim: #c4841c;
|
||||||
|
--radius: 8px;
|
||||||
|
--chrome-gap: 16px;
|
||||||
|
--rail-h: 40px;
|
||||||
|
--card-pad: 14px;
|
||||||
|
--header-h: 52px;
|
||||||
|
--type: 14px;
|
||||||
|
--type-sm: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-display="classic"] {
|
||||||
|
--chrome-gap: 8px;
|
||||||
|
--rail-h: 32px;
|
||||||
|
--card-pad: 10px;
|
||||||
|
--header-h: 44px;
|
||||||
|
--type: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-display] {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-size: var(--type);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-display="classic"] .rail-task,
|
||||||
|
[data-display="classic"] .rail-model {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
[data-display="studio"] .classic-selects {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
[data-display="classic"] .identity-slots {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
[data-display="studio"] .identity-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
[data-display="classic"] .eye-tile,
|
||||||
|
[data-display="classic"] .eye-viewer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
[data-display="studio"] .classic-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@@ -1,118 +1,645 @@
|
|||||||
/* Studio 2 display skins — Classic | Studio. Layout tokens only; palette matches main.css. */
|
/* Pixel grid tokens — Classic | Studio. Match TARGET-classic-layout.png */
|
||||||
|
|
||||||
:root,
|
:root,
|
||||||
[data-display='classic'],
|
|
||||||
[data-display='studio'] {
|
[data-display='studio'] {
|
||||||
--display-bg: #09090b;
|
--bg: #0b0b0d;
|
||||||
--display-fg: #e4e4e7;
|
--panel: #141416;
|
||||||
--display-muted: #a1a1aa;
|
--panel-raise: #1a1a1d;
|
||||||
--display-border: rgba(255, 255, 255, 0.1);
|
--line: #2a2a2e;
|
||||||
--display-amber: #fbbf24;
|
--text: #f3f1ea;
|
||||||
--display-amber-fg: #09090b;
|
--muted: #9a9588;
|
||||||
--display-radius: 8px;
|
--amber: #f5a524;
|
||||||
--display-focus: rgba(252, 211, 77, 0.5);
|
--amber-on: #1a1204;
|
||||||
|
--chip-bg: #2a2418;
|
||||||
|
--chip-line: #5a4a28;
|
||||||
|
--chip-text: #e8c37a;
|
||||||
|
--success: #7dda6f;
|
||||||
|
--radius: 8px;
|
||||||
|
--page-gap: 12px;
|
||||||
|
--field-gap: 12px;
|
||||||
|
--header-h: 48px;
|
||||||
|
--rail-task-h: 40px;
|
||||||
|
--rail-model-h: 36px;
|
||||||
|
--left-w: 260px;
|
||||||
|
--right-w: 280px;
|
||||||
|
--type: 14px;
|
||||||
|
--type-sm: 12px;
|
||||||
|
--type-label: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display='classic'] {
|
[data-display='classic'] {
|
||||||
--chrome-gap: 0.5rem;
|
--field-gap: 8px;
|
||||||
--rail-h: 2.25rem;
|
--type: 13px;
|
||||||
--card-pad: 0.75rem;
|
|
||||||
--display-type-title: 1.75rem;
|
|
||||||
--display-type-body: 0.875rem;
|
|
||||||
--display-viewer-radius: 0.75rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display='studio'] {
|
[data-display] {
|
||||||
--chrome-gap: 1rem;
|
background: var(--bg);
|
||||||
--rail-h: 3rem;
|
color: var(--text);
|
||||||
--card-pad: 1rem;
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||||
--display-type-title: 1.875rem;
|
font-size: var(--type);
|
||||||
--display-type-body: 0.9375rem;
|
|
||||||
--display-viewer-radius: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display] .display-title {
|
/* Skin toggles */
|
||||||
font-size: var(--display-type-title);
|
[data-display='classic'] .rail-task,
|
||||||
|
[data-display='classic'] .rail-model,
|
||||||
|
[data-display='classic'] .identity-slots,
|
||||||
|
[data-display='classic'] .eye-viewer,
|
||||||
|
[data-display='classic'] .eye-tile {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
[data-display='studio'] .classic-task-model,
|
||||||
|
[data-display='studio'] .viewer-lock-bar {
|
||||||
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display] .display-body {
|
.bench-root {
|
||||||
font-size: var(--display-type-body);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-display] .display-stack {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: 100dvh;
|
||||||
|
max-height: 100dvh;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--chrome-gap);
|
overflow: hidden;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display] .display-card {
|
.bench-header {
|
||||||
border-radius: var(--display-radius);
|
display: grid;
|
||||||
border: 1px solid var(--display-border);
|
grid-template-columns: 1fr auto 1fr;
|
||||||
padding: var(--card-pad);
|
align-items: center;
|
||||||
|
height: var(--header-h);
|
||||||
|
min-height: var(--header-h);
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
padding: 0 12px;
|
||||||
|
background: var(--bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display] .display-viewer {
|
.bench-brand {
|
||||||
border-radius: var(--display-viewer-radius);
|
font-weight: 650;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display] .display-rail {
|
.bench-crumb {
|
||||||
display: flex;
|
display: inline-flex;
|
||||||
flex-wrap: wrap;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 6px;
|
||||||
min-height: var(--rail-h);
|
color: var(--muted);
|
||||||
|
font-size: var(--type-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display] .display-rail__seg {
|
.bench-crumb select {
|
||||||
min-height: var(--rail-h);
|
max-width: 14rem;
|
||||||
border-radius: var(--display-radius);
|
border: 0;
|
||||||
border: 1px solid var(--display-border);
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
font-size: var(--display-type-body);
|
|
||||||
color: var(--display-fg);
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
color: var(--text);
|
||||||
|
font: inherit;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display] .display-rail__seg:focus-visible {
|
.bench-header-right {
|
||||||
box-shadow: 0 0 0 2px var(--display-focus);
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display] .display-rail__seg[aria-pressed='true'],
|
.bench-nav {
|
||||||
[data-display] .display-rail__seg[data-active='true'] {
|
display: flex;
|
||||||
border-color: var(--display-amber);
|
gap: 14px;
|
||||||
background: var(--display-amber);
|
font-size: var(--type-sm);
|
||||||
color: var(--display-amber-fg);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display] .display-rail__seg:disabled,
|
.bench-nav a {
|
||||||
[data-display] .display-rail__seg[aria-disabled='true'] {
|
color: inherit;
|
||||||
opacity: 0.55;
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bench-nav a:hover,
|
||||||
|
.bench-nav a.router-link-active {
|
||||||
|
color: var(--amber);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--panel-raise);
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: var(--type-sm);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-chip .dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-chip[data-tone='ready'] .dot { background: var(--success); }
|
||||||
|
.gpu-chip[data-tone='busy'] .dot { background: var(--amber); animation: pulse 1.2s infinite; }
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
50% { opacity: 0.45; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.rail {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rail-task { min-height: var(--rail-task-h); align-items: center; padding-top: 8px; }
|
||||||
|
.rail-model { min-height: var(--rail-model-h); align-items: center; padding-bottom: 8px; }
|
||||||
|
|
||||||
|
.seg {
|
||||||
|
height: 36px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--panel);
|
||||||
|
padding: 0 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: var(--type);
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: capitalize;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rail-model .seg { height: 32px; font-weight: 500; }
|
||||||
|
|
||||||
|
.seg[aria-pressed='true'] {
|
||||||
|
border-color: var(--amber);
|
||||||
|
background: var(--amber);
|
||||||
|
color: var(--amber-on);
|
||||||
|
}
|
||||||
|
|
||||||
|
.seg:disabled {
|
||||||
|
opacity: 0.45;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display='studio'] .display-rail__seg {
|
.seg:focus-visible {
|
||||||
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 55%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bench-grid {
|
||||||
|
display: grid;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w);
|
||||||
|
gap: var(--page-gap);
|
||||||
|
padding: var(--page-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bench-panel {
|
||||||
|
display: flex;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bench-scroll {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspector {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--field-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: var(--type-label);
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-control {
|
||||||
|
width: 100%;
|
||||||
|
height: 36px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--panel-raise);
|
||||||
|
padding: 0 10px;
|
||||||
|
color: var(--text);
|
||||||
|
font: inherit;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-control:focus-visible,
|
||||||
|
.field-area:focus-visible {
|
||||||
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 55%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-area {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 88px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--panel-raise);
|
||||||
|
padding: 8px 10px;
|
||||||
|
color: var(--text);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.4;
|
||||||
|
resize: vertical;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neg-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neg-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
border: 1px solid var(--chip-line);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--chip-bg);
|
||||||
|
padding: 4px 10px;
|
||||||
|
color: var(--chip-text);
|
||||||
|
font-size: var(--type-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.neg-chip button {
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seed-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seed-row .field-control { flex: 1; }
|
||||||
|
|
||||||
|
.dice-btn {
|
||||||
|
display: grid;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
place-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--panel-raise);
|
||||||
|
color: var(--text);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer-lock-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: var(--type-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-stack {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer-frame {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 360px;
|
||||||
|
place-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #0a0a0c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer-frame img,
|
||||||
|
.viewer-frame video {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye-viewer {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 5;
|
||||||
|
display: grid;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
place-items: center;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #000a;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filmstrip {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
gap: 8px;
|
||||||
|
height: 80px;
|
||||||
|
align-items: center;
|
||||||
|
overflow-x: auto;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
padding: 8px 10px;
|
||||||
|
background: var(--panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile {
|
||||||
|
position: relative;
|
||||||
|
width: 96px;
|
||||||
|
height: 64px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) {
|
||||||
|
.tile { width: 120px; height: 80px; }
|
||||||
|
.filmstrip { height: 96px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile[data-active='true'] {
|
||||||
|
border-color: var(--amber);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile button.pick {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile .eye-tile,
|
||||||
|
.tile .tile-trash {
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
right: 3px;
|
||||||
|
display: grid;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
place-items: center;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #000a;
|
||||||
|
color: var(--text);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile .tile-trash { right: 22px; }
|
||||||
|
|
||||||
|
.transport {
|
||||||
|
display: flex;
|
||||||
|
height: 28px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
padding: 0 10px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: var(--type-sm);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transport .ops {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transport button {
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.queue-col {
|
||||||
|
display: flex;
|
||||||
|
min-height: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.queue-head {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 12px 8px;
|
||||||
|
font-weight: 650;
|
||||||
|
}
|
||||||
|
|
||||||
|
.queue-badge {
|
||||||
|
display: inline-grid;
|
||||||
|
min-width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
place-items: center;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--amber);
|
||||||
|
color: var(--amber-on);
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.queue-list {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 0 12px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-card {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--panel-raise);
|
||||||
|
padding: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-card[data-active='true'] {
|
||||||
|
border-width: 2px;
|
||||||
|
border-color: var(--amber);
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-id {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: var(--type-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-title {
|
||||||
|
margin-top: 2px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 0.625rem 1.25rem;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display='classic'] .display-rail__seg {
|
.job-meta {
|
||||||
min-height: 2.25rem;
|
margin-top: 4px;
|
||||||
padding: 0.375rem 0.75rem;
|
color: var(--muted);
|
||||||
font-weight: 500;
|
font-size: var(--type-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display] .display-cta {
|
.job-status {
|
||||||
border-radius: var(--display-radius);
|
display: flex;
|
||||||
background: var(--display-amber);
|
margin-top: 8px;
|
||||||
color: var(--display-amber-fg);
|
align-items: center;
|
||||||
font-weight: 600;
|
justify-content: space-between;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: var(--type-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display] .display-cta:focus-visible {
|
.job-status .left {
|
||||||
box-shadow: 0 0 0 2px var(--display-focus);
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-display] .display-control {
|
.job-status .dot {
|
||||||
border-radius: var(--display-radius);
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-status[data-state='queued'] .dot,
|
||||||
|
.job-status[data-state='waiting'] .dot {
|
||||||
|
background: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kebab {
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--muted);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.queue-foot {
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generate-cta {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--amber);
|
||||||
|
color: var(--amber-on);
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generate-cta:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.queue-foot .tiny {
|
||||||
|
margin-top: 8px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.queue-foot .tiny button {
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-block { width: 100%; }
|
||||||
|
|
||||||
|
.slot-thumb {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: #0a0a0c;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-thumb--hero { height: 148px; }
|
||||||
|
.slot-thumb--slot { height: 96px; }
|
||||||
|
.slot-thumb--empty {
|
||||||
|
height: 72px;
|
||||||
|
border-style: dashed;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: var(--type-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-thumb img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-caption {
|
||||||
|
margin-top: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: var(--type-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-upload {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 4px;
|
||||||
|
color: var(--amber);
|
||||||
|
font-size: var(--type-sm);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-still {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: var(--type-sm);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
@click="setDisplayMode('classic')"
|
@click="setDisplayMode('classic')"
|
||||||
>
|
>
|
||||||
<span class="block font-display text-lg font-semibold text-zinc-50">Classic</span>
|
<span class="block font-display text-lg font-semibold text-zinc-50">Classic</span>
|
||||||
<span class="mt-1 block text-xs text-zinc-400">Packed header, compact selects, tight gaps.</span>
|
<span class="mt-1 block text-xs text-zinc-400">packed header, dropdowns</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -46,7 +46,7 @@
|
|||||||
@click="setDisplayMode('studio')"
|
@click="setDisplayMode('studio')"
|
||||||
>
|
>
|
||||||
<span class="block font-display text-lg font-semibold text-zinc-50">Studio</span>
|
<span class="block font-display text-lg font-semibold text-zinc-50">Studio</span>
|
||||||
<span class="mt-1 block text-xs text-zinc-400">Task and model rails, locks by slots, eye toggles.</span>
|
<span class="mt-1 block text-xs text-zinc-400">task rail, model rail, slots + eyes</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -1,8 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="w-36 shrink-0 space-y-2"><span class="text-xs text-zinc-400">{{ label }}</span><button class="flex h-24 w-full items-center justify-center overflow-hidden rounded-xl border border-white/15 bg-black" @click="$emit('pick')"><span v-if="asset && hidden" class="p-2 text-xs text-zinc-400">Still loaded · preview hidden</span><img v-else-if="asset" :src="asset.kind==='clip'?`/api/library/clips/${asset.id}/thumb`:`/api/library/stills/${asset.id}`" class="h-full w-full object-contain" :alt="label"><span v-else class="text-xs text-zinc-400">Choose {{ label.toLowerCase() }}</span></button><p v-if="asset" class="truncate text-xs" :title="assetLabel(asset)">{{ assetLabel(asset) }}</p><label v-if="upload" class="block cursor-pointer text-xs text-amber-200">Upload {{ label.toLowerCase() }}<input type="file" accept="image/*" class="sr-only" :disabled="disabled" @change="$emit('upload',$event)"></label></div>
|
<div class="slot-block">
|
||||||
|
<span class="field-label">{{ label }}</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="slot-thumb"
|
||||||
|
:class="asset ? (size==='hero' ? 'slot-thumb--hero' : 'slot-thumb--slot') : 'slot-thumb--empty'"
|
||||||
|
@click="$emit('pick')"
|
||||||
|
>
|
||||||
|
<span v-if="asset && hidden" class="p-2 text-center text-[var(--type-sm)] text-[var(--muted)]">Still loaded · preview hidden</span>
|
||||||
|
<img v-else-if="asset" :src="asset.kind==='clip' ? `/api/library/clips/${asset.id}/thumb` : `/api/library/stills/${asset.id}`" :alt="label">
|
||||||
|
<span v-else class="inline-flex items-center gap-1">Select <span aria-hidden="true">▾</span></span>
|
||||||
|
</button>
|
||||||
|
<p v-if="asset" class="slot-caption" :title="assetLabel(asset)">{{ assetLabel(asset) }}</p>
|
||||||
|
<label v-if="upload" class="slot-upload">Upload {{ label.toLowerCase() }}
|
||||||
|
<input type="file" accept="image/*" class="sr-only" :disabled="disabled" @change="$emit('upload',$event)">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {assetLabel} from '~/shared/studio2/viewer.mjs'
|
import {assetLabel} from '~/shared/studio2/viewer.mjs'
|
||||||
defineProps<{label:string;asset?:any;hidden?:boolean;upload?:boolean;disabled?:boolean}>()
|
withDefaults(defineProps<{label:string;asset?:any;hidden?:boolean;upload?:boolean;disabled?:boolean;size?:'hero'|'slot'}>(),{size:'slot'})
|
||||||
defineEmits(['pick','upload'])
|
defineEmits(['pick','upload'])
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,260 +1,284 @@
|
|||||||
<template>
|
<template>
|
||||||
<main class="display-stack w-full min-w-0 p-4 md:p-6 xl:p-8" :data-display="displayMode">
|
<div class="bench-root" :data-display="displayMode">
|
||||||
<header class="flex flex-wrap items-end justify-between gap-4">
|
<header class="bench-header">
|
||||||
<div>
|
<div class="bench-brand">{{ instanceName }}</div>
|
||||||
<h1 class="display-title font-display font-bold tracking-tight text-zinc-50">Studio 2</h1>
|
<div class="bench-crumb" aria-label="Folder">
|
||||||
<p class="display-body mt-1 text-zinc-400">One hero. Every shot.</p>
|
<span aria-hidden="true">📁</span>
|
||||||
|
<span>/ Projects /</span>
|
||||||
|
<select v-model="form.folderId" :aria-label="'Folder'">
|
||||||
|
<option v-for="f in library.folders" :key="f.id" :value="f.id">{{ f.name }}</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap items-center gap-3">
|
<div class="bench-header-right">
|
||||||
<label class="display-body text-zinc-300">Folder
|
<nav class="bench-nav" aria-label="Studio links">
|
||||||
<select v-model="form.folderId" class="display-control ml-2 border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
|
<NuxtLink to="/library">Library</NuxtLink>
|
||||||
<option v-for="f in library.folders" :key="f.id" :value="f.id">{{ f.name }}</option>
|
<NuxtLink to="/queue">Queue</NuxtLink>
|
||||||
</select>
|
<NuxtLink to="/settings">Settings</NuxtLink>
|
||||||
</label>
|
|
||||||
<div v-if="isClassic && form.mode!=='music'" class="flex flex-wrap items-center gap-3 text-sm text-zinc-300" aria-label="Identity locks">
|
|
||||||
<label class="inline-flex items-center gap-1.5"><input v-model="form.lockFace" type="checkbox" class="accent-amber-400">Lock face</label>
|
|
||||||
<label class="inline-flex items-center gap-1.5"><input v-model="form.lockOutfit" type="checkbox" class="accent-amber-400">Lock outfit</label>
|
|
||||||
</div>
|
|
||||||
<div v-if="isClassic && xaigen" class="flex flex-wrap items-center gap-3 text-sm text-zinc-300" aria-label="Preview hide">
|
|
||||||
<label class="inline-flex items-center gap-1.5"><input v-model="classicHideInput" type="checkbox" class="accent-amber-400">Hide input</label>
|
|
||||||
<label class="inline-flex items-center gap-1.5"><input v-model="classicHideOutput" type="checkbox" class="accent-amber-400">Hide output</label>
|
|
||||||
</div>
|
|
||||||
<nav class="flex flex-wrap items-center gap-3 text-sm" aria-label="Studio links">
|
|
||||||
<Studio2GpuStatus :status="gpu" />
|
|
||||||
<NuxtLink to="/queue" class="text-zinc-300 outline-none ring-amber-300/40 focus-visible:ring-2">Queue</NuxtLink>
|
|
||||||
<NuxtLink to="/library" class="text-amber-200 outline-none ring-amber-300/40 focus-visible:ring-2">Library</NuxtLink>
|
|
||||||
<NuxtLink to="/settings" class="text-zinc-300 outline-none ring-amber-300/40 focus-visible:ring-2">Settings</NuxtLink>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
<span class="gpu-chip" :data-tone="gpu.tone" role="status" :title="gpu.detail">
|
||||||
|
<span class="dot" aria-hidden="true" />
|
||||||
|
{{ gpuChipLabel }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="display-stack min-w-0">
|
<nav class="rail rail-task" aria-label="Tasks">
|
||||||
<label v-if="isClassic" class="display-body block text-zinc-300">Task
|
<button
|
||||||
<select :value="form.mode" class="display-control mt-1 w-full max-w-xs border border-white/10 bg-zinc-900 px-3 py-2 capitalize outline-none ring-amber-300/40 focus:ring-2" @change="onTaskSelect">
|
v-for="task in tasks"
|
||||||
<option v-for="task in tasks" :key="task" :value="task" class="capitalize">{{ task }}</option>
|
:key="task"
|
||||||
</select>
|
type="button"
|
||||||
</label>
|
class="seg"
|
||||||
<nav v-else class="display-rail" aria-label="Tasks">
|
:aria-pressed="form.mode===task"
|
||||||
<button
|
@click="chooseTask(task)"
|
||||||
v-for="task in tasks"
|
>{{ task }}</button>
|
||||||
:key="task"
|
</nav>
|
||||||
type="button"
|
<div v-if="form.mode!=='music'" class="rail rail-model" role="group" aria-label="Model">
|
||||||
class="display-rail__seg capitalize"
|
<button
|
||||||
:aria-pressed="form.mode===task"
|
v-for="opt in engineOptions"
|
||||||
@click="chooseTask(task)"
|
:key="opt.value"
|
||||||
>{{ task }}</button>
|
type="button"
|
||||||
</nav>
|
class="seg"
|
||||||
|
:aria-pressed="form.engine===opt.value"
|
||||||
<div v-if="form.mode!=='music'" class="min-w-0">
|
:disabled="opt.disabled"
|
||||||
<label v-if="isClassic" class="display-body block text-zinc-300">Model
|
:title="opt.hint || undefined"
|
||||||
<select v-model="form.engine" class="display-control mt-1 w-full max-w-md border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
|
@click="!opt.disabled && (form.engine=opt.value)"
|
||||||
<option v-for="opt in engineOptions" :key="opt.value" :value="opt.value" :disabled="opt.disabled">{{ opt.label }}{{ opt.hint ? ' — '+opt.hint : '' }}</option>
|
>{{ opt.label }}</button>
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<div v-else class="display-rail" role="group" aria-label="Model">
|
|
||||||
<button
|
|
||||||
v-for="opt in engineOptions"
|
|
||||||
:key="opt.value"
|
|
||||||
type="button"
|
|
||||||
class="display-rail__seg"
|
|
||||||
:aria-pressed="form.engine===opt.value"
|
|
||||||
:aria-disabled="opt.disabled || undefined"
|
|
||||||
:disabled="opt.disabled"
|
|
||||||
:title="opt.hint || undefined"
|
|
||||||
@click="!opt.disabled && (form.engine=opt.value)"
|
|
||||||
>
|
|
||||||
<span class="block">{{ opt.label }}</span>
|
|
||||||
<span v-if="opt.hint" class="mt-0.5 block text-[11px] font-normal opacity-80">{{ opt.hint }}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p v-else class="display-body text-zinc-400">Model · YuE2</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p v-else class="rail rail-model text-[var(--muted)]">YuE2</p>
|
||||||
|
|
||||||
<div class="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(24rem,2fr)] 2xl:gap-8">
|
<div class="bench-grid">
|
||||||
<section class="min-w-0 space-y-4">
|
<!-- LEFT inspector -->
|
||||||
<div class="display-viewer relative flex min-h-80 items-center justify-center overflow-hidden border border-white/10 bg-black">
|
<aside class="bench-panel">
|
||||||
<button
|
<div class="bench-scroll inspector">
|
||||||
v-if="selected && xaigen && isStudio"
|
<div class="classic-task-model space-y-2">
|
||||||
type="button"
|
<label>
|
||||||
class="absolute right-3 top-3 z-10 rounded-full border border-white/20 bg-zinc-950/80 p-2 text-zinc-200 outline-none ring-amber-300/50 hover:border-amber-300/50 focus-visible:ring-2"
|
<span class="field-label">Task</span>
|
||||||
:aria-pressed="!isHidden(selected)"
|
<select :value="form.mode" class="field-control capitalize" @change="onTaskSelect">
|
||||||
:aria-label="isHidden(selected) ? 'Show preview' : 'Hide preview'"
|
<option v-for="task in tasks" :key="task" :value="task" class="capitalize">{{ task }}</option>
|
||||||
@click.stop="toggleReveal(selected.id)"
|
</select>
|
||||||
>
|
</label>
|
||||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
|
<label v-if="form.mode!=='music'">
|
||||||
<path v-if="isHidden(selected)" d="M3 3l18 18M10.5 10.6a2.5 2.5 0 0 0 3 3M9.4 5.1A10.4 10.4 0 0 1 12 4.5c5 0 9.3 3.1 11 7.5a11.6 11.6 0 0 1-4.2 5.1M6.2 6.2A11.5 11.5 0 0 0 1 12c1.2 2.7 3.3 4.9 5.9 6.3A10.5 10.5 0 0 0 12 19.5c1.2 0 2.4-.2 3.5-.6" stroke-linecap="round"/>
|
<span class="field-label">Model</span>
|
||||||
<template v-else>
|
<select v-model="form.engine" class="field-control">
|
||||||
<path d="M2 12s3.5-7.5 10-7.5S22 12 22 12s-3.5 7.5-10 7.5S2 12 2 12Z"/>
|
<option v-for="opt in engineOptions" :key="opt.value" :value="opt.value" :disabled="opt.disabled">{{ opt.label }}{{ opt.hint ? ' — '+opt.hint : '' }}</option>
|
||||||
<circle cx="12" cy="12" r="3"/>
|
</select>
|
||||||
</template>
|
</label>
|
||||||
</svg>
|
<p v-else class="text-[var(--type-sm)] text-[var(--muted)]">Model · YuE2</p>
|
||||||
</button>
|
|
||||||
<p v-if="selected && isHidden(selected)" class="text-zinc-400">{{ selected.kind==='track' ? 'Track loaded · preview hidden' : selected.role==='input' ? 'Still loaded · preview hidden' : 'Output hidden' }}</p>
|
|
||||||
<div v-else-if="selected?.kind==='track'" class="w-full max-w-xl px-6 py-4">
|
|
||||||
<AudioPlayer :src="`/api/library/tracks/${selected.id}/audio`" :download-name="`${selected.name || 'track'}.${selected.ext || 'wav'}`" :label="selected.name || 'Track'" />
|
|
||||||
</div>
|
</div>
|
||||||
<video v-else-if="selected?.kind==='clip'" :key="selected.id" :src="`/api/library/clips/${selected.id}/video`" controls class="max-h-[65vh] w-full object-contain" />
|
|
||||||
<img v-else-if="selected" :src="stillUrl(selected.id)" class="max-h-[65vh] max-w-full object-contain" alt="Current output">
|
|
||||||
<p v-else class="text-zinc-500">Select a result to view it here</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="selected" class="flex flex-wrap items-start gap-3">
|
<template v-if="form.mode==='music'">
|
||||||
<button v-if="selected.kind!=='track'" class="rounded-full border border-white/20 px-4 py-2 text-sm outline-none ring-amber-300/40 focus-visible:ring-2" @click="restore(selected)">Use as input</button>
|
<label><span class="field-label">Genre / style tags</span><textarea v-model="music.tags" rows="3" class="field-area" :placeholder="tagsPlaceholder" /></label>
|
||||||
<button v-if="selected.kind==='still'" class="rounded-full border border-white/20 px-4 py-2 text-sm outline-none ring-amber-300/40 focus-visible:ring-2" @click="Object.assign(form,useAsSource(form,selected))">Use as source still</button>
|
<label><span class="field-label">Lyrics</span><textarea v-model="music.lyrics" rows="8" class="field-area" :placeholder="lyricsPlaceholder" /></label>
|
||||||
<button v-if="selected.kind==='still'" class="rounded-full border border-white/20 px-4 py-2 text-sm outline-none ring-amber-300/40 focus-visible:ring-2" @click="Object.assign(form,useAsHero(form,selected))">Use as hero</button>
|
<label><span class="field-label">Target length (sec)</span><input v-model.number="music.duration" type="number" min="15" max="150" class="field-control"></label>
|
||||||
<button v-if="selected.kind!=='track'" class="rounded-full border border-white/20 px-4 py-2 text-sm outline-none ring-amber-300/40 focus-visible:ring-2" @click="detailsOpen=true">Details</button>
|
<label><span class="field-label">Seed</span><input v-model="music.seed" placeholder="random" class="field-control"></label>
|
||||||
<button class="rounded-full border border-red-400/40 px-4 py-2 text-sm text-red-200 outline-none ring-amber-300/40 focus-visible:ring-2" @click="deleteOutput">Delete</button>
|
<label><span class="field-label">Track name</span><input v-model="music.name" class="field-control" placeholder="Optional"></label>
|
||||||
<VideoUpscaleControl v-if="selected.kind==='clip'" :clip-id="selected.id" queue-only @complete="refresh" />
|
</template>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex min-w-0 max-w-full gap-2 overflow-x-auto" aria-label="Current family outputs">
|
<template v-else>
|
||||||
<div
|
<Studio2AssetSlot size="hero" label="Hero still" :asset="stills.find((a:any)=>a.id===form.identityStillId)" :hidden="slotHidden(form.identityStillId)" upload :disabled="uploading" @pick="picker='identityStillId'" @upload="upload($event,'hero')" />
|
||||||
v-for="o in family"
|
|
||||||
:key="o.id"
|
|
||||||
class="relative shrink-0 rounded-lg border p-1"
|
|
||||||
:class="selected?.id===o.id ? 'border-amber-300' : 'border-white/10'"
|
|
||||||
>
|
|
||||||
<button type="button" class="block outline-none ring-amber-300/40 focus-visible:ring-2" @click="selectOutput(o)">
|
|
||||||
<span v-if="isHidden(o)" class="flex h-20 w-24 items-center justify-center p-1 text-xs text-zinc-400">{{ o.kind==='track' ? 'Audio hidden' : o.role==='input' ? 'Still loaded · preview hidden' : 'Output hidden' }}</span>
|
|
||||||
<span v-else-if="o.kind==='track'" class="flex h-20 w-24 items-center justify-center rounded bg-zinc-900 text-xs text-amber-100">Audio</span>
|
|
||||||
<img v-else :src="o.kind==='clip' ? `/api/library/clips/${o.id}/thumb` : stillUrl(o.id)" class="h-20 w-24 rounded object-cover" alt="Family output">
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="xaigen && isStudio"
|
|
||||||
type="button"
|
|
||||||
class="absolute right-1 top-1 rounded-md border border-white/20 bg-zinc-950/80 p-1 text-zinc-200 outline-none ring-amber-300/50 focus-visible:ring-2"
|
|
||||||
:aria-label="isHidden(o) ? 'Show tile' : 'Hide tile'"
|
|
||||||
:aria-pressed="!isHidden(o)"
|
|
||||||
@click.stop="toggleReveal(o.id)"
|
|
||||||
>
|
|
||||||
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
|
|
||||||
<path v-if="isHidden(o)" d="M3 3l18 18M10.5 10.6a2.5 2.5 0 0 0 3 3M9.4 5.1A10.4 10.4 0 0 1 12 4.5c5 0 9.3 3.1 11 7.5a11.6 11.6 0 0 1-4.2 5.1M6.2 6.2A11.5 11.5 0 0 0 1 12c1.2 2.7 3.3 4.9 5.9 6.3A10.5 10.5 0 0 0 12 19.5c1.2 0 2.4-.2 3.5-.6" stroke-linecap="round"/>
|
|
||||||
<template v-else>
|
|
||||||
<path d="M2 12s3.5-7.5 10-7.5S22 12 22 12s-3.5 7.5-10 7.5S2 12 2 12Z"/>
|
|
||||||
<circle cx="12" cy="12" r="3"/>
|
|
||||||
</template>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section v-if="form.mode!=='music'" aria-label="Source" class="display-card">
|
|
||||||
<div class="mb-3 flex flex-wrap items-start justify-between gap-3">
|
|
||||||
<h2 class="text-xs uppercase tracking-wider text-zinc-400">Source</h2>
|
|
||||||
<div v-if="isStudio" class="flex flex-wrap gap-4 text-sm text-zinc-300" aria-label="Identity locks">
|
|
||||||
<label class="flex items-start gap-2"><input v-model="form.lockFace" type="checkbox" class="mt-1 accent-amber-400"><span>Lock face<span class="block text-xs text-zinc-500">Hero encode + lock on Klein / Krea stills</span></span></label>
|
|
||||||
<label class="flex items-start gap-2"><input v-model="form.lockOutfit" type="checkbox" class="mt-1 accent-amber-400"><span>Lock outfit<span class="block text-xs text-zinc-500">Hero encode + lock on Klein / Krea stills</span></span></label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-wrap gap-4">
|
|
||||||
<Studio2AssetSlot label="Hero" :asset="stills.find((a:any)=>a.id===form.identityStillId)" :hidden="slotHidden(form.identityStillId)" upload :disabled="uploading" @pick="picker='identityStillId'" @upload="upload($event,'hero')" />
|
|
||||||
<Studio2AssetSlot :label="form.mode==='extend'?'Previous clip':'Start still'" :asset="sourceSlot" :hidden="slotHidden(form.mode==='extend'?form.startClipId:form.imageAId)" upload :disabled="uploading" @pick="picker=form.mode==='extend'?'startClipId':'imageAId'" @upload="upload($event,'source')" />
|
<Studio2AssetSlot :label="form.mode==='extend'?'Previous clip':'Start still'" :asset="sourceSlot" :hidden="slotHidden(form.mode==='extend'?form.startClipId:form.imageAId)" upload :disabled="uploading" @pick="picker=form.mode==='extend'?'startClipId':'imageAId'" @upload="upload($event,'source')" />
|
||||||
<Studio2AssetSlot v-if="form.mode==='compose'" label="Second still" :asset="stills.find((a:any)=>a.id===form.imageBId)" :hidden="slotHidden(form.imageBId)" @pick="picker='imageBId'" />
|
<Studio2AssetSlot v-if="form.mode==='compose'" label="Second still" :asset="stills.find((a:any)=>a.id===form.imageBId)" :hidden="slotHidden(form.imageBId)" @pick="picker='imageBId'" />
|
||||||
<Studio2AssetSlot v-if="form.mode==='refine'" label="Mask" :asset="stills.find((a:any)=>a.id===form.maskId)" :hidden="slotHidden(form.maskId)" @pick="picker='maskId'" />
|
<Studio2AssetSlot v-if="form.mode==='refine'" label="Mask" :asset="stills.find((a:any)=>a.id===form.maskId)" :hidden="slotHidden(form.maskId)" @pick="picker='maskId'" />
|
||||||
<Studio2AssetSlot v-if="video" label="End still" :asset="stills.find((a:any)=>a.id===form.endStillId)" :hidden="slotHidden(form.endStillId)" @pick="picker='endStillId'" />
|
<Studio2AssetSlot v-if="video" label="End still" :asset="stills.find((a:any)=>a.id===form.endStillId)" :hidden="slotHidden(form.endStillId)" @pick="picker='endStillId'" />
|
||||||
</div>
|
|
||||||
<label v-if="form.mode==='refine'" class="mt-3 block text-sm">Mask still (white = change). On-canvas mask comes later.
|
|
||||||
<select v-model="form.maskId" class="mt-1 w-full rounded-xl bg-zinc-800 p-2"><option value="">Choose mask still</option><option v-for="a in stills" :key="a.id" :value="a.id">{{ assetLabel(a) }}</option></select>
|
|
||||||
</label>
|
|
||||||
<p v-if="uploading || uploadMessage" role="status" class="mt-2 text-sm text-amber-200">{{ uploading?'Uploading image…':uploadMessage }}</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<details v-if="video" class="rounded-xl border border-white/10 p-3"><summary>Add Guide stills</summary>
|
<div class="identity-slots flex flex-col gap-2 text-[var(--type-sm)] text-[var(--muted)]" aria-label="Identity locks">
|
||||||
<div v-for="(g,i) in form.guides" :key="i" class="mt-2 flex gap-2">
|
<label class="inline-flex items-center gap-2"><input v-model="form.lockFace" type="checkbox" class="accent-[var(--amber)]">Lock face</label>
|
||||||
<Studio2AssetSlot label="Guide" :asset="stills.find((a:any)=>a.id===g.stillId)" :hidden="slotHidden(g.stillId)" @pick="picker='guide:'+i" />
|
<label class="inline-flex items-center gap-2"><input v-model="form.lockOutfit" type="checkbox" class="accent-[var(--amber)]">Lock outfit</label>
|
||||||
<input v-model.number="g.frame" type="number" min="1" aria-label="Guide frame" class="w-20 bg-zinc-800 p-2">
|
<p class="text-[11px]">hero encode + lock text — not a MiniMax face/clothes split on stills</p>
|
||||||
<button type="button" @click="form.guides.splice(i,1)">Remove</button>
|
</div>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<span class="field-label">Prompt</span>
|
||||||
|
<textarea v-model="form.promptSections.action" class="field-area" placeholder="Describe the image or the shot." />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="field-label">Negative prompt</span>
|
||||||
|
<div class="neg-row">
|
||||||
|
<span v-for="chip in negativeChips" :key="chip" class="neg-chip">
|
||||||
|
{{ chip }}
|
||||||
|
<button type="button" :aria-label="'Remove '+chip" @click="removeNegative(chip)">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="field-label">LoRA</span>
|
||||||
|
<LoraSelect v-model="form.settings.loraStack" compact :names="pickerLoras" :use="currentLoraUse" :clip-strength="true" filename-subtitle :aliases="{...loraNames.aliases,...library.loraAliases}" :triggers="{...loraNames.triggers,...library.loraTriggers}" missing-label="None" @insert-trigger="form.promptSections.action += ' '+$event" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="field-label">Seed</span>
|
||||||
|
<div class="seed-row">
|
||||||
|
<input
|
||||||
|
:value="form.settings.seed ?? ''"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max="2147483647"
|
||||||
|
class="field-control"
|
||||||
|
@input="form.settings.seed=Number(($event.target as HTMLInputElement).value);form.settings.seedMode='locked'"
|
||||||
|
>
|
||||||
|
<button type="button" class="dice-btn" title="Random seed" aria-label="Random seed" @click="form.settings.seedMode='random';form.settings.seed=randomSeed()">🎲</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<span class="field-label">Aspect ratio</span>
|
||||||
|
<select v-model="form.settings.aspect" class="field-control">
|
||||||
|
<option v-for="opt in aspectOptions" :key="opt.id" :value="opt.id">{{ opt.label }}</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<button type="button" class="text-left text-[var(--type-sm)] text-[var(--amber)]" @click="settingsOpen=true">More settings (steps / CFG)…</button>
|
||||||
|
<p v-if="uploading || uploadMessage" role="status" class="text-[var(--type-sm)] text-[var(--amber)]">{{ uploading?'Uploading…':uploadMessage }}</p>
|
||||||
|
<p v-if="error" role="alert" class="text-[var(--type-sm)] text-red-300">{{ error }}</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- CENTER viewer -->
|
||||||
|
<section class="bench-panel">
|
||||||
|
<div v-if="form.mode!=='music'" class="viewer-lock-bar" aria-label="Locks and hide">
|
||||||
|
<label class="inline-flex items-center gap-1.5"><input v-model="form.lockFace" type="checkbox" class="accent-[var(--amber)]">Lock face</label>
|
||||||
|
<label class="inline-flex items-center gap-1.5"><input v-model="form.lockOutfit" type="checkbox" class="accent-[var(--amber)]">Lock outfit</label>
|
||||||
|
<label v-if="xaigen" class="inline-flex items-center gap-1.5"><input v-model="classicHideInput" type="checkbox" class="accent-[var(--amber)]">Hide input</label>
|
||||||
|
<label v-if="xaigen" class="inline-flex items-center gap-1.5"><input v-model="classicHideOutput" type="checkbox" class="accent-[var(--amber)]">Hide output</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="center-stack">
|
||||||
|
<div class="viewer-frame">
|
||||||
|
<button
|
||||||
|
v-if="selected && xaigen"
|
||||||
|
type="button"
|
||||||
|
class="eye-viewer"
|
||||||
|
:aria-pressed="!isHidden(selected)"
|
||||||
|
:aria-label="isHidden(selected) ? 'Show preview' : 'Hide preview'"
|
||||||
|
@click.stop="toggleReveal(selected.id)"
|
||||||
|
>
|
||||||
|
<img :src="isHidden(selected) ? '/icons/display/eye-off.svg' : '/icons/display/eye.svg'" alt="" width="16" height="16">
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<template v-if="selected && isHidden(selected)">
|
||||||
|
<p class="placeholder-still">{{ selected.kind==='track' ? 'Track loaded · preview hidden' : selected.role==='input' ? 'Still loaded · preview hidden' : 'Output hidden' }}</p>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="selected?.kind==='track'">
|
||||||
|
<div class="w-full max-w-xl px-6 py-4">
|
||||||
|
<AudioPlayer :src="`/api/library/tracks/${selected.id}/audio`" :download-name="`${selected.name || 'track'}.${selected.ext || 'wav'}`" :label="selected.name || 'Track'" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="selected?.kind==='clip'">
|
||||||
|
<video
|
||||||
|
ref="viewerVideo"
|
||||||
|
:key="selected.id"
|
||||||
|
:src="`/api/library/clips/${selected.id}/video`"
|
||||||
|
class="h-full w-full"
|
||||||
|
:muted="viewerMuted"
|
||||||
|
@timeupdate="onVideoTime"
|
||||||
|
@loadedmetadata="onVideoTime"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="selected">
|
||||||
|
<img :src="stillUrl(selected.id)" alt="Selected still">
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<p class="placeholder-still">Select a still or clip in the strip</p>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="mt-3 text-amber-200" @click="form.guides.push({stillId:'',frame:24})">Add guide</button>
|
|
||||||
</details>
|
<div class="filmstrip" aria-label="Current family outputs">
|
||||||
|
<div
|
||||||
|
v-for="o in family"
|
||||||
|
:key="o.id"
|
||||||
|
class="tile"
|
||||||
|
:data-active="selected?.id===o.id ? 'true' : undefined"
|
||||||
|
>
|
||||||
|
<button type="button" class="pick" @click="selectOutput(o)">
|
||||||
|
<span v-if="isHidden(o)" class="flex h-full items-center justify-center p-1 text-[10px] text-[var(--muted)]">Hidden</span>
|
||||||
|
<span v-else-if="o.kind==='track'" class="flex h-full items-center justify-center text-[10px] text-[var(--amber)]">Audio</span>
|
||||||
|
<img v-else :src="o.kind==='clip' ? `/api/library/clips/${o.id}/thumb` : stillUrl(o.id)" alt="">
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="xaigen"
|
||||||
|
type="button"
|
||||||
|
class="eye-tile"
|
||||||
|
:aria-label="isHidden(o) ? 'Show tile' : 'Hide tile'"
|
||||||
|
@click.stop="toggleReveal(o.id)"
|
||||||
|
>
|
||||||
|
<img :src="isHidden(o) ? '/icons/display/eye-off.svg' : '/icons/display/eye.svg'" alt="" width="12" height="12">
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="selected?.id===o.id"
|
||||||
|
type="button"
|
||||||
|
class="tile-trash"
|
||||||
|
aria-label="Delete selected"
|
||||||
|
title="Delete"
|
||||||
|
@click.stop="deleteOutput"
|
||||||
|
>🗑</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="transport">
|
||||||
|
<span>{{ transportLabel }}</span>
|
||||||
|
<div class="ops">
|
||||||
|
<button type="button" :aria-pressed="viewerMuted" :aria-label="viewerMuted ? 'Unmute' : 'Mute'" @click="viewerMuted=!viewerMuted">{{ viewerMuted ? '🔇' : '🔊' }}</button>
|
||||||
|
<button type="button" aria-label="Fullscreen" @click="toggleFullscreen">⛶</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="min-w-0 space-y-4">
|
<!-- RIGHT queue -->
|
||||||
<template v-if="form.mode==='music'">
|
<aside class="bench-panel queue-col">
|
||||||
<p class="text-sm text-zinc-400">YuE2 · lyrics-to-song · plan → synthesize → decode</p>
|
<div class="queue-head">
|
||||||
<label class="block text-sm">Genre / style tags
|
Queue
|
||||||
<textarea v-model="music.tags" rows="3" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" :placeholder="tagsPlaceholder" />
|
<span class="queue-badge">{{ queueCount }}</span>
|
||||||
</label>
|
|
||||||
<label class="block text-sm">Lyrics
|
|
||||||
<textarea v-model="music.lyrics" rows="8" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" :placeholder="lyricsPlaceholder" />
|
|
||||||
</label>
|
|
||||||
<div class="grid grid-cols-2 gap-3">
|
|
||||||
<label class="block text-sm">Target length (sec)
|
|
||||||
<input v-model.number="music.duration" type="number" min="15" max="150" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2">
|
|
||||||
<span class="mt-1 block text-[11px] text-zinc-500">Caps semantic tokens (~25/s). Actual length follows the model end token — not an FFmpeg trim.</span>
|
|
||||||
</label>
|
|
||||||
<label class="block text-sm">Seed
|
|
||||||
<input v-model="music.seed" placeholder="random" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<label class="block text-sm">Track name (optional)
|
|
||||||
<input v-model="music.name" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" placeholder="Optional track name">
|
|
||||||
</label>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<label class="block">Prompt<textarea v-model="form.promptSections.action" rows="4" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" placeholder="Describe the image or the shot." /></label>
|
|
||||||
<Studio2PromptControls v-if="video" v-model="form.promptSections" />
|
|
||||||
<Studio2StyleChips v-else v-model="form.imageStyles" />
|
|
||||||
<label v-if="video" class="block">Extra constraints (optional) — do not repeat the Prompt. Example: keep the black glasses, no extra people.
|
|
||||||
<textarea v-model="form.promptSections.locks" rows="2" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" />
|
|
||||||
</label>
|
|
||||||
<details v-if="video || form.mode==='edit'" class="rounded-xl border border-white/10 p-3">
|
|
||||||
<summary>{{ video?'Queue more shots':'Queue extra edit passes' }}</summary>
|
|
||||||
<p class="mt-2 text-xs text-zinc-400">Each blank-line-separated block is another job. Hero and settings stay. Press Enter twice between shots. A wrapped sentence is still one shot.{{ video?'':' Each extra pass edits the previous result with Klein.' }}</p>
|
|
||||||
<textarea v-model="batchText" rows="5" class="mt-2 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" placeholder="First additional prompt Next additional prompt" />
|
|
||||||
</details>
|
|
||||||
<button type="button" class="text-sm text-amber-200 outline-none ring-amber-300/40 focus-visible:ring-2" @click="settingsOpen=true">Generation settings</button>
|
|
||||||
<p v-if="!video && form.engine==='krea'" class="text-sm text-zinc-400">Krea does not attach the hero identity reference.</p>
|
|
||||||
<p v-if="form.mode==='extend'" class="text-sm text-amber-200">{{ form.startClipId ? 'Extend · '+(clips.find((c:any)=>c.id===form.startClipId)?.name || form.startClipId)+' · last frame' : 'Select the clip in the family strip or Previous clip.' }}</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<p v-if="error" role="alert" class="text-sm text-red-300">{{ error }}</p>
|
|
||||||
<button type="button" :disabled="submitting" class="display-cta w-full p-4 outline-none disabled:opacity-50" @click="queue">{{ submitting?'Queuing…':'Queue' }}</button>
|
|
||||||
|
|
||||||
<h2 class="text-sm font-semibold text-zinc-300">Job queue</h2>
|
|
||||||
<div v-for="job in upscales.filter(j=>j.folderId===form.folderId && ['queued','running'].includes(j.status))" :key="job.id" class="space-y-2 rounded-xl border border-amber-300/25 bg-zinc-900 p-4 text-sm" role="status">
|
|
||||||
<div class="flex justify-between gap-3"><strong>Video upscale</strong><span class="capitalize text-amber-200">{{ job.status }}</span></div>
|
|
||||||
<p class="truncate text-zinc-300">{{ job.name }}</p>
|
|
||||||
<p class="text-xs text-zinc-400">{{ job.width?job.width+' × '+job.height+' · ':'' }}{{ Math.round((job.elapsedMs||0)/1000) }}s elapsed</p>
|
|
||||||
<progress class="h-2 w-full accent-amber-300" max="100" :value="job.progress || 0" />
|
|
||||||
<p class="text-xs text-zinc-400">{{ job.message }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-for="job in musicJobs" :key="job.id" class="space-y-2 rounded-xl border border-amber-300/25 bg-zinc-900 p-3 text-sm" aria-live="polite" role="status">
|
<div class="queue-list">
|
||||||
<div class="flex justify-between gap-3">
|
<div
|
||||||
<strong class="truncate">{{ job.name || 'YuE2' }}</strong>
|
v-for="card in queueCards"
|
||||||
<span class="capitalize text-amber-200">{{ job.live?.status || job.status }}</span>
|
:key="card.id"
|
||||||
|
class="job-card"
|
||||||
|
:data-active="focusedJobId===card.id ? 'true' : undefined"
|
||||||
|
@click="focusQueueCard(card)"
|
||||||
|
>
|
||||||
|
<div class="job-id">{{ card.code }}</div>
|
||||||
|
<div class="job-title">{{ card.title }}</div>
|
||||||
|
<div class="job-meta">{{ card.meta }}</div>
|
||||||
|
<div class="job-status" :data-state="card.state">
|
||||||
|
<span class="left"><span class="dot" aria-hidden="true" />{{ card.statusLabel }}</span>
|
||||||
|
<button v-if="card.cancelable" type="button" class="kebab" aria-label="Cancel job" @click.stop="cancel(card.job)">⋮</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-xs text-zinc-400">YuE2 · target {{ job.duration || '—' }}s<span v-if="job.live?.message"> · {{ job.live.message }}</span></p>
|
<p v-if="!queueCards.length" class="px-1 text-[var(--type-sm)] text-[var(--muted)]">No active jobs</p>
|
||||||
<progress v-if="job.live?.progress" class="h-2 w-full accent-amber-300" max="100" :value="job.live.progress || 0" />
|
|
||||||
<p v-if="job.lastError || job.live?.error" role="alert" class="text-red-300">{{ job.lastError || job.live?.error }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
<Studio2JobProgress v-for="job in benchJobs" :key="job.id" :job="job" :now="now" @select="focusJob(job)" @cancel="cancel(job)" />
|
<div class="queue-foot">
|
||||||
<button v-if="folderJobs.some(j=>['complete','failed','cancelled'].includes(j.state)) || musicJobs.some(j=>['complete','done','error','cancelled'].includes(j.status))" type="button" class="text-sm text-zinc-400 outline-none ring-amber-300/40 focus-visible:ring-2" @click="clearFinished">Clear finished</button>
|
<button type="button" class="generate-cta" :disabled="submitting" @click="queue">
|
||||||
</section>
|
<span aria-hidden="true">▶</span>
|
||||||
|
{{ submitting ? 'Queuing…' : 'Generate' }}
|
||||||
|
</button>
|
||||||
|
<p class="tiny">
|
||||||
|
Job queue
|
||||||
|
<button v-if="canClearFinished" type="button" @click="clearFinished"> · Clear finished</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="settingsOpen || detailsOpen" class="fixed inset-0 z-50 bg-black/70" @click.self="settingsOpen=false;detailsOpen=false">
|
<div v-if="settingsOpen || detailsOpen" class="fixed inset-0 z-50 bg-black/70" @click.self="settingsOpen=false;detailsOpen=false">
|
||||||
<aside class="absolute inset-y-0 right-0 w-full max-w-md overflow-auto border-l border-white/15 bg-zinc-950 p-6">
|
<aside class="absolute inset-y-0 right-0 w-full max-w-md overflow-auto border-l border-[var(--line)] bg-[var(--bg)] p-6">
|
||||||
<button type="button" class="float-right outline-none ring-amber-300/40 focus-visible:ring-2" @click="settingsOpen=false;detailsOpen=false">Close</button>
|
<button type="button" class="float-right" @click="settingsOpen=false;detailsOpen=false">Close</button>
|
||||||
<template v-if="settingsOpen">
|
<template v-if="settingsOpen">
|
||||||
<h2 class="mb-6 text-xl font-semibold">Generation settings</h2>
|
<h2 class="mb-6 text-xl font-semibold">More settings</h2>
|
||||||
<AspectRatioPick v-model="form.settings.aspect" heading="Aspect" :options="aspectOptions" />
|
<p class="mb-3 text-[var(--type-sm)] text-[var(--muted)]">{{ resolvedSize.width }} × {{ resolvedSize.height }} · fit with padding</p>
|
||||||
<p class="my-3 text-sm text-zinc-400">{{ resolvedSize.width }} × {{ resolvedSize.height }} · fit with padding, never stretch</p>
|
|
||||||
<label v-for="key in ['steps','cfg',...(video?['duration','fps']:[])]" :key="key" class="mb-4 block capitalize">{{ key }}
|
<label v-for="key in ['steps','cfg',...(video?['duration','fps']:[])]" :key="key" class="mb-4 block capitalize">{{ key }}
|
||||||
<input v-model.number="form.settings[key]" type="number" class="mt-1 w-full rounded bg-zinc-800 p-2 outline-none ring-amber-300/40 focus:ring-2">
|
<input v-model.number="form.settings[key]" type="number" class="field-control mt-1">
|
||||||
</label>
|
</label>
|
||||||
<label class="mb-4 block">Seed · {{ form.settings.seedMode==='locked'?'Locked':'Random each job' }}
|
<label v-if="video" class="mb-4 flex items-center gap-2"><input v-model="form.settings.turbo" type="checkbox" class="accent-[var(--amber)]"> Turbo</label>
|
||||||
<input :value="form.settings.seed" type="number" min="0" max="2147483647" class="mt-1 w-full rounded bg-zinc-800 p-2 outline-none ring-amber-300/40 focus:ring-2" @input="form.settings.seed=Number(($event.target as HTMLInputElement).value);form.settings.seedMode='locked'">
|
<details v-if="video || form.mode==='edit'" class="mt-4">
|
||||||
</label>
|
<summary>{{ video?'Queue more shots':'Queue extra edit passes' }}</summary>
|
||||||
<button type="button" class="mb-4 text-sm text-amber-200 outline-none ring-amber-300/40 focus-visible:ring-2" @click="form.settings.seedMode='random';form.settings.seed=randomSeed()">Random</button>
|
<textarea v-model="batchText" rows="5" class="field-area mt-2" placeholder="First additional prompt Next additional prompt" />
|
||||||
<label v-if="video"><input v-model="form.settings.turbo" type="checkbox" class="accent-amber-400"> Turbo</label>
|
|
||||||
<LoraSelect v-model="form.settings.loraStack" class="mt-5" :names="pickerLoras" :use="currentLoraUse" :clip-strength="true" filename-subtitle :aliases="{...loraNames.aliases,...library.loraAliases}" :triggers="{...loraNames.triggers,...library.loraTriggers}" missing-label="No cached LoRAs yet — Refresh to check Comfy" @insert-trigger="form.promptSections.action += ' '+$event" />
|
|
||||||
<button type="button" class="mt-2 text-sm text-amber-200 outline-none ring-amber-300/40 focus-visible:ring-2" @click="loadLoras(true)">Refresh LoRAs</button>
|
|
||||||
<details class="mt-6"><summary>Compiled prompt</summary>
|
|
||||||
<pre class="whitespace-pre-wrap text-xs text-zinc-400">{{ compiled }}</pre>
|
|
||||||
<p v-if="!video" class="mt-3 text-xs text-zinc-400">Negative: {{ stylePrompt(form.imageStyles,true) || 'None' }}</p>
|
|
||||||
</details>
|
</details>
|
||||||
|
<button type="button" class="mt-4 text-[var(--type-sm)] text-[var(--amber)]" @click="loadLoras(true)">Refresh LoRAs</button>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<h2 class="mb-6 text-xl font-semibold">Output details</h2>
|
<h2 class="mb-6 text-xl font-semibold">Output details</h2>
|
||||||
@@ -264,36 +288,37 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="picker" class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-6" @click.self="picker=''">
|
<div v-if="picker" class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-6" @click.self="picker=''">
|
||||||
<section role="dialog" aria-modal="true" aria-label="Choose source asset" class="max-h-[80vh] w-full max-w-4xl overflow-auto rounded-2xl border border-white/15 bg-zinc-950 p-5">
|
<section role="dialog" aria-modal="true" aria-label="Choose source asset" class="max-h-[80vh] w-full max-w-4xl overflow-auto rounded-[var(--radius)] border border-[var(--line)] bg-[var(--panel)] p-5">
|
||||||
<div class="mb-4 flex justify-between"><h2>Choose {{ picker==='identityStillId'?'hero':'source' }}</h2><button type="button" @click="picker=''">Close</button></div>
|
<div class="mb-4 flex justify-between"><h2>Choose {{ picker==='identityStillId'?'hero':'source' }}</h2><button type="button" @click="picker=''">Close</button></div>
|
||||||
<button type="button" class="mb-4 text-sm text-zinc-400" @click="pickAsset(null)">Clear slot</button>
|
<button type="button" class="mb-4 text-[var(--type-sm)] text-[var(--muted)]" @click="pickAsset(null)">Clear slot</button>
|
||||||
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-5">
|
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-5">
|
||||||
<button v-for="a in pickerAssets" :key="a.id" type="button" class="rounded-xl border border-white/15 p-2 text-left outline-none ring-amber-300/40 focus-visible:ring-2" @click="pickAsset(a)">
|
<button v-for="a in pickerAssets" :key="a.id" type="button" class="rounded-[var(--radius)] border border-[var(--line)] p-2 text-left" @click="pickAsset(a)">
|
||||||
<span v-if="isHidden(a)" class="flex h-24 items-center text-xs text-zinc-400">Still loaded · preview hidden</span>
|
<span v-if="isHidden(a)" class="flex h-24 items-center text-xs text-[var(--muted)]">Still loaded · preview hidden</span>
|
||||||
<img v-else :src="a.kind==='clip'?'/api/library/clips/'+a.id+'/thumb':stillUrl(a.id)" class="h-24 w-full object-contain" alt="Source option">
|
<img v-else :src="a.kind==='clip'?'/api/library/clips/'+a.id+'/thumb':stillUrl(a.id)" class="h-24 w-full object-contain" alt="">
|
||||||
<span class="mt-2 block truncate text-xs">{{ assetLabel(a) }}</span>
|
<span class="mt-2 block truncate text-xs">{{ assetLabel(a) }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {createLoraMemory,loraUse} from '~/shared/studio2/lora-memory.mjs'
|
import {createLoraMemory,loraUse} from '~/shared/studio2/lora-memory.mjs'
|
||||||
import {filterLorasForStudio,filterLorasForUse} from '~/utils/loras'
|
import {filterLorasForStudio,filterLorasForUse} from '~/utils/loras'
|
||||||
import {compilePrompt,sectionsFrom} from '~/shared/studio2/contracts.mjs'
|
import {sectionsFrom} from '~/shared/studio2/contracts.mjs'
|
||||||
import {aspectOptions,resolveSize,bindClip,changeSource,restoreAll,useAsHero,useAsSource} from '~/shared/studio2/input.mjs'
|
import {aspectOptions,resolveSize,bindClip,restoreAll,useAsHero,useAsSource} from '~/shared/studio2/input.mjs'
|
||||||
import {folderAssets,newestOutput,assetLabel,reconcileSelection,previewHidden} from '~/shared/studio2/viewer.mjs'
|
import {folderAssets,newestOutput,assetLabel,reconcileSelection,previewHidden} from '~/shared/studio2/viewer.mjs'
|
||||||
import {queueJobs} from '~/shared/studio2/queue-view.mjs'
|
import {queueJobs} from '~/shared/studio2/queue-view.mjs'
|
||||||
import {gpuStatus} from '~/shared/studio2/status.mjs'
|
import {gpuStatus} from '~/shared/studio2/status.mjs'
|
||||||
import {applyUploadedStill} from '~/shared/studio2/upload.mjs'
|
import {applyUploadedStill} from '~/shared/studio2/upload.mjs'
|
||||||
import {parseBatch,stylePrompt} from '~/shared/studio2/styles.mjs'
|
import {defaultNegatives,parseBatch} from '~/shared/studio2/styles.mjs'
|
||||||
import {randomSeed} from '~/shared/studio2/seed.mjs'
|
import {randomSeed} from '~/shared/studio2/seed.mjs'
|
||||||
import {DEFAULT_MUSIC_LYRICS,DEFAULT_MUSIC_TAGS} from '~/utils/music'
|
import {DEFAULT_MUSIC_LYRICS,DEFAULT_MUSIC_TAGS} from '~/utils/music'
|
||||||
|
|
||||||
const xaigen=useRuntimeConfig().public.studio==='xaigen'
|
const xaigen=useRuntimeConfig().public.studio==='xaigen'
|
||||||
const {displayMode,isStudio,isClassic}=useDisplayMode()
|
const instanceName=String(useRuntimeConfig().public.instanceName || 'AIGen')
|
||||||
|
const {displayMode,isClassic}=useDisplayMode()
|
||||||
const classicHideInput=ref(true)
|
const classicHideInput=ref(true)
|
||||||
const classicHideOutput=ref(true)
|
const classicHideOutput=ref(true)
|
||||||
const picker=ref('')
|
const picker=ref('')
|
||||||
@@ -304,7 +329,7 @@ const loraNames=ref<any>({image:[],video:[]}),now=ref(Date.now()),healthState=re
|
|||||||
const library=ref<any>({folders:[],stills:[],clips:[],tracks:[]}),jobs=ref<any[]>([]),selected=ref<any>(null)
|
const library=ref<any>({folders:[],stills:[],clips:[],tracks:[]}),jobs=ref<any[]>([]),selected=ref<any>(null)
|
||||||
const studioQueue=ref<any[]>([])
|
const studioQueue=ref<any[]>([])
|
||||||
const liveMusic=ref<Record<string,any>>({})
|
const liveMusic=ref<Record<string,any>>({})
|
||||||
const form=reactive<any>({mode:'generate',engine:'flux',imageStyles:{positive:[],negative:[]},lockFace:true,lockOutfit:true,hideInput:xaigen,folderId:'',identityStillId:'',imageAId:'',imageBId:'',maskId:'',startClipId:'',endStillId:'',guides:[],promptSections:sectionsFrom({}),settings:{aspect:'auto',fps:24,steps:24,cfg:4,seed:null,seedMode:'random',duration:5,turbo:true,loraStack:[]}})
|
const form=reactive<any>({mode:'generate',engine:'flux',imageStyles:{positive:[],negative:[...defaultNegatives]},lockFace:true,lockOutfit:true,hideInput:xaigen,folderId:'',identityStillId:'',imageAId:'',imageBId:'',maskId:'',startClipId:'',endStillId:'',guides:[],promptSections:sectionsFrom({}),settings:{aspect:'16:9',fps:24,steps:24,cfg:4,seed:null,seedMode:'random',duration:5,turbo:true,loraStack:[]}})
|
||||||
const music=reactive({tags:DEFAULT_MUSIC_TAGS,lyrics:DEFAULT_MUSIC_LYRICS,duration:60,seed:'',name:''})
|
const music=reactive({tags:DEFAULT_MUSIC_TAGS,lyrics:DEFAULT_MUSIC_LYRICS,duration:60,seed:'',name:''})
|
||||||
const tagsPlaceholder=DEFAULT_MUSIC_TAGS,lyricsPlaceholder=DEFAULT_MUSIC_LYRICS
|
const tagsPlaceholder=DEFAULT_MUSIC_TAGS,lyricsPlaceholder=DEFAULT_MUSIC_LYRICS
|
||||||
let loraMemory=createLoraMemory(xaigen)
|
let loraMemory=createLoraMemory(xaigen)
|
||||||
@@ -314,6 +339,11 @@ watch(()=>[currentLoraUse.value,form.settings.loraStack],()=>loraMemory.sync(for
|
|||||||
const route=useRoute()
|
const route=useRoute()
|
||||||
const tasks=['generate','edit','compose','refine','video','extend','music']
|
const tasks=['generate','edit','compose','refine','video','extend','music']
|
||||||
const settingsOpen=ref(false),detailsOpen=ref(false),submitting=ref(false),error=ref(''),batchText=ref('')
|
const settingsOpen=ref(false),detailsOpen=ref(false),submitting=ref(false),error=ref(''),batchText=ref('')
|
||||||
|
const viewerVideo=ref<HTMLVideoElement|null>(null)
|
||||||
|
const viewerMuted=ref(false)
|
||||||
|
const videoTime=ref(0)
|
||||||
|
const videoDuration=ref(0)
|
||||||
|
const focusedJobId=ref('')
|
||||||
const video=computed(()=>['video','extend'].includes(form.mode))
|
const video=computed(()=>['video','extend'].includes(form.mode))
|
||||||
const kreaSticky=computed(()=>['edit','compose','iterate'].includes(form.mode))
|
const kreaSticky=computed(()=>['edit','compose','iterate'].includes(form.mode))
|
||||||
const engineOptions=computed(()=>{
|
const engineOptions=computed(()=>{
|
||||||
@@ -334,7 +364,6 @@ watch(engineOptions,opts=>{
|
|||||||
})
|
})
|
||||||
const stills=computed(()=>library.value.stills.filter((s:any)=>s.folderId===form.folderId))
|
const stills=computed(()=>library.value.stills.filter((s:any)=>s.folderId===form.folderId))
|
||||||
const clips=computed(()=>library.value.clips.filter((s:any)=>s.folderId===form.folderId))
|
const clips=computed(()=>library.value.clips.filter((s:any)=>s.folderId===form.folderId))
|
||||||
const compiled=computed(()=>compilePrompt(form.promptSections,video.value,form))
|
|
||||||
const stillUrl=(id:string)=>`/api/library/stills/${id}`
|
const stillUrl=(id:string)=>`/api/library/stills/${id}`
|
||||||
const folderJobs=computed(()=>jobs.value.filter(j=>j.request.folderId===form.folderId))
|
const folderJobs=computed(()=>jobs.value.filter(j=>j.request.folderId===form.folderId))
|
||||||
const benchJobs=computed(()=>queueJobs(folderJobs.value))
|
const benchJobs=computed(()=>queueJobs(folderJobs.value))
|
||||||
@@ -342,6 +371,12 @@ const musicJobs=computed(()=>studioQueue.value
|
|||||||
.filter((j:any)=>j.kind==='music' && j.folderId===form.folderId && !['complete','done'].includes(j.status))
|
.filter((j:any)=>j.kind==='music' && j.folderId===form.folderId && !['complete','done'].includes(j.status))
|
||||||
.map((j:any)=>({...j,live:j.liveJobId?liveMusic.value[j.liveJobId]:null})))
|
.map((j:any)=>({...j,live:j.liveJobId?liveMusic.value[j.liveJobId]:null})))
|
||||||
const gpu=computed(()=>gpuStatus(jobs.value,healthState.value,upscales.value,musicJobs.value))
|
const gpu=computed(()=>gpuStatus(jobs.value,healthState.value,upscales.value,musicJobs.value))
|
||||||
|
const gpuChipLabel=computed(()=>{
|
||||||
|
const raw=String(healthState.value?.comfy?.gpu || healthState.value?.gpuName || healthState.value?.comfy?.device || '').trim()
|
||||||
|
const short=raw.match(/(\d{3,4})\b/)?.[1]
|
||||||
|
if(gpu.value.tone==='ready') return short ? `${short} Ready` : 'Ready'
|
||||||
|
return gpu.value.label
|
||||||
|
})
|
||||||
const sourceSlot=computed(()=>{const clip=clips.value.find((a:any)=>a.id===form.startClipId);return form.mode==='extend'?(clip?{...clip,kind:'clip'}:null):inputStill.value})
|
const sourceSlot=computed(()=>{const clip=clips.value.find((a:any)=>a.id===form.startClipId);return form.mode==='extend'?(clip?{...clip,kind:'clip'}:null):inputStill.value})
|
||||||
const pickerAssets=computed(()=>picker.value==='startClipId'?clips.value.map((a:any)=>({...a,kind:'clip'})):stills.value.map((a:any)=>({...a,kind:'still'})))
|
const pickerAssets=computed(()=>picker.value==='startClipId'?clips.value.map((a:any)=>({...a,kind:'clip'})):stills.value.map((a:any)=>({...a,kind:'still'})))
|
||||||
const inputStill=computed(()=>stills.value.find((s:any)=>s.id===form.imageAId))
|
const inputStill=computed(()=>stills.value.find((s:any)=>s.id===form.imageAId))
|
||||||
@@ -349,7 +384,85 @@ const family=computed(()=>folderAssets(library.value,jobs.value,form.folderId))
|
|||||||
const sourceAsset=computed(()=>form.startClipId?clips.value.find((c:any)=>c.id===form.startClipId):stills.value.find((s:any)=>s.id===(form.imageAId||form.identityStillId)))
|
const sourceAsset=computed(()=>form.startClipId?clips.value.find((c:any)=>c.id===form.startClipId):stills.value.find((s:any)=>s.id===(form.imageAId||form.identityStillId)))
|
||||||
const sourceSize=computed(()=>measured[sourceAsset.value?.id] || sourceAsset.value)
|
const sourceSize=computed(()=>measured[sourceAsset.value?.id] || sourceAsset.value)
|
||||||
const resolvedSize=computed(()=>resolveSize(form.settings.aspect,sourceSize.value))
|
const resolvedSize=computed(()=>resolveSize(form.settings.aspect,sourceSize.value))
|
||||||
|
const negativeChips=computed(()=>form.imageStyles.negative || [])
|
||||||
|
const queueCards=computed(()=>{
|
||||||
|
const cards:any[]=[]
|
||||||
|
for(const job of benchJobs.value){
|
||||||
|
const action=job.request?.promptSections?.action || 'Job'
|
||||||
|
const eng=job.request?.engine==='ltx'?'LTX':job.request?.engine==='krea'?'Krea 2':job.request?.engine==='minimax'?'MiniMax H3':'Klein'
|
||||||
|
const mode=job.request?.mode || 'generate'
|
||||||
|
const modeLabel=mode.charAt(0).toUpperCase()+mode.slice(1)
|
||||||
|
const aspect=job.request?.settings?.aspect || 'auto'
|
||||||
|
const state=job.state==='waiting'?'queued':job.state
|
||||||
|
cards.push({
|
||||||
|
id:job.id,
|
||||||
|
job,
|
||||||
|
code:'#'+String(job.id).replace(/\D/g,'').slice(-3).padStart(3,'0'),
|
||||||
|
title:action.slice(0,72),
|
||||||
|
meta:`${modeLabel} · ${eng} · ${aspect}`,
|
||||||
|
state,
|
||||||
|
statusLabel:state==='queued'?'Queued':state==='rendering'||state==='submitting'||state==='waking'||state==='saving'?'Running':state==='complete'?'Ready':state,
|
||||||
|
cancelable:!['complete','failed','cancelled'].includes(job.state)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
for(const job of musicJobs.value){
|
||||||
|
cards.push({
|
||||||
|
id:job.id,
|
||||||
|
job,
|
||||||
|
code:'#'+String(job.id).replace(/\D/g,'').slice(-3).padStart(3,'0'),
|
||||||
|
title:job.name || 'YuE2',
|
||||||
|
meta:`Music · YuE2 · ${job.duration || '—'}s`,
|
||||||
|
state:job.live?.status || job.status,
|
||||||
|
statusLabel:job.live?.status || job.status,
|
||||||
|
cancelable:!['complete','done','error','cancelled'].includes(job.status)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
for(const job of upscales.value.filter((j:any)=>j.folderId===form.folderId && ['queued','running'].includes(j.status))){
|
||||||
|
cards.push({
|
||||||
|
id:job.id,
|
||||||
|
job,
|
||||||
|
code:'#'+String(job.id).replace(/\D/g,'').slice(-3).padStart(3,'0'),
|
||||||
|
title:job.name || 'Video upscale',
|
||||||
|
meta:'Upscale',
|
||||||
|
state:job.status,
|
||||||
|
statusLabel:job.status==='running'?'Running':'Queued',
|
||||||
|
cancelable:false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return cards
|
||||||
|
})
|
||||||
|
const queueCount=computed(()=>queueCards.value.length)
|
||||||
|
const canClearFinished=computed(()=>folderJobs.value.some(j=>['complete','failed','cancelled'].includes(j.state)) || musicJobs.value.some(j=>['complete','done','error','cancelled'].includes(j.status)))
|
||||||
|
const transportLabel=computed(()=>{
|
||||||
|
if(selected.value?.kind==='clip') return `${formatTime(videoTime.value)} / ${formatTime(videoDuration.value)}`
|
||||||
|
if(selected.value?.kind==='track') return 'Audio'
|
||||||
|
if(selected.value) return 'Still'
|
||||||
|
return '—'
|
||||||
|
})
|
||||||
|
|
||||||
|
function formatTime(sec:number){
|
||||||
|
const s=Math.max(0,Number(sec)||0)
|
||||||
|
const m=Math.floor(s/60)
|
||||||
|
const r=s-m*60
|
||||||
|
const whole=Math.floor(r)
|
||||||
|
const frac=Math.floor((r-whole)*100)
|
||||||
|
return `${String(m).padStart(2,'0')}:${String(whole).padStart(2,'0')}.${String(frac).padStart(2,'0')}`
|
||||||
|
}
|
||||||
|
function onVideoTime(){
|
||||||
|
const el=viewerVideo.value
|
||||||
|
if(!el)return
|
||||||
|
videoTime.value=el.currentTime||0
|
||||||
|
videoDuration.value=el.duration||0
|
||||||
|
}
|
||||||
|
function toggleFullscreen(){
|
||||||
|
const el=viewerVideo.value || document.querySelector('.viewer-frame')
|
||||||
|
if(el && 'requestFullscreen' in el) void (el as HTMLElement).requestFullscreen()
|
||||||
|
}
|
||||||
|
function removeNegative(chip:string){form.imageStyles={...form.imageStyles,negative:(form.imageStyles.negative||[]).filter((c:string)=>c!==chip)}}
|
||||||
|
function focusQueueCard(card:any){
|
||||||
|
focusedJobId.value=card.id
|
||||||
|
if(card.job?.outputs?.length)focusJob(card.job)
|
||||||
|
}
|
||||||
function isHidden(asset:any){
|
function isHidden(asset:any){
|
||||||
if(!xaigen || !asset?.id)return false
|
if(!xaigen || !asset?.id)return false
|
||||||
if(isClassic.value){
|
if(isClassic.value){
|
||||||
@@ -377,6 +490,7 @@ function loadRevealed(folderId:string){
|
|||||||
}
|
}
|
||||||
|
|
||||||
watch(()=>sourceAsset.value?.id,id=>{const asset=sourceAsset.value;if(!import.meta.client||!asset||measured[id])return;const media=asset.id===form.startClipId?document.createElement('video'):new Image();if(media.tagName==='VIDEO')(media as HTMLVideoElement).preload='metadata';const done=()=>{measured[asset.id]={width:(media as HTMLVideoElement).videoWidth||(media as HTMLImageElement).naturalWidth,height:(media as HTMLVideoElement).videoHeight||(media as HTMLImageElement).naturalHeight}};media.addEventListener(media.tagName==='VIDEO'?'loadedmetadata':'load',done,{once:true});media.src=media.tagName==='VIDEO'?`/api/library/clips/${asset.id}/video`:stillUrl(asset.id)})
|
watch(()=>sourceAsset.value?.id,id=>{const asset=sourceAsset.value;if(!import.meta.client||!asset||measured[id])return;const media=asset.id===form.startClipId?document.createElement('video'):new Image();if(media.tagName==='VIDEO')(media as HTMLVideoElement).preload='metadata';const done=()=>{measured[asset.id]={width:(media as HTMLVideoElement).videoWidth||(media as HTMLImageElement).naturalWidth,height:(media as HTMLVideoElement).videoHeight||(media as HTMLImageElement).naturalHeight}};media.addEventListener(media.tagName==='VIDEO'?'loadedmetadata':'load',done,{once:true});media.src=media.tagName==='VIDEO'?`/api/library/clips/${asset.id}/video`:stillUrl(asset.id)})
|
||||||
|
watch(()=>selected.value?.id,()=>{videoTime.value=0;videoDuration.value=0})
|
||||||
|
|
||||||
function chooseTask(task:string){
|
function chooseTask(task:string){
|
||||||
if(task==='music'){form.mode='music';return}
|
if(task==='music'){form.mode='music';return}
|
||||||
@@ -391,12 +505,13 @@ function chooseTask(task:string){
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
const was=video.value;form.mode=task;form.startClipId='';if(video.value!==was){form.engine=video.value?(xaigen && form.engine==='ltx'?'ltx':'minimax'):'flux';form.settings.steps=video.value?8:24;form.settings.cfg=video.value?1.5:4}
|
const was=video.value;form.mode=task;form.startClipId='';if(video.value!==was){form.engine=video.value?(xaigen && form.engine==='ltx'?'ltx':'minimax'):'flux';form.settings.steps=video.value?8:24;form.settings.cfg=video.value?1.5:4}
|
||||||
|
if(selected.value?.kind==='track' && task!=='music') selected.value=family.value.find((a:any)=>a.kind!=='track') || null
|
||||||
}
|
}
|
||||||
function onTaskSelect(event:Event){chooseTask((event.target as HTMLSelectElement).value)}
|
function onTaskSelect(event:Event){chooseTask((event.target as HTMLSelectElement).value)}
|
||||||
function chooseClip(id:string){if(!id){form.startClipId='';return}const clip=clips.value.find((c:any)=>c.id===id);if(clip){try{Object.assign(form,bindClip(form,clip,xaigen,loraMemory))}catch(e:any){error.value=e?.message||'Could not copy clip settings.';form.startClipId=clip.id;form.mode='extend';form.engine=xaigen && form.engine==='ltx'?'ltx':'minimax'}}}
|
function chooseClip(id:string){if(!id){form.startClipId='';return}const clip=clips.value.find((c:any)=>c.id===id);if(clip){try{Object.assign(form,bindClip(form,clip,xaigen,loraMemory))}catch(e:any){error.value=e?.message||'Could not copy clip settings.';form.startClipId=clip.id;form.mode='extend';form.engine=xaigen && form.engine==='ltx'?'ltx':'minimax'}}}
|
||||||
function selectOutput(item:any){selected.value=item;if(form.mode==='extend' && item?.kind==='clip')chooseClip(item.id)}
|
function selectOutput(item:any){selected.value=item;if(form.mode==='extend' && item?.kind==='clip')chooseClip(item.id)}
|
||||||
function restore(item:any){Object.assign(form,restoreAll(form,item,xaigen,loraMemory));form.guides=form.guides||[];batchText.value=''}
|
function restore(item:any){Object.assign(form,restoreAll(form,item,xaigen,loraMemory));form.guides=form.guides||[];batchText.value=''}
|
||||||
function focusJob(job:any){selectOutput(job.outputs?.at(-1)||null)}
|
function focusJob(job:any){selectOutput(job.outputs?.at(-1)||null);focusedJobId.value=job.id}
|
||||||
async function loadLoras(fresh=false){try{loraNames.value=await $fetch('/api/studio-2/loras'+(fresh?'?fresh=1':''))}catch{error.value='Could not refresh LoRAs. The last loaded list is still available.'}}
|
async function loadLoras(fresh=false){try{loraNames.value=await $fetch('/api/studio-2/loras'+(fresh?'?fresh=1':''))}catch{error.value='Could not refresh LoRAs. The last loaded list is still available.'}}
|
||||||
function pickAsset(asset:any){const key=picker.value;if(key.startsWith('guide:'))form.guides[Number(key.split(':')[1])].stillId=asset?.id||'';else if(key==='startClipId')chooseClip(asset?.id||'');else form[key]=asset?.id||'';picker.value=''}
|
function pickAsset(asset:any){const key=picker.value;if(key.startsWith('guide:'))form.guides[Number(key.split(':')[1])].stillId=asset?.id||'';else if(key==='startClipId')chooseClip(asset?.id||'');else form[key]=asset?.id||'';picker.value=''}
|
||||||
async function clearFinished(){await $fetch('/api/studio-2/clear-finished',{method:'POST'});await refresh()}
|
async function clearFinished(){await $fetch('/api/studio-2/clear-finished',{method:'POST'});await refresh()}
|
||||||
@@ -454,8 +569,12 @@ async function refresh(){
|
|||||||
for(const job of nextJobs)for(const output of job.outputs||[])seenOutputs.add(output.id)
|
for(const job of nextJobs)for(const output of job.outputs||[])seenOutputs.add(output.id)
|
||||||
const existingFresh=family.value.find(a=>a.id===fresh?.id)
|
const existingFresh=family.value.find(a=>a.id===fresh?.id)
|
||||||
const newestTrack=(library.value.tracks||[]).filter((t:any)=>t.folderId===form.folderId).sort((a:any,b:any)=>(b.createdAt||0)-(a.createdAt||0))[0]
|
const newestTrack=(library.value.tracks||[]).filter((t:any)=>t.folderId===form.folderId).sort((a:any,b:any)=>(b.createdAt||0)-(a.createdAt||0))[0]
|
||||||
if(newestTrack && !seenOutputs.has(newestTrack.id)){seenOutputs.add(newestTrack.id);selected.value={...newestTrack,kind:'track'};return}
|
// Only auto-select new tracks on Music — never leave a waveform mounted over Generate/Klein/Video.
|
||||||
selected.value=existingFresh || reconcileSelection(selected.value,family.value)
|
if(form.mode==='music' && newestTrack && !seenOutputs.has(newestTrack.id)){seenOutputs.add(newestTrack.id);selected.value={...newestTrack,kind:'track'};return}
|
||||||
|
if(newestTrack) seenOutputs.add(newestTrack.id)
|
||||||
|
let next=existingFresh || reconcileSelection(selected.value,family.value)
|
||||||
|
if(form.mode!=='music' && next?.kind==='track') next=family.value.find((a:any)=>a.kind!=='track') || null
|
||||||
|
selected.value=next
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(()=>form.folderId,id=>{selected.value=null;form.imageAId='';form.startClipId='';loadRevealed(id);if(import.meta.client)form.identityStillId=localStorage.getItem(`studio2-hero:${id}`)||''},{flush:'sync'})
|
watch(()=>form.folderId,id=>{selected.value=null;form.imageAId='';form.startClipId='';loadRevealed(id);if(import.meta.client)form.identityStillId=localStorage.getItem(`studio2-hero:${id}`)||''},{flush:'sync'})
|
||||||
|
|||||||
@@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f3f1ea" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<path d="M3 3l18 18"/>
|
||||||
|
<path d="M10.6 10.6A3 3 0 0 0 12 15a3 3 0 0 0 2.4-4.4"/>
|
||||||
|
<path d="M9.9 5.1A11 11 0 0 1 12 5c6.5 0 10 7 10 7a18 18 0 0 1-3.2 3.8"/>
|
||||||
|
<path d="M6.1 6.1C3.7 7.8 2 12 2 12s3.5 7 10 7a10.5 10.5 0 0 0 4.2-.9"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 441 B |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f3f1ea" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/>
|
||||||
|
<circle cx="12" cy="12" r="3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 303 B |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<rect x="4" y="11" width="16" height="10" rx="2"/>
|
||||||
|
<path d="M8 11V8a4 4 0 0 1 8 0v3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 302 B |
@@ -1,5 +1,7 @@
|
|||||||
export const styleGroups={Render:['Photorealistic','Pixar','3D Disney','Comic','Watercolor','Oil painting'],Quality:['Realistic skin','Skin pores','Fine detail','Natural texture'],Lighting:['Golden hour','Soft studio','Window light','Overcast','Cinematic lighting']}
|
export const styleGroups={Render:['Photorealistic','Pixar','3D Disney','Comic','Watercolor','Oil painting'],Quality:['Realistic skin','Skin pores','Fine detail','Natural texture'],Lighting:['Golden hour','Soft studio','Window light','Overcast','Cinematic lighting']}
|
||||||
export function normalizeStyles(value={}) { const known=Object.values(styleGroups).flat();const positive=[...new Set((value.positive||[]).filter(s=>known.includes(s)))];return {positive,negative:[...new Set((value.negative||[]).filter(s=>known.includes(s)&&!positive.includes(s)))]} }
|
export const defaultNegatives=['blurry','deformed','low quality','text','watermark']
|
||||||
|
export function normalizeStyles(value={}) { const known=[...Object.values(styleGroups).flat(),...defaultNegatives];const positive=[...new Set((value.positive||[]).filter(s=>known.includes(s)))];return {positive,negative:[...new Set((value.negative||[]).filter(s=>known.includes(s)&&!positive.includes(s)))]} }
|
||||||
export function toggleStyle(value,chip,negative=false) { const next=normalizeStyles(value),key=negative?'negative':'positive',other=negative?'positive':'negative';next[other]=next[other].filter(s=>s!==chip);next[key]=next[key].includes(chip)?next[key].filter(s=>s!==chip):[...next[key],chip];return next }
|
export function toggleStyle(value,chip,negative=false) { const next=normalizeStyles(value),key=negative?'negative':'positive',other=negative?'positive':'negative';next[other]=next[other].filter(s=>s!==chip);next[key]=next[key].includes(chip)?next[key].filter(s=>s!==chip):[...next[key],chip];return next }
|
||||||
export function stylePrompt(value,negative=false){return normalizeStyles(value)[negative?'negative':'positive'].join(', ')}
|
export function stylePrompt(value,negative=false){return normalizeStyles(value)[negative?'negative':'positive'].join(', ')}
|
||||||
export function parseBatch(value){return String(value||'').split(/\r?\n\s*\r?\n/).map(s=>s.trim()).filter(Boolean)}
|
export function parseBatch(value){return String(value||'').split(/\r?\n\s*\r?\n/).map(s=>s.trim()).filter(Boolean)}
|
||||||
|
|
||||||
|
|||||||