perf(ui): consolidate redundant model capability reactive blocks

Replace 6 separate $: reactive blocks that each independently filter
models by capability key (vision, file_upload, web_search,
image_generation, code_interpreter, terminal) with a single block.

All 6 shared the same dependency set and ran the same $models.find()
lookup per model — just for different capability keys. Svelte re-ran
all 6 on every model selection change, doing 6x the work.

The consolidated block resolves capabilities once per model, then
filters each key from the pre-resolved result. Reduces $models.find()
iterations from 6xN to 1xN per model change.
This commit is contained in:
silentoplayz 2026-06-08 13:18:56 -04:00
parent b1d40f3409
commit 0b8a7c28f2

View file

@ -472,40 +472,29 @@
export let placeholder = '';
let visionCapableModels = [];
$: visionCapableModels = (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).filter(
(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.vision ?? true
);
let fileUploadCapableModels = [];
$: fileUploadCapableModels = (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).filter(
(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.file_upload ?? true
);
let webSearchCapableModels = [];
$: webSearchCapableModels = (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).filter(
(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.web_search ?? true
);
let imageGenerationCapableModels = [];
$: imageGenerationCapableModels = (
atSelectedModel?.id ? [atSelectedModel.id] : selectedModels
).filter(
(model) =>
$models.find((m) => m.id === model)?.info?.meta?.capabilities?.image_generation ?? true
);
let codeInterpreterCapableModels = [];
$: codeInterpreterCapableModels = (
atSelectedModel?.id ? [atSelectedModel.id] : selectedModels
).filter(
(model) =>
$models.find((m) => m.id === model)?.info?.meta?.capabilities?.code_interpreter ?? true
);
let terminalCapableModels = [];
$: terminalCapableModels = (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).filter(
(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.terminal ?? true
);
$: {
const modelIds = atSelectedModel?.id ? [atSelectedModel.id] : selectedModels;
const resolvedCaps = modelIds.map(
(id) => $models.find((m) => m.id === id)?.info?.meta?.capabilities ?? {}
);
visionCapableModels = modelIds.filter((_, i) => resolvedCaps[i].vision ?? true);
fileUploadCapableModels = modelIds.filter((_, i) => resolvedCaps[i].file_upload ?? true);
webSearchCapableModels = modelIds.filter((_, i) => resolvedCaps[i].web_search ?? true);
imageGenerationCapableModels = modelIds.filter(
(_, i) => resolvedCaps[i].image_generation ?? true
);
codeInterpreterCapableModels = modelIds.filter(
(_, i) => resolvedCaps[i].code_interpreter ?? true
);
terminalCapableModels = modelIds.filter((_, i) => resolvedCaps[i].terminal ?? true);
}
let toggleFilters = [];
$: toggleFilters = (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels)