mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-31 21:55:21 +00:00
refac: styling
This commit is contained in:
Timothy Jaeryang Baek
parent
5088583721
commit
d053600096
1 changed files with 167 additions and 165 deletions
|
|
@ -414,190 +414,192 @@
|
||||||
submitHandler();
|
submitHandler();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div class="self-center md:self-start flex justify-center my-2 shrink-0">
|
<div class="w-full">
|
||||||
<div class="self-center">
|
<div class="flex gap-4 w-full">
|
||||||
<button
|
<div class="self-center md:self-start flex justify-center my-2 shrink-0">
|
||||||
class="rounded-xl flex shrink-0 items-center {info.meta.profile_image_url !==
|
<div class="self-center">
|
||||||
`${WEBUI_BASE_URL}/static/favicon.png`
|
<button
|
||||||
? 'bg-transparent'
|
class="rounded-xl flex shrink-0 items-center {info.meta.profile_image_url !==
|
||||||
: 'bg-white'} shadow-xl group relative"
|
`${WEBUI_BASE_URL}/static/favicon.png`
|
||||||
type="button"
|
? 'bg-transparent'
|
||||||
on:click={() => {
|
: 'bg-white'} shadow-xl group relative"
|
||||||
filesInputElement.click();
|
type="button"
|
||||||
}}
|
on:click={() => {
|
||||||
>
|
filesInputElement.click();
|
||||||
{#if info.meta.profile_image_url}
|
}}
|
||||||
<img
|
>
|
||||||
src={info.meta.profile_image_url}
|
{#if info.meta.profile_image_url}
|
||||||
alt="model profile"
|
<img
|
||||||
class="rounded-xl sm:size-60 size-max object-cover shrink-0"
|
src={info.meta.profile_image_url}
|
||||||
/>
|
alt="model profile"
|
||||||
{:else}
|
class="rounded-xl sm:size-60 size-max object-cover shrink-0"
|
||||||
<img
|
/>
|
||||||
src="{WEBUI_BASE_URL}/static/favicon.png"
|
{:else}
|
||||||
alt="model profile"
|
<img
|
||||||
class=" rounded-xl sm:size-60 size-max object-cover shrink-0"
|
src="{WEBUI_BASE_URL}/static/favicon.png"
|
||||||
/>
|
alt="model profile"
|
||||||
{/if}
|
class=" rounded-xl sm:size-60 size-max object-cover shrink-0"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="absolute bottom-0 right-0 z-10">
|
<div class="absolute bottom-0 right-0 z-10">
|
||||||
<div class="m-1.5">
|
<div class="m-1.5">
|
||||||
<div
|
<div
|
||||||
class="shadow-xl p-1 rounded-full border-2 border-white bg-gray-800 text-white group-hover:bg-gray-600 transition dark:border-black dark:bg-white dark:group-hover:bg-gray-200 dark:text-black"
|
class="shadow-xl p-1 rounded-full border-2 border-white bg-gray-800 text-white group-hover:bg-gray-600 transition dark:border-black dark:bg-white dark:group-hover:bg-gray-200 dark:text-black"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 16 16"
|
viewBox="0 0 16 16"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
class="size-5"
|
class="size-5"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10.5 5.707a.5.5 0 0 0-.146-.353l-1-1a.5.5 0 0 0-.708 0L9.354 9.646a.5.5 0 0 1-.708 0L6.354 7.354a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0-.146.353V12a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V9.707ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
|
d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10.5 5.707a.5.5 0 0 0-.146-.353l-1-1a.5.5 0 0 0-.708 0L9.354 9.646a.5.5 0 0 1-.708 0L6.354 7.354a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0-.146.353V12a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V9.707ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="absolute top-0 bottom-0 left-0 right-0 bg-white dark:bg-black rounded-lg opacity-0 group-hover:opacity-20 transition"
|
||||||
|
></div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="flex w-full mt-1 justify-end">
|
||||||
|
<button
|
||||||
|
class="px-2 py-1 text-gray-500 rounded-lg text-xs"
|
||||||
|
on:click={() => {
|
||||||
|
info.meta.profile_image_url = `${WEBUI_BASE_URL}/static/favicon.png`;
|
||||||
|
}}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
{$i18n.t('Reset Image')}</button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
|
||||||
class="absolute top-0 bottom-0 left-0 right-0 bg-white dark:bg-black rounded-lg opacity-0 group-hover:opacity-20 transition"
|
|
||||||
></div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="flex w-full mt-1 justify-end">
|
|
||||||
<button
|
|
||||||
class="px-2 py-1 text-gray-500 rounded-lg text-xs"
|
|
||||||
on:click={() => {
|
|
||||||
info.meta.profile_image_url = `${WEBUI_BASE_URL}/static/favicon.png`;
|
|
||||||
}}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
{$i18n.t('Reset Image')}</button
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full">
|
<div class="flex flex-col w-full flex-1">
|
||||||
<div class="flex flex-col">
|
<div class="flex justify-between items-start my-2">
|
||||||
<div class="flex justify-between items-start my-2">
|
<div class=" flex flex-col w-full">
|
||||||
<div class=" flex flex-col w-full">
|
<div class="flex-1 w-full">
|
||||||
<div class="flex-1 w-full">
|
|
||||||
<input
|
|
||||||
class="text-4xl font-medium w-full bg-transparent outline-hidden"
|
|
||||||
placeholder={$i18n.t('Model Name')}
|
|
||||||
bind:value={name}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-1 w-full">
|
|
||||||
<div>
|
|
||||||
<input
|
<input
|
||||||
class="text-xs w-full bg-transparent outline-hidden"
|
class="text-4xl font-medium w-full bg-transparent outline-hidden"
|
||||||
placeholder={$i18n.t('Model ID')}
|
placeholder={$i18n.t('Model Name')}
|
||||||
bind:value={id}
|
bind:value={name}
|
||||||
disabled={edit}
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="shrink-0">
|
<div class="flex-1 w-full">
|
||||||
<button
|
<div>
|
||||||
class="bg-gray-50 shrink-0 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
|
<input
|
||||||
type="button"
|
class="text-xs w-full bg-transparent outline-hidden"
|
||||||
on:click={() => {
|
placeholder={$i18n.t('Model ID')}
|
||||||
showAccessControlModal = true;
|
bind:value={id}
|
||||||
}}
|
disabled={edit}
|
||||||
>
|
required
|
||||||
<LockClosed strokeWidth="2.5" className="size-3.5 shrink-0" />
|
/>
|
||||||
|
</div>
|
||||||
<div class="text-sm font-medium shrink-0">
|
|
||||||
{$i18n.t('Access')}
|
|
||||||
</div>
|
</div>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if preset}
|
|
||||||
<div class="mb-1">
|
|
||||||
<div class=" text-xs font-medium mb-1 text-gray-500">
|
|
||||||
{$i18n.t('Base Model (From)')}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="shrink-0">
|
||||||
<select
|
<button
|
||||||
class="dark:bg-gray-900 text-sm w-full bg-transparent outline-hidden"
|
class="bg-gray-50 shrink-0 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
|
||||||
placeholder={$i18n.t('Select a base model (e.g. llama3, gpt-4o)')}
|
type="button"
|
||||||
bind:value={info.base_model_id}
|
on:click={() => {
|
||||||
required
|
showAccessControlModal = true;
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<option value={null} class=" text-gray-900"
|
<LockClosed strokeWidth="2.5" className="size-3.5 shrink-0" />
|
||||||
>{$i18n.t('Select a base model')}</option
|
|
||||||
|
<div class="text-sm font-medium shrink-0">
|
||||||
|
{$i18n.t('Access')}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if preset}
|
||||||
|
<div class="mb-1">
|
||||||
|
<div class=" text-xs font-medium mb-1 text-gray-500">
|
||||||
|
{$i18n.t('Base Model (From)')}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<select
|
||||||
|
class="dark:bg-gray-900 text-sm w-full bg-transparent outline-hidden"
|
||||||
|
placeholder={$i18n.t('Select a base model (e.g. llama3, gpt-4o)')}
|
||||||
|
bind:value={info.base_model_id}
|
||||||
|
required
|
||||||
>
|
>
|
||||||
{#each $models.filter((m) => (model ? m.id !== model.id : true) && !m?.preset && m?.owned_by !== 'arena' && !(m?.direct ?? false)) as model}
|
<option value={null} class=" text-gray-900"
|
||||||
<option value={model.id} class=" text-gray-900">{model.name}</option>
|
>{$i18n.t('Select a base model')}</option
|
||||||
{/each}
|
>
|
||||||
</select>
|
{#each $models.filter((m) => (model ? m.id !== model.id : true) && !m?.preset && m?.owned_by !== 'arena' && !(m?.direct ?? false)) as model}
|
||||||
|
<option value={model.id} class=" text-gray-900">{model.name}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="mb-1">
|
|
||||||
<div class="mb-1 flex w-full justify-between items-center">
|
|
||||||
<div class=" self-center text-xs font-medium text-gray-500">
|
|
||||||
{$i18n.t('Description')}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="p-1 text-xs flex rounded-sm transition"
|
|
||||||
type="button"
|
|
||||||
aria-pressed={enableDescription ? 'true' : 'false'}
|
|
||||||
aria-label={enableDescription
|
|
||||||
? $i18n.t('Custom description enabled')
|
|
||||||
: $i18n.t('Default description enabled')}
|
|
||||||
on:click={() => {
|
|
||||||
enableDescription = !enableDescription;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{#if !enableDescription}
|
|
||||||
<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 enableDescription}
|
|
||||||
<Textarea
|
|
||||||
className=" text-sm w-full bg-transparent outline-hidden resize-none overflow-y-hidden "
|
|
||||||
placeholder={$i18n.t('Add a short description about what this model does')}
|
|
||||||
bind:value={info.meta.description}
|
|
||||||
/>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full mb-1 max-w-full">
|
<div class="mb-1">
|
||||||
<div class="">
|
<div class="mb-1 flex w-full justify-between items-center">
|
||||||
<Tags
|
<div class=" self-center text-xs font-medium text-gray-500">
|
||||||
tags={info?.meta?.tags ?? []}
|
{$i18n.t('Description')}
|
||||||
on:delete={(e) => {
|
</div>
|
||||||
const tagName = e.detail;
|
|
||||||
info.meta.tags = info.meta.tags.filter((tag) => tag.name !== tagName);
|
<button
|
||||||
}}
|
class="p-1 text-xs flex rounded-sm transition"
|
||||||
on:add={(e) => {
|
type="button"
|
||||||
const tagName = e.detail;
|
aria-pressed={enableDescription ? 'true' : 'false'}
|
||||||
if (!(info?.meta?.tags ?? null)) {
|
aria-label={enableDescription
|
||||||
info.meta.tags = [{ name: tagName }];
|
? $i18n.t('Custom description enabled')
|
||||||
} else {
|
: $i18n.t('Default description enabled')}
|
||||||
info.meta.tags = [...info.meta.tags, { name: tagName }];
|
on:click={() => {
|
||||||
}
|
enableDescription = !enableDescription;
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
{#if !enableDescription}
|
||||||
|
<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 enableDescription}
|
||||||
|
<Textarea
|
||||||
|
className=" text-sm w-full bg-transparent outline-hidden resize-none overflow-y-hidden "
|
||||||
|
placeholder={$i18n.t('Add a short description about what this model does')}
|
||||||
|
bind:value={info.meta.description}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full mb-1 max-w-full">
|
||||||
|
<div class="">
|
||||||
|
<Tags
|
||||||
|
tags={info?.meta?.tags ?? []}
|
||||||
|
on:delete={(e) => {
|
||||||
|
const tagName = e.detail;
|
||||||
|
info.meta.tags = info.meta.tags.filter((tag) => tag.name !== tagName);
|
||||||
|
}}
|
||||||
|
on:add={(e) => {
|
||||||
|
const tagName = e.detail;
|
||||||
|
if (!(info?.meta?.tags ?? null)) {
|
||||||
|
info.meta.tags = [{ name: tagName }];
|
||||||
|
} else {
|
||||||
|
info.meta.tags = [...info.meta.tags, { name: tagName }];
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue