mirror of
https://github.com/open-webui/open-webui
synced 2024-11-21 23:57:51 +00:00
chat history/code syntax highlighting added
This commit is contained in:
Timothy J. Baek
parent
b1095836d5
commit
de86193cab
@ -11,6 +11,8 @@ ChatGPT-Style Web Interface for Ollama 🦙
|
||||
- ⚡ **Swift Responsiveness**: Enjoy fast and responsive performance.
|
||||
- 🚀 **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.
|
||||
- 💻 **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.
|
||||
|
||||
## How to Install 🚀
|
||||
@ -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:
|
||||
|
||||
- 📜 **Chat History**: Effortlessly access and manage your conversation history.
|
||||
- 📤📥 **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.
|
||||
- 🚀 **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.
|
||||
|
||||
Feel free to contribute and help us make Ollama Web UI even better! 🙌
|
||||
|
||||
45
package-lock.json
generated
45
package-lock.json
generated
@ -9,8 +9,11 @@
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-node": "^1.3.1",
|
||||
"highlight.js": "^11.9.0",
|
||||
"idb": "^7.1.1",
|
||||
"marked": "^9.1.0",
|
||||
"svelte-french-toast": "^1.2.0"
|
||||
"svelte-french-toast": "^1.2.0",
|
||||
"uuid": "^9.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
@ -2084,6 +2087,19 @@
|
||||
"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": {
|
||||
"version": "5.2.4",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
|
||||
@ -3709,6 +3725,18 @@
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||
"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": {
|
||||
"version": "4.4.11",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
|
||||
@ -5143,6 +5171,16 @@
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"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": {
|
||||
"version": "5.2.4",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
|
||||
@ -6205,6 +6243,11 @@
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||
"dev": true
|
||||
},
|
||||
"uuid": {
|
||||
"version": "9.0.1",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
|
||||
"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
|
||||
},
|
||||
"vite": {
|
||||
"version": "4.4.11",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
|
||||
|
||||
@ -33,7 +33,10 @@
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-node": "^1.3.1",
|
||||
"highlight.js": "^11.9.0",
|
||||
"idb": "^7.1.1",
|
||||
"marked": "^9.1.0",
|
||||
"svelte-french-toast": "^1.2.0"
|
||||
"svelte-french-toast": "^1.2.0",
|
||||
"uuid": "^9.0.1"
|
||||
}
|
||||
}
|
||||
@ -8,6 +8,10 @@ html {
|
||||
@apply bg-gray-800;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
@apply rounded-lg;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
--tw-border-opacity: 1;
|
||||
background-color: rgba(217, 217, 227, 0.8);
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
<script lang="ts">
|
||||
let show = false;
|
||||
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>
|
||||
|
||||
<div
|
||||
@ -33,14 +40,15 @@
|
||||
</button>
|
||||
</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">
|
||||
<button
|
||||
class=" cursor-pointer p-1 flex hover:bg-gray-700 rounded-lg transition"
|
||||
on:click={() => {
|
||||
location.href = location.href;
|
||||
console.log('new chat');
|
||||
createNewChat();
|
||||
}}
|
||||
>
|
||||
<div class=" m-auto self-center">
|
||||
@ -74,8 +82,7 @@
|
||||
<button
|
||||
class=" cursor-pointer flex-grow rounded-md border border-gray-600 p-3 flex"
|
||||
on:click={() => {
|
||||
location.href = location.href;
|
||||
console.log('new chat');
|
||||
createNewChat();
|
||||
}}
|
||||
>
|
||||
<div class="self-center mr-2">
|
||||
@ -122,32 +129,13 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="my-3 flex flex-col space-y-1 overflow-y-scroll">
|
||||
<button class=" flex rounded-md p-4 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-4 h-4"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="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"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class=" self-center">
|
||||
We're currently working on bringing you the ability to access your chat history. Stay
|
||||
tuned for updates, and thank you for your patience!
|
||||
</div>
|
||||
</button>
|
||||
<!-- {#each Array(100) as a, i}
|
||||
<div class="my-3 flex-1 flex flex-col space-y-1 overflow-y-auto">
|
||||
{#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">
|
||||
<svg
|
||||
@ -165,9 +153,104 @@
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class=" self-center overflow-hidden">{i} Chat History</div>
|
||||
<div class=" self-center overflow-hidden">{chat.title}</div>
|
||||
</button>
|
||||
{/each} -->
|
||||
{/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 class=" self-center">Export</div>
|
||||
</button>
|
||||
</div> -->
|
||||
<button
|
||||
class=" flex rounded-md p-4 w-full hover:bg-gray-800 transition"
|
||||
on:click={() => {
|
||||
deleteChatHistory();
|
||||
}}
|
||||
>
|
||||
<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="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>
|
||||
</div>
|
||||
<div class=" self-center">Clear conversations</div>
|
||||
</button>
|
||||
<!-- <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>
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
import { Toaster } from 'svelte-french-toast';
|
||||
|
||||
import '../app.css';
|
||||
|
||||
import '../tailwind.css';
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,23 +2,33 @@
|
||||
import toast from 'svelte-french-toast';
|
||||
import Navbar from '$lib/components/layout/Navbar.svelte';
|
||||
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { marked } from 'marked';
|
||||
import hljs from 'highlight.js';
|
||||
import 'highlight.js/styles/dark.min.css';
|
||||
|
||||
import type { PageData } from './$types';
|
||||
import { ENDPOINT } from '$lib/contants';
|
||||
import { onMount, tick } from 'svelte';
|
||||
|
||||
import { openDB, deleteDB } from 'idb';
|
||||
|
||||
export let data: PageData;
|
||||
$: ({ models } = data);
|
||||
let textareaElement;
|
||||
let db;
|
||||
|
||||
let selectedModel = '';
|
||||
let systemPrompt = '';
|
||||
let temperature = '';
|
||||
|
||||
let chats = [];
|
||||
let chatId = uuidv4();
|
||||
let title = ``;
|
||||
let prompt = '';
|
||||
let messages = [];
|
||||
|
||||
onMount(() => {
|
||||
onMount(async () => {
|
||||
let settings = localStorage.getItem('settings');
|
||||
if (settings) {
|
||||
settings = JSON.parse(settings);
|
||||
@ -28,6 +38,20 @@
|
||||
systemPrompt = settings.systemPrompt ?? '';
|
||||
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 @@
|
||||
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
|
||||
//////////////////////////
|
||||
|
||||
const submitPrompt = async () => {
|
||||
const submitPrompt = async (user_prompt) => {
|
||||
console.log('submitPrompt');
|
||||
|
||||
if (selectedModel === '') {
|
||||
@ -113,9 +158,15 @@
|
||||
} else if (messages.length != 0 && messages.at(-1).done != true) {
|
||||
console.log('wait');
|
||||
} else {
|
||||
console.log(prompt);
|
||||
|
||||
let user_prompt = prompt;
|
||||
if (messages.length == 0) {
|
||||
await db.put('chats', {
|
||||
id: chatId,
|
||||
title: 'New Chat',
|
||||
timestamp: Date.now(),
|
||||
messages: messages
|
||||
});
|
||||
chats = await db.getAllFromIndex('chats', 'timestamp');
|
||||
}
|
||||
messages = [
|
||||
...messages,
|
||||
{
|
||||
@ -180,6 +231,7 @@
|
||||
responseMessage.done = true;
|
||||
responseMessage.context = data.context;
|
||||
messages = messages;
|
||||
hljs.highlightAll();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -190,6 +242,17 @@
|
||||
}
|
||||
|
||||
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 @@
|
||||
responseMessage.done = true;
|
||||
responseMessage.context = data.context;
|
||||
messages = messages;
|
||||
hljs.highlightAll();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -262,15 +326,51 @@
|
||||
}
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
<div class="app text-gray-100">
|
||||
<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=" py-2.5 flex flex-col justify-between w-full">
|
||||
@ -300,9 +400,9 @@
|
||||
</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}
|
||||
<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">
|
||||
<img src="/ollama.png" class="w-16 invert-[80%]" />
|
||||
</div>
|
||||
@ -391,6 +491,113 @@
|
||||
|
||||
<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">
|
||||
{#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}
|
||||
<div class=" flex justify-end mb-2.5">
|
||||
<button
|
||||
@ -415,7 +622,12 @@
|
||||
</button>
|
||||
</div>
|
||||
{/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
|
||||
class="rounded-xl bg-gray-700 outline-none w-full py-3 px-5 pr-12 resize-none"
|
||||
placeholder="Send a message"
|
||||
@ -426,7 +638,7 @@
|
||||
e.preventDefault();
|
||||
}
|
||||
if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) {
|
||||
submitPrompt();
|
||||
submitPrompt(prompt);
|
||||
}
|
||||
}}
|
||||
rows="1"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user