Skip to content

GitLab

Commit de86193c authored by Timothy J. Baek's avatar Timothy J. Baek
Browse files

chat history/code syntax highlighting added

parent b1095836
Show whitespace changes
Inline Side-by-side
Showing with 393 additions and 47 deletions
README.md
View file @ de86193c
...@@ -11,6 +11,8 @@ ChatGPT-Style Web Interface for Ollama 🦙 ...@@ -11,6 +11,8 @@ ChatGPT-Style Web Interface for Ollama 🦙
- ⚡ **Swift Responsiveness**: Enjoy fast and responsive performance. - ⚡ **Swift Responsiveness**: Enjoy fast and responsive performance.
- 🚀 **Effortless Setup**: Install seamlessly using Docker for a hassle-free experience. - 🚀 **Effortless Setup**: Install seamlessly using Docker for a hassle-free experience.
- 🤖 **Multiple Model Support**: Seamlessly switch between different chat models for diverse interactions. - 🤖 **Multiple Model Support**: Seamlessly switch between different chat models for diverse interactions.
- 📜 **Chat History**: Effortlessly access and manage your conversation history.
- 💻 **Code Syntax Highlighting**: Enjoy enhanced code readability with our syntax highlighting feature.
- 🌟 **Continuous Updates**: We are committed to improving Ollama Web UI with regular updates and new features. - 🌟 **Continuous Updates**: We are committed to improving Ollama Web UI with regular updates and new features.
## How to Install 🚀 ## How to Install 🚀
...@@ -30,14 +32,14 @@ Your Ollama Web UI should now be hosted at [http://localhost:3000](http://localh ...@@ -30,14 +32,14 @@ Your Ollama Web UI should now be hosted at [http://localhost:3000](http://localh
Here are some exciting tasks on our to-do list: Here are some exciting tasks on our to-do list:
- 📜 **Chat History**: Effortlessly access and manage your conversation history.
- 📤📥 **Import/Export Chat History**: Seamlessly move your chat data in and out of the platform. - 📤📥 **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. - 🎨 **Customization**: Tailor your chat environment with personalized themes and styles.
- 📥🗑️ **Download/Delete Models**: Easily acquire or remove models directly from the web UI. - 📥🗑️ **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. - ⚙️ **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. - 📚 **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 Interface Enhancement**: Elevate the user interface to deliver a smoother, more enjoyable interaction.
- 🚀 **Integration with Messaging Platforms**: Explore possibilities for integrating with popular messaging platforms like Slack and Discord.
- 🧐 **User Testing and Feedback Gathering**: Conduct thorough user testing to gather insights and refine our offerings based on valuable user feedback. - 🧐 **User Testing and Feedback Gathering**: Conduct thorough user testing to gather insights and refine our offerings based on valuable user feedback.
Feel free to contribute and help us make Ollama Web UI even better! 🙌 Feel free to contribute and help us make Ollama Web UI even better! 🙌
......
package-lock.json
View file @ de86193c
...@@ -9,8 +9,11 @@ ...@@ -9,8 +9,11 @@
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"@sveltejs/adapter-node": "^1.3.1", "@sveltejs/adapter-node": "^1.3.1",
"highlight.js": "^11.9.0",
"idb": "^7.1.1",
"marked": "^9.1.0", "marked": "^9.1.0",
"svelte-french-toast": "^1.2.0" "svelte-french-toast": "^1.2.0",
"uuid": "^9.0.1"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.0.0",
...@@ -2084,6 +2087,19 @@ ...@@ -2084,6 +2087,19 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/highlight.js": {
"version": "11.9.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
"integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/idb": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
"integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
},
"node_modules/ignore": { "node_modules/ignore": {
"version": "5.2.4", "version": "5.2.4",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
...@@ -3709,6 +3725,18 @@ ...@@ -3709,6 +3725,18 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"dev": true "dev": true
}, },
"node_modules/uuid": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
"funding": [
"https://github.com/sponsors/broofa",
"https://github.com/sponsors/ctavan"
],
"bin": {
"uuid": "dist/bin/uuid"
}
},
"node_modules/vite": { "node_modules/vite": {
"version": "4.4.11", "version": "4.4.11",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
...@@ -5143,6 +5171,16 @@ ...@@ -5143,6 +5171,16 @@
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true "dev": true
}, },
"highlight.js": {
"version": "11.9.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
"integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw=="
},
"idb": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
"integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
},
"ignore": { "ignore": {
"version": "5.2.4", "version": "5.2.4",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
...@@ -6205,6 +6243,11 @@ ...@@ -6205,6 +6243,11 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"dev": true "dev": true
}, },
"uuid": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
},
"vite": { "vite": {
"version": "4.4.11", "version": "4.4.11",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
......
package.json
View file @ de86193c
...@@ -33,7 +33,10 @@ ...@@ -33,7 +33,10 @@
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@sveltejs/adapter-node": "^1.3.1", "@sveltejs/adapter-node": "^1.3.1",
"highlight.js": "^11.9.0",
"idb": "^7.1.1",
"marked": "^9.1.0", "marked": "^9.1.0",
"svelte-french-toast": "^1.2.0" "svelte-french-toast": "^1.2.0",
"uuid": "^9.0.1"
} }
} }
src/app.css
View file @ de86193c
...@@ -8,6 +8,10 @@ html { ...@@ -8,6 +8,10 @@ html {
@apply bg-gray-800; @apply bg-gray-800;
} }
.hljs {
@apply rounded-lg;
}
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
--tw-border-opacity: 1; --tw-border-opacity: 1;
background-color: rgba(217, 217, 227, 0.8); background-color: rgba(217, 217, 227, 0.8);
......
src/lib/components/layout/Navbar.svelte
View file @ de86193c
<script lang="ts"> <script lang="ts">
let show = false; let show = false;
let navElement; let navElement;
export let title: string = 'Ollama Web UI';
export let chats = [];
export let createNewChat: Function;
export let loadChat: Function;
export let deleteChatHistory: Function;
</script> </script>
<div <div
...@@ -33,14 +40,15 @@ ...@@ -33,14 +40,15 @@
</button> </button>
</div> </div>
<div class=" self-center">Ollama Web UI</div> <div class=" self-center">
{title != '' ? title.split(' ').slice(0, 7).join(' ') : 'Ollama Web UI'}
</div>
<div class="pr-2"> <div class="pr-2">
<button <button
class=" cursor-pointer p-1 flex hover:bg-gray-700 rounded-lg transition" class=" cursor-pointer p-1 flex hover:bg-gray-700 rounded-lg transition"
on:click={() => { on:click={() => {
location.href = location.href; createNewChat();
console.log('new chat');
}} }}
> >
<div class=" m-auto self-center"> <div class=" m-auto self-center">
...@@ -74,8 +82,7 @@ ...@@ -74,8 +82,7 @@
<button <button
class=" cursor-pointer flex-grow rounded-md border border-gray-600 p-3 flex" class=" cursor-pointer flex-grow rounded-md border border-gray-600 p-3 flex"
on:click={() => { on:click={() => {
location.href = location.href; createNewChat();
console.log('new chat');
}} }}
> >
<div class="self-center mr-2"> <div class="self-center mr-2">
...@@ -122,8 +129,14 @@ ...@@ -122,8 +129,14 @@
</button> </button>
</div> </div>
<div class="my-3 flex flex-col space-y-1 overflow-y-scroll"> <div class="my-3 flex-1 flex flex-col space-y-1 overflow-y-auto">
<button class=" flex rounded-md p-4 hover:bg-gray-800 transition"> {#each chats.reverse() as chat, i}
<button
class=" flex rounded-md p-4 hover:bg-gray-800 transition whitespace-nowrap text-ellipsis"
on:click={() => {
loadChat(chat.id);
}}
>
<div class=" self-center mr-3"> <div class=" self-center mr-3">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
...@@ -140,14 +153,60 @@ ...@@ -140,14 +153,60 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center"> <div class=" self-center overflow-hidden">{chat.title}</div>
We're currently working on bringing you the ability to access your chat history. Stay </button>
tuned for updates, and thank you for your patience! {/each}
</div>
<div class="">
<hr class=" border-gray-800 mb-2" />
<div class="flex flex-col">
<!-- <div class="flex">
<button class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition">
<div class=" self-center mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
/>
</svg>
</div>
<div class=" self-center">Import</div>
</button>
<button class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition">
<div class=" self-center mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
/>
</svg>
</div> </div>
<div class=" self-center">Export</div>
</button> </button>
<!-- {#each Array(100) as a, i} </div> -->
<button <button
class=" flex rounded-md p-4 hover:bg-gray-800 transition whitespace-nowrap text-ellipsis" class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
on:click={() => {
deleteChatHistory();
}}
> >
<div class=" self-center mr-3"> <div class=" self-center mr-3">
<svg <svg
...@@ -156,18 +215,42 @@ ...@@ -156,18 +215,42 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="w-4 h-4" class="w-5 h-5"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
/> />
</svg> </svg>
</div> </div>
<div class=" self-center overflow-hidden">{i} Chat History</div> <div class=" self-center">Clear conversations</div>
</button> </button>
{/each} --> <!-- <button class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition" disabled>
<div class=" self-center mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5"
>
<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>
</div>
<div class=" self-center font-medium">Settings</div>
</button> -->
</div>
</div> </div>
</div> </div>
</div> </div>
......
src/routes/+layout.svelte
View file @ de86193c
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
import { Toaster } from 'svelte-french-toast'; import { Toaster } from 'svelte-french-toast';
import '../app.css'; import '../app.css';
import '../tailwind.css'; import '../tailwind.css';
</script> </script>
......
src/routes/+page.svelte
View file @ de86193c
...@@ -2,23 +2,33 @@ ...@@ -2,23 +2,33 @@
import toast from 'svelte-french-toast'; import toast from 'svelte-french-toast';
import Navbar from '$lib/components/layout/Navbar.svelte'; import Navbar from '$lib/components/layout/Navbar.svelte';
import { v4 as uuidv4 } from 'uuid';
import { marked } from 'marked'; import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/dark.min.css';
import type { PageData } from './$types'; import type { PageData } from './$types';
import { ENDPOINT } from '$lib/contants'; import { ENDPOINT } from '$lib/contants';
import { onMount, tick } from 'svelte'; import { onMount, tick } from 'svelte';
import { openDB, deleteDB } from 'idb';
export let data: PageData; export let data: PageData;
$: ({ models } = data); $: ({ models } = data);
let textareaElement; let textareaElement;
let db;
let selectedModel = ''; let selectedModel = '';
let systemPrompt = ''; let systemPrompt = '';
let temperature = ''; let temperature = '';
let chats = [];
let chatId = uuidv4();
let title = ``;
let prompt = ''; let prompt = '';
let messages = []; let messages = [];
onMount(() => { onMount(async () => {
let settings = localStorage.getItem('settings'); let settings = localStorage.getItem('settings');
if (settings) { if (settings) {
settings = JSON.parse(settings); settings = JSON.parse(settings);
...@@ -28,6 +38,20 @@ ...@@ -28,6 +38,20 @@
systemPrompt = settings.systemPrompt ?? ''; systemPrompt = settings.systemPrompt ?? '';
temperature = settings.temperature ?? ''; temperature = settings.temperature ?? '';
} }
db = await openDB('Chats', 1, {
upgrade(db) {
const store = db.createObjectStore('chats', {
keyPath: 'id',
autoIncrement: true
});
store.createIndex('timestamp', 'timestamp');
}
});
chats = await db.getAllFromIndex('chats', 'timestamp');
console.log(chats);
console.log(chatId);
}); });
////////////////////////// //////////////////////////
...@@ -101,11 +125,32 @@ ...@@ -101,11 +125,32 @@
toast.success('Default model updated'); toast.success('Default model updated');
}; };
const createNewChat = () => {
if (messages.length > 0) {
messages = [];
title = '';
chatId = uuidv4();
}
};
const loadChat = async (id) => {
const chat = await db.get('chats', id);
messages = chat.messages;
title = chat.title;
chatId = chat.id;
};
const deleteChatHistory = async () => {
const tx = db.transaction('chats', 'readwrite');
await Promise.all([tx.store.clear(), tx.done]);
chats = await db.getAllFromIndex('chats', 'timestamp');
};
////////////////////////// //////////////////////////
// Ollama functions // Ollama functions
////////////////////////// //////////////////////////
const submitPrompt = async () => { const submitPrompt = async (user_prompt) => {
console.log('submitPrompt'); console.log('submitPrompt');
if (selectedModel === '') { if (selectedModel === '') {
...@@ -113,9 +158,15 @@ ...@@ -113,9 +158,15 @@
} else if (messages.length != 0 && messages.at(-1).done != true) { } else if (messages.length != 0 && messages.at(-1).done != true) {
console.log('wait'); console.log('wait');
} else { } else {
console.log(prompt); if (messages.length == 0) {
await db.put('chats', {
let user_prompt = prompt; id: chatId,
title: 'New Chat',
timestamp: Date.now(),
messages: messages
});
chats = await db.getAllFromIndex('chats', 'timestamp');
}
messages = [ messages = [
...messages, ...messages,
{ {
...@@ -180,6 +231,7 @@ ...@@ -180,6 +231,7 @@
responseMessage.done = true; responseMessage.done = true;
responseMessage.context = data.context; responseMessage.context = data.context;
messages = messages; messages = messages;
hljs.highlightAll();
} }
} }
} }
...@@ -190,6 +242,17 @@ ...@@ -190,6 +242,17 @@
} }
window.scrollTo({ top: document.body.scrollHeight }); window.scrollTo({ top: document.body.scrollHeight });
if (messages.length == 2) {
await generateTitle(user_prompt);
}
await db.put('chats', {
id: chatId,
title: title,
timestamp: Date.now(),
messages: messages
});
chats = await db.getAllFromIndex('chats', 'timestamp');
} }
}; };
...@@ -252,6 +315,7 @@ ...@@ -252,6 +315,7 @@
responseMessage.done = true; responseMessage.done = true;
responseMessage.context = data.context; responseMessage.context = data.context;
messages = messages; messages = messages;
hljs.highlightAll();
} }
} }
} }
...@@ -262,15 +326,51 @@ ...@@ -262,15 +326,51 @@
} }
window.scrollTo({ top: document.body.scrollHeight }); window.scrollTo({ top: document.body.scrollHeight });
await db.put('chats', {
id: chatId,
title: title,
timestamp: Date.now(),
messages: messages
});
chats = await db.getAllFromIndex('chats', 'timestamp');
} }
console.log(messages); console.log(messages);
}; };
const generateTitle = async (user_prompt) => {
console.log('generateTitle');
const res = await fetch(`${ENDPOINT}/api/generate`, {
method: 'POST',
headers: {
'Content-Type': 'text/event-stream'
},
body: JSON.stringify({
model: selectedModel,
prompt: `Create an extremely short title for the following question with 3-5 words without using the word 'title.': ${user_prompt}`,
stream: false
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((error) => {
console.log(error);
return null;
});
if (res) {
console.log(res);
title = res.response;
}
};
</script> </script>
<div class="app text-gray-100"> <div class="app text-gray-100">
<div class=" bg-gray-800 min-h-screen overflow-auto flex flex-row"> <div class=" bg-gray-800 min-h-screen overflow-auto flex flex-row">
<Navbar /> <Navbar {chats} {title} {loadChat} {createNewChat} {deleteChatHistory} />
<div class="min-h-screen w-full flex justify-center"> <div class="min-h-screen w-full flex justify-center">
<div class=" py-2.5 flex flex-col justify-between w-full"> <div class=" py-2.5 flex flex-col justify-between w-full">
...@@ -300,9 +400,9 @@ ...@@ -300,9 +400,9 @@
</div> </div>
</div> </div>
<div class=" h-full mb-44 w-full flex flex-col"> <div class=" h-full mb-48 w-full flex flex-col">
{#if messages.length == 0} {#if messages.length == 0}
<div class="m-auto text-center max-w-md"> <div class="m-auto text-center max-w-md pb-16">
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
<img src="/ollama.png" class="w-16 invert-[80%]" /> <img src="/ollama.png" class="w-16 invert-[80%]" />
</div> </div>
...@@ -391,6 +491,113 @@ ...@@ -391,6 +491,113 @@
<div class=" bg-gradient-to-t from-gray-900 pt-5"> <div class=" bg-gradient-to-t from-gray-900 pt-5">
<div class="max-w-3xl p-2.5 -mb-0.5 mx-auto inset-x-0"> <div class="max-w-3xl p-2.5 -mb-0.5 mx-auto inset-x-0">
{#if messages.length == 0}
<div class=" grid sm:grid-cols-2 gap-2.5 mb-4 md:p-2 text-left">
<button
class=" flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
on:click={() => {
submitPrompt(`Tell me a random fun fact about the Roman Empire`);
}}
>
<div class="flex flex-col text-left">
<div class="text-sm font-medium text-gray-300">Tell me a fun fact</div>
<div class="text-sm text-gray-500">about the Roman Empire</div>
</div>
<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="none"
class="w-4 h-4"
><path
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
fill="currentColor"
/></svg
>
</div>
</button>
<button
class="flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
on:click={() => {
submitPrompt(
`Show me a code snippet of a website's sticky header in CSS and JavaScript.`
);
}}
>
<div class="flex flex-col text-left">
<div class="text-sm font-medium text-gray-300">Show me a code snippet</div>
<div class="text-sm text-gray-500">of a website's sticky header</div>
</div>
<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="none"
class="w-4 h-4"
><path
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
fill="currentColor"
/></svg
>
</div>
</button>
<button
class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
on:click={() => {
submitPrompt(
`Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.`
);
}}
>
<div class="flex flex-col text-left">
<div class="text-sm font-medium text-gray-300">Help me study</div>
<div class="text-sm text-gray-500">vocabulary for a college entrance exam</div>
</div>
<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="none"
class="w-4 h-4"
><path
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
fill="currentColor"
/></svg
>
</div>
</button>
<button
class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
on:click={() => {
submitPrompt(
`What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter.`
);
}}
>
<div class="flex flex-col text-left">
<div class="text-sm font-medium text-gray-300">Give me ideas</div>
<div class="text-sm text-gray-500">for what to do with my kids' art</div>
</div>
<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="none"
class="w-4 h-4"
><path
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
fill="currentColor"
/></svg
>
</div>
</button>
</div>
{/if}
{#if messages.length != 0 && messages.at(-1).role == 'assistant' && messages.at(-1).done == true} {#if messages.length != 0 && messages.at(-1).role == 'assistant' && messages.at(-1).done == true}
<div class=" flex justify-end mb-2.5"> <div class=" flex justify-end mb-2.5">
<button <button
...@@ -415,7 +622,12 @@ ...@@ -415,7 +622,12 @@
</button> </button>
</div> </div>
{/if} {/if}
<form class=" flex shadow-sm relative w-full" on:submit|preventDefault={submitPrompt}> <form
class=" flex shadow-sm relative w-full"
on:submit|preventDefault={() => {
submitPrompt(prompt);
}}
>
<textarea <textarea
class="rounded-xl bg-gray-700 outline-none w-full py-3 px-5 pr-12 resize-none" class="rounded-xl bg-gray-700 outline-none w-full py-3 px-5 pr-12 resize-none"
placeholder="Send a message" placeholder="Send a message"
...@@ -426,7 +638,7 @@ ...@@ -426,7 +638,7 @@
e.preventDefault(); e.preventDefault();
} }
if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) { if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) {
submitPrompt(); submitPrompt(prompt);
} }
}} }}
rows="1" rows="1"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment