feat: python code execution

src/lib/components/chat/MessageInput.svelte

@@ -506,6 +506,7 @@
 						>
 							<div class="flex items-center gap-2 text-sm dark:text-gray-500">
 								<img
+									crossorigin="anonymous"
 									alt="model profile"
 									class="size-5 max-w-[28px] object-cover rounded-full"
 									src={$modelfiles.find((modelfile) => modelfile.tagName === selectedModel.id)

src/lib/components/chat/Messages/CodeBlock.svelte

@@ -2,10 +2,14 @@
 	import { copyToClipboard } from '$lib/utils';
 	import hljs from 'highlight.js';
 	import 'highlight.js/styles/github-dark.min.css';
+	import { tick } from 'svelte';
+
+	export let id = '';
 
 	export let lang = '';
 	export let code = '';
 
+	let executed = false;
 	let copied = false;
 
 	const copyCode = async () => {
@@ -17,6 +21,64 @@
 		}, 1000);
 	};
 
+	const executePython = async (text) => {
+		executed = true;
+
+		await tick();
+		const outputDiv = document.getElementById(`code-output-${id}`);
+
+		if (outputDiv) {
+			outputDiv.innerText = 'Running...';
+		}
+
+		// pyscript
+		let div = document.createElement('div');
+		let html = `<py-script type="py" worker>
+import js
+import sys
+import io
+
+# Create a StringIO object to capture the output
+output_capture = io.StringIO()
+
+# Save the current standard output
+original_stdout = sys.stdout
+
+# Replace the standard output with the StringIO object
+sys.stdout = output_capture
+
+${text}
+
+# Restore the original standard output
+sys.stdout = original_stdout
+
+# Retrieve the captured output
+captured_output = "[NO OUTPUT]"
+captured_output = output_capture.getvalue()
+
+# Print the captured output
+print(captured_output)
+
+def display_message():
+    output_div = js.document.getElementById("code-output-${id}")
+    output_div.innerText = captured_output
+
+display_message()
+			</py-script>`;
+
+		div.innerHTML = html;
+		const pyScript = div.firstElementChild;
+		try {
+			document.body.appendChild(pyScript);
+			setTimeout(() => {
+				document.body.removeChild(pyScript);
+			}, 0);
+		} catch (error) {
+			console.error('Python error:');
+			console.error(error);
+		}
+	};
+
 	$: highlightedCode = code ? hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value : '';
 </script>
 
@@ -26,15 +88,34 @@
 			class="flex justify-between bg-[#202123] text-white text-xs px-4 pt-1 pb-0.5 rounded-t-lg overflow-x-auto"
 		>
 			<div class="p-1">{@html lang}</div>
-			<button class="copy-code-button bg-none border-none p-1" on:click={copyCode}
-				>{copied ? 'Copied' : 'Copy Code'}</button
-			>
+
+			<div class="flex items-center">
+				{#if lang === 'python'}
+					<button
+						class="copy-code-button bg-none border-none p-1"
+						on:click={() => {
+							executePython(code);
+						}}>Run</button
+					>
+				{/if}
+				<button class="copy-code-button bg-none border-none p-1" on:click={copyCode}
+					>{copied ? 'Copied' : 'Copy Code'}</button
+				>
+			</div>
 		</div>
 
 		<pre
 			class=" hljs p-4 px-5 overflow-x-auto"
-			style="border-top-left-radius: 0px; border-top-right-radius: 0px;"><code
+			style="border-top-left-radius: 0px; border-top-right-radius: 0px; {executed &&
+				'border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;'}"><code
 				class="language-{lang} rounded-t-none whitespace-pre">{@html highlightedCode || code}</code
 			></pre>
+
+		{#if executed}
+			<div class="bg-[#202123] text-white px-4 py-4 rounded-b-lg">
+				<div class=" text-gray-500 text-sm mb-1">STDOUT/STDERR</div>
+				<div id="code-output-{id}" class="text-sm" />
+			</div>
+		{/if}
 	</div>
 {/if}

src/lib/components/chat/Messages/Placeholder.svelte

@@ -43,6 +43,7 @@
 					>
 						{#if model in modelfiles}
 							<img
+								crossorigin="anonymous"
 								src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
 								alt="modelfile"
 								class=" size-[2.7rem] rounded-full border-[1px] border-gray-200 dark:border-none"
@@ -50,6 +51,7 @@
 							/>
 						{:else}
 							<img
+								crossorigin="anonymous"
 								src={$i18n.language === 'dg-DG'
 									? `/doge.png`
 									: `${WEBUI_BASE_URL}/static/favicon.png`}

src/lib/components/chat/Messages/ProfileImage.svelte

@@ -3,5 +3,11 @@
 </script>
 
 <div class=" mr-3">
-	<img {src} class=" w-8 object-cover rounded-full" alt="profile" draggable="false" />
+	<img
+		crossorigin="anonymous"
+		{src}
+		class=" w-8 object-cover rounded-full"
+		alt="profile"
+		draggable="false"
+	/>
 </div>

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -437,6 +437,7 @@
 								{#each tokens as token}
 									{#if token.type === 'code'}
 										<CodeBlock
+											id={message.id}
 											lang={token.lang}
 											code={revertSanitizedResponseContent(token.text)}
 										/>

src/lib/components/layout/Sidebar.svelte

@@ -248,6 +248,7 @@
 			>
 				<div class="self-center mx-1.5">
 					<img
+						crossorigin="anonymous"
 						src="{WEBUI_BASE_URL}/static/favicon.png"
 						class=" size-6 -translate-x-1.5 rounded-full"
 						alt="logo"