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
|
||||
on emscripten-generated code.
|
||||
|
||||
```
|
||||
# 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)
|
||||
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