feat(combos): default-enable vision/audio adapter with mimo fallback
- Enable vision + audioInput capacity-adapter pools by default for new and existing users (mergeWithDefaults backward-compat) - Fall back to oc/mimo-v2.5-free when an enabled pool has no models configured, both in the backend resolver and the combos UI (auto refill on removing the last model from a pool) - Hide PDF/Video from the Vision Adapter UI (PDF never implemented, Video lacks translator support) while keeping the settings shape - Exclude combos from the model picker when opened from the Vision Adapter section - mimo-v2.5 registry entry now declares audioInput/videoInput - Simplify combo strategy and Vision Adapter descriptions
This commit is contained in:
decolua
@@ -5,7 +5,7 @@ import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, us
|
||||
import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { restrictToVerticalAxis, restrictToParentElement } from "@dnd-kit/modifiers";
|
||||
import { Card, Button, Modal, Input, CardSkeleton, ModelSelectModal, ConfirmModal, CapacityBadges, Select } from "@/shared/components";
|
||||
import { Card, Button, Modal, Input, CardSkeleton, ModelSelectModal, ConfirmModal, CapacityBadges, Select, Toggle } from "@/shared/components";
|
||||
import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
|
||||
import { useModelCaps } from "@/shared/hooks/useModelCaps";
|
||||
import { isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/shared/constants/providers";
|
||||
@@ -13,6 +13,37 @@ import { isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/sha
|
||||
// Validate combo name: only a-z, A-Z, 0-9, -, _
|
||||
const VALID_NAME_REGEX = /^[a-zA-Z0-9_.\-]+$/;
|
||||
|
||||
// Capacity adapter: global fallback pools of models per input-modality capability.
|
||||
// A request needing a capability the target model/combo lacks switches straight
|
||||
// to the first enabled model here instead of erroring or dropping the data.
|
||||
const CAPACITY_ADAPTER_CAPS = [
|
||||
{ key: "vision", label: "Vision", icon: "visibility", desc: "Images" },
|
||||
// pdf, videoInput temporarily hidden — no translator support yet for those blocks.
|
||||
{ key: "audioInput", label: "Audio", icon: "graphic_eq", desc: "Audio input" },
|
||||
];
|
||||
const DEFAULT_FALLBACK_MODEL = "oc/mimo-v2.5-free";
|
||||
const EMPTY_CAP_ENTRY = { enabled: true, roundRobin: false, models: [] };
|
||||
const EMPTY_CAPACITY_ADAPTER = {
|
||||
vision: { ...EMPTY_CAP_ENTRY },
|
||||
pdf: { ...EMPTY_CAP_ENTRY },
|
||||
audioInput: { ...EMPTY_CAP_ENTRY },
|
||||
videoInput: { ...EMPTY_CAP_ENTRY },
|
||||
};
|
||||
// Backward-compat: legacy stored form was an array of {model, enabled}.
|
||||
function normalizeCapEntry(entry) {
|
||||
if (Array.isArray(entry)) {
|
||||
return { enabled: true, roundRobin: false, models: entry.map((e) => e?.model || e).filter(Boolean) };
|
||||
}
|
||||
if (entry && typeof entry === "object") {
|
||||
return {
|
||||
enabled: entry.enabled !== false,
|
||||
roundRobin: !!entry.roundRobin,
|
||||
models: Array.isArray(entry.models) ? entry.models.filter(Boolean) : [],
|
||||
};
|
||||
}
|
||||
return { ...EMPTY_CAP_ENTRY };
|
||||
}
|
||||
|
||||
export default function CombosPage() {
|
||||
const [combos, setCombos] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -20,6 +51,7 @@ export default function CombosPage() {
|
||||
const [editingCombo, setEditingCombo] = useState(null);
|
||||
const [activeProviders, setActiveProviders] = useState([]);
|
||||
const [comboStrategies, setComboStrategies] = useState({});
|
||||
const [capacityAdapter, setCapacityAdapter] = useState(EMPTY_CAPACITY_ADAPTER);
|
||||
const { getCaps } = useModelCaps();
|
||||
const [confirmState, setConfirmState] = useState(null);
|
||||
const { copied, copy } = useCopyToClipboard();
|
||||
@@ -45,6 +77,12 @@ export default function CombosPage() {
|
||||
setActiveProviders(providersData.connections || []);
|
||||
}
|
||||
setComboStrategies(settingsData.comboStrategies || {});
|
||||
const rawAdapter = settingsData.capacityAdapter || {};
|
||||
const normalized = {};
|
||||
for (const cap of CAPACITY_ADAPTER_CAPS) {
|
||||
normalized[cap.key] = normalizeCapEntry(rawAdapter[cap.key]);
|
||||
}
|
||||
setCapacityAdapter(normalized);
|
||||
} catch (error) {
|
||||
console.log("Error fetching data:", error);
|
||||
} finally {
|
||||
@@ -52,6 +90,19 @@ export default function CombosPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSetCapacityAdapter = async (next) => {
|
||||
setCapacityAdapter(next);
|
||||
try {
|
||||
await fetch("/api/settings", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ capacityAdapter: next }),
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("Error updating capacity adapter:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = async (data) => {
|
||||
try {
|
||||
const res = await fetch("/api/combos", {
|
||||
@@ -154,7 +205,6 @@ export default function CombosPage() {
|
||||
<li><span className="font-medium text-text-main">Fallback</span> — tries models in order (next on failure)</li>
|
||||
<li><span className="font-medium text-text-main">Round Robin</span> — rotates models across requests to spread load</li>
|
||||
<li><span className="font-medium text-text-main">Fusion</span> — queries all models in parallel, then a judge synthesizes one answer. Best quality, but costs the most: every request bills all panel models + the judge (N+1 calls)</li>
|
||||
<li><span className="font-medium text-text-main">Capacity auto-switch</span> — sends image/PDF/audio requests to a model that supports them first</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Button icon="add" onClick={() => setShowCreateModal(true)} className="w-full sm:w-auto whitespace-nowrap">
|
||||
@@ -195,6 +245,14 @@ export default function CombosPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Capacity Adapter */}
|
||||
<CapacityAdapterSection
|
||||
capacityAdapter={capacityAdapter}
|
||||
onChange={handleSetCapacityAdapter}
|
||||
activeProviders={activeProviders}
|
||||
getCaps={getCaps}
|
||||
/>
|
||||
|
||||
{/* Create Modal - Use key to force remount and reset state */}
|
||||
{showCreateModal && (
|
||||
<ComboFormModal
|
||||
@@ -351,6 +409,149 @@ function ComboCard({ combo, getCaps, activeProviders = [], copied, onCopy, onEdi
|
||||
);
|
||||
}
|
||||
|
||||
function CapacityAdapterSection({ capacityAdapter, onChange, activeProviders, getCaps }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium">Vision Adapter</p>
|
||||
<p className="text-xs text-text-muted mt-0.5">
|
||||
Your model can't read image/audio? Auto-switches to a model in the pool below.
|
||||
</p>
|
||||
<ul className="mt-1.5 text-[11px] text-text-muted flex flex-col gap-0.5">
|
||||
<li><span className="font-medium text-text-main">Vision</span> — images (png, jpg, webp, …)</li>
|
||||
<li><span className="font-medium text-text-main">Audio</span> — audio input</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
{CAPACITY_ADAPTER_CAPS.map((cap) => (
|
||||
<CapacityAdapterCap
|
||||
key={cap.key}
|
||||
cap={cap}
|
||||
entry={capacityAdapter[cap.key] || EMPTY_CAP_ENTRY}
|
||||
onChange={(entry) => onChange({ ...capacityAdapter, [cap.key]: entry })}
|
||||
activeProviders={activeProviders}
|
||||
getCaps={getCaps}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CapacityAdapterCap({ cap, entry, onChange, activeProviders, getCaps }) {
|
||||
const [showModelSelect, setShowModelSelect] = useState(false);
|
||||
const { enabled, roundRobin, models } = entry;
|
||||
|
||||
const patch = (p) => onChange({ ...entry, ...p });
|
||||
|
||||
const handleAdd = (model) => {
|
||||
if (models.includes(model.value)) return;
|
||||
patch({ models: [...models, model.value] });
|
||||
};
|
||||
|
||||
const handleRemove = (index) => {
|
||||
const next = models.filter((_, i) => i !== index);
|
||||
patch({ models: next.length === 0 ? [DEFAULT_FALLBACK_MODEL] : next });
|
||||
};
|
||||
|
||||
const handleMove = (index, delta) => {
|
||||
const target = index + delta;
|
||||
if (target < 0 || target >= models.length) return;
|
||||
const next = [...models];
|
||||
[next[index], next[target]] = [next[target], next[index]];
|
||||
patch({ models: next });
|
||||
};
|
||||
|
||||
return (
|
||||
<Card padding="sm" className={`group ${!enabled ? "opacity-50" : ""}`}>
|
||||
<div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
{/* Master toggle + icon + label + chips */}
|
||||
<div className="flex min-w-0 flex-1 items-start gap-2.5 sm:items-center">
|
||||
<Toggle
|
||||
checked={enabled}
|
||||
onChange={(v) => patch({ enabled: v })}
|
||||
aria-label={`Enable ${cap.label} adapter`}
|
||||
/>
|
||||
<div className="size-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
||||
<span className="material-symbols-outlined text-primary text-[18px]">{cap.icon}</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<code className="font-mono text-sm font-medium">{cap.label}</code>
|
||||
<span className="text-[10px] text-text-muted">— {cap.desc}</span>
|
||||
</div>
|
||||
<div className="mt-1 flex min-w-0 flex-wrap items-center gap-1">
|
||||
{models.length === 0 ? (
|
||||
<span className="text-xs text-text-muted italic">No models</span>
|
||||
) : (
|
||||
models.slice(0, 3).map((model, index) => (
|
||||
<code
|
||||
key={`${model}-${index}`}
|
||||
className="group/chip inline-flex items-center gap-1 rounded bg-black/5 px-1.5 py-0.5 font-mono text-xs text-text-muted dark:bg-white/5"
|
||||
>
|
||||
<span>{model}</span>
|
||||
<CapacityBadges caps={getCaps?.(model)} />
|
||||
<button onClick={() => handleMove(index, -1)} disabled={index === 0} className={`leading-none opacity-0 group-hover/chip:opacity-100 ${index === 0 ? "text-text-muted/20" : "text-text-muted hover:text-primary"}`}>
|
||||
<span className="material-symbols-outlined text-[12px]">arrow_upward</span>
|
||||
</button>
|
||||
<button onClick={() => handleMove(index, 1)} disabled={index === models.length - 1} className={`leading-none opacity-0 group-hover/chip:opacity-100 ${index === models.length - 1 ? "text-text-muted/20" : "text-text-muted hover:text-primary"}`}>
|
||||
<span className="material-symbols-outlined text-[12px]">arrow_downward</span>
|
||||
</button>
|
||||
<button onClick={() => handleRemove(index)} className="leading-none opacity-0 group-hover/chip:opacity-100 text-text-muted hover:text-red-500">
|
||||
<span className="material-symbols-outlined text-[12px]">close</span>
|
||||
</button>
|
||||
</code>
|
||||
))
|
||||
)}
|
||||
{models.length > 3 && (
|
||||
<span className="text-[10px] text-text-muted">+{models.length - 3} more</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions: Round-robin toggle + Add Model */}
|
||||
<div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center sm:gap-3 sm:shrink-0">
|
||||
<label className="flex items-center gap-1.5 text-xs text-text-muted cursor-pointer select-none">
|
||||
<Toggle
|
||||
checked={roundRobin}
|
||||
onChange={(v) => patch({ roundRobin: v })}
|
||||
disabled={!enabled}
|
||||
aria-label={`Round-robin ${cap.label} adapter`}
|
||||
/>
|
||||
<span>Round</span>
|
||||
</label>
|
||||
<Button
|
||||
icon="add"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowModelSelect(true)}
|
||||
disabled={!enabled}
|
||||
title={`Add ${cap.label} model`}
|
||||
>
|
||||
Add Model
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showModelSelect && (
|
||||
<ModelSelectModal
|
||||
isOpen={showModelSelect}
|
||||
onClose={() => setShowModelSelect(false)}
|
||||
onSelect={handleAdd}
|
||||
activeProviders={activeProviders}
|
||||
title={`Add ${cap.label} Model`}
|
||||
addedModelValues={models}
|
||||
capFilter={cap.key}
|
||||
closeOnSelect={false}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function ModelItem({ id, index, model, isFirst, isLast, onEdit, onMoveUp, onMoveDown, onRemove }) {
|
||||
const { attributes, listeners, setNodeRef, transform, isDragging } = useSortable({ id });
|
||||
const style = {
|
||||
|
||||
@@ -17,7 +17,14 @@ const DEFAULT_SETTINGS = {
|
||||
comboStrategy: "fallback",
|
||||
comboStickyRoundRobinLimit: 1,
|
||||
comboStrategies: {},
|
||||
capacityAdapter: {
|
||||
vision: { enabled: true, roundRobin: false, models: [] },
|
||||
pdf: { enabled: false, roundRobin: false, models: [] },
|
||||
audioInput: { enabled: true, roundRobin: false, models: [] },
|
||||
videoInput: { enabled: false, roundRobin: false, models: [] },
|
||||
},
|
||||
requireLogin: true,
|
||||
requireApiKey: true,
|
||||
tunnelDashboardAccess: true,
|
||||
authMode: "password",
|
||||
oidcIssuerUrl: "",
|
||||
|
||||
@@ -30,6 +30,7 @@ export default function ModelSelectModal({
|
||||
title = "Select Model",
|
||||
modelAliases = {},
|
||||
kindFilter = null,
|
||||
capFilter = null,
|
||||
addedModelValues = [],
|
||||
closeOnSelect = true,
|
||||
}) {
|
||||
@@ -397,7 +398,7 @@ export default function ModelSelectModal({
|
||||
|
||||
// Filter combos by search query (and hide combos when kindFilter is set — combos are LLM-only by design)
|
||||
const filteredCombos = useMemo(() => {
|
||||
if (kindFilter) return [];
|
||||
if (kindFilter || capFilter) return [];
|
||||
if (!searchQuery.trim()) return combos;
|
||||
const query = searchQuery.toLowerCase();
|
||||
return combos.filter(c => c.name.toLowerCase().includes(query));
|
||||
@@ -417,6 +418,11 @@ export default function ModelSelectModal({
|
||||
const filtered = {};
|
||||
Object.entries(groupedModels).forEach(([providerId, group]) => {
|
||||
let models = group.models;
|
||||
// Filter by input-modality capability (vision/pdf/audioInput/videoInput).
|
||||
if (capFilter) {
|
||||
models = models.filter((m) => getCaps(m.value)?.[capFilter] === true);
|
||||
if (models.length === 0) return;
|
||||
}
|
||||
if (query) {
|
||||
const providerNameMatches = group.name.toLowerCase().includes(query);
|
||||
models = models.filter(
|
||||
|
||||
Reference in New Issue
Block a user