feat: model pull/delete added

README.md

@@ -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.

src/app.css

@@ -6,6 +6,7 @@
 
 html {
 	@apply bg-gray-800;
+	word-break: break-all;
 }
 
 .hljs {

src/lib/components/chat/SettingsModal.svelte

@@ -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 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>Pull a model</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}

src/routes/+page.svelte

@@ -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">