first commit

concrete-ml-extensions-wasm/concrete_ml_extensions_wasm.d.ts

@@ -0,0 +1,50 @@
+/* tslint:disable */
+/* eslint-disable */
+export function start(): void;
+export function keygen_radix_u64_wasm(): any;
+export function encrypt_serialize_u64_radix_flat_wasm(value_flat_js: BigUint64Array, client_key_ser_js: Uint8Array): Uint8Array;
+export function decrypt_serialized_u64_radix_flat_wasm(encrypted_data_js: Uint8Array, client_key_ser_js: Uint8Array): BigUint64Array;
+export class JsSeeder {
+  private constructor();
+  free(): void;
+}
+
+export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
+
+export interface InitOutput {
+  readonly memory: WebAssembly.Memory;
+  readonly __wbg_jsseeder_free: (a: number, b: number) => void;
+  readonly start: () => void;
+  readonly keygen_radix_u64_wasm: () => [number, number, number];
+  readonly encrypt_serialize_u64_radix_flat_wasm: (a: any, b: any) => [number, number, number];
+  readonly decrypt_serialized_u64_radix_flat_wasm: (a: any, b: any) => [number, number, number];
+  readonly __wbindgen_exn_store: (a: number) => void;
+  readonly __externref_table_alloc: () => number;
+  readonly __wbindgen_export_2: WebAssembly.Table;
+  readonly __wbindgen_free: (a: number, b: number, c: number) => void;
+  readonly __wbindgen_malloc: (a: number, b: number) => number;
+  readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+  readonly __externref_table_dealloc: (a: number) => void;
+  readonly __wbindgen_start: () => void;
+}
+
+export type SyncInitInput = BufferSource | WebAssembly.Module;
+/**
+* Instantiates the given `module`, which can either be bytes or
+* a precompiled `WebAssembly.Module`.
+*
+* @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
+*
+* @returns {InitOutput}
+*/
+export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
+
+/**
+* If `module_or_path` is {RequestInfo} or {URL}, makes a request and
+* for everything else, calls `WebAssembly.instantiate` directly.
+*
+* @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
+*
+* @returns {Promise<InitOutput>}
+*/
+export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;

concrete-ml-extensions-wasm/concrete_ml_extensions_wasm.js

@@ -0,0 +1,453 @@
+let wasm;
+
+function addToExternrefTable0(obj) {
+    const idx = wasm.__externref_table_alloc();
+    wasm.__wbindgen_export_2.set(idx, obj);
+    return idx;
+}
+
+function handleError(f, args) {
+    try {
+        return f.apply(this, args);
+    } catch (e) {
+        const idx = addToExternrefTable0(e);
+        wasm.__wbindgen_exn_store(idx);
+    }
+}
+
+const cachedTextDecoder = (typeof TextDecoder !== 'undefined' ? new TextDecoder('utf-8', { ignoreBOM: true, fatal: true }) : { decode: () => { throw Error('TextDecoder not available') } } );
+
+if (typeof TextDecoder !== 'undefined') { cachedTextDecoder.decode(); };
+
+let cachedUint8ArrayMemory0 = null;
+
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+function getStringFromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+
+let WASM_VECTOR_LEN = 0;
+
+const cachedTextEncoder = (typeof TextEncoder !== 'undefined' ? new TextEncoder('utf-8') : { encode: () => { throw Error('TextEncoder not available') } } );
+
+const encodeString = (typeof cachedTextEncoder.encodeInto === 'function'
+    ? function (arg, view) {
+    return cachedTextEncoder.encodeInto(arg, view);
+}
+    : function (arg, view) {
+    const buf = cachedTextEncoder.encode(arg);
+    view.set(buf);
+    return {
+        read: arg.length,
+        written: buf.length
+    };
+});
+
+function passStringToWasm0(arg, malloc, realloc) {
+
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length, 1) >>> 0;
+        getUint8ArrayMemory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len, 1) >>> 0;
+
+    const mem = getUint8ArrayMemory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+        const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+        const ret = encodeString(arg, view);
+
+        offset += ret.written;
+        ptr = realloc(ptr, len, offset, 1) >>> 0;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+
+let cachedDataViewMemory0 = null;
+
+function getDataViewMemory0() {
+    if (cachedDataViewMemory0 === null || cachedDataViewMemory0.buffer.detached === true || (cachedDataViewMemory0.buffer.detached === undefined && cachedDataViewMemory0.buffer !== wasm.memory.buffer)) {
+        cachedDataViewMemory0 = new DataView(wasm.memory.buffer);
+    }
+    return cachedDataViewMemory0;
+}
+
+function isLikeNone(x) {
+    return x === undefined || x === null;
+}
+
+export function start() {
+    wasm.start();
+}
+
+function takeFromExternrefTable0(idx) {
+    const value = wasm.__wbindgen_export_2.get(idx);
+    wasm.__externref_table_dealloc(idx);
+    return value;
+}
+/**
+ * @returns {any}
+ */
+export function keygen_radix_u64_wasm() {
+    const ret = wasm.keygen_radix_u64_wasm();
+    if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+    }
+    return takeFromExternrefTable0(ret[0]);
+}
+
+/**
+ * @param {BigUint64Array} value_flat_js
+ * @param {Uint8Array} client_key_ser_js
+ * @returns {Uint8Array}
+ */
+export function encrypt_serialize_u64_radix_flat_wasm(value_flat_js, client_key_ser_js) {
+    const ret = wasm.encrypt_serialize_u64_radix_flat_wasm(value_flat_js, client_key_ser_js);
+    if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+    }
+    return takeFromExternrefTable0(ret[0]);
+}
+
+/**
+ * @param {Uint8Array} encrypted_data_js
+ * @param {Uint8Array} client_key_ser_js
+ * @returns {BigUint64Array}
+ */
+export function decrypt_serialized_u64_radix_flat_wasm(encrypted_data_js, client_key_ser_js) {
+    const ret = wasm.decrypt_serialized_u64_radix_flat_wasm(encrypted_data_js, client_key_ser_js);
+    if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+    }
+    return takeFromExternrefTable0(ret[0]);
+}
+
+const JsSeederFinalization = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(ptr => wasm.__wbg_jsseeder_free(ptr >>> 0, 1));
+
+export class JsSeeder {
+
+    __destroy_into_raw() {
+        const ptr = this.__wbg_ptr;
+        this.__wbg_ptr = 0;
+        JsSeederFinalization.unregister(this);
+        return ptr;
+    }
+
+    free() {
+        const ptr = this.__destroy_into_raw();
+        wasm.__wbg_jsseeder_free(ptr, 0);
+    }
+}
+
+async function __wbg_load(module, imports) {
+    if (typeof Response === 'function' && module instanceof Response) {
+        if (typeof WebAssembly.instantiateStreaming === 'function') {
+            try {
+                return await WebAssembly.instantiateStreaming(module, imports);
+
+            } catch (e) {
+                if (module.headers.get('Content-Type') != 'application/wasm') {
+                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+
+                } else {
+                    throw e;
+                }
+            }
+        }
+
+        const bytes = await module.arrayBuffer();
+        return await WebAssembly.instantiate(bytes, imports);
+
+    } else {
+        const instance = await WebAssembly.instantiate(module, imports);
+
+        if (instance instanceof WebAssembly.Instance) {
+            return { instance, module };
+
+        } else {
+            return instance;
+        }
+    }
+}
+
+function __wbg_get_imports() {
+    const imports = {};
+    imports.wbg = {};
+    imports.wbg.__wbg_buffer_609cc3eee51ed158 = function(arg0) {
+        const ret = arg0.buffer;
+        return ret;
+    };
+    imports.wbg.__wbg_call_672a4d21634d4a24 = function() { return handleError(function (arg0, arg1) {
+        const ret = arg0.call(arg1);
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_call_7cccdd69e0791ae2 = function() { return handleError(function (arg0, arg1, arg2) {
+        const ret = arg0.call(arg1, arg2);
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_crypto_ed58b8e10a292839 = function(arg0) {
+        const ret = arg0.crypto;
+        return ret;
+    };
+    imports.wbg.__wbg_error_7534b8e9a36f1ab4 = function(arg0, arg1) {
+        let deferred0_0;
+        let deferred0_1;
+        try {
+            deferred0_0 = arg0;
+            deferred0_1 = arg1;
+            console.error(getStringFromWasm0(arg0, arg1));
+        } finally {
+            wasm.__wbindgen_free(deferred0_0, deferred0_1, 1);
+        }
+    };
+    imports.wbg.__wbg_getRandomValues_bcb4912f16000dc4 = function() { return handleError(function (arg0, arg1) {
+        arg0.getRandomValues(arg1);
+    }, arguments) };
+    imports.wbg.__wbg_getTime_46267b1c24877e30 = function(arg0) {
+        const ret = arg0.getTime();
+        return ret;
+    };
+    imports.wbg.__wbg_length_65df9cd7c58180b2 = function(arg0) {
+        const ret = arg0.length;
+        return ret;
+    };
+    imports.wbg.__wbg_length_a446193dc22c12f8 = function(arg0) {
+        const ret = arg0.length;
+        return ret;
+    };
+    imports.wbg.__wbg_msCrypto_0a36e2ec3a343d26 = function(arg0) {
+        const ret = arg0.msCrypto;
+        return ret;
+    };
+    imports.wbg.__wbg_new0_f788a2397c7ca929 = function() {
+        const ret = new Date();
+        return ret;
+    };
+    imports.wbg.__wbg_new_405e22f390576ce2 = function() {
+        const ret = new Object();
+        return ret;
+    };
+    imports.wbg.__wbg_new_8a6f238a6ece86ea = function() {
+        const ret = new Error();
+        return ret;
+    };
+    imports.wbg.__wbg_new_a12002a7f91c75be = function(arg0) {
+        const ret = new Uint8Array(arg0);
+        return ret;
+    };
+    imports.wbg.__wbg_new_e5efeb1e59f0eb60 = function(arg0) {
+        const ret = new BigUint64Array(arg0);
+        return ret;
+    };
+    imports.wbg.__wbg_newnoargs_105ed471475aaf50 = function(arg0, arg1) {
+        const ret = new Function(getStringFromWasm0(arg0, arg1));
+        return ret;
+    };
+    imports.wbg.__wbg_newwithbyteoffsetandlength_095d65baacc373dd = function(arg0, arg1, arg2) {
+        const ret = new BigUint64Array(arg0, arg1 >>> 0, arg2 >>> 0);
+        return ret;
+    };
+    imports.wbg.__wbg_newwithbyteoffsetandlength_d97e637ebe145a9a = function(arg0, arg1, arg2) {
+        const ret = new Uint8Array(arg0, arg1 >>> 0, arg2 >>> 0);
+        return ret;
+    };
+    imports.wbg.__wbg_newwithlength_a381634e90c276d4 = function(arg0) {
+        const ret = new Uint8Array(arg0 >>> 0);
+        return ret;
+    };
+    imports.wbg.__wbg_node_02999533c4ea02e3 = function(arg0) {
+        const ret = arg0.node;
+        return ret;
+    };
+    imports.wbg.__wbg_process_5c1d670bc53614b8 = function(arg0) {
+        const ret = arg0.process;
+        return ret;
+    };
+    imports.wbg.__wbg_randomFillSync_ab2cfe79ebbf2740 = function() { return handleError(function (arg0, arg1) {
+        arg0.randomFillSync(arg1);
+    }, arguments) };
+    imports.wbg.__wbg_require_79b1e9274cde3c87 = function() { return handleError(function () {
+        const ret = module.require;
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_set_5882e5672c74f0b1 = function(arg0, arg1, arg2) {
+        arg0.set(arg1, arg2 >>> 0);
+    };
+    imports.wbg.__wbg_set_65595bdd868b3009 = function(arg0, arg1, arg2) {
+        arg0.set(arg1, arg2 >>> 0);
+    };
+    imports.wbg.__wbg_set_bb8cecf6a62b9f46 = function() { return handleError(function (arg0, arg1, arg2) {
+        const ret = Reflect.set(arg0, arg1, arg2);
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_stack_0ed75d68575b0f3c = function(arg0, arg1) {
+        const ret = arg1.stack;
+        const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len1 = WASM_VECTOR_LEN;
+        getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+        getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    };
+    imports.wbg.__wbg_static_accessor_GLOBAL_88a902d13a557d07 = function() {
+        const ret = typeof global === 'undefined' ? null : global;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_static_accessor_GLOBAL_THIS_56578be7e9f832b0 = function() {
+        const ret = typeof globalThis === 'undefined' ? null : globalThis;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_static_accessor_SELF_37c5d418e4bf5819 = function() {
+        const ret = typeof self === 'undefined' ? null : self;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_static_accessor_WINDOW_5de37043a91a9c40 = function() {
+        const ret = typeof window === 'undefined' ? null : window;
+        return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+    };
+    imports.wbg.__wbg_subarray_aa9065fa9dc5df96 = function(arg0, arg1, arg2) {
+        const ret = arg0.subarray(arg1 >>> 0, arg2 >>> 0);
+        return ret;
+    };
+    imports.wbg.__wbg_versions_c71aa1626a93e0a1 = function(arg0) {
+        const ret = arg0.versions;
+        return ret;
+    };
+    imports.wbg.__wbindgen_init_externref_table = function() {
+        const table = wasm.__wbindgen_export_2;
+        const offset = table.grow(4);
+        table.set(0, undefined);
+        table.set(offset + 0, undefined);
+        table.set(offset + 1, null);
+        table.set(offset + 2, true);
+        table.set(offset + 3, false);
+        ;
+    };
+    imports.wbg.__wbindgen_is_function = function(arg0) {
+        const ret = typeof(arg0) === 'function';
+        return ret;
+    };
+    imports.wbg.__wbindgen_is_object = function(arg0) {
+        const val = arg0;
+        const ret = typeof(val) === 'object' && val !== null;
+        return ret;
+    };
+    imports.wbg.__wbindgen_is_string = function(arg0) {
+        const ret = typeof(arg0) === 'string';
+        return ret;
+    };
+    imports.wbg.__wbindgen_is_undefined = function(arg0) {
+        const ret = arg0 === undefined;
+        return ret;
+    };
+    imports.wbg.__wbindgen_memory = function() {
+        const ret = wasm.memory;
+        return ret;
+    };
+    imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
+        const ret = getStringFromWasm0(arg0, arg1);
+        return ret;
+    };
+    imports.wbg.__wbindgen_throw = function(arg0, arg1) {
+        throw new Error(getStringFromWasm0(arg0, arg1));
+    };
+
+    return imports;
+}
+
+function __wbg_init_memory(imports, memory) {
+
+}
+
+function __wbg_finalize_init(instance, module) {
+    wasm = instance.exports;
+    __wbg_init.__wbindgen_wasm_module = module;
+    cachedDataViewMemory0 = null;
+    cachedUint8ArrayMemory0 = null;
+
+
+    wasm.__wbindgen_start();
+    return wasm;
+}
+
+function initSync(module) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (typeof module !== 'undefined') {
+        if (Object.getPrototypeOf(module) === Object.prototype) {
+            ({module} = module)
+        } else {
+            console.warn('using deprecated parameters for `initSync()`; pass a single object instead')
+        }
+    }
+
+    const imports = __wbg_get_imports();
+
+    __wbg_init_memory(imports);
+
+    if (!(module instanceof WebAssembly.Module)) {
+        module = new WebAssembly.Module(module);
+    }
+
+    const instance = new WebAssembly.Instance(module, imports);
+
+    return __wbg_finalize_init(instance, module);
+}
+
+async function __wbg_init(module_or_path) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (typeof module_or_path !== 'undefined') {
+        if (Object.getPrototypeOf(module_or_path) === Object.prototype) {
+            ({module_or_path} = module_or_path)
+        } else {
+            console.warn('using deprecated parameters for the initialization function; pass a single object instead')
+        }
+    }
+
+    if (typeof module_or_path === 'undefined') {
+        module_or_path = new URL('concrete_ml_extensions_wasm_bg.wasm', import.meta.url);
+    }
+    const imports = __wbg_get_imports();
+
+    if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {
+        module_or_path = fetch(module_or_path);
+    }
+
+    __wbg_init_memory(imports);
+
+    const { instance, module } = await __wbg_load(await module_or_path, imports);
+
+    return __wbg_finalize_init(instance, module);
+}
+
+export { initSync };
+export default __wbg_init;

concrete-ml-extensions-wasm/concrete_ml_extensions_wasm_bg.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:72865b90bc2f6d5d84aa51046f5ba3d948aad234fa2b949bd4d993904b93b5e1
+size 873767

concrete-ml-extensions-wasm/concrete_ml_extensions_wasm_bg.wasm.d.ts

@@ -0,0 +1,16 @@
+/* tslint:disable */
+/* eslint-disable */
+export const memory: WebAssembly.Memory;
+export const __wbg_jsseeder_free: (a: number, b: number) => void;
+export const start: () => void;
+export const keygen_radix_u64_wasm: () => [number, number, number];
+export const encrypt_serialize_u64_radix_flat_wasm: (a: any, b: any) => [number, number, number];
+export const decrypt_serialized_u64_radix_flat_wasm: (a: any, b: any) => [number, number, number];
+export const __wbindgen_exn_store: (a: number) => void;
+export const __externref_table_alloc: () => number;
+export const __wbindgen_export_2: WebAssembly.Table;
+export const __wbindgen_free: (a: number, b: number, c: number) => void;
+export const __wbindgen_malloc: (a: number, b: number) => number;
+export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+export const __externref_table_dealloc: (a: number) => void;
+export const __wbindgen_start: () => void;

concrete-ml-extensions-wasm/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "concrete-ml-extensions",
+  "type": "module",
+  "description": "Private matrix multiplication library using fully homomorphic encryption",
+  "version": "0.1.9",
+  "license": "BSD-3-Clause-Clear",
+  "files": [
+    "concrete_ml_extensions_wasm_bg.wasm",
+    "concrete_ml_extensions_wasm.js",
+    "concrete_ml_extensions_wasm.d.ts"
+  ],
+  "main": "concrete_ml_extensions_wasm.js",
+  "homepage": "https://zama.ai",
+  "types": "concrete_ml_extensions_wasm.d.ts",
+  "sideEffects": [
+    "./snippets/*"
+  ]
+}

encrypt-worker.js

@@ -0,0 +1,42 @@
+import initWasm, { encrypt_serialize_u64_radix_flat_wasm } from './concrete-ml-extensions-wasm/concrete_ml_extensions_wasm.js';
+
+let clientKey;
+let wasmInitialized = false;
+
+self.onmessage = async function(e) {
+    if (e.data.type === 'init') {
+        try {
+            await initWasm();
+            wasmInitialized = true;
+            clientKey = e.data.clientKey;
+            console.log(`[Encrypt] Client key loaded: ${clientKey.length} bytes`);
+            self.postMessage({ type: 'ready' });
+        } catch (error) {
+            console.error('[Encrypt] WASM initialization failed:', error.message);
+            self.postMessage({ type: 'error', error: `WASM initialization failed: ${error.message}` });
+        }
+    } else if (e.data.type === 'encrypt') {
+        if (!wasmInitialized) {
+            console.error('[Encrypt] Attempted encryption before WASM initialization');
+            self.postMessage({ type: 'error', error: 'WASM not initialized' });
+            return;
+        }
+        try {
+            const tokenIds = e.data.tokenIds;
+            console.log(`[Encrypt] Starting encryption for ${tokenIds.length} token IDs`);
+            
+            // Convert token IDs to BigUint64Array for FHE encryption
+            const bigArr = new BigUint64Array(tokenIds.map(id => BigInt(id)));
+            console.log(`[Encrypt] Token array size: ${bigArr.length} tokens`);
+            
+            console.log('[Encrypt] Performing encryption...');
+            const result = encrypt_serialize_u64_radix_flat_wasm(bigArr, clientKey);
+            console.log(`[Encrypt] Encryption completed: ${result.length} bytes`);
+            
+            self.postMessage({ type: 'success', result });
+        } catch (error) {
+            console.error('[Encrypt] Encryption failed:', error.message);
+            self.postMessage({ type: 'error', error: error.message });
+        }
+    }
+}; 

index.html

@@ -1,19 +1,439 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>FHE SynthID Detector</title>
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
+    
+    :root {
+      --yellow: #ffd200;
+      --black: #000;
+      --white: #fff;
+      --grey-050: #f9f9f9;
+      --grey-200: #e0e0e0;
+      --container-max: 1200px;
+      --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
+      --spacing-unit: 8px;
+    }
+
+    /* reset */
+    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
+    body { 
+      font-family: 'Space Grotesk', sans-serif; 
+      background: var(--yellow); 
+      color: var(--black); 
+      line-height: 1.5;
+      font-weight: 400;
+    }
+
+    /* navbar */
+    .navbar { 
+      display: flex; 
+      justify-content: space-between; 
+      align-items: center; 
+      padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4); 
+      max-width: var(--container-max); 
+      margin-inline: auto; 
+    }
+    .logo { 
+      font-size: 2rem; 
+      font-weight: 700;
+      letter-spacing: -0.02em; 
+    }
+    .contact-btn { 
+      border: 2px solid var(--black); 
+      background: transparent; 
+      color: var(--black); 
+      padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3); 
+      border-radius: 8px; 
+      font-size: 1rem; 
+      font-weight: 600;
+      font-family: 'Space Grotesk', sans-serif;
+      cursor: pointer; 
+      transition: all .2s ease; 
+    }
+    .contact-btn:hover { 
+      background: var(--black); 
+      color: var(--yellow); 
+      transform: translateY(-1px);
+    }
+
+    /* hero */
+    .hero {
+      display: grid;
+      gap: calc(var(--spacing-unit) * 6);
+      align-items: center;
+      max-width: var(--container-max);
+      margin: calc(var(--spacing-unit) * 4) auto calc(var(--spacing-unit) * 10);
+      padding-inline: calc(var(--spacing-unit) * 4);
+      grid-template-columns: 1fr 1fr;
+    }
+    .hero h1 { 
+      font-size: clamp(2.5rem, 5vw, 4rem); 
+      font-weight: 700; 
+      margin-bottom: calc(var(--spacing-unit) * 3); 
+      letter-spacing: -0.03em;
+      line-height: 1.1;
+    }
+    .hero p { 
+      font-size: 1.25rem; 
+      max-width: 45ch;
+      font-weight: 400;
+      line-height: 1.5;
+    }
+
+    .hero-diagram { 
+      background: var(--white); 
+      border: 2px solid var(--black); 
+      border-radius: 16px; 
+      padding: calc(var(--spacing-unit) * 4); 
+      box-shadow: 8px 8px 0 var(--black);
+      width: 100%; 
+      min-height: 400px;
+      display: flex; 
+      align-items: center; 
+      justify-content: center; 
+    }
+    .hero-diagram .mermaid { 
+      max-width: 100%; 
+      font-family: 'Space Grotesk', sans-serif;
+    }
+
+    /* wizard */
+    main { 
+      max-width: var(--container-max); 
+      margin: 0 auto calc(var(--spacing-unit) * 12); 
+      padding: 0 calc(var(--spacing-unit) * 4); 
+    }
+    
+    .section-title {
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin-bottom: calc(var(--spacing-unit) * 6);
+      text-align: center;
+      letter-spacing: -0.02em;
+    }
+    
+    .cards-wrapper { 
+      display: grid; 
+      gap: calc(var(--spacing-unit) * 3); 
+      grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); 
+    }
+
+    .card { 
+      background: var(--white); 
+      border: 2px solid var(--black); 
+      border-radius: 16px; 
+      box-shadow: 6px 6px 0 var(--black);
+      padding: calc(var(--spacing-unit) * 4); 
+      min-height: 280px;
+      display: flex;
+      flex-direction: column;
+      transition: transform 0.2s ease;
+    }
+    
+    .card:hover {
+      transform: translate(-2px, -2px);
+      box-shadow: 8px 8px 0 var(--black);
+    }
+    
+    .card h2 { 
+      margin-bottom: calc(var(--spacing-unit) * 3); 
+      font-size: 1.5rem; 
+      font-weight: 700;
+      letter-spacing: -0.01em;
+      height: 30px;
+    }
+
+    .card-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--spacing-unit) * 2);
+    }
+
+    .controls {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing-unit) * 1.5);
+      min-height: 40px;
+    }
+
+    textarea { 
+      width: 100%; 
+      padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2); 
+      border: 2px solid var(--black); 
+      border-radius: 8px; 
+      font-family: 'Space Grotesk', sans-serif; 
+      font-size: 1rem; 
+      resize: vertical; 
+      background: var(--white);
+      min-height: 60px;
+      transition: all 0.2s ease;
+      font-weight: 500;
+    }
+
+    textarea:focus {
+      outline: none;
+      transform: translate(-2px, -2px);
+      box-shadow: 4px 4px 0 var(--black);
+    }
+
+    .btn {
+      border: 2px solid var(--black);
+      background: var(--yellow);
+      color: var(--black);
+      font-weight: 600;
+      padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
+      min-width: 160px;
+      font-size: 1rem;
+      font-family: 'Space Grotesk', sans-serif;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all .2s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--spacing-unit) * 1);
+      white-space: nowrap;
+      letter-spacing: -0.01em;
+    }
+    .btn:hover:not(:disabled) { 
+      background: var(--black); 
+      color: var(--yellow); 
+      transform: translateY(-2px);
+    }
+    .btn:disabled { 
+      opacity: .5; 
+      cursor: not-allowed; 
+    }
+
+    .status { 
+      font-size: 1rem; 
+      color: var(--black);
+      flex: 1;
+      font-weight: 500;
+    }
+    
+    .loader { 
+      width: 20px; 
+      height: 20px; 
+      border: 3px solid transparent; 
+      border-top: 3px solid var(--black); 
+      border-right: 3px solid var(--black); 
+      border-radius: 50%; 
+      animation: spin 1s linear infinite; 
+      flex-shrink: 0;
+    }
+    @keyframes spin { to { transform: rotate(360deg);} }
+
+    #encIcon {
+      font-size: 1.25rem;
+      flex-shrink: 0;
+    }
+
+    footer { 
+      font-size: 1rem; 
+      text-align: center; 
+      padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 2); 
+      color: var(--black);
+      font-weight: 500;
+    }
+
+    .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
+
+    /* Result styling */
+    #decResult {
+      font-family: 'Space Grotesk', sans-serif;
+      padding: calc(var(--spacing-unit) * 2);
+      background: var(--grey-050);
+      border: 2px solid var(--black);
+      border-radius: 8px;
+      min-height: 48px;
+      display: flex;
+      align-items: center;
+      font-weight: 600;
+      font-size: 1.1rem;
+    }
+
+    #decResult:not(:empty) {
+      color: var(--black);
+    }
+
+    /* Responsive adjustments */
+    @media (max-width: 968px) {
+      .hero {
+        grid-template-columns: 1fr;
+        gap: calc(var(--spacing-unit) * 4);
+      }
+      
+      .hero-diagram {
+        min-height: 300px;
+      }
+    }
+    
+    @media (max-width: 768px) {
+      .cards-wrapper {
+        gap: calc(var(--spacing-unit) * 2);
+      }
+      
+      .card {
+        padding: calc(var(--spacing-unit) * 3);
+        box-shadow: 4px 4px 0 var(--black);
+      }
+      
+      .btn {
+        min-width: 140px;
+        padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2.5);
+      }
+      
+      .hero h1 {
+        font-size: 2.5rem;
+      }
+      
+      .section-title {
+        font-size: 2rem;
+      }
+    }
+  </style>
+
+  <!-- external scripts -->
+  <script type="module" src="https://belladoreai.github.io/llama3-tokenizer-js/bundle/llama3-tokenizer-with-baked-data.js"></script>
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.9.0/+esm';
+    mermaid.initialize({ 
+      startOnLoad: true, 
+      theme: 'base', 
+      themeVariables: { 
+        primaryColor: '#ffd200', 
+        primaryTextColor: '#000', 
+        lineColor: '#000', 
+        tertiaryColor: '#fff',
+        fontFamily: 'Space Grotesk'
+      } 
+    });
+  </script>
+</head>
+<body>
+  <!-- Navbar -->
+  <nav class="navbar">
+    <div class="logo">ZAMA</div>
+    <button class="contact-btn">Contact us</button>
+  </nav>
+
+  <!-- Hero -->
+  <header class="hero" role="banner">
+    <div class="hero-copy">
+      <h1>FHE SynthID Detector</h1>
+      <p>Private, end-to-end detection using fully homomorphic encryption.</p>
+    </div>
+
+    <div class="hero-diagram">
+      <pre class="mermaid">
+sequenceDiagram
+    participant User🧑‍💻
+    participant Browser🔐
+    participant RustServer🦀
+
+    User🧑‍💻->>Browser🔐: 1️⃣ Generate keys
+    Browser🔐->>Browser🔐: TFHE keygen (WASM)
+    Browser🔐->>RustServer🦀: 2️⃣ /handshake (server_key_b64)
+    RustServer🦀->>Browser🔐: UID (uuid-v4)
+
+    User🧑‍💻->>Browser🔐: 3️⃣ Enter text
+    Browser🔐->>Browser🔐: Tokenise ◁ HF tokenizer
+    Browser🔐->>Browser🔐: Encrypt tokens (WASM)
+    Browser🔐->>RustServer🦀: 4️⃣ /detect (uid, ciphertext_b64)
+    RustServer🦀->>RustServer🦀: FHE SynthID detect
+    RustServer🦀->>Browser🔐: Encrypted result_b64
+    Browser🔐->>Browser🔐: Decrypt result (WASM)
+    Browser🔐-->>User🧑‍💻: flag / score / g
+      </pre>
+    </div>
+  </header>
+
+  <!-- Wizard Steps -->
+  <main>
+    <h2 class="section-title">How it works</h2>
+    <div class="cards-wrapper">
+      <!-- 1 Keys -->
+      <section class="card" aria-labelledby="step1">
+        <h2 id="step1">1. Keys</h2>
+        <div class="card-content">
+          <div class="controls" style="margin-top: 0;">
+            <p id="keygenStatus" class="status" aria-live="polite">Ready to generate keys</p>
+            <span id="keygenSpin" class="loader" hidden aria-label="Generating keys"></span>
+          </div>
+          <div style="margin-top: auto;">
+            <button id="btnKeygen" class="btn" aria-describedby="keygenStatus">🔑 Generate keys</button>
+          </div>
+        </div>
+      </section>
+
+      <!-- 2 Encrypt -->
+      <section class="card" aria-labelledby="step2">
+        <h2 id="step2">2. Encrypt text</h2>
+        <div class="card-content">
+          <div class="controls">
+            <p id="tokenizerStatus" class="status" aria-live="polite" style="display: none;">Loading tokenizer...</p>
+            <span id="tokenizerSpin" class="loader" hidden aria-label="Loading tokenizer"></span>
+          </div>
+          <label for="tokenInput" class="visually-hidden">Text to encrypt</label>
+          <textarea id="tokenInput" rows="2" placeholder="Enter text to encrypt" autocomplete="off"></textarea>
+          <div class="controls" style="margin-top: auto;">
+            <button id="btnEncrypt" class="btn" disabled>🛡️ Encrypt</button>
+            <span id="encryptSpin" class="loader" hidden aria-label="Encrypting"></span>
+            <span id="encIcon" hidden aria-label="Encrypted">🔒</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- 3 Send -->
+      <section class="card" aria-labelledby="step3">
+        <h2 id="step3">3. Send to server</h2>
+        <div class="card-content">
+          <div>
+            <p id="srvStatus" class="status" aria-live="polite">Waiting for encrypted data...</p>
+            <p id="srvComputing" class="status" aria-live="polite" hidden>Server computing...</p>
+          </div>
+          <div class="controls" style="margin-top: auto;">
+            <button id="btnSend" class="btn" disabled>📡 Send</button>
+            <span id="spin" class="loader" hidden aria-label="Working"></span>
+          </div>
+        </div>
+      </section>
+
+      <!-- 4 Result -->
+      <section class="card" aria-labelledby="step4">
+        <h2 id="step4">4. Result</h2>
+        <div class="card-content">
+          <label for="encResult" class="visually-hidden">Encrypted result bytes</label>
+          <textarea id="encResult" rows="1" readonly placeholder="Encrypted result will appear here"></textarea>
+          <p id="decResult" aria-live="polite" style="flex: 1;"></p>
+          <div class="controls" style="margin-top: auto;">
+            <button id="btnDecrypt" class="btn" disabled>🔓 Decrypt</button>
+          </div>
+        </div>
+      </section>
+    </div>
+  </main>
+
+  <footer>© 2025 Zama — Demo only, not for production use.</footer>
+
+  <script type="module" src="wasm-demo.js"></script>
+  <script>
+    // Since the tokenizer loads automatically and there's no explicit loading status in the JS,
+    // we'll hide the tokenizer status message on page load
+    window.addEventListener('DOMContentLoaded', () => {
+      const tokenizerStatus = document.getElementById('tokenizerStatus');
+      if (tokenizerStatus) {
+        tokenizerStatus.style.display = 'none';
+      }
+    });
+  </script>
+</body>
+</html>

keygen-worker.js

@@ -0,0 +1,18 @@
+import initWasm, { keygen_radix_u64_wasm } from './concrete-ml-extensions-wasm/concrete_ml_extensions_wasm.js';
+
+self.onmessage = async function(e) {
+    try {
+        await initWasm();
+        
+        console.log('[Keygen] Starting key generation...');
+        const result = await keygen_radix_u64_wasm();
+        console.log('[Keygen] Key generation completed successfully');
+        console.log(`[Keygen] Generated client key size: ${result.clientKey.length} bytes`);
+        console.log(`[Keygen] Generated server key size: ${result.serverKey.length} bytes`);
+        
+        self.postMessage({ type: 'success', result });
+    } catch (error) {
+        console.error('[Keygen] Key generation failed:', error.message);
+        self.postMessage({ type: 'error', error: error.message });
+    }
+}; 

wasm-demo.js

@@ -0,0 +1,227 @@
+import initWasm, {
+    decrypt_serialized_u64_radix_flat_wasm
+} from './concrete-ml-extensions-wasm/concrete_ml_extensions_wasm.js';
+
+const SERVER = 'https://backend-server.com';
+
+let clientKey, serverKey;
+let encTokens;
+let encServerResult;
+let keygenWorker;
+let encryptWorker;
+let sessionUid;
+
+// Memory-efficient base64 encoding for large Uint8Array
+function uint8ToBase64(uint8) {
+    return new Promise((resolve, reject) => {
+        const blob = new Blob([uint8]);
+        const reader = new FileReader();
+        reader.onload = function () {
+            const base64 = reader.result.split(',')[1];
+            resolve(base64);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+    });
+}
+
+const $ = id => document.getElementById(id);
+const enable = (id, ok=true) => $(id).disabled = !ok;
+const show = (id, visible=true) => $(id).hidden = !visible;
+
+// Hide all spinners immediately
+show('keygenSpin', false);
+show('spin', false);
+show('encIcon', false);
+show('tokenizerSpin', false);
+
+// Initialize WASM
+(async () => {
+    try {
+        console.log('[Main] Initializing WASM module...');
+        await initWasm();
+        console.log('[Main] WASM module initialized successfully');
+
+        // Initialize the keygen worker
+        keygenWorker = new Worker(new URL('./keygen-worker.js', import.meta.url), { type: 'module' });
+        keygenWorker.onmessage = async function(e) {
+            if (e.data.type === 'success') {
+                const res = e.data.result;
+                console.log('[Main] Key generation successful');
+                console.log(`[Main] Client key size: ${res.clientKey.length} bytes`);
+                console.log(`[Main] Server key size: ${res.serverKey.length} bytes`);
+                clientKey = res.clientKey; serverKey = res.serverKey;
+                $('keygenStatus').textContent = 'keys generated ✓';
+                enable('btnEncrypt');
+                
+                // Initialize encryption worker
+                encryptWorker = new Worker(new URL('./encrypt-worker.js', import.meta.url), { type: 'module' });
+                encryptWorker.onmessage = function(e) {
+                    if (e.data.type === 'ready') {
+                        console.log('[Main] Encryption worker ready');
+                    } else if (e.data.type === 'success') {
+                        encTokens = e.data.result;
+                        console.log(`[Main] Encryption completed: ${encTokens.length} bytes`);
+                        show('encryptSpin', false);
+                        show('encIcon', true);
+                        enable('btnEncrypt', true);
+                        enable('btnSend');
+                    } else if (e.data.type === 'error') {
+                        console.error('[Main] Encryption error:', e.data.error);
+                        show('encryptSpin', false);
+                        enable('btnEncrypt', true);
+                        alert(`Encryption failed: ${e.data.error}`);
+                    }
+                };
+                
+                // Initialize the worker with the client key
+                encryptWorker.postMessage({ type: 'init', clientKey });
+                
+                console.log('[Main] Encoding server key to base64...');
+                const serverKeyB64 = await uint8ToBase64(serverKey);
+                console.log(`[Main] Server key base64 size: ${serverKeyB64.length} bytes`);
+                const handshakeResponse = await fetch(`${SERVER}/handshake`, {
+                    method:'POST', 
+                    headers:{'Content-Type':'application/json'},
+                    body: JSON.stringify({
+                        server_key_b64: serverKeyB64
+                    })
+                });
+                
+                if (!handshakeResponse.ok) {
+                    const errorText = await handshakeResponse.text();
+                    throw new Error(`Server handshake failed: ${handshakeResponse.status} ${errorText}`);
+                }
+                
+                const { uid } = await handshakeResponse.json();
+                sessionUid = uid;
+                console.log('[Main] Server handshake successful');
+            } else {
+                console.error('[Main] Key generation error:', e.data.error);
+                $('keygenStatus').textContent = `Error generating keys: ${e.data.error}`;
+            }
+            show('keygenSpin', false);
+        };
+    } catch (e) {
+        console.error('[Main] Failed to initialize WASM module:', e);
+        $('keygenStatus').textContent = `Initialization Error: ${e.message}`;
+        throw e;
+    }
+})();
+
+$('btnKeygen').onclick = async () => {
+    if ($('keygenSpin').hidden === false) {
+        console.log('[Main] Keygen already in progress, ignoring click');
+        return;
+    }
+    show('keygenSpin', true);
+    $('keygenStatus').textContent = 'generating…';
+    try {
+        keygenWorker.postMessage({});
+    } catch (e) {
+        console.error('[Main] Key generation error:', e);
+        $('keygenStatus').textContent = `Error generating keys: ${e.message}`;
+        show('keygenSpin', false);
+    }
+};
+
+$('btnEncrypt').onclick = async () => {
+    const text = $('tokenInput').value.trim();
+    if (!text) {
+        console.error('[Main] No text provided for tokenization/encryption');
+        alert('Please enter text to encrypt.');
+        return;
+    }
+    if (!encryptWorker) {
+        console.error('[Main] Encryption worker not initialized');
+        alert('Encryption worker is not ready. Please generate keys first.');
+        return;
+    }
+
+    show('encryptSpin', true);
+    show('encIcon', false);
+    enable('btnEncrypt', false);
+
+    try {
+        console.log('[Main] Tokenizing text:', text);
+        const tokenIds = llama3Tokenizer.encode(text);
+        console.log('[Main] Token IDs:', tokenIds);
+
+        encryptWorker.postMessage({ type: 'encrypt', tokenIds });
+    } catch (error) {
+        console.error('[Main] Tokenization or encryption initiation error:', error);
+        show('encryptSpin', false);
+        enable('btnEncrypt', true);
+        alert(`Error during tokenization/encryption: ${error.message}`);
+    }
+};
+
+$('btnSend').onclick = async () => {
+    if ($('spin').hidden === false) {
+        console.log('[Main] Send already in progress, ignoring click');
+        return;
+    }
+    show('encIcon', false);
+    show('spin', true);
+    $('srvStatus').textContent = 'Preparing request…';
+    $('srvComputing').hidden = true;
+    const startTime = performance.now();
+    try {
+        const ciphertext_b64 = await uint8ToBase64(encTokens);
+
+        $('srvStatus').textContent = 'Sending…';
+        console.log('[Main] Sending request to server...');
+        const response = await fetch(`${SERVER}/detect`, {
+            method:'POST', 
+            headers:{'Content-Type':'application/json'},
+            body: JSON.stringify({
+                uid: sessionUid,
+                ciphertext_b64
+            })
+        });
+        
+        console.log(`[Main] Server response status: ${response.status}`);
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`Server error: ${response.status} ${errorText}`);
+        }
+
+        $('srvStatus').textContent = '✓ sent';
+        $('srvComputing').hidden = false;
+        
+        const {result_b64} = await response.json();
+        const endTime = performance.now();
+        const duration = ((endTime - startTime) / 1000).toFixed(2);
+        console.log(`[Main] Server request completed in ${duration}s`);
+        console.log('[Main] Processing server response...');
+        encServerResult = Uint8Array.from(atob(result_b64), c=>c.charCodeAt(0));
+        console.log(`[Main] Received encrypted result: ${encServerResult.length} bytes`);
+        $('encResult').value = `(${encServerResult.length} B)`;
+        $('srvComputing').hidden = true;
+        $('srvStatus').textContent = `✓ received (${duration}s)`;
+        enable('btnDecrypt');
+    } catch (e) {
+        const endTime = performance.now();
+        const duration = ((endTime - startTime) / 1000).toFixed(2);
+        console.error(`[Main] Server request failed after ${duration}s:`, e);
+        $('srvComputing').hidden = true;
+        $('srvStatus').textContent = `Server error: ${e.message} (${duration}s)`;
+    } finally {
+        show('spin', false);
+    }
+};
+
+$('btnDecrypt').onclick = () => {
+    try {
+        console.log('[Main] Starting decryption...');
+        const dec = decrypt_serialized_u64_radix_flat_wasm(encServerResult, clientKey);
+        const [flag, score_scaled, total_g] = Array.from(dec);
+        const score = (Number(score_scaled) / 1e6).toFixed(6);
+        console.log('[Main] Decryption successful');
+        console.log(`[Main] Result - flag: ${flag}, score: ${score}, total_g: ${total_g}`);
+        $('decResult').textContent = `flag=${flag}, score=${score}, total_g=${total_g}`;
+    } catch (e) {
+        console.error('[Main] Decryption error:', e);
+        $('decResult').textContent = `Error decrypting result: ${e.message}`;
+    }
+};