Performance enhancements galore! New themining system
This is once again a huge commit, but its mostly performance improvements along with some bug fixes and refactoring. It also includes changes to the theming systems. I'm still not 100% happy with the theming system, but its better than before. Model fetching has been dramatically improved! Nearly all the important computation and pre-processing has been moved to the server. This has also somehow fixed the way model details are loaded, which was causing many models to be missing their details despite models.dev having them. The markdown renderer has once again been changed, but I'm mostly certain that this is the last time major changes will be made to it. The renderer is not spamming components, bloating memory usage, and its not using a bug prone custom written chunking system. There's also a lot more that I haven't mentioned and honestly forgot. I need to get better commit hygiene tbh.
This commit is contained in:
@@ -19,8 +19,6 @@ const props = withDefaults(defineProps<{
|
||||
showEdit: false,
|
||||
});
|
||||
|
||||
const { Big } = await import('big.js');
|
||||
|
||||
const triplit = useTriplitClient();
|
||||
|
||||
const formatContextWindow = (window: number | null | undefined): string => {
|
||||
@@ -38,15 +36,6 @@ 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);
|
||||
});
|
||||
@@ -68,16 +57,16 @@ const deleteModel = async () => {
|
||||
<ModelIcon :class="{
|
||||
'rounded-lg overflow-hidden': size === 'large',
|
||||
'rounded-md overflow-hidden': size === 'medium' || size === 'small',
|
||||
}" :avatar="true" variant="color" :model-id="model.externalId"
|
||||
}" :avatar="true" variant="color" :key="model.externalId" :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">
|
||||
<span class="text-[15px] font-medium text-[var(--text-primary)] 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]">
|
||||
<span v-if="showExternalId" :title="model.externalId"
|
||||
class="text-xs text-[var(--text-secondary)] px-1 py-0.5 rounded bg-[var(--bg-container)] whitespace-nowrap truncate max-w-[240px]">
|
||||
{{ model.externalId }}
|
||||
</span>
|
||||
<div v-if="showEdit" class="flex items-center gap-2">
|
||||
@@ -88,25 +77,22 @@ const deleteModel = async () => {
|
||||
</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">
|
||||
<div v-if="details" class="flex items-center gap-1.5 flex-wrap text-[var(--text-tertiary)]">
|
||||
<span v-if="showReleaseDate && model.releasedAt" class="text-xs 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 v-if="model.cost.prompt" class="text-xs whitespace-nowrap flex items-center">
|
||||
<span class="w-1 h-1 rounded-full bg-[var(--text-secondary)] inline-block mr-1"></span>
|
||||
${{ model.cost.prompt }}/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 v-if="model.cost.completion" class="text-xs whitespace-nowrap flex items-center">
|
||||
<span class="w-1 h-1 rounded-full bg-[var(--text-secondary)] inline-block mr-1"></span>
|
||||
${{ model.cost.completion }}/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>
|
||||
class="text-xs whitespace-nowrap flex items-center">
|
||||
<span class="w-1 h-1 rounded-full bg-[var(--text-secondary)] inline-block mr-1"></span>
|
||||
{{ model.cost.request }}/request
|
||||
</span>
|
||||
</template>
|
||||
@@ -131,7 +117,7 @@ const deleteModel = async () => {
|
||||
</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)]">
|
||||
class="text-xs font-mono text-[var(--text-secondary)] px-1.5 py-0.5 rounded bg-[var(--bg-container)]">
|
||||
{{ formatContextWindow(model.attributes.contextWindow) }}
|
||||
</span>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user