Janady13/ai-brain-core / frontend/index.html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8" /> 5 <title>AGI Architecture — Interactive Diagram</title> 6 <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> 7 <style> 8 body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #0d1117; color: #c9d1d9; } 9 .container { max-width: 1200px; margin: auto; } 10 .header { text-align: center; padding: 20px; background: #161b22; border-radius: 12px; margin-bottom: 20px; } 11 .mermaid { background: #161b22; padding: 20px; border-radius: 12px; } 12 .controls { text-align: center; margin: 20px 0; } 13 button { background: #238636; color: white; border: none; padding: 10px 20px; margin: 5px; border-radius: 6px; cursor: pointer; } 14 button:hover { background: #2ea043; } 15 .info { margin-top: 20px; padding: 15px; background: #161b22; border-radius: 8px; display: none; } 16 .info.active { display: block; } 17 </style> 18</head> 19<body> 20 <div class="container"> 21 <div class="header"> 22 <h1>AGI Architecture — Interactive Diagram</h1> 23 <p>Click any node to explore. <strong>9.2 KB. Real. On-device.</strong></p> 24 </div> 25 26 <div class="controls"> 27 <button onclick="showView('full')">Full System</button> 28 <button onclick="showView('ingest')">Ingestion</button> 29 <button onclick="showView('memory')">Memory & Context</button> 30 <button onclick="showView('reason')">Reasoning</button> 31 <button onclick="showView('action')">Actions</button> 32 <button onclick="reset()">Reset</button> 33 </div> 34 35 <div class="mermaid" id="diagram"></div> 36 37 <div id="info" class="info"></div> 38 </div> 39 40 <script> 41 mermaid.initialize({ 42 startOnLoad: false, 43 theme: 'dark', 44 flowchart: { useMaxWidth: true, htmlLabels: true } 45 }); 46 47 const diagrams = { 48 full: ` 49 graph TD 50 A[User Input<br><small>"Write hello world"</small>] --> B[Input Processor<br><small>Clean + Tokenize</small>] 51 B --> C[Knowledge Base<br><small>150K Words + Actions</small>] 52 B --> D[Context Memory<br><small>64-turn buffer</small>] 53 C --> E[Scoring Engine<br><small>Energy + Context + Recency</small>] 54 D --> E 55 E --> F{Natural Response?} 56 F -->|Yes| G[Response Generator<br><small>"Here's your code:"</small>] 57 F -->|No| H[Action Executor<br><small>fork() + execve()</small>] 58 G --> I[Output<br><small>AGI: Done.</small>] 59 H --> I 60 I --> J[Memory Update<br><small>Store turn</small>] 61 J --> D 62 click A showInfo "User speaks in natural language" 63 click B showInfo "Normalizes input: lowercase, remove punctuation" 64 click C showInfo "Static array of 150K+ English words + learned commands" 65 click D showInfo "Circular buffer of last 64 turns (user + AGI)" 66 click E showInfo "Score = energy + context boost + recency" 67 click F showInfo "Decides: respond or act" 68 click G showInfo "Generates human-like text" 69 click H showInfo "Executes shell command in $HOME/agi_workspace" 70 click I showInfo "Prints to terminal" 71 click J showInfo "Learns from conversation" 72 `, 73 74 ingest: ` 75 graph TD 76 A[File System<br><small>$HOME, Documents, Projects</small>] --> B[Directory Walker] 77 B --> C[Text Files] 78 C --> D[Tokenize<br><small>Split by space, punctuation</small>] 79 D --> E[Normalize<br><small>lowercase, clean</small>] 80 E --> F[Hash (FNV-1a)] 81 F --> G[Knowledge Base<br><small>Store phrase + energy=1</small>] 82 click A showInfo "Scans your personal files on startup" 83 click B showInfo "Recursively walks directories" 84 click C showInfo "Only reads .txt, .c, .py, etc." 85 click D showInfo "Splits on space, comma, newline" 86 click E showInfo "Converts to lowercase, removes symbols" 87 click F showInfo "64-bit FNV-1a hash for O(1) lookup" 88 click G showInfo "Builds internal dictionary from your data" 89 `, 90 91 memory: ` 92 graph TD 93 A[User: "Hello"] --> B[Memory Slot 0] 94 B --> C[AGI: "Hi there!"] 95 C --> D[Memory Slot 1] 96 D --> E[User: "Write code"] 97 E --> F[Memory Slot 2] 98 F --> G[AGI: "Here's your code"] 99 G --> H[Memory Slot 3] 100 H --> I[Circular Buffer<br><small>64 slots max</small>] 101 I --> J[Oldest dropped when full] 102 click A showInfo "User turn stored" 103 click C showInfo "AGI turn stored" 104 click I showInfo "Fixed 64-turn context window" 105 click J showInfo "FIFO: oldest turn removed" 106 `, 107 108 reason: ` 109 graph TD 110 A[Input: "compile hello"] --> B[Match: "compile"] 111 B --> C[Energy: 52] 112 C --> D[Context: "hello.c" in memory<br>+100 boost] 113 D --> E[Recency: last used 10 ticks ago<br>+10] 114 E --> F[Total Score: 162] 115 F --> G[Highest Score → Selected] 116 G --> H[Action: "gcc -o hello hello.c && ./hello"] 117 click A showInfo "Input matched against knowledge" 118 click B showInfo "Base energy from usage" 119 click C showInfo "Context boost if phrase in memory" 120 click E showInfo "Recency boost favors recent knowledge" 121 click F showInfo "Winner-takes-all" 122 click H showInfo "Action executed" 123 `, 124 125 action: ` 126 graph TD 127 A[Command: "echo '...' > hello.c"] --> B[fork()] 128 B --> C[Child Process] 129 C --> D[chdir($HOME/agi_workspace)] 130 D --> E[execl("/bin/sh", "-c", cmd)] 131 E --> F[OS runs command] 132 F --> G[waitpid() in parent] 133 G --> H{Success?} 134 H -->|Yes| I[AGI: All set!] 135 H -->|No| J[AGI: Hmm, that didn't work.] 136 click A showInfo "Command from knowledge base" 137 click B showInfo "Creates isolated child" 138 click C showInfo "Sandboxed in workspace" 139 click E showInfo "Runs via shell" 140 click G showInfo "Parent waits for result" 141 click I showInfo "Success message" 142 click J showInfo "Friendly error" 143 ` 144 }; 145 146 function showView(view) { 147 const code = diagrams[view]; 148 document.getElementById('diagram').innerHTML = ''; 149 mermaid.render('graphDiv', code, (svg) => { 150 document.getElementById('diagram').innerHTML = svg; 151 }); 152 } 153 154 function showInfo(text) { 155 document.getElementById('info').innerHTML = `<strong>Info:</strong> ${text}`; 156 document.getElementById('info').classList.add('active'); 157 } 158 159 function reset() { 160 document.getElementById('info').classList.remove('active'); 161 showView('full'); 162 } 163 164 // Initialize 165 mermaid.initialize({ startOnLoad: false }); 166 showView('full'); 167 </script> 168</body> 169</html> 170