Skip to content

GitLab

Unverified Commit 0ddb2b32 authored by Timothy Jaeryang Baek's avatar Timothy Jaeryang Baek Committed by GitHub
Browse files

Merge pull request #413 from ollama-webui/main 

dev
parents 880f58e8 ed1d9e61
Hide whitespace changes
Inline Side-by-side
Showing with 734 additions and 16 deletions
src/routes/(app)/prompts/create/+page.svelte 0 → 100644
View file @ 0ddb2b32
<script>
import toast from 'svelte-french-toast';
import { goto } from '$app/navigation';
import { prompts } from '$lib/stores';
import { onMount, tick } from 'svelte';
import { createNewPrompt, getPrompts } from '$lib/apis/prompts';
let loading = false;
// ///////////
// Prompt
// ///////////
let title = '';
let command = '';
let content = '';
$: command = title !== '' ? `${title.replace(/\s+/g, '-').toLowerCase()}` : '';
const submitHandler = async () => {
loading = true;
if (validateCommandString(command)) {
const prompt = await createNewPrompt(localStorage.token, command, title, content).catch(
(error) => {
toast.error(error);
return null;
}
);
if (prompt) {
await prompts.set(await getPrompts(localStorage.token));
await goto('/prompts');
}
} else {
toast.error('Only alphanumeric characters and hyphens are allowed in the command string.');
}
loading = false;
};
const validateCommandString = (inputString) => {
// Regular expression to match only alphanumeric characters and hyphen
const regex = /^[a-zA-Z0-9-]+$/;
// Test the input string against the regular expression
return regex.test(inputString);
};
onMount(() => {
window.addEventListener('message', async (event) => {
if (
!['https://ollamahub.com', 'https://www.ollamahub.com', 'http://localhost:5173'].includes(
event.origin
)
)
return;
const prompt = JSON.parse(event.data);
console.log(prompt);
title = prompt.title;
await tick();
content = prompt.content;
command = prompt.command;
});
if (window.opener ?? false) {
window.opener.postMessage('loaded', '*');
}
});
</script>
<div class="min-h-screen w-full flex justify-center dark:text-white">
<div class=" py-2.5 flex flex-col justify-between w-full">
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
<div class=" text-2xl font-semibold mb-6">My Prompts</div>
<button
class="flex space-x-1"
on:click={() => {
history.back();
}}
>
<div class=" self-center">
<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="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class=" self-center font-medium text-sm">Back</div>
</button>
<hr class="my-3 dark:border-gray-700" />
<form
class="flex flex-col"
on:submit|preventDefault={() => {
submitHandler();
}}
>
<div class="my-2">
<div class=" text-sm font-semibold mb-2">Title*</div>
<div>
<input
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
placeholder="Add a short title for this prompt"
bind:value={title}
required
/>
</div>
</div>
<div class="my-2">
<div class=" text-sm font-semibold mb-2">Command*</div>
<div class="flex items-center mb-1">
<div
class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
>
/
</div>
<input
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-r-lg"
placeholder="short-summary"
bind:value={command}
required
/>
</div>
<div class="text-xs text-gray-400 dark:text-gray-500">
Only <span class=" text-gray-600 dark:text-gray-300 font-medium"
>alphanumeric characters and hyphens</span
>
are allowed; Activate this command by typing "<span
class=" text-gray-600 dark:text-gray-300 font-medium"
>
/{command}
</span>" to chat input.
</div>
</div>
<div class="my-2">
<div class="flex w-full justify-between">
<div class=" self-center text-sm font-semibold">Prompt Content*</div>
</div>
<div class="mt-2">
<div>
<textarea
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
placeholder={`Write a summary in 50 words that summarizes [topic or keyword].`}
rows="6"
bind:value={content}
required
/>
</div>
<div class="text-xs text-gray-400 dark:text-gray-500">
Format your variables using square brackets like this: <span
class=" text-gray-600 dark:text-gray-300 font-medium">[variable]</span
>
. Make sure to enclose them with
<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
and <span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span> .
</div>
</div>
</div>
<div class="my-2 flex justify-end">
<button
class=" text-sm px-3 py-2 transition rounded-xl {loading
? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
type="submit"
disabled={loading}
>
<div class=" self-center font-medium">Save & Create</div>
{#if loading}
<div class="ml-1.5 self-center">
<svg
class=" w-4 h-4"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
><style>
.spinner_ajPY {
transform-origin: center;
animation: spinner_AtaB 0.75s infinite linear;
}
@keyframes spinner_AtaB {
100% {
transform: rotate(360deg);
}
}
</style><path
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
opacity=".25"
/><path
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
class="spinner_ajPY"
/></svg
>
</div>
{/if}
</button>
</div>
</form>
</div>
</div>
</div>
src/routes/(app)/prompts/edit/+page.svelte 0 → 100644
View file @ 0ddb2b32
<script>
import toast from 'svelte-french-toast';
import { goto } from '$app/navigation';
import { prompts } from '$lib/stores';
import { onMount, tick } from 'svelte';
import { getPrompts, updatePromptByCommand } from '$lib/apis/prompts';
import { page } from '$app/stores';
let loading = false;
// ///////////
// Prompt
// ///////////
let title = '';
let command = '';
let content = '';
const updateHandler = async () => {
loading = true;
if (validateCommandString(command)) {
const prompt = await updatePromptByCommand(localStorage.token, command, title, content).catch(
(error) => {
toast.error(error);
return null;
}
);
if (prompt) {
await prompts.set(await getPrompts(localStorage.token));
await goto('/prompts');
}
} else {
toast.error('Only alphanumeric characters and hyphens are allowed in the command string.');
}
loading = false;
};
const validateCommandString = (inputString) => {
// Regular expression to match only alphanumeric characters and hyphen
const regex = /^[a-zA-Z0-9-]+$/;
// Test the input string against the regular expression
return regex.test(inputString);
};
onMount(async () => {
command = $page.url.searchParams.get('command');
if (command) {
const prompt = $prompts.filter((prompt) => prompt.command === command).at(0);
if (prompt) {
console.log(prompt);
console.log(prompt.command);
title = prompt.title;
await tick();
command = prompt.command.slice(1);
content = prompt.content;
} else {
goto('/prompts');
}
} else {
goto('/prompts');
}
});
</script>
<div class="min-h-screen w-full flex justify-center dark:text-white">
<div class=" py-2.5 flex flex-col justify-between w-full">
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
<div class=" text-2xl font-semibold mb-6">My Prompts</div>
<button
class="flex space-x-1"
on:click={() => {
history.back();
}}
>
<div class=" self-center">
<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="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class=" self-center font-medium text-sm">Back</div>
</button>
<hr class="my-3 dark:border-gray-700" />
<form
class="flex flex-col"
on:submit|preventDefault={() => {
updateHandler();
}}
>
<div class="my-2">
<div class=" text-sm font-semibold mb-2">Title*</div>
<div>
<input
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
placeholder="Add a short title for this prompt"
bind:value={title}
required
/>
</div>
</div>
<div class="my-2">
<div class=" text-sm font-semibold mb-2">Command*</div>
<div class="flex items-center mb-1">
<div
class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
>
/
</div>
<input
class="px-3 py-1.5 text-sm w-full bg-transparent border disabled:text-gray-500 dark:border-gray-600 outline-none rounded-r-lg"
placeholder="short-summary"
bind:value={command}
disabled
required
/>
</div>
<div class="text-xs text-gray-400 dark:text-gray-500">
Only <span class=" text-gray-600 dark:text-gray-300 font-medium"
>alphanumeric characters and hyphens</span
>
are allowed; Activate this command by typing "<span
class=" text-gray-600 dark:text-gray-300 font-medium"
>
/{command}
</span>" to chat input.
</div>
</div>
<div class="my-2">
<div class="flex w-full justify-between">
<div class=" self-center text-sm font-semibold">Prompt Content*</div>
</div>
<div class="mt-2">
<div>
<textarea
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
placeholder={`Write a summary in 50 words that summarizes [topic or keyword].`}
rows="6"
bind:value={content}
required
/>
</div>
<div class="text-xs text-gray-400 dark:text-gray-500">
Format your variables using square brackets like this: <span
class=" text-gray-600 dark:text-gray-300 font-medium">[variable]</span
>
. Make sure to enclose them with
<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
and <span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span> .
</div>
</div>
</div>
<div class="my-2 flex justify-end">
<button
class=" text-sm px-3 py-2 transition rounded-xl {loading
? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
type="submit"
disabled={loading}
>
<div class=" self-center font-medium">Save & Update</div>
{#if loading}
<div class="ml-1.5 self-center">
<svg
class=" w-4 h-4"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
><style>
.spinner_ajPY {
transform-origin: center;
animation: spinner_AtaB 0.75s infinite linear;
}
@keyframes spinner_AtaB {
100% {
transform: rotate(360deg);
}
}
</style><path
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
opacity=".25"
/><path
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
class="spinner_ajPY"
/></svg
>
</div>
{/if}
</button>
</div>
</form>
</div>
</div>
</div>
src/routes/+layout.svelte
View file @ 0ddb2b32
<script>
import { onMount, tick } from 'svelte';
import { config, user } from '$lib/stores';
import { config, user, theme } from '$lib/stores';
import { goto } from '$app/navigation';
import toast, { Toaster } from 'svelte-french-toast';
......@@ -14,6 +14,7 @@
let loaded = false;
onMount(async () => {
theme.set(localStorage.theme);
// Check Backend Status
const backendConfig = await getBackendConfig();
......@@ -54,6 +55,9 @@
<svelte:head>
<title>Ollama</title>
<link rel="stylesheet" type="text/css" href="/themes/rosepine.css" />
<link rel="stylesheet" type="text/css" href="/themes/rosepine-dawn.css" />
</svelte:head>
{#if loaded}
......
static/manifest.json
View file @ 0ddb2b32
{
"name": "Ollama Web UI",
"short_name": "Ollama",
"start_url": "/",
"display": "standalone",
"background_color": "#343541",
"theme_color": "#343541",
"orientation": "portrait-primary",
"icons": [
{
"src": "/favicon.png",
"type": "image/png",
"sizes": "844x884"
}
]
}
\ No newline at end of file
"name": "Ollama Web UI",
"short_name": "Ollama",
"start_url": "/",
"display": "standalone",
"background_color": "#343541",
"theme_color": "#343541",
"orientation": "portrait-primary",
"icons": [
{
"src": "/favicon.png",
"type": "image/png",
"sizes": "844x884"
}
]
}
static/themes/rosepine-dawn.css 0 → 100644
View file @ 0ddb2b32
.rose-pine-dawn * {
color: #575279 !important;
stroke: #d7827e !important;
}
.rose-pine-dawn .app > * {
background-color: #faf4ed !important;
}
.rose-pine-dawn #nav {
background-color: #fffaf3;
}
.rose-pine-dawn .py-2\.5.my-auto.flex.flex-col.justify-between.h-screen {
background: #f2e9e1;
}
.rose-pine-dawn .bg-white.dark\:bg-gray-800 {
background: #f2e9e1;
}
.rose-pine-dawn .w-4.h-4 {
fill: #ebbcba;
}
.rose-pine-dawn #chat-textarea {
background: #cecacd;
margin: 0.3rem;
padding: 0.5rem;
}
.rose-pine-dawn .bg-gradient-to-t.from-white.dark\:from-gray-800.from-40\%.pb-2 {
background: #f2e9e1 !important;
padding-top: 0.6rem;
}
.rose-pine-dawn
.text-white.bg-gray-100.dark\:text-gray-800.dark\:bg-gray-600.disabled.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
background-color: #cecacd;
transition: background-color 0.2s ease-out linear;
}
.rose-pine-dawn
.bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
background-color: #286983;
transition: background-color 0.2s ease-out linear;
}
.rose-pine-dawn
.bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center
> * {
fill: #56949f !important;
transition: fill 0.2s ease-out linear;
}
.rose-pine-dawn
.w-full.flex.justify-between.rounded-md.px-3.py-2.hover\:bg-gray-900.bg-gray-900.transition.whitespace-nowrap.text-ellipsis {
background-color: #56526e;
font-weight: bold;
}
.rose-pine-dawn .hover\:bg-gray-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(152 147 165 / var(--tw-bg-opacity));
}
.rose-pine-dawn .text-xs.text-gray-700.uppercase.bg-gray-50.dark\:bg-gray-700.dark\:text-gray-400 {
background-color: #403d52;
}
.rose-pine-dawn .scrollbar-hidden.relative.overflow-x-auto.whitespace-nowrap.svelte-3g4avz {
border-radius: 16px 16px 0 0;
}
.rose-pine-dawn .base.enter.svelte-ug60r4 {
background-color: #286983;
}
.rose-pine-dawn .message.svelte-1nauejd {
color: #e0def4 !important;
}
.rose-pine-dawn #dropdownDots {
background-color: #dfdad9;
}
.rose-pine-dawn .flex.py-2\.5.px-3\.5.w-full.hover\:bg-gray-800.transition:hover {
background: #cecacd;
}
.rose-pine-dawn #dropdownDots {
background-color: #dfdad9;
}
.rose-pine-dawn .flex.py-2\.5.px-3\.5.w-full.hover\:bg-gray-800.transition:hover {
background: #cecacd;
}
.rose-pine-dawn
.m-auto.rounded-xl.max-w-full.w-\[40rem\].mx-2.bg-gray-50.dark\:bg-gray-900.shadow-3xl {
background-color: #f2e9e1;
}
.rose-pine-dawn
.w-full.rounded.p-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.resize-none {
background-color: #cecacd;
}
.rose-pine-dawn
.w-full.rounded.py-2.px-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.svelte-1vx7r9s {
background-color: #cecacd;
}
.rose-pine-dawn
.px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.bg-gray-200.dark\:bg-gray-700 {
background-color: #dfdad9;
}
.rose-pine-dawn
.px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.hover\:bg-gray-300.dark\:hover\:bg-gray-800:hover {
background-color: #cecacd;
}
.rose-pine-dawn .px-4.py-2.bg-emerald-600.hover\:bg-emerald-700.text-gray-100.transition.rounded {
background-color: #56949f;
}
.rose-pine-dawn #chat-search > * {
background-color: #dfdad9 !important;
}
.rose-pine-dawn .svelte-1ee93ns {
--primary: #b4637a !important;
--secondary: #fffaf3 !important;
}
.rose-pine-dawn .svelte-11kvm4p {
--primary: #56949f !important;
--secondary: #fffaf3 !important;
}
static/themes/rosepine.css 0 → 100644
View file @ 0ddb2b32
.rose-pine * {
color: #e0def4 !important;
stroke: #907aa9 !important;
}
.rose-pine .app > * {
background-color: #1f1d2e !important;
}
.rose-pine #nav {
background-color: #191724;
}
.rose-pine .py-2\.5.my-auto.flex.flex-col.justify-between.h-screen {
background: #191724;
}
.rose-pine .bg-white.dark\:bg-gray-800 {
background: #26233a;
}
.rose-pine .w-4.h-4 {
fill: #c4a7e7;
}
.rose-pine #chat-textarea {
background: #393552;
margin: 0.3rem;
padding: 0.5rem;
}
.rose-pine .bg-gradient-to-t.from-white.dark\:from-gray-800.from-40\%.pb-2 {
background: #26233a !important;
padding-top: 0.6rem;
}
.rose-pine
.text-white.bg-gray-100.dark\:text-gray-800.dark\:bg-gray-600.disabled.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
background-color: #6e6a86;
transition: background-color 0.2s ease-out linear;
}
.rose-pine
.bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center {
background-color: #286983;
transition: background-color 0.2s ease-out linear;
}
.rose-pine
.bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center
> * {
fill: #9ccfd8 !important;
transition: fill 0.2s ease-out linear;
}
.rose-pine
.w-full.flex.justify-between.rounded-md.px-3.py-2.hover\:bg-gray-900.bg-gray-900.transition.whitespace-nowrap.text-ellipsis {
background-color: #56526e;
font-weight: bold;
}
.rose-pine .hover\:bg-gray-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(57 53 82 / var(--tw-bg-opacity));
}
.rose-pine .text-xs.text-gray-700.uppercase.bg-gray-50.dark\:bg-gray-700.dark\:text-gray-400 {
background-color: #403d52;
}
.rose-pine .scrollbar-hidden.relative.overflow-x-auto.whitespace-nowrap.svelte-3g4avz {
border-radius: 16px 16px 0 0;
}
.rose-pine .base.enter.svelte-ug60r4 {
background-color: #393552;
}
.rose-pine .message.svelte-1nauejd {
color: #e0def4 !important;
}
.rose-pine #dropdownDots {
background-color: #403d52;
}
.rose-pine .flex.py-2\.5.px-3\.5.w-full.hover\:bg-gray-800.transition:hover {
background: #524f67;
}
.rose-pine .m-auto.rounded-xl.max-w-full.w-\[40rem\].mx-2.bg-gray-50.dark\:bg-gray-900.shadow-3xl {
background-color: #26233a;
}
.rose-pine
.w-full.rounded.p-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.resize-none {
background-color: #524f67;
}
.rose-pine
.w-full.rounded.py-2.px-4.text-sm.dark\:text-gray-300.dark\:bg-gray-800.outline-none.svelte-1vx7r9s {
background-color: #524f67;
}
.rose-pine
.px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.bg-gray-200.dark\:bg-gray-700 {
background-color: #403d52;
}
.rose-pine
.px-2\.5.py-2\.5.min-w-fit.rounded-lg.flex-1.md\:flex-none.flex.text-right.transition.hover\:bg-gray-300.dark\:hover\:bg-gray-800:hover {
background-color: #524f67;
}
.rose-pine .px-4.py-2.bg-emerald-600.hover\:bg-emerald-700.text-gray-100.transition.rounded {
background-color: #31748f;
}
.rose-pine #chat-search > * {
background-color: #403d52 !important;
}
.rose-pine .svelte-1ee93ns {
--primary: #eb6f92 !important;
--secondary: #e0def4 !important;
}
.rose-pine .svelte-11kvm4p {
--primary: #9ccfd8 !important;
--secondary: #1f1d2e !important;
}
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