add debug info to webapp output

Signed-off-by: Pau Escrich <p4u@dabax.net>

Author: p4u

Cargo.toml

@@ -44,6 +44,7 @@ getrandom = "0.2"
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 wasm-bindgen = "0.2"
+js-sys = "0.3"
 getrandom = { version = "0.2", features = ["js"] }
 console_error_panic_hook = "0.1"
 

src/wasm.rs

@@ -13,6 +13,7 @@
 
 use ecgfp5::curve::Point;
 use ecgfp5::scalar::Scalar;
+use js_sys::Date;
 use p3_field::{PrimeCharacteristicRing, PrimeField64};
 use p3_goldilocks::Goldilocks;
 use wasm_bindgen::prelude::*;
@@ -44,6 +45,43 @@ pub fn generate_keypair(sk_bytes: &[u8]) -> Vec<u8> {
     out
 }
 
+#[wasm_bindgen]
+pub struct ProveFullResult {
+    proof_data: Vec<u8>,
+    decode_ms: f64,
+    trace_ms: f64,
+    prove_ms: f64,
+    serialize_ms: f64,
+}
+
+#[wasm_bindgen]
+impl ProveFullResult {
+    #[wasm_bindgen(getter, js_name = proofData)]
+    pub fn proof_data(&self) -> Vec<u8> {
+        self.proof_data.clone()
+    }
+
+    #[wasm_bindgen(getter, js_name = decodeMs)]
+    pub fn decode_ms(&self) -> f64 {
+        self.decode_ms
+    }
+
+    #[wasm_bindgen(getter, js_name = traceMs)]
+    pub fn trace_ms(&self) -> f64 {
+        self.trace_ms
+    }
+
+    #[wasm_bindgen(getter, js_name = proveMs)]
+    pub fn prove_ms(&self) -> f64 {
+        self.prove_ms
+    }
+
+    #[wasm_bindgen(getter, js_name = serializeMs)]
+    pub fn serialize_ms(&self) -> f64 {
+        self.serialize_ms
+    }
+}
+
 /// Generate a full 8-field ballot proof (the main entry point for voting).
 ///
 /// All byte arrays use u64 little-endian encoding. Returns the serialized
@@ -67,6 +105,29 @@ pub fn prove_full(
     weight: &[u8],
     ballot_mode: &[u8],
 ) -> Result<Vec<u8>, JsValue> {
+    Ok(prove_full_detailed(
+        k_bytes,
+        fields,
+        pk_bytes,
+        process_id,
+        address,
+        weight,
+        ballot_mode,
+    )?
+    .proof_data)
+}
+
+#[wasm_bindgen]
+pub fn prove_full_detailed(
+    k_bytes: &[u8],
+    fields: &[u8],
+    pk_bytes: &[u8],
+    process_id: &[u8],
+    address: &[u8],
+    weight: &[u8],
+    ballot_mode: &[u8],
+) -> Result<ProveFullResult, JsValue> {
+    let decode_start = now_ms();
     let k = Scalar::decode_reduce(k_bytes);
     let pk = decode_pk(pk_bytes).map_err(|e| JsValue::from_str(&e))?;
 
@@ -120,10 +181,24 @@ pub fn prove_full(
         weight: Goldilocks::from_u64(w % Goldilocks::ORDER_U64),
         packed_ballot_mode: bm,
     };
+    let decode_ms = now_ms() - decode_start;
+
+    let trace_start = now_ms();
+    let (trace, public_values, _outputs) = crate::trace::generate_full_ballot_trace(&inputs);
+    let trace_ms = now_ms() - trace_start;
 
-    let (ballot_proof, _outputs) = crate::prove_full_ballot(&inputs);
+    let prove_start = now_ms();
+    let config = crate::config::make_prover_config();
+    let air = crate::air::BallotAir::new();
+    let proof = p3_uni_stark::prove(&config, &air, trace, &public_values);
+    let prove_ms = now_ms() - prove_start;
 
+    let ballot_proof = crate::BallotProof {
+        proof,
+        public_values,
+    };
     // Serialize proof + public values
+    let serialize_start = now_ms();
     let proof_bytes = postcard::to_allocvec(&ballot_proof.proof)
         .map_err(|e| JsValue::from_str(&format!("Serialization error: {}", e)))?;
 
@@ -139,7 +214,18 @@ pub fn prove_full(
     out.extend_from_slice(&proof_len.to_le_bytes());
     out.extend_from_slice(&proof_bytes);
     out.extend_from_slice(&pv_bytes);
-    Ok(out)
+    let serialize_ms = now_ms() - serialize_start;
+    Ok(ProveFullResult {
+        proof_data: out,
+        decode_ms,
+        trace_ms,
+        prove_ms,
+        serialize_ms,
+    })
+}
+
+fn now_ms() -> f64 {
+    Date::now()
 }
 
 /// Verify a ballot proof from its wire-format byte representation.

webapp/src/main.js

@@ -5,6 +5,7 @@
 // the call() helper which returns a promise resolved when the worker replies.
 
 import { normalizeChoices, packBallotMode } from './ballot_config.js';
+import { bytesToHex, formatProofPreview, summarizeTimings } from './proof_ui.js';
 
 const logEl = document.getElementById('log');
 const metricKeygenEl = document.getElementById('metric-keygen');
@@ -71,11 +72,6 @@ function hexToBytes(hex) {
   return bytes;
 }
 
-// Convert Uint8Array to lowercase hex string.
-function bytesToHex(bytes) {
-  return Array.from(bytes).map(b => b.toString(16).padStart(2, '0')).join('');
-}
-
 // Encode a JS number as 8 bytes in little-endian u64 format.
 function u64ToLeBytes(val) {
   const buf = new ArrayBuffer(8);
@@ -142,6 +138,7 @@ window.doProve = async function() {
     setMetric(metricKeygenEl, `${keygenMs.toFixed(1)} ms`);
 
     // Build binary inputs
+    const packStart = performance.now();
     const kBytes = hexToBytes(kHex);
     const fields = new Uint8Array(8 * 8);
     for (let i = 0; i < 8; i++) {
@@ -158,6 +155,7 @@ window.doProve = async function() {
 
     const weightBytes = u64ToLeBytes(weight);
     const ballotMode = packBallotMode(config);
+    const inputPackMs = performance.now() - packStart;
 
     log('\n--- Full Ballot Proof ---', 'info');
     log(`Choices: [${choices.slice(0, config.numFields).join(', ')}]`);
@@ -172,17 +170,35 @@ window.doProve = async function() {
     });
     proofData = result.proofData;
     const elapsed = performance.now() - start;
+    const renderStart = performance.now();
+    const timings = summarizeTimings({
+      inputPackMs,
+      workerWallMs: result.timings?.workerWallMs ?? elapsed,
+      wasmDecodeMs: result.timings?.wasmDecodeMs ?? 0,
+      wasmTraceMs: result.timings?.wasmTraceMs ?? 0,
+      wasmProveMs: result.timings?.wasmProveMs ?? 0,
+      wasmSerializeMs: result.timings?.wasmSerializeMs ?? 0,
+      mainRenderMs: 0,
+    });
 
     log(`✅ Proof generated!`, 'success');
     log(`Proof size: ${proofData.length} bytes (${(proofData.length / 1024).toFixed(1)} KB)`);
     log(`⏱ ${(elapsed / 1000).toFixed(1)}s`, 'timing');
+    log(
+      `Timing breakdown: pack=${timings.inputPackMs}ms worker=${timings.workerWallMs}ms ` +
+      `decode=${timings.wasmDecodeMs}ms trace=${timings.wasmTraceMs}ms ` +
+      `prove=${timings.wasmProveMs}ms serialize=${timings.wasmSerializeMs}ms`,
+      'timing',
+    );
     setMetric(metricProveEl, `${(elapsed / 1000).toFixed(2)} s`);
     metricNoteEl.textContent =
       `FRI config: blowup 8, 34 queries, 0 PoW bits. Last proof size: ${(proofData.length / 1024).toFixed(1)} KB.`;
 
     // Show proof data
     document.getElementById('proof-card').style.display = 'block';
-    document.getElementById('proof-data').textContent = bytesToHex(proofData);
+    document.getElementById('proof-data').textContent = formatProofPreview(proofData);
+    timings.mainRenderMs = (performance.now() - renderStart).toFixed(2);
+    log(`Render=${timings.mainRenderMs}ms`, 'timing');
 
     document.getElementById('btn-prove').disabled = false;
     document.getElementById('btn-verify').disabled = false;

webapp/src/proof_ui.js

@@ -0,0 +1,25 @@
+export function bytesToHex(bytes) {
+  return Array.from(bytes).map((b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+export function formatProofPreview(bytes, prefixBytes = 32) {
+  const shown = bytes.subarray(0, Math.min(bytes.length, prefixBytes));
+  return `${bytesToHex(shown)}...`;
+}
+
+export function summarizeTimings(timings) {
+  return Object.fromEntries(
+    Object.entries(timings).map(([key, value]) => [key, Number(value).toFixed(2)]),
+  );
+}
+
+export function buildWorkerResultMessage(id, proofData, timings) {
+  return {
+    message: {
+      type: 'result',
+      id,
+      result: { proofData, timings },
+    },
+    transfer: [proofData.buffer],
+  };
+}

webapp/src/worker.js

@@ -8,8 +8,9 @@
 // sends an 'init' message before that finishes, we just re-send the
 // ready/error status once we know it.
 
-import init, { generate_keypair, prove_full, verify } from '../../pkg/davinci_stark.js';
+import init, { generate_keypair, prove_full_detailed, verify } from '../../pkg/davinci_stark.js';
 import wasmUrl from '../../pkg/davinci_stark_bg.wasm?url';
+import { buildWorkerResultMessage } from './proof_ui.js';
 
 let ready = false;
 let initError = null;
@@ -55,8 +56,26 @@ self.onmessage = async (e) => {
 
       case 'prove': {
         const { kBytes, fields, pkBytes, processId, address, weight, ballotMode } = payload;
-        const proofData = prove_full(kBytes, fields, pkBytes, processId, address, weight, ballotMode);
-        self.postMessage({ type: 'result', id, result: { proofData } });
+        const workerStart = performance.now();
+        const result = prove_full_detailed(
+          kBytes,
+          fields,
+          pkBytes,
+          processId,
+          address,
+          weight,
+          ballotMode,
+        );
+        const proofData = result.proofData;
+        const timings = {
+          wasmDecodeMs: result.decodeMs,
+          wasmTraceMs: result.traceMs,
+          wasmProveMs: result.proveMs,
+          wasmSerializeMs: result.serializeMs,
+          workerWallMs: performance.now() - workerStart,
+        };
+        const message = buildWorkerResultMessage(id, proofData, timings);
+        self.postMessage(message.message, message.transfer);
         break;
       }
 

webapp/tests/proof_ui.test.mjs

@@ -0,0 +1,43 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { buildWorkerResultMessage, formatProofPreview, summarizeTimings } from '../src/proof_ui.js';
+
+test('formatProofPreview keeps only a short proof prefix', () => {
+  const bytes = new Uint8Array(Array.from({ length: 32 }, (_, i) => i));
+  const preview = formatProofPreview(bytes, 8);
+  assert.equal(preview, '0001020304050607...');
+});
+
+test('summarizeTimings rounds timing fields for display', () => {
+  const summary = summarizeTimings({
+    inputPackMs: 1.234,
+    workerWallMs: 20.987,
+    wasmDecodeMs: 0.456,
+    wasmTraceMs: 5.432,
+    wasmProveMs: 99.999,
+    wasmSerializeMs: 3.333,
+    mainRenderMs: 2.111,
+  });
+
+  assert.deepEqual(summary, {
+    inputPackMs: '1.23',
+    workerWallMs: '20.99',
+    wasmDecodeMs: '0.46',
+    wasmTraceMs: '5.43',
+    wasmProveMs: '100.00',
+    wasmSerializeMs: '3.33',
+    mainRenderMs: '2.11',
+  });
+});
+
+test('buildWorkerResultMessage transfers the proof buffer', () => {
+  const proofData = new Uint8Array([1, 2, 3, 4]);
+  const timings = { wasmProveMs: 12.5 };
+  const { message, transfer } = buildWorkerResultMessage(7, proofData, timings);
+
+  assert.equal(message.type, 'result');
+  assert.equal(message.id, 7);
+  assert.equal(message.result.proofData, proofData);
+  assert.deepEqual(message.result.timings, timings);
+  assert.deepEqual(transfer, [proofData.buffer]);
+});