Function LocalModelManager

src/components/LocalModelManager.js:341–413

()

// ─── Main component ───────────────────────────────────────────────────────────
export function LocalModelManager() {
    const root = document.createElement('div');
    root.className = 'flex flex-col gap-5';

    if (!isLocalAIAvailable()) {
        root.innerHTML = `
            <div class="flex flex-col items-center gap-3 py-8 text-center">
                <p class="text-sm font-bold text-white">${t('localModels.title')}</p>
                <p class="text-xs text-muted max-w-xs">${t('localModels.webOnly')}</p>
            </div>
        `;
        return root;
    }

    // ── Section: engine status
    const engineSection = document.createElement('div');
    engineSection.className = 'flex flex-col gap-2';
    engineSection.innerHTML = `<h3 class="text-xs font-bold text-secondary uppercase tracking-wider">${t('localModels.inferenceEngine')}</h3>`;

    let binaryReady = false;
    const binaryBar = BinaryStatusBar((ready) => { binaryReady = ready; });
    engineSection.appendChild(binaryBar);

    const wan2gpBar = Wan2gpConfigBar(() => renderModels());
    engineSection.appendChild(wan2gpBar);
    root.appendChild(engineSection);

    // ── Section: models
    const modelsSection = document.createElement('div');
    modelsSection.className = 'flex flex-col gap-3';
    modelsSection.innerHTML = `
        <div class="flex items-center justify-between gap-3">
            <h3 class="text-xs font-bold text-secondary uppercase tracking-wider shrink-0">${t('localModels.title')}</h3>
            <span id="local-model-storage" class="min-w-0 truncate text-right text-[10px] text-muted">${t('localModels.checkingStorage')}</span>
        </div>
        <div id="local-model-list" class="flex flex-col gap-3"></div>
    `;
    root.appendChild(modelsSection);

    const listEl = modelsSection.querySelector('#local-model-list');
    const storageEl = modelsSection.querySelector('#local-model-storage');

    const refreshStorageInfo = async () => {
        try {
            const status = await localAI.getBinaryStatus();
            const storagePath = status.modelsDir || status.dataDir;
            storageEl.textContent = storagePath ? `${t('localModels.storedIn')} ${storagePath}` : t('localModels.storedDefault');
            if (storagePath && status.envVar) {
                storageEl.title = `Set ${status.envVar} before launch to change this location`;
            }
        } catch (_) {
            storageEl.textContent = t('localModels.storedDefault');
        }
    };

    const renderModels = async () => {
        listEl.innerHTML = `<div class="text-xs text-muted text-center py-4">${t('localModels.loading')}</div>`;
        try {