zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: custom models

Browse Source
This commit is contained in:
Zoe
2026-03-03 10:23:25 -06:00
parent ea17ee2313
commit 1d83b40fe0
4 changed files with 416 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Settings/AIServiceProvider.vue
+352 -30
View File
@@ -178,6 +178,22 @@ const deleteModels = async () => {
await Promise.all(provider.value.models.map(m => triplit.delete('models', m.id)));
};
const enableAllModels = async () => {
if (!provider.value) return;
await Promise.all(provider.value.models.map(m => triplit.update('models', m.id, {
enabled: true
})));
};
const disableAllModels = async () => {
if (!provider.value) return;
await Promise.all(provider.value.models.map(m => triplit.update('models', m.id, {
enabled: false
})));
};
const enabledModels = computed(() =>
filterModels(provider.value?.models.filter(m => m.enabled === true) as Model[] || [], modelSearch.value)
.sort(sortByReleaseDate)
@@ -188,6 +204,164 @@ const disabledModels = computed(() =>
.sort(sortByReleaseDate)
)
// ============================================
// Custom Model Add/Edit Panel
// ============================================
const showAddModelPanel = ref(false);
const editingModel = ref<Model | null>(null);
interface ModelFormData {
name: string;
externalId: string;
contextWindow: string;
capabilities: string[];
promptCost: string;
completionCost: string;
reasoning: boolean;
tools: boolean;
vision: boolean;
}
const defaultFormData: ModelFormData = {
name: '',
externalId: '',
contextWindow: '',
capabilities: [],
promptCost: '',
completionCost: '',
reasoning: false,
tools: false,
vision: false,
};
const formData = ref<ModelFormData>({ ...defaultFormData });
const availableCapabilities = ['reasoning', 'tools', 'vision'];
const toggleCapability = (cap: string) => {
const idx = formData.value.capabilities.indexOf(cap);
if (idx === -1) {
formData.value.capabilities.push(cap);
} else {
formData.value.capabilities.splice(idx, 1);
}
if (cap === 'reasoning') {
formData.value.reasoning = formData.value.capabilities.includes('reasoning');
} else if (cap === 'tools') {
formData.value.tools = formData.value.capabilities.includes('tools');
} else if (cap === 'vision') {
formData.value.vision = formData.value.capabilities.includes('vision');
}
};
const resetForm = () => {
formData.value = { ...defaultFormData };
formData.value.capabilities = [];
editingModel.value = null;
};
const openAddPanel = () => {
resetForm();
showAddModelPanel.value = true;
};
const openEditPanel = (model: Model) => {
editingModel.value = model;
formData.value = {
name: model.name || '',
externalId: model.externalId || '',
contextWindow: model.attributes?.contextWindow?.toString() || '',
capabilities: [...(model.attributes?.capabilities || [])],
promptCost: model.cost?.prompt || '',
completionCost: model.cost?.completion || '',
reasoning: model.attributes?.capabilities?.has('reasoning') || false,
tools: model.attributes?.capabilities?.has('tools') || false,
vision: model.attributes?.capabilities?.has('vision') || false,
};
showAddModelPanel.value = true;
};
const { user } = useAuth();
// Preview model that reacts to form changes
const previewModel = computed(() => {
if (!formData.value.name || !formData.value.externalId) return null;
const inputModalities = new Set<string>(['text']);
const outputModalities = new Set<string>(['text']);
if (formData.value.capabilities.includes('vision')) {
inputModalities.add('image');
}
return {
userId: user.value?.id!,
id: editingModel.value?.id || 'preview',
providerId: provider.value?.id || '',
name: formData.value.name,
externalId: formData.value.externalId || 'model/id',
cost: {
prompt: formData.value.promptCost ? formatMoney(formData.value.promptCost) : undefined,
completion: formData.value.completionCost ? formatMoney(formData.value.completionCost) : undefined,
},
attributes: {
inputModalities,
outputModalities,
capabilities: new Set(formData.value.capabilities.filter(c => c !== 'vision') as any),
contextWindow: formData.value.contextWindow ? parseInt(formData.value.contextWindow) : null,
},
isCustom: true,
enabled: true,
provider: provider.value!,
} as Model;
});
const saveCustomModel = async () => {
if (!provider.value || !formData.value.name || !formData.value.externalId) return;
const { id, ...previewModelWithoutId } = previewModel.value!;
if (editingModel.value) {
// Update existing model
await triplit.update('models', editingModel.value.id, previewModelWithoutId);
} else {
// Insert new custom model
await triplit.insert('models', previewModelWithoutId);
}
showAddModelPanel.value = false;
resetForm();
};
const cancelPanel = () => {
showAddModelPanel.value = false;
resetForm();
};
const formatMoney = (value: string) => {
// ensure that there are two decimal places MINIMUM I WILL STRANGLE YOU SO HELP ME GOD
let [integerPart, fractionalPart] = value.split('.');
if (fractionalPart === undefined || fractionalPart === '') {
fractionalPart = '00';
}
if (fractionalPart.length === 1) {
fractionalPart += '0';
}
if (integerPart!.length === 0) {
integerPart = '0';
}
return `${integerPart}.${fractionalPart}`;
}
const isFormValid = computed(() => {
return formData.value.name.trim() && formData.value.externalId.trim();
});
defineEmits(['navigate']);
</script>
@@ -259,43 +433,191 @@ defineEmits(['navigate']);
<span class="i-mynaui-refresh" :class="{ 'animate-rotate': fetchingModels }"></span>
fetch models
</button>
<div class="flex">
<button @click="openAddPanel"
class="whitespace-nowrap flex bg-[var(--bg-container)] hover:bg-[var(--color-hover)] text-sm rounded-l-md items-center px-2 py-0.5 gap-2 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<span class="i-mynaui-plus text-5"></span>
</button>
<div class="relative">
<Dropdown placement="bottom-end">
<template #default="{ toggle, setRef }">
<button :ref="setRef" @click="toggle"
class="whitespace-nowrap flex bg-[var(--bg-container)] hover:bg-[var(--color-hover)] text-sm rounded-r-md items-center px-1 py-0.5 gap-2 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<span class="i-mynaui-dots-vertical text-5"></span>
</button>
</template>
<template #dropdown="{ close }">
<button @click="enableAllModels(); close()"
class="truncate flex items-center gap-2 w-full text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150">
<span class="text-5 i-mynaui-toggle-right-solid"></span>
Enable All
</button>
<button @click="disableAllModels(); close()"
class="truncate flex items-center gap-2 w-full text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150">
<span class="text-5 i-mynaui-toggle-left"></span>
Disable All
</button>
</template>
</Dropdown>
</div>
</div>
</div>
</div>
<div v-if="provider?.models?.length === 0" class="flex flex-row items-center justify-center gap-2 mt-2">
<span class="i-mynaui-info-circle text-4"></span>
<span class="text-sm text-[var(--text-secondary)]">
No models found
</span>
</div>
<!-- Add/Edit Custom Model Panel -->
<div class="mt-2">
<!-- Expansion panel with grid-template-rows animation -->
<div class="grid transition-[grid-template-rows] duration-300 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
:class="showAddModelPanel ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'">
<div class="overflow-hidden">
<div
class="pt-3 pb-4 px-3 bg-[var(--bg-container)] border border-[var(--color-border)] rounded-lg mt-2">
<!-- Header -->
<div class="flex items-center justify-between mb-4">
<h5 class="text-sm font-medium text-[var(--text-primary)] m-0">
{{ editingModel ? 'Edit Custom Model' : 'Add Custom Model' }}
</h5>
<button @click="cancelPanel"
class="p-1 hover:bg-[var(--color-hover)] rounded transition-colors duration-200">
<span class="i-mynaui-x text-4 text-[var(--text-secondary)]"></span>
</button>
</div>
<ClientOnly v-else>
<div class="flex flex-col gap-1 mt-2">
<span v-if="enabledModels.length > 0" class="text-sm text-[var(--text-secondary)]">
Enabled
</span>
<div class="flex flex-col gap-1">
<RowVirtualizerDynamic :items="enabledModels" key-field="id"
:scroll-element="scrollContainerRef" :min-item-size="64" :overscan="20">
<template v-slot="{ item: model }">
<ModelItem :model="model" />
</template>
</RowVirtualizerDynamic>
</div>
<!-- Form -->
<div class="flex flex-col gap-3">
<!-- Model Name -->
<div class="flex flex-col gap-1">
<label class="text-xs text-[var(--text-secondary)]">Model Name</label>
<input v-model="formData.name" type="text" placeholder="e.g., GPT-4 Turbo"
class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
</div>
<span v-if="disabledModels.length > 0" class="text-sm text-[var(--text-secondary)]">
Disabled
</span>
<div class="flex flex-col gap-1">
<RowVirtualizerDynamic :items="disabledModels" key-field="id"
:scroll-element="scrollContainerRef" :min-item-size="64" :overscan="20">
<template v-slot="{ item: model }">
<ModelItem :model="model" />
</template>
</RowVirtualizerDynamic>
<!-- Model ID -->
<div class="flex flex-col gap-1">
<label class="text-xs text-[var(--text-secondary)]">Model ID</label>
<input v-model="formData.externalId" type="text" placeholder="e.g., gpt-4-turbo"
class="w-full px-3 py-2 text-sm font-mono bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
</div>
<!-- Context Window -->
<div class="flex flex-col gap-1">
<label class="text-xs text-[var(--text-secondary)]">Context Window (tokens)</label>
<input v-model="formData.contextWindow" type="text" placeholder="e.g., 128000"
class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
</div>
<!-- Capabilities -->
<div class="flex flex-col gap-1">
<label class="text-xs text-[var(--text-secondary)]">Capabilities</label>
<div class="flex gap-2">
<button v-for="cap in availableCapabilities" :key="cap"
@click="toggleCapability(cap)"
class="px-3 py-1.5 text-xs rounded-md border transition-colors duration-200 capitalize"
:class="formData.capabilities.includes(cap)
? 'bg-[var(--color-accent)] text-white border-[var(--color-accent)]'
: 'bg-[var(--bg-surface)] border-[var(--color-border)] text-[var(--text-secondary)] hover:border-[var(--color-accent)]'">
{{ cap }}
</button>
</div>
</div>
<!-- Pricing -->
<div class="grid grid-cols-2 gap-3">
<div class="flex flex-col gap-1">
<label class="text-xs text-[var(--text-secondary)]">Prompt Cost ($/1M
tokens)</label>
<input v-model="formData.promptCost" type="text" placeholder="e.g., 10.00"
class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
</div>
<div class="flex flex-col gap-1">
<label class="text-xs text-[var(--text-secondary)]">Completion Cost ($/1M
tokens)</label>
<input v-model="formData.completionCost" type="text" placeholder="e.g., 30.00"
class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
</div>
</div>
<!-- Preview Section -->
<div v-if="previewModel" class="mt-3 pt-3 border-t border-[var(--color-border)]">
<div class="flex items-center gap-2 mb-2">
<span class="i-mynaui-eye text-3.5 text-[var(--text-secondary)]"></span>
<span class="text-xs text-[var(--text-secondary)]">Preview</span>
</div>
<div
class="p-3 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md">
<ModelInfo :details="true" :model="previewModel!" :show-edit="false"
:show-cost="true" :show-external-id="true" :show-release-date="true" />
</div>
</div>
<!-- Actions -->
<div
class="flex items-center justify-between pt-2 mt-1 border-t border-[var(--color-border)]">
<span class="text-xs text-[var(--text-tertiary)]">
{{
editingModel
? 'Changes will be saved to existing model'
: 'Creates a new custom model'
}}
</span>
<div class="flex gap-2">
<button @click="cancelPanel"
class="px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)] rounded-md transition-colors duration-200">
Cancel
</button>
<button @click="saveCustomModel" :disabled="!isFormValid"
class="px-3 py-1.5 text-sm bg-[var(--color-accent)] text-white rounded-md hover:opacity-90 transition-opacity duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
{{ editingModel ? 'Save Changes' : 'Add Model' }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</ClientOnly>
</div>
<div class="mt-2">
<div v-if="provider?.models?.length === 0" class="flex flex-row items-center justify-center gap-2 mt-2">
<span class="i-mynaui-info-circle text-4"></span>
<span class="text-sm text-[var(--text-secondary)]">
No models found
</span>
</div>
<ClientOnly v-else>
<div v-if="enabledModels.length > 0" class="flex flex-col gap-1">
<span class="text-sm text-[var(--text-secondary)]">
Enabled
</span>
<div class="flex flex-col gap-1">
<RowVirtualizerDynamic :items="enabledModels" key-field="id"
:scroll-element="scrollContainerRef" :min-item-size="64" :overscan="20">
<template v-slot="{ item: model }">
<ModelItem :model="model" @edit="openEditPanel" />
</template>
</RowVirtualizerDynamic>
</div>
</div>
<div v-if="disabledModels.length > 0" class="flex flex-col gap-1">
<span class="text-sm text-[var(--text-secondary)]">
Disabled
</span>
<div class="flex flex-col gap-1">
<RowVirtualizerDynamic :items="disabledModels" key-field="id"
:scroll-element="scrollContainerRef" :min-item-size="64" :overscan="20">
<template v-slot="{ item: model }">
<ModelItem :model="model" @edit="openEditPanel" />
</template>
</RowVirtualizerDynamic>
</div>
</div>
</ClientOnly>
</div>
</div>
</div>
</template>