refac: styling
Some checks failed
Deploy to HuggingFace Spaces / check-secret (push) Has been cancelled
Create and publish Docker images with specific build args / build-main-image (linux/amd64) (push) Has been cancelled
Create and publish Docker images with specific build args / build-main-image (linux/arm64) (push) Has been cancelled
Create and publish Docker images with specific build args / build-cuda-image (linux/amd64) (push) Has been cancelled
Create and publish Docker images with specific build args / build-cuda-image (linux/arm64) (push) Has been cancelled
Create and publish Docker images with specific build args / build-ollama-image (linux/amd64) (push) Has been cancelled
Create and publish Docker images with specific build args / build-ollama-image (linux/arm64) (push) Has been cancelled
Python CI / Format Backend (3.11) (push) Has been cancelled
Frontend Build / Format & Build Frontend (push) Has been cancelled
Frontend Build / Frontend Unit Tests (push) Has been cancelled
Integration Test / Run Cypress Integration Tests (push) Has been cancelled
Integration Test / Run Migration Tests (push) Has been cancelled
Deploy to HuggingFace Spaces / deploy (push) Has been cancelled
Create and publish Docker images with specific build args / merge-main-images (push) Has been cancelled
Create and publish Docker images with specific build args / merge-cuda-images (push) Has been cancelled
Create and publish Docker images with specific build args / merge-ollama-images (push) Has been cancelled

This commit is contained in:
Timothy Jaeryang Baek 2025-01-19 12:46:02 -08:00
parent bdc60e7850
commit 59c349de00
4 changed files with 103 additions and 87 deletions

View File

@ -115,12 +115,12 @@ li p {
select { select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
background-position: right 0.5rem center; background-position: right 0rem center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1.5em 1.5em; background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
print-color-adjust: exact; print-color-adjust: exact;
/* padding-right: 2.5rem; */
/* for Firefox */ /* for Firefox */
-moz-appearance: none; -moz-appearance: none;
/* for Chrome */ /* for Chrome */

View File

@ -26,6 +26,7 @@
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Cog6 from '$lib/components/icons/Cog6.svelte'; import Cog6 from '$lib/components/icons/Cog6.svelte';
import ConfigureModelsModal from './Models/ConfigureModelsModal.svelte'; import ConfigureModelsModal from './Models/ConfigureModelsModal.svelte';
import Wrench from '$lib/components/icons/Wrench.svelte';
let importFiles; let importFiles;
let modelsImportInputElement: HTMLInputElement; let modelsImportInputElement: HTMLInputElement;
@ -151,10 +152,22 @@
> >
</div> </div>
<div> <div class="flex items-center">
<!-- <Tooltip content={$i18n.t('Manage')}>
<button
class=" p-1 rounded-full flex gap-1 items-center"
type="button"
on:click={() => {
showConfigModal = true;
}}
>
<Wrench />
</button>
</Tooltip> -->
<Tooltip content={$i18n.t('Configure')}> <Tooltip content={$i18n.t('Configure')}>
<button <button
class=" px-2.5 py-1 rounded-full flex gap-1 items-center" class=" p-1 rounded-full flex gap-1 items-center"
type="button" type="button"
on:click={() => { on:click={() => {
showConfigModal = true; showConfigModal = true;

View File

@ -33,6 +33,24 @@
init(); init();
} }
$: if (selectedModelId) {
onModelSelect();
}
const onModelSelect = () => {
if (selectedModelId === '') {
return;
}
if (defaultModelIds.includes(selectedModelId)) {
selectedModelId = '';
return;
}
defaultModelIds = [...defaultModelIds, selectedModelId];
selectedModelId = '';
};
const init = async () => { const init = async () => {
config = await getModelsConfig(localStorage.token); config = await getModelsConfig(localStorage.token);
@ -143,6 +161,24 @@
<div class="text-xs text-gray-500">{$i18n.t('Default Models')}</div> <div class="text-xs text-gray-500">{$i18n.t('Default Models')}</div>
</div> </div>
<div class="flex items-center -mr-1">
<select
class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId
? ''
: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none"
bind:value={selectedModelId}
>
<option value="">{$i18n.t('Select a model')}</option>
{#each $models as model}
<option value={model.id} class="bg-gray-50 dark:bg-gray-700"
>{model.name}</option
>
{/each}
</select>
</div>
<!-- <hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" /> -->
{#if defaultModelIds.length > 0} {#if defaultModelIds.length > 0}
<div class="flex flex-col"> <div class="flex flex-col">
{#each defaultModelIds as modelId, modelIdx} {#each defaultModelIds as modelId, modelIdx}
@ -170,44 +206,6 @@
{$i18n.t('No models selected')} {$i18n.t('No models selected')}
</div> </div>
{/if} {/if}
<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
<div class="flex items-center">
<select
class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId
? ''
: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none"
bind:value={selectedModelId}
>
<option value="">{$i18n.t('Select a model')}</option>
{#each $models as model}
<option value={model.id} class="bg-gray-50 dark:bg-gray-700"
>{model.name}</option
>
{/each}
</select>
<div>
<button
type="button"
on:click={() => {
if (selectedModelId === '') {
return;
}
if (defaultModelIds.includes(selectedModelId)) {
return;
}
defaultModelIds = [...defaultModelIds, selectedModelId];
selectedModelId = '';
}}
>
<Plus className="size-3.5" strokeWidth="2" />
</button>
</div>
</div>
</div> </div>
</div> </div>

View File

@ -37,6 +37,18 @@
}); });
$: onChange(accessControl); $: onChange(accessControl);
$: if (selectedGroupId) {
onSelectGroup();
}
const onSelectGroup = () => {
if (selectedGroupId !== '') {
accessControl.read.group_ids = [...accessControl.read.group_ids, selectedGroupId];
selectedGroupId = '';
}
};
</script> </script>
<div class=" rounded-lg flex flex-col gap-2"> <div class=" rounded-lg flex flex-col gap-2">
@ -126,7 +138,42 @@
</div> </div>
</div> </div>
<div class="flex flex-col gap-2"> <div class="mb-1">
<div class="flex w-full">
<div class="flex flex-1 items-center">
<div class="w-full px-0.5">
<select
class="outline-none bg-transparent text-sm rounded-lg block w-full pr-10 max-w-full
{selectedGroupId ? '' : 'text-gray-500'}
dark:placeholder-gray-500"
bind:value={selectedGroupId}
>
<option class=" text-gray-700" value="" disabled selected
>{$i18n.t('Select a group')}</option
>
{#each groups.filter((group) => !accessControl.read.group_ids.includes(group.id)) as group}
<option class=" text-gray-700" value={group.id}>{group.name}</option>
{/each}
</select>
</div>
<!-- <div>
<Tooltip content={$i18n.t('Add Group')}>
<button
class=" p-1 rounded-xl bg-transparent dark:hover:bg-white/5 hover:bg-black/5 transition font-medium text-sm flex items-center space-x-1"
type="button"
on:click={() => {}}
>
<Plus className="size-3.5" />
</button>
</Tooltip>
</div> -->
</div>
</div>
</div>
<hr class=" border-gray-100 dark:border-gray-700/10 mt-1.5 mb-2.5 w-full" />
<div class="flex flex-col gap-2 mb-1 px-0.5">
{#if accessGroups.length > 0} {#if accessGroups.length > 0}
{#each accessGroups as group} {#each accessGroups as group}
<div class="flex items-center gap-3 justify-between text-xs w-full transition"> <div class="flex items-center gap-3 justify-between text-xs w-full transition">
@ -140,9 +187,9 @@
</div> </div>
</div> </div>
<div class="w-full flex justify-end"> <div class="w-full flex justify-end items-center gap-0.5">
<button <button
class=" translate-y-0.5" class=""
type="button" type="button"
on:click={() => { on:click={() => {
if (accessControl.write.group_ids.includes(group.id)) { if (accessControl.write.group_ids.includes(group.id)) {
@ -188,48 +235,6 @@
{/if} {/if}
</div> </div>
</div> </div>
<hr class=" my-2 border-black/5 dark:border-white/5" />
<div class="mb-1">
<div class="flex w-full">
<div class="flex flex-1 items-center">
<div class="w-full">
<select
class="outline-none bg-transparent text-sm font-medium rounded-lg block w-full pr-10 max-w-full dark:placeholder-gray-700"
bind:value={selectedGroupId}
>
<option class=" text-gray-700" value="" disabled selected
>{$i18n.t('Select a group')}</option
>
{#each groups.filter((group) => !accessControl.read.group_ids.includes(group.id)) as group}
<option class=" text-gray-700" value={group.id}>{group.name}</option>
{/each}
</select>
</div>
<div>
<Tooltip content={$i18n.t('Add Group')}>
<button
class=" p-1 rounded-xl bg-transparent dark:hover:bg-white/5 hover:bg-black/5 transition font-medium text-sm flex items-center space-x-1"
type="button"
on:click={() => {
if (selectedGroupId !== '') {
accessControl.read.group_ids = [
...accessControl.read.group_ids,
selectedGroupId
];
selectedGroupId = '';
}
}}
>
<Plus className="size-3.5" />
</button>
</Tooltip>
</div>
</div>
</div>
</div>
</div> </div>
{/if} {/if}
</div> </div>