Add new inference engine target: proof.html

Browse files

Files changed (1) hide show

27_Zymatica_Inference_Engine/zymatica-inference-engine-inventory/zymatica-inference-engine-wasm/proof.html +521 -0

27_Zymatica_Inference_Engine/zymatica-inference-engine-inventory/zymatica-inference-engine-wasm/proof.html ADDED Viewed

	@@ -0,0 +1,521 @@

+<!--
+  Watermark: ip zymatica.space | astronautshe.com
+  Copyright (c) 2026 Zymatica. All rights reserved.
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ZYMATICA | WebAssembly Inference Engine (Class 27)</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-base: #050212;
+            --bg-panel: rgba(13, 8, 30, 0.7);
+            --border-glow: rgba(56, 189, 248, 0.25); /* Cyan glow for WASM */
+            --border-glow-active: rgba(56, 189, 248, 0.6);
+            --primary: #38bdf8;
+            --secondary: #10b981;
+            --text-main: #f3f4f6;
+            --text-mute: #9ca3af;
+            --accent: #a78bfa;
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: var(--bg-base);
+            color: var(--text-main);
+            font-family: 'Outfit', sans-serif;
+            overflow-x: hidden;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        header {
+            padding: 20px 40px;
+            background: linear-gradient(180deg, rgba(5, 2, 18, 0.8) 0%, rgba(5, 2, 18, 0) 100%);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            z-index: 10;
+        }
+        .logo-section h1 {
+            margin: 0;
+            font-size: 24px;
+            font-weight: 800;
+            letter-spacing: 2px;
+            background: linear-gradient(90deg, #38bdf8, #a78bfa, #10b981);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .logo-section p {
+            margin: 4px 0 0 0;
+            font-size: 11px;
+            font-family: 'Fira Code', monospace;
+            color: var(--text-mute);
+        }
+        .container {
+            display: grid;
+            grid-template-columns: 1fr 400px;
+            gap: 30px;
+            padding: 30px 40px;
+            flex-grow: 1;
+            box-sizing: border-box;
+            z-index: 5;
+        }
+        .viewport-panel {
+            background: var(--bg-panel);
+            border: 1px solid var(--border-glow);
+            border-radius: 16px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(16px);
+            transition: border-color 0.3s ease;
+        }
+        .viewport-panel:hover {
+            border-color: var(--border-glow-active);
+        }
+        canvas {
+            width: 100%;
+            height: 500px;
+            border-radius: 12px;
+            background: #03010b;
+        }
+        .control-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .card {
+            background: var(--bg-panel);
+            border: 1px solid var(--border-glow);
+            border-radius: 16px;
+            padding: 24px;
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(16px);
+        }
+        h2 {
+            margin-top: 0;
+            font-size: 18px;
+            font-weight: 600;
+            color: #f3f4f6;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            padding-bottom: 10px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        label {
+            display: block;
+            font-size: 12px;
+            color: var(--text-mute);
+            margin-bottom: 6px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .btn {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+            border: none;
+            color: white;
+            padding: 12px 24px;
+            font-size: 13px;
+            font-weight: 600;
+            border-radius: 8px;
+            cursor: pointer;
+            width: 100%;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 14px 0 rgba(56, 189, 248, 0.3);
+            font-family: 'Outfit', sans-serif;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px 0 rgba(56, 189, 248, 0.5);
+        }
+        .telemetry-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+            font-size: 13px;
+        }
+        .telemetry-row span:first-child {
+            color: var(--text-mute);
+        }
+        .telemetry-row span:last-child {
+            font-family: 'Fira Code', monospace;
+            color: var(--primary);
+            font-weight: 500;
+        }
+        .badge-verification {
+            background: rgba(16, 185, 129, 0.08);
+            border: 1px solid rgba(16, 185, 129, 0.25);
+            color: var(--secondary);
+            font-family: 'Fira Code', monospace;
+            font-size: 11px;
+            padding: 10px 14px;
+            border-radius: 8px;
+            margin-top: 15px;
+            text-align: center;
+            font-weight: bold;
+            display: none;
+        }
+        .console-output {
+            background: #03010b;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            border-radius: 8px;
+            padding: 12px;
+            font-family: 'Fira Code', monospace;
+            font-size: 11px;
+            height: 120px;
+            overflow-y: auto;
+            color: #38bdf8;
+        }
+        .console-line {
+            margin-bottom: 4px;
+        }
+        .console-line.success {
+            color: var(--secondary);
+        }
+        .console-line.info {
+            color: #a78bfa;
+        }
+        .console-line.err {
+            color: #ef4444;
+        }
+        .glow-overlay {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            gap: 10px;
+            pointer-events: none;
+        }
+        .status-indicator {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #ef4444;
+            box-shadow: 0 0 10px #ef4444;
+            transition: all 0.5s ease;
+        }
+        .status-indicator.ready {
+            background-color: var(--secondary);
+            box-shadow: 0 0 10px var(--secondary);
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(0.9); opacity: 0.6; }
+            50% { transform: scale(1.1); opacity: 1; }
+            100% { transform: scale(0.9); opacity: 0.6; }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo-section">
+            <h1>ZYMATICA inference engine</h1>
+            <p>ip zymatica.space | Class 27 WebAssembly Core Suite</p>
+        </div>
+        <div class="status-group" style="display: flex; align-items: center; gap: 10px;">
+            <div id="status-indicator" class="status-indicator"></div>
+            <span id="status-label" style="font-size: 12px; font-family: 'Fira Code', monospace; color: #ef4444;">WASM OFFLINE</span>
+        </div>
+    </header>
+    <div class="container">
+        <div class="viewport-panel">
+            <h2>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><path d="M2 12h20"/></svg>
+                WASM Freestanding Radical State Space
+            </h2>
+            <canvas id="webgl-canvas"></canvas>
+            <div class="glow-overlay">
+                <span style="font-size: 10px; font-family: 'Fira Code', monospace; background: rgba(5,2,18,0.8); padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.05);">WASM CORE</span>
+            </div>
+        </div>
+        <div class="control-panel">
+            <div class="card">
+                <h2>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
+                    WASM Performance Benchmark
+                </h2>
+                <div class="form-group">
+                    <label>Iterations</label>
+                    <div style="font-family: 'Fira Code', monospace; font-size: 14px; background: rgba(3, 1, 11, 0.6); padding: 10px; border: 1px solid var(--border-glow); border-radius: 8px;">10,000 (Lossless Parity Loops)</div>
+                </div>
+                <button class="btn" id="btn-run">Run WASM Core Benchmark</button>
+            </div>
+            <div class="card">
+                <h2>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
+                    Execution Telemetry
+                </h2>
+                <div class="telemetry-row">
+                    <span>Active Target</span>
+                    <span>WASM (wasm32-freestanding)</span>
+                </div>
+                <div class="telemetry-row">
+                    <span>Average Iteration Latency</span>
+                    <span id="telemetry-latency">--</span>
+                </div>
+                <div class="telemetry-row">
+                    <span>Total Benchmark Time</span>
+                    <span id="telemetry-total-time">--</span>
+                </div>
+                <div class="telemetry-row">
+                    <span>Benchmark Throughput</span>
+                    <span id="telemetry-throughput" style="color: var(--secondary) !important;">--</span>
+                </div>
+                <div class="telemetry-row">
+                    <span>FFI Verification Code</span>
+                    <span id="output-result">--</span>
+                </div>
+                <div class="badge-verification" id="badge-verification">
+                    [VERIFICATION] Multi-Language runtime FFI structures validated.
+                </div>
+            </div>
+            <div class="card">
+                <h2>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+                    Diagnostics & Assembly Console
+                </h2>
+                <div class="console-output" id="console-output">
+                    <div class="console-line info">[SYS] Loading freestanding WebAssembly context...</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        const consoleOut = document.getElementById("console-output");
+        const statusIndicator = document.getElementById("status-indicator");
+        const statusLabel = document.getElementById("status-label");
+        const badgeVerification = document.getElementById("badge-verification");
+        function log(msg, type="info") {
+            const line = document.createElement("div");
+            line.className = `console-line ${type}`;
+            line.innerText = msg;
+            consoleOut.appendChild(line);
+            consoleOut.scrollTop = consoleOut.scrollHeight;
+        }
+        // --- WebAssembly Loading ---
+        let wasmExports = null;
+        async function initWasm() {
+            try {
+                const response = await fetch("proof_wasm.wasm");
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const buffer = await response.arrayBuffer();
+                const wasmModule = await WebAssembly.instantiate(new Uint8Array(buffer), {});
+                wasmExports = wasmModule.instance.exports;
+                statusIndicator.className = "status-indicator ready";
+                statusLabel.innerText = "WASM READY";
+                statusLabel.style.color = "var(--secondary)";
+                log("[SYS] WebAssembly binary loaded and compiled successfully.", "success");
+                log("[SYS] Exported run_verification function is binded and ready.", "success");
+            } catch (err) {
+                log(`[ERR] WebAssembly loading failed: ${err.message}`, "err");
+            }
+        }
+        initWasm();
+        // --- Render Loop (WebGL fallback visualization for 6D representation) ---
+        const canvas = document.getElementById("webgl-canvas");
+        const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+        let pointsRotation = 0;
+        if (gl) {
+            const vsSource = `
+                attribute vec3 position;
+                attribute vec3 color;
+                varying vec3 vColor;
+                uniform mat4 mvp;
+                void main() {
+                    gl_Position = mvp * vec4(position, 1.0);
+                    gl_PointSize = 4.5;
+                    vColor = color;
+                }
+            `;
+            const fsSource = `
+                precision mediump float;
+                varying vec3 vColor;
+                void main() {
+                    float d = distance(gl_PointCoord, vec2(0.5));
+                    if (d > 0.5) discard;
+                    gl_FragColor = vec4(vColor, 1.0 - (d * 2.0));
+                }
+            `;
+            function compileShader(src, type) {
+                const sh = gl.createShader(type);
+                gl.shaderSource(sh, src);
+                gl.compileShader(sh);
+                return sh;
+            }
+            const program = gl.createProgram();
+            gl.attachShader(program, compileShader(vsSource, gl.VERTEX_SHADER));
+            gl.attachShader(program, compileShader(fsSource, gl.FRAGMENT_SHADER));
+            gl.linkProgram(program);
+            gl.useProgram(program);
+            const numPoints = 1200;
+            const pos = [];
+            const cols = [];
+            for (let i = 0; i < numPoints; i++) {
+                const theta = Math.random() * 2.0 * Math.PI;
+                const phi = Math.acos(2.0 * Math.random() - 1.0);
+                const r = 0.45 + 0.15 * Math.sin(theta * 6) * Math.cos(phi * 6);
+                pos.push(r * Math.sin(phi) * Math.cos(theta), r * Math.sin(phi) * Math.sin(theta), r * Math.cos(phi));
+                const colMix = Math.random();
+                if (colMix < 0.4) {
+                    cols.push(0.22, 0.74, 0.97); // Cyan
+                } else if (colMix < 0.7) {
+                    cols.push(0.65, 0.54, 0.98); // Neon violet
+                } else {
+                    cols.push(0.06, 0.72, 0.5); // Emerald green
+                }
+            }
+            const posBuf = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pos), gl.STATIC_DRAW);
+            const posLoc = gl.getAttribLocation(program, "position");
+            gl.enableVertexAttribArray(posLoc);
+            gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);
+            const colBuf = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, colBuf);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cols), gl.STATIC_DRAW);
+            const colLoc = gl.getAttribLocation(program, "color");
+            gl.enableVertexAttribArray(colLoc);
+            gl.vertexAttribPointer(colLoc, 3, gl.FLOAT, false, 0, 0);
+            const mvpLoc = gl.getUniformLocation(program, "mvp");
+            function render() {
+                canvas.width = canvas.clientWidth;
+                canvas.height = canvas.clientHeight;
+                gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+                gl.clearColor(0.02, 0.01, 0.05, 1.0);
+                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+                gl.enable(gl.BLEND);
+                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+                pointsRotation += 0.01;
+                const c = Math.cos(pointsRotation);
+                const s = Math.sin(pointsRotation);
+                const mvp = [
+                    c, 0.3*s, s, 0,
+                    0, 0.7, -0.3, 0,
+                    -s, 0.3*c, c, 0,
+                    0, 0, 0, 1.2
+                ];
+                gl.uniformMatrix4fv(mvpLoc, false, new Float32Array(mvp));
+                gl.drawArrays(gl.POINTS, 0, numPoints);
+                requestAnimationFrame(render);
+            }
+            render();
+        }
+        // --- Benchmark Runner ---
+        const btnRun = document.getElementById("btn-run");
+        const latSpan = document.getElementById("telemetry-latency");
+        const totalSpan = document.getElementById("telemetry-total-time");
+        const outResSpan = document.getElementById("output-result");
+        const throughputSpan = document.getElementById("telemetry-throughput");
+        btnRun.addEventListener("click", () => {
+            if (!wasmExports) {
+                log("[WARN] WebAssembly module is not ready yet.", "err");
+                return;
+            }
+            log("[*] Dispatching WebAssembly benchmark task: 10,000 iterations of full range coder parity checks...");
+            const runs = 10000;
+            let lastResult = 0;
+            const tStart = performance.now();
+            for (let i = 0; i < runs; i++) {
+                lastResult = wasmExports.run_verification();
+            }
+            const tEnd = performance.now();
+            const totalDuration = tEnd - tStart;
+            const avgLatency = totalDuration / runs;
+            const throughput = (runs / (totalDuration / 1000.0)).toFixed(1);
+            latSpan.innerText = `${avgLatency.toFixed(4)} ms`;
+            totalSpan.innerText = `${totalDuration.toFixed(2)} ms`;
+            outResSpan.innerText = lastResult;
+            throughputSpan.innerText = `${throughput} iter/sec`;
+            if (lastResult === 1) {
+                log(`[+] Benchmark complete in ${totalDuration.toFixed(2)} ms.`, "success");
+                log(`[+] Average latency per full encode/decode verify: ${avgLatency.toFixed(4)} ms.`, "success");
+                log(`[+] Throughput achieved: ${throughput} full cycles/sec.`, "success");
+                badgeVerification.style.display = "block";
+            } else {
+                log("[-] ERROR: WebAssembly return code indicates parity verification failed!", "err");
+                badgeVerification.style.display = "none";
+            }
+        });
+    </script>
+</body>
+</html>