Updated generation pages.
This commit is contained in:
Aodhan Collins
@@ -153,12 +153,29 @@
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" id="clear-preview-btn">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-widget-container d-none" id="prompt-tags"></div>
|
||||
<textarea class="form-control form-control-sm font-monospace" id="prompt-preview"
|
||||
name="override_prompt" rows="5"
|
||||
placeholder="Click Build to preview the auto-generated prompt — edit freely before generating."></textarea>
|
||||
<div class="form-text" id="preview-status"></div>
|
||||
</div>
|
||||
|
||||
<!-- ADetailer Prompt Previews -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label mb-0">Face Detailer Prompt</label>
|
||||
<div class="tag-widget-container d-none" id="face-tags"></div>
|
||||
<textarea class="form-control form-control-sm font-monospace" id="face-preview"
|
||||
name="override_face_prompt" rows="2"
|
||||
placeholder="Auto-populated on Build — edit to override face detailer prompt."></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label mb-0">Hand Detailer Prompt</label>
|
||||
<div class="tag-widget-container d-none" id="hand-tags"></div>
|
||||
<textarea class="form-control form-control-sm font-monospace" id="hand-preview"
|
||||
name="override_hand_prompt" rows="2"
|
||||
placeholder="Auto-populated on Build — edit to override hand detailer prompt."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Additional prompts -->
|
||||
<div class="mb-3">
|
||||
<label for="positive_prompt" class="form-label">Additional Positive Prompt</label>
|
||||
@@ -246,7 +263,9 @@
|
||||
randomizeCategory(field, key);
|
||||
});
|
||||
|
||||
document.getElementById('prompt-preview').value = '';
|
||||
clearTagWidgets('prompt-tags', 'prompt-preview');
|
||||
clearTagWidgets('face-tags', 'face-preview');
|
||||
clearTagWidgets('hand-tags', 'hand-preview');
|
||||
document.getElementById('preview-status').textContent = '';
|
||||
}
|
||||
|
||||
@@ -273,6 +292,51 @@
|
||||
});
|
||||
});
|
||||
|
||||
// --- Tag Widget System ---
|
||||
function populateTagWidgets(containerId, textareaId, promptStr) {
|
||||
const container = document.getElementById(containerId);
|
||||
const textarea = document.getElementById(textareaId);
|
||||
container.innerHTML = '';
|
||||
|
||||
if (!promptStr || !promptStr.trim()) {
|
||||
container.classList.add('d-none');
|
||||
return;
|
||||
}
|
||||
|
||||
const tags = promptStr.split(',').map(t => t.trim()).filter(Boolean);
|
||||
tags.forEach(tag => {
|
||||
const el = document.createElement('span');
|
||||
el.className = 'tag-widget active';
|
||||
el.textContent = tag;
|
||||
el.dataset.tag = tag;
|
||||
el.addEventListener('click', () => {
|
||||
el.classList.toggle('active');
|
||||
el.classList.toggle('inactive');
|
||||
rebuildFromTags(containerId, textareaId);
|
||||
});
|
||||
container.appendChild(el);
|
||||
});
|
||||
container.classList.remove('d-none');
|
||||
textarea.classList.add('d-none');
|
||||
}
|
||||
|
||||
function rebuildFromTags(containerId, textareaId) {
|
||||
const container = document.getElementById(containerId);
|
||||
const textarea = document.getElementById(textareaId);
|
||||
const activeTags = Array.from(container.querySelectorAll('.tag-widget.active'))
|
||||
.map(el => el.dataset.tag);
|
||||
textarea.value = activeTags.join(', ');
|
||||
}
|
||||
|
||||
function clearTagWidgets(containerId, textareaId) {
|
||||
const container = document.getElementById(containerId);
|
||||
const textarea = document.getElementById(textareaId);
|
||||
container.innerHTML = '';
|
||||
container.classList.add('d-none');
|
||||
textarea.classList.remove('d-none');
|
||||
textarea.value = '';
|
||||
}
|
||||
|
||||
// --- Prompt preview ---
|
||||
async function buildPromptPreview() {
|
||||
const charVal = document.getElementById('character').value;
|
||||
@@ -288,7 +352,12 @@
|
||||
status.textContent = 'Error: ' + data.error;
|
||||
} else {
|
||||
document.getElementById('prompt-preview').value = data.prompt;
|
||||
status.textContent = 'Auto-built — edit freely, or Clear to let the server rebuild on generate.';
|
||||
document.getElementById('face-preview').value = data.face || '';
|
||||
document.getElementById('hand-preview').value = data.hand || '';
|
||||
populateTagWidgets('prompt-tags', 'prompt-preview', data.prompt);
|
||||
populateTagWidgets('face-tags', 'face-preview', data.face || '');
|
||||
populateTagWidgets('hand-tags', 'hand-preview', data.hand || '');
|
||||
status.textContent = 'Click tags to toggle — Clear to reset.';
|
||||
}
|
||||
} catch (err) {
|
||||
status.textContent = 'Request failed.';
|
||||
@@ -297,7 +366,9 @@
|
||||
|
||||
document.getElementById('build-preview-btn').addEventListener('click', buildPromptPreview);
|
||||
document.getElementById('clear-preview-btn').addEventListener('click', () => {
|
||||
document.getElementById('prompt-preview').value = '';
|
||||
clearTagWidgets('prompt-tags', 'prompt-preview');
|
||||
clearTagWidgets('face-tags', 'face-preview');
|
||||
clearTagWidgets('hand-tags', 'hand-preview');
|
||||
document.getElementById('preview-status').textContent = '';
|
||||
});
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2>Character Library</h2>
|
||||
<div class="d-flex gap-1 align-items-center">
|
||||
<a href="/create" class="btn btn-sm btn-outline-success">+ Character</a>
|
||||
<button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for characters without one" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
|
||||
<button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all characters" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
|
||||
<form action="{{ url_for('rescan') }}" method="post" class="d-contents">
|
||||
|
||||
@@ -25,8 +25,9 @@
|
||||
<a href="/checkpoints" class="btn btn-sm btn-outline-light">Checkpoints</a>
|
||||
<a href="/presets" class="btn btn-sm btn-outline-light">Presets</a>
|
||||
<div class="vr mx-1 d-none d-lg-block"></div>
|
||||
<a href="/create" class="btn btn-sm btn-outline-success">+ Character</a>
|
||||
<a href="/generator" class="btn btn-sm btn-outline-light">Generator</a>
|
||||
<a href="/quick" class="btn btn-sm btn-outline-light">Quick</a>
|
||||
<a href="/multi" class="btn btn-sm btn-outline-light">Multi</a>
|
||||
<a href="/gallery" class="btn btn-sm btn-outline-light">Image Gallery</a>
|
||||
<a href="/settings" class="btn btn-sm btn-outline-light">Settings</a>
|
||||
<div class="vr mx-1 d-none d-lg-block"></div>
|
||||
|
||||
547
templates/multi_char.html
Normal file
547
templates/multi_char.html
Normal file
@@ -0,0 +1,547 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div id="progress-container" class="mb-3 d-none">
|
||||
<label id="progress-label" class="form-label">Generating...</label>
|
||||
<div class="progress" role="progressbar" aria-label="Generation Progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||
<div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white">Multi-Character Generator</div>
|
||||
<div class="card-body">
|
||||
<form id="multi-form" action="{{ url_for('multi_char') }}" method="post">
|
||||
|
||||
<!-- Controls bar -->
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap mb-3 pb-3 border-bottom">
|
||||
<button type="submit" class="btn btn-primary" id="generate-btn" data-requires="comfyui">Generate</button>
|
||||
<input type="number" id="num-images" value="1" min="1" max="999"
|
||||
class="form-control form-control-sm" style="width:65px" title="Number of images">
|
||||
<div class="input-group input-group-sm" style="width:180px">
|
||||
<span class="input-group-text">Seed</span>
|
||||
<input type="number" class="form-control" id="seed-input" name="seed" placeholder="Random" min="1" step="1">
|
||||
<button type="button" class="btn btn-outline-secondary" id="seed-clear-btn" title="Clear (random)">×</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-warning" id="endless-btn">Endless</button>
|
||||
<button type="button" class="btn btn-danger d-none" id="stop-btn">Stop</button>
|
||||
<div class="ms-auto form-check mb-0">
|
||||
<input type="checkbox" class="form-check-input" id="lucky-dip">
|
||||
<label class="form-check-label" for="lucky-dip">Lucky Dip</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Character A -->
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<label for="char_a" class="form-label mb-0">Character A</label>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary random-char-btn" data-target="char_a">Random</button>
|
||||
</div>
|
||||
<select class="form-select" id="char_a" name="char_a" required>
|
||||
<option value="" disabled {% if not selected_char_a %}selected{% endif %}>Select character A...</option>
|
||||
{% for char in characters %}
|
||||
<option value="{{ char.slug }}" {% if selected_char_a == char.slug %}selected{% endif %}>{{ char.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Character B -->
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<label for="char_b" class="form-label mb-0">Character B</label>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary random-char-btn" data-target="char_b">Random</button>
|
||||
</div>
|
||||
<select class="form-select" id="char_b" name="char_b" required>
|
||||
<option value="" disabled {% if not selected_char_b %}selected{% endif %}>Select character B...</option>
|
||||
{% for char in characters %}
|
||||
<option value="{{ char.slug }}" {% if selected_char_b == char.slug %}selected{% endif %}>{{ char.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Checkpoint -->
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<label for="checkpoint" class="form-label mb-0">Checkpoint Model</label>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" id="random-ckpt-btn">Random</button>
|
||||
</div>
|
||||
<select class="form-select" id="checkpoint" name="checkpoint" required>
|
||||
{% for ckpt in checkpoints %}
|
||||
<option value="{{ ckpt }}">{{ ckpt }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Mix & Match -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Mix & Match
|
||||
<small class="text-muted fw-normal ms-1">— first checked per category applies its LoRA</small>
|
||||
</label>
|
||||
<div class="accordion" id="mixAccordion">
|
||||
{% set mix_categories = [
|
||||
('Actions', 'action', actions, 'action_slugs'),
|
||||
('Scenes', 'scene', scenes, 'scene_slugs'),
|
||||
('Styles', 'style', styles, 'style_slugs'),
|
||||
('Detailers', 'detailer', detailers, 'detailer_slugs'),
|
||||
] %}
|
||||
{% for cat_label, cat_key, cat_items, field_name in mix_categories %}
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed py-2" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#mix-{{ cat_key }}">
|
||||
{{ cat_label }}
|
||||
<span class="badge bg-secondary rounded-pill ms-2" id="badge-{{ cat_key }}">0</span>
|
||||
<span class="badge bg-light text-secondary border ms-2 px-2 py-1"
|
||||
style="cursor:pointer;font-size:.7rem;font-weight:normal"
|
||||
onclick="event.stopPropagation(); randomizeCategory('{{ field_name }}', '{{ cat_key }}')">Random</span>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="mix-{{ cat_key }}" class="accordion-collapse collapse">
|
||||
<div class="accordion-body p-2">
|
||||
<input type="text" class="form-control form-control-sm mb-2"
|
||||
placeholder="Search {{ cat_label | lower }}..."
|
||||
oninput="filterMixCategory(this, 'mixlist-{{ cat_key }}')">
|
||||
<div id="mixlist-{{ cat_key }}" style="max-height:220px;overflow-y:auto;">
|
||||
{% for item in cat_items %}
|
||||
<label class="mix-item d-flex align-items-center gap-2 px-2 py-1 rounded"
|
||||
data-name="{{ item.name | lower }}" style="cursor:pointer;">
|
||||
<input type="checkbox" class="form-check-input flex-shrink-0"
|
||||
name="{{ field_name }}" value="{{ item.slug }}"
|
||||
onchange="updateMixBadge('{{ cat_key }}', '{{ field_name }}')">
|
||||
{% if item.image_path %}
|
||||
<img src="{{ url_for('static', filename='uploads/' + item.image_path) }}"
|
||||
class="rounded flex-shrink-0" style="width:32px;height:32px;object-fit:cover">
|
||||
{% else %}
|
||||
<span class="rounded bg-light flex-shrink-0 d-inline-flex align-items-center justify-content-center text-muted"
|
||||
style="width:32px;height:32px;font-size:9px;">N/A</span>
|
||||
{% endif %}
|
||||
<span class="small text-truncate">{{ item.name }}</span>
|
||||
</label>
|
||||
{% else %}
|
||||
<p class="text-muted small p-2 mb-0">No {{ cat_label | lower }} found.</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resolution -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Resolution</label>
|
||||
<div class="d-flex flex-wrap gap-1 mb-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="1024" data-h="1024">1:1</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary preset-btn" data-w="1152" data-h="896">4:3 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="896" data-h="1152">4:3 P</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="1344" data-h="768">16:9 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="768" data-h="1344">16:9 P</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="1792" data-h="768">21:9 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="768" data-h="1792">21:9 P</button>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<label class="form-label mb-0 small fw-semibold">W</label>
|
||||
<input type="number" class="form-control form-control-sm" name="width" id="res-width"
|
||||
value="1152" min="64" max="4096" step="64" style="width:88px">
|
||||
<span class="text-muted">×</span>
|
||||
<label class="form-label mb-0 small fw-semibold">H</label>
|
||||
<input type="number" class="form-control form-control-sm" name="height" id="res-height"
|
||||
value="896" min="64" max="4096" step="64" style="width:88px">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prompt Previews -->
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<label class="form-label mb-0">Prompt Previews</label>
|
||||
<div class="d-flex gap-1">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary" id="build-preview-btn">Build</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" id="clear-preview-btn">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-text mb-2" id="preview-status"></div>
|
||||
|
||||
<label class="form-label mb-0 small text-muted">Main (KSampler)</label>
|
||||
<div class="tag-widget-container d-none mb-2" id="prompt-tags"></div>
|
||||
<textarea class="form-control form-control-sm font-monospace mb-2" id="prompt-preview"
|
||||
name="override_prompt" rows="4"
|
||||
placeholder="Click Build to preview — this is the combined prompt sent to KSampler."></textarea>
|
||||
|
||||
<label class="form-label mb-0 small text-muted">Person A Detailer (left)</label>
|
||||
<div class="tag-widget-container d-none mb-2" id="char-a-main-tags"></div>
|
||||
<textarea class="form-control form-control-sm font-monospace mb-2" id="char-a-main-preview"
|
||||
name="override_char_a_main" rows="2"
|
||||
placeholder="Character A body prompt for person ADetailer."></textarea>
|
||||
|
||||
<label class="form-label mb-0 small text-muted">Person B Detailer (right)</label>
|
||||
<div class="tag-widget-container d-none mb-2" id="char-b-main-tags"></div>
|
||||
<textarea class="form-control form-control-sm font-monospace mb-2" id="char-b-main-preview"
|
||||
name="override_char_b_main" rows="2"
|
||||
placeholder="Character B body prompt for person ADetailer."></textarea>
|
||||
|
||||
<label class="form-label mb-0 small text-muted">Face A Detailer (left)</label>
|
||||
<div class="tag-widget-container d-none mb-2" id="char-a-face-tags"></div>
|
||||
<textarea class="form-control form-control-sm font-monospace mb-2" id="char-a-face-preview"
|
||||
name="override_char_a_face" rows="2"
|
||||
placeholder="Character A face prompt."></textarea>
|
||||
|
||||
<label class="form-label mb-0 small text-muted">Face B Detailer (right)</label>
|
||||
<div class="tag-widget-container d-none mb-2" id="char-b-face-tags"></div>
|
||||
<textarea class="form-control form-control-sm font-monospace mb-2" id="char-b-face-preview"
|
||||
name="override_char_b_face" rows="2"
|
||||
placeholder="Character B face prompt."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Additional prompts -->
|
||||
<div class="mb-3">
|
||||
<label for="positive_prompt" class="form-label">Additional Positive Prompt</label>
|
||||
<textarea class="form-control" id="positive_prompt" name="positive_prompt" rows="2" placeholder="e.g. standing together, park, daylight"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="negative_prompt" class="form-label">Additional Negative Prompt</label>
|
||||
<textarea class="form-control" id="negative_prompt" name="negative_prompt" rows="2" placeholder="e.g. bad hands, extra digits"></textarea>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<div class="card">
|
||||
<div class="card-header bg-dark text-white">Result</div>
|
||||
<div class="card-body p-0 d-flex align-items-center justify-content-center" style="min-height: 500px;" id="result-container">
|
||||
<div class="text-center text-muted" id="placeholder-text">
|
||||
<p>Select two characters and click Generate</p>
|
||||
</div>
|
||||
<div class="img-container w-100 h-100 d-none">
|
||||
<img src="" alt="Generated Result" class="img-fluid w-100" id="result-img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// --- Filtering ---
|
||||
function filterMixCategory(input, listId) {
|
||||
const query = input.value.toLowerCase();
|
||||
document.querySelectorAll(`#${listId} .mix-item`).forEach(el => {
|
||||
el.style.display = el.dataset.name.includes(query) ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
function updateMixBadge(key, fieldName) {
|
||||
const count = document.querySelectorAll(`input[name="${fieldName}"]:checked`).length;
|
||||
const badge = document.getElementById(`badge-${key}`);
|
||||
badge.textContent = count;
|
||||
badge.className = count > 0
|
||||
? 'badge bg-primary rounded-pill ms-2'
|
||||
: 'badge bg-secondary rounded-pill ms-2';
|
||||
}
|
||||
|
||||
// --- Randomizers ---
|
||||
function randomizeCategory(fieldName, catKey) {
|
||||
const cbs = Array.from(document.querySelectorAll(`input[name="${fieldName}"]`));
|
||||
cbs.forEach(cb => cb.checked = false);
|
||||
if (cbs.length) cbs[Math.floor(Math.random() * cbs.length)].checked = true;
|
||||
updateMixBadge(catKey, fieldName);
|
||||
}
|
||||
|
||||
function randomizeSelect(selectId) {
|
||||
const opts = Array.from(document.getElementById(selectId).options).filter(o => o.value);
|
||||
if (opts.length)
|
||||
document.getElementById(selectId).value = opts[Math.floor(Math.random() * opts.length)].value;
|
||||
}
|
||||
|
||||
function applyLuckyDip() {
|
||||
randomizeSelect('char_a');
|
||||
randomizeSelect('char_b');
|
||||
randomizeSelect('checkpoint');
|
||||
|
||||
const presets = Array.from(document.querySelectorAll('.preset-btn'));
|
||||
if (presets.length) presets[Math.floor(Math.random() * presets.length)].click();
|
||||
|
||||
[['action_slugs', 'action'], ['scene_slugs', 'scene'],
|
||||
['style_slugs', 'style'], ['detailer_slugs', 'detailer']].forEach(([field, key]) => {
|
||||
randomizeCategory(field, key);
|
||||
});
|
||||
}
|
||||
|
||||
// --- Resolution presets ---
|
||||
document.querySelectorAll('.preset-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.getElementById('res-width').value = btn.dataset.w;
|
||||
document.getElementById('res-height').value = btn.dataset.h;
|
||||
document.querySelectorAll('.preset-btn').forEach(b => {
|
||||
b.classList.remove('btn-secondary');
|
||||
b.classList.add('btn-outline-secondary');
|
||||
});
|
||||
btn.classList.remove('btn-outline-secondary');
|
||||
btn.classList.add('btn-secondary');
|
||||
});
|
||||
});
|
||||
|
||||
['res-width', 'res-height'].forEach(id => {
|
||||
document.getElementById(id).addEventListener('input', () => {
|
||||
document.querySelectorAll('.preset-btn').forEach(b => {
|
||||
b.classList.remove('btn-secondary');
|
||||
b.classList.add('btn-outline-secondary');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// --- Tag Widget System ---
|
||||
function populateTagWidgets(containerId, textareaId, promptStr, opts = {}) {
|
||||
const container = document.getElementById(containerId);
|
||||
const textarea = document.getElementById(textareaId);
|
||||
container.innerHTML = '';
|
||||
|
||||
if (!promptStr || !promptStr.trim()) {
|
||||
container.classList.add('d-none');
|
||||
return;
|
||||
}
|
||||
|
||||
// Split on commas but preserve BREAK as a visual separator
|
||||
const rawParts = promptStr.split(',').map(t => t.trim()).filter(Boolean);
|
||||
rawParts.forEach(part => {
|
||||
// Check if this part contains BREAK (e.g. "tag1 BREAK tag2")
|
||||
if (part.includes('BREAK')) {
|
||||
const breakParts = part.split(/\s+BREAK\s+/);
|
||||
breakParts.forEach((bp, i) => {
|
||||
if (bp.trim()) {
|
||||
addTagEl(container, containerId, textareaId, bp.trim(), opts.readonly);
|
||||
}
|
||||
if (i < breakParts.length - 1) {
|
||||
const sep = document.createElement('span');
|
||||
sep.className = 'tag-widget';
|
||||
sep.style.cssText = 'background:var(--accent-glow);color:var(--accent-bright);cursor:default;font-weight:600;pointer-events:none;';
|
||||
sep.textContent = 'BREAK';
|
||||
sep.dataset.break = 'true';
|
||||
container.appendChild(sep);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
addTagEl(container, containerId, textareaId, part, opts.readonly);
|
||||
}
|
||||
});
|
||||
container.classList.remove('d-none');
|
||||
textarea.classList.add('d-none');
|
||||
}
|
||||
|
||||
function addTagEl(container, containerId, textareaId, tag, readonly) {
|
||||
const el = document.createElement('span');
|
||||
el.className = 'tag-widget active';
|
||||
el.textContent = tag;
|
||||
el.dataset.tag = tag;
|
||||
if (!readonly) {
|
||||
el.addEventListener('click', () => {
|
||||
el.classList.toggle('active');
|
||||
el.classList.toggle('inactive');
|
||||
rebuildFromTags(containerId, textareaId);
|
||||
});
|
||||
} else {
|
||||
el.style.cursor = 'default';
|
||||
}
|
||||
container.appendChild(el);
|
||||
}
|
||||
|
||||
function rebuildFromTags(containerId, textareaId) {
|
||||
const container = document.getElementById(containerId);
|
||||
const textarea = document.getElementById(textareaId);
|
||||
const parts = [];
|
||||
let currentGroup = [];
|
||||
container.querySelectorAll('.tag-widget').forEach(el => {
|
||||
if (el.dataset.break) {
|
||||
if (currentGroup.length) parts.push(currentGroup.join(', '));
|
||||
currentGroup = [];
|
||||
} else if (el.classList.contains('active')) {
|
||||
currentGroup.push(el.dataset.tag);
|
||||
}
|
||||
});
|
||||
if (currentGroup.length) parts.push(currentGroup.join(', '));
|
||||
textarea.value = parts.join(' BREAK ');
|
||||
}
|
||||
|
||||
function clearTagWidgets(containerId, textareaId) {
|
||||
const container = document.getElementById(containerId);
|
||||
const textarea = document.getElementById(textareaId);
|
||||
container.innerHTML = '';
|
||||
container.classList.add('d-none');
|
||||
textarea.classList.remove('d-none');
|
||||
textarea.value = '';
|
||||
}
|
||||
|
||||
const TAG_PAIRS = [
|
||||
['prompt-tags', 'prompt-preview'],
|
||||
['char-a-main-tags', 'char-a-main-preview'],
|
||||
['char-b-main-tags', 'char-b-main-preview'],
|
||||
['char-a-face-tags', 'char-a-face-preview'],
|
||||
['char-b-face-tags', 'char-b-face-preview'],
|
||||
];
|
||||
|
||||
// --- Prompt preview ---
|
||||
async function buildPromptPreview() {
|
||||
const charA = document.getElementById('char_a').value;
|
||||
const charB = document.getElementById('char_b').value;
|
||||
const status = document.getElementById('preview-status');
|
||||
if (!charA || !charB) { status.textContent = 'Select both characters first.'; return; }
|
||||
|
||||
status.textContent = 'Building...';
|
||||
const formData = new FormData(document.getElementById('multi-form'));
|
||||
try {
|
||||
const resp = await fetch('/multi/preview_prompt', { method: 'POST', body: formData });
|
||||
const data = await resp.json();
|
||||
if (data.error) {
|
||||
status.textContent = 'Error: ' + data.error;
|
||||
} else {
|
||||
document.getElementById('prompt-preview').value = data.prompt;
|
||||
document.getElementById('char-a-main-preview').value = data.char_a_main || '';
|
||||
document.getElementById('char-b-main-preview').value = data.char_b_main || '';
|
||||
document.getElementById('char-a-face-preview').value = data.char_a_face || '';
|
||||
document.getElementById('char-b-face-preview').value = data.char_b_face || '';
|
||||
populateTagWidgets('prompt-tags', 'prompt-preview', data.prompt);
|
||||
populateTagWidgets('char-a-main-tags', 'char-a-main-preview', data.char_a_main || '');
|
||||
populateTagWidgets('char-b-main-tags', 'char-b-main-preview', data.char_b_main || '');
|
||||
populateTagWidgets('char-a-face-tags', 'char-a-face-preview', data.char_a_face || '');
|
||||
populateTagWidgets('char-b-face-tags', 'char-b-face-preview', data.char_b_face || '');
|
||||
status.textContent = 'Click tags to toggle — Clear to reset.';
|
||||
}
|
||||
} catch (err) {
|
||||
status.textContent = 'Request failed.';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('build-preview-btn').addEventListener('click', buildPromptPreview);
|
||||
document.getElementById('clear-preview-btn').addEventListener('click', () => {
|
||||
TAG_PAIRS.forEach(([c, t]) => clearTagWidgets(c, t));
|
||||
document.getElementById('preview-status').textContent = '';
|
||||
});
|
||||
|
||||
// --- Main generation logic ---
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const form = document.getElementById('multi-form');
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const progressCont = document.getElementById('progress-container');
|
||||
const progressLbl = document.getElementById('progress-label');
|
||||
const generateBtn = document.getElementById('generate-btn');
|
||||
const endlessBtn = document.getElementById('endless-btn');
|
||||
const stopBtn = document.getElementById('stop-btn');
|
||||
const numInput = document.getElementById('num-images');
|
||||
const resultImg = document.getElementById('result-img');
|
||||
const placeholder = document.getElementById('placeholder-text');
|
||||
|
||||
let currentJobId = null;
|
||||
let stopRequested = false;
|
||||
|
||||
async function waitForJob(jobId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const poll = setInterval(async () => {
|
||||
try {
|
||||
const resp = await fetch(`/api/queue/${jobId}/status`);
|
||||
const data = await resp.json();
|
||||
if (data.status === 'done') { clearInterval(poll); resolve(data); }
|
||||
else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
|
||||
else if (data.status === 'processing') progressLbl.textContent = 'Generating\u2026';
|
||||
else progressLbl.textContent = 'Queued\u2026';
|
||||
} catch (err) {}
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
|
||||
function setGeneratingState(active) {
|
||||
generateBtn.disabled = active;
|
||||
endlessBtn.disabled = active;
|
||||
stopBtn.classList.toggle('d-none', !active);
|
||||
if (!active) progressCont.classList.add('d-none');
|
||||
}
|
||||
|
||||
async function runOne(label) {
|
||||
if (document.getElementById('lucky-dip').checked) applyLuckyDip();
|
||||
|
||||
progressCont.classList.remove('d-none');
|
||||
progressBar.style.width = '100%'; progressBar.textContent = '';
|
||||
progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
|
||||
progressLbl.textContent = label;
|
||||
|
||||
const fd = new FormData(form);
|
||||
|
||||
const resp = await fetch(form.action, {
|
||||
method: 'POST', body: fd,
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||||
});
|
||||
const data = await resp.json();
|
||||
if (data.error) throw new Error(data.error);
|
||||
|
||||
currentJobId = data.job_id;
|
||||
progressLbl.textContent = 'Queued\u2026';
|
||||
|
||||
const jobResult = await waitForJob(currentJobId);
|
||||
currentJobId = null;
|
||||
|
||||
if (jobResult.result && jobResult.result.image_url) {
|
||||
resultImg.src = jobResult.result.image_url;
|
||||
resultImg.parentElement.classList.remove('d-none');
|
||||
if (placeholder) placeholder.classList.add('d-none');
|
||||
}
|
||||
updateSeedFromResult(jobResult.result);
|
||||
progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
|
||||
}
|
||||
|
||||
async function runLoop(endless) {
|
||||
const total = endless ? Infinity : (parseInt(numInput.value) || 1);
|
||||
stopRequested = false;
|
||||
setGeneratingState(true);
|
||||
let n = 0;
|
||||
try {
|
||||
while (!stopRequested && n < total) {
|
||||
n++;
|
||||
const lbl = endless ? `Generating #${n} (endless)...`
|
||||
: total === 1 ? 'Starting...'
|
||||
: `Generating ${n} / ${total}...`;
|
||||
await runOne(lbl);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Generation failed: ' + err.message);
|
||||
} finally {
|
||||
setGeneratingState(false);
|
||||
}
|
||||
}
|
||||
|
||||
form.addEventListener('submit', (e) => { e.preventDefault(); runLoop(false); });
|
||||
endlessBtn.addEventListener('click', () => runLoop(true));
|
||||
stopBtn.addEventListener('click', () => {
|
||||
stopRequested = true;
|
||||
progressLbl.textContent = 'Stopping after current image...';
|
||||
});
|
||||
|
||||
// Random character buttons
|
||||
document.querySelectorAll('.random-char-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
randomizeSelect(btn.dataset.target);
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('random-ckpt-btn').addEventListener('click', () => {
|
||||
randomizeSelect('checkpoint');
|
||||
});
|
||||
|
||||
document.getElementById('char_a').addEventListener('change', buildPromptPreview);
|
||||
document.getElementById('char_b').addEventListener('change', buildPromptPreview);
|
||||
|
||||
document.getElementById('seed-clear-btn').addEventListener('click', () => {
|
||||
document.getElementById('seed-input').value = '';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -71,6 +71,31 @@
|
||||
<textarea class="form-control form-control-sm font-monospace" id="extra_negative" name="extra_negative" rows="2" placeholder="e.g. blurry, low quality">{{ extra_negative or '' }}</textarea>
|
||||
</div>
|
||||
|
||||
{# Resolution override #}
|
||||
{% set res = preset.data.get('resolution', {}) %}
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Resolution Override</label>
|
||||
<div class="d-flex flex-wrap gap-1 mb-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="" data-h="">Preset Default</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1024" data-h="1024">1:1</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1152" data-h="896">4:3 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="896" data-h="1152">4:3 P</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1344" data-h="768">16:9 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="768" data-h="1344">16:9 P</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1280" data-h="800">16:10 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="800" data-h="1280">16:10 P</button>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<label class="form-label mb-0 small fw-semibold">W</label>
|
||||
<input type="number" class="form-control form-control-sm" name="width" id="res-width"
|
||||
value="" min="64" max="4096" step="64" style="width:88px" placeholder="Auto">
|
||||
<span class="text-muted">×</span>
|
||||
<label class="form-label mb-0 small fw-semibold">H</label>
|
||||
<input type="number" class="form-control form-control-sm" name="height" id="res-height"
|
||||
value="" min="64" max="4096" step="64" style="width:88px" placeholder="Auto">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<div class="input-group input-group-sm mb-1">
|
||||
<span class="input-group-text">Seed</span>
|
||||
@@ -131,7 +156,7 @@
|
||||
<div class="mb-2">
|
||||
<small class="text-muted fw-semibold d-block mb-1">Identity</small>
|
||||
<div class="d-flex flex-wrap gap-1">
|
||||
{% for k in ['base_specs','hair','eyes','hands','arms','torso','pelvis','legs','feet','extra'] %}
|
||||
{% for k in ['base','head','upper_body','lower_body','hands','feet','additional'] %}
|
||||
<span class="badge-field d-flex align-items-center gap-1 border rounded px-2 py-1 small">
|
||||
<span>{{ k | replace('_', ' ') }}</span>
|
||||
{{ toggle_badge(char_fields.identity.get(k, true)) }}
|
||||
@@ -156,7 +181,7 @@
|
||||
<span class="badge bg-light text-dark border ms-1">outfit: {{ wd.get('outfit', 'default') }}</span>
|
||||
</small>
|
||||
<div class="d-flex flex-wrap gap-1">
|
||||
{% for k in ['full_body','headwear','top','bottom','legwear','footwear','hands','gloves','accessories'] %}
|
||||
{% for k in ['base','head','upper_body','lower_body','hands','feet','additional'] %}
|
||||
<span class="badge-field d-flex align-items-center gap-1 border rounded px-2 py-1 small">
|
||||
<span>{{ k | replace('_', ' ') }}</span>
|
||||
{{ toggle_badge(wd.fields.get(k, true)) }}
|
||||
@@ -175,7 +200,7 @@
|
||||
<div class="row g-2 mb-3">
|
||||
{% for section, label, field_key, field_keys in [
|
||||
('outfit', 'Outfit', 'outfit_id', []),
|
||||
('action', 'Action', 'action_id', ['full_body','additional','head','eyes','arms','hands']),
|
||||
('action', 'Action', 'action_id', ['base','head','upper_body','lower_body','hands','feet','additional']),
|
||||
('style', 'Style', 'style_id', []),
|
||||
('scene', 'Scene', 'scene_id', ['background','foreground','furniture','colors','lighting','theme']),
|
||||
('detailer', 'Detailer', 'detailer_id', []),
|
||||
@@ -225,6 +250,21 @@
|
||||
<div class="card-body py-2">{{ entity_badge(preset.data.get('checkpoint', {}).get('checkpoint_path')) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% set res = preset.data.get('resolution', {}) %}
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header py-1"><small class="fw-semibold">Resolution</small></div>
|
||||
<div class="card-body py-2">
|
||||
{% if res.get('random', false) %}
|
||||
<span class="badge bg-warning text-dark">Random</span>
|
||||
{% elif res.get('width') %}
|
||||
<span class="badge bg-info text-dark">{{ res.width }} × {{ res.height }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">Default</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
@@ -362,6 +402,20 @@ window._onEndlessResult = function(jobResult) {
|
||||
}
|
||||
};
|
||||
|
||||
// Resolution preset buttons
|
||||
document.querySelectorAll('.res-preset').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.getElementById('res-width').value = btn.dataset.w;
|
||||
document.getElementById('res-height').value = btn.dataset.h;
|
||||
document.querySelectorAll('.res-preset').forEach(b => {
|
||||
b.classList.remove('btn-secondary');
|
||||
b.classList.add('btn-outline-secondary');
|
||||
});
|
||||
btn.classList.remove('btn-outline-secondary');
|
||||
btn.classList.add('btn-secondary');
|
||||
});
|
||||
});
|
||||
|
||||
// JSON editor
|
||||
initJsonEditor("{{ url_for('save_preset_json', slug=preset.slug) }}");
|
||||
</script>
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Identity Fields</label>
|
||||
<div class="row g-2">
|
||||
{% for k in ['base_specs','hair','eyes','hands','arms','torso','pelvis','legs','feet','extra'] %}
|
||||
{% for k in ['base','head','upper_body','lower_body','hands','feet','additional'] %}
|
||||
<div class="col-6 col-sm-4 col-md-4">
|
||||
<div class="d-flex justify-content-between align-items-center border rounded p-2">
|
||||
<small>{{ k | replace('_', ' ') }}</small>
|
||||
@@ -114,7 +114,7 @@
|
||||
value="{{ wd_cfg.get('outfit', 'default') }}" placeholder="default">
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
{% for k in ['full_body','headwear','top','bottom','legwear','footwear','hands','gloves','accessories'] %}
|
||||
{% for k in ['base','head','upper_body','lower_body','hands','feet','additional'] %}
|
||||
<div class="col-6 col-sm-4">
|
||||
<div class="d-flex justify-content-between align-items-center border rounded p-2">
|
||||
<small>{{ k | replace('_', ' ') }}</small>
|
||||
@@ -144,7 +144,7 @@
|
||||
</div>
|
||||
<label class="form-label fw-semibold">Fields</label>
|
||||
<div class="row g-2">
|
||||
{% for k in ['full_body','additional','head','eyes','arms','hands'] %}
|
||||
{% for k in ['base','head','upper_body','lower_body','hands','feet','additional'] %}
|
||||
<div class="col-6 col-sm-4">
|
||||
<div class="d-flex justify-content-between align-items-center border rounded p-2">
|
||||
<small>{{ k | replace('_', ' ') }}</small>
|
||||
@@ -266,6 +266,40 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resolution -->
|
||||
{% set res = d.get('resolution', {}) %}
|
||||
<div class="card mb-4">
|
||||
<div class="card-header py-2 d-flex justify-content-between align-items-center">
|
||||
<strong>Resolution</strong>
|
||||
<div class="form-check form-switch mb-0">
|
||||
<input class="form-check-input" type="checkbox" name="res_random" id="res_random" {% if res.get('random', false) %}checked{% endif %}>
|
||||
<label class="form-check-label small" for="res_random">Random aspect ratio</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" id="res-fields">
|
||||
<div class="d-flex flex-wrap gap-1 mb-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1024" data-h="1024">1:1</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1152" data-h="896">4:3 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="896" data-h="1152">4:3 P</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1344" data-h="768">16:9 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="768" data-h="1344">16:9 P</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1280" data-h="800">16:10 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="800" data-h="1280">16:10 P</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1792" data-h="768">21:9 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="768" data-h="1792">21:9 P</button>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<label class="form-label mb-0 small fw-semibold">W</label>
|
||||
<input type="number" class="form-control form-control-sm" name="res_width" id="res-width"
|
||||
value="{{ res.get('width', 1024) }}" min="64" max="4096" step="64" style="width:88px">
|
||||
<span class="text-muted">×</span>
|
||||
<label class="form-label mb-0 small fw-semibold">H</label>
|
||||
<input type="number" class="form-control form-control-sm" name="res_height" id="res-height"
|
||||
value="{{ res.get('height', 1024) }}" min="64" max="4096" step="64" style="width:88px">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 pb-4">
|
||||
<button type="submit" class="btn btn-primary">Save Preset</button>
|
||||
<a href="{{ url_for('preset_detail', slug=preset.slug) }}" class="btn btn-outline-secondary">Cancel</a>
|
||||
@@ -274,3 +308,45 @@
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Resolution preset buttons
|
||||
document.querySelectorAll('.res-preset').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.getElementById('res-width').value = btn.dataset.w;
|
||||
document.getElementById('res-height').value = btn.dataset.h;
|
||||
document.querySelectorAll('.res-preset').forEach(b => {
|
||||
b.classList.remove('btn-secondary');
|
||||
b.classList.add('btn-outline-secondary');
|
||||
});
|
||||
btn.classList.remove('btn-outline-secondary');
|
||||
btn.classList.add('btn-secondary');
|
||||
});
|
||||
});
|
||||
|
||||
// Highlight the matching preset button on load
|
||||
(function() {
|
||||
const w = document.getElementById('res-width').value;
|
||||
const h = document.getElementById('res-height').value;
|
||||
document.querySelectorAll('.res-preset').forEach(btn => {
|
||||
if (btn.dataset.w === w && btn.dataset.h === h) {
|
||||
btn.classList.remove('btn-outline-secondary');
|
||||
btn.classList.add('btn-secondary');
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle resolution fields visibility based on random checkbox
|
||||
const randomCb = document.getElementById('res_random');
|
||||
const resFields = document.getElementById('res-fields');
|
||||
function toggleResFields() {
|
||||
resFields.querySelectorAll('input, button.res-preset').forEach(el => {
|
||||
el.disabled = randomCb.checked;
|
||||
});
|
||||
resFields.style.opacity = randomCb.checked ? '0.5' : '1';
|
||||
}
|
||||
randomCb.addEventListener('change', toggleResFields);
|
||||
toggleResFields();
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
314
templates/quick.html
Normal file
314
templates/quick.html
Normal file
@@ -0,0 +1,314 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div id="progress-container" class="mb-3 d-none">
|
||||
<label id="progress-label" class="form-label">Generating...</label>
|
||||
<div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||
<div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white">Quick Generator</div>
|
||||
<div class="card-body">
|
||||
<form id="quick-form">
|
||||
|
||||
<!-- Controls bar -->
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap mb-3 pb-3 border-bottom">
|
||||
<button type="submit" class="btn btn-primary" id="generate-btn" data-requires="comfyui">Generate</button>
|
||||
<input type="number" id="num-images" value="1" min="1" max="999"
|
||||
class="form-control form-control-sm" style="width:65px" title="Number of images">
|
||||
<div class="input-group input-group-sm" style="width:180px">
|
||||
<span class="input-group-text">Seed</span>
|
||||
<input type="number" class="form-control" id="seed-input" name="seed" placeholder="Random" min="1" step="1">
|
||||
<button type="button" class="btn btn-outline-secondary" id="seed-clear-btn" title="Clear (random)">×</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-warning" id="endless-btn">Endless</button>
|
||||
<button type="button" class="btn btn-danger d-none" id="stop-btn">Stop</button>
|
||||
</div>
|
||||
|
||||
<!-- Preset selector -->
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<label for="preset-select" class="form-label mb-0">Preset</label>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" id="random-preset-btn">Random</button>
|
||||
</div>
|
||||
<select class="form-select" id="preset-select" required>
|
||||
<option value="" disabled selected>Select a preset...</option>
|
||||
{% for preset in presets %}
|
||||
<option value="{{ preset.slug }}"
|
||||
data-generate-url="{{ url_for('generate_preset_image', slug=preset.slug) }}"
|
||||
data-detail-url="{{ url_for('preset_detail', slug=preset.slug) }}">{{ preset.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Checkpoint override -->
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<label for="checkpoint_override" class="form-label mb-0">Checkpoint Override</label>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" id="random-ckpt-btn">Random</button>
|
||||
</div>
|
||||
<select class="form-select" id="checkpoint_override" name="checkpoint_override">
|
||||
<option value="">Use preset default</option>
|
||||
{% for ckpt in checkpoints %}
|
||||
<option value="{{ ckpt }}" {% if selected_ckpt == ckpt %}selected{% endif %}>{{ ckpt }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Resolution override -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Resolution Override</label>
|
||||
<div class="d-flex flex-wrap gap-1 mb-2">
|
||||
<button type="button" class="btn btn-sm btn-secondary res-preset" data-w="" data-h="">Preset Default</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1024" data-h="1024">1:1</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1152" data-h="896">4:3 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="896" data-h="1152">4:3 P</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1344" data-h="768">16:9 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="768" data-h="1344">16:9 P</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1280" data-h="800">16:10 L</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="800" data-h="1280">16:10 P</button>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<label class="form-label mb-0 small fw-semibold">W</label>
|
||||
<input type="number" class="form-control form-control-sm" name="width" id="res-width"
|
||||
value="" min="64" max="4096" step="64" style="width:88px" placeholder="Auto">
|
||||
<span class="text-muted">×</span>
|
||||
<label class="form-label mb-0 small fw-semibold">H</label>
|
||||
<input type="number" class="form-control form-control-sm" name="height" id="res-height"
|
||||
value="" min="64" max="4096" step="64" style="width:88px" placeholder="Auto">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional prompts -->
|
||||
<div class="mb-3">
|
||||
<label for="extra_positive" class="form-label">Additional Positive Prompt</label>
|
||||
<textarea class="form-control form-control-sm font-monospace" id="extra_positive" name="extra_positive" rows="2" placeholder="e.g. masterpiece, best quality"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="extra_negative" class="form-label">Additional Negative Prompt</label>
|
||||
<textarea class="form-control form-control-sm font-monospace" id="extra_negative" name="extra_negative" rows="2" placeholder="e.g. blurry, low quality"></textarea>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
|
||||
<span>Result</span>
|
||||
<a href="#" id="preset-link" class="btn btn-sm btn-outline-light d-none">View Preset</a>
|
||||
</div>
|
||||
<div class="card-body p-0 d-flex align-items-center justify-content-center" style="min-height: 500px;" id="result-container">
|
||||
<div class="text-center text-muted" id="placeholder-text">
|
||||
<p>Select a preset and click Generate</p>
|
||||
</div>
|
||||
<div class="img-container w-100 h-100 d-none">
|
||||
<img src="" alt="Generated Result" class="img-fluid w-100" id="result-img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generated images gallery -->
|
||||
<div class="card">
|
||||
<div class="card-header py-2"><strong>Generated Images</strong></div>
|
||||
<div class="card-body py-2">
|
||||
<div class="row g-2" id="generated-images"></div>
|
||||
<p id="no-images-msg" class="text-muted small mt-2">No generated images yet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const form = document.getElementById('quick-form');
|
||||
const presetSelect = document.getElementById('preset-select');
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const progressCont = document.getElementById('progress-container');
|
||||
const progressLbl = document.getElementById('progress-label');
|
||||
const generateBtn = document.getElementById('generate-btn');
|
||||
const endlessBtn = document.getElementById('endless-btn');
|
||||
const stopBtn = document.getElementById('stop-btn');
|
||||
const numInput = document.getElementById('num-images');
|
||||
const resultImg = document.getElementById('result-img');
|
||||
const placeholder = document.getElementById('placeholder-text');
|
||||
const presetLink = document.getElementById('preset-link');
|
||||
|
||||
let stopRequested = false;
|
||||
|
||||
function getSelectedOption() {
|
||||
return presetSelect.options[presetSelect.selectedIndex];
|
||||
}
|
||||
|
||||
function getGenerateUrl() {
|
||||
const opt = getSelectedOption();
|
||||
return opt ? opt.dataset.generateUrl : null;
|
||||
}
|
||||
|
||||
// Update preset detail link when selection changes
|
||||
presetSelect.addEventListener('change', () => {
|
||||
const opt = getSelectedOption();
|
||||
if (opt && opt.dataset.detailUrl) {
|
||||
presetLink.href = opt.dataset.detailUrl;
|
||||
presetLink.classList.remove('d-none');
|
||||
} else {
|
||||
presetLink.classList.add('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
// Random preset
|
||||
document.getElementById('random-preset-btn').addEventListener('click', () => {
|
||||
const opts = Array.from(presetSelect.options).filter(o => o.value);
|
||||
if (opts.length) {
|
||||
presetSelect.value = opts[Math.floor(Math.random() * opts.length)].value;
|
||||
presetSelect.dispatchEvent(new Event('change'));
|
||||
}
|
||||
});
|
||||
|
||||
// Resolution preset buttons
|
||||
document.querySelectorAll('.res-preset').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.getElementById('res-width').value = btn.dataset.w;
|
||||
document.getElementById('res-height').value = btn.dataset.h;
|
||||
document.querySelectorAll('.res-preset').forEach(b => {
|
||||
b.classList.remove('btn-secondary');
|
||||
b.classList.add('btn-outline-secondary');
|
||||
});
|
||||
btn.classList.remove('btn-outline-secondary');
|
||||
btn.classList.add('btn-secondary');
|
||||
});
|
||||
});
|
||||
|
||||
// Random checkpoint
|
||||
document.getElementById('random-ckpt-btn').addEventListener('click', () => {
|
||||
const sel = document.getElementById('checkpoint_override');
|
||||
const opts = Array.from(sel.options).filter(o => o.value);
|
||||
if (opts.length) sel.value = opts[Math.floor(Math.random() * opts.length)].value;
|
||||
});
|
||||
|
||||
// Seed clear
|
||||
document.getElementById('seed-clear-btn').addEventListener('click', () => {
|
||||
document.getElementById('seed-input').value = '';
|
||||
});
|
||||
|
||||
async function waitForJob(jobId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const poll = setInterval(async () => {
|
||||
try {
|
||||
const resp = await fetch(`/api/queue/${jobId}/status`);
|
||||
const data = await resp.json();
|
||||
if (data.status === 'done') { clearInterval(poll); resolve(data); }
|
||||
else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
|
||||
else if (data.status === 'processing') progressLbl.textContent = 'Generating…';
|
||||
else progressLbl.textContent = 'Queued…';
|
||||
} catch (err) {}
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
|
||||
function setGeneratingState(active) {
|
||||
generateBtn.disabled = active;
|
||||
endlessBtn.disabled = active;
|
||||
presetSelect.disabled = active;
|
||||
stopBtn.classList.toggle('d-none', !active);
|
||||
if (!active) progressCont.classList.add('d-none');
|
||||
}
|
||||
|
||||
function addImageToGallery(imageUrl, relativePath) {
|
||||
const img = document.createElement('img');
|
||||
img.src = imageUrl;
|
||||
img.className = 'img-fluid rounded';
|
||||
img.style.cursor = 'pointer';
|
||||
img.addEventListener('click', () => {
|
||||
resultImg.src = imageUrl;
|
||||
resultImg.parentElement.classList.remove('d-none');
|
||||
if (placeholder) placeholder.classList.add('d-none');
|
||||
});
|
||||
const col = document.createElement('div');
|
||||
col.className = 'col-4 col-md-3';
|
||||
col.appendChild(img);
|
||||
document.getElementById('generated-images').prepend(col);
|
||||
document.getElementById('no-images-msg')?.classList.add('d-none');
|
||||
}
|
||||
|
||||
async function runOne(label) {
|
||||
const url = getGenerateUrl();
|
||||
if (!url) throw new Error('No preset selected');
|
||||
|
||||
progressCont.classList.remove('d-none');
|
||||
progressBar.style.width = '100%'; progressBar.textContent = '';
|
||||
progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
|
||||
progressLbl.textContent = label;
|
||||
|
||||
const fd = new FormData(form);
|
||||
fd.set('action', 'preview');
|
||||
|
||||
const resp = await fetch(url, {
|
||||
method: 'POST', body: fd,
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||||
});
|
||||
const data = await resp.json();
|
||||
if (data.error) throw new Error(data.error);
|
||||
|
||||
progressLbl.textContent = 'Queued…';
|
||||
const jobResult = await waitForJob(data.job_id);
|
||||
|
||||
if (jobResult.result && jobResult.result.image_url) {
|
||||
resultImg.src = jobResult.result.image_url;
|
||||
resultImg.parentElement.classList.remove('d-none');
|
||||
if (placeholder) placeholder.classList.add('d-none');
|
||||
addImageToGallery(jobResult.result.image_url, jobResult.result.relative_path);
|
||||
}
|
||||
updateSeedFromResult(jobResult.result);
|
||||
progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
|
||||
}
|
||||
|
||||
async function runLoop(endless) {
|
||||
if (!presetSelect.value) { alert('Select a preset first.'); return; }
|
||||
const total = endless ? Infinity : (parseInt(numInput.value) || 1);
|
||||
stopRequested = false;
|
||||
setGeneratingState(true);
|
||||
let n = 0;
|
||||
try {
|
||||
while (!stopRequested && n < total) {
|
||||
n++;
|
||||
const presetName = getSelectedOption()?.text || 'Preset';
|
||||
const lbl = endless ? `${presetName} — #${n} (endless)...`
|
||||
: total === 1 ? `${presetName} — Starting...`
|
||||
: `${presetName} — ${n} / ${total}...`;
|
||||
await runOne(lbl);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Generation failed: ' + err.message);
|
||||
} finally {
|
||||
setGeneratingState(false);
|
||||
}
|
||||
}
|
||||
|
||||
form.addEventListener('submit', (e) => { e.preventDefault(); runLoop(false); });
|
||||
endlessBtn.addEventListener('click', () => runLoop(true));
|
||||
stopBtn.addEventListener('click', () => {
|
||||
stopRequested = true;
|
||||
progressLbl.textContent = 'Stopping after current image...';
|
||||
});
|
||||
|
||||
// Pre-select from URL param ?preset=slug
|
||||
const urlPreset = new URLSearchParams(window.location.search).get('preset');
|
||||
if (urlPreset) {
|
||||
presetSelect.value = urlPreset;
|
||||
presetSelect.dispatchEvent(new Event('change'));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -125,7 +125,7 @@
|
||||
try {
|
||||
const genResp = await fetch(`/scene/${scene.slug}/generate`, {
|
||||
method: 'POST',
|
||||
body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
|
||||
body: new URLSearchParams({ action: 'replace', character_slug: '' }),
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||||
});
|
||||
const genData = await genResp.json();
|
||||
|
||||
Reference in New Issue
Block a user