-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
255 lines (223 loc) · 13.3 KB
/
index.html
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
</head>
<body>
<script type="module">
// Importing the necessary functions from the WASM module
import init, { prove_wasm, verify_wasm, gen_circuit_params_wasm, gen_pk_wasm, gen_vk_wasm } from './pkg/ezkl_lib.js';
async function run() {
try {
// Initialize the WASM module
await init();
// Function to read an uploaded file and return its content as a Uint8ClampedArray
function readUploadedFileAsText(inputFileElement) {
return new Promise((resolve, reject) => {
const file = inputFileElement.files[0];
const reader = new FileReader();
reader.onload = event => {
const arrayBuffer = event.target.result;
resolve(new Uint8ClampedArray(arrayBuffer));
};
reader.onerror = error => {
reject(new Error('File could not be read: ' + error));
};
reader.readAsArrayBuffer(file);
});
}
// Adding event listeners for gen_circuit_params_wasm, gen_pk_wasm, gen_vk_wasm
document.getElementById("genCircuitParamsButton").addEventListener("click", async () => {
try {
const circuit_ser = await readUploadedFileAsText(document.getElementById("circuit_ser_gen"));
const run_args_ser = await readUploadedFileAsText(document.getElementById("run_args_ser_gen"));
const result_cp = await gen_circuit_params_wasm(circuit_ser, run_args_ser);
document.getElementById("genCircuitParamsResult").innerText = result_cp ? 'Generation successful' : 'Generation failed';
// Creating a blob and a URL for it from the result
const blob = new Blob([result_cp.buffer], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
// Creating a hidden anchor element, adding it to the document,
// clicking it to download the file and then removing the element
const g = document.createElement("a");
g.href = url;
g.download = 'circuit';
g.style.display = 'none';
document.body.appendChild(g);
g.click();
setTimeout(() => {
URL.revokeObjectURL(url);
document.body.removeChild(g);
}, 0);
} catch (error) {
console.error("An error occurred generating circuit parameters:", error);
}
});
document.getElementById("genPkButton").addEventListener("click", async () => {
try {
const circuit_ser = await readUploadedFileAsText(document.getElementById("circuit_ser_pk"));
const params_ser = await readUploadedFileAsText(document.getElementById("params_ser_pk"));
const circuit_params_ser = await readUploadedFileAsText(document.getElementById("circuit_params_ser_pk"));
const result_pk = await gen_pk_wasm(circuit_ser, params_ser, circuit_params_ser);
document.getElementById("genPkResult").innerText = result_pk ? 'Generation successful' : 'Generation failed';
// Creating a blob and a URL for it from the result
const blob = new Blob([result_pk.buffer], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
// Creating a hidden anchor element, adding it to the document,
// clicking it to download the file and then removing the element
const pk = document.createElement("a");
pk.href = url;
pk.download = 'pk.key';
pk.style.display = 'none';
document.body.appendChild(pk);
pk.click();
setTimeout(() => {
URL.revokeObjectURL(url);
document.body.removeChild(pk);
}, 0);
} catch (error) {
console.error("An error occurred generating proving key:", error);
}
});
document.getElementById("genVkButton").addEventListener("click", async () => {
try {
const pk_ser = await readUploadedFileAsText(document.getElementById("pk_ser"));
const circuit_params_ser = await readUploadedFileAsText(document.getElementById("circuit_params_ser_vk"));
const result_vk = await gen_vk_wasm(pk_ser, circuit_params_ser);
document.getElementById("genVkResult").innerText = result_vk ? 'Generation successful' : 'Generation failed';
// Creating a blob and a URL for it from the result
const blob = new Blob([result_vk.buffer], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
// Creating a hidden anchor element, adding it to the document,
// clicking it to download the file and then removing the element
const vk = document.createElement("a");
vk.href = url;
vk.download = 'vk.key';
vk.style.display = 'none';
document.body.appendChild(vk);
vk.click();
setTimeout(() => {
URL.revokeObjectURL(url);
document.body.removeChild(vk);
}, 0);
} catch (error) {
console.error("An error occurred generating verifying key:", error);
}
});
// Adding an event listener to the proveButton
document.getElementById("proveButton").addEventListener("click", async () => {
try {
// Reading the content of the input files
const data = await readUploadedFileAsText(document.getElementById("data_prove"));
const pk = await readUploadedFileAsText(document.getElementById("pk_prove"));
const circuit_ser = await readUploadedFileAsText(document.getElementById("circuit_ser_prove"));
const circuit_params_ser = await readUploadedFileAsText(document.getElementById("circuit_params_ser_prove"));
const params_ser = await readUploadedFileAsText(document.getElementById("params_ser_prove"));
// Using the WASM function to get a result
const result = await prove_wasm(data, pk, circuit_ser, circuit_params_ser, params_ser);
document.getElementById("proveResult").innerText = result ? 'Proof OK' : 'Proof failed';
// Creating a blob and a URL for it from the result
const blob = new Blob([result.buffer], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
// Creating a hidden anchor element, adding it to the document,
// clicking it to download the file and then removing the element
const a = document.createElement("a");
a.href = url;
a.download = 'network.proof';
a.style.display = 'none';
document.body.appendChild(a);
a.click();
setTimeout(() => {
URL.revokeObjectURL(url);
document.body.removeChild(a);
}, 0);
} catch (error) {
console.error("An error occurred during proving:", error);
}
});
// Adding an event listener to the verifyButton
document.getElementById("verifyButton").addEventListener("click", async () => {
try {
// Reading the content of the input files
const proof_js = await readUploadedFileAsText(document.getElementById("proof_js"));
const vk = await readUploadedFileAsText(document.getElementById("vk"));
const circuit_params_ser = await readUploadedFileAsText(document.getElementById("circuit_params_ser_verify"));
const params_ser = await readUploadedFileAsText(document.getElementById("params_ser_verify"));
// Using the WASM function to get a result
const result = await verify_wasm(proof_js, vk, circuit_params_ser, params_ser);
// Displaying the result
document.getElementById("verifyResult").innerText = result ? 'True' : 'False';
} catch (error) {
console.error("An error occurred during verification:", error);
}
});
} catch (error) {
console.error("An error occurred:", error);
}
}
// Running the main function
run();
</script>
<!--HTML forms for the proving and verifying functionality-->
<div>
<h1>Generate Circuit Params</h1>
<label for="circuit_ser_gen">Circuit (.onnx):</label>
<input id="circuit_ser_gen" type="file" placeholder="circuit_ser_gen" />
<label for="run_args_ser_gen">Run Args:</label>
<input id="run_args_ser_gen" type="file" placeholder="run_args_ser_gen" />
<button id="genCircuitParamsButton">Generate Circuit Params</button>
<h2>Result:</h2>
<div id="genCircuitParamsResult"></div>
<h1>Generate Proving Key</h1>
<label for="circuit_ser_pk">Circuit (.onnx):</label>
<input id="circuit_ser_pk" type="file" placeholder="circuit_ser_pk" />
<label for="params_ser_pk">KZG Params:</label>
<input id="params_ser_pk" type="file" placeholder="params_ser_pk" />
<label for="circuit_params_ser_pk">Circuit params:</label>
<input id="circuit_params_ser_pk" type="file" placeholder="circuit_params_ser_pk" />
<button id="genPkButton">Generate</button>
<h2>Result:</h2>
<div id="genPkResult"></div>
<h1>Generate Verifying Key</h1>
<label for="pk_ser">Proving Key:</label>
<input id="pk_ser" type="file" placeholder="pk_ser" />
<label for="circuit_params_ser_vk">Circuit params:</label>
<input id="circuit_params_ser_vk" type="file" placeholder="circuit_params_ser_vk" />
<button id="genVkButton">Generate Verifying Key</button>
<h2>Result:</h2>
<div id="genVkResult"></div>
<h1>Prove</h1>
<!--File inputs to upload the necessary files-->
<label for="data_prove">Input Data:</label>
<input id="data_prove" type="file" placeholder="data_prove" />
<label for="pk_prove">Proving key:</label>
<input id="pk_prove" type="file" placeholder="pk_prove" />
<label for="circuit_ser_prove">Circuit (.onnx):</label>
<input id="circuit_ser_prove" type="file" placeholder="circuit_ser" />
<label for="circuit_params_ser_prove">Circuit params:</label>
<input id="circuit_params_ser_prove" type="file" placeholder="circuit_params_ser_prove" />
<label for="params_ser_prove">KZG params:</label>
<input id="params_ser_prove" type="file" placeholder="params_ser_prove" />
<!--Button to start the proving process-->
<button id="proveButton">Prove</button>
<h2>Result:</h2>
<!--Placeholder for the proving result-->
<div id="proveResult"></div>
</div>
<div>
<h1>Verify</h1>
<!--File inputs to upload the necessary files-->
<label for="proof_js">Proof (network.proof):</label>
<input id="proof_js" type="file" placeholder="proof_js" />
<label for="vk">Verifying key:</label>
<input id="vk" type="file" placeholder="vk" />
<label for="circuit_params_ser_verify">Circuit params:</label>
<input id="circuit_params_ser_verify" type="file" placeholder="circuit_params_ser_verify" />
<label for="params_ser_verify">KZG params:</label>
<input id="params_ser_verify" type="file" placeholder="params_ser_verify" />
<!--Button to start the verification process-->
<button id="verifyButton">Verify</button>
<h2>Result:</h2>
<!--Placeholder for the verification result-->
<div id="verifyResult"></div>
</div>
</body>
</html>