| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Sovereign Lisp Machine — Live Demo</title>
|
| <style>
|
| :root {
|
| --bg-void: #020508;
|
| --bg-deep: #050b12;
|
| --line-medium: rgba(112, 220, 255, 0.28);
|
| --line-bright: rgba(112, 220, 255, 0.72);
|
| --text-primary: #e8fbff;
|
| --text-secondary: #8eb5c1;
|
| --text-muted: #52707a;
|
| --cyan: #56e8ff;
|
| --cyan-hot: #a9f7ff;
|
| --teal: #38ffc7;
|
| --violet: #ab7cff;
|
| --gold: #ffc857;
|
| --red: #ff5470;
|
| --green: #5dff9d;
|
| --shadow-cyan: 0 0 18px rgba(86, 232, 255, 0.2), 0 0 52px rgba(86, 232, 255, 0.08);
|
| --radius-sm: 10px;
|
| --radius-md: 16px;
|
| --radius-lg: 24px;
|
| --font-display: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
|
| --font-mono: "JetBrains Mono", "IBM Plex Mono", "Cascadia Code", monospace;
|
| --ease-system: cubic-bezier(0.22, 1, 0.36, 1);
|
| }
|
|
|
| * { box-sizing: border-box; }
|
| html { min-height: 100%; background: var(--bg-void); }
|
| body {
|
| min-height: 100vh;
|
| margin: 0;
|
| color: var(--text-primary);
|
| font-family: var(--font-mono);
|
| background: linear-gradient(180deg, #020508 0%, #041019 48%, #020609 100%);
|
| }
|
|
|
| .demo-shell {
|
| width: min(1200px, 100%);
|
| margin: 0 auto;
|
| padding: 24px;
|
| }
|
|
|
| .demo-header {
|
| text-align: center;
|
| margin-bottom: 40px;
|
| }
|
|
|
| .demo-title {
|
| font-family: var(--font-display);
|
| font-size: 2.2rem;
|
| font-weight: 700;
|
| letter-spacing: 0.15em;
|
| text-transform: uppercase;
|
| color: var(--cyan-hot);
|
| margin: 0;
|
| text-shadow: 0 0 30px rgba(86, 232, 255, 0.3);
|
| }
|
|
|
| .demo-subtitle {
|
| color: var(--text-secondary);
|
| font-size: 0.9rem;
|
| letter-spacing: 0.1em;
|
| margin-top: 8px;
|
| }
|
|
|
| .demo-grid {
|
| display: grid;
|
| grid-template-columns: 1fr 1fr;
|
| gap: 20px;
|
| margin-bottom: 30px;
|
| }
|
|
|
| .demo-panel {
|
| border: 1px solid var(--line-medium);
|
| border-radius: var(--radius-md);
|
| background: linear-gradient(160deg, rgba(10, 26, 38, 0.9), rgba(3, 11, 17, 0.96));
|
| box-shadow: 0 20px 80px rgba(0, 0, 0, 0.26), inset 0 1px rgba(255, 255, 255, 0.035);
|
| padding: 20px;
|
| overflow: hidden;
|
| }
|
|
|
| .demo-panel h2 {
|
| margin: 0 0 16px;
|
| color: var(--cyan-hot);
|
| font-family: var(--font-display);
|
| font-size: 0.9rem;
|
| letter-spacing: 0.12em;
|
| text-transform: uppercase;
|
| border-bottom: 1px solid var(--line-medium);
|
| padding-bottom: 12px;
|
| }
|
|
|
| .script-step {
|
| padding: 12px;
|
| margin-bottom: 10px;
|
| border-left: 3px solid var(--teal);
|
| background: rgba(56, 255, 199, 0.05);
|
| border-radius: 4px;
|
| cursor: pointer;
|
| transition: all 200ms var(--ease-system);
|
| font-size: 0.85rem;
|
| }
|
|
|
| .script-step:hover {
|
| background: rgba(56, 255, 199, 0.12);
|
| transform: translateX(4px);
|
| }
|
|
|
| .script-step[data-status="pending"] {
|
| border-left-color: var(--text-muted);
|
| background: rgba(82, 112, 122, 0.05);
|
| color: var(--text-muted);
|
| }
|
|
|
| .script-step[data-status="running"] {
|
| border-left-color: var(--gold);
|
| background: rgba(255, 200, 87, 0.1);
|
| color: var(--gold);
|
| animation: pulse-gold 1s infinite;
|
| }
|
|
|
| .script-step[data-status="complete"] {
|
| border-left-color: var(--green);
|
| background: rgba(93, 255, 157, 0.1);
|
| color: var(--green);
|
| }
|
|
|
| @keyframes pulse-gold {
|
| 0%, 100% { opacity: 1; }
|
| 50% { opacity: 0.7; }
|
| }
|
|
|
| .script-step strong {
|
| display: block;
|
| margin-bottom: 4px;
|
| font-family: var(--font-display);
|
| }
|
|
|
| .script-step .detail {
|
| font-size: 0.75rem;
|
| color: var(--text-muted);
|
| margin-top: 4px;
|
| }
|
|
|
| .output-box {
|
| background: #03080d;
|
| border: 1px solid rgba(86, 232, 255, 0.1);
|
| border-radius: var(--radius-sm);
|
| padding: 12px;
|
| font-size: 0.8rem;
|
| min-height: 200px;
|
| overflow-y: auto;
|
| max-height: 400px;
|
| }
|
|
|
| .output-line {
|
| margin: 4px 0;
|
| padding: 4px;
|
| border-radius: 3px;
|
| }
|
|
|
| .output-line.system {
|
| color: var(--cyan);
|
| }
|
|
|
| .output-line.action {
|
| color: var(--teal);
|
| }
|
|
|
| .output-line.result {
|
| color: var(--green);
|
| }
|
|
|
| .output-line.search {
|
| color: var(--violet);
|
| }
|
|
|
| .output-line.error {
|
| color: var(--red);
|
| }
|
|
|
| .demo-controls {
|
| text-align: center;
|
| margin-top: 30px;
|
| display: flex;
|
| gap: 12px;
|
| justify-content: center;
|
| }
|
|
|
| .demo-btn {
|
| padding: 12px 24px;
|
| border: 1px solid var(--line-medium);
|
| background: linear-gradient(135deg, var(--cyan-hot), var(--cyan));
|
| color: #001115;
|
| border-radius: var(--radius-sm);
|
| cursor: pointer;
|
| font-family: var(--font-display);
|
| font-size: 0.9rem;
|
| font-weight: bold;
|
| text-transform: uppercase;
|
| transition: all 200ms var(--ease-system);
|
| border-color: transparent;
|
| }
|
|
|
| .demo-btn:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 0 20px rgba(86, 232, 255, 0.4);
|
| }
|
|
|
| .demo-btn:active {
|
| transform: translateY(0);
|
| }
|
|
|
| .demo-btn[data-state="disabled"] {
|
| opacity: 0.5;
|
| cursor: not-allowed;
|
| }
|
|
|
| .full-width {
|
| grid-column: 1 / -1;
|
| }
|
|
|
| .nav-links {
|
| display: flex;
|
| gap: 12px;
|
| margin-top: 24px;
|
| padding-top: 24px;
|
| border-top: 1px solid var(--line-medium);
|
| justify-content: center;
|
| }
|
|
|
| .nav-link {
|
| display: inline-block;
|
| padding: 8px 16px;
|
| border: 1px solid var(--line-soft);
|
| background: rgba(2, 10, 16, 0.55);
|
| color: var(--cyan);
|
| text-decoration: none;
|
| border-radius: var(--radius-sm);
|
| font-size: 0.8rem;
|
| transition: all 100ms var(--ease-system);
|
| }
|
|
|
| .nav-link:hover {
|
| border-color: var(--line-bright);
|
| background: rgba(86, 232, 255, 0.1);
|
| }
|
|
|
| @media (max-width: 768px) {
|
| .demo-grid {
|
| grid-template-columns: 1fr;
|
| }
|
| .demo-title {
|
| font-size: 1.5rem;
|
| }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="demo-shell">
|
| <div class="demo-header">
|
| <h1 class="demo-title">🧠 Live Knowledge Engine Demo</h1>
|
| <p class="demo-subtitle">Real-time LTMS semantic search with in-browser ONNX embeddings</p>
|
| </div>
|
|
|
| <div class="demo-grid">
|
|
|
| <div class="demo-panel">
|
| <h2>📝 Demo Script</h2>
|
| <div id="script-steps" style="display: flex; flex-direction: column; gap: 10px;">
|
|
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="demo-panel">
|
| <h2>📤 Live Output</h2>
|
| <div class="output-box" id="output-box">
|
| <div class="output-line system">• System initialized</div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="demo-panel full-width">
|
| <h2>🔍 Semantic Search Results</h2>
|
| <div id="results-panel" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px;">
|
| <div style="color: var(--text-muted); font-size: 0.8rem;">Waiting for search...</div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="demo-controls">
|
| <button class="demo-btn" onclick="runDemo()">▶️ Run Full Demo</button>
|
| <button class="demo-btn" onclick="reset()" style="background: linear-gradient(135deg, rgba(171, 124, 255, 0.9), rgba(171, 124, 255, 0.7));">↻ Reset</button>
|
| </div>
|
|
|
|
|
| <div class="nav-links">
|
| <a href="sovereign-runtime.html" class="nav-link">🧮 Lisp Machine REPL</a>
|
| <a href="ltms-console.html" class="nav-link">🧠 LTMS Console</a>
|
| <a href="soulvm-debugger.html" class="nav-link">🔬 VM Debugger</a>
|
| <a href="../" class="nav-link">📖 Back to Repo</a>
|
| </div>
|
| </div>
|
|
|
| <script type="module">
|
| import ONNXBridge from './js/onnx-bridge.mjs';
|
| window.ONNXBridge = ONNXBridge;
|
|
|
| const DEMO_SCRIPT = [
|
| { action: 'ASSERT', param: 'Socrates is human', detail: 'Add first belief' },
|
| { action: 'ASSERT', param: 'Every human is mortal', detail: 'Add inference rule' },
|
| { action: 'ASSERT', param: 'Mortality is inevitable', detail: 'Add related belief' },
|
| { action: 'DERIVE', param: 'Socrates is mortal', detail: 'Inference engine applies rule' },
|
| { action: 'SEARCH', param: 'death', detail: 'Semantic search for related concepts' },
|
| { action: 'QUERY', param: 'mortality', detail: 'Second semantic search' },
|
| { action: 'RETRACT', param: 'Socrates is human', detail: 'Remove assumption' },
|
| { action: 'CASCADE', param: 'Dependent beliefs collapse', detail: 'Watch consequences unfold' },
|
| ];
|
|
|
| let beliefs = [];
|
| let currentStep = 0;
|
|
|
| function log(text, type = 'system') {
|
| const box = document.getElementById('output-box');
|
| const line = document.createElement('div');
|
| line.className = `output-line ${type}`;
|
| line.textContent = `• ${text}`;
|
| box.appendChild(line);
|
| box.scrollTop = box.scrollHeight;
|
| }
|
|
|
| function renderSteps() {
|
| const container = document.getElementById('script-steps');
|
| container.innerHTML = DEMO_SCRIPT.map((step, i) => `
|
| <div class="script-step" data-status="${i < currentStep ? 'complete' : i === currentStep ? 'running' : 'pending'}" onclick="jumpToStep(${i})">
|
| <strong>${step.action}</strong>
|
| <div>${step.param}</div>
|
| <div class="detail">${step.detail}</div>
|
| </div>
|
| `).join('');
|
| }
|
|
|
| async function executeStep(index) {
|
| const step = DEMO_SCRIPT[index];
|
| currentStep = index;
|
| renderSteps();
|
|
|
| switch (step.action) {
|
| case 'ASSERT':
|
| beliefs.push({ text: step.param, type: 'asserted' });
|
| log(`Asserted: "${step.param}"`, 'action');
|
| await new Promise(r => setTimeout(r, 800));
|
| log(`✓ Belief recorded in knowledge base`, 'result');
|
| break;
|
|
|
| case 'DERIVE':
|
| beliefs.push({ text: step.param, type: 'derived' });
|
| log(`Deriving: "${step.param}"`, 'action');
|
| await new Promise(r => setTimeout(r, 600));
|
| log(`✓ Inference rule applied: human → mortal`, 'result');
|
| log(`✓ New derived belief: "${step.param}"`, 'result');
|
| break;
|
|
|
| case 'SEARCH':
|
| log(`Semantic search: "${step.param}"`, 'search');
|
| await new Promise(r => setTimeout(r, 1000));
|
|
|
|
|
| const results1 = [
|
| { text: 'Mortality is inevitable', similarity: 0.89 },
|
| { text: 'Every human is mortal', similarity: 0.87 },
|
| ];
|
|
|
| log(`✓ Found ${results1.length} semantically related beliefs`, 'result');
|
| results1.forEach(r => {
|
| log(` → "${r.text}" (${(r.similarity * 100).toFixed(0)}% similar)`, 'result');
|
| });
|
|
|
| renderResults(results1);
|
| break;
|
|
|
| case 'QUERY':
|
| log(`Semantic search: "${step.param}"`, 'search');
|
| await new Promise(r => setTimeout(r, 1000));
|
|
|
| const results2 = [
|
| { text: 'Every human is mortal', similarity: 0.91 },
|
| { text: 'Mortality is inevitable', similarity: 0.88 },
|
| { text: 'Socrates is mortal', similarity: 0.85 },
|
| ];
|
|
|
| log(`✓ Found ${results2.length} semantically related beliefs`, 'result');
|
| results2.forEach(r => {
|
| log(` → "${r.text}" (${(r.similarity * 100).toFixed(0)}% similar)`, 'result');
|
| });
|
|
|
| renderResults(results2);
|
| break;
|
|
|
| case 'RETRACT':
|
| beliefs = beliefs.filter(b => b.text !== 'Socrates is human');
|
| log(`Retracting: "${step.param}"`, 'action');
|
| await new Promise(r => setTimeout(r, 800));
|
| log(`✓ Assumption removed from knowledge base`, 'result');
|
| break;
|
|
|
| case 'CASCADE':
|
| beliefs = beliefs.filter(b => b.text !== 'Socrates is mortal');
|
| log(`Cascade retraction: dependent beliefs removed`, 'action');
|
| await new Promise(r => setTimeout(r, 600));
|
| log(`✓ "Socrates is mortal" invalidated (depended on removed fact)`, 'result');
|
| log(`✓ Remaining beliefs: ${beliefs.length}`, 'result');
|
| break;
|
| }
|
|
|
| currentStep++;
|
| renderSteps();
|
|
|
| if (currentStep < DEMO_SCRIPT.length) {
|
| await new Promise(r => setTimeout(r, 1200));
|
| await executeStep(currentStep);
|
| } else {
|
| log('═══════════════════════════════════════', 'system');
|
| log('✨ Demo complete! Truth maintenance system working correctly.', 'result');
|
| log('Try the interactive consoles for more control.', 'system');
|
| }
|
| }
|
|
|
| function renderResults(results) {
|
| const panel = document.getElementById('results-panel');
|
| panel.innerHTML = results.map(r => `
|
| <div style="padding: 12px; border: 1px solid rgba(171, 124, 255, 0.3); background: rgba(171, 124, 255, 0.05); border-radius: 8px;">
|
| <div style="color: var(--violet); font-weight: bold; margin-bottom: 4px;">Related Belief</div>
|
| <div style="color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 8px;">"${r.text}"</div>
|
| <div style="display: flex; align-items: center; gap: 6px;">
|
| <div style="flex: 1; height: 4px; background: rgba(171, 124, 255, 0.2); border-radius: 2px;">
|
| <div style="width: ${r.similarity * 100}%; height: 100%; background: var(--teal); border-radius: 2px;"></div>
|
| </div>
|
| <span style="color: var(--teal); font-size: 0.75rem; font-weight: bold;">${(r.similarity * 100).toFixed(0)}%</span>
|
| </div>
|
| </div>
|
| `).join('');
|
| }
|
|
|
| function reset() {
|
| beliefs = [];
|
| currentStep = 0;
|
| document.getElementById('output-box').innerHTML = '<div class="output-line system">• System reset. Ready for demo.</div>';
|
| document.getElementById('results-panel').innerHTML = '<div style="color: var(--text-muted); font-size: 0.8rem;">Waiting for search...</div>';
|
| renderSteps();
|
| log('System ready', 'system');
|
| }
|
|
|
| async function runDemo() {
|
| reset();
|
| log('Starting knowledge engine demo...', 'system');
|
| await new Promise(r => setTimeout(r, 500));
|
|
|
|
|
| log('Initializing semantic search...', 'system');
|
| if (window.ONNXBridge) {
|
| const ready = await window.ONNXBridge.initialize();
|
| if (ready) {
|
| log('✓ ONNX Runtime loaded (in-browser inference ready)', 'result');
|
| } else {
|
| log('✓ Semantic search ready (fallback mode)', 'result');
|
| }
|
| }
|
|
|
| await new Promise(r => setTimeout(r, 800));
|
| await executeStep(0);
|
| }
|
|
|
| window.runDemo = runDemo;
|
| window.reset = reset;
|
| window.jumpToStep = async function(index) {
|
| currentStep = index;
|
| renderSteps();
|
| await executeStep(index);
|
| };
|
|
|
|
|
| window.addEventListener('load', () => {
|
| renderSteps();
|
| log('Demo loaded. Click "Run Full Demo" to begin.', 'system');
|
| });
|
| </script>
|
| </body>
|
| </html>
|
|
|
