mirror of https://github.com/open-webui/open-webui
feat: model pull/delete added
This commit is contained in:
Timothy J. Baek
parent
e1361e68ec
commit
08b43fc987
|
|
@ -14,6 +14,8 @@ ChatGPT-Style Web Interface for Ollama 🦙
|
|||
|
||||
- 🚀 **Effortless Setup**: Install seamlessly using Docker for a hassle-free experience.
|
||||
|
||||
- 📥🗑️ **Download/Delete Models**: Easily download or remove models directly from the web UI.
|
||||
|
||||
- 🤖 **Multiple Model Support**: Seamlessly switch between different chat models for diverse interactions.
|
||||
|
||||
- 📜 **Chat History**: Effortlessly access and manage your conversation history.
|
||||
|
|
@ -124,7 +126,6 @@ Here are some exciting tasks on our to-do list:
|
|||
- 🌐 **Web Browser Extension**: Seamlessly integrate our services into your browsing experience with our convenient browser extension.
|
||||
- 🚀 **Integration with Messaging Platforms**: Explore possibilities for integrating with popular messaging platforms like Slack and Discord.
|
||||
- 🎨 **Customization**: Tailor your chat environment with personalized themes and styles.
|
||||
- 📥🗑️ **Download/Delete Models**: Easily acquire or remove models directly from the web UI.
|
||||
- 📚 **Enhanced Documentation**: Elevate your setup and customization experience with improved, comprehensive documentation.
|
||||
- 🌟 **User Interface Enhancement**: Elevate the user interface to deliver a smoother, more enjoyable interaction.
|
||||
- 🧐 **User Testing and Feedback Gathering**: Conduct thorough user testing to gather insights and refine our offerings based on valuable user feedback.
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
html {
|
||||
@apply bg-gray-800;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,141 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import Modal from '../common/Modal.svelte';
|
||||
|
||||
import { 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 system = '';
|
||||
let temperature = 0.8;
|
||||
|
||||
let selectedMenu = 'general';
|
||||
let modelTag = '';
|
||||
let deleteModelTag = '';
|
||||
|
||||
let digest = '';
|
||||
let pullProgress = '';
|
||||
|
||||
const splitStream = (splitOn) => {
|
||||
let buffer = '';
|
||||
return new TransformStream({
|
||||
transform(chunk, controller) {
|
||||
buffer += chunk;
|
||||
const parts = buffer.split(splitOn);
|
||||
parts.slice(0, -1).forEach((part) => controller.enqueue(part));
|
||||
buffer = parts[parts.length - 1];
|
||||
},
|
||||
flush(controller) {
|
||||
if (buffer) controller.enqueue(buffer);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const pullModelHandler = async () => {
|
||||
const res = await fetch(`${API_BASE_URL}/pull`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'text/event-stream'
|
||||
},
|
||||
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;
|
||||
}
|
||||
if (data.status) {
|
||||
if (!data.status.includes('downloading')) {
|
||||
toast.success(data.status);
|
||||
} 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 = '';
|
||||
await getModelTags();
|
||||
};
|
||||
|
||||
const deleteModelHandler = async () => {
|
||||
const res = await fetch(`${API_BASE_URL}/delete`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'text/event-stream'
|
||||
},
|
||||
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;
|
||||
}
|
||||
if (data.status) {
|
||||
}
|
||||
} else {
|
||||
toast.success(`Deleted ${deleteModelTag}`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
deleteModelTag = '';
|
||||
await getModelTags();
|
||||
};
|
||||
|
||||
$: if (show) {
|
||||
let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
|
||||
|
|
@ -41,7 +170,7 @@
|
|||
|
||||
<div class="flex flex-col md:flex-row w-full p-4 md:space-x-4">
|
||||
<div
|
||||
class="flex flex-row space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-36 text-gray-200 text-xs text-left mb-3 md:mb-0"
|
||||
class="flex flex-row space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 text-gray-200 text-xs text-left mb-3 md:mb-0"
|
||||
>
|
||||
<button
|
||||
class="px-2 py-2 rounded flex-1 md:flex-none flex text-right transition {selectedMenu ===
|
||||
|
|
@ -95,7 +224,7 @@
|
|||
<div class=" self-center">Models</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 md:min-h-[280px]">
|
||||
<div class="flex-1 md:min-h-[300px]">
|
||||
{#if selectedMenu === 'general'}
|
||||
<div class="flex flex-col space-y-3">
|
||||
<div>
|
||||
|
|
@ -107,6 +236,8 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<hr class=" border-gray-700" />
|
||||
|
||||
<div>
|
||||
<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
|
||||
<div>Temperature</div>
|
||||
|
|
@ -140,9 +271,96 @@
|
|||
</div>
|
||||
</div>
|
||||
{:else if selectedMenu === 'models'}
|
||||
<div class="text-sm">
|
||||
<div class="flex flex-col space-y-3 text-sm">
|
||||
<div>
|
||||
<div>Pull a model</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 text-gray-300 bg-gray-800 outline-none"
|
||||
placeholder="Enter model tag (e.g. mistral:7b)"
|
||||
bind:value={modelTag}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="px-3 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-500">
|
||||
To access the available model names for downloading, click <a
|
||||
class=" text-gray-300 font-medium"
|
||||
href="https://ollama.ai/library"
|
||||
target="_blank">here</a
|
||||
>.
|
||||
</div>
|
||||
|
||||
{#if pullProgress !== ''}
|
||||
<div class="mt-2">
|
||||
<div class=" mb-2 text-xs">Pull Progress</div>
|
||||
<div class="w-full rounded-full bg-gray-800">
|
||||
<div
|
||||
class="bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
|
||||
style="width: {Math.max(10, pullProgress)}%"
|
||||
>
|
||||
{pullProgress}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-gray-700" style="font-size: 0.5rem;">
|
||||
{digest}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<hr class=" 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">
|
||||
<input
|
||||
class="w-full rounded py-2 px-4 text-sm text-gray-300 bg-gray-800 outline-none"
|
||||
placeholder="Enter model tag (e.g. mistral:7b)"
|
||||
bind:value={deleteModelTag}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="px-3 bg-red-700 hover:bg-red-800 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>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -32,24 +32,7 @@
|
|||
|
||||
onMount(async () => {
|
||||
console.log(API_BASE_URL);
|
||||
const res = await fetch(`${API_BASE_URL}/tags`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
return { models: [] };
|
||||
});
|
||||
|
||||
const data = res;
|
||||
models = data.models;
|
||||
await getModelTags();
|
||||
|
||||
let settings = localStorage.getItem('settings');
|
||||
if (settings) {
|
||||
|
|
@ -233,6 +216,27 @@
|
|||
// Ollama functions
|
||||
//////////////////////////
|
||||
|
||||
const getModelTags = async () => {
|
||||
const res = await fetch(`${API_BASE_URL}/tags`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
return { models: [] };
|
||||
});
|
||||
|
||||
const data = res;
|
||||
models = data.models;
|
||||
};
|
||||
|
||||
const submitPrompt = async (user_prompt) => {
|
||||
console.log('submitPrompt');
|
||||
|
||||
|
|
@ -493,7 +497,7 @@
|
|||
{openSettings}
|
||||
/>
|
||||
|
||||
<SettingsModal bind:show={showSettings} {saveSettings} />
|
||||
<SettingsModal bind:show={showSettings} {saveSettings} {getModelTags} />
|
||||
|
||||
<div class="min-h-screen w-full flex justify-center">
|
||||
<div class=" py-2.5 flex flex-col justify-between w-full">
|
||||
|
|
|
|||
Loading…
Reference in New Issue