static/js/app.js

/* ===== NAI Studio - App Entry Point ===== */
(function () {
    'use strict';

    function init() {
        // Theme
        document.documentElement.setAttribute('data-theme', NAIState.theme);

        // WebSocket
        NAIWS.connect();

        // Navigation
        $$('.nav-item').forEach(item => {
            item.addEventListener('click', () => {
                const page = item.dataset.page;
                NAIState.currentPage = page;
                $$('.nav-item').forEach(n => n.classList.toggle('active', n.dataset.page === page));
                $$('.page-content').forEach(p => p.classList.toggle('active', p.id === `page-${page}`));

                const titles = {
                    generate: '🎨 图片生成', inpaint: '✏️ 定向修图',
                    pnginfo: '📄 图片信息读取', tagger: '🏷️ Tagger反推',
                    history: '📜 历史生成记录', cloud: '☁️ 云端图片浏览',
                    settings: '⚙️ 设置',
                };
                $('#page-title').textContent = titles[page] || '';
                $('.sidebar').classList.remove('open');
                $('.sidebar-overlay').classList.remove('active');
            });
        });

        // Mobile menu
        $('#mobile-menu-btn')?.addEventListener('click', () => {
            $('.sidebar').classList.toggle('open');
            $('.sidebar-overlay').classList.toggle('active');
        });
        $('.sidebar-overlay')?.addEventListener('click', () => {
            $('.sidebar').classList.remove('open');
            $('.sidebar-overlay').classList.remove('active');
        });

        // Textareas
        $$('.form-textarea').forEach(t => NAIUtils.setupAutoResize(t));

        // Sliders
        NAIUtils.bindSlider('cfg-slider', 'cfg-value', v => v.toFixed(1));
        NAIUtils.bindSlider('steps-slider', 'steps-value');
        NAIUtils.bindSlider('width-slider', 'width-value');
        NAIUtils.bindSlider('height-slider', 'height-value');

        // Preset
        $('#preset-select').addEventListener('change', function () {
            const [w, h] = this.value.split('x').map(Number);
            $('#width-slider').value = w; $('#height-slider').value = h;
            $('#width-slider').dispatchEvent(new Event('input'));
            $('#height-slider').dispatchEvent(new Event('input'));
        });
        const syncPreset = () => {
            const key = `${$('#width-slider').value}x${$('#height-slider').value}`;
            const sel = $('#preset-select');
            if ([...sel.options].some(o => o.value === key)) sel.value = key;
        };
        $('#width-slider').addEventListener('input', syncPreset);
        $('#height-slider').addEventListener('input', syncPreset);

        // Seed
        $('#btn-random-seed').addEventListener('click', () => {
            $('#seed-input').value = -1;
        });
        $('#btn-reuse-seed').addEventListener('click', () => {
            if (NAIState.lastSeed !== -1) $('#seed-input').value = NAIState.lastSeed;
            else NAIWS.send({ action: 'get_last_seed' });
        });
        $('#seed-input').addEventListener('input', function () {
            let v = parseInt(this.value);
            if (isNaN(v)) this.value = -1;
            else if (v < -1) this.value = -1;
            else if (v > 4294967295) this.value = 4294967295;
        });

        // Generate
        $('#btn-generate').addEventListener('click', () => NAIGenerate.startGeneration());
        document.addEventListener('keydown', e => {
            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && NAIState.currentPage === 'generate') {
                NAIGenerate.startGeneration();
            }
        });

        $('#sampler-select').addEventListener('change', function () {
            let s = this.value;
            const schedule = $('#adv-scheduler');
            if (s === 'ddim_v3') {schedule.value = 'native'; schedule.disabled = true;}
            else if (s === 'k_dpmpp_2m') {schedule.value = 'exponential'; schedule.disabled = false;}
            else {schedule.disabled = false;}
        });

        // Init sub-modules
        NAIVibe.init();
        NAIExtraInput.init();
        NAICharacter.init();
        NAIReference.init();
        NAIAdvanced.init();
        NAITimer.init();
        NAIResizer.init();
        NAIPaste.init();
        NAICost.init();
        NAIDirectorTools.init();
        NAIPngInfo.init();
        NAITagger.init();
        NAIHistory.init();
        NAICloud.init();
        NAITagComplete.init();
        NAISettings.init();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();