Trying provers in webworkers efforts #1

Author: adamczykm

minauth-demo/minauth-demo-client/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

minauth-demo/minauth-demo-client/next.config.js

@@ -1,7 +1,18 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   // ... your other next.js configurations ...
-
+  async headers() {
+    return [
+      {
+        // Apply these headers to all routes in your application.
+        source: '/(.*)',
+        headers: [
+          { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' },
+          { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp' }
+        ]
+      }
+    ];
+  },
   compiler: {
     styledComponents: true
   }

minauth-demo/minauth-demo-client/package-lock.json

@@ -14,6 +14,9 @@
     "@rjsf/validator-ajv8": "^5.13.1",
     "@types/styled-components": "^5.1.28",
     "babel-plugin-styled-components": "^2.1.4",
+    "comlink": "^4.4.1",
+    "encoding": "^0.1.13",
+    "fp-ts": "^2.16.1",
     "minauth": "file:../../minauth/dist",
     "minauth-merkle-membership-plugin": "file:../../minauth-plugins/minauth-merkle-membership-plugin/dist",
     "minauth-simple-preimage-plugin": "file:../../minauth-plugins/minauth-simple-preimage-plugin/dist",

minauth-demo/minauth-demo-client/package.json

@@ -23,8 +23,8 @@ function LandingPage() {
         interact with different proving schemas.
       </p>
 
-      <Link href="/simplePreimage">Go to Schema 1</Link>
-      <Link href="/schema2">Go to Schema 2</Link>
+      <Link href="./provers/simplePreimage">Go to Schema 1</Link>
+      {/* <Link href="/schema2">Go to Schema 2</Link> */}
       {/* Add more links as necessary */}
     </div>
   );

minauth-demo/minauth-demo-client/src/app/page.tsx

@@ -0,0 +1,76 @@
+'use client';
+import { TypedWorker } from '@/app/typedworker';
+import WorkerComponent, { WorkerState } from '@/app/workercomponent';
+import {
+  ProverCompilationResult,
+  ProverZkCircuit,
+  mkProverCompilerWorker
+} from '@/workers/provercompilertypes';
+import { useState } from 'react';
+
+const mkWorker: () => TypedWorker<
+  ProverZkCircuit,
+  ProverCompilationResult
+> = () => {
+  return mkProverCompilerWorker();
+};
+
+const workerInput: ProverZkCircuit = { type: 'SimplePreimage' };
+
+const SimplePreimage: React.FC = () => {
+  const [proverCompilationState, setProverCompilationState] =
+    useState<WorkerState>({
+      status: 'idle'
+    });
+
+  function onProverCompilationStateChange(state: WorkerState): void {
+    setProverCompilationState(state);
+  }
+
+  function verificationKey(): string | undefined {
+    return proverCompilationState.result;
+  }
+
+  /* const schema: RJSFSchema = {
+   *   title: 'A simple form',
+   *   type: 'object',
+   *   required: ['firstName', 'lastName'],
+   *   properties: {
+   *     firstName: {
+   *       type: 'string',
+   *       title: 'First name'
+   *     },
+   *     lastName: {
+   *       type: 'string',
+   *       title: 'Last name'
+   *     }
+   *   }
+   * }; */
+
+  /* const uiSchema: UiSchema = {
+    *   firstName: {
+    *     'ui:autofocus': true
+    *   },
+    *   lastName: {
+    *     'ui:autofocus': true
+    *   }
+    * };
+
+    * const onSubmit = ({ formData }) => {
+    *   console.log('Data submitted:', formData);
+    * }; */
+
+  return (
+    <div>
+      <p>Hello World! </p>
+      <WorkerComponent
+        mkWorker={mkWorker}
+        workerInput={workerInput}
+        onWorkerStateChange={onProverCompilationStateChange}
+      />
+      <p>{verificationKey() ? <div> verificationKey() </div> : <></>} </p>
+    </div>
+  );
+};
+
+export default SimplePreimage;

minauth-demo/minauth-demo-client/src/app/provers/simplePreimage/page.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface WorkerStatus<R> {
+  status: 'success' | 'error' | 'processing';
+  result?: R;
+  error?: {
+    message: string;
+    error?: unknown;
+  };
+}
+
+export interface TypedWorker<Input, Output> {
+  worker: Worker;
+  setOnMessage: (
+    onmessage: (ev: MessageEvent<WorkerStatus<Output>>) => any
+  ) => void;
+  workerPostMessage: (
+    message: Input,
+    options?: StructuredSerializeOptions
+  ) => void;
+}
+
+export const mkTypedWorker = <Input, Output>(
+  url: URL
+): TypedWorker<Input, Output> => {
+  const worker = new Worker(url);
+
+  const setOnMessage = (
+    onmessage: (ev: MessageEvent<WorkerStatus<Output>>) => any
+  ) => {
+    worker.onmessage = onmessage;
+  };
+  console.log('typeof setOnMessage', typeof setOnMessage);
+
+  const workerPostMessage = (
+    message: Input,
+    options?: StructuredSerializeOptions
+  ): void => {
+    console.log('posting message to worker', message);
+    worker.postMessage(JSON.stringify(message), options);
+  };
+  return {
+    worker,
+    setOnMessage,
+    workerPostMessage
+  };
+};
+
+export const mkTypedWorker_workaround = <Input, Output>(
+  worker: Worker
+): TypedWorker<Input, Output> => {
+  const setOnMessage = (
+    onmessage: (ev: MessageEvent<WorkerStatus<Output>>) => any
+  ) => {
+    worker.onmessage = onmessage;
+  };
+  console.log('typeof setOnMessage', typeof setOnMessage);
+
+  const workerPostMessage = (
+    message: Input,
+    options?: StructuredSerializeOptions
+  ): void => {
+    console.log('posting message to worker', message);
+    worker.postMessage(JSON.stringify(message), options);
+  };
+  return {
+    worker,
+    setOnMessage,
+    workerPostMessage
+  };
+};

minauth-demo/minauth-demo-client/src/app/typedworker.ts

@@ -0,0 +1,75 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { TypedWorker, WorkerStatus } from './typedworker';
+
+export interface WorkerComponentProps<WorkerInput, WorkerOutput> {
+  mkWorker: () => TypedWorker<WorkerInput, WorkerOutput>;
+  workerInput: WorkerInput;
+  onWorkerStateChange?: (state: WorkerState) => void;
+}
+
+export interface WorkerState {
+  status: 'idle' | 'processing' | 'success' | 'error';
+  result?: string;
+  error?: string;
+}
+export const WorkerComponent = <WorkerInput, WorkerOutput>({
+  mkWorker,
+  workerInput,
+  onWorkerStateChange
+}: WorkerComponentProps<WorkerInput, WorkerOutput>) => {
+  const [workerState, setWorkerState] = useState<WorkerState>({
+    status: 'idle'
+  });
+  const workerInitialized = useRef(false);
+
+  useEffect(() => {
+    const { worker, setOnMessage, workerPostMessage } = mkWorker();
+    console.log('wtf', typeof workerPostMessage);
+
+    // Start the worker immediately with the provided proverType
+    if (!workerInitialized.current) {
+      // start the work
+      console.log('posting worker input', workerInput);
+      workerPostMessage(workerInput);
+      workerInitialized.current = true;
+    }
+
+    setOnMessage((event: MessageEvent<WorkerStatus<WorkerOutput>>) => {
+      console.log('Message received from worker', event.data);
+      const { status, result, error } = event.data;
+
+      if (status === 'success') {
+        setWorkerStateAndUpdateParent({
+          status,
+          result: JSON.stringify(result)
+        });
+      } else if (status === 'error') {
+        setWorkerStateAndUpdateParent({ status, error: error?.message });
+      } else if (status === 'processing') {
+        setWorkerStateAndUpdateParent({ status });
+      }
+    });
+
+    return () => {
+      worker.terminate();
+    };
+  }, []); // Dependency array includes proverType to re-run effect if it changes
+  // Function to update component state and notify parent
+  const setWorkerStateAndUpdateParent = (newState: WorkerState) => {
+    setWorkerState(newState);
+    onWorkerStateChange?.(newState);
+  };
+  const jebieto = JSON.stringify(workerState);
+
+  return (
+    <div>
+      {workerState.status === 'idle' && <p>Idle...</p>}
+      {workerState.status === 'processing' && <p>Processing...</p>}
+      {workerState.status === 'success' && <p>Result: {workerState.result}</p>}
+      {workerState.status === 'error' && <p>Error: {workerState.error}</p>}
+      <p>{jebieto}</p>
+    </div>
+  );
+};
+
+export default WorkerComponent;