arcade/webplayground/local_run.tpl at 7fa32e92b080f385526802e95bd8253e823d1304 · pythonarcade/arcade · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>

<head>
    <title>{{script_name}}</title>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.29.0/full/pyodide.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #status {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 5px;
            font-family: Arial, sans-serif;
            z-index: 1000;
        }
        .loading {
            color: #ff9800;
        }
        .ready {
            color: #4caf50;
        }
        .error {
            color: #f44336;
        }
    </style>
</head>

<body>
    <div id="status" class="loading">Loading...</div>
    <script type="text/javascript">
        async function main() {
            const statusDiv = document.getElementById('status');

            try {
                statusDiv.textContent = 'Loading Pyodide...';
                let pyodide = await loadPyodide();

                statusDiv.textContent = 'Installing packages...';
                await pyodide.loadPackage("micropip");
                const micropip = pyodide.pyimport("micropip");
                await pyodide.loadPackage("pillow");
                await micropip.install("http://localhost:8000/static/{{arcade_wheel}}", pre=true);

                statusDiv.textContent = 'Loading script...';

                // Fetch the script content with cache-busting timestamp
                const timestamp = new Date().getTime();
                const response = await fetch("/local_scripts/{{script_name}}.py?t=" + timestamp);
                const scriptContent = await response.text();

                statusDiv.textContent = 'Running script...';
                statusDiv.className = 'ready';

                // Execute the script content (this will run the if __name__ == "__main__" block)
                pyodide.runPython(scriptContent);


                statusDiv.textContent = 'Ready';
                setTimeout(() => {
                    statusDiv.style.display = 'none';
                }, 2000);

            } catch (error) {
                statusDiv.textContent = 'Error: ' + error.message;
                statusDiv.className = 'error';
                console.error(error);
            }
        }
        main();
    </script>
</body>

</html>