example usage demo

2024-08-30 12:25:04 +03:00 · 2024-08-30 12:25:04 +03:00 · fa44bfe2eb
commit fa44bfe2eb
parent 7caf011bf8
3 changed files with 102 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>ZKL Crypto Provider Demo</title>
+    </head>
+    <body>
+        <h1>ZKL Crypto Provider Demo</h1>
+        <p>Upload a file to be encrypted. The ciphertext will be presented as a bitmap here.</p>
+        <input type="file" id="fileInput">
+        <canvas id="bitmapCanvas"></canvas>
+        <hr>
+        <p>Yigid BALABAN, <a href="https://fybx.dev/">https://fybx.dev/</a></p>
+        <script src="dist/bundle.js"></script>
+    </body>
+</html>
--- a/index.js
+++ b/index.js
@ -0,0 +1,74 @@
+import { generateKeypair } from "./zkl-kds/key-derivation.js";
+import {
+  encryptFile,
+  decryptFile,
+  encryptString,
+  decryptString,
+} from "./crypto.js";
+
+let keypair;
+
+document
+  .getElementById("fileInput")
+  .addEventListener("change", function (event) {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+
+      reader.onload = function (e) {
+        const arrayBuffer = e.target.result;
+        const byteArray = new Uint8Array(arrayBuffer);
+        if (!keypair) {
+          console.error("keypair not ready, skipping file enc/dec");
+          return;
+        }
+
+        const cipherFile = encryptFile(keypair.pkey, byteArray);
+        console.log(cipherFile);
+
+        {
+          const numPixels = cipherFile.length / 4;
+          const width = Math.floor(Math.sqrt(numPixels));
+          const height = Math.ceil(numPixels / width);
+
+          const canvas = document.getElementById("bitmapCanvas");
+          const context = canvas.getContext("2d");
+
+          canvas.width = width;
+          canvas.height = height;
+
+          const imageData = context.createImageData(width, height);
+
+          for (let i = 0; i < cipherFile.length; i++) {
+            imageData.data[i] = cipherFile[i];
+          }
+
+          context.putImageData(imageData, 0, 0);
+        }
+
+        const plainFile = decryptFile(keypair.skey, cipherFile);
+        console.log(plainFile);
+      };
+
+      reader.readAsArrayBuffer(file);
+    } else {
+      console.warn("No file selected");
+    }
+  });
+
+// we wait for a second before executing this block
+// because WASM module takes time to load
+setTimeout(async () => {
+  console.log("start");
+  const mnemonic =
+    "digital radio analyst fine casino have mass blood potato hat web capital prefer debate fee differ spray cloud";
+
+  // for this time, skey means private key, and pkey is public
+  const { publicKey: pkey, privateKey: skey } = await generateKeypair(mnemonic);
+  keypair = { pkey, skey };
+
+  const cipherText = encryptString(pkey, "message");
+  console.log("encrypted string is", cipherText);
+  console.log("decrypted string is", decryptString(skey, cipherText));
+  console.log("end");
+}, 1000);
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,13 @@
+const path = require("path");
+
+module.exports = {
+  entry: "./index.js",
+  output: {
+    filename: "bundle.js",
+    path: path.resolve(__dirname, "dist"),
+  },
+  experiments: {
+    asyncWebAssembly: true,
+  },
+  mode: "development",
+};