Spaces:
Configuration error
Configuration error
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MatVerse OSX - Truth Engine v4.0</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap'); | |
| body { font-family: 'JetBrains+Mono', monospace; background-color: #050505; color: #00ff41; } | |
| .terminal-card { background: rgba(10, 10, 10, 0.9); border: 1px solid #00ff41; box-shadow: 0 0 15px rgba(0, 255, 65, 0.2); } | |
| .stage-active { background: #00ff41; color: #000; } | |
| .stage-pending { border: 1px solid #333; color: #333; } | |
| .stage-done { border: 1px solid #00ff41; color: #00ff41; } | |
| ::-webkit-scrollbar { width: 5px; } | |
| ::-webkit-scrollbar-thumb { background: #00ff41; } | |
| </style> | |
| </head> | |
| <body class="p-4 md:p-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8 border-b border-green-900 pb-4"> | |
| <div> | |
| <h1 class="text-2xl font-bold tracking-tighter">MATVERSE <span class="text-white">OSX</span></h1> | |
| <p class="text-xs opacity-50">TRUTH ENGINE v4.0 // Ω-GATE GOVERNANCE</p> | |
| </div> | |
| <div class="text-right"> | |
| <p id="ledger-hash" class="text-[10px] opacity-40 truncate w-48">LEDGER: LOADING...</p> | |
| <p class="text-xs">STATUS: <span id="system-status" class="animate-pulse">ONLINE</span></p> | |
| </div> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Coluna Esquerda: Controles e Ingestão --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <div class="terminal-card p-4 rounded"> | |
| <h2 class="text-sm font-bold mb-4 border-b border-green-900 pb-2">INGESTÃO DE INTENÇÃO</h2> | |
| <textarea id="intent-input" class="w-full bg-black border border-green-900 p-2 text-xs h-24 focus:outline-none focus:border-green-400" placeholder="Digite a intenção para o MNB..."></textarea> | |
| <button onclick="ingest()" class="w-full mt-4 bg-green-900 hover:bg-green-700 text-white text-xs py-2 transition-all">INICIAR PIPELINE</button> | |
| </div> | |
| <div class="terminal-card p-4 rounded"> | |
| <h2 class="text-sm font-bold mb-4 border-b border-green-900 pb-2">CONTROLES OPERACIONAIS</h2> | |
| <div class="flex gap-2"> | |
| <button onclick="advance()" class="flex-1 bg-green-900 hover:bg-green-700 text-white text-xs py-2">AVANÇAR</button> | |
| <button onclick="autoAdvance()" id="auto-btn" class="flex-1 border border-green-900 hover:bg-green-900 text-white text-xs py-2">AUTO</button> | |
| </div> | |
| <button onclick="generateEvidence()" class="w-full mt-2 border border-blue-900 text-blue-400 hover:bg-blue-900 hover:text-white text-xs py-2 transition-all">GERAR EVIDENCE PACK</button> | |
| </div> | |
| <div id="metrics-panel" class="terminal-card p-4 rounded hidden"> | |
| <h2 class="text-sm font-bold mb-4 border-b border-green-900 pb-2">MÉTRICAS Ω-GATE</h2> | |
| <div id="metrics-content" class="text-[10px] space-y-1"> | |
| <!-- Preenchido via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Coluna Central: Pipeline Visual --> | |
| <div class="lg:col-span-2"> | |
| <div class="terminal-card p-4 rounded h-full"> | |
| <h2 class="text-sm font-bold mb-4 border-b border-green-900 pb-2">PIPELINE DE 19 ESTÁGIOS</h2> | |
| <div id="pipeline" class="grid grid-cols-2 md:grid-cols-3 gap-2"> | |
| <!-- Preenchido via JS --> | |
| </div> | |
| <div class="mt-8 border-t border-green-900 pt-4"> | |
| <h2 class="text-sm font-bold mb-2">LOG DE EVENTOS</h2> | |
| <div id="event-log" class="text-[10px] h-48 overflow-y-auto opacity-70"> | |
| > Sistema inicializado... | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Evidence Modal (Simples) --> | |
| <div id="evidence-modal" class="fixed inset-0 bg-black bg-opacity-90 hidden flex items-center justify-center p-4"> | |
| <div class="terminal-card max-w-2xl w-full p-6 rounded relative"> | |
| <button onclick="closeEvidence()" class="absolute top-2 right-2 text-red-500 hover:text-red-300">X</button> | |
| <h2 class="text-xl font-bold mb-4 text-blue-400">EVIDENCE PACK GERADO</h2> | |
| <div id="evidence-content" class="space-y-4 text-sm overflow-y-auto max-h-[70vh]"> | |
| <!-- Preenchido via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const STAGES = [ | |
| "Ingestão", "Extração de Intenção", "Análise Semântica", | |
| "Normalização M=PSNOL", "Verificação de Coerência (ψ)", | |
| "Cálculo de Risco (CVaR)", "Ancoragem PoLE", "Simulação GHDL", | |
| "Avaliação Ω-GATE", "Geração de Código", "Refinamento Iterativo", | |
| "Auditoria On-chain", "Validação de Reuso", "Teste de Estresse", | |
| "Sincronização de Ledger", "Consolidação de Blocos", | |
| "Geração de Evidence Pack", "Replay de Segurança", "Finalização" | |
| ]; | |
| let isAuto = false; | |
| function initPipeline() { | |
| const container = document.getElementById('pipeline'); | |
| container.innerHTML = ''; | |
| STAGES.forEach((s, i) => { | |
| const div = document.createElement('div'); | |
| div.id = `stage-${i}`; | |
| div.className = 'stage-pending p-2 text-[9px] rounded transition-all'; | |
| div.innerText = `${i+1}. ${s}`; | |
| container.appendChild(div); | |
| }); | |
| } | |
| async function ingest() { | |
| const intent = document.getElementById('intent-input').value; | |
| const res = await fetch('/ingest', { | |
| method: 'POST', | |
| headers: {'Content-Type': 'application/json'}, | |
| body: JSON.stringify({intent}) | |
| }); | |
| const data = await res.json(); | |
| log(`MNB Criado: ${data.mnb_id}`); | |
| initPipeline(); | |
| updateStatus(); | |
| } | |
| async function advance() { | |
| const res = await fetch('/advance', {method: 'POST'}); | |
| const data = await res.json(); | |
| if (data.status === "FINISHED") { | |
| log("Pipeline finalizado."); | |
| isAuto = false; | |
| return; | |
| } | |
| log(`Estágio ${data.stage_index + 1} concluído: ${data.stage_name} (Ω: ${data.omega})`); | |
| updateStatus(); | |
| } | |
| async function autoAdvance() { | |
| isAuto = !isAuto; | |
| document.getElementById('auto-btn').classList.toggle('bg-green-900'); | |
| while(isAuto) { | |
| await advance(); | |
| await new Promise(r => setTimeout(r, 800)); | |
| const statusRes = await fetch('/status'); | |
| const statusData = await statusRes.json(); | |
| if (statusData.current_stage >= statusData.stages_count) break; | |
| } | |
| } | |
| async function updateStatus() { | |
| const res = await fetch('/status'); | |
| const data = await res.json(); | |
| if (!data.active) return; | |
| document.getElementById('ledger-hash').innerText = `LEDGER: ${data.ledger_hash}`; | |
| // Atualizar Pipeline | |
| for(let i=0; i<data.stages_count; i++) { | |
| const el = document.getElementById(`stage-${i}`); | |
| if (i < data.current_stage) { | |
| el.className = 'stage-done p-2 text-[9px] rounded bg-green-900 bg-opacity-20'; | |
| } else if (i === data.current_stage) { | |
| el.className = 'stage-active p-2 text-[9px] rounded animate-pulse'; | |
| } | |
| } | |
| // Atualizar Métricas | |
| if (data.history.length > 0) { | |
| const last = data.history[data.history.length - 1]; | |
| document.getElementById('metrics-panel').classList.remove('hidden'); | |
| document.getElementById('metrics-content').innerHTML = ` | |
| <div class="flex justify-between"><span>PSI (ψ):</span> <span>${last.metrics.psi}</span></div> | |
| <div class="flex justify-between"><span>THETA (θ̂):</span> <span>${last.metrics.theta_hat}</span></div> | |
| <div class="flex justify-between"><span>CVAR:</span> <span>${last.metrics.cvar}</span></div> | |
| <div class="flex justify-between"><span>POLE:</span> <span>${last.metrics.pole}</span></div> | |
| <div class="mt-2 pt-2 border-t border-green-900 text-xs font-bold flex justify-between"> | |
| <span>Ω FINAL:</span> <span class="text-white">${last.omega}</span> | |
| </div> | |
| <div class="text-[8px] opacity-50 mt-1">STATUS: ${last.status}</div> | |
| `; | |
| } | |
| } | |
| async function generateEvidence() { | |
| const res = await fetch('/evidence'); | |
| const data = await res.json(); | |
| const content = document.getElementById('evidence-content'); | |
| content.innerHTML = ` | |
| <div class="p-3 bg-gray-900 rounded border border-blue-900"> | |
| <p class="text-[10px] opacity-50">HASH: ${data.pack_hash}</p> | |
| </div> | |
| ${Object.entries(data.blocks).map(([k, v]) => ` | |
| <div> | |
| <h3 class="text-blue-400 font-bold text-xs underline">${k}</h3> | |
| <p class="text-xs mt-1 text-gray-300">${v}</p> | |
| </div> | |
| `).join('')} | |
| <div class="pt-4 border-t border-blue-900 text-[10px] opacity-50"> | |
| LEDGER PROOF: ${data.ledger_hash} | |
| </div> | |
| `; | |
| document.getElementById('evidence-modal').classList.remove('hidden'); | |
| } | |
| function closeEvidence() { | |
| document.getElementById('evidence-modal').classList.add('hidden'); | |
| } | |
| function log(msg) { | |
| const logEl = document.getElementById('event-log'); | |
| logEl.innerHTML += `<div>> ${msg}</div>`; | |
| logEl.scrollTop = logEl.scrollHeight; | |
| } | |
| initPipeline(); | |
| setInterval(updateStatus, 2000); | |
| </script> | |
| </body> | |
| </html> | |