interupt

src/lib/components/Playground/Playground.svelte

@@ -10,6 +10,7 @@
 	import PlaygroundOptions from '$lib/components/Playground/PlaygroundOptions.svelte';
 	import PlaygroundTokenModal from './PlaygroundTokenModal.svelte';
 	import PlaygroundModelSelector from './PlaygroundModelSelector.svelte';
+	import { onDestroy } from 'svelte';
 
 	const compatibleModels: string[] = [
 		'01-ai/Yi-1.5-34B-Chat',
@@ -65,6 +66,13 @@
 	let tokens = 0;
 	let latency = 0;
 	let messageContainer: HTMLDivElement | null = null;
+	let abortController: AbortController | null = null;
+
+	onDestroy(() => {
+		if (abortController) {
+			abortController.abort();
+		}
+	});
 
 	function addMessage() {
 		currentConversation.messages = [
@@ -78,6 +86,14 @@
 	}
 
 	function deleteMessage(i: number) {
+		if (i === currentConversation.messages.length - 1 && streamingMessage) {
+			if (abortController) {
+				abortController.abort();
+				abortController = null;
+			}
+			loading = false;
+			streamingMessage = null;
+		}
 		currentConversation.messages = currentConversation.messages.filter((_, j) => j !== i);
 		conversations = conversations;
 	}
@@ -104,6 +120,7 @@
 			if (currentConversation.config.streaming) {
 				streamingMessage = { role: 'assistant', content: '' };
 				currentConversation.messages = [...currentConversation.messages, streamingMessage];
+				abortController = new AbortController();
 
 				await handleStreamingResponse(
 					hf,
@@ -119,7 +136,8 @@
 							conversations = conversations;
 							scrollToBottom();
 						}
-					}
+					},
+					abortController
 				);
 			} else {
 				const newMessage = await handleNonStreamingResponse(
@@ -135,12 +153,15 @@
 				scrollToBottom();
 			}
 		} catch (error) {
-			alert('error: ' + (error as Error).message);
+			if (error.name !== 'AbortError') {
+				alert('error: ' + (error as Error).message);
+			}
 		} finally {
 			const endTime = performance.now();
 			latency = Math.round(endTime - startTime);
 			loading = false;
 			streamingMessage = null;
+			abortController = null;
 			scrollToBottom();
 		}
 	}
@@ -217,6 +238,7 @@
 						<button
 							class="flex px-6 py-6 hover:bg-gray-50 dark:hover:bg-gray-800/50"
 							on:click={addMessage}
+							disabled={loading}
 						>
 							<div class="flex items-center gap-2 !p-0 text-sm font-semibold">
 								<svg

src/lib/components/Playground/playgroundUtils.ts

@@ -20,19 +20,28 @@ export async function handleStreamingResponse(
 	temperature: number,
 	maxTokens: number,
 	jsonMode: boolean,
-	onChunk: (content: string) => void
+	onChunk: (content: string) => void,
+	abortController: AbortController
 ): Promise<void> {
 	let out = '';
-	for await (const chunk of hf.chatCompletionStream({
-		model: model,
-		messages: messages,
-		temperature: temperature,
-		max_tokens: maxTokens,
-		json_mode: jsonMode
-	})) {
-		if (chunk.choices && chunk.choices.length > 0 && chunk.choices[0]?.delta?.content) {
-			out += chunk.choices[0].delta.content;
-			onChunk(out);
+	try {
+		for await (const chunk of hf.chatCompletionStream({
+			model: model,
+			messages: messages,
+			temperature: temperature,
+			max_tokens: maxTokens,
+			json_mode: jsonMode
+		}, { signal: abortController.signal })) {
+			if (chunk.choices && chunk.choices.length > 0 && chunk.choices[0]?.delta?.content) {
+				out += chunk.choices[0].delta.content;
+				onChunk(out);
+			}
+		}
+	} catch (error) {
+		if (error.name === 'AbortError') {
+			console.log('Stream aborted');
+		} else {
+			throw error;
 		}
 	}
 }