feat: python code execution

src/Untitled-1.js

@@ -0,0 +1,20 @@
+function execute(id, text) {
+	// pyscript
+	let div = document.createElement('div');
+	let html = `
+            <py-script type="mpy">
+${text}
+            </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);
+	}
+}

src/app.html

@@ -12,6 +12,10 @@
 			title="Open WebUI"
 			href="/opensearch.xml"
 		/>
+
+		<script type="module" src="/pyscript/core.js"></script>
+		<link rel="stylesheet" href="/pyscript/core.css" />
+
 		<script>
 			// On page load or when changing themes, best to add inline in `head` to avoid FOUC
 			(() => {
@@ -54,6 +58,11 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
+		<py-config> interpreter = "/pyodide/pyodide.mjs" </py-config>
+
+		<script type="py">
+			print('pyscript:loaded')
+		</script>
 		<div style="display: contents">%sveltekit.body%</div>
 
 		<div

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"

src/routes/+layout.svelte

@@ -89,7 +89,7 @@
 
 <svelte:head>
 	<title>{$WEBUI_NAME}</title>
-	<link rel="icon" href="{WEBUI_BASE_URL}/static/favicon.png" />
+	<link crossorigin="anonymous" rel="icon" href="{WEBUI_BASE_URL}/static/favicon.png" />
 
 	<!-- rosepine themes have been disabled as it's not up to date with our latest version. -->
 	<!-- feel free to make a PR to fix if anyone wants to see it return -->

src/routes/auth/+page.svelte

@@ -76,7 +76,12 @@
 	<div class="fixed m-10 z-50">
 		<div class="flex space-x-2">
 			<div class=" self-center">
-				<img src="{WEBUI_BASE_URL}/static/favicon.png" class=" w-8 rounded-full" alt="logo" />
+				<img
+					crossorigin="anonymous"
+					src="{WEBUI_BASE_URL}/static/favicon.png"
+					class=" w-8 rounded-full"
+					alt="logo"
+				/>
 			</div>
 		</div>
 	</div>