morgan
/
chatgpt-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #184 from Webifi/main 

Fix choppy streaming, mask UI blocking
This commit is contained in:
Niek van der Maas 2023-06-16 18:35:15 +02:00 committed by GitHub
parent 9f232adc24 ca0627306f
commit c592cd639b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 108 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/lib/Chat.svelte
View File

@ -9,7 +9,12 @@
showSetChatSettings,
submitExitingPromptsNow,
continueMessage,
getMessage
getMessage,
currentChatMessages,
setCurrentChat,
currentChatId
} from './Storage.svelte'
import {
type Message,
@ -82,9 +87,9 @@
submitForm(false, true)
}
if ($continueMessage) {
const message = getMessage(chat, $continueMessage)
const message = getMessage(chatId, $continueMessage)
$continueMessage = ''
if (message && chat.messages.indexOf(message) === (chat.messages.length - 1)) {
if (message && $currentChatMessages.indexOf(message) === ($currentChatMessages.length - 1)) {
submitForm(lastSubmitRecorded, true, message)
}
}
@ -93,6 +98,7 @@
$: onStateChange($checkStateChange, $showSetChatSettings, $submitExitingPromptsNow, $continueMessage)
setCurrentChat(0)
// Make sure chat object is ready to go
updateChatSettings(chatId)
@ -106,6 +112,8 @@
onMount(async () => {
if (!chat) return
setCurrentChat(chatId)
chatRequest = new ChatRequest()
chatRequest.setChat(chat)
// Focus the input on mount
@ -164,9 +172,9 @@
const addNewMessage = () => {
if (chatRequest.updating) return
let inputMessage: Message
const lastMessage = chat.messages[chat.messages.length - 1]
const lastMessage = $currentChatMessages[$currentChatMessages.length - 1]
const uuid = uuidv4()
if (chat.messages.length === 0) {
if ($currentChatMessages.length === 0) {
inputMessage = { role: 'system', content: input.value, uuid }
} else if (lastMessage && lastMessage.role === 'user') {
inputMessage = { role: 'assistant', content: input.value, uuid }
@ -220,8 +228,8 @@
// Compose the input message
const inputMessage: Message = { role: 'user', content: input.value, uuid: uuidv4() }
addMessage(chatId, inputMessage)
} else if (!fillMessage && chat.messages.length && chat.messages[chat.messages.length - 1].finish_reason === 'length') {
fillMessage = chat.messages[chat.messages.length - 1]
} else if (!fillMessage && $currentChatMessages.length && $currentChatMessages[$currentChatMessages.length - 1].finish_reason === 'length') {
fillMessage = $currentChatMessages[$currentChatMessages.length - 1]
}
// Clear the input value
@ -237,7 +245,7 @@
chatRequest.updatingMessage = ''
try {
const response = await chatRequest.sendRequest(chat.messages, {
const response = await chatRequest.sendRequest($currentChatMessages, {
chat,
autoAddMessages: true, // Auto-add and update messages in array
streaming: chatSettings.stream,
@ -268,7 +276,7 @@
uuid: uuidv4()
}
const suggestMessages = chat.messages.slice(0, 10) // limit to first 10 messages
const suggestMessages = $currentChatMessages.slice(0, 10) // limit to first 10 messages
suggestMessages.push(suggestMessage)
const response = await chatRequest.sendRequest(suggestMessages, {
@ -346,9 +354,9 @@
</div>
</nav>
<Messages messages={chat.messages} chatId={chatId} />
<Messages messages={$currentChatMessages} chatId={chatId} chat={chat} />
{#if chatRequest.updating === true}
{#if chatRequest.updating === true || $currentChatId === 0}
<article class="message is-success assistant-message">
<div class="message-body content">
<span class="is-loading" ></span>
@ -357,7 +365,7 @@
</article>
{/if}
{#if chat.messages.length === 0 || (chat.messages.length === 1 && chat.messages[0].role === 'system')}
{#if $currentChatId !== 0 && ($currentChatMessages.length === 0 || ($currentChatMessages.length === 1 && $currentChatMessages[0].role === 'system'))}
<Prompts bind:input />
{/if}
</div>

11
src/lib/ChatRequest.svelte
View File

@ -3,12 +3,13 @@
import { mergeProfileFields, prepareSummaryPrompt } from './Profiles.svelte'
import { countMessageTokens, countPromptTokens, getModelMaxTokens } from './Stats.svelte'
import type { Chat, ChatCompletionOpts, ChatSettings, Message, Model, Request, RequestImageGeneration } from './Types.svelte'
import { deleteMessage, getChatSettingValueNullDefault, insertMessages, saveChatStore, getApiKey, addError } from './Storage.svelte'
import { deleteMessage, getChatSettingValueNullDefault, insertMessages, getApiKey, addError, currentChatMessages, getMessages, updateMessages } from './Storage.svelte'
import { scrollToBottom, scrollToMessage } from './Util.svelte'
import { getRequestSettingList, defaultModel } from './Settings.svelte'
import { EventStreamContentType, fetchEventSource } from '@microsoft/fetch-event-source'
import { getApiBase, getEndpointCompletions, getEndpointGenerations } from './ApiUtil.svelte'
import { v4 as uuidv4 } from 'uuid'
import { get } from 'svelte/store'
export class ChatRequest {
constructor () {
@ -317,7 +318,7 @@ export class ChatRequest {
const maxTokens = getModelMaxTokens(model) // max tokens for model
const continueRequest = async () => {
return await _this.sendRequest(chat.messages, {
return await _this.sendRequest(getMessages(chatId), {
...opts,
didSummary: true
}, overrides)
@ -358,7 +359,7 @@ export class ChatRequest {
promptSize = countPromptTokens(top.concat(rw), model) + countPadding
}
// Run a new request, now with the rolled messages hidden
return await _this.sendRequest(chat.messages, {
return await _this.sendRequest(get(currentChatMessages), {
...opts,
didSummary: true // our "summary" was simply dropping some messages
}, overrides)
@ -466,11 +467,11 @@ export class ChatRequest {
summaryResponse.summary = summarizedIds
// Disable the messages we summarized so they still show in history
rw.forEach((m, i) => { m.summarized = summaryIds })
saveChatStore()
updateMessages(chatId)
// Re-run request with summarized prompts
_this.updatingMessage = 'Continuing...'
scrollToBottom(true)
return await _this.sendRequest(chat.messages, {
return await _this.sendRequest(get(currentChatMessages), {
...opts,
didSummary: true
},

9
src/lib/EditMessage.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import Code from './Code.svelte'
import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
import { deleteMessage, chatsStorage, deleteSummaryMessage, truncateFromMessage, submitExitingPromptsNow, saveChatStore, continueMessage } from './Storage.svelte'
import { deleteMessage, deleteSummaryMessage, truncateFromMessage, submitExitingPromptsNow, continueMessage, updateMessages } from './Storage.svelte'
import { getPrice } from './Stats.svelte'
import SvelteMarkdown from 'svelte-markdown'
import type { Message, Model, Chat } from './Types.svelte'
@ -14,9 +14,8 @@
export let message:Message
export let chatId:number
export let chat:Chat
$: chat = $chatsStorage.find((chat) => chat.id === chatId) as Chat
$: chatSettings = chat.settings
const isError = message.role === 'error'
@ -49,7 +48,7 @@
})
afterUpdate(() => {
if (message.content.slice(-5).includes('```')) refreshCounter++
if (message.streaming && message.content.slice(-5).includes('```')) refreshCounter++
})
const edit = () => {
@ -178,7 +177,7 @@
return
}
message.suppress = value
saveChatStore()
updateMessages(chatId)
}
const downloadImage = () => {

6
src/lib/Messages.svelte
View File

@ -1,19 +1,19 @@
<script lang="ts">
// Iterate messages
import type { Message, Chat } from './Types.svelte'
import { chatsStorage, globalStorage } from './Storage.svelte'
import { globalStorage } from './Storage.svelte'
import EditMessage from './EditMessage.svelte'
export let messages : Message[]
export let chatId: number
export let chat: Chat
$: chat = $chatsStorage.find((chat) => chat.id === chatId) as Chat
$: chatSettings = chat.settings
</script>
{#each messages as message, i}
{#if !((message.summarized) && $globalStorage.hideSummarized) && !(i === 0 && message.role === 'system' && !chatSettings.useSystemPrompt)}
{#key message.uuid}<EditMessage bind:message={message} chatId={chatId} />{/key}
<EditMessage bind:message={message} chatId={chatId} chat={chat} />
{/if}
{/each}

10
src/lib/Profiles.svelte
View File

@ -2,7 +2,7 @@
import { getChatDefaults, getExcludeFromProfile } from './Settings.svelte'
import { get, writable } from 'svelte/store'
// Profile definitions
import { addMessage, clearMessages, deleteMessage, getChat, getChatSettings, getCustomProfiles, getGlobalSettings, newName, resetChatSettings, saveChatStore, setGlobalSettingValueByKey, updateProfile } from './Storage.svelte'
import { addMessage, clearMessages, deleteMessage, getChat, getChatSettings, getCustomProfiles, getGlobalSettings, getMessages, newName, resetChatSettings, saveChatStore, setGlobalSettingValueByKey, setMessages, updateProfile } from './Storage.svelte'
import type { Message, SelectOption, ChatSettings } from './Types.svelte'
import { v4 as uuidv4 } from 'uuid'
@ -90,15 +90,15 @@ export const prepareSummaryPrompt = (chatId:number, maxTokens:number) => {
}
export const setSystemPrompt = (chatId: number) => {
const chat = getChat(chatId)
const messages = getMessages(chatId)
const systemPromptMessage:Message = {
role: 'system',
content: prepareProfilePrompt(chatId),
uuid: uuidv4()
}
if (chat.messages[0]?.role === 'system') deleteMessage(chatId, chat.messages[0].uuid)
chat.messages.unshift(systemPromptMessage)
saveChatStore()
if (messages[0]?.role === 'system') deleteMessage(chatId, messages[0].uuid)
messages.unshift(systemPromptMessage)
setMessages(chatId, messages.filter(m => true))
}
// Restart currently loaded profile

116
src/lib/Storage.svelte
View File

@ -19,6 +19,8 @@
export let submitExitingPromptsNow = writable(false) // for them to go now. Will not submit anything in the input
export let pinMainMenu = writable(false) // Show menu (for mobile use)
export let continueMessage = writable('') //
export let currentChatMessages = writable([] as Message[])
export let currentChatId = writable(0)
const chatDefaults = getChatDefaults()
@ -215,70 +217,97 @@
chatsStorage.set(chats)
}
export const getMessages = (chatId: number): Message[] => {
if (get(currentChatId) === chatId) return get(currentChatMessages)
return getChat(chatId).messages
}
let setChatTimer: any
export const setCurrentChat = (chatId: number) => {
clearTimeout(setChatTimer)
if (!chatId) {
currentChatId.set(0)
currentChatMessages.set([])
}
setChatTimer = setTimeout(() => {
currentChatId.set(chatId)
currentChatMessages.set(getChat(chatId).messages)
}, 10)
}
let setMessagesTimer: any
export const setMessages = (chatId: number, messages: Message[]) => {
if (get(currentChatId) === chatId) {
// update current message cache right away
currentChatMessages.set(messages)
clearTimeout(setMessagesTimer)
// delay expensive all chats update for a bit
setMessagesTimer = setTimeout(() => {
getChat(chatId).messages = messages
saveChatStore()
}, 100)
} else {
getChat(chatId).messages = messages
saveChatStore()
}
}
export const updateMessages = (chatId: number) => {
setMessages(chatId, getMessages(chatId))
}
export const addError = (chatId: number, error: string) => {
addMessage(chatId, { content: error } as Message)
}
export const addMessage = (chatId: number, message: Message) => {
const chats = get(chatsStorage)
const chat = chats.find((chat) => chat.id === chatId) as Chat
const messages = getMessages(chatId)
if (!message.uuid) message.uuid = uuidv4()
if (chat.messages.indexOf(message) < 0) {
if (messages.indexOf(message) < 0) {
// Don't have message, add it
chat.messages.push(message)
messages[messages.length] = message
}
chatsStorage.set(chats)
setMessages(chatId, messages)
}
export const getMessages = (chatId: number):Message[] => {
const chats = get(chatsStorage)
const chat = chats.find((chat) => chat.id === chatId) as Chat
return chat.messages
}
export const getMessage = (chat: Chat, uuid:string):Message|undefined => {
return chat.messages.find((m) => m.uuid === uuid)
export const getMessage = (chatId: number, uuid:string):Message|undefined => {
return getMessages(chatId).find((m) => m.uuid === uuid)
}
export const insertMessages = (chatId: number, insertAfter: Message, newMessages: Message[]) => {
const chats = get(chatsStorage)
const chat = chats.find((chat) => chat.id === chatId) as Chat
const index = chat.messages.findIndex((m) => m.uuid === insertAfter.uuid)
const messages = getMessages(chatId)
const index = messages.findIndex((m) => m.uuid === insertAfter.uuid)
if (index === undefined || index < 0) {
console.error("Couldn't insert after message:", insertAfter)
return
}
newMessages.forEach(m => { m.uuid = m.uuid || uuidv4() })
chat.messages.splice(index + 1, 0, ...newMessages)
chatsStorage.set(chats)
messages.splice(index + 1, 0, ...newMessages)
setMessages(chatId, messages.filter(m => true))
}
export const deleteSummaryMessage = (chatId: number, uuid: string) => {
const chats = get(chatsStorage)
const chat = chats.find((chat) => chat.id === chatId) as Chat
const message = getMessage(chat, uuid)
const message = getMessage(chatId, uuid)
if (message && message.summarized) throw new Error('Unable to delete summarized message')
if (message && message.summary) { // messages we summarized
message.summary.forEach(sid => {
const m = getMessage(chat, sid)
const m = getMessage(chatId, sid)
if (m) {
delete m.summarized // unbind to this summary
}
})
delete message.summary
}
chatsStorage.set(chats)
updateMessages(chatId)
deleteMessage(chatId, uuid)
}
export const deleteMessage = (chatId: number, uuid: string) => {
const chats = get(chatsStorage)
const chat = chats.find((chat) => chat.id === chatId) as Chat
const index = chat.messages.findIndex((m) => m.uuid === uuid)
const message = getMessage(chat, uuid)
const messages = getMessages(chatId)
const index = messages.findIndex((m) => m.uuid === uuid)
const message = getMessage(chatId, uuid)
if (message?.summarized) throw new Error('Unable to delete summarized message')
if (message?.summary) throw new Error('Unable to directly delete message summary')
// const found = chat.messages.filter((m) => m.uuid === uuid)
if (index < 0) {
console.error(`Unable to find and delete message with ID: ${uuid}`)
return
@ -287,8 +316,8 @@
deleteImage(chatId, message.image.id)
}
// console.warn(`Deleting message with ID: ${uuid}`, found, index)
chat.messages.splice(index, 1) // remove item
chatsStorage.set(chats)
messages.splice(index, 1) // remove item
setMessages(chatId, messages.filter(m => true))
}
const clearImages = (chatId: number, messages: Message[]) => {
@ -298,38 +327,33 @@
}
export const truncateFromMessage = (chatId: number, uuid: string) => {
const chats = get(chatsStorage)
const chat = chats.find((chat) => chat.id === chatId) as Chat
const index = chat.messages.findIndex((m) => m.uuid === uuid)
const message = getMessage(chat, uuid)
const messages = getMessages(chatId)
const index = messages.findIndex((m) => m.uuid === uuid)
const message = getMessage(chatId, uuid)
if (message && message.summarized) throw new Error('Unable to truncate from a summarized message')
// const found = chat.messages.filter((m) => m.uuid === uuid)
if (index < 0) {
throw new Error(`Unable to find message with ID: ${uuid}`)
}
const truncated = chat.messages.splice(index + 1) // remove every item after
const truncated = messages.splice(index + 1) // remove every item after
clearImages(chatId, truncated)
chatsStorage.set(chats)
setMessages(chatId, messages.filter(m => true))
}
export const clearMessages = (chatId: number) => {
const chats = get(chatsStorage)
const chat = chats.find((chat) => chat.id === chatId) as Chat
clearImages(chatId, chat.messages)
chat.messages = []
chatsStorage.set(chats)
clearImages(chatId, getMessages(chatId))
setMessages(chatId, [])
}
export const deleteChat = (chatId: number) => {
const chats = get(chatsStorage)
const chat = getChat(chatId)
clearImages(chatId, chat?.messages || [])
clearImages(chatId, getMessages(chatId) || [])
chatsStorage.set(chats.filter((chat) => chat.id !== chatId))
}
export const updateChatImages = async (chatId: number, chat: Chat) => {
for (let i = 0; i < chat.messages.length; i++) {
const m = chat.messages[i]
const messages = getMessages(chatId)
for (let i = 0; i < messages.length; i++) {
const m = messages[i]
if (m.image) m.image = await setImage(chatId, m.image)
}
}