feat: model tag support
This commit is contained in:
Timothy J. Baek
@@ -10,6 +10,7 @@
|
||||
|
||||
import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte';
|
||||
import Checkbox from '$lib/components/common/Checkbox.svelte';
|
||||
import Tags from '$lib/components/common/Tags.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -262,7 +263,7 @@
|
||||
<button
|
||||
class=" {info.meta.profile_image_url
|
||||
? ''
|
||||
: 'p-6'} rounded-full dark:bg-gray-700 border border-dashed border-gray-200"
|
||||
: 'p-4'} rounded-full dark:bg-gray-700 border border-dashed border-gray-200 flex items-center"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
filesInputElement.click();
|
||||
@@ -272,7 +273,7 @@
|
||||
<img
|
||||
src={info.meta.profile_image_url}
|
||||
alt="modelfile profile"
|
||||
class=" rounded-full w-20 h-20 object-cover"
|
||||
class=" rounded-full size-16 object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<svg
|
||||
@@ -338,18 +339,40 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<div class=" text-sm font-semibold mb-2">{$i18n.t('Description')}</div>
|
||||
<div class="my-1">
|
||||
<div class="flex w-full justify-between items-center mb-1">
|
||||
<div class=" self-center text-sm font-semibold">{$i18n.t('Description')}</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
class="p-1 text-xs flex rounded transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
if (info.meta.description === null) {
|
||||
info.meta.description = '';
|
||||
} else {
|
||||
info.meta.description = null;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#if info.meta.description === null}
|
||||
<span class="ml-2 self-center">{$i18n.t('Default')}</span>
|
||||
{:else}
|
||||
<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if info.meta.description !== null}
|
||||
<input
|
||||
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
|
||||
placeholder={$i18n.t('Add a short description about what this model does')}
|
||||
bind:value={info.meta.description}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<hr class=" dark:border-gray-850 my-1" />
|
||||
|
||||
<div class="my-2">
|
||||
<div class="flex w-full justify-between">
|
||||
<div class=" self-center text-sm font-semibold">{$i18n.t('Model Params')}</div>
|
||||
@@ -401,7 +424,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<hr class=" dark:border-gray-850 my-1" />
|
||||
|
||||
<div class="my-1">
|
||||
<div class="flex w-full justify-between items-center">
|
||||
<div class="flex w-full justify-between items-center">
|
||||
<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div>
|
||||
@@ -491,8 +516,8 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<div class="flex w-full justify-between">
|
||||
<div class="my-1">
|
||||
<div class="flex w-full justify-between mb-1">
|
||||
<div class=" self-center text-sm font-semibold">{$i18n.t('Capabilities')}</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
@@ -505,7 +530,7 @@
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class=" py-1.5 text-sm w-full capitalize">
|
||||
<div class=" py-0.5 text-sm w-full capitalize">
|
||||
{$i18n.t(capability)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -513,7 +538,30 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-2 text-gray-500">
|
||||
<div class="my-1">
|
||||
<div class="flex w-full justify-between items-center">
|
||||
<div class=" self-center text-sm font-semibold">{$i18n.t('Tags')}</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<Tags
|
||||
tags={info?.meta?.tags ?? []}
|
||||
deleteTag={(tagName) => {
|
||||
info.meta.tags = info.meta.tags.filter((tag) => tag.name !== tagName);
|
||||
}}
|
||||
addTag={(tagName) => {
|
||||
console.log(tagName);
|
||||
if (!(info?.meta?.tags ?? null)) {
|
||||
info.meta.tags = [{ name: tagName }];
|
||||
} else {
|
||||
info.meta.tags = [...info.meta.tags, { name: tagName }];
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-2 text-gray-300 dark:text-gray-700">
|
||||
<div class="flex w-full justify-between mb-2">
|
||||
<div class=" self-center text-sm font-semibold">{$i18n.t('JSON Preview')}</div>
|
||||
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte';
|
||||
import { getModels } from '$lib/apis';
|
||||
import Checkbox from '$lib/components/common/Checkbox.svelte';
|
||||
import Tags from '$lib/components/common/Tags.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -44,7 +45,8 @@
|
||||
meta: {
|
||||
profile_image_url: '/favicon.png',
|
||||
description: '',
|
||||
suggestion_prompts: null
|
||||
suggestion_prompts: null,
|
||||
tags: []
|
||||
},
|
||||
params: {
|
||||
system: ''
|
||||
@@ -223,26 +225,26 @@
|
||||
<div class="flex justify-center my-4">
|
||||
<div class="self-center">
|
||||
<button
|
||||
class=" {info?.meta?.profile_image_url
|
||||
class=" {info.meta.profile_image_url
|
||||
? ''
|
||||
: 'p-6'} rounded-full dark:bg-gray-700 border border-dashed border-gray-200"
|
||||
: 'p-4'} rounded-full dark:bg-gray-700 border border-dashed border-gray-200 flex items-center"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
filesInputElement.click();
|
||||
}}
|
||||
>
|
||||
{#if info?.meta?.profile_image_url}
|
||||
{#if info.meta.profile_image_url}
|
||||
<img
|
||||
src={info?.meta?.profile_image_url}
|
||||
src={info.meta.profile_image_url}
|
||||
alt="modelfile profile"
|
||||
class=" rounded-full w-20 h-20 object-cover"
|
||||
class=" rounded-full size-16 object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="w-8"
|
||||
class="size-8"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
@@ -255,9 +257,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-2 flex space-x-2">
|
||||
<div class="mt-2 my-1 flex space-x-2">
|
||||
<div class="flex-1">
|
||||
<div class=" text-sm font-semibold mb-2">{$i18n.t('Name')}*</div>
|
||||
<div class=" text-sm font-semibold mb-1">{$i18n.t('Name')}*</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
@@ -270,7 +272,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<div class=" text-sm font-semibold mb-2">{$i18n.t('Model ID')}*</div>
|
||||
<div class=" text-sm font-semibold mb-1">{$i18n.t('Model ID')}*</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
@@ -285,8 +287,8 @@
|
||||
</div>
|
||||
|
||||
{#if model.preset}
|
||||
<div class="my-2">
|
||||
<div class=" text-sm font-semibold mb-2">{$i18n.t('Base Model (From)')}</div>
|
||||
<div class="my-1">
|
||||
<div class=" text-sm font-semibold mb-1">{$i18n.t('Base Model (From)')}</div>
|
||||
|
||||
<div>
|
||||
<select
|
||||
@@ -304,18 +306,40 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="my-2">
|
||||
<div class=" text-sm font-semibold mb-2">{$i18n.t('Description')}</div>
|
||||
<div class="my-1">
|
||||
<div class="flex w-full justify-between items-center">
|
||||
<div class=" self-center text-sm font-semibold">{$i18n.t('Description')}</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
class="p-1 text-xs flex rounded transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
if (info.meta.description === null) {
|
||||
info.meta.description = '';
|
||||
} else {
|
||||
info.meta.description = null;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#if info.meta.description === null}
|
||||
<span class="ml-2 self-center">{$i18n.t('Default')}</span>
|
||||
{:else}
|
||||
<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if info.meta.description !== null}
|
||||
<input
|
||||
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
|
||||
class="mt-1 px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
|
||||
placeholder={$i18n.t('Add a short description about what this model does')}
|
||||
bind:value={info.meta.description}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<hr class=" dark:border-gray-850 my-1" />
|
||||
|
||||
<div class="my-2">
|
||||
<div class="flex w-full justify-between">
|
||||
<div class=" self-center text-sm font-semibold">{$i18n.t('Model Params')}</div>
|
||||
@@ -369,7 +393,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<hr class=" dark:border-gray-850 my-1" />
|
||||
|
||||
<div class="my-1">
|
||||
<div class="flex w-full justify-between items-center">
|
||||
<div class="flex w-full justify-between items-center">
|
||||
<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div>
|
||||
@@ -459,7 +485,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<div class="my-1">
|
||||
<div class="flex w-full justify-between mb-1">
|
||||
<div class=" self-center text-sm font-semibold">{$i18n.t('Capabilities')}</div>
|
||||
</div>
|
||||
@@ -481,7 +507,30 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-2 text-gray-500">
|
||||
<div class="my-1">
|
||||
<div class="flex w-full justify-between items-center">
|
||||
<div class=" self-center text-sm font-semibold">{$i18n.t('Tags')}</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<Tags
|
||||
tags={info?.meta?.tags ?? []}
|
||||
deleteTag={(tagName) => {
|
||||
info.meta.tags = info.meta.tags.filter((tag) => tag.name !== tagName);
|
||||
}}
|
||||
addTag={(tagName) => {
|
||||
console.log(tagName);
|
||||
if (!(info?.meta?.tags ?? null)) {
|
||||
info.meta.tags = [{ name: tagName }];
|
||||
} else {
|
||||
info.meta.tags = [...info.meta.tags, { name: tagName }];
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-2 text-gray-300 dark:text-gray-700">
|
||||
<div class="flex w-full justify-between mb-2">
|
||||
<div class=" self-center text-sm font-semibold">{$i18n.t('JSON Preview')}</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user