forked from open-webui/open-webui
settings added
This commit is contained in:
Timothy J. Baek
parent
dd7c4b84f6
commit
dba96eb9a9
4 changed files with 145 additions and 87 deletions
|
|
@ -1,19 +1,80 @@
|
||||||
<script>
|
<script lang="ts">
|
||||||
|
import { onMount } from 'svelte';
|
||||||
import Modal from '../common/Modal.svelte';
|
import Modal from '../common/Modal.svelte';
|
||||||
export let show = false;
|
export let show = false;
|
||||||
|
export let saveSettings: Function;
|
||||||
|
let system = '';
|
||||||
|
let temperature = 0.8;
|
||||||
|
|
||||||
|
$: if (show) {
|
||||||
|
let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
|
||||||
|
system = settings.system ?? '';
|
||||||
|
temperature = settings.temperature ?? 0.8;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Modal bind:show>
|
<Modal bind:show>
|
||||||
<div class="mt-3 p-3 rounded-lg bg-gray-900">
|
<div class="rounded-lg bg-gray-900">
|
||||||
<label for="models" class="block mb-2 text-sm font-medium text-gray-200">Select a model</label>
|
<div class=" flex justify-between text-gray-300 px-5 py-4">
|
||||||
<select
|
<div class=" text-lg font-medium self-center">Settings</div>
|
||||||
id="models"
|
<button
|
||||||
class="border border-gray-600 bg-gray-700 text-gray-200 text-sm rounded-lg block w-full p-2.5 placeholder-gray-400"
|
class="self-center"
|
||||||
>
|
on:click={() => {
|
||||||
<option value="US">United States</option>
|
show = false;
|
||||||
<option value="CA">Canada</option>
|
}}
|
||||||
<option value="FR">France</option>
|
>
|
||||||
<option value="DE">Germany</option>
|
<svg
|
||||||
</select>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-5 h-5"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<hr class=" border-gray-800" />
|
||||||
|
|
||||||
|
<div class="p-5 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>
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="m-auto min-h-52 max-w-full w-[30rem] bg-stone-800 rounded-lg p-5 mx-3 shadow-3xl"
|
class="m-auto min-h-52 max-w-full w-[36rem] mx-2 bg-gray-900 rounded-lg shadow-3xl"
|
||||||
transition:fade={{ delay: 100, duration: 200 }}
|
transition:fade={{ delay: 100, duration: 200 }}
|
||||||
on:click={(e) => {
|
on:click={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@
|
||||||
export let importChatHistory: Function;
|
export let importChatHistory: Function;
|
||||||
export let exportChatHistory: Function;
|
export let exportChatHistory: Function;
|
||||||
export let deleteChatHistory: Function;
|
export let deleteChatHistory: Function;
|
||||||
|
export let openSettings: Function;
|
||||||
|
|
||||||
onMount(() => {});
|
onMount(() => {});
|
||||||
|
|
||||||
|
|
@ -259,7 +260,12 @@
|
||||||
</div>
|
</div>
|
||||||
<div class=" self-center">Clear conversations</div>
|
<div class=" self-center">Clear conversations</div>
|
||||||
</button>
|
</button>
|
||||||
<!-- <button class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition" disabled>
|
<button
|
||||||
|
class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
|
||||||
|
on:click={() => {
|
||||||
|
openSettings();
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div class=" self-center mr-3">
|
<div class=" self-center mr-3">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
|
@ -282,78 +288,8 @@
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class=" self-center font-medium">Settings</div>
|
<div class=" self-center font-medium">Settings</div>
|
||||||
</button> -->
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div
|
|
||||||
class="h-screen fixed top-0 left-0 z-30 text-sm
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="pl-2 pt-2">
|
|
||||||
<button
|
|
||||||
class=" cursor-pointer p-3 flex hover:bg-gray-700 rounded-lg transition"
|
|
||||||
on:click={() => {
|
|
||||||
show = !show;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class=" m-auto self-center">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
class="w-5 h-5"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!--
|
|
||||||
|
|
||||||
<div class="h-screen fixed top-0 right-0 z-30 text-sm">
|
|
||||||
<div class="pr-2 pt-2">
|
|
||||||
<button
|
|
||||||
class=" cursor-pointer p-3 flex hover:bg-gray-700 rounded-lg transition"
|
|
||||||
on:click={() => {
|
|
||||||
chatHistory = {};
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class=" m-auto self-center">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
class="w-5 h-5"
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
class="w-5 h-5"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,10 @@
|
||||||
|
|
||||||
import { v4 as uuidv4 } from 'uuid';
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
import { marked } from 'marked';
|
import { marked } from 'marked';
|
||||||
import { saveAs } from 'file-saver';
|
|
||||||
|
import fileSaver from 'file-saver';
|
||||||
|
const { saveAs } = fileSaver;
|
||||||
|
|
||||||
import hljs from 'highlight.js';
|
import hljs from 'highlight.js';
|
||||||
import 'highlight.js/styles/dark.min.css';
|
import 'highlight.js/styles/dark.min.css';
|
||||||
|
|
||||||
|
|
@ -13,12 +16,14 @@
|
||||||
|
|
||||||
import { openDB, deleteDB } from 'idb';
|
import { openDB, deleteDB } from 'idb';
|
||||||
import { ENDPOINT as SERVER_ENDPOINT } from '$lib/contants';
|
import { ENDPOINT as SERVER_ENDPOINT } from '$lib/contants';
|
||||||
|
import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
|
||||||
|
|
||||||
export let data: PageData;
|
export let data: PageData;
|
||||||
$: ({ models, OLLAMA_ENDPOINT } = data);
|
$: ({ models, OLLAMA_ENDPOINT } = data);
|
||||||
|
|
||||||
let ENDPOINT;
|
let ENDPOINT;
|
||||||
let textareaElement;
|
let textareaElement;
|
||||||
|
let showSettings = false;
|
||||||
let db;
|
let db;
|
||||||
|
|
||||||
let selectedModel = '';
|
let selectedModel = '';
|
||||||
|
|
@ -133,6 +138,23 @@
|
||||||
toast.success('Default model updated');
|
toast.success('Default model updated');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const saveSettings = (_system, _temperature) => {
|
||||||
|
system = _system;
|
||||||
|
temperature = _temperature;
|
||||||
|
|
||||||
|
let settings = localStorage.getItem('settings') ?? '{}';
|
||||||
|
if (settings) {
|
||||||
|
settings = JSON.parse(settings);
|
||||||
|
settings.system = system;
|
||||||
|
settings.temperature = temperature;
|
||||||
|
localStorage.setItem('settings', JSON.stringify(settings));
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(settings);
|
||||||
|
|
||||||
|
console.log('saved');
|
||||||
|
};
|
||||||
|
|
||||||
const createNewChat = () => {
|
const createNewChat = () => {
|
||||||
if (messages.length > 0) {
|
if (messages.length > 0) {
|
||||||
chatId = uuidv4();
|
chatId = uuidv4();
|
||||||
|
|
@ -194,6 +216,10 @@
|
||||||
saveAs(blob, `chat-export-${Date.now()}.json`);
|
saveAs(blob, `chat-export-${Date.now()}.json`);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const openSettings = async () => {
|
||||||
|
showSettings = true;
|
||||||
|
};
|
||||||
|
|
||||||
//////////////////////////
|
//////////////////////////
|
||||||
// Ollama functions
|
// Ollama functions
|
||||||
//////////////////////////
|
//////////////////////////
|
||||||
|
|
@ -455,14 +481,49 @@
|
||||||
{importChatHistory}
|
{importChatHistory}
|
||||||
{exportChatHistory}
|
{exportChatHistory}
|
||||||
{deleteChatHistory}
|
{deleteChatHistory}
|
||||||
|
{openSettings}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<SettingsModal bind:show={showSettings} {saveSettings} />
|
||||||
|
|
||||||
<div class="min-h-screen w-full flex justify-center">
|
<div class="min-h-screen w-full flex justify-center">
|
||||||
<div class=" py-2.5 flex flex-col justify-between w-full">
|
<div class=" py-2.5 flex flex-col justify-between w-full">
|
||||||
<div class="max-w-2xl mx-auto w-full px-2.5 mt-14">
|
<div class="max-w-2xl mx-auto w-full px-2.5 mt-14">
|
||||||
<div class="p-3 rounded-lg bg-gray-900">
|
<div class="p-3 rounded-lg bg-gray-900">
|
||||||
<div>
|
<div>
|
||||||
<label for="models" class="block mb-2 text-sm font-medium text-gray-200">Model</label>
|
<label
|
||||||
|
for="models"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-200 flex justify-between"
|
||||||
|
>
|
||||||
|
<div class="self-center">Model</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class=" self-center hover:text-gray-300"
|
||||||
|
on:click={() => {
|
||||||
|
openSettings();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="w-4 h-4"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</label>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<select
|
<select
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue