forked from open-webui/open-webui
feat: enable api_base_url edit from ui
This commit is contained in:
Timothy J. Baek
parent
00b5b38ac9
commit
b6a780e7c7
5 changed files with 167 additions and 28 deletions
|
|
@ -1,13 +1,14 @@
|
|||
<script lang="ts">
|
||||
import Modal from '../common/Modal.svelte';
|
||||
|
||||
import { API_BASE_URL } from '$lib/constants';
|
||||
import { API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants';
|
||||
import toast from 'svelte-french-toast';
|
||||
|
||||
export let show = false;
|
||||
export let saveSettings: Function;
|
||||
export let getModelTags: Function;
|
||||
|
||||
let API_BASE_URL = BUILD_TIME_API_BASE_URL;
|
||||
let system = '';
|
||||
let temperature = 0.8;
|
||||
|
||||
|
|
@ -33,6 +34,14 @@
|
|||
});
|
||||
};
|
||||
|
||||
const checkOllamaConnection = async () => {
|
||||
const res = await getModelTags(API_BASE_URL);
|
||||
|
||||
if (res) {
|
||||
toast.success('Server connection verified');
|
||||
}
|
||||
};
|
||||
|
||||
const pullModelHandler = async () => {
|
||||
const res = await fetch(`${API_BASE_URL}/pull`, {
|
||||
method: 'POST',
|
||||
|
|
@ -139,6 +148,7 @@
|
|||
|
||||
$: if (show) {
|
||||
let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
|
||||
API_BASE_URL = settings.API_BASE_URL ?? BUILD_TIME_API_BASE_URL;
|
||||
system = settings.system ?? '';
|
||||
temperature = settings.temperature ?? 0.8;
|
||||
}
|
||||
|
|
@ -227,6 +237,50 @@
|
|||
<div class="flex-1 md:min-h-[300px]">
|
||||
{#if selectedMenu === 'general'}
|
||||
<div class="flex flex-col space-y-3">
|
||||
<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
|
||||
class="w-full rounded py-2 px-4 text-sm text-gray-300 bg-gray-800 outline-none"
|
||||
placeholder="Enter URL (e.g. http://localhost:11434/api)"
|
||||
bind:value={API_BASE_URL}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="px-3 bg-gray-600 hover:bg-gray-700 rounded transition"
|
||||
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>
|
||||
|
||||
<div class="mt-2 text-xs text-gray-500">
|
||||
Trouble accessing Ollama? <a
|
||||
class=" text-gray-300 font-medium"
|
||||
href="https://github.com/ollama-webui/ollama-webui#troubleshooting"
|
||||
target="_blank"
|
||||
>
|
||||
Click here for help.
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class=" border-gray-700" />
|
||||
|
||||
<div>
|
||||
<div class=" mb-2.5 text-sm font-medium">System Prompt</div>
|
||||
<textarea
|
||||
|
|
@ -260,6 +314,7 @@
|
|||
class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 transition rounded"
|
||||
on:click={() => {
|
||||
saveSettings(
|
||||
API_BASE_URL === '' ? BUILD_TIME_API_BASE_URL : API_BASE_URL,
|
||||
system != '' ? system : null,
|
||||
temperature != 0.8 ? temperature : null
|
||||
);
|
||||
|
|
@ -305,11 +360,11 @@
|
|||
</div>
|
||||
|
||||
<div class="mt-2 text-xs text-gray-500">
|
||||
To access the available model names for downloading, click <a
|
||||
To access the available model names for downloading, <a
|
||||
class=" text-gray-300 font-medium"
|
||||
href="https://ollama.ai/library"
|
||||
target="_blank">here</a
|
||||
>.
|
||||
target="_blank">click here.</a
|
||||
>
|
||||
</div>
|
||||
|
||||
{#if pullProgress !== ''}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,14 @@
|
|||
import fileSaver from 'file-saver';
|
||||
const { saveAs } = fileSaver;
|
||||
import hljs from 'highlight.js';
|
||||
import 'highlight.js/styles/dark.min.css';
|
||||
import { API_BASE_URL } from '$lib/constants';
|
||||
import 'highlight.js/styles/github-dark.min.css';
|
||||
import { API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants';
|
||||
import { onMount, tick } from 'svelte';
|
||||
|
||||
import Navbar from '$lib/components/layout/Navbar.svelte';
|
||||
import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
|
||||
|
||||
let API_BASE_URL = BUILD_TIME_API_BASE_URL;
|
||||
let suggestions = ''; // $page.url.searchParams.get('suggestions');
|
||||
|
||||
let models = [];
|
||||
|
|
@ -31,21 +32,19 @@
|
|||
let messages = [];
|
||||
|
||||
onMount(async () => {
|
||||
let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
|
||||
|
||||
API_BASE_URL = settings.API_BASE_URL ?? BUILD_TIME_API_BASE_URL;
|
||||
console.log(API_BASE_URL);
|
||||
system = settings.system ?? null;
|
||||
temperature = settings.temperature ?? null;
|
||||
|
||||
await getModelTags();
|
||||
|
||||
let settings = localStorage.getItem('settings');
|
||||
if (settings) {
|
||||
settings = JSON.parse(settings);
|
||||
console.log(settings);
|
||||
|
||||
selectedModel =
|
||||
settings.model && models.map((model) => model.name).includes(settings.model)
|
||||
? settings.model
|
||||
: '';
|
||||
system = settings.system ?? null;
|
||||
temperature = settings.temperature ?? null;
|
||||
}
|
||||
selectedModel =
|
||||
settings.model && models.map((model) => model.name).includes(settings.model)
|
||||
? settings.model
|
||||
: '';
|
||||
|
||||
db = await openDB('Chats', 1, {
|
||||
upgrade(db) {
|
||||
|
|
@ -133,21 +132,23 @@
|
|||
toast.success('Default model updated');
|
||||
};
|
||||
|
||||
const saveSettings = (_system, _temperature) => {
|
||||
const saveSettings = async (_api_base_url, _system, _temperature) => {
|
||||
API_BASE_URL = _api_base_url;
|
||||
system = _system;
|
||||
temperature = _temperature;
|
||||
|
||||
let settings = localStorage.getItem('settings') ?? '{}';
|
||||
if (settings) {
|
||||
settings = JSON.parse(settings);
|
||||
|
||||
settings.API_BASE_URL = API_BASE_URL;
|
||||
settings.system = system;
|
||||
settings.temperature = temperature;
|
||||
localStorage.setItem('settings', JSON.stringify(settings));
|
||||
}
|
||||
|
||||
console.log(settings);
|
||||
|
||||
console.log('saved');
|
||||
await getModelTags();
|
||||
};
|
||||
|
||||
const createNewChat = () => {
|
||||
|
|
@ -163,7 +164,10 @@
|
|||
settings = JSON.parse(settings);
|
||||
console.log(settings);
|
||||
|
||||
selectedModel = settings.model ?? selectedModel;
|
||||
selectedModel =
|
||||
settings.model && models.map((model) => model.name).includes(settings.model)
|
||||
? settings.model
|
||||
: '';
|
||||
system = settings.system ?? system;
|
||||
temperature = settings.temperature ?? temperature;
|
||||
}
|
||||
|
|
@ -219,8 +223,8 @@
|
|||
// Ollama functions
|
||||
//////////////////////////
|
||||
|
||||
const getModelTags = async () => {
|
||||
const res = await fetch(`${API_BASE_URL}/tags`, {
|
||||
const getModelTags = async (url = null) => {
|
||||
const res = await fetch(`${url === null ? API_BASE_URL : url}/tags`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
|
|
@ -233,11 +237,13 @@
|
|||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
return { models: [] };
|
||||
toast.error('Server connection failed');
|
||||
return null;
|
||||
});
|
||||
|
||||
console.log(res);
|
||||
models = res.models ?? [];
|
||||
models = res?.models ?? [];
|
||||
return res;
|
||||
};
|
||||
|
||||
const submitPrompt = async (user_prompt) => {
|
||||
|
|
@ -609,7 +615,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="markdown-body whitespace-pre-line">
|
||||
<div class="whitespace-pre-line">
|
||||
{@html marked.parse(message.content)}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue