Merge pull request #19 from zkonduit/populate-artifacts

feat: populate with sample files

app/encryption/page.tsx

@@ -249,6 +249,14 @@ export default function Encryption() {
                         <EncryptionArtifactForm handleSubmit={handleSubmitEncryption} alert={alertEncrypt} warning={warningEncrypt} />
                         <DecryptionArtifactForm handleSubmit={handleSubmitDecrypt} alert={alertDecrypt} warning={warningDecrypt} />
                     </div>
+                    <Button
+                        type='submit'
+                        color='dark'
+                        className='self-center mt-4 w-full'
+                        onClick={() => populateWithSampleFiles()}
+                    >
+                        Populate with sample files
+                    </Button>
                 </div>
 
             )}
@@ -264,6 +272,81 @@ function Spinner() {
     )
 }
 
+async function populateWithSampleFiles() {
+    // Helper to assert that the element is not null
+    function assertElement<T extends Element>(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<File> => {
+        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<HTMLInputElement>('#elgamal_pk');
+    const message = document.querySelector<HTMLInputElement>('#elgamal_message');
+    const r = document.querySelector<HTMLInputElement>('#elgamal_r');
+    const cipher = document.querySelector<HTMLInputElement>('#cipher');
+    const sk = document.querySelector<HTMLInputElement>('#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 (
         <div className='flex flex-col justify-center items-center h-4/6 pb-0'>

app/gen-witness/page.tsx

@@ -128,7 +128,17 @@ export default function GenWitness() {
             ) : loading ? (
                 <Spinner />
             ) : (
-                <WitnessArtifactForm handleSubmit={handleSubmit} alert={alert} warning={warning} />
+                <div className='flex flex-col justify-between w-full items-center space-y-4'>
+                    <WitnessArtifactForm handleSubmit={handleSubmit} alert={alert} warning={warning} />
+                    <Button
+                        type='submit'
+                        color='dark'
+                        className='self-center mt-4 w-full'
+                        onClick={() => populateWithSampleFiles()}
+                    >
+                        Populate with sample files
+                    </Button>
+                </div>
             )
             }
         </div >
@@ -143,6 +153,67 @@ function Spinner() {
     )
 }
 
+async function populateWithSampleFiles() {
+    // Helper to assert that the element is not null
+    function assertElement<T extends Element>(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<File> => {
+        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<HTMLInputElement>('#compiled_onnx');
+    const input = document.querySelector<HTMLInputElement>('#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,

app/hashing/page.tsx

@@ -120,7 +120,17 @@ export default function Hashing() {
       ) : loading ? (
         <Spinner />
       ) : (
-        <HashingArtifactForm handleSubmit={handleSubmitHashing} alert={alert} warning={warning} />
+        <div className='flex flex-col justify-between w-full items-center space-y-4'>
+          <HashingArtifactForm handleSubmit={handleSubmitHashing} alert={alert} warning={warning} />
+          <Button
+            type='submit'
+            color='dark'
+            className='self-center mt-4 w-full'
+            onClick={() => populateWithSampleFiles()}
+          >
+            Populate with sample file
+          </Button>
+        </div>
       )}
     </div>
   );
@@ -134,6 +144,63 @@ function Spinner() {
   )
 }
 
+async function populateWithSampleFiles() {
+  // Helper to assert that the element is not null
+  function assertElement<T extends Element>(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<File> => {
+    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<HTMLInputElement>('#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,

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 ? (
                 <Spinner />
             ) : (
-                <div className='flex justify-between w-full items-stretch space-x-8'>
+                <div className='flex flex-col justify-between w-full items-center space-y-4'>
                     <VerifyingArtifactForm handleSubmit={handleSubmitVerify} alert={alertVerify} warning={warningVerify} />
+                    <Button
+                        type='submit'
+                        color='dark'
+                        className='self-center mt-4 w-full'
+                        onClick={() => populateWithSampleFiles()}
+                    >
+                        Populate with sample files
+                    </Button>
                 </div>
 
             )}
@@ -136,6 +143,67 @@ function Spinner() {
     )
 }
 
+async function populateWithSampleFiles() {
+    // Helper to assert that the element is not null
+    function assertElement<T extends Element>(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<File> => {
+        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<HTMLInputElement>('#proof');
+    const bytecode = document.querySelector<HTMLInputElement>('#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,