rm state_sim WASM wrapper/demo (#5421)
This commit is contained in:
tersec
GitHub
parent
73ab2e5f39
commit
d4543239d7
|
|
@ -1,11 +1,11 @@
|
||||||
# Run nimbus state sim in a browser
|
# Run nimbus ncli in a browser
|
||||||
|
|
||||||
Simple runners for in-browser running of WASM versions of applications - based
|
Simple runners for in-browser running of WASM versions of applications - based
|
||||||
on emscripten-generated code.
|
on emscripten-generated code.
|
||||||
|
|
||||||
```
|
```
|
||||||
# Make sure you have built nimbus-eth2 with make first!
|
# Make sure you have built nimbus-eth2 with make first!
|
||||||
./build.sh
|
./build_ncli.sh
|
||||||
|
|
||||||
# Run a http server here (wasm + file:/// apparently don't mix)
|
# Run a http server here (wasm + file:/// apparently don't mix)
|
||||||
python -m SimpleHTTPServer
|
python -m SimpleHTTPServer
|
||||||
|
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
#!/usr/bin/env bash
|
|
||||||
|
|
||||||
# Simple build script to produce an Emscripten-based wasm version of the state
|
|
||||||
# sim.
|
|
||||||
# Assumes you have emcc latest-upstream in you PATH, per their install
|
|
||||||
# instructions (https://emscripten.org/docs/getting_started/downloads.html)
|
|
||||||
#
|
|
||||||
# git clone https://github.com/emscripten-core/emsdk.git
|
|
||||||
# cd emsdk
|
|
||||||
# git pull
|
|
||||||
# ./emsdk install latest-upstream
|
|
||||||
# ./emsdk activate latest-upstream
|
|
||||||
# source ./emsdk_env.sh
|
|
||||||
|
|
||||||
# Clean build every time - we use wildcards below so this keeps it simple
|
|
||||||
rm -rf state_sim/nimcache
|
|
||||||
|
|
||||||
# GC + emcc optimizer leads to crashes - for now, we disable the GC here
|
|
||||||
../env.sh nim c \
|
|
||||||
--cpu:i386 --os:linux --gc:none --threads:off \
|
|
||||||
-d:release -d:clang -d:emscripten -d:noSignalHandler -d:usemalloc \
|
|
||||||
--nimcache:state_sim/nimcache \
|
|
||||||
-c ../research/state_sim.nim
|
|
||||||
|
|
||||||
../env.sh emcc \
|
|
||||||
-I ../vendor/nimbus-build-system/vendor/Nim/lib \
|
|
||||||
state_sim/nimcache/*.c \
|
|
||||||
../vendor/nim-blscurve/blscurve/csources/32/{big_384_29.c,ecp2_BLS381.c,rom_curve_BLS381.c,ecp_BLS381.c,fp2_BLS381.c,fp_BLS381.c,rom_field_BLS381.c,pair_BLS381.c,fp12_BLS381.c,fp4_BLS381.c} \
|
|
||||||
-s ERROR_ON_UNDEFINED_SYMBOLS=0 \
|
|
||||||
-s TOTAL_MEMORY=1073741824 \
|
|
||||||
-s EXTRA_EXPORTED_RUNTIME_METHODS=FS \
|
|
||||||
-s WASM=1 \
|
|
||||||
--shell-file state_sim_shell.html \
|
|
||||||
-O3 \
|
|
||||||
-o state_sim/state_sim.html
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
||||||
<title>Nimbus tooling</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
body,
|
|
||||||
html {
|
|
||||||
font-family: monospace;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-container {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.first-row {
|
|
||||||
background-image: url("https://our.status.im/content/images/2018/12/Artboard-1-copy-15@2x.png");
|
|
||||||
background-position: center; /* Center the image */
|
|
||||||
background-repeat: no-repeat; /* Do not repeat the image */
|
|
||||||
background-size: 100%;
|
|
||||||
border: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.second-row {
|
|
||||||
flex-grow: 1;
|
|
||||||
border: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="row-container">
|
|
||||||
<div class="first-row">
|
|
||||||
<p><a href="https://github.com/status-im/nimbus-eth2#state-transition-simulation">Ethereum Beacon Chain state transition simulation</a> (unoptimized work in progress, you might run out of memory)</p>
|
|
||||||
<form action="state_sim/state_sim.html" method="get" target="frame">
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>Create / Validate BLS signatures</td>
|
|
||||||
<td>Validators</td>
|
|
||||||
<td>Slots</td>
|
|
||||||
<td>Attestation ratio</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><input type="radio" name="--validate" value="true">true<input type="radio" name="--validate" value="false"
|
|
||||||
checked="true"> false</td>
|
|
||||||
<td><input type="text" name="--validators" value="100"></input></td>
|
|
||||||
<td><input type="text" name="--slots" value="10"></input></td>
|
|
||||||
<td><input type="text" name="--attesterRatio" value="0.9"></input></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<input type="submit" value="Run that state transition!">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<iframe name="frame" src="" class="second-row"></iframe>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
||||||
<title>Nimbus State Sim</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
body,
|
|
||||||
html {
|
|
||||||
font-family: monospace;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-container {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.first-row {
|
|
||||||
background-image: url("https://our.status.im/content/images/2018/12/Artboard-1-copy-15@2x.png");
|
|
||||||
background-position: center; /* Center the image */
|
|
||||||
background-repeat: no-repeat; /* Do not repeat the image */
|
|
||||||
background-size: 100%;
|
|
||||||
border: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.second-row {
|
|
||||||
flex-grow: 1;
|
|
||||||
border: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="row-container">
|
|
||||||
<div class="first-row">
|
|
||||||
<p><a href="https://github.com/status-im/nimbus-eth2#state-transition-simulation">Ethereum Beacon Chain state transition simulation</a> (unoptimized work in progress, you might run out of memory)</p>
|
|
||||||
<form action="state_sim/state_sim.html" method="get" target="frame">
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>Create / Validate BLS signatures</td>
|
|
||||||
<td>Validators</td>
|
|
||||||
<td>Slots</td>
|
|
||||||
<td>Attestation ratio</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><input type="radio" name="--validate" value="true">true<input type="radio" name="--validate" value="false"
|
|
||||||
checked="true"> false</td>
|
|
||||||
<td><input type="text" name="--validators" value="100"></input></td>
|
|
||||||
<td><input type="text" name="--slots" value="10"></input></td>
|
|
||||||
<td><input type="text" name="--attesterRatio" value="0.9"></input></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<input type="submit" value="Run that state transition!">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<iframe name="frame" src="" class="second-row"></iframe>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,124 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
||||||
<title>Nimbus state transition function</title>
|
|
||||||
<style>
|
|
||||||
body,
|
|
||||||
html {
|
|
||||||
font-family: monospace;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-container {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.first-row {
|
|
||||||
}
|
|
||||||
|
|
||||||
.second-row {
|
|
||||||
flex-grow: 1;
|
|
||||||
border: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea.emscripten {
|
|
||||||
font-family: monospace;
|
|
||||||
background-color: beige;
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.emscripten_border {
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body height="100%" class="row-container">
|
|
||||||
<div class="first-row">
|
|
||||||
<div class="emscripten" id="status">Running...</div>
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
<textarea class="emscripten second-row" id="output" rows=50></textarea>
|
|
||||||
<script type='text/javascript'>
|
|
||||||
var statusElement = document.getElementById('status');
|
|
||||||
var progressElement = document.getElementById('progress');
|
|
||||||
|
|
||||||
var Module = {
|
|
||||||
arguments: window.location.search.substr(1).trim().split('&').concat(["--write_last_json:true"]),
|
|
||||||
|
|
||||||
preRun: [],
|
|
||||||
postRun: [() => offerFileAsDownload("state.json", "mime/type")],
|
|
||||||
print: (function () {
|
|
||||||
var element = document.getElementById('output');
|
|
||||||
if (element) element.value = ''; // clear browser cache
|
|
||||||
return function (text) {
|
|
||||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
|
||||||
// These replacements are necessary if you render to raw HTML
|
|
||||||
//text = text.replace(/&/g, "&");
|
|
||||||
//text = text.replace(/</g, "<");
|
|
||||||
//text = text.replace(/>/g, ">");
|
|
||||||
//text = text.replace('\n', '<br>', 'g');
|
|
||||||
console.log(text);
|
|
||||||
if (element) {
|
|
||||||
element.value += text + "\n";
|
|
||||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
|
||||||
}
|
|
||||||
};
|
|
||||||
})(),
|
|
||||||
printErr: function (text) {
|
|
||||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
|
||||||
console.error(text);
|
|
||||||
},
|
|
||||||
canvas: (function () { return null; })(),
|
|
||||||
setStatus: function (text) {
|
|
||||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
|
||||||
if (text === Module.setStatus.last.text) return;
|
|
||||||
statusElement.innerHTML = text;
|
|
||||||
},
|
|
||||||
totalDependencies: 0,
|
|
||||||
monitorRunDependencies: function (left) {
|
|
||||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
|
||||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies - left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
Module.setStatus('Downloading...');
|
|
||||||
window.onerror = function () {
|
|
||||||
Module.setStatus('Exception thrown, see JavaScript console');
|
|
||||||
|
|
||||||
Module.setStatus = function (text) {
|
|
||||||
if (text) Module.printErr('[post-exception status] ' + text);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
function offerFileAsDownload(filename, mime) {
|
|
||||||
mime = mime || "application/octet-stream";
|
|
||||||
|
|
||||||
let content = Module.FS.readFile(filename);
|
|
||||||
console.log(`Offering download of "${filename}", with ${content.length} bytes...`);
|
|
||||||
|
|
||||||
var a = document.createElement('a');
|
|
||||||
a.download = filename;
|
|
||||||
a.innerText = "Download state.json";
|
|
||||||
a.href = URL.createObjectURL(new Blob([content], { type: mime }));
|
|
||||||
statusElement.innerHTML = ""
|
|
||||||
statusElement.appendChild(a)
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
{{{ SCRIPT }}}
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue