Skip to content

GitLab

"examples/transformers/vscode:/vscode.git/clone" did not exist on "b4ecca3e9456827474686aed8f7c1213c21ce20c"
Unverified Commit fbdae0f7 authored by Timothy Jaeryang Baek's avatar Timothy Jaeryang Baek Committed by GitHub
Browse files

Merge pull request #216 from ollama-webui/dev 

feat: full backend support (including auth/rbac)
parents f417a27d 5abd0ad5
Expand all Show whitespace changes
Inline Side-by-side
Showing with 281 additions and 193 deletions
src/routes/(app)/modelfiles/+page.svelte
View file @ fbdae0f7
<script lang="ts">
import { modelfiles, settings, user } from '$lib/stores';
import { onMount } from 'svelte';
import toast from 'svelte-french-toast';
import fileSaver from 'file-saver';
const { saveAs } = fileSaver;
import { onMount } from 'svelte';
import { modelfiles, settings, user } from '$lib/stores';
import { OLLAMA_API_BASE_URL } from '$lib/constants';
import { createModel, deleteModel } from '$lib/apis/ollama';
import {
createNewModelfile,
deleteModelfileByTagName,
getModelfiles
} from '$lib/apis/modelfiles';
let localModelfiles = [];
const deleteModelHandler = async (tagName) => {
let success = null;
const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/delete`, {
method: 'DELETE',
headers: {
'Content-Type': 'text/event-stream',
...($settings.authHeader && { Authorization: $settings.authHeader }),
...($user && { Authorization: `Bearer ${localStorage.token}` })
},
body: JSON.stringify({
name: tagName
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.then((json) => {
console.log(json);
success = await deleteModel(
$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
localStorage.token,
tagName
);
if (success) {
toast.success(`Deleted ${tagName}`);
success = true;
return json;
})
.catch((err) => {
console.log(err);
toast.error(err.error);
return null;
});
}
return success;
};
const deleteModelfilebyTagName = async (tagName) => {
const deleteModelfile = async (tagName) => {
await deleteModelHandler(tagName);
await modelfiles.set($modelfiles.filter((modelfile) => modelfile.tagName != tagName));
localStorage.setItem('modelfiles', JSON.stringify($modelfiles));
await deleteModelfileByTagName(localStorage.token, tagName);
await modelfiles.set(await getModelfiles(localStorage.token));
};
const shareModelfile = async (modelfile) => {
......@@ -60,6 +55,21 @@
false
);
};
const saveModelfiles = async (modelfiles) => {
let blob = new Blob([JSON.stringify(modelfiles)], {
type: 'application/json'
});
saveAs(blob, `modelfiles-export-${Date.now()}.json`);
};
onMount(() => {
localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
if (localModelfiles) {
console.log(localModelfiles);
}
});
</script>
<div class="min-h-screen w-full flex justify-center dark:text-white">
......@@ -167,7 +177,7 @@
class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
type="button"
on:click={() => {
deleteModelfilebyTagName(modelfile.tagName);
deleteModelfile(modelfile.tagName);
}}
>
<svg
......@@ -189,6 +199,79 @@
</div>
{/each}
{#if localModelfiles.length > 0}
<hr class=" dark:border-gray-700 my-2.5" />
<div class=" flex justify-end space-x-4 w-full mb-3">
<div class=" self-center text-sm font-medium">
{localModelfiles.length} Local Modelfiles Detected
</div>
<div class="flex space-x-1">
<button
class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
on:click={async () => {
for (const modelfile of localModelfiles) {
await createNewModelfile(localStorage.token, modelfile).catch((error) => {
return null;
});
}
saveModelfiles(localModelfiles);
localStorage.removeItem('modelfiles');
localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
await modelfiles.set(await getModelfiles(localStorage.token));
}}
>
<div class=" self-center mr-2 font-medium">Sync All</div>
<div class=" self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-3.5 h-3.5"
>
<path
fill-rule="evenodd"
d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z"
clip-rule="evenodd"
/>
</svg>
</div>
</button>
<button
class="self-center w-fit text-sm p-1.5 border dark:border-gray-600 rounded-xl flex"
on:click={async () => {
saveModelfiles(localModelfiles);
localStorage.removeItem('modelfiles');
localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
await modelfiles.set(await getModelfiles(localStorage.token));
}}
>
<div class=" self-center">
<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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
/>
</svg>
</div>
</button>
</div>
</div>
{/if}
<div class=" my-16">
<div class=" text-2xl font-semibold mb-6">Made by OllamaHub Community</div>
......
src/routes/(app)/modelfiles/create/+page.svelte
View file @ fbdae0f7
......@@ -8,6 +8,8 @@
import Advanced from '$lib/components/chat/Settings/Advanced.svelte';
import { splitStream } from '$lib/utils';
import { onMount, tick } from 'svelte';
import { createModel } from '$lib/apis/ollama';
import { createNewModelfile, getModelfileByTagName, getModelfiles } from '$lib/apis/modelfiles';
let loading = false;
......@@ -93,11 +95,8 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
};
const saveModelfile = async (modelfile) => {
await modelfiles.set([
...$modelfiles.filter((m) => m.tagName !== modelfile.tagName),
modelfile
]);
localStorage.setItem('modelfiles', JSON.stringify($modelfiles));
await createNewModelfile(localStorage.token, modelfile);
await modelfiles.set(await getModelfiles(localStorage.token));
};
const submitHandler = async () => {
......@@ -112,7 +111,10 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
return success;
}
if ($models.includes(tagName)) {
if (
$models.map((model) => model.name).includes(tagName) ||
(await getModelfileByTagName(localStorage.token, tagName).catch(() => false))
) {
toast.error(
`Uh-oh! It looks like you already have a model named '${tagName}'. Please choose a different name to complete your modelfile.`
);
......@@ -128,18 +130,12 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
Object.keys(categories).filter((category) => categories[category]).length > 0 &&
!$models.includes(tagName)
) {
const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/create`, {
method: 'POST',
headers: {
'Content-Type': 'text/event-stream',
...($settings.authHeader && { Authorization: $settings.authHeader }),
...($user && { Authorization: `Bearer ${localStorage.token}` })
},
body: JSON.stringify({
name: tagName,
modelfile: content
})
});
const res = await createModel(
$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
localStorage.token,
tagName,
content
);
if (res) {
const reader = res.body
......
src/routes/(app)/modelfiles/edit/+page.svelte
View file @ fbdae0f7
......@@ -2,14 +2,20 @@
import { v4 as uuidv4 } from 'uuid';
import { toast } from 'svelte-french-toast';
import { goto } from '$app/navigation';
import { OLLAMA_API_BASE_URL } from '$lib/constants';
import { settings, db, user, config, modelfiles } from '$lib/stores';
import Advanced from '$lib/components/chat/Settings/Advanced.svelte';
import { splitStream } from '$lib/utils';
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { settings, db, user, config, modelfiles } from '$lib/stores';
import { OLLAMA_API_BASE_URL } from '$lib/constants';
import { splitStream } from '$lib/utils';
import { createModel } from '$lib/apis/ollama';
import { getModelfiles, updateModelfileByTagName } from '$lib/apis/modelfiles';
import Advanced from '$lib/components/chat/Settings/Advanced.svelte';
let loading = false;
let filesInputElement;
......@@ -78,17 +84,9 @@
}
});
const saveModelfile = async (modelfile) => {
await modelfiles.set(
$modelfiles.map((e) => {
if (e.tagName === modelfile.tagName) {
return modelfile;
} else {
return e;
}
})
);
localStorage.setItem('modelfiles', JSON.stringify($modelfiles));
const updateModelfile = async (modelfile) => {
await updateModelfileByTagName(localStorage.token, modelfile.tagName, modelfile);
await modelfiles.set(await getModelfiles(localStorage.token));
};
const updateHandler = async () => {
......@@ -106,18 +104,12 @@
content !== '' &&
Object.keys(categories).filter((category) => categories[category]).length > 0
) {
const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/create`, {
method: 'POST',
headers: {
'Content-Type': 'text/event-stream',
...($settings.authHeader && { Authorization: $settings.authHeader }),
...($user && { Authorization: `Bearer ${localStorage.token}` })
},
body: JSON.stringify({
name: tagName,
modelfile: content
})
});
const res = await createModel(
$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
localStorage.token,
tagName,
content
);
if (res) {
const reader = res.body
......@@ -178,7 +170,7 @@
}
if (success) {
await saveModelfile({
await updateModelfile({
tagName: tagName,
imageUrl: imageUrl,
title: title,
......
src/routes/+layout.svelte
View file @ fbdae0f7
......@@ -2,56 +2,39 @@
import { onMount, tick } from 'svelte';
import { config, user } from '$lib/stores';
import { goto } from '$app/navigation';
import { WEBUI_API_BASE_URL } from '$lib/constants';
import toast, { Toaster } from 'svelte-french-toast';
import { getBackendConfig } from '$lib/apis';
import { getSessionUser } from '$lib/apis/auths';
import '../app.css';
import '../tailwind.css';
import 'tippy.js/dist/tippy.css';
let loaded = false;
onMount(async () => {
const resBackend = await fetch(`${WEBUI_API_BASE_URL}/`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((error) => {
console.log(error);
return null;
});
// Check Backend Status
const backendConfig = await getBackendConfig();
console.log(resBackend);
await config.set(resBackend);
if (backendConfig) {
// Save Backend Status to Store
await config.set(backendConfig);
console.log(backendConfig);
if ($config) {
if ($config.auth) {
if (localStorage.token) {
const res = await fetch(`${WEBUI_API_BASE_URL}/auths`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${localStorage.token}`
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((error) => {
console.log(error);
toast.error(error.detail);
// Get Session User Info
const sessionUser = await getSessionUser(localStorage.token).catch((error) => {
toast.error(error);
return null;
});
if (res) {
await user.set(res);
if (sessionUser) {
// Save Session User to Store
await user.set(sessionUser);
} else {
// Redirect Invalid Session User to /auth Page
localStorage.removeItem('token');
await goto('/auth');
}
......@@ -59,6 +42,9 @@
await goto('/auth');
}
}
} else {
// Redirect to /error when Backend Not Detected
await goto(`/error`);
}
await tick();
......@@ -69,8 +55,9 @@
<svelte:head>
<title>Ollama</title>
</svelte:head>
<Toaster />
{#if $config !== undefined && loaded}
{#if loaded}
<slot />
{/if}
<Toaster />
src/routes/auth/+page.svelte
View file @ fbdae0f7
<script>
import { goto } from '$app/navigation';
import { userSignIn, userSignUp } from '$lib/apis/auths';
import { WEBUI_API_BASE_URL } from '$lib/constants';
import { config, user } from '$lib/stores';
import { onMount } from 'svelte';
......@@ -12,76 +13,51 @@
let email = '';
let password = '';
const setSessionUser = async (sessionUser) => {
if (sessionUser) {
console.log(sessionUser);
toast.success(`You're now logged in.`);
localStorage.token = sessionUser.token;
await user.set(sessionUser);
goto('/');
}
};
const signInHandler = async () => {
const res = await fetch(`${WEBUI_API_BASE_URL}/auths/signin`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
password: password
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((error) => {
console.log(error);
toast.error(error.detail);
const sessionUser = await userSignIn(email, password).catch((error) => {
toast.error(error);
return null;
});
if (res) {
console.log(res);
toast.success(`You're now logged in.`);
localStorage.token = res.token;
await user.set(res);
goto('/');
}
await setSessionUser(sessionUser);
};
const signUpHandler = async () => {
const res = await fetch(`${WEBUI_API_BASE_URL}/auths/signup`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: name,
email: email,
password: password
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((error) => {
console.log(error);
toast.error(error.detail);
const sessionUser = await userSignUp(name, email, password).catch((error) => {
toast.error(error);
return null;
});
if (res) {
console.log(res);
toast.success(`Account creation successful."`);
localStorage.token = res.token;
await user.set(res);
goto('/');
await setSessionUser(sessionUser);
};
const submitHandler = async () => {
if (mode === 'signin') {
await signInHandler();
} else {
await signUpHandler();
}
};
onMount(async () => {
if ($config === null || !$config.auth || ($config.auth && $user !== undefined)) {
if ($user !== undefined) {
await goto('/');
}
loaded = true;
});
</script>
{#if loaded && $config && $config.auth}
{#if loaded}
<div class="fixed m-10 z-50">
<div class="flex space-x-2">
<div class=" self-center">
......@@ -91,7 +67,7 @@
</div>
<div class=" bg-white min-h-screen w-full flex justify-center font-mona">
<div class="hidden lg:flex lg:flex-1 px-10 md:px-16 w-full bg-yellow-50 justify-center">
<!-- <div class="hidden lg:flex lg:flex-1 px-10 md:px-16 w-full bg-yellow-50 justify-center">
<div class=" my-auto pb-16 text-left">
<div>
<div class=" font-bold text-yellow-600 text-4xl">
......@@ -103,66 +79,65 @@
</div>
</div>
</div>
</div>
</div> -->
<div class="w-full max-w-xl px-10 md:px-16 bg-white min-h-screen w-full flex flex-col">
<div class="w-full max-w-lg px-10 md:px-16 bg-white min-h-screen flex flex-col">
<div class=" my-auto pb-10 w-full">
<form
class=" flex flex-col justify-center"
on:submit|preventDefault={() => {
if (mode === 'signin') {
signInHandler();
} else {
signUpHandler();
}
submitHandler();
}}
>
<div class=" text-2xl md:text-3xl font-semibold">
<div class=" text-xl md:text-2xl font-bold">
{mode === 'signin' ? 'Sign in' : 'Sign up'} to Ollama Web UI
</div>
<hr class="my-8" />
<div class="flex flex-col space-y-4">
<div class="flex flex-col mt-4">
{#if mode === 'signup'}
<div>
<div class=" text-sm font-bold text-left mb-2">Name</div>
<div class=" text-sm font-semibold text-left mb-1">Name</div>
<input
bind:value={name}
type="text"
class=" border px-5 py-4 rounded-2xl w-full text-sm"
class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
autocomplete="name"
placeholder="Enter Your Full Name"
required
/>
</div>
<hr class=" my-3" />
{/if}
<div>
<div class=" text-sm font-bold text-left mb-2">Email</div>
<div class="mb-2">
<div class=" text-sm font-semibold text-left mb-1">Email</div>
<input
bind:value={email}
type="email"
class=" border px-5 py-4 rounded-2xl w-full text-sm"
class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
autocomplete="email"
placeholder="Enter Your Email"
required
/>
</div>
<div>
<div class=" text-sm font-bold text-left mb-2">Password</div>
<div class=" text-sm font-semibold text-left mb-1">Password</div>
<input
bind:value={password}
type="password"
class=" border px-5 py-4 rounded-2xl w-full text-sm"
class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
placeholder="Enter Your Password"
autocomplete="current-password"
required
/>
</div>
</div>
<div class="mt-8">
<div class="mt-5">
<button
class=" bg-gray-900 hover:bg-gray-800 w-full rounded-full text-white font-semibold text-sm py-5 transition"
class=" bg-gray-900 hover:bg-gray-800 w-full rounded-full text-white font-semibold text-sm py-3 transition"
type="submit"
>
{mode === 'signin' ? 'Sign In' : 'Create Account'}
......
src/routes/error/+page.svelte 0 → 100644
View file @ fbdae0f7
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment