141 lines
6.3 KiB
Vue
141 lines
6.3 KiB
Vue
<script setup lang="ts">
|
|
import type { Entity } from '@triplit/client';
|
|
import type schema from '#triplit/schema';
|
|
|
|
const props = withDefaults(defineProps<{
|
|
model: Entity<typeof schema, 'models'>;
|
|
size?: 'small' | 'medium' | 'large';
|
|
details?: boolean;
|
|
showCost?: boolean;
|
|
showEdit?: boolean;
|
|
showExternalId?: boolean;
|
|
showReleaseDate?: boolean;
|
|
}>(), {
|
|
size: 'large',
|
|
details: false,
|
|
showCost: false,
|
|
showExternalId: false,
|
|
showReleaseDate: false,
|
|
showEdit: false,
|
|
});
|
|
|
|
const { Big } = await import('big.js');
|
|
|
|
const triplit = useTriplitClient();
|
|
|
|
const formatContextWindow = (window: number | null | undefined): string => {
|
|
if (!window) return '';
|
|
if (window >= 1000000) return `${(window / 1000000).toFixed(0)}M`;
|
|
if (window >= 1000) return `${(window / 1000).toFixed(0)}K`;
|
|
return window.toString();
|
|
};
|
|
|
|
const hasCapability = (capability: string): boolean => {
|
|
return props.model.attributes.capabilities.has(capability);
|
|
};
|
|
|
|
const hasInputModality = (modality: string): boolean => {
|
|
return (props.model.attributes.inputModalities as Readonly<Set<string>>).has(modality);
|
|
};
|
|
|
|
const formatBig = (bigValue: Big) => {
|
|
let str = bigValue.toString();
|
|
|
|
if (!str.includes('.')) return str + '.00';
|
|
if (str.split('.')[1]!.length === 1) return str + '0';
|
|
|
|
return str;
|
|
};
|
|
|
|
const showCost = computed(() => {
|
|
return props.showCost && (props.model.cost.prompt || props.model.cost.completion || props.model.cost.request);
|
|
});
|
|
|
|
const toggleModel = async (id: string) => {
|
|
await triplit.update('models', id, {
|
|
enabled: !props.model.enabled,
|
|
});
|
|
};
|
|
|
|
const deleteModel = async () => {
|
|
await triplit.delete('models', props.model.id);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-between w-full" v-bind="$attrs">
|
|
<div class="flex items-center gap-2 min-w-0 flex-1">
|
|
<ModelIcon :class="{
|
|
'rounded-lg overflow-hidden': size === 'large',
|
|
'rounded-md overflow-hidden': size === 'medium' || size === 'small',
|
|
}" :avatar="true" variant="color" :model-id="model.externalId"
|
|
:size="size === 'small' ? '20' : size === 'medium' ? '26' : '32'" />
|
|
|
|
<div class="flex flex-col gap-1 min-w-0 flex-1">
|
|
<div class="flex items-center gap-1 min-w-0">
|
|
<span class="text-[15px] font-medium text-[var(--color-text)] truncate min-w-0">
|
|
{{ model.name }}
|
|
</span>
|
|
<span v-if="showExternalId"
|
|
class="text-xs text-[var(--color-muted)] px-1 py-0.5 rounded bg-[var(--color-highlight)] whitespace-nowrap truncate max-w-[240px]">
|
|
{{ model.externalId }}
|
|
</span>
|
|
<div v-if="showEdit" class="flex items-center gap-2">
|
|
<button @click="deleteModel"
|
|
class="rounded h-5 w-5 flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-red-500/30 text-red-500 trannsition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
<Icon name="mynaui:trash" class="text-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="details" class="flex items-center gap-1.5 flex-wrap">
|
|
<span v-if="showReleaseDate && model.releasedAt"
|
|
class="text-xs text-[var(--color-muted)] whitespace-nowrap">
|
|
Released on {{ model.releasedAt.toISOString().split('T')[0] }}
|
|
</span>
|
|
<template v-if="showCost">
|
|
<span v-if="model.cost.prompt"
|
|
class="text-xs text-[var(--color-muted)] whitespace-nowrap flex items-center">
|
|
<span class="w-1 h-1 rounded-full bg-[var(--color-muted)] inline-block mr-1"></span>
|
|
${{ formatBig(Big(model.cost.prompt).mul(1000000)) }}/M input
|
|
</span>
|
|
<span v-if="model.cost.completion"
|
|
class="text-xs text-[var(--color-muted)] whitespace-nowrap flex items-center">
|
|
<span class="w-1 h-1 rounded-full bg-[var(--color-muted)] inline-block mr-1"></span>
|
|
${{ formatBig(Big(model.cost.completion).mul(1000000)) }}/M output
|
|
</span>
|
|
<span v-if="model.cost.request && model.cost.request !== '0'"
|
|
class="text-xs text-[var(--color-muted)] whitespace-nowrap flex items-center">
|
|
<span class="w-1 h-1 rounded-full bg-[var(--color-muted)] inline-block mr-1"></span>
|
|
{{ model.cost.request }}/request
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1 shrink-0">
|
|
<div class="flex items-center gap-0.5">
|
|
<div v-if="hasInputModality('image')"
|
|
class="w-4.5 h-4.5 bg-emerald/10 rounded flex items-center justify-center">
|
|
<Icon name="mynaui:image" class="text-2.5 text-emerald" title="Vision" />
|
|
</div>
|
|
<div v-if="hasCapability('reasoning')"
|
|
class="w-4.5 h-4.5 bg-[color-mix(in_srgb,_transparent_90%,_var(--reasoning-accent)_10%)] rounded flex items-center justify-center">
|
|
<Icon name="mynaui:atom" class="text-2.5 text-[var(--reasoning-accent)]" title="Reasoning" />
|
|
</div>
|
|
<div v-if="hasCapability('tools')"
|
|
class="w-4.5 h-4.5 bg-emerald/10 rounded flex items-center justify-center">
|
|
<Icon name="mynaui:tool" class="text-2.5 text-sky" title="Tools" />
|
|
</div>
|
|
</div>
|
|
|
|
<span v-if="model.attributes.contextWindow"
|
|
class="text-xs font-mono text-[var(--color-subtle)] px-1.5 py-0.5 rounded bg-[var(--color-highlight)]">
|
|
{{ formatContextWindow(model.attributes.contextWindow) }}
|
|
</span>
|
|
|
|
<Slider v-if="showEdit" :checked="model.enabled" @click="toggleModel(model.id)" />
|
|
</div>
|
|
</div>
|
|
</template> |