open-webui/src/lib/components/playground/Chat.svelte

248 lines
5.8 KiB
Svelte
Raw Normal View History

2024-03-03 22:42:01 +00:00
<script lang="ts">
2024-10-21 12:09:28 +00:00
import { toast } from 'svelte-sonner';
2024-03-02 11:01:44 +00:00
2024-10-21 12:09:28 +00:00
import { goto } from '$app/navigation';
import { onMount, tick, getContext } from 'svelte';
2024-03-02 11:01:44 +00:00
2024-10-21 12:09:28 +00:00
import {
OLLAMA_API_BASE_URL,
OPENAI_API_BASE_URL,
WEBUI_API_BASE_URL,
WEBUI_BASE_URL
} from '$lib/constants';
import { WEBUI_NAME, config, user, models, settings, showSidebar } from '$lib/stores';
2024-03-02 11:01:44 +00:00
import { generateOpenAIChatCompletion } from '$lib/apis/openai';
2024-03-02 11:01:44 +00:00
import { splitStream } from '$lib/utils';
2024-03-03 02:35:19 +00:00
import ChatCompletion from '$lib/components/playground/ChatCompletion.svelte';
import Selector from '$lib/components/chat/ModelSelector/Selector.svelte';
2024-03-02 11:01:44 +00:00
const i18n = getContext('i18n');
2024-03-02 11:01:44 +00:00
let loaded = false;
let selectedModelId = '';
2024-03-02 11:01:44 +00:00
let loading = false;
let stopResponseFlag = false;
2024-03-03 22:42:01 +00:00
let messagesContainerElement: HTMLDivElement;
2024-03-03 01:11:48 +00:00
let system = '';
let messages = [
{
role: 'user',
content: ''
}
];
2024-03-03 01:11:48 +00:00
2024-03-02 11:01:44 +00:00
const scrollToBottom = () => {
2024-10-21 12:09:28 +00:00
const element = messagesContainerElement;
if (element) {
element.scrollTop = element?.scrollHeight;
}
2024-03-02 11:01:44 +00:00
};
const stopResponse = () => {
stopResponseFlag = true;
console.log('stopResponse');
};
const chatCompletionHandler = async () => {
const model = $models.find((model) => model.id === selectedModelId);
const [res, controller] = await generateOpenAIChatCompletion(
localStorage.token,
{
model: model.id,
stream: true,
messages: [
system
? {
role: 'system',
content: system
2024-08-13 10:12:35 +00:00
}
: undefined,
...messages
].filter((message) => message)
},
2024-10-21 12:09:28 +00:00
`${WEBUI_BASE_URL}/api`
);
let responseMessage;
if (messages.at(-1)?.role === 'assistant') {
responseMessage = messages.at(-1);
} else {
responseMessage = {
role: 'assistant',
content: ''
};
messages.push(responseMessage);
messages = messages;
}
await tick();
const textareaElement = document.getElementById(`assistant-${messages.length - 1}-textarea`);
if (res && res.ok) {
const reader = res.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n'))
.getReader();
while (true) {
const { value, done } = await reader.read();
if (done || stopResponseFlag) {
2024-03-05 09:41:22 +00:00
if (stopResponseFlag) {
controller.abort('User: Stop Response');
2024-03-05 09:41:22 +00:00
}
break;
}
try {
let lines = value.split('\n');
for (const line of lines) {
if (line !== '') {
console.log(line);
if (line === 'data: [DONE]') {
// responseMessage.done = true;
messages = messages;
} else {
let data = JSON.parse(line.replace(/^data: /, ''));
console.log(data);
2024-06-10 00:38:08 +00:00
if (responseMessage.content == '' && data.choices[0].delta.content == '\n') {
continue;
} else {
2024-06-10 00:38:08 +00:00
textareaElement.style.height = textareaElement.scrollHeight + 'px';
2024-03-02 11:01:44 +00:00
2024-06-10 00:38:08 +00:00
responseMessage.content += data.choices[0].delta.content ?? '';
messages = messages;
2024-06-10 00:38:08 +00:00
textareaElement.style.height = textareaElement.scrollHeight + 'px';
2024-06-10 00:38:08 +00:00
await tick();
}
}
}
}
} catch (error) {
console.log(error);
2024-03-02 11:01:44 +00:00
}
scrollToBottom();
}
}
};
const submitHandler = async () => {
if (selectedModelId) {
loading = true;
2024-10-21 12:09:28 +00:00
await chatCompletionHandler();
2024-03-02 11:01:44 +00:00
loading = false;
stopResponseFlag = false;
}
};
onMount(async () => {
if ($user?.role !== 'admin') {
await goto('/');
}
2024-03-03 01:11:48 +00:00
if ($settings?.models) {
selectedModelId = $settings?.models[0];
2024-03-03 01:11:48 +00:00
} else if ($config?.default_models) {
selectedModelId = $config?.default_models.split(',')[0];
2024-03-03 01:11:48 +00:00
} else {
selectedModelId = '';
2024-03-03 01:11:48 +00:00
}
2024-03-02 11:01:44 +00:00
loaded = true;
});
</script>
2024-05-15 06:16:22 +00:00
<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
<div class="mx-auto w-full md:px-0 h-full">
<div class=" flex flex-col h-full">
2024-10-21 06:53:36 +00:00
<div class="flex flex-col justify-between mb-1 gap-1">
2024-05-15 06:16:22 +00:00
<div class="flex flex-col gap-1 w-full">
<div class="flex w-full">
<div class="overflow-hidden w-full">
<div class="max-w-full">
<Selector
placeholder={$i18n.t('Select a model')}
2024-05-25 07:02:17 +00:00
items={$models.map((model) => ({
value: model.id,
label: model.name,
model: model
}))}
2024-05-15 06:16:22 +00:00
bind:value={selectedModelId}
/>
</div>
</div>
2024-10-21 06:53:36 +00:00
</div>
2024-03-02 11:01:44 +00:00
</div>
2024-05-15 06:16:22 +00:00
</div>
2024-03-02 11:01:44 +00:00
2024-10-21 12:09:28 +00:00
<div class="p-1">
<div class="p-3 outline outline-1 outline-gray-200 dark:outline-gray-800 rounded-lg">
<div class=" text-sm font-medium">{$i18n.t('System')}</div>
<textarea
id="system-textarea"
class="w-full h-full bg-transparent resize-none outline-none text-sm"
bind:value={system}
placeholder={$i18n.t("You're a helpful assistant.")}
rows="4"
/>
2024-05-15 06:16:22 +00:00
</div>
2024-10-21 12:09:28 +00:00
</div>
2024-05-15 06:16:22 +00:00
<div
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
id="messages-container"
bind:this={messagesContainerElement}
>
<div class=" h-full w-full flex flex-col">
<div class="flex-1 p-1">
2024-10-21 12:09:28 +00:00
<ChatCompletion bind:messages />
2024-03-02 11:01:44 +00:00
</div>
</div>
2024-05-15 06:16:22 +00:00
</div>
2024-03-03 01:11:48 +00:00
2024-10-21 06:53:36 +00:00
<div class="pb-3 flex justify-end">
2024-05-15 06:16:22 +00:00
{#if !loading}
<button
2024-10-21 07:05:27 +00:00
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
2024-05-15 06:16:22 +00:00
on:click={() => {
submitHandler();
}}
>
{$i18n.t('Submit')}
</button>
{:else}
<button
2024-10-21 06:53:36 +00:00
class="px-3 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-full"
2024-05-15 06:16:22 +00:00
on:click={() => {
stopResponse();
}}
>
{$i18n.t('Cancel')}
</button>
{/if}
2024-03-02 11:01:44 +00:00
</div>
</div>
</div>
</div>
<style>
.scrollbar-hidden::-webkit-scrollbar {
display: none; /* for Chrome, Safari and Opera */
}
.scrollbar-hidden {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>