CodeBlock.svelte 7.3 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
2
<script lang="ts">
	import hljs from 'highlight.js';
3
	import { loadPyodide } from 'pyodide';
4
5
	import mermaid from 'mermaid';

Timothy J. Baek's avatar
Timothy J. Baek committed
6
	import { getContext, getAllContexts } from 'svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
7
8
9
10
	import { copyToClipboard } from '$lib/utils';

	import 'highlight.js/styles/github-dark.min.css';

11
	import PyodideWorker from '$lib/workers/pyodide.worker?worker';
Timothy J. Baek's avatar
Timothy J. Baek committed
12

Timothy J. Baek's avatar
Timothy J. Baek committed
13
14
	const i18n = getContext('i18n');

Timothy J. Baek's avatar
Timothy J. Baek committed
15
	export let id = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
16

17
	export let token;
Timothy J. Baek's avatar
Timothy J. Baek committed
18
19
20
	export let lang = '';
	export let code = '';

21
	let highlightedCode = null;
22
	let executing = false;
23
24
25
26
27

	let stdout = null;
	let stderr = null;
	let result = null;

Timothy J. Baek's avatar
Timothy J. Baek committed
28
29
30
31
32
33
34
35
36
37
38
	let copied = false;

	const copyCode = async () => {
		copied = true;
		await copyToClipboard(code);

		setTimeout(() => {
			copied = false;
		}, 1000);
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
	const checkPythonCode = (str) => {
		// Check if the string contains typical Python syntax characters
		const pythonSyntax = [
			'def ',
			'else:',
			'elif ',
			'try:',
			'except:',
			'finally:',
			'yield ',
			'lambda ',
			'assert ',
			'nonlocal ',
			'del ',
			'True',
			'False',
			'None',
			' and ',
			' or ',
			' not ',
			' in ',
			' is ',
Timothy J. Baek's avatar
Timothy J. Baek committed
61
			' with '
Timothy J. Baek's avatar
Timothy J. Baek committed
62
63
64
65
66
67
68
69
70
71
72
73
		];

		for (let syntax of pythonSyntax) {
			if (str.includes(syntax)) {
				return true;
			}
		}

		// If none of the above conditions met, it's probably not Python code
		return false;
	};

74
	const executePython = async (code) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
75
		if (!code.includes('input') && !code.includes('matplotlib')) {
76
77
78
79
80
			executePythonAsWorker(code);
		} else {
			result = null;
			stdout = null;
			stderr = null;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
81

82
			executing = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
83

Timothy J. Baek's avatar
Timothy J. Baek committed
84
			document.pyodideMplTarget = document.getElementById(`plt-canvas-${id}`);
Timothy J. Baek's avatar
Timothy J. Baek committed
85

86
87
88
89
			let pyodide = await loadPyodide({
				indexURL: '/pyodide/',
				stdout: (text) => {
					console.log('Python output:', text);
90

91
92
93
94
95
96
97
98
99
100
101
102
103
					if (stdout) {
						stdout += `${text}\n`;
					} else {
						stdout = `${text}\n`;
					}
				},
				stderr: (text) => {
					console.log('An error occured:', text);
					if (stderr) {
						stderr += `${text}\n`;
					} else {
						stderr = `${text}\n`;
					}
104
105
				},
				packages: ['micropip']
106
			});
Timothy J. Baek's avatar
Timothy J. Baek committed
107

108
109
			try {
				const micropip = pyodide.pyimport('micropip');
Timothy J. Baek's avatar
Timothy J. Baek committed
110

Timothy J. Baek's avatar
Timothy J. Baek committed
111
				// await micropip.set_index_urls('https://pypi.org/pypi/{package_name}/json');
Timothy J. Baek's avatar
Timothy J. Baek committed
112

113
114
115
116
				let packages = [
					code.includes('requests') ? 'requests' : null,
					code.includes('bs4') ? 'beautifulsoup4' : null,
					code.includes('numpy') ? 'numpy' : null,
Timothy J. Baek's avatar
Timothy J. Baek committed
117
					code.includes('pandas') ? 'pandas' : null,
Timothy J. Baek's avatar
Timothy J. Baek committed
118
					code.includes('matplotlib') ? 'matplotlib' : null,
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
119
					code.includes('sklearn') ? 'scikit-learn' : null,
Timothy J. Baek's avatar
Timothy J. Baek committed
120
					code.includes('scipy') ? 'scipy' : null,
121
122
					code.includes('re') ? 'regex' : null,
					code.includes('seaborn') ? 'seaborn' : null
123
				].filter(Boolean);
Timothy J. Baek's avatar
Timothy J. Baek committed
124

125
126
				console.log(packages);
				await micropip.install(packages);
Timothy J. Baek's avatar
Timothy J. Baek committed
127

128
				result = await pyodide.runPythonAsync(`from js import prompt
Timothy J. Baek's avatar
Timothy J. Baek committed
129
130
131
132
def input(p):
    return prompt(p)
__builtins__.input = input`);

133
134
135
136
137
				result = await pyodide.runPython(code);

				if (!result) {
					result = '[NO OUTPUT]';
				}
138

139
140
141
				console.log(result);
				console.log(stdout);
				console.log(stderr);
Timothy J. Baek's avatar
Timothy J. Baek committed
142
143
144
145

				const pltCanvasElement = document.getElementById(`plt-canvas-${id}`);

				if (pltCanvasElement?.innerHTML !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
146
					pltCanvasElement.classList.add('pt-4');
Timothy J. Baek's avatar
Timothy J. Baek committed
147
				}
148
149
150
			} catch (error) {
				console.error('Error:', error);
				stderr = error;
Timothy J. Baek's avatar
Timothy J. Baek committed
151
152
			}

153
			executing = false;
154
		}
155
156
157
158
159
160
161
162
163
164
165
166
167
	};

	const executePythonAsWorker = async (code) => {
		result = null;
		stdout = null;
		stderr = null;

		executing = true;

		let packages = [
			code.includes('requests') ? 'requests' : null,
			code.includes('bs4') ? 'beautifulsoup4' : null,
			code.includes('numpy') ? 'numpy' : null,
Timothy J. Baek's avatar
Timothy J. Baek committed
168
			code.includes('pandas') ? 'pandas' : null,
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
169
			code.includes('sklearn') ? 'scikit-learn' : null,
Timothy J. Baek's avatar
Timothy J. Baek committed
170
			code.includes('scipy') ? 'scipy' : null,
171
172
			code.includes('re') ? 'regex' : null,
			code.includes('seaborn') ? 'seaborn' : null
173
174
		].filter(Boolean);

Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
175
176
		console.log(packages);

177
		const pyodideWorker = new PyodideWorker();
178
179
180
181
182
183
184
185
186
187
188
189
190

		pyodideWorker.postMessage({
			id: id,
			code: code,
			packages: packages
		});

		setTimeout(() => {
			if (executing) {
				executing = false;
				stderr = 'Execution Time Limit Exceeded';
				pyodideWorker.terminate();
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
191
		}, 60000);
192
193
194
195
196
197
198
199
200
201
202
203
204

		pyodideWorker.onmessage = (event) => {
			console.log('pyodideWorker.onmessage', event);
			const { id, ...data } = event.data;

			console.log(id, data);

			data['stdout'] && (stdout = data['stdout']);
			data['stderr'] && (stderr = data['stderr']);
			data['result'] && (result = data['result']);

			executing = false;
		};
205

206
207
208
209
		pyodideWorker.onerror = (event) => {
			console.log('pyodideWorker.onerror', event);
			executing = false;
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
210
211
	};

212
213
	let debounceTimeout;

214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
	$: if (code) {
		if (lang === 'mermaid' && (token?.raw ?? '').endsWith('```')) {
			// Function to perform the code highlighting
			const renderMermaid = async () => {
				// mermaid.initialize({ startOnLoad: true });
				await mermaid.run({
					querySelector: `.mermaid-${id}`
				});
			};
			// Clear the previous timeout if it exists
			clearTimeout(debounceTimeout);
			// Set a new timeout to debounce the code highlighting
			debounceTimeout = setTimeout(renderMermaid, 50);
		} else {
			// Function to perform the code highlighting
			const highlightCode = () => {
				highlightedCode = hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value || code;
			};

			// Clear the previous timeout if it exists
			clearTimeout(debounceTimeout);
			// Set a new timeout to debounce the code highlighting
			debounceTimeout = setTimeout(highlightCode, 10);
		}
238
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
239
240
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
241
<div class="my-2" dir="ltr">
242
	{#if lang === 'mermaid'}
243
244
245
		{#key code}
			<pre class="mermaid-{id}">{code}</pre>
		{/key}
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
	{:else}
		<div
			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>

			<div class="flex items-center">
				{#if lang.toLowerCase() === 'python' || lang.toLowerCase() === 'py' || (lang === '' && checkPythonCode(code))}
					{#if executing}
						<div class="copy-code-button bg-none border-none p-1 cursor-not-allowed">Running</div>
					{:else}
						<button
							class="copy-code-button bg-none border-none p-1"
							on:click={() => {
								executePython(code);
							}}>{$i18n.t('Run')}</button
						>
					{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
264
				{/if}
265
266
267
268
				<button class="copy-code-button bg-none border-none p-1" on:click={copyCode}
					>{copied ? $i18n.t('Copied') : $i18n.t('Copy Code')}</button
				>
			</div>
269
		</div>
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297

		<pre
			class=" hljs p-4 px-5 overflow-x-auto"
			style="border-top-left-radius: 0px; border-top-right-radius: 0px; {(executing ||
				stdout ||
				stderr ||
				result) &&
				'border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;'}"><code
				class="language-{lang} rounded-t-none whitespace-pre"
				>{#if highlightedCode}{@html highlightedCode}{:else}{code}{/if}</code
			></pre>

		<div
			id="plt-canvas-{id}"
			class="bg-[#202123] text-white max-w-full overflow-x-auto scrollbar-hidden"
		/>

		{#if executing}
			<div class="bg-[#202123] text-white px-4 py-4 rounded-b-lg">
				<div class=" text-gray-500 text-xs mb-1">STDOUT/STDERR</div>
				<div class="text-sm">Running...</div>
			</div>
		{:else if stdout || stderr || result}
			<div class="bg-[#202123] text-white px-4 py-4 rounded-b-lg">
				<div class=" text-gray-500 text-xs mb-1">STDOUT/STDERR</div>
				<div class="text-sm">{stdout || stderr || result}</div>
			</div>
		{/if}
298
299
	{/if}
</div>