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:
parent
cd13d904d7
commit
8e59093db7
5 changed files with 391 additions and 4 deletions
|
|
@ -279,7 +279,7 @@ export const PATTERN_CAPABILITIES = [
|
||||||
{ pattern: "*minimax*", caps: { reasoning: true, thinkingFormat: "minimax", thinkingCanDisable: false, contextWindow: 200000, maxOutput: 131072 } },
|
{ pattern: "*minimax*", caps: { reasoning: true, thinkingFormat: "minimax", thinkingCanDisable: false, contextWindow: 200000, maxOutput: 131072 } },
|
||||||
|
|
||||||
// ── Xiaomi MiMo (vision, 1M / 262K ctx) ──────────────────────────
|
// ── Xiaomi MiMo (vision, 1M / 262K ctx) ──────────────────────────
|
||||||
{ pattern: "*mimo*v2.5*", caps: { vision: true, contextWindow: 1048576, maxOutput: 131072 } },
|
{ pattern: "*mimo*v2.5*", caps: { vision: true, audioInput: true, videoInput: true, contextWindow: 1048576, maxOutput: 131072 } },
|
||||||
{ pattern: "*mimo*omni*", caps: { vision: true, audioInput: true, contextWindow: 262144, maxOutput: 131072 } },
|
{ pattern: "*mimo*omni*", caps: { vision: true, audioInput: true, contextWindow: 262144, maxOutput: 131072 } },
|
||||||
{ pattern: "*mimo*", caps: { vision: true, contextWindow: 262144, maxOutput: 131072 } },
|
{ pattern: "*mimo*", caps: { vision: true, contextWindow: 262144, maxOutput: 131072 } },
|
||||||
|
|
||||||
|
|
|
||||||
173
open-sse/services/capacityAdapter.js
Normal file
173
open-sse/services/capacityAdapter.js
Normal file
|
|
@ -0,0 +1,173 @@
|
||||||
|
/**
|
||||||
|
* Capacity Adapter — global fallback pools of models per input-modality capability
|
||||||
|
* (vision / pdf / audioInput / videoInput).
|
||||||
|
*
|
||||||
|
* The pool models are appended as extra fallback candidates behind whatever models
|
||||||
|
* were already going to be tried (a combo's members, or a single target model).
|
||||||
|
* combo.js's existing reorderByCapabilities then floats a capable pool model to the
|
||||||
|
* front only when none of the original models can handle the request — so this
|
||||||
|
* never overrides a combo that already has a member covering the capability.
|
||||||
|
*/
|
||||||
|
import { getCapabilitiesForModel } from "../providers/capabilities.js";
|
||||||
|
|
||||||
|
const CAPABILITY_KEYS = ["vision", "pdf", "audioInput", "videoInput"];
|
||||||
|
const HARD_CAPS = new Set(CAPABILITY_KEYS);
|
||||||
|
const DEFAULT_FALLBACK_MODEL = "oc/mimo-v2.5-free";
|
||||||
|
|
||||||
|
// Normalize a capability entry to { enabled, roundRobin, models }. Backward-compat:
|
||||||
|
// accept the legacy array form [{model, enabled}] (treated as enabled, fallback).
|
||||||
|
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 { enabled: false, roundRobin: false, models: [] };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Resolve one capability's full config. Enabled pools with no models fall back
|
||||||
|
// to DEFAULT_FALLBACK_MODEL so the toggle is never a no-op.
|
||||||
|
export function getCapacityAdapterConfig(cap, settings) {
|
||||||
|
const entry = normalizeCapEntry(settings?.capacityAdapter?.[cap]);
|
||||||
|
if (entry.enabled && entry.models.length === 0) {
|
||||||
|
return { ...entry, models: [DEFAULT_FALLBACK_MODEL] };
|
||||||
|
}
|
||||||
|
return entry;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Flatten enabled models across all capability pools, in priority order, deduped.
|
||||||
|
export function getCapacityAdapterModels(settings) {
|
||||||
|
const seen = new Set();
|
||||||
|
const models = [];
|
||||||
|
for (const cap of CAPABILITY_KEYS) {
|
||||||
|
const { enabled, models: pool } = getCapacityAdapterConfig(cap, settings);
|
||||||
|
if (!enabled) continue;
|
||||||
|
for (const m of pool) {
|
||||||
|
if (!seen.has(m)) {
|
||||||
|
seen.add(m);
|
||||||
|
models.push(m);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return models;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Strategy for a capability: "round-robin" when enabled+roundRobin, else "fallback".
|
||||||
|
export function getCapacityAdapterStrategy(cap, settings) {
|
||||||
|
const { enabled, roundRobin } = getCapacityAdapterConfig(cap, settings);
|
||||||
|
return enabled && roundRobin ? "round-robin" : "fallback";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Strategy from the request's required capabilities: picks the first capability
|
||||||
|
// whose adapter pool is enabled and can satisfy a hard requirement.
|
||||||
|
export function getActiveAdapterStrategy(requiredCapabilities, settings) {
|
||||||
|
const hard = [...(requiredCapabilities || [])].filter((c) => HARD_CAPS.has(c));
|
||||||
|
for (const cap of hard) {
|
||||||
|
const { enabled, models } = getCapacityAdapterConfig(cap, settings);
|
||||||
|
if (!enabled || models.length === 0) continue;
|
||||||
|
return getCapacityAdapterStrategy(cap, settings);
|
||||||
|
}
|
||||||
|
return "fallback";
|
||||||
|
}
|
||||||
|
|
||||||
|
function modelSatisfies(modelStr, requiredHard) {
|
||||||
|
const slash = modelStr.indexOf("/");
|
||||||
|
const provider = slash > 0 ? modelStr.slice(0, slash) : "";
|
||||||
|
const model = slash > 0 ? modelStr.slice(slash + 1) : modelStr;
|
||||||
|
const caps = getCapabilitiesForModel(provider, model);
|
||||||
|
return requiredHard.every((c) => caps[c] === true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prepend capacity-adapter models as priority candidates when NONE of the
|
||||||
|
// original models (combo members, or the single target model) can satisfy the
|
||||||
|
// request's required capabilities. Adapter models go FIRST (priority); the
|
||||||
|
// original models follow as fallback. Leaves `models` untouched when the
|
||||||
|
// original list already covers it (combo.js's reorderByCapabilities handles
|
||||||
|
// that case via autoSwitch).
|
||||||
|
export function augmentModelsWithCapacityAdapter(models, requiredCapabilities, settings) {
|
||||||
|
const hard = [...(requiredCapabilities || [])].filter((c) => HARD_CAPS.has(c));
|
||||||
|
if (hard.length === 0 || !Array.isArray(models) || models.length === 0) return models;
|
||||||
|
if (models.some((m) => modelSatisfies(m, hard))) return models;
|
||||||
|
|
||||||
|
const pool = getCapacityAdapterModels(settings).filter((m) => !models.includes(m) && modelSatisfies(m, hard));
|
||||||
|
if (pool.length === 0) return models;
|
||||||
|
return [...pool, ...models];
|
||||||
|
}
|
||||||
|
|
||||||
|
const CHARS_PER_TOKEN = 4; // rough estimate; avoids pulling in a tokenizer dependency
|
||||||
|
const HEAD_KEEP = 6; // messages after system kept verbatim before dropping the middle
|
||||||
|
|
||||||
|
function blockLength(content) {
|
||||||
|
if (typeof content === "string") return content.length;
|
||||||
|
if (Array.isArray(content)) {
|
||||||
|
return content.reduce((sum, b) => sum + (typeof b?.text === "string" ? b.text.length : 50), 0);
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trim history to fit a (possibly smaller) context window by dropping the MIDDLE.
|
||||||
|
// Preserves: all system/instruction messages (head), and the trailing user run
|
||||||
|
// carrying the media the switch happened for (tail). Older middle turns between
|
||||||
|
// the head instructions and the current turn are dropped first.
|
||||||
|
export function stripHistoryForContext(body, contextWindow) {
|
||||||
|
const key = Array.isArray(body.messages) ? "messages"
|
||||||
|
: Array.isArray(body.input) ? "input"
|
||||||
|
: Array.isArray(body.contents) ? "contents"
|
||||||
|
: null;
|
||||||
|
if (!key) return body;
|
||||||
|
const arr = body[key];
|
||||||
|
if (!arr || arr.length === 0) return body;
|
||||||
|
|
||||||
|
const isSystem = (r) => r === "system" || r === "developer";
|
||||||
|
const systemMsgs = arr.filter((m) => isSystem(m?.role));
|
||||||
|
const rest = arr.filter((m) => !isSystem(m?.role));
|
||||||
|
if (rest.length === 0) return body;
|
||||||
|
|
||||||
|
const isAssistant = (r) => r === "assistant" || r === "model";
|
||||||
|
let i = rest.length - 1;
|
||||||
|
while (i >= 0 && !isAssistant(rest[i]?.role)) i--;
|
||||||
|
const tail = rest.slice(i + 1); // current user turn (has media) — always kept
|
||||||
|
const older = rest.slice(0, i + 1); // everything before it
|
||||||
|
if (older.length === 0) return body;
|
||||||
|
|
||||||
|
const contentOf = (m) => m.content ?? m.parts;
|
||||||
|
// Cap at 80% of the adapter model's context window — leaves room for the response.
|
||||||
|
const budgetChars = (contextWindow || 200000) * 0.8 * CHARS_PER_TOKEN;
|
||||||
|
|
||||||
|
// Prefer keeping the first HEAD_KEEP messages (initial instructions/context) verbatim;
|
||||||
|
// only trim further if even that exceeds the adapter model's context window.
|
||||||
|
const headKept = older.slice(0, HEAD_KEEP);
|
||||||
|
let total = systemMsgs.concat(headKept, tail).reduce((s, m) => s + blockLength(contentOf(m)), 0);
|
||||||
|
|
||||||
|
// If head + tail overflow, drop head turns from the end (closest to middle) first.
|
||||||
|
let head = headKept;
|
||||||
|
while (total > budgetChars && head.length > 0) {
|
||||||
|
const dropped = head.pop();
|
||||||
|
total -= blockLength(contentOf(dropped));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (head.length === older.length) return body;
|
||||||
|
return { ...body, [key]: [...systemMsgs, ...head, ...tail] };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Wrap a handleSingleModel callback so calls to a capacity-adapter model strip
|
||||||
|
// history to fit its context window first. No-op passthrough when the pool is empty.
|
||||||
|
export function withCapacityAdapterStripping(handleSingleModel, adapterModels) {
|
||||||
|
const adapterSet = new Set(adapterModels);
|
||||||
|
if (adapterSet.size === 0) return handleSingleModel;
|
||||||
|
return (body, modelStr, ...rest) => {
|
||||||
|
if (adapterSet.has(modelStr)) {
|
||||||
|
const slash = modelStr.indexOf("/");
|
||||||
|
const provider = slash > 0 ? modelStr.slice(0, slash) : "";
|
||||||
|
const model = slash > 0 ? modelStr.slice(slash + 1) : modelStr;
|
||||||
|
const { contextWindow } = getCapabilitiesForModel(provider, model);
|
||||||
|
body = stripHistoryForContext(body, contextWindow);
|
||||||
|
}
|
||||||
|
return handleSingleModel(body, modelStr, ...rest);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -5,7 +5,7 @@ import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, us
|
||||||
import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
||||||
import { CSS } from "@dnd-kit/utilities";
|
import { CSS } from "@dnd-kit/utilities";
|
||||||
import { restrictToVerticalAxis, restrictToParentElement } from "@dnd-kit/modifiers";
|
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 { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
|
||||||
import { useModelCaps } from "@/shared/hooks/useModelCaps";
|
import { useModelCaps } from "@/shared/hooks/useModelCaps";
|
||||||
import { isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/shared/constants/providers";
|
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, -, _
|
// Validate combo name: only a-z, A-Z, 0-9, -, _
|
||||||
const VALID_NAME_REGEX = /^[a-zA-Z0-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() {
|
export default function CombosPage() {
|
||||||
const [combos, setCombos] = useState([]);
|
const [combos, setCombos] = useState([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
@ -20,6 +51,7 @@ export default function CombosPage() {
|
||||||
const [editingCombo, setEditingCombo] = useState(null);
|
const [editingCombo, setEditingCombo] = useState(null);
|
||||||
const [activeProviders, setActiveProviders] = useState([]);
|
const [activeProviders, setActiveProviders] = useState([]);
|
||||||
const [comboStrategies, setComboStrategies] = useState({});
|
const [comboStrategies, setComboStrategies] = useState({});
|
||||||
|
const [capacityAdapter, setCapacityAdapter] = useState(EMPTY_CAPACITY_ADAPTER);
|
||||||
const { getCaps } = useModelCaps();
|
const { getCaps } = useModelCaps();
|
||||||
const [confirmState, setConfirmState] = useState(null);
|
const [confirmState, setConfirmState] = useState(null);
|
||||||
const { copied, copy } = useCopyToClipboard();
|
const { copied, copy } = useCopyToClipboard();
|
||||||
|
|
@ -45,6 +77,12 @@ export default function CombosPage() {
|
||||||
setActiveProviders(providersData.connections || []);
|
setActiveProviders(providersData.connections || []);
|
||||||
}
|
}
|
||||||
setComboStrategies(settingsData.comboStrategies || {});
|
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) {
|
} catch (error) {
|
||||||
console.log("Error fetching data:", error);
|
console.log("Error fetching data:", error);
|
||||||
} finally {
|
} 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) => {
|
const handleCreate = async (data) => {
|
||||||
try {
|
try {
|
||||||
const res = await fetch("/api/combos", {
|
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">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">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">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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<Button icon="add" onClick={() => setShowCreateModal(true)} className="w-full sm:w-auto whitespace-nowrap">
|
<Button icon="add" onClick={() => setShowCreateModal(true)} className="w-full sm:w-auto whitespace-nowrap">
|
||||||
|
|
@ -195,6 +245,14 @@ export default function CombosPage() {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Capacity Adapter */}
|
||||||
|
<CapacityAdapterSection
|
||||||
|
capacityAdapter={capacityAdapter}
|
||||||
|
onChange={handleSetCapacityAdapter}
|
||||||
|
activeProviders={activeProviders}
|
||||||
|
getCaps={getCaps}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Create Modal - Use key to force remount and reset state */}
|
{/* Create Modal - Use key to force remount and reset state */}
|
||||||
{showCreateModal && (
|
{showCreateModal && (
|
||||||
<ComboFormModal
|
<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 }) {
|
function ModelItem({ id, index, model, isFirst, isLast, onEdit, onMoveUp, onMoveDown, onRemove }) {
|
||||||
const { attributes, listeners, setNodeRef, transform, isDragging } = useSortable({ id });
|
const { attributes, listeners, setNodeRef, transform, isDragging } = useSortable({ id });
|
||||||
const style = {
|
const style = {
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,14 @@ const DEFAULT_SETTINGS = {
|
||||||
comboStrategy: "fallback",
|
comboStrategy: "fallback",
|
||||||
comboStickyRoundRobinLimit: 1,
|
comboStickyRoundRobinLimit: 1,
|
||||||
comboStrategies: {},
|
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,
|
requireLogin: true,
|
||||||
|
requireApiKey: true,
|
||||||
tunnelDashboardAccess: true,
|
tunnelDashboardAccess: true,
|
||||||
authMode: "password",
|
authMode: "password",
|
||||||
oidcIssuerUrl: "",
|
oidcIssuerUrl: "",
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,7 @@ export default function ModelSelectModal({
|
||||||
title = "Select Model",
|
title = "Select Model",
|
||||||
modelAliases = {},
|
modelAliases = {},
|
||||||
kindFilter = null,
|
kindFilter = null,
|
||||||
|
capFilter = null,
|
||||||
addedModelValues = [],
|
addedModelValues = [],
|
||||||
closeOnSelect = true,
|
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)
|
// Filter combos by search query (and hide combos when kindFilter is set — combos are LLM-only by design)
|
||||||
const filteredCombos = useMemo(() => {
|
const filteredCombos = useMemo(() => {
|
||||||
if (kindFilter) return [];
|
if (kindFilter || capFilter) return [];
|
||||||
if (!searchQuery.trim()) return combos;
|
if (!searchQuery.trim()) return combos;
|
||||||
const query = searchQuery.toLowerCase();
|
const query = searchQuery.toLowerCase();
|
||||||
return combos.filter(c => c.name.toLowerCase().includes(query));
|
return combos.filter(c => c.name.toLowerCase().includes(query));
|
||||||
|
|
@ -417,6 +418,11 @@ export default function ModelSelectModal({
|
||||||
const filtered = {};
|
const filtered = {};
|
||||||
Object.entries(groupedModels).forEach(([providerId, group]) => {
|
Object.entries(groupedModels).forEach(([providerId, group]) => {
|
||||||
let models = group.models;
|
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) {
|
if (query) {
|
||||||
const providerNameMatches = group.name.toLowerCase().includes(query);
|
const providerNameMatches = group.name.toLowerCase().includes(query);
|
||||||
models = models.filter(
|
models = models.filter(
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue