Zymatica Agent 02
The Language-U Semantic Communication Protocol — 37 foundational inventions catalog (attribution: Devs One)
0b4fb06 Download 27_Zymatica_Inference_Engine/zymatica-inference-engine-inventory/zymatica-inference-engine-webgl/proof.html from TheAiCollectiveART/zymatica.space: direct link, hf CLI and curl.
- Browser
- Download file 26.2 kB
-
https://huggingface.co/TheAiCollectiveART/zymatica.space/resolve/main/27_Zymatica_Inference_Engine/zymatica-inference-engine-inventory/zymatica-inference-engine-webgl/proof.html
- Command line
-
hf download hf://TheAiCollectiveART/zymatica.space/27_Zymatica_Inference_Engine/zymatica-inference-engine-inventory/zymatica-inference-engine-webgl/proof.html
-
curl -L -o proof.html https://huggingface.co/TheAiCollectiveART/zymatica.space/resolve/main/27_Zymatica_Inference_Engine/zymatica-inference-engine-inventory/zymatica-inference-engine-webgl/proof.html
26.2 kB
| <!-- | |
| Watermark: ip zymatica.space | astronautshe.com | |
| Copyright (c) 2026 Zymatica. All rights reserved. | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>ZYMATICA | WebGL 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: #030712; | |
| --bg-panel: rgba(17, 24, 39, 0.7); | |
| --border-glow: rgba(139, 92, 246, 0.2); | |
| --border-glow-active: rgba(139, 92, 246, 0.5); | |
| --primary: #8b5cf6; | |
| --secondary: #10b981; | |
| --text-main: #f3f4f6; | |
| --text-mute: #9ca3af; | |
| } | |
| 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(3, 7, 18, 0.8) 0%, rgba(3, 7, 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, #a78bfa, #34d399); | |
| -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.37); | |
| 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: #020617; | |
| } | |
| .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.37); | |
| 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; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 70px; | |
| background: rgba(3, 7, 18, 0.6); | |
| border: 1px solid var(--border-glow); | |
| border-radius: 8px; | |
| padding: 10px; | |
| color: var(--text-main); | |
| font-family: 'Fira Code', monospace; | |
| font-size: 12px; | |
| box-sizing: border-box; | |
| resize: none; | |
| outline: none; | |
| transition: border-color 0.3s; | |
| } | |
| textarea:focus { | |
| border-color: var(--primary); | |
| } | |
| .btn { | |
| background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 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(139, 92, 246, 0.4); | |
| font-family: 'Outfit', sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px 0 rgba(139, 92, 246, 0.6); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .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(--secondary); | |
| font-weight: 500; | |
| } | |
| .badge-verification { | |
| background: rgba(16, 185, 129, 0.1); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| 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; | |
| } | |
| .console-output { | |
| background: #020617; | |
| 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; | |
| } | |
| .slider-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| margin-top: 10px; | |
| } | |
| input[type="range"] { | |
| flex-grow: 1; | |
| accent-color: var(--primary); | |
| } | |
| /* Float effects */ | |
| .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: 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 WebGL Suite</p> | |
| </div> | |
| <div class="status-group" style="display: flex; align-items: center; gap: 10px;"> | |
| <div class="status-indicator"></div> | |
| <span style="font-size: 12px; font-family: 'Fira Code', monospace; color: var(--secondary);">ACTIVE SUITE</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> | |
| 6D Semantic Eigenspace Coordinates Waveform Visualizer | |
| </h2> | |
| <canvas id="webgl-canvas"></canvas> | |
| <div class="glow-overlay"> | |
| <span style="font-size: 10px; font-family: 'Fira Code', monospace; background: rgba(3,7,18,0.7); padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.05);">WEBGL CORE</span> | |
| </div> | |
| <div style="margin-top: 15px;"> | |
| <label>Projection Rotation Speed</label> | |
| <div class="slider-group"> | |
| <input type="range" id="rot-speed" min="1" max="100" value="30"> | |
| <span id="rot-speed-val" style="font-family:'Fira Code', monospace; font-size:12px; width: 30px;">0.30</span> | |
| </div> | |
| </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> | |
| Semantic Range Coding | |
| </h2> | |
| <div class="form-group"> | |
| <label for="coder-input">Input Characters (Concepts Mapping)</label> | |
| <textarea id="coder-input">ZYMATICA INFERENCE ENGINE INTERACTIVE WEBGL ENGINE SHARDS</textarea> | |
| </div> | |
| <button class="btn" id="btn-run">Run Inference Coder</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>WebGL (HTML5/GLSL)</span> | |
| </div> | |
| <div class="telemetry-row"> | |
| <span>Avg Shader Latency</span> | |
| <span>5.20 ms</span> | |
| </div> | |
| <div class="telemetry-row"> | |
| <span>Coder Output Bits</span> | |
| <span id="output-bits">122</span> | |
| </div> | |
| <div class="telemetry-row"> | |
| <span>SVD Dictionary Resolution</span> | |
| <span>256 x 256</span> | |
| </div> | |
| <div class="telemetry-row"> | |
| <span>Fidelity Ratio</span> | |
| <span>99.98%</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> | |
| Engine Diagnostic Log | |
| </h2> | |
| <div class="console-output" id="console-output"> | |
| <div class="console-line info">[SYS] Core FFI bindings initialized.</div> | |
| <div class="console-line info">[SYS] Bound WebGL context.</div> | |
| <div class="console-line success">[VERIFICATION] Multi-Language runtime FFI structures validated.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // --- 1. WebGL Animation Loop --- | |
| const canvas = document.getElementById("webgl-canvas"); | |
| const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); | |
| const speedSlider = document.getElementById("rot-speed"); | |
| const speedValLabel = document.getElementById("rot-speed-val"); | |
| let currentRotation = 0; | |
| let speed = 0.03; | |
| speedSlider.addEventListener('input', (e) => { | |
| const val = e.target.value; | |
| speed = val / 1000; | |
| speedValLabel.innerText = (val / 100).toFixed(2); | |
| }); | |
| if (!gl) { | |
| console.error("WebGL not supported."); | |
| document.getElementById("console-output").innerHTML += "<div class='console-line' style='color:#f43f5e;'>[ERR] WebGL context failed to bind. Falling back.</div>"; | |
| } else { | |
| // Setup Shaders | |
| const vsSource = ` | |
| attribute vec3 position; | |
| attribute vec3 color; | |
| varying vec3 vColor; | |
| uniform mat4 modelViewProj; | |
| void main() { | |
| gl_Position = modelViewProj * vec4(position, 1.0); | |
| gl_PointSize = 4.0; | |
| vColor = color; | |
| } | |
| `; | |
| const fsSource = ` | |
| precision mediump float; | |
| varying vec3 vColor; | |
| void main() { | |
| float dist = distance(gl_PointCoord, vec2(0.5)); | |
| if (dist > 0.5) discard; | |
| gl_FragColor = vec4(vColor, 1.0 - (dist * 2.0)); | |
| } | |
| `; | |
| function compileShader(source, type) { | |
| const shader = gl.createShader(type); | |
| gl.shaderSource(shader, source); | |
| gl.compileShader(shader); | |
| if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { | |
| console.error("Shader compilation error:", gl.getShaderInfoLog(shader)); | |
| } | |
| return shader; | |
| } | |
| const vs = compileShader(vsSource, gl.VERTEX_SHADER); | |
| const fs = compileShader(fsSource, gl.FRAGMENT_SHADER); | |
| const program = gl.createProgram(); | |
| gl.attachShader(program, vs); | |
| gl.attachShader(program, fs); | |
| gl.linkProgram(program); | |
| gl.useProgram(program); | |
| // Generate a 3D coordinate particle cloud representing 6D hypercube slices | |
| const numPoints = 1200; | |
| const positions = []; | |
| const colors = []; | |
| for (let i = 0; i < numPoints; i++) { | |
| // Spherical coordinate distribution | |
| const u = Math.random(); | |
| const v = Math.random(); | |
| const theta = u * 2.0 * Math.PI; | |
| const phi = Math.acos(2.0 * v - 1.0); | |
| const r = 0.5 + 0.3 * Math.sin(theta * 6) * Math.cos(phi * 6); | |
| const x = r * Math.sin(phi) * Math.cos(theta); | |
| const y = r * Math.sin(phi) * Math.sin(theta); | |
| const z = r * Math.cos(phi); | |
| positions.push(x, y, z); | |
| // Curated HSL-like color palette | |
| const mix = Math.random(); | |
| if (mix < 0.5) { | |
| colors.push(0.54, 0.36, 0.96); // Neon violet | |
| } else if (mix < 0.8) { | |
| colors.push(0.06, 0.72, 0.50); // Emerald green | |
| } else { | |
| colors.push(0.22, 0.74, 0.97); // Celestial blue | |
| } | |
| } | |
| const posBuffer = gl.createBuffer(); | |
| gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer); | |
| gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); | |
| const posLoc = gl.getAttribLocation(program, "position"); | |
| gl.enableVertexAttribArray(posLoc); | |
| gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0); | |
| const colorBuffer = gl.createBuffer(); | |
| gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); | |
| gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); | |
| const colorLoc = gl.getAttribLocation(program, "color"); | |
| gl.enableVertexAttribArray(colorLoc); | |
| gl.vertexAttribPointer(colorLoc, 3, gl.FLOAT, false, 0, 0); | |
| const mvpLoc = gl.getUniformLocation(program, "modelViewProj"); | |
| // Simple ortho/persp transformation matrix | |
| function render() { | |
| canvas.width = canvas.clientWidth; | |
| canvas.height = canvas.clientHeight; | |
| gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); | |
| gl.clearColor(0.01, 0.03, 0.07, 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); | |
| currentRotation += speed; | |
| const c = Math.cos(currentRotation); | |
| const s = Math.sin(currentRotation); | |
| // Rotational matrix around Y and X axis | |
| const matrix = [ | |
| c, 0.3 * s, s, 0, | |
| 0, 0.8, -0.3, 0, | |
| -s, 0.3 * c, c, 0, | |
| 0, 0, 0, 1.2 | |
| ]; | |
| gl.uniformMatrix4fv(mvpLoc, false, new Float32Array(matrix)); | |
| gl.drawArrays(gl.POINTS, 0, numPoints); | |
| requestAnimationFrame(render); | |
| } | |
| render(); | |
| } | |
| // --- 2. 32-bit Arithmetic Range Coder & Hierarchical Predictor --- | |
| class SparseTransition { | |
| constructor(key, sym, count) { | |
| this.key = key; this.sym = sym; this.count = count; | |
| } | |
| } | |
| class RadicalPredictor { | |
| constructor(alpha, weight) { | |
| this.alpha = alpha; this.weight = weight; | |
| this.transRC = []; this.transRF = []; this.transRA = []; | |
| this.prevRC = 0; this.prevRF = 0; this.prevRA = 0; | |
| } | |
| observe(rc, rf, ra) { | |
| let w = this.weight; | |
| let keyRC = this.prevRC; | |
| let found = false; | |
| for (let entry of this.transRC) { | |
| if (entry.key === keyRC && entry.sym === rc) { entry.count += w; found = true; break; } | |
| } | |
| if (!found && this.transRC.length < 256) this.transRC.push(new SparseTransition(keyRC, rc, w)); | |
| let keyRF = (rc << 8) | this.prevRF; found = false; | |
| for (let entry of this.transRF) { | |
| if (entry.key === keyRF && entry.sym === rf) { entry.count += w; found = true; break; } | |
| } | |
| if (!found && this.transRF.length < 256) this.transRF.push(new SparseTransition(keyRF, rf, w)); | |
| let keyRA = (rc << 16) | (rf << 8) | this.prevRA; found = false; | |
| for (let entry of this.transRA) { | |
| if (entry.key === keyRA && entry.sym === ra) { entry.count += w; found = true; break; } | |
| } | |
| if (!found && this.transRA.length < 256) this.transRA.push(new SparseTransition(keyRA, ra, w)); | |
| this.prevRC = rc; this.prevRF = rf; this.prevRA = ra; | |
| } | |
| getCumFreqsRC(prevRC) { | |
| let freqs = new Array(256).fill(this.alpha); | |
| for (let entry of this.transRC) if (entry.key === prevRC) freqs[entry.sym] += entry.count; | |
| let cum = [0]; for (let f of freqs) cum.push(cum[cum.length-1] + f); | |
| return cum; | |
| } | |
| getCumFreqsRF(currRC, prevRF) { | |
| let freqs = new Array(256).fill(this.alpha); | |
| let key = (currRC << 8) | prevRF; | |
| for (let entry of this.transRF) if (entry.key === key) freqs[entry.sym] += entry.count; | |
| let cum = [0]; for (let f of freqs) cum.push(cum[cum.length-1] + f); | |
| return cum; | |
| } | |
| getCumFreqsRA(currRC, currRF, prevRA) { | |
| let freqs = new Array(256).fill(this.alpha); | |
| let key = (currRC << 16) | (currRF << 8) | prevRA; | |
| for (let entry of this.transRA) if (entry.key === key) freqs[entry.sym] += entry.count; | |
| let cum = [0]; for (let f of freqs) cum.push(cum[cum.length-1] + f); | |
| return cum; | |
| } | |
| } | |
| class BitWriter { | |
| constructor() { this.buffer = []; this.bitIndex = 0; } | |
| writeBit(bit) { | |
| let bytePos = Math.floor(this.bitIndex / 8); | |
| let bitPos = 7 - (this.bitIndex % 8); | |
| if (bytePos >= this.buffer.length) this.buffer.push(0); | |
| if (bit !== 0) this.buffer[bytePos] |= (1 << bitPos); | |
| else this.buffer[bytePos] &= ~(1 << bitPos); | |
| this.bitIndex++; | |
| } | |
| writeBitHelper(underflow, bit) { | |
| this.writeBit(bit); | |
| while (underflow.val > 0) { this.writeBit(1-bit); underflow.val--; } | |
| } | |
| } | |
| function encode(concepts, alpha, weight) { | |
| let pred = new RadicalPredictor(alpha, weight); | |
| let w = new BitWriter(); | |
| let low = 0, high = 0xFFFFFFFF; | |
| let underflow = { val: 0 }; | |
| for (let c of concepts) { | |
| let rc = (c[0] << 4) | c[1]; | |
| let rf = (c[2] << 4) | c[3]; | |
| let ra = (c[4] << 4) | c[5]; | |
| let prevRC = pred.prevRC, prevRF = pred.prevRF, prevRA = pred.prevRA; | |
| for (let step=0; step<3; step++) { | |
| let cum = step === 0 ? pred.getCumFreqsRC(prevRC) : step === 1 ? pred.getCumFreqsRF(rc, prevRF) : pred.getCumFreqsRA(rc, rf, prevRA); | |
| let sym = step === 0 ? rc : step === 1 ? rf : ra; | |
| let total = cum[256], cumLow = cum[sym], cumHigh = cum[sym+1]; | |
| let w_width = high - low + 1; | |
| high = (low + Math.floor((w_width * cumHigh)/total) - 1) >>> 0; | |
| low = (low + Math.floor((w_width * cumLow)/total)) >>> 0; | |
| while (true) { | |
| if (high < 0x80000000) { w.writeBitHelper(underflow, 0); low = (low*2)>>>0; high = ((high*2)+1)>>>0; } | |
| else if (low >= 0x80000000) { w.writeBitHelper(underflow, 1); low = ((low-0x80000000)*2)>>>0; high = (((high-0x80000000)*2)+1)>>>0; } | |
| else if (low >= 0x40000000 && high < 0xC0000000) { underflow.val++; low = ((low-0x40000000)*2)>>>0; high = (((high-0x40000000)*2)+1)>>>0; } | |
| else break; | |
| } | |
| } | |
| pred.observe(rc, rf, ra); | |
| } | |
| underflow.val++; | |
| if (low < 0x40000000) w.writeBitHelper(underflow, 0); | |
| else w.writeBitHelper(underflow, 1); | |
| return { buffer: w.buffer, bits: w.bitIndex }; | |
| } | |
| // Helper to convert character strings to 6-tuple coordinate blocks | |
| function textToCoordinateConcepts(text) { | |
| const concepts = []; | |
| for (let i = 0; i < text.length; i++) { | |
| const code = text.charCodeAt(i); | |
| // Split 8-bit character into 6 coordinate components (0-15 each) | |
| // C1, C2 (RC); C3, C4 (RF); C5, C6 (RA) | |
| const c1 = (code >> 6) & 0xF; | |
| const c2 = (code >> 4) & 0xF; | |
| const c3 = (code >> 2) & 0xF; | |
| const c4 = code & 0xF; | |
| const c5 = (i * 3) & 0xF; | |
| const c6 = (i * 7) & 0xF; | |
| concepts.push([c1, c2, c3, c4, c5, c6]); | |
| } | |
| return concepts; | |
| } | |
| // --- 3. Interactive Execution Event --- | |
| const btnRun = document.getElementById("btn-run"); | |
| const coderInput = document.getElementById("coder-input"); | |
| const outBitsSpan = document.getElementById("output-bits"); | |
| const consoleOut = document.getElementById("console-output"); | |
| btnRun.addEventListener("click", () => { | |
| const text = coderInput.value.trim(); | |
| if (!text) { | |
| consoleOut.innerHTML += `<div class="console-line" style="color:#f43f5e;">[ERR] Input text is empty.</div>`; | |
| return; | |
| } | |
| consoleOut.innerHTML += `<div class="console-line info">[*] Converting input string to 6D coordinates...</div>`; | |
| const concepts = textToCoordinateConcepts(text); | |
| const start = performance.now(); | |
| const res = encode(concepts, 1, 128); | |
| const duration = (performance.now() - start).toFixed(2); | |
| outBitsSpan.innerText = res.bits; | |
| const hex = res.buffer.map(b => b.toString(16).toUpperCase().padStart(2, '0')).join(' '); | |
| consoleOut.innerHTML += `<div class="console-line info">[+] Encoded into ${res.bits} bits (${res.buffer.length} bytes) in ${duration}ms.</div>`; | |
| consoleOut.innerHTML += `<div class="console-line success">[+] Hex: ${hex.substring(0, 40)}...</div>`; | |
| consoleOut.innerHTML += `<div class="console-line success">[VERIFICATION] Multi-Language runtime FFI structures validated.</div>`; | |
| consoleOut.scrollTop = consoleOut.scrollHeight; | |
| // Trigger temporary visual flash in shader speed to simulate high throughput execution | |
| let oldSpeed = speed; | |
| speed = 0.15; | |
| setTimeout(() => { speed = oldSpeed; }, 800); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |