Merge pull request #4 from ollama-webui/dev

new features added

Merge pull request #4 from ollama-webui/dev
new features added
bc0a2a5d · Timothy Jaeryang Baek · GitHub · ecb4d1b8 · 9a76d36a · bc0a2a5d
Unverified Commit bc0a2a5d authored Oct 20, 2023 by Timothy Jaeryang Baek Committed by GitHub Oct 20, 2023
7 changed files
--- a/README.md
+++ b/README.md
@@ -12,8 +12,10 @@ ChatGPT-Style Web Interface for Ollama 🦙
 - 🚀 **Effortless Setup**: Install seamlessly using Docker for a hassle-free experience.
 - 🤖 **Multiple Model Support**: Seamlessly switch between different chat models for diverse interactions.
 - 📜 **Chat History**: Effortlessly access and manage your conversation history.
+- 📤📥 **Import/Export Chat History**: Seamlessly move your chat data in and out of the platform.
+- ⚙️ **Fine-Tuned Control with Advanced Parameters**: Gain a deeper level of control by adjusting parameters such as temperature and defining your system prompts to tailor the conversation to your specific preferences and needs.
 - 💻 **Code Syntax Highlighting**: Enjoy enhanced code readability with our syntax highlighting feature.
- 🔗 **External Server Connection**: Link to the model when Ollama is hosted on a different server via the environment variable -e OLLAMA_ENDPOINT="http://[insert your Ollama address]".
+- 🔗 **External Ollama Server Connection**: Link to the model when Ollama is hosted on a different server via the environment variable -e OLLAMA_ENDPOINT="http://[insert your Ollama address]".
 - 🌟 **Continuous Updates**: We are committed to improving Ollama Web UI with regular updates and new features.

 ## How to Install 🚀
@@ -58,12 +60,10 @@ docker run -d -p 3000:3000 --add-host=host.docker.internal:host-gateway -e OLLAM

 Here are some exciting tasks on our to-do list:

- 📤📥 **Import/Export Chat History**: Seamlessly move your chat data in and out of the platform.
 - 🌐 **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.
- ⚙️ **Advanced Parameters Support**: Harness the power of advanced settings for fine-tuned control.
 - 📚 **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.

--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"@sveltejs/adapter-node": "^1.3.1",
+				"file-saver": "^2.0.5",
 				"highlight.js": "^11.9.0",
 				"idb": "^7.1.1",
 				"marked": "^9.1.0",
@@ -1902,6 +1903,11 @@
 				"node": "^10.12.0 || >=12.0.0"
 			}
 		},
+		"node_modules/file-saver": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+			"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+		},
 		"node_modules/fill-range": {
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -5039,6 +5045,11 @@
 				"flat-cache": "^3.0.4"
 			}
 		},
+		"file-saver": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+			"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+		},
 		"fill-range": {
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",

--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
 	"type": "module",
 	"dependencies": {
 		"@sveltejs/adapter-node": "^1.3.1",
+		"file-saver": "^2.0.5",
 		"highlight.js": "^11.9.0",
 		"idb": "^7.1.1",
 		"marked": "^9.1.0",

--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
-<script>
+<script lang="ts">
+	import { onMount } from 'svelte';
 	import Modal from '../common/Modal.svelte';
 	export let show = false;
+	export let saveSettings: Function;
+	let system = '';
+	let temperature = 0.8;
+
+	$: if (show) {
+		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
+		system = settings.system ?? '';
+		temperature = settings.temperature ?? 0.8;
+	}
 </script>

 <Modal bind:show>
-	<div class="mt-3 p-3 rounded-lg bg-gray-900">
-		<label for="models" class="block mb-2 text-sm font-medium text-gray-200">Select a model</label>
-		<select
-			id="models"
-			class="border border-gray-600 bg-gray-700 text-gray-200 text-sm rounded-lg block w-full p-2.5 placeholder-gray-400"
-		>
-			<option value="US">United States</option>
-			<option value="CA">Canada</option>
-			<option value="FR">France</option>
-			<option value="DE">Germany</option>
-		</select>
+	<div class="rounded-lg bg-gray-900">
+		<div class=" flex justify-between text-gray-300 px-5 py-4">
+			<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>
+		<hr class=" border-gray-800" />
+
+		<div class="p-5 flex flex-col space-y-3">
+			<div>
+				<div class=" mb-2.5 text-sm font-medium">System Prompt</div>
+				<textarea
+					bind:value={system}
+					class="w-full rounded p-4 text-sm text-gray-300 bg-gray-800 outline-none"
+					rows="4"
+				/>
+			</div>
+
+			<div>
+				<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
+					<div>Temperature</div>
+					<div>
+						{temperature}
+					</div></label
+				>
+				<input
+					id="steps-range"
+					type="range"
+					min="0"
+					max="1"
+					bind:value={temperature}
+					step="0.05"
+					class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-700"
+				/>
+			</div>
+			<div class="flex justify-end pt-3 text-sm font-medium">
+				<button
+					class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 transition rounded"
+					on:click={() => {
+						saveSettings(system != '' ? system : null, temperature != 0.8 ? temperature : null);
+						show = false;
+					}}
+				>
+					Save
+				</button>
+			</div>
+		</div>
 	</div>
 </Modal>
--- a/src/lib/components/common/Modal.svelte
+++ b/src/lib/components/common/Modal.svelte
@@ -28,7 +28,7 @@
 		}}
 	>
 		<div
-			class="m-auto min-h-52 max-w-full w-[30rem] bg-stone-800 rounded-lg p-5 mx-3 shadow-3xl"
+			class="m-auto min-h-52 max-w-full w-[36rem] mx-2 bg-gray-900 rounded-lg shadow-3xl"
 			transition:fade={{ delay: 100, duration: 200 }}
 			on:click={(e) => {
 				e.stopPropagation();

--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
 <script lang="ts">
+	import { onMount } from 'svelte';
+
 	let show = false;
 	let navElement;
+	let importFileInputElement;
+	let importFiles;

 	export let title: string = 'Ollama Web UI';
 	export let chats = [];

 	export let createNewChat: Function;
 	export let loadChat: Function;
+	export let importChatHistory: Function;
+	export let exportChatHistory: Function;
 	export let deleteChatHistory: Function;
+	export let openSettings: Function;
+
+	onMount(() => {});
+
+	$: if (importFiles) {
+		console.log(importFiles);
+
+		let reader = new FileReader();
+		reader.onload = (event) => {
+			let chats = JSON.parse(event.target.result);
+			console.log(chats);
+			importChatHistory(chats);
+		};
+
+		reader.readAsText(importFiles[0]);
+	}
 </script>

 <div
@@ -162,8 +184,15 @@
 			<hr class=" border-gray-800 mb-2 w-full" />

 			<div class="flex flex-col">
-				<!-- <div class="flex">
-					<button class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition">
+				<div class="flex">
+					<input bind:this={importFileInputElement} bind:files={importFiles} type="file" hidden />
+					<button
+						class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
+						on:click={() => {
+							importFileInputElement.click();
+							// importChatHistory();
+						}}
+					>
 						<div class=" self-center mr-3">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -182,7 +211,12 @@
 						</div>
 						<div class=" self-center">Import</div>
 					</button>
-					<button class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition">
+					<button
+						class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
+						on:click={() => {
+							exportChatHistory();
+						}}
+					>
 						<div class=" self-center mr-3">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -201,7 +235,7 @@
 						</div>
 						<div class=" self-center">Export</div>
 					</button>
-				</div> -->
+				</div>
 				<button
 					class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
 					on:click={() => {
@@ -226,7 +260,12 @@
 					</div>
 					<div class=" self-center">Clear conversations</div>
 				</button>
-				<!-- <button class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition" disabled>
+				<button
+					class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
+					on:click={() => {
+						openSettings();
+					}}
+				>
 					<div class=" self-center mr-3">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -249,78 +288,8 @@
 						</svg>
 					</div>
 					<div class=" self-center font-medium">Settings</div>
-				</button> -->
+				</button>
 			</div>
 		</div>
 	</div>
 </div>
-
-<!-- <div
-	class="h-screen fixed top-0 left-0 z-30 text-sm
-	"
->
-	<div class="pl-2 pt-2">
-		<button
-			class=" cursor-pointer p-3 flex hover:bg-gray-700 rounded-lg transition"
-			on:click={() => {
-				show = !show;
-			}}
-		>
-			<div class=" m-auto self-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-					class="w-5 h-5"
-				>
-					<path
-						fill-rule="evenodd"
-						d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
-						clip-rule="evenodd"
-					/>
-				</svg>
-			</div>
-		</button>
-	</div>
-</div>
-
- -->
-
-<!-- 
-
-<div class="h-screen fixed top-0 right-0 z-30 text-sm">
-	<div class="pr-2 pt-2">
-		<button
-			class=" cursor-pointer p-3 flex hover:bg-gray-700 rounded-lg transition"
-			on:click={() => {
-				chatHistory = {};
-			}}
-		>
-			<div class=" m-auto self-center">
-				<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 20 20"
-						fill="currentColor"
-						class="w-5 h-5"
-					>
-						<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>
-
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-					class="w-5 h-5"
-				>
-					<path
-						d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
-					/>
-				</svg>
-			</div>
-		</button>
-	</div>
-</div> -->
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,6 +4,10 @@

 	import { v4 as uuidv4 } from 'uuid';
 	import { marked } from 'marked';
+
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
 	import hljs from 'highlight.js';
 	import 'highlight.js/styles/dark.min.css';

@@ -12,18 +16,19 @@

 	import { openDB, deleteDB } from 'idb';
 	import { ENDPOINT as SERVER_ENDPOINT } from '$lib/contants';
-	import Error from './+error.svelte';
+	import SettingsModal from '$lib/components/chat/SettingsModal.svelte';

 	export let data: PageData;
 	$: ({ models, OLLAMA_ENDPOINT } = data);

 	let ENDPOINT;
 	let textareaElement;
+	let showSettings = false;
 	let db;

 	let selectedModel = '';
-	let systemPrompt = '';
-	let temperature = '';
+	let system = null;
+	let temperature = null;

 	let chats = [];
 	let chatId = uuidv4();
@@ -43,8 +48,8 @@
 			console.log(settings);

 			selectedModel = settings.model ?? '';
-			systemPrompt = settings.systemPrompt ?? '';
-			temperature = settings.temperature ?? '';
+			system = settings.system ?? null;
+			temperature = settings.temperature ?? null;
 		}

 		db = await openDB('Chats', 1, {
@@ -133,11 +138,40 @@
 		toast.success('Default model updated');
 	};

+	const saveSettings = (_system, _temperature) => {
+		system = _system;
+		temperature = _temperature;
+
+		let settings = localStorage.getItem('settings') ?? '{}';
+		if (settings) {
+			settings = JSON.parse(settings);
+			settings.system = system;
+			settings.temperature = temperature;
+			localStorage.setItem('settings', JSON.stringify(settings));
+		}
+
+		console.log(settings);
+
+		console.log('saved');
+	};
+
 	const createNewChat = () => {
 		if (messages.length > 0) {
+			chatId = uuidv4();
+
 			messages = [];
 			title = '';
-			chatId = uuidv4();
+			console.log(localStorage.settings.model);
+
+			let settings = localStorage.getItem('settings');
+			if (settings) {
+				settings = JSON.parse(settings);
+				console.log(settings);
+
+				selectedModel = settings.model ?? selectedModel;
+				system = settings.system ?? system;
+				temperature = settings.temperature ?? temperature;
+			}
 		}
 	};

@@ -146,6 +180,9 @@
 		messages = chat.messages;
 		title = chat.title;
 		chatId = chat.id;
+		selectedModel = chat.model ?? selectedModel;
+		system = chat.system ?? system;
+		temperature = chat.temperature ?? temperature;
 	};

 	const deleteChatHistory = async () => {
@@ -154,6 +191,35 @@
 		chats = await db.getAllFromIndex('chats', 'timestamp');
 	};

+	const importChatHistory = async (results) => {
+		for (const chat of results) {
+			console.log(chat);
+
+			await db.put('chats', {
+				id: chat.id,
+				model: chat.model,
+				system: chat.system,
+				options: chat.options,
+				title: chat.title,
+				timestamp: chat.timestamp,
+				messages: chat.messages
+			});
+		}
+		chats = await db.getAllFromIndex('chats', 'timestamp');
+
+		console.log(chats);
+	};
+
+	const exportChatHistory = async () => {
+		chats = await db.getAllFromIndex('chats', 'timestamp');
+		let blob = new Blob([JSON.stringify(chats)], { type: 'application/json' });
+		saveAs(blob, `chat-export-${Date.now()}.json`);
+	};
+
+	const openSettings = async () => {
+		showSettings = true;
+	};
+
 	//////////////////////////
 	// Ollama functions
 	//////////////////////////
@@ -169,6 +235,11 @@
 			if (messages.length == 0) {
 				await db.put('chats', {
 					id: chatId,
+					model: selectedModel,
+					system: system,
+					options: {
+						temperature: temperature
+					},
 					title: 'New Chat',
 					timestamp: Date.now(),
 					messages: messages
@@ -205,6 +276,13 @@
 				body: JSON.stringify({
 					model: selectedModel,
 					prompt: user_prompt,
+					system: system ?? undefined,
+					options:
+						temperature != null
+							? {
+									temperature: temperature
+							  }
+							: undefined,
 					context:
 						messages.length > 3 && messages.at(-3).context != undefined
 							? messages.at(-3).context
@@ -257,6 +335,11 @@
 			await db.put('chats', {
 				id: chatId,
 				title: title,
+				model: selectedModel,
+				system: system,
+				options: {
+					temperature: temperature
+				},
 				timestamp: Date.now(),
 				messages: messages
 			});
@@ -289,6 +372,13 @@
 				body: JSON.stringify({
 					model: selectedModel,
 					prompt: lastUserMessage.content,
+					system: system ?? undefined,
+					options:
+						temperature != null
+							? {
+									temperature: temperature
+							  }
+							: undefined,
 					context:
 						messages.length > 3 && messages.at(-3).context != undefined
 							? messages.at(-3).context
@@ -337,6 +427,11 @@
 			await db.put('chats', {
 				id: chatId,
 				title: title,
+				model: selectedModel,
+				system: system,
+				options: {
+					temperature: temperature
+				},
 				timestamp: Date.now(),
 				messages: messages
 			});
@@ -378,14 +473,57 @@

 <div class="app text-gray-100">
 	<div class=" bg-gray-800 min-h-screen overflow-auto flex flex-row">
-		<Navbar {chats} {title} {loadChat} {createNewChat} {deleteChatHistory} />
+		<Navbar
+			{chats}
+			{title}
+			{loadChat}
+			{createNewChat}
+			{importChatHistory}
+			{exportChatHistory}
+			{deleteChatHistory}
+			{openSettings}
+		/>
+
+		<SettingsModal bind:show={showSettings} {saveSettings} />

 		<div class="min-h-screen w-full flex justify-center">
 			<div class=" py-2.5 flex flex-col justify-between w-full">
 				<div class="max-w-2xl mx-auto w-full px-2.5 mt-14">
 					<div class="p-3 rounded-lg bg-gray-900">
 						<div>
-							<label for="models" class="block mb-2 text-sm font-medium text-gray-200">Model</label>
+							<label
+								for="models"
+								class="block mb-2 text-sm font-medium text-gray-200 flex justify-between"
+							>
+								<div class="self-center">Model</div>
+
+								<button
+									class=" self-center hover:text-gray-300"
+									on:click={() => {
+										openSettings();
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
+										/>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+										/>
+									</svg>
+								</button>
+							</label>

 							<div>
 								<select