315 lines
16 KiB
HTML
315 lines
16 KiB
HTML
{% 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 %}
|