2023-10-20 18:40:09 +00:00
< script lang = "ts" >
2023-10-08 22:38:42 +00:00
import Modal from '../common/Modal.svelte';
2023-10-22 23:40:17 +00:00
2023-11-24 16:59:03 +00:00
import { WEB_UI_VERSION , OLLAMA_API_BASE_URL } from '$lib/constants';
2023-10-22 23:40:17 +00:00
import toast from 'svelte-french-toast';
2023-11-14 22:27:42 +00:00
import { onMount } from 'svelte';
2023-12-15 03:43:52 +00:00
import { config , info , models , settings , user } from '$lib/stores';
2023-11-20 01:47:07 +00:00
import { splitStream , getGravatarURL } from '$lib/utils';
2023-12-02 22:47:23 +00:00
import Advanced from './Settings/Advanced.svelte';
2023-10-22 23:40:17 +00:00
2023-10-08 22:38:42 +00:00
export let show = false;
2023-11-20 01:47:07 +00:00
const saveSettings = async (updated) => {
console.log(updated);
await settings.set({ ... $settings , ... updated } );
2023-11-22 21:07:25 +00:00
await models.set(await getModels());
2023-11-20 01:47:07 +00:00
localStorage.setItem('settings', JSON.stringify($settings));
};
2023-10-22 23:40:17 +00:00
2023-11-04 00:16:02 +00:00
let selectedTab = 'general';
// General
2023-11-24 16:59:03 +00:00
let API_BASE_URL = OLLAMA_API_BASE_URL;
2023-11-05 23:01:55 +00:00
let theme = 'dark';
2023-12-15 01:48:21 +00:00
let notificationEnabled = false;
2023-11-10 20:43:27 +00:00
let system = '';
2023-11-04 00:16:02 +00:00
// Advanced
2023-11-10 20:43:27 +00:00
let requestFormat = '';
2023-12-02 22:47:23 +00:00
let options = {
// Advanced
seed: 0,
temperature: '',
repeat_penalty: '',
repeat_last_n: '',
mirostat: '',
mirostat_eta: '',
mirostat_tau: '',
top_k: '',
top_p: '',
stop: '',
tfs_z: '',
num_ctx: ''
};
2023-10-22 23:40:17 +00:00
2023-11-10 20:43:27 +00:00
// Models
let modelTag = '';
let deleteModelTag = '';
let digest = '';
let pullProgress = null;
2023-11-05 21:25:23 +00:00
// Addons
2023-11-22 21:20:41 +00:00
let titleAutoGenerate = true;
2023-11-11 21:20:42 +00:00
let speechAutoSend = false;
2023-12-19 02:48:51 +00:00
let responseAutoCopy = false;
2023-12-14 23:32:43 +00:00
2023-11-05 21:25:23 +00:00
let gravatarEmail = '';
let OPENAI_API_KEY = '';
2023-11-14 22:27:42 +00:00
// Auth
let authEnabled = false;
let authType = 'Basic';
let authContent = '';
2023-10-24 08:52:19 +00:00
const checkOllamaConnection = async () => {
2023-10-25 01:12:00 +00:00
if (API_BASE_URL === '') {
2023-11-24 16:59:03 +00:00
API_BASE_URL = OLLAMA_API_BASE_URL;
2023-10-25 01:12:00 +00:00
}
2023-11-20 04:39:13 +00:00
const _models = await getModels(API_BASE_URL, 'ollama');
2023-10-24 08:52:19 +00:00
2023-11-20 04:39:13 +00:00
if (_models.length > 0) {
2023-10-24 08:52:19 +00:00
toast.success('Server connection verified');
2023-11-20 04:39:13 +00:00
await models.set(_models);
2023-11-04 00:16:02 +00:00
saveSettings({
API_BASE_URL: API_BASE_URL
});
2023-10-24 08:52:19 +00:00
}
};
2023-11-05 23:01:55 +00:00
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);
};
2023-11-11 21:20:42 +00:00
const toggleRequestFormat = async () => {
2023-11-10 20:43:27 +00:00
if (requestFormat === '') {
requestFormat = 'json';
} else {
requestFormat = '';
}
saveSettings({ requestFormat : requestFormat !== '' ? requestFormat : undefined } );
};
2023-11-11 21:20:42 +00:00
const toggleSpeechAutoSend = async () => {
speechAutoSend = !speechAutoSend;
saveSettings({ speechAutoSend : speechAutoSend } );
};
2023-11-22 21:20:41 +00:00
const toggleTitleAutoGenerate = async () => {
titleAutoGenerate = !titleAutoGenerate;
saveSettings({ titleAutoGenerate : titleAutoGenerate } );
};
2023-12-15 01:48:21 +00:00
const toggleNotification = async () => {
2023-12-14 23:32:43 +00:00
const permission = await Notification.requestPermission();
if (permission === 'granted') {
2023-12-15 01:48:21 +00:00
notificationEnabled = !notificationEnabled;
saveSettings({ notificationEnabled : notificationEnabled } );
2023-12-14 23:32:43 +00:00
} else {
toast.error(
'Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.'
);
}
};
2023-12-19 02:48:51 +00:00
const toggleResponseAutoCopy = async () => {
const permission = await navigator.clipboard
.readText()
.then(() => {
return 'granted';
})
.catch(() => {
return '';
});
console.log(permission);
if (permission === 'granted') {
responseAutoCopy = !responseAutoCopy;
saveSettings({ responseAutoCopy : responseAutoCopy } );
} else {
toast.error(
'Clipboard write permission denied. Please check your browser settings to grant the necessary access.'
);
}
};
2023-11-14 22:27:42 +00:00
const toggleAuthHeader = async () => {
authEnabled = !authEnabled;
};
2023-10-22 23:40:17 +00:00
const pullModelHandler = async () => {
const res = await fetch(`${ API_BASE_URL } /pull`, {
method: 'POST',
headers: {
2023-11-19 00:47:12 +00:00
'Content-Type': 'text/event-stream',
2023-11-20 02:00:53 +00:00
...($settings.authHeader && { Authorization : $settings.authHeader } ),
2023-11-19 00:47:12 +00:00
...($user && { Authorization : `Bearer $ { localStorage . token } ` } )
2023-10-22 23:40:17 +00:00
},
body: JSON.stringify({
name: modelTag
})
});
const reader = res.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n'))
.getReader();
while (true) {
const { value , done } = await reader.read();
if (done) break;
try {
let lines = value.split('\n');
for (const line of lines) {
if (line !== '') {
console.log(line);
let data = JSON.parse(line);
console.log(data);
if (data.error) {
throw data.error;
}
2023-11-19 05:41:43 +00:00
if (data.detail) {
throw data.detail;
}
2023-10-22 23:40:17 +00:00
if (data.status) {
2023-11-22 20:54:48 +00:00
if (!data.digest) {
2023-10-22 23:40:17 +00:00
toast.success(data.status);
2023-12-15 01:48:21 +00:00
if (data.status === 'success') {
const notification = new Notification(`Ollama`, {
body: `Model '${ modelTag } ' has been successfully downloaded.`,
icon: '/favicon.png'
});
}
2023-10-22 23:40:17 +00:00
} else {
digest = data.digest;
if (data.completed) {
pullProgress = Math.round((data.completed / data.total) * 1000) / 10;
} else {
pullProgress = 100;
}
}
}
}
}
} catch (error) {
console.log(error);
toast.error(error);
}
}
modelTag = '';
2023-11-20 02:00:53 +00:00
models.set(await getModels());
2023-10-22 23:40:17 +00:00
};
const deleteModelHandler = async () => {
const res = await fetch(`${ API_BASE_URL } /delete`, {
method: 'DELETE',
headers: {
2023-11-19 00:47:12 +00:00
'Content-Type': 'text/event-stream',
2023-11-20 02:00:53 +00:00
...($settings.authHeader && { Authorization : $settings.authHeader } ),
2023-11-19 00:47:12 +00:00
...($user && { Authorization : `Bearer $ { localStorage . token } ` } )
2023-10-22 23:40:17 +00:00
},
body: JSON.stringify({
name: deleteModelTag
})
});
const reader = res.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n'))
.getReader();
while (true) {
const { value , done } = await reader.read();
if (done) break;
try {
let lines = value.split('\n');
for (const line of lines) {
if (line !== '' && line !== 'null') {
console.log(line);
let data = JSON.parse(line);
console.log(data);
if (data.error) {
throw data.error;
}
2023-11-19 05:41:43 +00:00
if (data.detail) {
throw data.detail;
}
2023-10-22 23:40:17 +00:00
if (data.status) {
}
} else {
toast.success(`Deleted ${ deleteModelTag } `);
}
}
} catch (error) {
console.log(error);
toast.error(error);
}
}
deleteModelTag = '';
2023-11-20 02:00:53 +00:00
models.set(await getModels());
2023-10-22 23:40:17 +00:00
};
2023-10-22 22:37:06 +00:00
2023-11-20 02:00:53 +00:00
const getModels = async (url = '', type = 'all') => {
2023-11-20 01:47:07 +00:00
let models = [];
2023-11-20 02:00:53 +00:00
const res = await fetch(`${ url ? url : $settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL } /tags`, {
2023-11-20 01:47:07 +00:00
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
2023-11-20 02:00:53 +00:00
...($settings.authHeader && { Authorization : $settings.authHeader } ),
2023-11-20 01:47:07 +00:00
...($user && { Authorization : `Bearer $ { localStorage . token } ` } )
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((error) => {
console.log(error);
if ('detail' in error) {
toast.error(error.detail);
} else {
toast.error('Server connection failed');
}
return null;
});
console.log(res);
2023-11-20 02:00:53 +00:00
models.push(...(res?.models ?? []));
// If OpenAI API Key exists
if (type === 'all' && $settings.OPENAI_API_KEY) {
// Validate OPENAI_API_KEY
const openaiModelRes = await fetch(`https://api.openai.com/v1/models`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${ $settings . OPENAI_API_KEY } `
2023-11-20 01:47:07 +00:00
}
2023-11-20 02:00:53 +00:00
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((error) => {
console.log(error);
toast.error(`OpenAI: ${ error ? . error ? . message ?? 'Network Problem' } `);
return null;
});
const openAIModels = openaiModelRes?.data ?? null;
models.push(
...(openAIModels
? [
{ name : 'hr' } ,
...openAIModels
.map((model) => ({ name : model.id , label : 'OpenAI' } ))
.filter((model) => model.name.includes('gpt'))
]
: [])
);
2023-11-20 01:47:07 +00:00
}
2023-11-20 02:00:53 +00:00
return models;
2023-11-20 01:47:07 +00:00
};
2023-11-14 22:27:42 +00:00
onMount(() => {
let settings = JSON.parse(localStorage.getItem('settings') ?? '{} ');
2023-12-02 22:47:23 +00:00
console.log(settings);
theme = localStorage.theme ?? 'dark';
2023-12-19 02:48:51 +00:00
notificationEnabled = settings.notificationEnabled ?? false;
2023-12-02 22:47:23 +00:00
API_BASE_URL = settings.API_BASE_URL ?? OLLAMA_API_BASE_URL;
system = settings.system ?? '';
requestFormat = settings.requestFormat ?? '';
options.seed = settings.seed ?? 0;
options.temperature = settings.temperature ?? '';
options.repeat_penalty = settings.repeat_penalty ?? '';
options.top_k = settings.top_k ?? '';
options.top_p = settings.top_p ?? '';
options.num_ctx = settings.num_ctx ?? '';
options = { ... options , ... settings . options } ;
titleAutoGenerate = settings.titleAutoGenerate ?? true;
speechAutoSend = settings.speechAutoSend ?? false;
2023-12-19 02:48:51 +00:00
responseAutoCopy = settings.responseAutoCopy ?? false;
2023-12-02 22:47:23 +00:00
gravatarEmail = settings.gravatarEmail ?? '';
OPENAI_API_KEY = settings.OPENAI_API_KEY ?? '';
2023-11-14 22:27:42 +00:00
authEnabled = settings.authHeader !== undefined ? true : false;
if (authEnabled) {
authType = settings.authHeader.split(' ')[0];
authContent = settings.authHeader.split(' ')[1];
}
});
2023-10-08 22:38:42 +00:00
< / script >
< Modal bind:show >
2023-11-08 08:18:34 +00:00
< div >
2023-11-05 23:01:55 +00:00
< div class = " flex justify-between dark:text-gray-300 px-5 py-4" >
2023-10-20 18:40:09 +00:00
< div class = " text-lg font-medium self-center" > Settings< / div >
< button
class="self-center"
on:click={() => {
show = false;
}}
>
< svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5"
>
< path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
< / svg >
< / button >
< / div >
2023-11-05 23:01:55 +00:00
< hr class = " dark:border-gray-800" / >
2023-10-20 18:40:09 +00:00
2023-10-22 22:37:06 +00:00
< div class = "flex flex-col md:flex-row w-full p-4 md:space-x-4" >
< div
2023-11-05 23:01:55 +00:00
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"
2023-10-22 22:37:06 +00:00
>
< button
2023-11-05 20:55:44 +00:00
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition { selectedTab ===
2023-10-22 22:37:06 +00:00
'general'
2023-11-05 23:01:55 +00:00
? 'bg-gray-200 dark:bg-gray-700'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
2023-10-22 22:37:06 +00:00
on:click={() => {
2023-11-04 00:16:02 +00:00
selectedTab = 'general';
2023-10-22 22:37:06 +00:00
}}
2023-10-20 18:40:09 +00:00
>
2023-10-22 22:37:06 +00:00
< div class = " self-center mr-2" >
< 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="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 011.262.125l.962.962a1 1 0 01.125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 01.804.98v1.361a1 1 0 01-.804.98l-1.473.295a6.95 6.95 0 01-.587 1.416l.834 1.25a1 1 0 01-.125 1.262l-.962.962a1 1 0 01-1.262.125l-1.25-.834a6.953 6.953 0 01-1.416.587l-.294 1.473a1 1 0 01-.98.804H9.32a1 1 0 01-.98-.804l-.295-1.473a6.957 6.957 0 01-1.416-.587l-1.25.834a1 1 0 01-1.262-.125l-.962-.962a1 1 0 01-.125-1.262l.834-1.25a6.957 6.957 0 01-.587-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 01.125-1.262l.962-.962A1 1 0 015.38 3.03l1.25.834a6.957 6.957 0 011.416-.587l.294-1.473zM13 10a3 3 0 11-6 0 3 3 0 016 0z"
clip-rule="evenodd"
/>
< / svg >
< / div >
< div class = " self-center" > General< / div >
< / button >
2023-10-20 18:40:09 +00:00
< button
2023-11-05 20:55:44 +00:00
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition { selectedTab ===
'advanced'
2023-11-05 23:01:55 +00:00
? 'bg-gray-200 dark:bg-gray-700'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
2023-11-05 20:55:44 +00:00
on:click={() => {
selectedTab = 'advanced';
}}
>
< div class = " self-center mr-2" >
< svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
< path
d="M17 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM17 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM3.75 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zM4.5 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM10 11a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 11zM10.75 2.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM10 6a2 2 0 100 4 2 2 0 000-4zM3.75 10a2 2 0 100 4 2 2 0 000-4zM16.25 10a2 2 0 100 4 2 2 0 000-4z"
/>
< / svg >
< / div >
< div class = " self-center" > Advanced< / div >
< / button >
< button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition { selectedTab ===
2023-10-22 22:37:06 +00:00
'models'
2023-11-05 23:01:55 +00:00
? 'bg-gray-200 dark:bg-gray-700'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
2023-10-20 18:40:09 +00:00
on:click={() => {
2023-11-04 00:16:02 +00:00
selectedTab = 'models';
2023-10-20 18:40:09 +00:00
}}
>
2023-10-22 22:37:06 +00:00
< div class = " self-center mr-2" >
< 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="M10 1c3.866 0 7 1.79 7 4s-3.134 4-7 4-7-1.79-7-4 3.134-4 7-4zm5.694 8.13c.464-.264.91-.583 1.306-.952V10c0 2.21-3.134 4-7 4s-7-1.79-7-4V8.178c.396.37.842.688 1.306.953C5.838 10.006 7.854 10.5 10 10.5s4.162-.494 5.694-1.37zM3 13.179V15c0 2.21 3.134 4 7 4s7-1.79 7-4v-1.822c-.396.37-.842.688-1.306.953-1.532.875-3.548 1.369-5.694 1.369s-4.162-.494-5.694-1.37A7.009 7.009 0 013 13.179z"
clip-rule="evenodd"
/>
< / svg >
< / div >
< div class = " self-center" > Models< / div >
2023-10-20 18:40:09 +00:00
< / button >
2023-11-04 00:16:02 +00:00
< button
2023-11-05 20:55:44 +00:00
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition { selectedTab ===
'addons'
2023-11-05 23:01:55 +00:00
? 'bg-gray-200 dark:bg-gray-700'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
2023-11-04 00:16:02 +00:00
on:click={() => {
2023-11-05 20:55:44 +00:00
selectedTab = 'addons';
2023-11-04 00:16:02 +00:00
}}
>
< div class = " self-center mr-2" >
< svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
< path
d="M12 4.467c0-.405.262-.75.559-1.027.276-.257.441-.584.441-.94 0-.828-.895-1.5-2-1.5s-2 .672-2 1.5c0 .362.171.694.456.953.29.265.544.6.544.994a.968.968 0 01-1.024.974 39.655 39.655 0 01-3.014-.306.75.75 0 00-.847.847c.14.993.242 1.999.306 3.014A.968.968 0 014.447 10c-.393 0-.729-.253-.994-.544C3.194 9.17 2.862 9 2.5 9 1.672 9 1 9.895 1 11s.672 2 1.5 2c.356 0 .683-.165.94-.441.276-.297.622-.559 1.027-.559a.997.997 0 011.004 1.03 39.747 39.747 0 01-.319 3.734.75.75 0 00.64.842c1.05.146 2.111.252 3.184.318A.97.97 0 0010 16.948c0-.394-.254-.73-.545-.995C9.171 15.693 9 15.362 9 15c0-.828.895-1.5 2-1.5s2 .672 2 1.5c0 .356-.165.683-.441.94-.297.276-.559.622-.559 1.027a.998.998 0 001.03 1.005c1.337-.05 2.659-.162 3.961-.337a.75.75 0 00.644-.644c.175-1.302.288-2.624.337-3.961A.998.998 0 0016.967 12c-.405 0-.75.262-1.027.559-.257.276-.584.441-.94.441-.828 0-1.5-.895-1.5-2s.672-2 1.5-2c.362 0 .694.17.953.455.265.291.601.545.995.545a.97.97 0 00.976-1.024 41.159 41.159 0 00-.318-3.184.75.75 0 00-.842-.64c-1.228.164-2.473.271-3.734.319A.997.997 0 0112 4.467z"
/>
< / svg >
< / div >
2023-11-05 20:55:44 +00:00
< div class = " self-center" > Add-ons< / div >
2023-11-04 00:16:02 +00:00
< / button >
2023-11-05 23:41:25 +00:00
2023-11-19 08:13:59 +00:00
{ #if ! $config || ( $config && ! $config . auth )}
< button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition { selectedTab ===
'auth'
? 'bg-gray-200 dark:bg-gray-700'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
on:click={() => {
selectedTab = 'auth';
}}
>
< div class = " self-center mr-2" >
< svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-4 h-4"
>
< path
fill-rule="evenodd"
d="M12.516 2.17a.75.75 0 00-1.032 0 11.209 11.209 0 01-7.877 3.08.75.75 0 00-.722.515A12.74 12.74 0 002.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 00.374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 00-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08zm3.094 8.016a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"
/>
< / svg >
< / div >
< div class = " self-center" > Authentication< / div >
< / button >
{ /if }
2023-11-14 22:27:42 +00:00
2023-11-05 23:41:25 +00:00
< button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition { selectedTab ===
'about'
? 'bg-gray-200 dark:bg-gray-700'
: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
on:click={() => {
selectedTab = 'about';
}}
>
< div class = " self-center mr-2" >
< 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="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
clip-rule="evenodd"
/>
< / svg >
< / div >
< div class = " self-center" > About< / div >
< / button >
2023-10-20 18:40:09 +00:00
< / div >
2023-12-02 22:47:23 +00:00
< div class = "flex-1 md:min-h-[340px]" >
2023-11-04 00:16:02 +00:00
{ #if selectedTab === 'general' }
2023-10-22 22:37:06 +00:00
< div class = "flex flex-col space-y-3" >
2023-11-05 23:01:55 +00:00
< div >
2023-12-15 01:48:21 +00:00
< div class = " mb-1 text-sm font-medium" > WebUI Settings< / div >
< div class = " py-0.5 flex w-full justify-between" >
< div class = " self-center text-xs font-medium" > Theme< / div >
2023-11-05 23:01:55 +00:00
< 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 >
2023-12-15 01:48:21 +00:00
< div >
< div class = " py-0.5 flex w-full justify-between" >
< div class = " self-center text-xs font-medium" > Notification< / div >
< button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
toggleNotification();
}}
type="button"
>
{ #if notificationEnabled === true }
< span class = "ml-2 self-center" > On< / span >
{ : else }
< span class = "ml-2 self-center" > Off< / span >
{ /if }
< / button >
< / div >
< / div >
2023-11-05 23:01:55 +00:00
< / div >
< hr class = " dark:border-gray-700" / >
2023-10-24 08:52:19 +00:00
< 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
2023-11-05 23:01:55 +00:00
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
2023-10-24 08:52:19 +00:00
placeholder="Enter URL (e.g. http://localhost:11434/api)"
bind:value={ API_BASE_URL }
/>
< / div >
< button
2023-11-05 23:01:55 +00:00
class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 rounded transition"
2023-10-24 08:52:19 +00:00
on:click={() => {
checkOllamaConnection();
}}
>
< 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="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
clip-rule="evenodd"
/>
< / svg >
< / button >
< / div >
2023-11-05 23:01:55 +00:00
< div class = "mt-2 text-xs text-gray-400 dark:text-gray-500" >
2023-10-24 08:52:19 +00:00
Trouble accessing Ollama? < a
2023-11-05 23:01:55 +00:00
class=" text-gray-500 dark:text-gray-300 font-medium"
2023-10-24 08:52:19 +00:00
href="https://github.com/ollama-webui/ollama-webui#troubleshooting"
target="_blank"
>
Click here for help.
< / a >
< / div >
< / div >
2023-11-05 23:01:55 +00:00
< hr class = " dark:border-gray-700" / >
2023-10-24 08:52:19 +00:00
2023-10-22 22:37:06 +00:00
< div >
2023-11-04 00:16:02 +00:00
< div class = " mb-2.5 text-sm font-medium" > System Prompt< / div >
< textarea
bind:value={ system }
2023-11-05 23:01:55 +00:00
class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
2023-11-04 00:16:02 +00:00
rows="4"
2023-10-22 22:37:06 +00:00
/>
< / div >
2023-11-04 00:16:02 +00:00
2023-10-22 22:37:06 +00:00
< div class = "flex justify-end pt-3 text-sm font-medium" >
< button
2023-11-05 23:01:55 +00:00
class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
2023-10-22 22:37:06 +00:00
on:click={() => {
2023-11-04 00:16:02 +00:00
saveSettings({
2023-11-24 16:59:03 +00:00
API_BASE_URL: API_BASE_URL === '' ? OLLAMA_API_BASE_URL : API_BASE_URL,
2023-11-04 00:16:02 +00:00
system: system !== '' ? system : undefined
});
2023-10-22 22:37:06 +00:00
show = false;
}}
>
Save
< / button >
< / div >
< / div >
2023-11-04 00:16:02 +00:00
{ :else if selectedTab === 'advanced' }
2023-12-02 22:47:23 +00:00
< div class = "flex flex-col h-full justify-between text-sm" >
< div class = " space-y-3 pr-1.5 overflow-y-scroll max-h-72" >
< div class = " text-sm font-medium" > Parameters< / div >
2023-11-30 03:58:30 +00:00
2023-12-02 22:47:23 +00:00
< Advanced bind:options / >
2023-11-30 03:58:30 +00:00
< hr class = " dark:border-gray-700" / >
2023-11-05 03:00:17 +00:00
< div >
2023-11-10 20:43:27 +00:00
< div class = " py-1 flex w-full justify-between" >
< div class = " self-center text-sm font-medium" > Request Mode< / div >
< button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
2023-11-11 21:20:42 +00:00
toggleRequestFormat();
2023-11-10 20:43:27 +00:00
}}
>
{ #if requestFormat === '' }
< span class = "ml-2 self-center" > Default < / span >
{ :else if requestFormat === 'json' }
<!-- <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" > JSON < / span >
{ /if }
< / button >
< / div >
< / div >
2023-11-04 00:16:02 +00:00
< / div >
2023-12-02 22:47:23 +00:00
2023-11-04 00:16:02 +00:00
< div class = "flex justify-end pt-3 text-sm font-medium" >
< button
2023-11-05 23:01:55 +00:00
class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
2023-11-04 00:16:02 +00:00
on:click={() => {
saveSettings({
2023-12-02 22:47:23 +00:00
options: {
seed: (options.seed !== 0 ? options.seed : undefined) ?? undefined,
stop: options.stop !== '' ? options.stop : undefined,
temperature: options.temperature !== '' ? options.temperature : undefined,
repeat_penalty:
options.repeat_penalty !== '' ? options.repeat_penalty : undefined,
repeat_last_n:
options.repeat_last_n !== '' ? options.repeat_last_n : undefined,
mirostat: options.mirostat !== '' ? options.mirostat : undefined,
mirostat_eta: options.mirostat_eta !== '' ? options.mirostat_eta : undefined,
mirostat_tau: options.mirostat_tau !== '' ? options.mirostat_tau : undefined,
top_k: options.top_k !== '' ? options.top_k : undefined,
top_p: options.top_p !== '' ? options.top_p : undefined,
tfs_z: options.tfs_z !== '' ? options.tfs_z : undefined,
num_ctx: options.num_ctx !== '' ? options.num_ctx : undefined
}
2023-11-04 00:16:02 +00:00
});
show = false;
}}
>
Save
< / button >
< / div >
< / div >
2023-11-05 23:41:25 +00:00
{ :else if selectedTab === 'models' }
< div class = "flex flex-col space-y-3 text-sm mb-10" >
< div >
< div class = " mb-2.5 text-sm font-medium" > Pull 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 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 text-gray-100 bg-emerald-600 hover:bg-emerald-700 rounded transition"
on:click={() => {
pullModelHandler();
}}
>
< svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
< path
d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z"
/>
< path
d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"
/>
< / svg >
< / button >
< / div >
< 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-500 dark:text-gray-300 font-medium"
href="https://ollama.ai/library"
target="_blank">click here.< /a
>
< / div >
{ #if pullProgress !== null }
< div class = "mt-2" >
< div class = " mb-2 text-xs" > Pull Progress< / div >
< div class = "w-full rounded-full dark:bg-gray-800" >
< div
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 >
2023-12-03 01:11:27 +00:00
< div class = "mt-1 text-xs dark:text-gray-500" style = "font-size: 0.5rem;" >
2023-11-05 23:41:25 +00:00
{ digest }
< / div >
< / div >
{ /if }
< / div >
< 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" >
2023-12-11 16:06:55 +00:00
< select
2023-11-05 23:41:25 +00:00
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
bind:value={ deleteModelTag }
2023-12-11 16:06:55 +00:00
placeholder="Select a model"
>
{ #if ! deleteModelTag }
< option value = "" disabled selected > Select a model< / option >
{ /if }
{ #each $models . filter (( m ) => m . size != null ) as model }
< option value = { model . name } class="bg-gray-100 dark:bg-gray-700 "
2023-12-11 16:23:42 +00:00
>{ model . name + ' (' + ( model . size / 1024 ** 3 ). toFixed ( 1 ) + ' GB)' } < /option
2023-12-11 16:06:55 +00:00
>
{ /each }
< / select >
2023-11-05 23:41:25 +00:00
< / div >
< button
class="px-3 bg-red-700 hover:bg-red-800 text-gray-100 rounded transition"
on:click={() => {
deleteModelHandler();
}}
>
< 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="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z"
clip-rule="evenodd"
/>
< / svg >
< / button >
< / div >
< / div >
< / div >
2023-11-05 20:55:44 +00:00
{ :else if selectedTab === 'addons' }
2023-11-05 21:25:23 +00:00
< form
class="flex flex-col h-full justify-between space-y-3 text-sm"
on:submit| preventDefault={() => {
saveSettings({
gravatarEmail: gravatarEmail !== '' ? gravatarEmail : undefined,
gravatarUrl: gravatarEmail !== '' ? getGravatarURL(gravatarEmail) : undefined,
OPENAI_API_KEY: OPENAI_API_KEY !== '' ? OPENAI_API_KEY : undefined
});
show = false;
}}
>
2023-11-05 20:55:44 +00:00
< div class = " space-y-3" >
2023-11-22 21:20:41 +00:00
< div >
2023-12-14 23:32:43 +00:00
< div class = " mb-1 text-sm font-medium" > WebUI Add-ons< / div >
< div >
< div class = " py-0.5 flex w-full justify-between" >
< div class = " self-center text-xs font-medium" > Title Auto Generation< / div >
2023-11-22 21:20:41 +00:00
2023-12-14 23:32:43 +00:00
< button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
toggleTitleAutoGenerate();
}}
type="button"
>
{ #if titleAutoGenerate === true }
< span class = "ml-2 self-center" > On< / span >
{ : else }
< span class = "ml-2 self-center" > Off< / span >
{ /if }
< / button >
< / div >
< / div >
2023-11-11 21:20:42 +00:00
2023-12-14 23:32:43 +00:00
< div >
< div class = " py-0.5 flex w-full justify-between" >
< div class = " self-center text-xs font-medium" > Voice Input Auto-Send< / div >
< button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
toggleSpeechAutoSend();
}}
type="button"
>
{ #if speechAutoSend === true }
< span class = "ml-2 self-center" > On< / span >
{ : else }
< span class = "ml-2 self-center" > Off< / span >
{ /if }
< / button >
< / div >
2023-11-11 21:20:42 +00:00
< / div >
2023-12-19 02:48:51 +00:00
< div >
< div class = " py-0.5 flex w-full justify-between" >
< div class = " self-center text-xs font-medium" >
Response AutoCopy to Clipboard
< / div >
< button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
toggleResponseAutoCopy();
}}
type="button"
>
{ #if responseAutoCopy === true }
< span class = "ml-2 self-center" > On< / span >
{ : else }
< span class = "ml-2 self-center" > Off< / span >
{ /if }
< / button >
< / div >
< / div >
2023-11-11 21:20:42 +00:00
< / div >
< hr class = " dark:border-gray-700" / >
2023-11-05 21:25:23 +00:00
< div >
< div class = " mb-2.5 text-sm font-medium" >
Gravatar Email < span class = " text-gray-400 text-sm" > (optional)< / span >
< / div >
< div class = "flex w-full" >
< div class = "flex-1" >
< input
2023-11-05 23:01:55 +00:00
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
2023-11-05 21:25:23 +00:00
placeholder="Enter Your Email"
bind:value={ gravatarEmail }
autocomplete="off"
type="email"
/>
< / div >
< / div >
2023-11-05 23:01:55 +00:00
< div class = "mt-2 text-xs text-gray-400 dark:text-gray-500" >
2023-11-05 21:25:23 +00:00
Changes user profile image to match your < a
2023-11-05 23:01:55 +00:00
class=" text-gray-500 dark:text-gray-300 font-medium"
2023-11-05 21:25:23 +00:00
href="https://gravatar.com/"
target="_blank">Gravatar.< /a
>
< / div >
< / div >
2023-11-05 23:01:55 +00:00
< hr class = " dark:border-gray-700" / >
2023-11-05 20:55:44 +00:00
< div >
< div class = " mb-2.5 text-sm font-medium" >
OpenAI API Key < span class = " text-gray-400 text-sm" > (optional)< / span >
< / div >
< div class = "flex w-full" >
< div class = "flex-1" >
< input
2023-11-05 23:01:55 +00:00
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
2023-11-05 20:55:44 +00:00
placeholder="Enter OpenAI API Key"
bind:value={ OPENAI_API_KEY }
autocomplete="off"
/>
< / div >
< / div >
2023-11-05 23:01:55 +00:00
< div class = "mt-2 text-xs text-gray-400 dark:text-gray-500" >
2023-11-05 20:55:44 +00:00
Adds optional support for 'gpt-*' models available.
< / div >
< / div >
< / div >
2023-11-14 22:27:42 +00:00
< div class = "flex justify-end pt-3 text-sm font-medium" >
< button
class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
type="submit"
>
Save
< / button >
< / div >
< / form >
{ :else if selectedTab === 'auth' }
< form
class="flex flex-col h-full justify-between space-y-3 text-sm"
on:submit| preventDefault={() => {
console.log('auth save');
saveSettings({
authHeader: authEnabled ? `${ authType } ${ authContent } ` : undefined
});
show = false;
}}
>
< div class = " space-y-3" >
< div >
< div class = " py-1 flex w-full justify-between" >
< div class = " self-center text-sm font-medium" > Authorization Header< / div >
< button
class="p-1 px-3 text-xs flex rounded transition"
type="button"
on:click={() => {
toggleAuthHeader();
}}
>
{ #if authEnabled === true }
< svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-4 h-4"
>
< path
fill-rule="evenodd"
d="M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z"
clip-rule="evenodd"
/>
< / svg >
< span class = "ml-2 self-center" > On < / span >
{ : else }
< svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-4 h-4"
>
< path
d="M18 1.5c2.9 0 5.25 2.35 5.25 5.25v3.75a.75.75 0 01-1.5 0V6.75a3.75 3.75 0 10-7.5 0v3a3 3 0 013 3v6.75a3 3 0 01-3 3H3.75a3 3 0 01-3-3v-6.75a3 3 0 013-3h9v-3c0-2.9 2.35-5.25 5.25-5.25z"
/>
< / svg >
< span class = "ml-2 self-center" > Off< / span >
{ /if }
< / button >
< / div >
< / div >
{ #if authEnabled }
< hr class = " dark:border-gray-700" / >
< div class = "mt-2" >
< div class = " py-1 flex w-full space-x-2" >
< button
class=" py-1 font-semibold flex rounded transition"
on:click={() => {
authType = authType === 'Basic' ? 'Bearer' : 'Basic';
}}
type="button"
>
{ #if authType === 'Basic' }
< span class = "self-center mr-2" > Basic< / span >
{ :else if authType === 'Bearer' }
< span class = "self-center mr-2" > Bearer< / span >
{ /if }
< / button >
< div class = "flex-1" >
< input
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
placeholder="Enter Authorization Header Content"
bind:value={ authContent }
/>
< / div >
< / div >
< div class = "mt-2 text-xs text-gray-400 dark:text-gray-500" >
Toggle between < span class = " text-gray-500 dark:text-gray-300 font-medium"
>'Basic'< /span
>
and < span class = " text-gray-500 dark:text-gray-300 font-medium" > 'Bearer'< / span > by
clicking on the label next to the input.
< / div >
< / div >
< hr class = " dark:border-gray-700" / >
< div >
< div class = " mb-2.5 text-sm font-medium" > Preview Authorization Header< / div >
< textarea
value={ JSON . stringify ({
Authorization: `${ authType } ${ authContent } `
})}
class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
rows="2"
disabled
/>
< / div >
{ /if }
< / div >
2023-11-05 20:55:44 +00:00
< div class = "flex justify-end pt-3 text-sm font-medium" >
< button
2023-11-05 23:01:55 +00:00
class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
2023-11-05 21:25:23 +00:00
type="submit"
2023-11-05 20:55:44 +00:00
>
Save
< / button >
< / div >
2023-11-05 21:25:23 +00:00
< / form >
2023-11-05 23:41:25 +00:00
{ :else if selectedTab === 'about' }
2023-11-07 23:16:20 +00:00
< div class = "flex flex-col h-full justify-between space-y-3 text-sm mb-6" >
2023-11-05 23:41:25 +00:00
< div class = " space-y-3" >
< div >
< div class = " mb-2.5 text-sm font-medium" > Ollama Web UI Version< / div >
< div class = "flex w-full" >
2023-11-08 07:51:56 +00:00
< div class = "flex-1 text-xs text-gray-700 dark:text-gray-200" >
2023-11-19 00:47:12 +00:00
{ $config && $config . version ? $config.version : WEB_UI_VERSION }
2023-11-08 07:51:56 +00:00
< / div >
2023-11-05 23:41:25 +00:00
< / div >
< / div >
< hr class = " dark:border-gray-700" / >
2023-12-15 03:43:52 +00:00
< div >
< div class = " mb-2.5 text-sm font-medium" > Ollama Version< / div >
< div class = "flex w-full" >
< div class = "flex-1 text-xs text-gray-700 dark:text-gray-200" >
{ $info ? . ollama ? . version ?? 'N/A' }
< / div >
< / div >
< / div >
< hr class = " dark:border-gray-700" / >
2023-11-05 23:41:25 +00:00
< div class = "mt-2 text-xs text-gray-400 dark:text-gray-500" >
Created by < a
class=" text-gray-500 dark:text-gray-300 font-medium"
href="https://github.com/tjbck"
target="_blank">Timothy J. Baek< /a
>
< / div >
< div >
2023-11-05 23:54:06 +00:00
< a href = "https://github.com/ollama-webui/ollama-webui" >
< img
2023-11-06 09:12:27 +00:00
alt="Github Repo"
2023-11-05 23:54:06 +00:00
src="https://img.shields.io/github/stars/ollama-webui/ollama-webui?style=social& label=Star us on Github"
/>
< / a >
2023-11-05 23:41:25 +00:00
< / div >
< / div >
< / div >
2023-10-22 22:37:06 +00:00
{ /if }
< / div >
2023-10-20 18:40:09 +00:00
< / div >
2023-10-08 22:38:42 +00:00
< / div >
< / Modal >
2023-11-05 03:00:17 +00:00
< style >
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; < - Crashes Chrome on hover * /
-webkit-appearance: none;
margin: 0; /* < -- Apparently some margin are still there even though it ' s hidden * /
}
2023-11-05 20:55:44 +00:00
.tabs::-webkit-scrollbar {
display: none; /* for Chrome, Safari and Opera */
}
.tabs {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
2023-11-05 03:00:17 +00:00
input[type='number'] {
-moz-appearance: textfield; /* Firefox */
}
< / style >
