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

feat: model select ui update

Browse source
This commit is contained in:
Timothy J. Baek 2023-11-07 23:51:56 -08:00
parent 8386b286e2
commit 648d14cd23
4 changed files with 85 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@
import sha256 from 'js-sha256'; import sha256 from 'js-sha256';
import Modal from '../common/Modal.svelte'; import Modal from '../common/Modal.svelte';
import { API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants'; import { WEB_UI_VERSION, API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants';
import toast from 'svelte-french-toast'; import toast from 'svelte-french-toast';
export let show = false; export let show = false;
@ -757,7 +757,9 @@
<div> <div>
<div class=" mb-2.5 text-sm font-medium">Ollama Web UI Version</div> <div class=" mb-2.5 text-sm font-medium">Ollama Web UI Version</div>
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 text-xs text-gray-700 dark:text-gray-200">v1.0.0-alpha</div> <div class="flex-1 text-xs text-gray-700 dark:text-gray-200">
{WEB_UI_VERSION}
</div>
</div> </div>
</div> </div>

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

@ -60,14 +60,16 @@
<div class=" m-auto self-center"> <div class=" m-auto self-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="none"
fill="currentColor" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5" class="w-5 h-5"
> >
<path <path
fill-rule="evenodd" stroke-linecap="round"
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" stroke-linejoin="round"
clip-rule="evenodd" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
/> />
</svg> </svg>
</div> </div>
@ -88,12 +90,16 @@
<div class=" m-auto self-center"> <div class=" m-auto self-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="none"
fill="currentColor" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5" class="w-5 h-5"
> >
<path <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" stroke-linecap="round"
stroke-linejoin="round"
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
/> />
</svg> </svg>
</div> </div>
@ -108,7 +114,7 @@
bind:this={navElement} bind:this={navElement}
class="h-screen {show class="h-screen {show
? '' ? ''
: '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-black text-gray-200 shadow-2xl text-sm : '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-gray-900 text-gray-200 shadow-2xl text-sm
" "
> >
<div class="py-2.5 my-auto flex flex-col justify-between h-screen"> <div class="py-2.5 my-auto flex flex-col justify-between h-screen">

2
src/lib/constants.ts
View file

@ -8,6 +8,8 @@ export const API_BASE_URL =
: `http://localhost:11434/api` : `http://localhost:11434/api`
: PUBLIC_API_BASE_URL; : PUBLIC_API_BASE_URL;
export const WEB_UI_VERSION = 'v1.0.0-alpha.1';
// Source: https://kit.svelte.dev/docs/modules#$env-static-public // Source: https://kit.svelte.dev/docs/modules#$env-static-public
// This feature, akin to $env/static/private, exclusively incorporates environment variables // This feature, akin to $env/static/private, exclusively incorporates environment variables
// that are prefixed with config.kit.env.publicPrefix (usually set to PUBLIC_). // that are prefixed with config.kit.env.publicPrefix (usually set to PUBLIC_).

71
src/routes/+page.svelte
View file

@ -795,15 +795,37 @@
<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 w-full px-2.5">
<div class="p-3 rounded-lg bg-gray-100 dark: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 dark: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 />
</div>
</div>
</div> -->
<div class="max-w-2xl mx-auto w-full mt-14">
<div class="flex justify-between my-2 text-sm">
<select
id="models"
class="outline-none bg-transparent text-lg font-semibold rounded-lg block w-full placeholder-gray-400"
bind:value={selectedModel}
disabled={messages.length != 0}
>
<option value="" selected>Select a model</option>
{#each models as model}
{#if model.name === 'hr'}
<hr />
{:else}
<option value={model.name} class=" text-lg">{model.name}</option>
{/if}
{/each}
</select>
<button <button
class=" self-center dark:hover:text-gray-300" class=" self-center dark:hover:text-gray-300"
on:click={() => { on:click={() => {
@ -830,32 +852,12 @@
/> />
</svg> </svg>
</button> </button>
</label> </div>
<div> <div class="text-left mt-1.5 text-xs text-gray-500">
<select
id="models"
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}
disabled={messages.length != 0}
>
<option value="" selected>Select a model</option>
{#each models as model}
{#if model.name === 'hr'}
<hr />
{:else}
<option value={model.name}>{model.name}</option>
{/if}
{/each}
</select>
<div class="text-right mt-1.5 text-xs text-gray-500">
<button on:click={saveDefaultModel}> Set as default</button> <button on:click={saveDefaultModel}> Set as default</button>
</div> </div>
</div> </div>
</div>
</div>
</div>
<div class=" h-full mt-10 mb-48 w-full flex flex-col"> <div class=" h-full mt-10 mb-48 w-full flex flex-col">
{#if messages.length == 0} {#if messages.length == 0}
@ -960,22 +962,23 @@
<div class=" flex justify-start space-x-1"> <div class=" flex justify-start space-x-1">
<button <button
class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-900 transition" class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition"
on:click={() => { on:click={() => {
editMessage(messageIdx); editMessage(messageIdx);
}} }}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="none"
fill="currentColor" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4" class="w-4 h-4"
> >
<path <path
d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z" stroke-linecap="round"
/> stroke-linejoin="round"
<path d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
/> />
</svg> </svg>
</button> </button>
@ -1105,13 +1108,13 @@
<Suggestions {submitPrompt} /> <Suggestions {submitPrompt} />
{/if} {/if}
<form <form
class=" flex shadow-sm relative w-full" class=" flex relative w-full"
on:submit|preventDefault={() => { on:submit|preventDefault={() => {
submitPrompt(prompt); submitPrompt(prompt);
}} }}
> >
<textarea <textarea
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" class="rounded-xl dark:bg-gray-700 dark:text-gray-100 outline-none 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) => {