livecod/web_python_lab.html at master · LiveCoronaDetector/livecod · 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>

<head>
<scripttype="text/javascript">
globalThis.languagePluginUrl='https://pyodide-cdn2.iodide.io/v0.15.0/full/';
</script>
<scriptsrc="https://pyodide-cdn2.iodide.io/v0.15.0/full/pyodide.js"></script>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/BrowserFS/2.0.0/browserfs.min.js"></script>
<linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
 .disabled{
visibility: hidden;
 }
</style>
</head>

<body>
<navclass="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<aclass="navbar-brand" href="#">Weniv world</a>
<buttonclass="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<spanclass="navbar-toggler-icon"></span>
</button>
<divclass="collapse navbar-collapse" id="navbarCollapse">
<ulclass="navbar-nav mr-auto">
<liclass="nav-item active">
<aclass="nav-link" href="#">Home<spanclass="sr-only">(current)</span></a>
</li>
<liclass="nav-item">
<aclass="nav-link" href="#">Code</a>
</li>
<liclass="nav-item">
<aclass="nav-link" href="#">About</a>
</li>
<liclass="nav-item">
<aclass="nav-link" href="#">Lecture</a>
</li>

</ul>
<formclass="form-inline mt-2 mt-md-0">
<inputclass="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<buttonclass="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

<divclass="container mt-3">
<divclass="row">
<divclass="col-md-12">
<h2>Web Python Lab</h2>
<divid="repl-area">
<pid="loading" style="text-align:center;">필요한 리소스를 준비중에 있습니다. 3초 정도 소요됩니다.</p>
</div>
</div>
</div>
</div>

<scripttype="text/javascript">
globalThis.iodide={
output: {
element: (tagName)=>{
letoutputPane=document.createElement(tagName);
document.querySelector("#result-pane").appendChild(outputPane);
returnoutputPane;
}
}
};
letreplArea=document.querySelector('#repl-area');

functionadd_block(){
letblock=document.createElement('div');
letcodeBlock=document.createElement('textarea');
letbutton=document.createElement('button');
letresultBlock=document.createElement('div');

button.textContent='실행!';
button.classList.add('btn');
button.classList.add('mt-1');
button.classList.add('mb-1');
button.classList.add('btn-primary');
codeBlock.classList.add('form-control');
codeBlock.classList.add('mt-3');

button.addEventListener('click',()=>execute_code_block(codeBlock,resultBlock));
block.appendChild(codeBlock);
block.appendChild(button);
block.appendChild(resultBlock);
replArea.appendChild(block);
}

asyncfunctionexecute_code_block(codeBlock,resultBlock){
console.log('clicked');
letcode=codeBlock.value;
console.log(code);
letresult=awaitpyodide.runPythonAsync(code).catch(err=>{
leterrorBlock=document.createElement('div');
errorBlock.textContent=err;
resultBlock.appendChild(errorBlock);
});
letstdout=pyodide.runPython("sys.stdout.getvalue()")
letstdout_console=document.createElement('div');
stdout_console.innerText=stdout;
resultBlock.appendChild(stdout_console);
pyodide.runPython("sys.stdout.flush()");
add_block();
}

BrowserFS.configure({
fs: "LocalStorage"
},asyncfunction(e){
console.log("Storage initialized.");
console.log(languagePluginLoader);
//var fs = BrowserFS.BFSRequire('fs');
//fs.writeFileSync('test.txt', 'Python+WebAssembly is Awesome!');
languagePluginLoader.then(async()=>{
console.log("Module loaded.");
letFS=pyodide._module.FS;
letPATH=pyodide._module.PATH;
console.log(FS.mount);
console.log(PATH);

// Create an Emscripten interface for the BrowserFS
varBFS=newBrowserFS.EmscriptenFS(FS,PATH);
// Create mount point in Emscripten FS
FS.createFolder(FS.root,'data',true,true);
// Mount BrowserFS into Emscripten FS
FS.mount(BFS,{
root: '/'
},'/data');
pyodide.runPython(`
 import sys
 from io import StringIO
 sys.stdout = StringIO()
 `);
add_block();
document.getElementById('loading').classList.add('disabled');
});
});
</script>
</body>

</html>