From 4f513331559004d4a17929d386bf88de058e9285 Mon Sep 17 00:00:00 2001 From: Ethan Date: Fri, 3 Nov 2023 14:40:42 +0300 Subject: [PATCH] *added populate with sample files for each page. --- app/encryption/page.tsx | 83 +++++++++++++++++++++ app/gen-witness/page.tsx | 73 ++++++++++++++++++- app/hashing/page.tsx | 69 +++++++++++++++++- app/in-browser-evm-verify/page.tsx | 72 +++++++++++++++++- app/prove-verify/page.tsx | 105 +++++++++++++++++++++++++-- app/setup/page.tsx | 99 +++++++++++++++++++++++-- public/data/{elgamal_var => }/pk.txt | 0 public/data/{elgamal_var => }/r.txt | 0 public/data/{elgamal_var => }/sk.txt | 0 public/data/test.pf | 1 + 10 files changed, 484 insertions(+), 18 deletions(-) rename public/data/{elgamal_var => }/pk.txt (100%) rename public/data/{elgamal_var => }/r.txt (100%) rename public/data/{elgamal_var => }/sk.txt (100%) create mode 100644 public/data/test.pf diff --git a/app/encryption/page.tsx b/app/encryption/page.tsx index 947b79f..b832c39 100644 --- a/app/encryption/page.tsx +++ b/app/encryption/page.tsx @@ -249,6 +249,14 @@ export default function Encryption() { + )} @@ -264,6 +272,81 @@ function Spinner() { ) } +async function populateWithSampleFiles() { + // Helper to assert that the element is not null + function assertElement(element: T | null): asserts element is T { + if (element === null) { + throw new Error('Element not found'); + } + } + + // Names of the sample files in the public directory + const sampleFileNames: { [key: string]: string } = { + pk: 'pk.txt', + message: 'message.txt', + r: 'r.txt', + cipher: 'elgamal_cipher.txt', + sk: 'sk.txt' + + }; + + // Helper function to fetch and create a file object from a public URL + const fetchAndCreateFile = async (path: string, filename: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); + return new File([blob], filename, { type: blob.type }); + }; + + // Fetch each sample file and create a File object + const filePromises = Object.entries(sampleFileNames).map(([key, filename]) => + fetchAndCreateFile(`/data/${filename}`, filename) + ); + + // Wait for all files to be fetched and created + const files = await Promise.all(filePromises); + + // Select the file input elements and assign the FileList to each + const pk = document.querySelector('#elgamal_pk'); + const message = document.querySelector('#elgamal_message'); + const r = document.querySelector('#elgamal_r'); + const cipher = document.querySelector('#cipher'); + const sk = document.querySelector('#elgamal_sk'); + + // Assert that the elements are not null + assertElement(pk); + assertElement(message); + assertElement(r); + assertElement(cipher); + assertElement(sk); + + // Create a new DataTransfer to hold the files + let dataTransfers: DataTransfer[] = []; + files.forEach( + (file, idx) => { + const dataTransfer = new DataTransfer(); + dataTransfer.items.add(file) + dataTransfers[idx] = dataTransfer; + } + + ); + + + pk.files = dataTransfers[0].files; + message.files = dataTransfers[1].files; + r.files = dataTransfers[2].files; + cipher.files = dataTransfers[3].files; + sk.files = dataTransfers[4].files; + + // // If the 'vk' file is different, you'd handle it separately + // const vkFile = await fetchAndCreateFile(`/${sampleFileNames.vk}`, sampleFileNames.vk); + // const vkDataTransfer = new DataTransfer(); + // vkDataTransfer.items.add(vkFile); + + // Trigger any onChange or update logic if necessary + // This part depends on your application. For example, you might need to call a state setter function if you're using React state to track file input values. +} + + function ElgamalRandomVar({ utils }: { utils: Utils }) { return (
diff --git a/app/gen-witness/page.tsx b/app/gen-witness/page.tsx index f1c031a..540da8a 100644 --- a/app/gen-witness/page.tsx +++ b/app/gen-witness/page.tsx @@ -128,7 +128,17 @@ export default function GenWitness() { ) : loading ? ( ) : ( - +
+ + +
) }
@@ -143,6 +153,67 @@ function Spinner() { ) } +async function populateWithSampleFiles() { + // Helper to assert that the element is not null + function assertElement(element: T | null): asserts element is T { + if (element === null) { + throw new Error('Element not found'); + } + } + + // Names of the sample files in the public directory + const sampleFileNames: { [key: string]: string } = { + compiled_onnx: 'test_network.compiled', + input: 'input.json' + }; + + // Helper function to fetch and create a file object from a public URL + const fetchAndCreateFile = async (path: string, filename: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); + return new File([blob], filename, { type: blob.type }); + }; + + // Fetch each sample file and create a File object + const filePromises = Object.entries(sampleFileNames).map(([key, filename]) => + fetchAndCreateFile(`/data/${filename}`, filename) + ); + + // Wait for all files to be fetched and created + const files = await Promise.all(filePromises); + + // Select the file input elements and assign the FileList to each + const compiledOnnxInput = document.querySelector('#compiled_onnx'); + const input = document.querySelector('#input'); + + // Assert that the elements are not null + assertElement(compiledOnnxInput); + assertElement(input); + + // Create a new DataTransfer to hold the files + let dataTransfers: DataTransfer[] = []; + files.forEach( + (file, idx) => { + const dataTransfer = new DataTransfer(); + dataTransfer.items.add(file) + dataTransfers[idx] = dataTransfer; + } + + ); + + + compiledOnnxInput.files = dataTransfers[0].files; + input.files = dataTransfers[1].files; + + // // If the 'vk' file is different, you'd handle it separately + // const vkFile = await fetchAndCreateFile(`/${sampleFileNames.vk}`, sampleFileNames.vk); + // const vkDataTransfer = new DataTransfer(); + // vkDataTransfer.items.add(vkFile); + + // Trigger any onChange or update logic if necessary + // This part depends on your application. For example, you might need to call a state setter function if you're using React state to track file input values. +} + function WitnessArtifactForm({ handleSubmit, alert, diff --git a/app/hashing/page.tsx b/app/hashing/page.tsx index 0f9de6a..3361450 100644 --- a/app/hashing/page.tsx +++ b/app/hashing/page.tsx @@ -120,7 +120,17 @@ export default function Hashing() { ) : loading ? ( ) : ( - +
+ + +
)} ); @@ -134,6 +144,63 @@ function Spinner() { ) } +async function populateWithSampleFiles() { + // Helper to assert that the element is not null + function assertElement(element: T | null): asserts element is T { + if (element === null) { + throw new Error('Element not found'); + } + } + + // Names of the sample files in the public directory + const sampleFileNames: { [key: string]: string } = { + message: 'message.txt' + }; + + // Helper function to fetch and create a file object from a public URL + const fetchAndCreateFile = async (path: string, filename: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); + return new File([blob], filename, { type: blob.type }); + }; + + // Fetch each sample file and create a File object + const filePromises = Object.entries(sampleFileNames).map(([key, filename]) => + fetchAndCreateFile(`/data/${filename}`, filename) + ); + + // Wait for all files to be fetched and created + const files = await Promise.all(filePromises); + + // Select the file input elements and assign the FileList to each + const message = document.querySelector('#message'); + + // Assert that the elements are not null + assertElement(message); + + // Create a new DataTransfer to hold the files + let dataTransfers: DataTransfer[] = []; + files.forEach( + (file, idx) => { + const dataTransfer = new DataTransfer(); + dataTransfer.items.add(file) + dataTransfers[idx] = dataTransfer; + } + + ); + + + message.files = dataTransfers[0].files; + + // // If the 'vk' file is different, you'd handle it separately + // const vkFile = await fetchAndCreateFile(`/${sampleFileNames.vk}`, sampleFileNames.vk); + // const vkDataTransfer = new DataTransfer(); + // vkDataTransfer.items.add(vkFile); + + // Trigger any onChange or update logic if necessary + // This part depends on your application. For example, you might need to call a state setter function if you're using React state to track file input values. +} + function HashingArtifactForm({ handleSubmit, alert, diff --git a/app/in-browser-evm-verify/page.tsx b/app/in-browser-evm-verify/page.tsx index 0cfebd8..a777a47 100644 --- a/app/in-browser-evm-verify/page.tsx +++ b/app/in-browser-evm-verify/page.tsx @@ -10,7 +10,6 @@ import { } from 'flowbite-react' import React, { useState } from 'react' import { formDataSchemaEvmVerify } from './parsers' -import { stringify } from "json-bigint"; import { useSharedResources } from '../EngineContext'; enum Hardfork { @@ -119,8 +118,16 @@ export default function InBrowserEvmVerify() { ) : loading ? ( ) : ( -
+
+
)} @@ -136,6 +143,67 @@ function Spinner() { ) } +async function populateWithSampleFiles() { + // Helper to assert that the element is not null + function assertElement(element: T | null): asserts element is T { + if (element === null) { + throw new Error('Element not found'); + } + } + + // Names of the sample files in the public directory + const sampleFileNames: { [key: string]: string } = { + proof: 'evm_verify.pf', + bytecode: 'bytecode.code' + }; + + // Helper function to fetch and create a file object from a public URL + const fetchAndCreateFile = async (path: string, filename: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); + return new File([blob], filename, { type: blob.type }); + }; + + // Fetch each sample file and create a File object + const filePromises = Object.entries(sampleFileNames).map(([key, filename]) => + fetchAndCreateFile(`/data/${filename}`, filename) + ); + + // Wait for all files to be fetched and created + const files = await Promise.all(filePromises); + + // Select the file input elements and assign the FileList to each + const proof = document.querySelector('#proof'); + const bytecode = document.querySelector('#bytecode_verifier'); + + // Assert that the elements are not null + assertElement(proof); + assertElement(bytecode); + + // Create a new DataTransfer to hold the files + let dataTransfers: DataTransfer[] = []; + files.forEach( + (file, idx) => { + const dataTransfer = new DataTransfer(); + dataTransfer.items.add(file) + dataTransfers[idx] = dataTransfer; + } + + ); + + + proof.files = dataTransfers[0].files; + bytecode.files = dataTransfers[1].files; + + // // If the 'vk' file is different, you'd handle it separately + // const vkFile = await fetchAndCreateFile(`/${sampleFileNames.vk}`, sampleFileNames.vk); + // const vkDataTransfer = new DataTransfer(); + // vkDataTransfer.items.add(vkFile); + + // Trigger any onChange or update logic if necessary + // This part depends on your application. For example, you might need to call a state setter function if you're using React state to track file input values. +} + function VerifyingArtifactForm({ handleSubmit, alert, diff --git a/app/prove-verify/page.tsx b/app/prove-verify/page.tsx index dddf8bc..bf069ed 100644 --- a/app/prove-verify/page.tsx +++ b/app/prove-verify/page.tsx @@ -220,11 +220,20 @@ export default function ProveVerify() { ) : loading ? ( ) : ( -
- - +
+
+ + +
+
- )}
); @@ -238,6 +247,90 @@ function Spinner() { ) } +async function populateWithSampleFiles() { + // Helper to assert that the element is not null + function assertElement(element: T | null): asserts element is T { + if (element === null) { + throw new Error('Element not found'); + } + } + + // Names of the sample files in the public directory + const sampleFileNames: { [key: string]: string } = { + witness: 'test.witness.json', + pk: 'test.provekey', + compiled_onnx: 'test_network.compiled', + srs: 'kzg', + proof: 'test.pf', + settings: 'settings.json', + vk: 'test.key' + }; + + // Helper function to fetch and create a file object from a public URL + const fetchAndCreateFile = async (path: string, filename: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); + return new File([blob], filename, { type: blob.type }); + }; + + // Fetch each sample file and create a File object + const filePromises = Object.entries(sampleFileNames).map(([key, filename]) => + fetchAndCreateFile(`/data/${filename}`, filename) + ); + + // Wait for all files to be fetched and created + const files = await Promise.all(filePromises); + + // Select the file input elements and assign the FileList to each + const witness = document.querySelector('#witness'); + const pk = document.querySelector('#pk'); + const compiled_onnx = document.querySelector('#compiled_onnx'); + const srsProve = document.querySelector('#srs_prove'); + const proof = document.querySelector('#proof'); + const settings = document.querySelector('#settings'); + const vk = document.querySelector('#vk'); + const srsVerify = document.querySelector('#srs_verify'); + + // Assert that the elements are not null + assertElement(witness); + assertElement(pk); + assertElement(compiled_onnx); + assertElement(srsProve); + assertElement(proof); + assertElement(settings); + assertElement(vk); + assertElement(srsVerify); + + // Create a new DataTransfer to hold the files + let dataTransfers: DataTransfer[] = []; + files.forEach( + (file, idx) => { + const dataTransfer = new DataTransfer(); + dataTransfer.items.add(file) + dataTransfers[idx] = dataTransfer; + } + + ); + + + witness.files = dataTransfers[0].files; + pk.files = dataTransfers[1].files; + compiled_onnx.files = dataTransfers[2].files; + srsProve.files = dataTransfers[3].files; + proof.files = dataTransfers[4].files; + settings.files = dataTransfers[5].files; + vk.files = dataTransfers[6].files; + srsVerify.files = dataTransfers[3].files; + + // // If the 'vk' file is different, you'd handle it separately + // const vkFile = await fetchAndCreateFile(`/${sampleFileNames.vk}`, sampleFileNames.vk); + // const vkDataTransfer = new DataTransfer(); + // vkDataTransfer.items.add(vkFile); + + // Trigger any onChange or update logic if necessary + // This part depends on your application. For example, you might need to call a state setter function if you're using React state to track file input values. +} + function ProvingArtifactForm({ handleSubmit, alert, @@ -295,7 +388,7 @@ function ProvingArtifactForm({
); @@ -207,6 +218,78 @@ function Spinner() { ) } +async function populateWithSampleFiles() { + // Helper to assert that the element is not null + function assertElement(element: T | null): asserts element is T { + if (element === null) { + throw new Error('Element not found'); + } + } + + // Names of the sample files in the public directory + const sampleFileNames: { [key: string]: string } = { + compiled_onnx: 'test_network.compiled', + srs: 'kzg', + vk: 'test.key', + }; + + // Helper function to fetch and create a file object from a public URL + const fetchAndCreateFile = async (path: string, filename: string): Promise => { + const response = await fetch(path); + const blob = await response.blob(); + return new File([blob], filename, { type: blob.type }); + }; + + // Fetch each sample file and create a File object + const filePromises = Object.entries(sampleFileNames).map(([key, filename]) => + fetchAndCreateFile(`/data/${filename}`, filename) + ); + + // Wait for all files to be fetched and created + const files = await Promise.all(filePromises); + + // Select the file input elements and assign the FileList to each + const compiledOnnxInputVk = document.querySelector('#compiled_onnx_vk'); + const srsInputVk = document.querySelector('#srs_vk'); + const compiledOnnxInputPk = document.querySelector('#compiled_onnx_pk'); + const srsInputPk = document.querySelector('#srs_pk'); + const vkInput = document.querySelector('#vk'); + + // Assert that the elements are not null + assertElement(compiledOnnxInputVk); + assertElement(srsInputVk); + assertElement(compiledOnnxInputPk); + assertElement(srsInputPk); + assertElement(vkInput); + + // Create a new DataTransfer to hold the files + let dataTransfers: DataTransfer[] = []; + files.forEach( + (file, idx) => { + const dataTransfer = new DataTransfer(); + dataTransfer.items.add(file) + dataTransfers[idx] = dataTransfer; + } + + ); + + + compiledOnnxInputVk.files = dataTransfers[0].files; + srsInputVk.files = dataTransfers[1].files; + compiledOnnxInputPk.files = dataTransfers[0].files; + srsInputPk.files = dataTransfers[1].files; + vkInput.files = dataTransfers[2].files; + + // // If the 'vk' file is different, you'd handle it separately + // const vkFile = await fetchAndCreateFile(`/${sampleFileNames.vk}`, sampleFileNames.vk); + // const vkDataTransfer = new DataTransfer(); + // vkDataTransfer.items.add(vkFile); + + // Trigger any onChange or update logic if necessary + // This part depends on your application. For example, you might need to call a state setter function if you're using React state to track file input values. +} + + function GenVkArtifactForm({ handleSubmit, alert, @@ -237,7 +320,7 @@ function GenVkArtifactForm({