Implemented streaming mode and added option to toggle it in the Playground component.

src/lib/components/Playground/Playground.svelte

@@ -23,6 +23,7 @@
 	let messages: Message[] = startMessages;
 	let temperature = 0.5;
 	let maxTokens = 32000;
+	let streaming = true;
 
 	let loading = false;
 	let streamingMessage: Message | null = null;
@@ -59,31 +60,47 @@
 		}
 		(document.activeElement as HTMLElement).blur();
 		loading = true;
-		streamingMessage = { role: 'assistant', content: '' };
-		messages = [...messages, streamingMessage];
-
-		let out = '';  // Declare the 'out' variable
-
+		
 		try {
 			const hf = new HfInference(hfToken);
-
-			for await (const chunk of hf.chatCompletionStream({
-				model: currentModel,
-				messages: [
-					systemMessage,
-					...messages.map(({ role, content }) => ({ role, content }))
-				],
-				temperature: 0.1,
-				max_tokens: 500,
-				seed: 0,
-			})) {
-				if (chunk.choices && chunk.choices.length > 0) {
-					if (streamingMessage && chunk.choices[0]?.delta?.content) {
-						out += chunk.choices[0].delta.content;
-						streamingMessage.content = out;
-						messages = [...messages];
+			const requestMessages = [
+				systemMessage,
+				...messages.map(({ role, content }) => ({ role, content }))
+			];
+
+			if (streaming) {
+				streamingMessage = { role: 'assistant', content: '' };
+				messages = [...messages, streamingMessage];
+				let out = '';
+
+				for await (const chunk of hf.chatCompletionStream({
+					model: currentModel,
+					messages: requestMessages,
+					temperature,
+					max_tokens: maxTokens,
+					seed: 0,
+				})) {
+					if (chunk.choices && chunk.choices.length > 0) {
+						if (streamingMessage && chunk.choices[0]?.delta?.content) {
+							out += chunk.choices[0].delta.content;
+							streamingMessage.content = out;
+							messages = [...messages];
+						}
 					}
 				}
+			} else {
+				const response = await hf.chatCompletion({
+					model: currentModel,
+					messages: requestMessages,
+					temperature,
+					max_tokens: maxTokens,
+					seed: 0,
+				});
+				
+				if (response.choices && response.choices.length > 0) {
+					const newMessage = { role: 'assistant', content: response.choices[0].message.content };
+					messages = [...messages, newMessage];
+				}
 			}
 		} catch (error) {
 			alert('error: ' + error.message);
@@ -181,6 +198,7 @@
 			bind:currentModel
 			bind:temperature
 			bind:maxTokens
+			bind:streaming
 		/>
 	</div>
 </div>

src/lib/components/Playground/PlaygroundOptions.svelte

@@ -72,7 +72,7 @@
 </div>
 <div class="mt-2">
 	<label class="flex cursor-pointer items-center justify-between">
-		<input type="checkbox" value="" class="peer sr-only" disabled />
+		<input type="checkbox" bind:checked={streaming} class="peer sr-only" />
 		<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Streaming</span>
 		<div
 			class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none dark:border-gray-600 dark:bg-gray-700"