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

Merge pull request #64 from ollama-webui/dev

Browse source 
feat: light mode support
This commit is contained in:
Timothy Jaeryang Baek 2023-11-05 18:13:07 -05:00 • committed by GitHub
commit 3481a3793b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 177 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/app.html
View file

@ -4,6 +4,18 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (
localStorage.theme === 'light' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
) {
document.documentElement.classList.add('light');
} else {
document.documentElement.classList.add('dark');
}
</script>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

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

@ -14,6 +14,7 @@
// General // General
let API_BASE_URL = BUILD_TIME_API_BASE_URL; let API_BASE_URL = BUILD_TIME_API_BASE_URL;
let system = ''; let system = '';
let theme = 'dark';
// Models // Models
let modelTag = ''; 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 pullModelHandler = async () => {
const res = await fetch(`${API_BASE_URL}/pull`, { const res = await fetch(`${API_BASE_URL}/pull`, {
method: 'POST', method: 'POST',
@ -182,6 +196,7 @@
let settings = JSON.parse(localStorage.getItem('settings') ?? '{}'); let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
console.log(settings); console.log(settings);
theme = localStorage.theme ?? 'dark';
API_BASE_URL = settings.API_BASE_URL ?? BUILD_TIME_API_BASE_URL; API_BASE_URL = settings.API_BASE_URL ?? BUILD_TIME_API_BASE_URL;
system = settings.system ?? ''; system = settings.system ?? '';
@ -197,8 +212,8 @@
</script> </script>
<Modal bind:show> <Modal bind:show>
<div class="rounded-lg bg-gray-900"> <div class="rounded-lg dark:bg-gray-900">
<div class=" flex justify-between text-gray-300 px-5 py-4"> <div class=" flex justify-between dark:text-gray-300 px-5 py-4">
<div class=" text-lg font-medium self-center">Settings</div> <div class=" text-lg font-medium self-center">Settings</div>
<button <button
class="self-center" class="self-center"
@ -218,17 +233,17 @@
</svg> </svg>
</button> </button>
</div> </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="flex flex-col md:flex-row w-full p-4 md:space-x-4">
<div <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 <button
class="px-2.5 py-2.5 min-w-fit 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' 'general'
? 'bg-gray-700' ? 'bg-gray-200 dark:bg-gray-700'
: 'hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
on:click={() => { on:click={() => {
selectedTab = 'general'; selectedTab = 'general';
}} }}
@ -253,8 +268,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit 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' 'advanced'
? 'bg-gray-700' ? 'bg-gray-200 dark:bg-gray-700'
: 'hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
on:click={() => { on:click={() => {
selectedTab = 'advanced'; selectedTab = 'advanced';
}} }}
@ -277,8 +292,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit 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 ===
'models' 'models'
? 'bg-gray-700' ? 'bg-gray-200 dark:bg-gray-700'
: 'hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
on:click={() => { on:click={() => {
selectedTab = 'models'; selectedTab = 'models';
}} }}
@ -303,8 +318,8 @@
<button <button
class="px-2.5 py-2.5 min-w-fit 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 ===
'addons' 'addons'
? 'bg-gray-700' ? 'bg-gray-200 dark:bg-gray-700'
: 'hover:bg-gray-800'}" : ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
on:click={() => { on:click={() => {
selectedTab = 'addons'; selectedTab = 'addons';
}} }}
@ -327,18 +342,61 @@
<div class="flex-1 md:min-h-[300px]"> <div class="flex-1 md:min-h-[300px]">
{#if selectedTab === 'general'} {#if selectedTab === 'general'}
<div class="flex flex-col space-y-3"> <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>
<div class=" mb-2.5 text-sm font-medium">Ollama Server URL</div> <div class=" mb-2.5 text-sm font-medium">Ollama Server URL</div>
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <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)" placeholder="Enter URL (e.g. http://localhost:11434/api)"
bind:value={API_BASE_URL} bind:value={API_BASE_URL}
/> />
</div> </div>
<button <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={() => { on:click={() => {
checkOllamaConnection(); checkOllamaConnection();
}} }}
@ -358,9 +416,9 @@
</button> </button>
</div> </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 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" href="https://github.com/ollama-webui/ollama-webui#troubleshooting"
target="_blank" target="_blank"
> >
@ -369,20 +427,20 @@
</div> </div>
</div> </div>
<hr class=" border-gray-700" /> <hr class=" dark:border-gray-700" />
<div> <div>
<div class=" mb-2.5 text-sm font-medium">System Prompt</div> <div class=" mb-2.5 text-sm font-medium">System Prompt</div>
<textarea <textarea
bind:value={system} 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" rows="4"
/> />
</div> </div>
<div class="flex justify-end pt-3 text-sm font-medium"> <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-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
on:click={() => { on:click={() => {
saveSettings({ saveSettings({
API_BASE_URL: API_BASE_URL === '' ? BUILD_TIME_API_BASE_URL : API_BASE_URL, 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 w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <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)" placeholder="Enter model tag (e.g. mistral:7b)"
bind:value={modelTag} bind:value={modelTag}
/> />
</div> </div>
<button <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={() => { on:click={() => {
pullModelHandler(); pullModelHandler();
}} }}
@ -429,9 +487,9 @@
</button> </button>
</div> </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 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" href="https://ollama.ai/library"
target="_blank">click here.</a target="_blank">click here.</a
> >
@ -440,34 +498,34 @@
{#if pullProgress !== null} {#if pullProgress !== null}
<div class="mt-2"> <div class="mt-2">
<div class=" mb-2 text-xs">Pull Progress</div> <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 <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)}%" style="width: {Math.max(15, pullProgress ?? 0)}%"
> >
{pullProgress ?? 0}% {pullProgress ?? 0}%
</div> </div>
</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} {digest}
</div> </div>
</div> </div>
{/if} {/if}
</div> </div>
<hr class=" border-gray-700" /> <hr class=" dark:border-gray-700" />
<div> <div>
<div class=" mb-2.5 text-sm font-medium">Delete a model</div> <div class=" mb-2.5 text-sm font-medium">Delete a model</div>
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <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)" placeholder="Enter model tag (e.g. mistral:7b)"
bind:value={deleteModelTag} bind:value={deleteModelTag}
/> />
</div> </div>
<button <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={() => { on:click={() => {
deleteModelHandler(); deleteModelHandler();
}} }}
@ -496,7 +554,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <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" type="number"
placeholder="Enter Seed" placeholder="Enter Seed"
bind:value={seed} bind:value={seed}
@ -507,7 +565,7 @@
</div> </div>
</div> </div>
<hr class=" border-gray-700" /> <hr class=" dark:border-gray-700" />
<div> <div>
<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between"> <label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
@ -523,7 +581,7 @@
max="1" max="1"
bind:value={temperature} bind:value={temperature}
step="0.05" 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>
@ -541,7 +599,7 @@
max="2" max="2"
bind:value={repeat_penalty} bind:value={repeat_penalty}
step="0.05" 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>
@ -559,7 +617,7 @@
max="100" max="100"
bind:value={top_k} bind:value={top_k}
step="0.5" 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> </div>
@ -577,14 +635,14 @@
max="1" max="1"
bind:value={top_p} bind:value={top_p}
step="0.05" 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> </div>
<div class="flex justify-end pt-3 text-sm font-medium"> <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-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
on:click={() => { on:click={() => {
saveSettings({ saveSettings({
seed: (seed !== 0 ? seed : undefined) ?? undefined, seed: (seed !== 0 ? seed : undefined) ?? undefined,
@ -620,7 +678,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <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" placeholder="Enter Your Email"
bind:value={gravatarEmail} bind:value={gravatarEmail}
autocomplete="off" autocomplete="off"
@ -628,16 +686,16 @@
/> />
</div> </div>
</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 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/" href="https://gravatar.com/"
target="_blank">Gravatar.</a target="_blank">Gravatar.</a
> >
</div> </div>
</div> </div>
<hr class=" border-gray-700" /> <hr class=" dark:border-gray-700" />
<div> <div>
<div class=" mb-2.5 text-sm font-medium"> <div class=" mb-2.5 text-sm font-medium">
OpenAI API Key <span class=" text-gray-400 text-sm">(optional)</span> OpenAI API Key <span class=" text-gray-400 text-sm">(optional)</span>
@ -645,14 +703,14 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <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" placeholder="Enter OpenAI API Key"
bind:value={OPENAI_API_KEY} bind:value={OPENAI_API_KEY}
autocomplete="off" autocomplete="off"
/> />
</div> </div>
</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. Adds optional support for 'gpt-*' models available.
</div> </div>
</div> </div>
@ -660,7 +718,7 @@
<div class="flex justify-end pt-3 text-sm font-medium"> <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-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
type="submit" type="submit"
> >
Save 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"> <div class=" grid sm:grid-cols-2 gap-2.5 mb-4 md:p-2 text-left">
<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={() => { on:click={() => {
submitPrompt(`Tell me a random fun fact about the Roman Empire`); submitPrompt(`Tell me a random fun fact about the Roman Empire`);
}} }}
> >
<div class="flex flex-col text-left"> <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 class="text-sm text-gray-500">about the Roman Empire</div>
</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" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4"
><path ><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" 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>
<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={() => { on:click={() => {
submitPrompt(`Show me a code snippet of a website's sticky header in CSS and JavaScript.`); 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="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 class="text-sm text-gray-500">of a website's sticky header</div>
</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" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4"
><path ><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" 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>
<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={() => { on:click={() => {
submitPrompt( submitPrompt(
`Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.` `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="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 class="text-sm text-gray-500">vocabulary for a college entrance exam</div>
</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" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4"
><path ><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" 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>
<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={() => { on:click={() => {
submitPrompt( 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.` `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="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 class="text-sm text-gray-500">for what to do with my kids' art</div>
</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" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4"
><path ><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" 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 <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 }} transition:fade={{ delay: 100, duration: 200 }}
on:click={(e) => { on:click={(e) => {
e.stopPropagation(); e.stopPropagation();

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

@ -45,14 +45,14 @@
</script> </script>
<div <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"> <div class="basis-full px-5">
<nav class="py-3" id="nav"> <nav class="py-3" id="nav">
<div class="flex flex-row justify-between"> <div class="flex flex-row justify-between">
<div class="pl-2"> <div class="pl-2">
<button <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={() => { on:click={() => {
show = !show; show = !show;
}} }}
@ -75,12 +75,12 @@
</div> </div>
<div class=" self-center"> <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>
<div class="pr-2"> <div class="pr-2">
<button <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={() => { on:click={() => {
createNewChat(); createNewChat();
}} }}

72
src/routes/+page.svelte
View file

@ -768,8 +768,10 @@
}} }}
/> />
<div class="app text-gray-100"> <div class="app">
<div class=" bg-gray-800 min-h-screen overflow-auto flex flex-row"> <div
class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 min-h-screen overflow-auto flex flex-row"
>
<Navbar <Navbar
selectedChatId={chatId} selectedChatId={chatId}
{chats} {chats}
@ -789,16 +791,16 @@
<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-100 dark:bg-gray-900">
<div> <div>
<label <label
for="models" for="models"
class="block mb-2 text-sm font-medium text-gray-200 flex justify-between" class="block mb-2 text-sm font-medium dark:text-gray-200 flex justify-between"
> >
<div class="self-center">Model</div> <div class="self-center">Model</div>
<button <button
class=" self-center hover:text-gray-300" class=" self-center dark:hover:text-gray-300"
on:click={() => { on:click={() => {
openSettings(); openSettings();
}} }}
@ -828,7 +830,7 @@
<div> <div>
<select <select
id="models" id="models"
class="outline-none border border-gray-600 bg-gray-700 text-gray-200 text-sm rounded-lg block w-full p-2.5 placeholder-gray-400" class="outline-none border dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 text-sm rounded-lg block w-full p-2.5 placeholder-gray-400"
bind:value={selectedModel} bind:value={selectedModel}
disabled={messages.length != 0} disabled={messages.length != 0}
> >
@ -856,17 +858,17 @@
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
<img src="/ollama.png" class="w-16 invert-[80%]" /> <img src="/ollama.png" class="w-16 invert-[80%]" />
</div> </div>
<div class="mt-6 text-3xl text-gray-500 font-semibold"> <div class="mt-6 text-3xl text-gray-400 dark:text-gray-500 font-semibold">
Get up and running with large language models, locally. Get up and running with large language models, locally.
</div> </div>
<div class=" my-4 text-gray-600"> <div class=" my-4 text-gray-300 dark:text-gray-600">
Run Llama 2, Code Llama, and other models. <br /> Customize and create your own. Run Llama 2, Code Llama, and other models. <br /> Customize and create your own.
</div> </div>
</div> </div>
{:else} {:else}
{#each messages as message, messageIdx} {#each messages as message, messageIdx}
<div class=" w-full {message.role == 'user' ? '' : ' bg-gray-700'}"> <div class=" w-full {message.role == 'user' ? '' : ' bg-gray-100 dark:bg-gray-700'}">
<div class="flex justify-between p-5 py-10 max-w-3xl mx-auto rounded-lg group"> <div class="flex justify-between p-5 py-10 max-w-3xl mx-auto rounded-lg group">
<div class="space-x-7 flex w-full"> <div class="space-x-7 flex w-full">
<div class=""> <div class="">
@ -884,25 +886,27 @@
<div class="w-full pr-28"> <div class="w-full pr-28">
<div class="animate-pulse flex w-full"> <div class="animate-pulse flex w-full">
<div class="space-y-2 w-full"> <div class="space-y-2 w-full">
<div class="h-2 bg-gray-600 rounded mr-14" /> <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded mr-14" />
<div class="grid grid-cols-3 gap-4"> <div class="grid grid-cols-3 gap-4">
<div class="h-2 bg-gray-600 rounded col-span-2" /> <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-2" />
<div class="h-2 bg-gray-600 rounded col-span-1" /> <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-1" />
</div> </div>
<div class="grid grid-cols-4 gap-4"> <div class="grid grid-cols-4 gap-4">
<div class="h-2 bg-gray-600 rounded col-span-1" /> <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-1" />
<div class="h-2 bg-gray-600 rounded col-span-2" /> <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-2" />
<div class="h-2 bg-gray-600 rounded col-span-1 mr-4" /> <div
class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-1 mr-4"
/>
</div> </div>
<div class="h-2 bg-gray-600 rounded" /> <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded" />
</div> </div>
</div> </div>
</div> </div>
{:else} {:else}
<div <div
class="prose chat-{message.role} w-full max-w-full prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-8 prose-ol:-mb-8 prose-li:-mb-4 whitespace-pre-line" class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-8 prose-ol:-mb-8 prose-li:-mb-4 whitespace-pre-line"
> >
{#if message.role == 'user'} {#if message.role == 'user'}
{#if message?.edit === true} {#if message?.edit === true}
@ -920,9 +924,9 @@
}} }}
/> />
<div class=" flex justify-end space-x-2 text-sm text-gray-100"> <div class=" flex justify-end space-x-2 text-sm font-medium">
<button <button
class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 transition rounded-lg" class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
on:click={() => { on:click={() => {
confirmEditMessage(messageIdx); confirmEditMessage(messageIdx);
}} }}
@ -931,7 +935,7 @@
</button> </button>
<button <button
class=" px-4 py-2.5 bg-gray-800 hover:bg-gray-700 transition outline outline-1 outline-gray-600 rounded-lg" class=" px-4 py-2.5 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
on:click={() => { on:click={() => {
cancelEditMessage(messageIdx); cancelEditMessage(messageIdx);
}} }}
@ -949,8 +953,8 @@
{#if message.done} {#if message.done}
<div class=" flex justify-end space-x-1 text-gray-400"> <div class=" flex justify-end space-x-1 text-gray-400">
<button <button
class="p-1 rounded hover:bg-gray-800 {message.rating === 1 class="p-1 rounded dark:hover:bg-gray-800 {message.rating === 1
? 'bg-gray-800' ? ' bg-gray-200 dark:bg-gray-800'
: ''} transition" : ''} transition"
on:click={() => { on:click={() => {
rateMessage(messageIdx, 1); rateMessage(messageIdx, 1);
@ -971,8 +975,8 @@
> >
</button> </button>
<button <button
class="p-1 rounded hover:bg-gray-800 {message.rating === -1 class="p-1 rounded dark:hover:bg-gray-800 {message.rating === -1
? 'bg-gray-800' ? 'bg-gray-200 dark:bg-gray-800'
: ''} transition" : ''} transition"
on:click={() => { on:click={() => {
rateMessage(messageIdx, -1); rateMessage(messageIdx, -1);
@ -1004,7 +1008,7 @@
{#if message.role == 'user'} {#if message.role == 'user'}
{#if message?.edit !== true} {#if message?.edit !== true}
<button <button
class="invisible group-hover:visible p-1 rounded hover:bg-gray-700 transition" class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-700 transition"
on:click={() => { on:click={() => {
editMessage(messageIdx); editMessage(messageIdx);
}} }}
@ -1026,7 +1030,7 @@
{/if} {/if}
{:else if message.done} {:else if message.done}
<button <button
class="p-1 rounded hover:bg-gray-700 transition" class="p-1 rounded dark:hover:bg-gray-700 transition"
on:click={() => { on:click={() => {
copyToClipboard(message.content); copyToClipboard(message.content);
}} }}
@ -1058,7 +1062,7 @@
<div class="fixed bottom-0 w-full"> <div class="fixed bottom-0 w-full">
<!-- <hr class=" mb-3 border-gray-600" /> --> <!-- <hr class=" mb-3 border-gray-600" /> -->
<div class=" bg-gradient-to-t from-gray-900 pt-5"> <div class=" bg-gradient-to-t from-gray-100 dark:from-gray-900 pt-5">
<div class="max-w-3xl p-2.5 -mb-0.5 mx-auto inset-x-0"> <div class="max-w-3xl p-2.5 -mb-0.5 mx-auto inset-x-0">
{#if messages.length == 0 && suggestions !== 'false'} {#if messages.length == 0 && suggestions !== 'false'}
<Suggestions {submitPrompt} /> <Suggestions {submitPrompt} />
@ -1068,7 +1072,7 @@
{#if messages.at(-1).done == true} {#if messages.at(-1).done == true}
<div class=" flex justify-end mb-2.5"> <div class=" flex justify-end mb-2.5">
<button <button
class=" flex px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg" class=" flex px-4 py-2.5 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
on:click={regenerateResponse} on:click={regenerateResponse}
> >
<div class=" self-center mr-1"> <div class=" self-center mr-1">
@ -1085,13 +1089,13 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center text-sm">Regenerate</div> <div class=" self-center text-sm font-medium">Regenerate</div>
</button> </button>
</div> </div>
{:else} {:else}
<div class=" flex justify-end mb-2.5"> <div class=" flex justify-end mb-2.5">
<button <button
class=" flex px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg" class=" flex px-4 py-2.5 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
on:click={stopResponse} on:click={stopResponse}
> >
<div class=" self-center mr-1"> <div class=" self-center mr-1">
@ -1108,7 +1112,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center text-sm">Stop generating</div> <div class=" self-center text-sm font-medium">Stop generating</div>
</button> </button>
</div> </div>
{/if} {/if}
@ -1120,7 +1124,7 @@
}} }}
> >
<textarea <textarea
class="rounded-xl bg-gray-700 outline-none w-full py-3 px-5 pr-12 resize-none" class="rounded-xl dark:bg-gray-700 dark:text-gray-100 outline-none shadow border dark:border-gray-700 w-full py-3 px-5 pr-12 resize-none"
placeholder="Send a message" placeholder="Send a message"
bind:value={prompt} bind:value={prompt}
on:keypress={(e) => { on:keypress={(e) => {
@ -1135,7 +1139,7 @@
rows="1" rows="1"
on:input={(e) => { on:input={(e) => {
e.target.style.height = ''; e.target.style.height = '';
e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px'; e.target.style.height = Math.min(e.target.scrollHeight, 200) + 2 + 'px';
}} }}
/> />
<div class=" absolute right-0 bottom-0"> <div class=" absolute right-0 bottom-0">
@ -1144,7 +1148,7 @@
<button <button
class="{prompt !== '' class="{prompt !== ''
? 'bg-emerald-600 text-gray-100 hover:bg-emerald-700 ' ? 'bg-emerald-600 text-gray-100 hover:bg-emerald-700 '
: 'text-gray-600 disabled'} transition rounded p-2" : 'text-gray-200 dark:text-gray-600 disabled'} transition rounded p-2"
type="submit" type="submit"
disabled={prompt === ''} disabled={prompt === ''}
> >

1
tailwind.config.js
View file

@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
darkMode: 'class',
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
theme: { theme: {
extend: { extend: {