tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

Merge pull request #63 from ollama-webui/dev

Browse source 
feat: settings updated & gravatar support
This commit is contained in:
Timothy Jaeryang Baek 2023-11-05 16:26:59 -05:00 committed by GitHub
commit 811996beba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 146 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
package-lock.json generated
View file

@ -13,6 +13,7 @@
"highlight.js": "^11.9.0",
"http-server": "^14.1.1",
"idb": "^7.1.1",
"js-sha256": "^0.10.1",
"katex": "^0.16.9",
"marked": "^9.1.0",
"svelte-french-toast": "^1.2.0",
@ -2527,6 +2528,11 @@
"jiti": "bin/jiti.js"
}
},
"node_modules/js-sha256": {
"version": "0.10.1",
"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.10.1.tgz",
"integrity": "sha512-5obBtsz9301ULlsgggLg542s/jqtddfOpV5KJc4hajc9JV8GeY2gZHSVpYBn4nWqAUTJ9v+xwtbJ1mIBgIH5Vw=="
},
"node_modules/js-yaml": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@ -5910,6 +5916,11 @@
"integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==",
"dev": true
},
"js-sha256": {
"version": "0.10.1",
"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.10.1.tgz",
"integrity": "sha512-5obBtsz9301ULlsgggLg542s/jqtddfOpV5KJc4hajc9JV8GeY2gZHSVpYBn4nWqAUTJ9v+xwtbJ1mIBgIH5Vw=="
},
"js-yaml": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",

1
package.json
View file

@ -44,6 +44,7 @@
"highlight.js": "^11.9.0",
"http-server": "^14.1.1",
"idb": "^7.1.1",
"js-sha256": "^0.10.1",
"katex": "^0.16.9",
"marked": "^9.1.0",
"svelte-french-toast": "^1.2.0",

159
src/lib/components/chat/SettingsModal.svelte
View file

@ -1,4 +1,5 @@
<script lang="ts">
import sha256 from 'js-sha256';
import Modal from '../common/Modal.svelte';
import { API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants';
@ -12,7 +13,6 @@
// General
let API_BASE_URL = BUILD_TIME_API_BASE_URL;
let OPENAI_API_KEY = '';
let system = '';
// Models
@ -28,6 +28,23 @@
let top_k = 40;
let top_p = 0.9;
// Addons
let gravatarEmail = '';
let OPENAI_API_KEY = '';
function getGravatarURL(email) {
// Trim leading and trailing whitespace from
// an email address and force all characters
// to lower case
const address = String(email).trim().toLowerCase();
// Create a SHA256 hash of the final string
const hash = sha256(address);
// Grab the actual image URL
return `https://www.gravatar.com/avatar/${hash}`;
}
const splitStream = (splitOn) => {
let buffer = '';
return new TransformStream({
@ -166,7 +183,6 @@
console.log(settings);
API_BASE_URL = settings.API_BASE_URL ?? BUILD_TIME_API_BASE_URL;
OPENAI_API_KEY = settings.OPENAI_API_KEY ?? '';
system = settings.system ?? '';
seed = settings.seed ?? 0;
@ -174,6 +190,9 @@
repeat_penalty = settings.repeat_penalty ?? 1.1;
top_k = settings.top_k ?? 40;
top_p = settings.top_p ?? 0.9;
OPENAI_API_KEY = settings.OPENAI_API_KEY ?? '';
gravatarEmail = settings.gravatarEmail ?? '';
}
</script>
@ -203,10 +222,10 @@
<div class="flex flex-col md:flex-row w-full p-4 md:space-x-4">
<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-40 text-gray-200 text-xs text-left mb-3 md:mb-0"
class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 text-gray-200 text-xs text-left mb-3 md:mb-0"
>
<button
class="px-2.5 py-2.5 rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'general'
? 'bg-gray-700'
: 'hover:bg-gray-800'}"
@ -232,7 +251,31 @@
</button>
<button
class="px-2.5 py-2.5 rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'advanced'
? 'bg-gray-700'
: 'hover:bg-gray-800'}"
on:click={() => {
selectedTab = 'advanced';
}}
>
<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
d="M17 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM17 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM3.75 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zM4.5 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM10 11a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 11zM10.75 2.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM10 6a2 2 0 100 4 2 2 0 000-4zM3.75 10a2 2 0 100 4 2 2 0 000-4zM16.25 10a2 2 0 100 4 2 2 0 000-4z"
/>
</svg>
</div>
<div class=" self-center">Advanced</div>
</button>
<button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'models'
? 'bg-gray-700'
: 'hover:bg-gray-800'}"
@ -258,12 +301,12 @@
</button>
<button
class="px-2.5 py-2.5 rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'advanced'
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'addons'
? 'bg-gray-700'
: 'hover:bg-gray-800'}"
on:click={() => {
selectedTab = 'advanced';
selectedTab = 'addons';
}}
>
<div class=" self-center mr-2">
@ -278,7 +321,7 @@
/>
</svg>
</div>
<div class=" self-center">Advanced</div>
<div class=" self-center">Add-ons</div>
</button>
</div>
<div class="flex-1 md:min-h-[300px]">
@ -328,27 +371,6 @@
<hr class=" border-gray-700" />
<div>
<div class=" mb-2.5 text-sm font-medium">
OpenAI API Key <span class=" text-gray-400 text-sm">(optional)</span>
</div>
<div class="flex w-full">
<div class="flex-1">
<input
class="w-full rounded py-2 px-4 text-sm text-gray-300 bg-gray-800 outline-none"
placeholder="Enter OpenAI API Key"
bind:value={OPENAI_API_KEY}
autocomplete="off"
/>
</div>
</div>
<div class="mt-2 text-xs text-gray-500">
Adds optional support for 'gpt-*' models available.
</div>
</div>
<hr class=" border-gray-700" />
<div>
<div class=" mb-2.5 text-sm font-medium">System Prompt</div>
<textarea
@ -364,7 +386,6 @@
on:click={() => {
saveSettings({
API_BASE_URL: API_BASE_URL === '' ? BUILD_TIME_API_BASE_URL : API_BASE_URL,
OPENAI_API_KEY: OPENAI_API_KEY !== '' ? OPENAI_API_KEY : undefined,
system: system !== '' ? system : undefined
});
show = false;
@ -579,6 +600,73 @@
</button>
</div>
</div>
{:else if selectedTab === 'addons'}
<form
class="flex flex-col h-full justify-between space-y-3 text-sm"
on:submit|preventDefault={() => {
saveSettings({
gravatarEmail: gravatarEmail !== '' ? gravatarEmail : undefined,
gravatarUrl: gravatarEmail !== '' ? getGravatarURL(gravatarEmail) : undefined,
OPENAI_API_KEY: OPENAI_API_KEY !== '' ? OPENAI_API_KEY : undefined
});
show = false;
}}
>
<div class=" space-y-3">
<div>
<div class=" mb-2.5 text-sm font-medium">
Gravatar Email <span class=" text-gray-400 text-sm">(optional)</span>
</div>
<div class="flex w-full">
<div class="flex-1">
<input
class="w-full rounded py-2 px-4 text-sm text-gray-300 bg-gray-800 outline-none"
placeholder="Enter Your Email"
bind:value={gravatarEmail}
autocomplete="off"
type="email"
/>
</div>
</div>
<div class="mt-2 text-xs text-gray-500">
Changes user profile image to match your <a
class=" text-gray-300 font-medium"
href="https://gravatar.com/"
target="_blank">Gravatar.</a
>
</div>
</div>
<hr class=" border-gray-700" />
<div>
<div class=" mb-2.5 text-sm font-medium">
OpenAI API Key <span class=" text-gray-400 text-sm">(optional)</span>
</div>
<div class="flex w-full">
<div class="flex-1">
<input
class="w-full rounded py-2 px-4 text-sm text-gray-300 bg-gray-800 outline-none"
placeholder="Enter OpenAI API Key"
bind:value={OPENAI_API_KEY}
autocomplete="off"
/>
</div>
</div>
<div class="mt-2 text-xs text-gray-500">
Adds optional support for 'gpt-*' models available.
</div>
</div>
</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"
type="submit"
>
Save
</button>
</div>
</form>
{/if}
</div>
</div>
@ -593,6 +681,15 @@
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.tabs::-webkit-scrollbar {
display: none; /* for Chrome, Safari and Opera */
}
.tabs {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
input[type='number'] {
-moz-appearance: textfield; /* Firefox */
}

8
src/routes/+page.svelte
View file

@ -871,7 +871,11 @@
<div class="space-x-7 flex w-full">
<div class="">
<img
src="/{message.role == 'user' ? 'user' : 'favicon'}.png"
src="{message.role == 'user'
? settings.gravatarUrl
? settings.gravatarUrl
: '/user'
: '/favicon'}.png"
class=" max-w-[32px] object-cover rounded"
/>
</div>
@ -1124,8 +1128,8 @@
e.preventDefault();
}
if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) {
submitPrompt(prompt);
e.target.style.height = '';
submitPrompt(prompt);
}
}}
rows="1"