python-online-with-pyodide/python-pyodide-web-browser-implementation.html at main · 01one/python-online-with-pyodide · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/python/python.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>

    <style>
        body {
            font-family: sans-serif;
            margin: 20px;
        }

        .editor-container {
            margin-bottom: 20px;
        }

        #run-button,#clear-button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            border-radius: 5px;
            cursor: pointer;
        }

        #output-box-container {
            height: 100px;
            border: 1px solid #ccc;
            padding: 10px;
            background-color: rgb(245, 245, 245);
        }

        .console-output {
            overflow-y: scroll;
            height: 200px;
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #222;
            color: #00FF00;
            white-space: pre-wrap;
            font-family: 'Lucida Console', 'Courier New', monospace;
        }
    </style>
</head>

<body>
    <h1>Python Online Interpreter</h1>
    <div class="editor-container">
        <textarea id="code-editor">print("Hello from Python!")</textarea>
    </div>

    <button id="run-button">Run</button>
    <button id="clear-button">Clear Console</button>
    <div class="console-output" id="consoleOutput"></div>
    <div id="output-box-container"></div>
        <script>
            (function() {
                var oldConsoleLog = console.log;
                console.log = function(message) {
                    var consoleOutput = document.getElementById('consoleOutput');
                    if (consoleOutput) {
                        consoleOutput.textContent += message + '\n';
                        consoleOutput.scrollTop = consoleOutput.scrollHeight;
                    }
                    oldConsoleLog.apply(console, arguments);
                };
            })();
            </script>

    <script type="text/javascript">
        async function main() {
           let pyodide = await loadPyodide({ indexURL: "https://cdn.jsdelivr.net/pyodide/v0.24.1/full/" });
            console.log("Ready to run your program...");
            // numpy and matplitlib package
            await pyodide.loadPackage(['numpy', 'matplotlib']);

            var editor = CodeMirror.fromTextArea(document.getElementById('code-editor'), {
                lineNumbers: true,
                mode: "python"
            });

            let runningProcess = null;

            document.getElementById('run-button').addEventListener('click', async () => {
                const code = editor.getValue();

                document.getElementById('output-box-container').innerHTML = '';

                try {
                   // let output = pyodide.runPython(document.getElementById(code));
                   const output = await pyodide.runPythonAsync(code);
                    //const output = await pyodide.runPythonAsync(code);
                    displayOutput(output);
                } catch (error) {
                    displayOutput('Error: ' + error.toString());
                }
            });


             document.getElementById('clear-button').addEventListener('click', () => {
                document.getElementById('consoleOutput').innerHTML = '';
            });

            function displayOutput(output) {
                const outputBox = document.getElementById('output-box-container');
                outputBox.textContent = output;
            }
        }
        main();
    </script>
</body>

</html>