767 lines
41 KiB
TypeScript
767 lines
41 KiB
TypeScript
// AdaptersDropdown.tsx — Adapter configuration UI for the global param bar
|
||
//
|
||
// Adapted from create/AdaptersAccordion.tsx to read from GlobalParamsContext.
|
||
// Self-contained with Simple and Advanced modes, file browser, group scales.
|
||
|
||
import React, { useState, useCallback, useEffect } from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { FolderOpen, X, Tag, Search, Circle, ChevronDown, RotateCcw } from 'lucide-react';
|
||
import { useGlobalParams } from '../../context/GlobalParamsContext';
|
||
import { usePersistedState } from '../../hooks/usePersistedState';
|
||
import { adapterApi, modelApi } from '../../services/api';
|
||
import { FileBrowserModal } from '../shared/FileBrowserModal';
|
||
import { Slider } from '../shared/Slider';
|
||
import { ModelSelect, getModelFormat } from './ModelSelect';
|
||
import { formatDitModel } from './modelLabels';
|
||
import { DEFAULT_SETTINGS, type AppSettings } from '../settings/SettingsPanel';
|
||
import type { AdapterFile } from '../../types';
|
||
|
||
// Select styling applied inline where needed
|
||
|
||
const GROUP_INFO = [
|
||
{ key: 'self_attn' as const, label: 'Self-Attn', help: 'How audio frames relate to each other over time' },
|
||
{ key: 'cross_attn' as const, label: 'Cross-Attn', help: 'How strongly your text prompt shapes the output' },
|
||
{ key: 'mlp' as const, label: 'MLP', help: 'Timbre, tonal texture, and sonic character' },
|
||
{ key: 'cond_embed' as const, label: 'Conditioning', help: 'How the adapter reshapes text/style interpretation' },
|
||
{ key: 'time_embed' as const, label: 'Timestep', help: 'How the adapter modifies noise-schedule understanding (0 = skip)' },
|
||
{ key: 'proj_in' as const, label: 'Proj-In', help: 'Input patchification layer — how latent tokens enter the model (0 = skip)' },
|
||
];
|
||
|
||
function deriveTriggerWord(adapterPath: string): string {
|
||
if (!adapterPath) return '';
|
||
const filename = adapterPath.split(/[\\/]/).pop() || '';
|
||
return filename.replace(/\.safetensors$/i, '');
|
||
}
|
||
|
||
function formatSize(bytes: number): string {
|
||
if (bytes < 1024) return `${bytes} B`;
|
||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
|
||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||
}
|
||
|
||
export const AdaptersDropdown: React.FC = () => {
|
||
const gp = useGlobalParams();
|
||
const { t } = useTranslation();
|
||
const [settings] = usePersistedState<AppSettings>('ace-settings', DEFAULT_SETTINGS);
|
||
|
||
// Internal state
|
||
const [adapterFiles, setAdapterFiles] = useState<AdapterFile[]>([]);
|
||
const [showGroupScales, setShowGroupScales] = usePersistedState('hs-adapterAccordion-groupScales', false);
|
||
const [fileBrowserOpen, setFileBrowserOpen] = useState(false);
|
||
const [scanning, setScanning] = useState(false);
|
||
const [scanError, setScanError] = useState<string | null>(null);
|
||
const [ditModels, setDitModels] = useState<string[]>([]);
|
||
|
||
// DiT model list for the basin re-base "home base" selector.
|
||
useEffect(() => {
|
||
modelApi.list().then(m => setDitModels(m?.models?.dit || [])).catch(() => {});
|
||
}, []);
|
||
|
||
// Planner-LM adapters (runtime LoRA on the 5Hz LM). Filesystem-scanned via
|
||
// the Node route so freshly trained adapters appear WITHOUT an engine
|
||
// restart — selection sends the absolute path, which the engine's
|
||
// path-fallback resolver loads directly.
|
||
const [lmAdapters, setLmAdapters] = useState<{ name: string; path: string; kind: string; size: number; lmSize?: string; run?: string }[]>([]);
|
||
const refreshLmAdapters = useCallback(() => {
|
||
adapterApi.lmList(gp.lmAdapterFolder || undefined).then(r => setLmAdapters(r?.adapters || [])).catch(() => {});
|
||
}, [gp.lmAdapterFolder]);
|
||
useEffect(() => { refreshLmAdapters(); }, [refreshLmAdapters]);
|
||
|
||
const fileBrowserMode = gp.advancedAdapters ? 'folder' as const : 'file' as const;
|
||
// In advanced mode the stack drives everything; in simple mode the single adapter does.
|
||
const stack: { path: string; scale: number; stepStart?: number; stepEnd?: number }[] = gp.adapterStack || [];
|
||
|
||
// Any stack entry with a timestep window forces runtime mode server-side —
|
||
// several knobs below change visibility/meaning when this is true.
|
||
const stackHasWindows = stack.some(e => e.stepStart !== undefined || e.stepEnd !== undefined);
|
||
|
||
// Timestep window helpers. Store fields stepStart/stepEnd are flow-matching t
|
||
// (1 = noise, 0 = clean); the UI shows "% of denoising" (0% = first step),
|
||
// so display = (1 − t) flipped: startPct derives from stepEnd and vice versa.
|
||
const winStartPct = (e: { stepEnd?: number }) => Math.round((1 - (e.stepEnd ?? 1)) * 100);
|
||
const winEndPct = (e: { stepStart?: number }) => Math.round((1 - (e.stepStart ?? 0)) * 100);
|
||
const setWindowPct = (path: string, sPct: number, ePct: number) => {
|
||
const lo = Math.max(0, Math.min(100, Math.min(sPct, ePct)));
|
||
const hi = Math.max(0, Math.min(100, Math.max(sPct, ePct)));
|
||
gp.setAdapterStackWindow(path, 1 - hi / 100, 1 - lo / 100);
|
||
};
|
||
const primaryPath = gp.advancedAdapters ? (stack[0]?.path || '') : gp.adapter;
|
||
const hasAdapter = gp.advancedAdapters ? stack.length > 0 : !!gp.adapter;
|
||
const triggerWord = deriveTriggerWord(primaryPath);
|
||
// Every stacked adapter contributes its trigger word (matches what is injected
|
||
// into the caption server-side).
|
||
const stackTriggerWords = stack.map(e => deriveTriggerWord(e.path)).filter(Boolean).join(', ');
|
||
const adapterFilename = gp.adapter ? gp.adapter.split(/[\\/]/).pop() || '' : '';
|
||
const fileLabel = (p: string) => p.split(/[\\/]/).pop() || p;
|
||
|
||
// Blend mode: per-adapter sliders are relative weights, normalised so the
|
||
// effective scales sum to the combined-strength budget. effectiveScale maps a
|
||
// row's weight to the scale actually sent to the engine (mirrors the store).
|
||
const isBlend = gp.adapterStackMode === 'blend';
|
||
// Sum/Blend distinction only matters with 2+ adapters; a single adapter just
|
||
// has a "Strength".
|
||
const multiStack = stack.length >= 2;
|
||
const stackWeightSum = stack.reduce((acc, e) => acc + (e.scale || 0), 0);
|
||
const effectiveScale = (weight: number) => {
|
||
if (!isBlend || !multiStack) return weight;
|
||
const budget = gp.adapterStackBudget ?? 0.75;
|
||
return stackWeightSum > 0 ? (budget * (weight || 0)) / stackWeightSum : budget / Math.max(1, stack.length);
|
||
};
|
||
const GROUP_DEFAULTS: Record<string, number> = { self_attn: 1.0, cross_attn: 1.0, mlp: 1.0, cond_embed: 1.0, time_embed: 0.0, proj_in: 0.0 };
|
||
const allDefault = GROUP_INFO.every(g => gp.adapterGroupScales[g.key] === (GROUP_DEFAULTS[g.key] ?? 1.0));
|
||
|
||
const handleGroupScaleChange = (key: keyof typeof gp.adapterGroupScales, value: number) => {
|
||
gp.setAdapterGroupScales({ ...gp.adapterGroupScales, [key]: value });
|
||
};
|
||
|
||
const handleScan = useCallback(async (folder?: string) => {
|
||
const dir = folder || gp.adapterFolder;
|
||
if (!dir) return;
|
||
setScanning(true);
|
||
setScanError(null);
|
||
try {
|
||
const result = await adapterApi.scan(dir);
|
||
setAdapterFiles(result.files);
|
||
if (result.files.length === 0) {
|
||
setScanError('No .safetensors files found in this folder');
|
||
}
|
||
} catch (err: any) {
|
||
setScanError(err?.message || 'Failed to scan folder');
|
||
} finally {
|
||
setScanning(false);
|
||
}
|
||
}, [gp.adapterFolder]);
|
||
|
||
const handleBrowseSelect = (path: string) => {
|
||
setFileBrowserOpen(false);
|
||
if (gp.advancedAdapters) {
|
||
gp.setAdapterFolder(path);
|
||
handleScan(path);
|
||
} else {
|
||
gp.setAdapter(path);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
{/* Simple / Advanced toggle */}
|
||
<div className="flex rounded-xl overflow-hidden border border-zinc-300 dark:border-white/10">
|
||
<button
|
||
onClick={() => gp.setAdvancedAdapters(false)}
|
||
className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors ${
|
||
!gp.advancedAdapters ? 'bg-zinc-200 dark:bg-zinc-700 text-white' : 'bg-white dark:bg-zinc-900 text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
|
||
}`}
|
||
>
|
||
{t('common.simple')}
|
||
</button>
|
||
<button
|
||
onClick={() => gp.setAdvancedAdapters(true)}
|
||
className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors ${
|
||
gp.advancedAdapters ? 'bg-zinc-200 dark:bg-zinc-700 text-white' : 'bg-white dark:bg-zinc-900 text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
|
||
}`}
|
||
>
|
||
{t('common.advanced')}
|
||
</button>
|
||
</div>
|
||
|
||
{/* ═══ SIMPLE MODE ═══ */}
|
||
{!gp.advancedAdapters && (
|
||
<>
|
||
<div>
|
||
<label className="block text-xs font-medium text-zinc-500 uppercase tracking-wider mb-1.5">{t('adapter.adapterPath')}</label>
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={gp.adapter}
|
||
onChange={(e) => gp.setAdapter(e.target.value)}
|
||
placeholder="Path to .safetensors file..."
|
||
className="flex-1 px-3 py-2 rounded-xl bg-zinc-100 dark:bg-zinc-800 border border-zinc-300 dark:border-white/10 text-sm text-zinc-800 dark:text-zinc-200 placeholder-zinc-400 dark:placeholder-zinc-600 focus:border-pink-500/50 focus:ring-1 focus:ring-pink-500/20 outline-none transition-colors font-mono text-xs"
|
||
/>
|
||
<button
|
||
onClick={() => setFileBrowserOpen(true)}
|
||
className="px-3 py-2 rounded-xl bg-zinc-100 dark:bg-zinc-800 border border-zinc-300 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-700 transition-colors"
|
||
title={t('adapter.browseFile')}
|
||
>
|
||
<FolderOpen size={14} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{gp.adapter && (
|
||
<div className="flex items-center gap-2 px-3 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
|
||
<Circle size={8} fill="#10b981" className="text-emerald-500 flex-shrink-0" />
|
||
<span className="text-xs text-emerald-400 font-medium truncate flex-1" title={gp.adapter}>
|
||
{adapterFilename}
|
||
</span>
|
||
<button
|
||
onClick={() => gp.setAdapter('')}
|
||
className="text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors flex-shrink-0"
|
||
title={t('adapter.clearAdapter')}
|
||
>
|
||
<X size={12} />
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{gp.adapter && settings.triggerUseFilename && triggerWord && (
|
||
<div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-pink-500/10 border border-pink-500/20">
|
||
<Tag size={10} className="text-pink-400 flex-shrink-0" />
|
||
<span className="text-[10px] text-pink-400 font-medium">{triggerWord}</span>
|
||
<span className="text-[10px] text-zinc-500">({settings.triggerPlacement})</span>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* ═══ ADVANCED MODE ═══ */}
|
||
{gp.advancedAdapters && (
|
||
<>
|
||
<div>
|
||
<label className="block text-xs font-medium text-zinc-500 uppercase tracking-wider mb-1.5">{t('adapter.adapterFolder')}</label>
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={gp.adapterFolder}
|
||
onChange={(e) => gp.setAdapterFolder(e.target.value)}
|
||
placeholder="Path to folder with adapters..."
|
||
className="flex-1 px-3 py-2 rounded-xl bg-zinc-100 dark:bg-zinc-800 border border-zinc-300 dark:border-white/10 text-sm text-zinc-800 dark:text-zinc-200 placeholder-zinc-400 dark:placeholder-zinc-600 focus:border-pink-500/50 focus:ring-1 focus:ring-pink-500/20 outline-none transition-colors font-mono text-xs"
|
||
/>
|
||
<button
|
||
onClick={() => handleScan()}
|
||
disabled={!gp.adapterFolder || scanning}
|
||
className="px-3 py-2 rounded-xl bg-zinc-100 dark:bg-zinc-800 border border-zinc-300 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-700 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
|
||
title={t('adapter.scanFolder')}
|
||
>
|
||
<Search size={14} className={scanning ? 'animate-spin' : ''} />
|
||
</button>
|
||
<button
|
||
onClick={() => setFileBrowserOpen(true)}
|
||
className="px-3 py-2 rounded-xl bg-zinc-100 dark:bg-zinc-800 border border-zinc-300 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-700 transition-colors"
|
||
title={t('adapter.browseFolder')}
|
||
>
|
||
<FolderOpen size={14} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{scanError && (
|
||
<div className="text-xs text-amber-400/70 px-1">{scanError}</div>
|
||
)}
|
||
|
||
{adapterFiles.length > 0 && (
|
||
<div className="rounded-xl bg-zinc-50/80 dark:bg-zinc-900/50 border border-zinc-200 dark:border-white/5 overflow-hidden" style={{ maxHeight: '200px', overflowY: 'auto' }}>
|
||
{adapterFiles.map((file) => {
|
||
const isActive = stack.some(a => a.path === file.path);
|
||
return (
|
||
<button
|
||
key={file.path}
|
||
onClick={() => gp.toggleAdapterInStack(file.path, 1.0)}
|
||
className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-colors ${
|
||
isActive ? 'bg-emerald-500/10 border-l-2 border-emerald-500' : 'hover:bg-white/5 border-l-2 border-transparent'
|
||
}`}
|
||
>
|
||
{isActive ? (
|
||
<Circle size={8} fill="#10b981" className="text-emerald-500 flex-shrink-0" />
|
||
) : (
|
||
<Circle size={8} className="text-zinc-600 flex-shrink-0" />
|
||
)}
|
||
<span className={`text-xs truncate flex-1 ${isActive ? 'text-emerald-400 font-medium' : 'text-zinc-600 dark:text-zinc-400'}`}>
|
||
{file.name}
|
||
</span>
|
||
<span className="text-zinc-600 flex-shrink-0" style={{ fontSize: '10px' }}>
|
||
{formatSize(file.size)}
|
||
</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* Selected stack: one row per adapter with its own scale + remove. */}
|
||
{stack.length > 0 && (
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-[10px] font-semibold text-zinc-600 dark:text-zinc-400 uppercase tracking-wider">
|
||
{t('adapter.adapterStack', 'Adapter Stack')} ({stack.length})
|
||
</span>
|
||
<button type="button" onClick={() => gp.setAdapterStack([])}
|
||
className="text-[10px] text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors">
|
||
{t('adapter.clearAll', 'Clear all')}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Sum / Blend toggle — only meaningful with 2+ adapters */}
|
||
{multiStack && (
|
||
<>
|
||
<div className="flex rounded-xl overflow-hidden border border-zinc-300 dark:border-white/10">
|
||
<button
|
||
type="button"
|
||
onClick={() => gp.setAdapterStackMode('blend')}
|
||
className={`flex-1 px-2.5 py-1.5 text-xs font-medium transition-colors ${
|
||
isBlend ? 'bg-emerald-600 text-white' : 'bg-white dark:bg-zinc-900 text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
|
||
}`}
|
||
>
|
||
Blend
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => gp.setAdapterStackMode('sum')}
|
||
className={`flex-1 px-2.5 py-1.5 text-xs font-medium transition-colors ${
|
||
!isBlend ? 'bg-amber-600 text-white' : 'bg-white dark:bg-zinc-900 text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
|
||
}`}
|
||
>
|
||
Sum
|
||
</button>
|
||
</div>
|
||
<p className="text-[10px] text-zinc-600 -mt-1">
|
||
{isBlend
|
||
? 'Per-adapter sliders are relative weights; effective scales are normalised so they sum to the combined strength below. Keeps total strength constant as you add adapters.'
|
||
: 'Per-adapter sliders are absolute scales, summed directly. Σ can exceed 1 to deliberately over-drive the stack.'}
|
||
</p>
|
||
|
||
{/* Combined strength budget (blend mode only) */}
|
||
{isBlend && (
|
||
<Slider label={t('adapter.combinedStrength', 'Combined Strength (Σ)')} value={gp.adapterStackBudget}
|
||
onChange={gp.setAdapterStackBudget} min={0} max={4} step={0.05} showInput />
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{stack.map((entry, i) => (
|
||
<div key={entry.path} className="px-3 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 space-y-1.5">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-[10px] text-zinc-500 flex-shrink-0">{i + 1}.</span>
|
||
<span className="text-xs text-emerald-400 font-medium truncate flex-1" title={entry.path}>
|
||
{fileLabel(entry.path)}
|
||
</span>
|
||
{multiStack && isBlend && (
|
||
<span className="text-[10px] text-zinc-500 font-mono flex-shrink-0" title="Effective scale sent to the engine">
|
||
→ {effectiveScale(entry.scale).toFixed(3)}
|
||
</span>
|
||
)}
|
||
<button
|
||
onClick={() => gp.toggleAdapterInStack(entry.path)}
|
||
className="text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors flex-shrink-0"
|
||
title={t('adapter.deselectAdapter')}
|
||
>
|
||
<X size={12} />
|
||
</button>
|
||
</div>
|
||
<Slider
|
||
label={!multiStack
|
||
? t('adapter.strength', 'Strength')
|
||
: isBlend ? t('adapter.weight', 'Weight') : t('adapter.adapterScale', 'Adapter Scale')}
|
||
value={entry.scale}
|
||
onChange={v => gp.setAdapterStackScale(entry.path, v)} min={0} max={4} step={0.05} showInput />
|
||
{/* Timestep window (interval experts): which slice of denoising this
|
||
adapter is active in. 0% = first step (structure), 100% = last
|
||
(texture/detail). Any non-full window forces runtime mode. */}
|
||
<div className="flex items-center gap-1.5"
|
||
title={t('adapter.timestepWindowHint',
|
||
'Active slice of the denoising process. Early steps shape structure/rhythm, late steps shape timbre/detail. Windows crossfade where adapters meet. Forces runtime mode.')}>
|
||
<span className="text-[10px] text-zinc-500 flex-shrink-0">
|
||
{t('adapter.timestepWindow', 'Active phase')}
|
||
</span>
|
||
<input type="number" min={0} max={100} step={5} value={winStartPct(entry)}
|
||
onChange={e => setWindowPct(entry.path, Number(e.target.value), winEndPct(entry))}
|
||
className="w-12 px-1 py-0.5 text-[10px] text-right rounded bg-white dark:bg-black/30 border border-zinc-200 dark:border-white/10 text-zinc-700 dark:text-zinc-300" />
|
||
<span className="text-[10px] text-zinc-500">–</span>
|
||
<input type="number" min={0} max={100} step={5} value={winEndPct(entry)}
|
||
onChange={e => setWindowPct(entry.path, winStartPct(entry), Number(e.target.value))}
|
||
className="w-12 px-1 py-0.5 text-[10px] text-right rounded bg-white dark:bg-black/30 border border-zinc-200 dark:border-white/10 text-zinc-700 dark:text-zinc-300" />
|
||
<span className="text-[10px] text-zinc-500">%</span>
|
||
{(entry.stepStart !== undefined || entry.stepEnd !== undefined) && (
|
||
<button type="button"
|
||
onClick={() => gp.setAdapterStackWindow(entry.path, 0, 1)}
|
||
className="text-[10px] text-amber-400/80 hover:text-amber-300 flex-shrink-0"
|
||
title={t('adapter.timestepWindowReset', 'Reset to always active')}>
|
||
⏱ {t('adapter.timestepWindowClear', 'clear')}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{stackHasWindows && (
|
||
<div className="px-2.5 py-1.5 rounded-lg bg-amber-500/10 border border-amber-500/20">
|
||
<p className="text-[10px] text-amber-400/90 leading-relaxed m-0">
|
||
{t('adapter.timestepWindowVram',
|
||
'Timestep windows force Runtime mode: each adapter holds its own full-size deltas in VRAM. Set Adapter VRAM below to Q8 ½ or Q4 ¼ to keep this affordable.')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{settings.triggerUseFilename && stackTriggerWords && (
|
||
<div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-pink-500/10 border border-pink-500/20">
|
||
<Tag size={10} className="text-pink-400 flex-shrink-0" />
|
||
<span className="text-[10px] text-pink-400 font-medium">{stackTriggerWords}</span>
|
||
<span className="text-[10px] text-zinc-500">({settings.triggerPlacement})</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* Per-section masking hint (2+ adapters) */}
|
||
{multiStack && (
|
||
<div className="px-2.5 py-2 rounded-lg bg-sky-500/5 border border-sky-500/15 space-y-1">
|
||
<div className="text-[10px] font-semibold text-sky-300/80 uppercase tracking-wider">Per-section influence</div>
|
||
<p className="text-[10px] text-zinc-500 leading-relaxed">
|
||
Vary each adapter by lyric section — add a directive after a section header,
|
||
keyed by trigger word. Forces runtime mode.
|
||
</p>
|
||
<pre className="text-[9px] text-zinc-400 font-mono whitespace-pre-wrap leading-snug bg-black/20 rounded p-1.5 m-0">{`[Verse]{${stackTriggerWords.split(', ').map((w, i) => `${w}=${i === 0 ? '1' : '0'}`).join('; ')}}
|
||
[Chorus]{${stackTriggerWords.split(', ').map((w, i) => `${w}=${i === 0 ? '0' : '1'}`).join('; ')}}`}</pre>
|
||
|
||
<div className="pt-1 space-y-2">
|
||
<Slider label="Alignment Timing" value={gp.adapterSectionAlignAt}
|
||
onChange={gp.setAdapterSectionAlignAt} min={0.2} max={0.85} step={0.05} showInput />
|
||
<p className="text-[9px] text-zinc-500 leading-relaxed -mt-1">
|
||
When section boundaries snap to the model's real timing. Earlier locks section
|
||
identity sooner (less first-adapter bias); too early = fuzzier boundaries.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* ═══ PLANNER ADAPTER (LM) — song-structure LoRA on the 5Hz planner ═══ */}
|
||
<div className="space-y-2 pt-2 border-t border-zinc-200 dark:border-white/5">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-[10px] font-semibold text-violet-400 uppercase tracking-wider">
|
||
Planner Adapter (LM)
|
||
</span>
|
||
<button type="button" onClick={refreshLmAdapters}
|
||
className="text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors"
|
||
title="Rescan adapters/lm for new planner adapters">
|
||
<RotateCcw size={12} />
|
||
</button>
|
||
</div>
|
||
<p className="text-[10px] text-zinc-500 leading-relaxed -mt-1">
|
||
Artist-trained song-structure adapter applied to the planner LM at runtime.
|
||
Pairs with the matching DiT adapter (timbre) — same trigger word.
|
||
</p>
|
||
<input
|
||
type="text"
|
||
value={gp.lmAdapterFolder}
|
||
onChange={(e) => gp.setLmAdapterFolder(e.target.value)}
|
||
placeholder="Scan folder (empty = adapters/lm)"
|
||
className="w-full px-3 py-1.5 rounded-lg bg-zinc-100 dark:bg-zinc-800 border border-zinc-300 dark:border-white/10 text-[11px] text-zinc-700 dark:text-zinc-300 placeholder-zinc-500 focus:border-violet-500/50 outline-none transition-colors"
|
||
/>
|
||
{lmAdapters.length === 0 ? (
|
||
<p className="text-[10px] text-zinc-600 px-1">
|
||
None found in adapters/lm — train one with Side-Step's lm-train.
|
||
</p>
|
||
) : (
|
||
<div className="rounded-xl bg-zinc-50/80 dark:bg-zinc-900/50 border border-zinc-200 dark:border-white/5 overflow-hidden" style={{ maxHeight: '160px', overflowY: 'auto' }}>
|
||
{lmAdapters.map((a) => {
|
||
const isActive = gp.lmAdapter === a.path;
|
||
return (
|
||
<button
|
||
key={a.path}
|
||
onClick={() => { gp.setLmAdapter(isActive ? '' : a.path); }}
|
||
className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-colors ${
|
||
isActive ? 'bg-violet-500/10 border-l-2 border-violet-500' : 'hover:bg-white/5 border-l-2 border-transparent'
|
||
}`}
|
||
>
|
||
{isActive ? (
|
||
<Circle size={8} fill="#8b5cf6" className="text-violet-500 flex-shrink-0" />
|
||
) : (
|
||
<Circle size={8} className="text-zinc-600 flex-shrink-0" />
|
||
)}
|
||
<span className={`text-xs truncate flex-1 ${isActive ? 'text-violet-400 font-medium' : 'text-zinc-600 dark:text-zinc-400'}`}>
|
||
{a.name}
|
||
</span>
|
||
{/* Per-base + per-run layout: names are unsuffixed, the
|
||
parent lm-* folder carries the size and each training run
|
||
sits in a stamped subfolder — show both so same-artist
|
||
entries stay distinguishable. */}
|
||
{a.run && (
|
||
<span className="text-zinc-500 flex-shrink-0 font-mono" style={{ fontSize: '9px' }} title={a.run}>
|
||
{a.run.slice(0, 10)}
|
||
</span>
|
||
)}
|
||
{a.lmSize && (
|
||
<span className="text-violet-400/70 flex-shrink-0 font-mono" style={{ fontSize: '10px' }}>
|
||
{a.lmSize}
|
||
</span>
|
||
)}
|
||
<span className="text-zinc-600 flex-shrink-0" style={{ fontSize: '10px' }}>
|
||
{formatSize(a.size)}
|
||
</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
{gp.lmAdapter && (
|
||
<div className="px-3 py-2 rounded-xl bg-violet-500/10 border border-violet-500/20">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs text-violet-400 font-medium truncate flex-1" title={gp.lmAdapter}>
|
||
{lmAdapters.find(a => a.path === gp.lmAdapter)?.name || gp.lmAdapter}
|
||
</span>
|
||
<button
|
||
onClick={() => gp.setLmAdapter('')}
|
||
className="text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors flex-shrink-0"
|
||
title="Unload planner adapter"
|
||
>
|
||
<X size={12} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{/* Global planner strength — ALWAYS visible: like the DiT Adapter Scale,
|
||
it also governs planner adapters supplied by Album Presets. */}
|
||
<Slider label="Planner Strength" value={gp.lmAdapterScale}
|
||
onChange={gp.setLmAdapterScale} min={0} max={2} step={0.05} showInput />
|
||
<p className="text-[9px] text-zinc-500 leading-relaxed -mt-1">
|
||
Applies to the adapter above AND album-preset planner adapters.
|
||
1.0 = as trained; above ~1.4 risks repetitive planning — prefer more
|
||
training epochs over slider overdrive.
|
||
</p>
|
||
</div>
|
||
|
||
{/* ═══ SHARED CONTROLS (when adapter selected) ═══ */}
|
||
{hasAdapter && (
|
||
<>
|
||
{/* Adapter Scale — simple mode only; the advanced stack has per-row scales */}
|
||
{!gp.advancedAdapters && (
|
||
<Slider label="Adapter Scale" value={gp.adapterScale}
|
||
onChange={gp.setAdapterScale} min={0} max={4} step={0.05} showInput />
|
||
)}
|
||
|
||
{/* Loading Mode */}
|
||
<div>
|
||
<label className="block text-xs font-medium text-zinc-500 uppercase tracking-wider mb-1.5">{t('adapter.loadingMode')}</label>
|
||
<div className="flex rounded-xl overflow-hidden border border-zinc-300 dark:border-white/10">
|
||
<button
|
||
type="button"
|
||
onClick={() => gp.setAdapterMode('merge')}
|
||
className={`flex-1 px-2.5 py-1.5 text-xs font-medium transition-colors ${
|
||
gp.adapterMode === 'merge' ? 'bg-amber-600 text-white' : 'bg-white dark:bg-zinc-900 text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
|
||
}`}
|
||
>
|
||
Merge
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => gp.setAdapterMode('runtime')}
|
||
className={`flex-1 px-2.5 py-1.5 text-xs font-medium transition-colors ${
|
||
gp.adapterMode === 'runtime' ? 'bg-pink-600 text-white' : 'bg-white dark:bg-zinc-900 text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
|
||
}`}
|
||
>
|
||
Runtime ⚡
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => gp.setAdapterMode('runtime_lowrank')}
|
||
className={`flex-1 px-2.5 py-1.5 text-xs font-medium transition-colors ${
|
||
gp.adapterMode === 'runtime_lowrank' ? 'bg-violet-600 text-white' : 'bg-white dark:bg-zinc-900 text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
|
||
}`}
|
||
>
|
||
Low-Rank 🪶
|
||
</button>
|
||
</div>
|
||
<p className="text-[10px] text-zinc-600 mt-1">
|
||
{gp.adapterMode === 'runtime_lowrank'
|
||
? 'Applies raw adapter factors per-step, never materializing full deltas — lowest VRAM (LoRA & LoKr; DoRA needs Merge). Basin re-base still works.'
|
||
: gp.adapterMode === 'runtime'
|
||
? 'Keeps base weights intact, applies adapter per-step. Same quality, slower inference, saves VRAM.'
|
||
: 'Merges adapter at F32 precision. Best quality, fast inference, but uses more VRAM during synthesis.'}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Merge VRAM — merge mode only (storage precision of the merged weights) */}
|
||
{gp.adapterMode === 'merge' && (
|
||
<div>
|
||
<label className="block text-xs font-medium text-zinc-500 uppercase tracking-wider mb-1.5">
|
||
{t('adapter.mergeVram', 'Merge VRAM')}
|
||
</label>
|
||
<div className="flex rounded-xl overflow-hidden border border-zinc-300 dark:border-white/10">
|
||
{([
|
||
{ v: false, label: 'HQ', sub: 'Merged weights stored as F32 (best quality, ~4× VRAM on a Q8 base)' },
|
||
{ v: true, label: 'Low ¼', sub: 'Merged weights re-encoded to the base\'s native quant' },
|
||
] as const).map(opt => (
|
||
<button
|
||
key={String(opt.v)}
|
||
type="button"
|
||
onClick={() => gp.setAdapterMergeLowVram(opt.v)}
|
||
title={opt.sub}
|
||
className={`flex-1 px-2.5 py-1.5 text-xs font-medium transition-colors ${
|
||
gp.adapterMergeLowVram === opt.v
|
||
? 'bg-sky-600 text-white'
|
||
: 'bg-white dark:bg-zinc-900 text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
|
||
}`}
|
||
>
|
||
{opt.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<p className="text-[10px] text-zinc-600 mt-1">
|
||
HQ keeps merged weights at F32 (a Q8 base grows ~4× in VRAM). Low re-encodes them
|
||
back to the base's native quant — base-model VRAM, one extra quantization
|
||
round-trip. FP4 bases always use the low path.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Adapter Quantization — runtime modes (quantizes the in-VRAM full-size
|
||
deltas; in Low-Rank mode that's the re-base correction + Conv1d fallbacks).
|
||
Also shown when timestep windows are set: windows force runtime mode
|
||
server-side, so this knob governs VRAM even from Merge/Low-Rank. */}
|
||
{(gp.adapterMode === 'runtime' || gp.adapterMode === 'runtime_lowrank' || stackHasWindows) && (
|
||
<div>
|
||
<label className="block text-xs font-medium text-zinc-500 uppercase tracking-wider mb-1.5">
|
||
{t('adapter.runtimeQuant', 'Adapter VRAM')}
|
||
</label>
|
||
<div className="flex rounded-xl overflow-hidden border border-zinc-300 dark:border-white/10">
|
||
{([
|
||
{ v: 'bf16', label: 'Full', sub: 'BF16' },
|
||
{ v: 'q8_0', label: 'Q8 ½', sub: 'Q8_0' },
|
||
{ v: 'q4_0', label: 'Q4 ¼', sub: 'Q4_0' },
|
||
] as const).map(opt => (
|
||
<button
|
||
key={opt.v}
|
||
type="button"
|
||
onClick={() => gp.setAdapterRuntimeQuant(opt.v)}
|
||
title={opt.sub}
|
||
className={`flex-1 px-2.5 py-1.5 text-xs font-medium transition-colors ${
|
||
gp.adapterRuntimeQuant === opt.v
|
||
? 'bg-sky-600 text-white'
|
||
: 'bg-white dark:bg-zinc-900 text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
|
||
}`}
|
||
>
|
||
{opt.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<p className="text-[10px] text-zinc-600 mt-1">
|
||
Quantizes the runtime adapter deltas in VRAM (nothing written to disk). Q8 halves /
|
||
Q4 quarters VRAM per adapter — lets more stacked adapters fit. Small quality cost;
|
||
safe when the base model is already 4-bit (NVFP4).
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Basin re-base (cross-base adapter support) — merge AND runtime modes
|
||
(runtime folds the nudge into the delta sum; per-section masking skips it).
|
||
Home base must be a SafeTensors model (nudge reads F32 weights), so
|
||
the selector is filtered to safetensors DiT models only. */}
|
||
<div className="rounded-xl bg-zinc-100/50 dark:bg-zinc-800/50 border border-zinc-200 dark:border-white/5 p-3 space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-[10px] font-semibold text-zinc-600 dark:text-zinc-400 uppercase tracking-wider">Basin Re-base</span>
|
||
{gp.rebaseSource && <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" title="Re-base active" />}
|
||
</div>
|
||
{gp.rebaseSource && (
|
||
<button type="button" onClick={() => gp.setRebaseSource('')}
|
||
className="text-[10px] text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors">
|
||
Off
|
||
</button>
|
||
)}
|
||
</div>
|
||
<label className="block text-[10px] text-zinc-500">Adapter trained on (home base)</label>
|
||
<ModelSelect
|
||
id="rebase-source-select"
|
||
value={gp.rebaseSource}
|
||
onChange={gp.setRebaseSource}
|
||
options={ditModels.filter(m => getModelFormat(m) === 'safetensors')}
|
||
formatLabel={formatDitModel}
|
||
placeholder="Off — apply adapter as-is"
|
||
/>
|
||
{gp.rebaseSource && (
|
||
<>
|
||
<Slider label="Re-base Strength (β)" value={gp.rebaseBeta}
|
||
onChange={gp.setRebaseBeta} min={0} max={1} step={0.05} showInput />
|
||
<p className="text-[10px] text-zinc-600">
|
||
Nudges the loaded base toward the adapter's home base so a heavy cross-base adapter
|
||
stays coherent at full strength. β=1 = home-base behavior; lower keeps more of the
|
||
loaded base's character.
|
||
</p>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Group Scales */}
|
||
<button
|
||
onClick={() => setShowGroupScales(!showGroupScales)}
|
||
className="flex items-center gap-2 text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors"
|
||
>
|
||
<ChevronDown size={12} className={`transition-transform duration-200 ${showGroupScales ? 'rotate-180' : ''}`} />
|
||
{t('adapter.groupScales')}
|
||
{!allDefault && (
|
||
<span className="w-1.5 h-1.5 rounded-full bg-pink-500" title="Group scales modified" />
|
||
)}
|
||
</button>
|
||
|
||
{showGroupScales && (
|
||
<div className="rounded-xl bg-zinc-100/50 dark:bg-zinc-800/50 border border-zinc-200 dark:border-white/5 p-3 space-y-3">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-[10px] font-semibold text-zinc-600 dark:text-zinc-400 uppercase tracking-wider">{t('adapter.layerScales')}</span>
|
||
<button type="button" onClick={() => gp.setAdapterGroupScales({ self_attn: 1.0, cross_attn: 1.0, mlp: 1.0, cond_embed: 1.0, time_embed: 0.0, proj_in: 0.0 })}
|
||
className="flex items-center gap-1 text-[10px] text-zinc-600 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors">
|
||
<RotateCcw size={10} /> Reset
|
||
</button>
|
||
</div>
|
||
{GROUP_INFO.map(({ key, label, help }) => (
|
||
<div key={key}>
|
||
<Slider label={label} value={gp.adapterGroupScales[key]}
|
||
onChange={v => handleGroupScaleChange(key, v)} min={0} max={4} step={0.05} showInput />
|
||
<p className="text-[10px] text-zinc-600 mt-0.5 -mb-1">{help}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* File Browser Modal */}
|
||
<FileBrowserModal
|
||
open={fileBrowserOpen}
|
||
onClose={() => setFileBrowserOpen(false)}
|
||
onSelect={handleBrowseSelect}
|
||
mode={fileBrowserMode}
|
||
startPath={gp.advancedAdapters ? gp.adapterFolder : undefined}
|
||
filter="adapters"
|
||
title={gp.advancedAdapters ? t('adapter.selectAdapterFolder') : t('adapter.selectAdapterFile')}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/** Summary badge for the Adapters section */
|
||
export const AdaptersBadge: React.FC = () => {
|
||
const { adapter, adapterScale, adapterStack, advancedAdapters } = useGlobalParams();
|
||
const stack = adapterStack || [];
|
||
const useStack = advancedAdapters && stack.length > 0;
|
||
const shortName = (p: string) => p.split(/[\\/]/).pop()?.replace(/\.safetensors$/i, '') || '';
|
||
|
||
if (useStack) {
|
||
const first = shortName(stack[0].path);
|
||
return (
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0" />
|
||
<span className="text-[10px] text-emerald-400 font-mono truncate max-w-[120px]" title={stack.map(a => a.path).join('\n')}>
|
||
{first}
|
||
</span>
|
||
{stack.length > 1 && <span className="text-[10px] text-zinc-600">+{stack.length - 1}</span>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const filename = adapter ? shortName(adapter) : '';
|
||
return (
|
||
<div className="flex items-center gap-1.5">
|
||
{adapter ? (
|
||
<>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0" />
|
||
<span className="text-[10px] text-emerald-400 font-mono">{filename}</span>
|
||
<span className="text-[10px] text-zinc-600">×{adapterScale.toFixed(2)}</span>
|
||
</>
|
||
) : (
|
||
<span className="text-[10px] text-zinc-600">None</span>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|