static/wire_outputs.js

() => {
function watchOutputs() {
    const resultContainer = document.getElementById('gradio-result');
    const outBody  = document.getElementById('output-image-container');
    const outPh    = document.getElementById('output-placeholder');
    const dlBtn    = document.getElementById('dl-btn-output');

    if (!resultContainer || !outBody) { setTimeout(watchOutputs, 500); return; }

    if (dlBtn) {
        dlBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            const img = outBody.querySelector('img.modern-out-img');
            if (img && img.src) {
                const a = document.createElement('a');
                a.href = img.src; a.download = 'firered_output.png';
                document.body.appendChild(a); a.click(); document.body.removeChild(a);
            }
        });
    }

    function syncImage() {
        const resultImg = resultContainer.querySelector('img');
        if (resultImg && resultImg.src) {
            if (outPh) outPh.style.display = 'none';
            let existing = outBody.querySelector('img.modern-out-img');
            if (!existing) { existing = document.createElement('img'); existing.className = 'modern-out-img'; outBody.appendChild(existing); }
            if (existing.src !== resultImg.src) {
                existing.src = resultImg.src;
                if (dlBtn) dlBtn.classList.add('visible');
                if (window.__hideLoader) window.__hideLoader();
            }
        }
    }
    const observer = new MutationObserver(syncImage);
    observer.observe(resultContainer, {childList:true, subtree:true, attributes:true, attributeFilter:['src']});
    setInterval(syncImage, 800);
}
watchOutputs();

function watchSeed() {
    const seedContainer = document.getElementById('gradio-seed');
    const seedSlider = document.getElementById('custom-seed');
    const seedVal = document.getElementById('custom-seed-val');
    if (!seedContainer || !seedSlider) { setTimeout(watchSeed, 500); return; }
    function sync() {
        const el = seedContainer.querySelector('input[type="range"],input[type="number"]');
        if (el && el.value) { seedSlider.value = el.value; if (seedVal) seedVal.textContent = el.value; }
    }
    const obs = new MutationObserver(sync);
    obs.observe(seedContainer, {childList:true, subtree:true, attributes:true, attributeFilter:['value']});
    setInterval(sync, 1000);
}
watchSeed();

function watchExampleResults() {
    const container = document.getElementById('example-result-data');
    if (!container) { setTimeout(watchExampleResults, 500); return; }

    let lastProcessed = '';

    function checkResult() {
        const el = container.querySelector('textarea') || container.querySelector('input');
        if (!el) return;
        const val = el.value;
        if (!val || val === lastProcessed || val.length < 20) return;

        try {
            const data = JSON.parse(val);
            if (data.status === 'ok' && data.images && data.images.length > 0) {
                lastProcessed = val;

                if (window.__clearAll) window.__clearAll();
                if (window.__setPrompt && data.prompt) window.__setPrompt(data.prompt);

                data.images.forEach((b64, i) => {
                    if (b64 && window.__addImage) {
                        const name = (data.names && data.names[i]) ? data.names[i] : ('example_' + (i+1) + '.jpg');
                        window.__addImage(b64, name);
                    }
                });

                document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
                if (window.__showToast) window.__showToast('Example loaded — ' + data.images.length + ' image(s)', 'info');
            } else if (data.status === 'error') {
                document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
                if (window.__showToast) window.__showToast('Could not load example images', 'error');
            }
        } catch(e) {
            console.error('Example parse error:', e);
        }
    }

    const obs = new MutationObserver(checkResult);
    obs.observe(container, {childList:true, subtree:true, characterData:true, attributes:true});
    setInterval(checkResult, 500);
}
watchExampleResults();
}