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

feat: light mode support

Browse source
This commit is contained in:
Timothy J. Baek 2023-11-05 15:01:55 -08:00
parent 983593d8f9
commit f0e1ec75d8
7 changed files with 177 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,7 @@
// General
let API_BASE_URL = BUILD_TIME_API_BASE_URL;
let system = '';
let theme = 'dark';
// Models
let modelTag = '';
@ -74,6 +75,19 @@
}
};
const toggleTheme = async () => {
if (theme === 'dark') {
theme = 'light';
} else {
theme = 'dark';
}
localStorage.theme = theme;
document.documentElement.classList.remove(theme === 'dark' ? 'light' : 'dark');
document.documentElement.classList.add(theme);
};
const pullModelHandler = async () => {
const res = await fetch(`${API_BASE_URL}/pull`, {
method: 'POST',
@ -182,6 +196,7 @@
let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
console.log(settings);
theme = localStorage.theme ?? 'dark';
API_BASE_URL = settings.API_BASE_URL ?? BUILD_TIME_API_BASE_URL;
system = settings.system ?? '';
@ -197,8 +212,8 @@
</script>
<Modal bind:show>
<div class="rounded-lg bg-gray-900">
<div class=" flex justify-between text-gray-300 px-5 py-4">
<div class="rounded-lg dark:bg-gray-900">
<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
<div class=" text-lg font-medium self-center">Settings</div>
<button
class="self-center"
@ -218,17 +233,17 @@
</svg>
</button>
</div>
<hr class=" border-gray-800" />
<hr class=" dark:border-gray-800" />
<div class="flex flex-col md:flex-row w-full p-4 md:space-x-4">
<div
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"
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 dark:text-gray-200 text-xs text-left mb-3 md:mb-0"
>
<button
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'}"
? 'bg-gray-200 dark:bg-gray-700'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
on:click={() => {
selectedTab = 'general';
}}
@ -253,8 +268,8 @@
<button
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'}"
? 'bg-gray-200 dark:bg-gray-700'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
on:click={() => {
selectedTab = 'advanced';
}}
@ -277,8 +292,8 @@
<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'}"
? 'bg-gray-200 dark:bg-gray-700'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
on:click={() => {
selectedTab = 'models';
}}
@ -303,8 +318,8 @@
<button
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'}"
? 'bg-gray-200 dark:bg-gray-700'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
on:click={() => {
selectedTab = 'addons';
}}
@ -327,18 +342,61 @@
<div class="flex-1 md:min-h-[300px]">
{#if selectedTab === 'general'}
<div class="flex flex-col space-y-3">
<div>
<div class=" py-1 flex w-full justify-between">
<div class=" self-center text-sm font-medium">Theme</div>
<button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
toggleTheme();
}}
>
{#if theme === 'dark'}
<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="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z"
clip-rule="evenodd"
/>
</svg>
<span class="ml-2 self-center"> Dark </span>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4 self-center"
>
<path
d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
/>
</svg>
<span class="ml-2 self-center"> Light </span>
{/if}
</button>
</div>
</div>
<hr class=" dark:border-gray-700" />
<div>
<div class=" mb-2.5 text-sm font-medium">Ollama Server URL</div>
<div class="flex w-full">
<div class="flex-1 mr-2">
<input
class="w-full rounded py-2 px-4 text-sm text-gray-300 bg-gray-800 outline-none"
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
placeholder="Enter URL (e.g. http://localhost:11434/api)"
bind:value={API_BASE_URL}
/>
</div>
<button
class="px-3 bg-gray-600 hover:bg-gray-700 rounded transition"
class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 rounded transition"
on:click={() => {
checkOllamaConnection();
}}
@ -358,9 +416,9 @@
</button>
</div>
<div class="mt-2 text-xs text-gray-500">
<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
Trouble accessing Ollama? <a
class=" text-gray-300 font-medium"
class=" text-gray-500 dark:text-gray-300 font-medium"
href="https://github.com/ollama-webui/ollama-webui#troubleshooting"
target="_blank"
>
@ -369,20 +427,20 @@
</div>
</div>
<hr class=" border-gray-700" />
<hr class=" dark:border-gray-700" />
<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 resize-none"
class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
rows="4"
/>
</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"
class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
on:click={() => {
saveSettings({
API_BASE_URL: API_BASE_URL === '' ? BUILD_TIME_API_BASE_URL : API_BASE_URL,
@ -402,13 +460,13 @@
<div class="flex w-full">
<div class="flex-1 mr-2">
<input
class="w-full rounded py-2 px-4 text-sm text-gray-300 bg-gray-800 outline-none"
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
placeholder="Enter model tag (e.g. mistral:7b)"
bind:value={modelTag}
/>
</div>
<button
class="px-3 bg-emerald-600 hover:bg-emerald-700 rounded transition"
class="px-3 text-gray-100 bg-emerald-600 hover:bg-emerald-700 rounded transition"
on:click={() => {
pullModelHandler();
}}
@ -429,9 +487,9 @@
</button>
</div>
<div class="mt-2 text-xs text-gray-500">
<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
To access the available model names for downloading, <a
class=" text-gray-300 font-medium"
class=" text-gray-500 dark:text-gray-300 font-medium"
href="https://ollama.ai/library"
target="_blank">click here.</a
>
@ -440,34 +498,34 @@
{#if pullProgress !== null}
<div class="mt-2">
<div class=" mb-2 text-xs">Pull Progress</div>
<div class="w-full rounded-full bg-gray-800">
<div class="w-full rounded-full dark:bg-gray-800">
<div
class="bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
style="width: {Math.max(15, pullProgress ?? 0)}%"
>
{pullProgress ?? 0}%
</div>
</div>
<div class="mt-1 text-xs text-gray-700" style="font-size: 0.5rem;">
<div class="mt-1 text-xs dark:text-gray-700" style="font-size: 0.5rem;">
{digest}
</div>
</div>
{/if}
</div>
<hr class=" border-gray-700" />
<hr class=" dark:border-gray-700" />
<div>
<div class=" mb-2.5 text-sm font-medium">Delete a model</div>
<div class="flex w-full">
<div class="flex-1 mr-2">
<input
class="w-full rounded py-2 px-4 text-sm text-gray-300 bg-gray-800 outline-none"
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
placeholder="Enter model tag (e.g. mistral:7b)"
bind:value={deleteModelTag}
/>
</div>
<button
class="px-3 bg-red-700 hover:bg-red-800 rounded transition"
class="px-3 bg-red-700 hover:bg-red-800 text-gray-100 rounded transition"
on:click={() => {
deleteModelHandler();
}}
@ -496,7 +554,7 @@
<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"
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
type="number"
placeholder="Enter Seed"
bind:value={seed}
@ -507,7 +565,7 @@
</div>
</div>
<hr class=" border-gray-700" />
<hr class=" dark:border-gray-700" />
<div>
<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
@ -523,7 +581,7 @@
max="1"
bind:value={temperature}
step="0.05"
class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-700"
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
/>
</div>
@ -541,7 +599,7 @@
max="2"
bind:value={repeat_penalty}
step="0.05"
class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-700"
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
/>
</div>
@ -559,7 +617,7 @@
max="100"
bind:value={top_k}
step="0.5"
class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-700"
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
/>
</div>
@ -577,14 +635,14 @@
max="1"
bind:value={top_p}
step="0.05"
class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-700"
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
/>
</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"
class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
on:click={() => {
saveSettings({
seed: (seed !== 0 ? seed : undefined) ?? undefined,
@ -620,7 +678,7 @@
<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"
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
placeholder="Enter Your Email"
bind:value={gravatarEmail}
autocomplete="off"
@ -628,16 +686,16 @@
/>
</div>
</div>
<div class="mt-2 text-xs text-gray-500">
<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
Changes user profile image to match your <a
class=" text-gray-300 font-medium"
class=" text-gray-500 dark:text-gray-300 font-medium"
href="https://gravatar.com/"
target="_blank">Gravatar.</a
>
</div>
</div>
<hr class=" border-gray-700" />
<hr class=" dark: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>
@ -645,14 +703,14 @@
<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"
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark: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">
<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
Adds optional support for 'gpt-*' models available.
</div>
</div>
@ -660,7 +718,7 @@
<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"
class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
type="submit"
>
Save

32
src/lib/components/chat/Suggestions.svelte
View file

@ -4,17 +4,19 @@
<div class=" grid sm:grid-cols-2 gap-2.5 mb-4 md:p-2 text-left">
<button
class=" flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
class=" flex justify-between w-full px-4 py-2.5 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
on:click={() => {
submitPrompt(`Tell me a random fun fact about the Roman Empire`);
}}
>
<div class="flex flex-col text-left">
<div class="text-sm font-medium text-gray-300">Tell me a fun fact</div>
<div class="text-sm font-medium dark:text-gray-300">Tell me a fun fact</div>
<div class="text-sm text-gray-500">about the Roman Empire</div>
</div>
<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
<div
class="self-center text-white group-hover:text-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4"
><path
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
@ -25,16 +27,18 @@
</button>
<button
class="flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
class="flex justify-between w-full px-4 py-2.5 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
on:click={() => {
submitPrompt(`Show me a code snippet of a website's sticky header in CSS and JavaScript.`);
}}
>
<div class="flex flex-col text-left">
<div class="text-sm font-medium text-gray-300">Show me a code snippet</div>
<div class="text-sm font-medium dark:text-gray-300">Show me a code snippet</div>
<div class="text-sm text-gray-500">of a website's sticky header</div>
</div>
<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
<div
class="self-center text-white group-hover:text-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4"
><path
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
@ -45,7 +49,7 @@
</button>
<button
class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
on:click={() => {
submitPrompt(
`Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.`
@ -53,10 +57,12 @@
}}
>
<div class="flex flex-col text-left">
<div class="text-sm font-medium text-gray-300">Help me study</div>
<div class="text-sm font-medium dark:text-gray-300">Help me study</div>
<div class="text-sm text-gray-500">vocabulary for a college entrance exam</div>
</div>
<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
<div
class="self-center text-white group-hover:text-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4"
><path
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
@ -67,7 +73,7 @@
</button>
<button
class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
on:click={() => {
submitPrompt(
`What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter.`
@ -75,10 +81,12 @@
}}
>
<div class="flex flex-col text-left">
<div class="text-sm font-medium text-gray-300">Give me ideas</div>
<div class="text-sm font-medium dark:text-gray-300">Give me ideas</div>
<div class="text-sm text-gray-500">for what to do with my kids' art</div>
</div>
<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
<div
class="self-center text-white group-hover:text-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4"
><path
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"

2
src/lib/components/common/Modal.svelte
View file

@ -28,7 +28,7 @@
}}
>
<div
class="m-auto min-h-52 max-w-full w-[36rem] mx-2 bg-gray-900 rounded-lg shadow-3xl"
class="m-auto min-h-52 max-w-full w-[36rem] mx-2 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-3xl"
transition:fade={{ delay: 100, duration: 200 }}
on:click={(e) => {
e.stopPropagation();

8
src/lib/components/layout/Navbar.svelte
View file

@ -45,14 +45,14 @@
</script>
<div
class=" fixed top-0 flex flex-row justify-center bg-stone-100/5 text-gray-200 backdrop-blur-xl w-full z-30"
class=" fixed top-0 flex flex-row justify-center dark:bg-stone-100/5 dark:text-gray-200 backdrop-blur-xl w-full z-30"
>
<div class="basis-full px-5">
<nav class="py-3" id="nav">
<div class="flex flex-row justify-between">
<div class="pl-2">
<button
class=" cursor-pointer p-1 flex hover:bg-gray-700 rounded-lg transition"
class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
on:click={() => {
show = !show;
}}
@ -75,12 +75,12 @@
</div>
<div class=" self-center">
{title != '' ? title.split(' ').slice(0, 7).join(' ') : 'Ollama Web UI'}
{title != '' ? title.split(' ').slice(0, 6).join(' ') : 'Ollama Web UI'}
</div>
<div class="pr-2">
<button
class=" cursor-pointer p-1 flex hover:bg-gray-700 rounded-lg transition"
class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
on:click={() => {
createNewChat();
}}