character-browser/templates/generator.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">
                    <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">Generator</div>
                <div class="card-body">
                    <form id="generator-form" action="{{ url_for('generator_generate') }}" 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)">&times;</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>

                        <!-- 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 fw-semibold">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" name="preset_slug" required>
                                <option value="" disabled {% if not preset_slug %}selected{% endif %}>Select a preset...</option>
                                {% for p in presets %}
                                <option value="{{ p.slug }}" {% if preset_slug == p.slug %}selected{% endif %}>{{ p.name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Preset summary (populated via AJAX) -->
                        <div class="mb-3" id="preset-summary-container" style="display:none">
                            <label class="form-label mb-1 small fw-semibold text-muted">Preset Configuration</label>
                            <div class="d-flex flex-wrap gap-1" id="preset-summary"></div>
                        </div>

                        <!-- Checkpoint override -->
                        <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 Override</label>
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="random-ckpt-btn">Random</button>
                            </div>
                            <select class="form-select form-select-sm" id="checkpoint" name="checkpoint">
                                <option value="">Use preset default</option>
                                {% for ckpt in checkpoints %}
                                <option value="{{ ckpt }}" {% if selected_ckpt == ckpt %}selected{% endif %}>{{ ckpt.split('/')[-1] }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- 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-btn" data-w="" data-h="">Preset default</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="1024" data-h="1024">1:1</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="1152" data-h="896">4:3 L</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="896" data-h="1152">4:3 P</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="1344" data-h="768">16:9 L</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="768" data-h="1344">16:9 P</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="1280" data-h="800">16:10 L</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary res-btn" 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">&times;</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>

                        <!-- Extra prompts -->
                        <div class="mb-3">
                            <label for="extra_positive" class="form-label">Extra Positive Prompt</label>
                            <textarea class="form-control form-control-sm" id="extra_positive" name="extra_positive" rows="2"
                                      placeholder="Additional tags appended to the preset prompt"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="extra_negative" class="form-label">Extra Negative Prompt</label>
                            <textarea class="form-control form-control-sm" id="extra_negative" name="extra_negative" rows="2"
                                      placeholder="Additional negative tags"></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 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 class="card-footer d-none" id="result-footer">
                    <small class="text-muted">Saved to generator gallery</small>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// --- Preset summary ---
async function loadPresetInfo(slug) {
    const container = document.getElementById('preset-summary-container');
    const summary = document.getElementById('preset-summary');
    if (!slug) { container.style.display = 'none'; return; }

    try {
        const res = await fetch(`/generator/preset_info?slug=${encodeURIComponent(slug)}`);
        const data = await res.json();
        summary.innerHTML = '';

        const colors = {
            character: 'primary', outfit: 'success', action: 'danger',
            style: 'warning', scene: 'info', detailer: 'secondary',
            look: 'primary', checkpoint: 'dark', resolution: 'light text-dark'
        };

        for (const [key, val] of Object.entries(data)) {
            if (val === null) continue;
            const color = colors[key] || 'secondary';
            const chip = document.createElement('span');
            chip.className = `badge bg-${color} me-1 mb-1`;
            chip.innerHTML = `<small class="opacity-75">${key}:</small> ${val}`;
            summary.appendChild(chip);
        }
        container.style.display = '';
    } catch (e) {
        container.style.display = 'none';
    }
}

// --- Resolution presets ---
document.querySelectorAll('.res-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.getElementById('res-width').value = btn.dataset.w;
        document.getElementById('res-height').value = btn.dataset.h;
        document.querySelectorAll('.res-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');
    });
});

// Deselect res presets when manual input changes
['res-width', 'res-height'].forEach(id => {
    document.getElementById(id).addEventListener('input', () => {
        document.querySelectorAll('.res-btn').forEach(b => {
            b.classList.remove('btn-secondary');
            b.classList.add('btn-outline-secondary');
        });
    });
});

// --- Seed ---
document.getElementById('seed-clear-btn').addEventListener('click', () => {
    document.getElementById('seed-input').value = '';
});

// --- Random buttons ---
document.getElementById('random-preset-btn').addEventListener('click', () => {
    const opts = Array.from(document.getElementById('preset-select').options).filter(o => o.value);
    if (opts.length) {
        const pick = opts[Math.floor(Math.random() * opts.length)];
        document.getElementById('preset-select').value = pick.value;
        loadPresetInfo(pick.value);
    }
});

document.getElementById('random-ckpt-btn').addEventListener('click', () => {
    const opts = Array.from(document.getElementById('checkpoint').options).filter(o => o.value);
    if (opts.length) {
        document.getElementById('checkpoint').value = opts[Math.floor(Math.random() * opts.length)].value;
    }
});

// --- Lucky Dip ---
function applyLuckyDip() {
    document.getElementById('random-preset-btn').click();
    const ckptOpts = Array.from(document.getElementById('checkpoint').options).filter(o => o.value);
    if (ckptOpts.length)
        document.getElementById('checkpoint').value = ckptOpts[Math.floor(Math.random() * ckptOpts.length)].value;
    const resBtns = Array.from(document.querySelectorAll('.res-btn'));
    if (resBtns.length) resBtns[Math.floor(Math.random() * resBtns.length)].click();
}

// --- Preset select change ---
document.getElementById('preset-select').addEventListener('change', (e) => {
    loadPresetInfo(e.target.value);
});

// --- Generation loop ---
let stopRequested = false;

async function waitForJob(jobId) {
    while (true) {
        const res = await fetch(`/api/queue/${jobId}/status`);
        const data = await res.json();
        if (data.status === 'done') return data;
        if (data.status === 'failed') throw new Error(data.error || 'Generation failed');
        await new Promise(r => setTimeout(r, 1500));
    }
}

function setGeneratingState(active) {
    document.getElementById('generate-btn').disabled = active;
    document.getElementById('endless-btn').classList.toggle('d-none', active);
    document.getElementById('stop-btn').classList.toggle('d-none', !active);
    document.getElementById('progress-container').classList.toggle('d-none', !active);
}

function updateSeedFromResult(result) {
    if (result && result.result && result.result.seed != null) {
        document.getElementById('seed-input').value = result.result.seed;
    }
}

async function runOne(label) {
    if (document.getElementById('lucky-dip').checked) applyLuckyDip();

    const progressBar = document.getElementById('progress-bar');
    progressBar.style.width = '100%';
    progressBar.textContent = label;
    document.getElementById('progress-label').textContent = label;

    const form = document.getElementById('generator-form');
    const formData = new FormData(form);

    const res = await fetch(form.action, {
        method: 'POST',
        headers: {'X-Requested-With': 'XMLHttpRequest'},
        body: formData,
    });
    const data = await res.json();
    if (data.error) throw new Error(data.error);

    const result = await waitForJob(data.job_id);

    if (result.result && result.result.image_url) {
        const img = document.getElementById('result-img');
        img.src = result.result.image_url + '?t=' + Date.now();
        img.parentElement.classList.remove('d-none');
        document.getElementById('placeholder-text')?.classList.add('d-none');
        document.getElementById('result-footer').classList.remove('d-none');
    }

    updateSeedFromResult(result);
    return result;
}

async function runLoop(endless) {
    stopRequested = false;
    setGeneratingState(true);

    const total = endless ? Infinity : parseInt(document.getElementById('num-images').value) || 1;
    let i = 0;

    try {
        while (i < total && !stopRequested) {
            i++;
            const label = endless
                ? `Generating (endless) #${i}...`
                : total > 1
                    ? `Generating ${i} / ${total}...`
                    : 'Generating...';
            await runOne(label);
        }
    } catch (e) {
        alert('Generation error: ' + e.message);
    } finally {
        setGeneratingState(false);
    }
}

// --- Event listeners ---
document.getElementById('generator-form').addEventListener('submit', (e) => {
    e.preventDefault();
    runLoop(false);
});

document.getElementById('endless-btn').addEventListener('click', () => runLoop(true));
document.getElementById('stop-btn').addEventListener('click', () => { stopRequested = true; });

// --- Init: load preset info if pre-selected ---
document.addEventListener('DOMContentLoaded', () => {
    const presetSelect = document.getElementById('preset-select');
    if (presetSelect.value) loadPresetInfo(presetSelect.value);
});
</script>
{% endblock %}