File size: 15,084 Bytes

119e586

<!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">
      <!-- DEMO SCRIPT -->
      <div class="demo-panel">
        <h2>📝 Demo Script</h2>
        <div id="script-steps" style="display: flex; flex-direction: column; gap: 10px;">
          <!-- Generated by JS -->
        </div>
      </div>

      <!-- LIVE OUTPUT -->
      <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>

    <!-- FULL-WIDTH RESULTS -->
    <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>

    <!-- CONTROLS -->
    <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>

    <!-- NAVIGATION -->
    <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));



          // Simulate semantic search

          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));



      // Initialize ONNX

      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);

    };



    // Initialize on load

    window.addEventListener('load', () => {

      renderSteps();

      log('Demo loaded. Click "Run Full Demo" to begin.', 'system');

    });

  </script>
</body>
</html>