forked from open-webui/open-webui
Update SettingsModal.svelte
This commit is contained in:
Timothy J. Baek
parent
4a32b00000
commit
e1361e68ec
1 changed files with 104 additions and 32 deletions
|
|
@ -6,6 +6,8 @@
|
||||||
let system = '';
|
let system = '';
|
||||||
let temperature = 0.8;
|
let temperature = 0.8;
|
||||||
|
|
||||||
|
let selectedMenu = 'general';
|
||||||
|
|
||||||
$: if (show) {
|
$: if (show) {
|
||||||
let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
|
let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
|
||||||
system = settings.system ?? '';
|
system = settings.system ?? '';
|
||||||
|
|
@ -37,43 +39,113 @@
|
||||||
</div>
|
</div>
|
||||||
<hr class=" border-gray-800" />
|
<hr class=" border-gray-800" />
|
||||||
|
|
||||||
<div class="p-5 flex flex-col space-y-3">
|
<div class="flex flex-col md:flex-row w-full p-4 md:space-x-4">
|
||||||
<div>
|
<div
|
||||||
<div class=" mb-2.5 text-sm font-medium">System Prompt</div>
|
class="flex flex-row space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-36 text-gray-200 text-xs text-left mb-3 md:mb-0"
|
||||||
<textarea
|
>
|
||||||
bind:value={system}
|
|
||||||
class="w-full rounded p-4 text-sm text-gray-300 bg-gray-800 outline-none"
|
|
||||||
rows="4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
|
|
||||||
<div>Temperature</div>
|
|
||||||
<div>
|
|
||||||
{temperature}
|
|
||||||
</div></label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="steps-range"
|
|
||||||
type="range"
|
|
||||||
min="0"
|
|
||||||
max="1"
|
|
||||||
bind:value={temperature}
|
|
||||||
step="0.05"
|
|
||||||
class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-700"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-end pt-3 text-sm font-medium">
|
|
||||||
<button
|
<button
|
||||||
class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 transition rounded"
|
class="px-2 py-2 rounded flex-1 md:flex-none flex text-right transition {selectedMenu ===
|
||||||
|
'general'
|
||||||
|
? 'bg-gray-700'
|
||||||
|
: 'hover:bg-gray-800'}"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
saveSettings(system != '' ? system : null, temperature != 0.8 ? temperature : null);
|
selectedMenu = 'general';
|
||||||
show = false;
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Save
|
<div class=" self-center mr-2">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-4 h-4"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 011.262.125l.962.962a1 1 0 01.125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 01.804.98v1.361a1 1 0 01-.804.98l-1.473.295a6.95 6.95 0 01-.587 1.416l.834 1.25a1 1 0 01-.125 1.262l-.962.962a1 1 0 01-1.262.125l-1.25-.834a6.953 6.953 0 01-1.416.587l-.294 1.473a1 1 0 01-.98.804H9.32a1 1 0 01-.98-.804l-.295-1.473a6.957 6.957 0 01-1.416-.587l-1.25.834a1 1 0 01-1.262-.125l-.962-.962a1 1 0 01-.125-1.262l.834-1.25a6.957 6.957 0 01-.587-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 01.125-1.262l.962-.962A1 1 0 015.38 3.03l1.25.834a6.957 6.957 0 011.416-.587l.294-1.473zM13 10a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class=" self-center">General</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="px-2 py-2 rounded flex-1 md:flex-none flex text-right transition {selectedMenu ===
|
||||||
|
'models'
|
||||||
|
? 'bg-gray-700'
|
||||||
|
: 'hover:bg-gray-800'}"
|
||||||
|
on:click={() => {
|
||||||
|
selectedMenu = 'models';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div class=" self-center mr-2">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-4 h-4"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 1c3.866 0 7 1.79 7 4s-3.134 4-7 4-7-1.79-7-4 3.134-4 7-4zm5.694 8.13c.464-.264.91-.583 1.306-.952V10c0 2.21-3.134 4-7 4s-7-1.79-7-4V8.178c.396.37.842.688 1.306.953C5.838 10.006 7.854 10.5 10 10.5s4.162-.494 5.694-1.37zM3 13.179V15c0 2.21 3.134 4 7 4s7-1.79 7-4v-1.822c-.396.37-.842.688-1.306.953-1.532.875-3.548 1.369-5.694 1.369s-4.162-.494-5.694-1.37A7.009 7.009 0 013 13.179z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class=" self-center">Models</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 md:min-h-[280px]">
|
||||||
|
{#if selectedMenu === 'general'}
|
||||||
|
<div class="flex flex-col space-y-3">
|
||||||
|
<div>
|
||||||
|
<div class=" mb-2.5 text-sm font-medium">System Prompt</div>
|
||||||
|
<textarea
|
||||||
|
bind:value={system}
|
||||||
|
class="w-full rounded p-4 text-sm text-gray-300 bg-gray-800 outline-none"
|
||||||
|
rows="4"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
|
||||||
|
<div>Temperature</div>
|
||||||
|
<div>
|
||||||
|
{temperature}
|
||||||
|
</div></label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="steps-range"
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="1"
|
||||||
|
bind:value={temperature}
|
||||||
|
step="0.05"
|
||||||
|
class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-700"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end pt-3 text-sm font-medium">
|
||||||
|
<button
|
||||||
|
class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 transition rounded"
|
||||||
|
on:click={() => {
|
||||||
|
saveSettings(
|
||||||
|
system != '' ? system : null,
|
||||||
|
temperature != 0.8 ? temperature : null
|
||||||
|
);
|
||||||
|
show = false;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else if selectedMenu === 'models'}
|
||||||
|
<div class="text-sm">
|
||||||
|
<div>
|
||||||
|
<div>Pull a model</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue