Function Wan2gpConfigBar

src/components/LocalModelManager.js:157–221

(onChange)

// ─── Wan2GP Server Config ────────────────────────────────────────────────────
function Wan2gpConfigBar(onChange) {
    const wrap = document.createElement('div');
    wrap.className = 'flex flex-col gap-3 p-3 rounded-xl bg-white/3 border border-white/5';
    wrap.innerHTML = `
        <div class="flex flex-col gap-0.5">
            <span class="text-xs font-bold text-white">Wan2GP server (optional)</span>
            <span class="text-[11px] text-muted leading-relaxed">
                Run <a href="https://github.com/deepbeepmeep/Wan2GP" target="_blank" class="text-primary hover:underline">Wan2GP</a>
                on a CUDA box (<code class="text-primary/80">python wgp.py --listen --server-name 0.0.0.0</code>) to unlock video models from this UI.
            </span>
        </div>
        <div class="flex items-center gap-2">
            <input id="wan2gp-url" type="text" placeholder="http://127.0.0.1:7860"
                   class="flex-1 bg-white/5 border border-white/5 focus:border-primary/40 rounded-lg px-3 py-1.5 text-xs text-white placeholder-white/30 focus:outline-none"/>
            <button id="wan2gp-test" class="px-3 py-1.5 rounded-lg text-xs font-bold bg-primary/20 text-primary border border-primary/30 hover:bg-primary/30 transition-all">Test</button>
            <button id="wan2gp-save" class="px-3 py-1.5 rounded-lg text-xs font-bold bg-primary text-black hover:shadow-glow transition-all">Save</button>
        </div>
        <div id="wan2gp-status" class="text-[11px] text-muted">${t('localModels.notConfigured')}</div>
    `;

    const input = wrap.querySelector('#wan2gp-url');
    const testBtn = wrap.querySelector('#wan2gp-test');
    const saveBtn = wrap.querySelector('#wan2gp-save');
    const statusEl = wrap.querySelector('#wan2gp-status');
    const setStatus = (text, kind = 'muted') => {
        const colorMap = { muted: 'text-muted', ok: 'text-green-400', warn: 'text-yellow-400', err: 'text-red-400' };
        statusEl.className = `text-[11px] ${colorMap[kind] || colorMap.muted}`;
        statusEl.textContent = text;
    };

    (async () => {
        const cfg = await localAI.getWan2gpConfig();
        if (cfg.url) {
            input.value = cfg.url;
            const r = await localAI.probeWan2gp(cfg.url);
            setStatus(r.ok ? `Connected · Gradio ${r.version}` : `Saved URL not reachable: ${r.error}`, r.ok ? 'ok' : 'warn');
        } else {
            setStatus(t('localModels.notConfiguredNote'), 'muted');
        }
    })();

    testBtn.onclick = async () => {
        const url = input.value.trim();
        if (!url) { setStatus('Enter a URL first', 'warn'); return; }
        setStatus(t('localModels.probing'), 'muted');
        testBtn.disabled = true;
        try {
            const r = await localAI.probeWan2gp(url);
            setStatus(r.ok ? `Reachable · Gradio ${r.version}` : `Unreachable: ${r.error}`, r.ok ? 'ok' : 'err');
        } finally { testBtn.disabled = false; }
    };

    saveBtn.onclick = async () => {
        const url = input.value.trim();
        saveBtn.disabled = true;
        try {
            await localAI.setWan2gpUrl(url);
            const r = url ? await localAI.probeWan2gp(url) : { ok: false, error: 'cleared' };