Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SOVEREIGN SYSTEM // WEIGHT WALKER</title> | |
| <style> | |
| /* MODERN CSS RESET & VARIABLES */ | |
| :root { | |
| --bg-dark: #050505; | |
| --bg-panel: #0a0a0a; | |
| --text-main: #e0e0e0; | |
| --text-dim: #666; | |
| --accent-primary: #00f2ff; /* Cyan - Activation */ | |
| --accent-secondary: #ff00ff; /* Magenta - Path */ | |
| --accent-highlight: #ffd700; /* Gold - Max Weight */ | |
| --border: #1a1a1a; | |
| --font-tech: 'Courier New', Courier, monospace; | |
| --font-ui: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; | |
| } | |
| * { | |
| box-sizing: box-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| font-family: var(--font-ui); | |
| height: 100vh; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* HEADER */ | |
| header { | |
| padding: 1rem 2rem; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: rgba(5, 5, 5, 0.9); | |
| z-index: 10; | |
| } | |
| .brand { | |
| font-family: var(--font-tech); | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| font-size: 1.2rem; | |
| } | |
| .brand span { | |
| color: var(--accent-primary); | |
| } | |
| .header-link { | |
| font-size: 0.8rem; | |
| color: var(--text-dim); | |
| text-decoration: none; | |
| border: 1px solid var(--border); | |
| padding: 4px 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .header-link:hover { | |
| border-color: var(--accent-primary); | |
| color: var(--accent-primary); | |
| box-shadow: 0 0 10px rgba(0, 242, 255, 0.2); | |
| } | |
| /* MAIN GRID */ | |
| main { | |
| display: grid; | |
| grid-template-columns: 300px 1fr 350px; | |
| grid-template-rows: 1fr 200px; | |
| height: 100%; | |
| gap: 1px; | |
| background-color: var(--border); /* Grid lines */ | |
| } | |
| /* PANELS */ | |
| .panel { | |
| background-color: var(--bg-panel); | |
| padding: 1.5rem; | |
| overflow: hidden; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .panel-title { | |
| font-family: var(--font-tech); | |
| font-size: 0.8rem; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| margin-bottom: 1rem; | |
| border-bottom: 1px solid var(--border); | |
| padding-bottom: 0.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| /* LEFT COLUMN: WEIGHT ANALYSIS */ | |
| .weight-analyzer { | |
| grid-column: 1; | |
| grid-row: 1 / 3; /* Spans full height */ | |
| border-right: 1px solid var(--border); | |
| } | |
| .weight-box { | |
| margin-bottom: 2rem; | |
| border: 1px solid var(--border); | |
| padding: 1rem; | |
| position: relative; | |
| } | |
| .weight-bar-container { | |
| height: 60px; | |
| width: 100%; | |
| background: #111; | |
| margin-top: 10px; | |
| display: flex; | |
| align-items: flex-end; | |
| padding: 5px; | |
| gap: 1px; | |
| } | |
| .weight-bar { | |
| flex: 1; | |
| background: #333; | |
| transition: height 0.3s ease, background 0.3s ease; | |
| } | |
| .weight-bar.active { | |
| background: var(--accent-primary); | |
| } | |
| .weight-bar.max { | |
| background: var(--accent-highlight); | |
| box-shadow: 0 0 10px var(--accent-highlight); | |
| } | |
| .token-display { | |
| font-family: var(--font-tech); | |
| font-size: 1.2rem; | |
| color: var(--text-main); | |
| margin-bottom: 0.5rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .meta-data { | |
| font-family: var(--font-tech); | |
| font-size: 0.7rem; | |
| color: var(--text-dim); | |
| margin-top: 0.5rem; | |
| } | |
| /* CENTER COLUMN: STREAM */ | |
| .stream-view { | |
| grid-column: 2; | |
| grid-row: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| background: radial-gradient(circle at center, #111 0%, #050505 100%); | |
| } | |
| .output-terminal { | |
| font-family: var(--font-tech); | |
| font-size: 1.5rem; | |
| line-height: 2rem; | |
| color: var(--text-main); | |
| max-width: 800px; | |
| text-align: center; | |
| min-height: 200px; | |
| padding: 2rem; | |
| } | |
| .output-token { | |
| opacity: 0; | |
| animation: fadeIn 0.5s ease forwards; | |
| display: inline-block; | |
| padding: 2px 5px; | |
| border-radius: 3px; | |
| margin: 0 2px; | |
| } | |
| @keyframes fadeIn { | |
| to { opacity: 1; } | |
| } | |
| .controls { | |
| grid-column: 2; | |
| grid-row: 2; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| button { | |
| background: transparent; | |
| border: 1px solid var(--text-dim); | |
| color: var(--text-main); | |
| padding: 10px 30px; | |
| font-family: var(--font-tech); | |
| cursor: pointer; | |
| text-transform: uppercase; | |
| transition: all 0.2s; | |
| } | |
| button:hover { | |
| border-color: var(--accent-primary); | |
| color: var(--accent-primary); | |
| background: rgba(0, 242, 255, 0.1); | |
| } | |
| button.active { | |
| border-color: var(--accent-highlight); | |
| color: var(--accent-highlight); | |
| box-shadow: 0 0 15px rgba(255, 217, 0, 0.2); | |
| } | |
| /* RIGHT COLUMN: PATH MAP */ | |
| .path-map { | |
| grid-column: 3; | |
| grid-row: 1 / 3; | |
| border-left: 1px solid var(--border); | |
| overflow-y: auto; | |
| } | |
| .path-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .path-node { | |
| background: #111; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 10px; | |
| font-family: var(--font-tech); | |
| font-size: 0.8rem; | |
| color: #444; | |
| border: 1px solid #222; | |
| transition: all 0.3s; | |
| } | |
| .path-node.current { | |
| border-color: var(--accent-primary); | |
| color: var(--accent-primary); | |
| background: rgba(0, 242, 255, 0.05); | |
| } | |
| .path-node.completed { | |
| border-color: var(--text-dim); | |
| color: var(--text-dim); | |
| } | |
| /* BOTTOM RIGHT: STATS */ | |
| .stats-panel { | |
| grid-column: 3; | |
| grid-row: 2; | |
| border-top: 1px solid var(--border); | |
| border-left: 1px solid var(--border); | |
| font-family: var(--font-tech); | |
| font-size: 0.8rem; | |
| padding: 1rem; | |
| } | |
| .stat-row { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-val { | |
| color: var(--accent-primary); | |
| } | |
| /* RESPONSIVE */ | |
| @media (max-width: 1000px) { | |
| main { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: auto; | |
| display: flex; | |
| flex-direction: column; | |
| height: auto; | |
| overflow-y: auto; | |
| } | |
| .weight-analyzer, | |
| .path-map { | |
| border: none; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .stream-view { | |
| min-height: 400px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="brand">SOVEREIGN<span>SYSTEM</span></div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="header-link">Built with anycoder</a> | |
| </header> | |
| <main> | |
| <!-- LEFT PANEL: WEIGHT ANALYZER --> | |
| <div class="panel weight-analyzer"> | |
| <div class="panel-title"> | |
| <span>Tensor Analysis</span> | |
| <span id="tensor-status">ID: 0</span> | |
| </div> | |
| <div class="weight-box"> | |
| <h3 id="current-token-name" style="font-size: 0.8rem; color: var(--text-dim);">TOKEN: BOS</h> | |
| <div class="token-display" id="token-display">[BOS]</div> | |
| <div class="meta-data"> | |
| <div>Max Activation: <span id="max-activation">0.00</span></span></div> | |
| <div>Target Index: <span id="target-index">0</span></span></div> | |
| </div> | |
| <div class="weight-bar-container" id="weight-bars"> | |
| <!-- Generated by JS --> | |
| </div> | |
| </div> | |
| <div style="margin-top: 2rem;"> | |
| <div class="panel-title">Model Logic</div> | |
| <div style="font-family: var(--font-tech); font-size: 0.8rem; line-height: 1.5; color: #888;"> | |
| <div>> Search `token_embd.weight`</div> | |
| <div>> Find Max Activation (v > best)</div> | |
| <div>> Avoid Self-Loops (i != current)</div> | |
| <div>> Traverse to EOS</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CENTER PANEL: STREAM --> | |
| <div class="panel stream-view"> | |
| <div class="panel-title" style="width: 100%; text-align: center;"> | |
| <span>Generated Sequence</span> | |
| </div> | |
| <div class="output-terminal" id="terminal"> | |
| <span style="color: #333;">Waiting for initialization...</span> | |
| </div> | |
| <div class="controls"> | |
| <button onclick="system.start()">Init Walk</button> | |
| <button onclick="system.reset()">Reset</button> | |
| </div> | |
| </div> | |
| <!-- RIGHT PANEL: PATH MAP & STATS --> | |
| <div class="panel path-map"> | |
| <div class="panel-title"> | |
| <span>Path History</span> | |
| <span id="step-count">STEPS: 0</span> | |
| </div> | |
| <div class="path-list" id="path-list"> | |
| <!-- Generated by JS --> | |
| </div> | |
| </div> | |
| <div class="panel stats-panel"> | |
| <div class="stat-row"> | |
| <span>Current Step:</span> | |
| <span class="stat-val" id="stat-step">0</span> | |
| </div> | |
| <div class="stat-row"> | |
| <span>Max Weight:</span> | |
| <span class="stat-val" id="stat-weight">0.0000</span> | |
| </div> | |
| <div class="stat-row"> | |
| <span>Next Token:</span> | |
| <span class="stat-val" id="stat-next">-</span> | |
| </div> | |
| <div class="stat-row"> | |
| <span>State:</span> | |
| <span class="stat-val" id="stat-state">READY</span> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| /** | |
| * SOVEREIGN SYSTEM - WEIGHT WALKER | |
| * Implements the logic from the Python script: | |
| * 1. Load Model (Simulated) | |
| * 2. Identify BOS/EOS | |
| * 3. Walk: Find max weight in current row -> move to that index. | |
| */ | |
| // --- CONSTANTS --- | |
| const MOCK_TOKENS = [ | |
| "<bos>", "<eos>", "the", "be", "to", "of", "and", "a", "in", "that", | |
| "have", "I", "it", "for", "not", "on", "with", "he", "as", "you", | |
| "do", "at", "this", "but", "his", "by", "from", "they", "we", "say", | |
| "her", "she", "or", "an", "will", "my", "one", "all", "would", "there", | |
| "their", "what", "so", "up", "out", "if", "about", "who", "get", "which", | |
| "go", "me", "when", "make", "can", "like", "time", "no", "just", "him", | |
| "know", "take", "people", "into", "year", "your", "good", "some", "could", | |
| "them", "see", "other", "than", "then", "now", "look", "only", "come", "its", | |
| "over", "think", "also", "back", "after", "use", "two", "how", "our", "work", | |
| "first", "well", "way", "even", "new", "want", "because", "any", "these", "give", | |
| "day", "most", "us", "is", "ing", "ed", "er", "tion", "ness", "ment" | |
| ]; | |
| const HIDDEN_DIM = 20; // Simulated hidden dimension size | |
| // --- SYSTEM LOGIC --- | |
| class SovereignSystem { | |
| constructor() { | |
| this.tokens = MOCK_TOKENS; | |
| this.vocabSize = this.tokens.length; | |
| this.bosId = 0; | |
| this.eosId = 1; | |
| this.currentId = this.bosId; | |
| this.pathIds = []; | |
| this.isRunning = false; | |
| this.ui = { | |
| terminal: document.getElementById('terminal'), | |
| tensorStatus: document.getElementById('tensor-status'), | |
| tokenDisplay: document.getElementById('token-display'), | |
| currentTokenName: document.getElementById('current-token-name'), | |
| maxActivation: document.getElementById('max-activation'), | |
| targetIndex: document.getElementById('target-index'), | |
| weightBars: document.getElementById('weight-bars'), | |
| pathList: document.getElementById('path-list'), | |
| stats: { | |
| step: document.getElementById('stat-step'), | |
| weight: document.getElementById('stat-weight'), | |
| next: document.getElementById('stat-next'), | |
| state: document.getElementById('stat-state'), | |
| stepsLabel: document.getElementById('step-count') | |
| } | |
| }; | |
| this.initWeightBars(); | |
| this.initPathList(); | |
| } | |
| initWeightBars() { | |
| this.ui.weightBars.innerHTML = ''; | |
| for(let i=0; i<HIDDEN_DIM; i++) { | |
| const bar = document.createElement('div'); | |
| bar.className = 'weight-bar'; | |
| bar.id = `wb-${i}`; | |
| this.ui.weightBars.appendChild(bar); | |
| } | |
| } | |
| initPathList() { | |
| this.ui.pathList.innerHTML = ''; | |
| } | |
| // Simulates loader.read_row(target_tensor, idx, hidden) | |
| // In a real app, this reads GGUF weights. Here we generate pseudo-random weights | |
| // but bias the "next" token to be the highest to simulate a valid path. | |
| getWeightRow(index) { | |
| const weights = []; | |
| for(let i=0; i<HIDDEN_DIM; i++) { | |
| // Random noise | |
| weights.push(Math.random() * 0.5); | |
| } | |
| // Bias a specific index to be the "winner" (simulating the trained connection) | |
| // If we are at BOS (0), let's bias 'the' (2). If at 'the', bias 'be' (3), etc. | |
| let nextIdx = (index + 2) % this.vocabSize; | |
| if (nextIdx === index) nextIdx = (index + 1) % this.vocabSize; // Avoid self loop | |
| weights[nextIdx] = 0.9 + (Math.random() * 0.1); // High activation | |
| return weights; | |
| } | |
| cleanToken(raw) { | |
| if (!raw) return ''; | |
| if (raw.startsWith('<') && raw.endsWith('>')) return ''; // Hide special tokens | |
| return raw.replace('Ċ', '\n').replace('ĉ', '\t'); | |
| } | |
| updateVisuals(weights, bestIdx, bestVal) { | |
| // 1. Update Token Info | |
| const tokenName = this.tokens[this.currentId]; | |
| this.ui.tensorStatus.innerText = `IDX: ${this.currentId}`; | |
| this.ui.tokenDisplay.innerText = tokenName; | |
| this.ui.currentTokenName.innerText = `TOKEN: ${tokenName}`; | |
| this.ui.maxActivation.innerText = bestVal.toFixed(4); | |
| this.ui.targetIndex.innerText = bestIdx; | |
| // 2. Update Weight Bars | |
| for(let i=0; i<HIDDEN_DIM; i++) { | |
| const bar = document.getElementById(`wb-${i}`); | |
| const height = Math.max(5, weights[i] * 100); // Scale for visual | |
| bar.style.height = `${height}%`; | |
| bar.classList.remove('active', 'max'); | |
| if (i === bestIdx) { | |
| bar.classList.add('max'); | |
| } else if (weights[i] > 0.3) { | |
| bar.classList.add('active'); | |
| } | |
| } | |
| // 3. Update Stats | |
| this.ui.stats.weight.innerText = bestVal.toFixed(4); | |
| this.ui.stats.next.innerText = this.tokens[bestIdx]; | |
| } | |
| addPathNode(id, isCurrent = false) { | |
| const node = document.createElement('div'); | |
| node.className = `path-node ${isCurrent ? 'current' : 'completed'}`; | |
| const token = this.tokens[id]; | |
| node.innerHTML = `<span>${id}</span> <span>${token}</span>`; | |
| this.ui.pathList.appendChild(node); | |
| // Keep scroll at bottom | |
| this.ui.pathList.scrollTop = this.ui.pathList.scrollHeight; | |
| } | |
| async start() { | |
| if (this.isRunning) return; | |
| this.isRunning = true; | |
| this.ui.terminal.innerHTML = ''; | |
| this.ui.pathList.innerHTML = ''; | |
| this.pathIds = []; | |
| this.currentId = this.bosId; | |
| // Initial BOS setup | |
| this.addPathNode(this.currentId, true); | |
| let steps = 0; | |
| const maxSteps = 15; // Limit for demo visualization | |
| while (steps < maxSteps && this.currentId !== this.eosId) { | |
| steps++; | |
| // 1. Get Logic (Simulate reading GGUF row) | |
| const weights = this.getWeightRow(this.currentId); | |
| // 2. Find Max Weight (Python logic: if i != current and v > best_val) | |
| let bestVal = -Infinity; | |
| let bestIdx = -1; | |
| for (let i = 0; i < weights.length; i++) { | |
| if (i !== this.currentId && weights[i] > bestVal) { | |
| bestVal = weights[i]; | |
| bestIdx = i; | |
| } | |
| } | |
| // Fallback if stuck (Python logic) | |
| if (bestIdx === -1 || bestVal === 0.0) { | |
| bestIdx = (this.currentId + 1) % this.vocabSize; | |
| bestVal = 0.0; | |
| } | |
| // 3. Update UI | |
| this.ui.stats.step.innerText = steps; | |
| this.ui.stats.stepsLabel.innerText = `STEPS: ${steps}`; | |
| this.ui.stats.state.innerText = "PROCESSING"; | |
| this.updateVisuals(weights, bestIdx, bestVal); | |
| // 4. Advance | |
| const nextId = bestIdx; | |
| this.pathIds.push(this.currentId); | |
| this.currentId = nextId; | |
| // 5. Render Token to Terminal | |
| const tokenStr = this.cleanToken(this.tokens[this.currentId]); | |
| if (tokenStr) { | |
| const span = document.createElement('span'); | |
| span.className = 'output-token'; | |
| span.innerText = tokenStr + " "; | |
| span.style.color = '#00f2ff'; | |
| this.ui.terminal.appendChild(span); | |
| } | |
| // 6. Update Path List | |
| // Remove 'current' class from previous, add to new | |
| const nodes = this.ui.pathList.querySelectorAll('.path-node'); | |
| if(nodes.length > 0) nodes[nodes.length-1].classList.remove('current'); | |
| this.addPathNode(this.currentId, true); | |
| // Artificial delay | |
| await new Promise(r => setTimeout(r, 800)); | |
| } | |
| this.isRunning = false; | |
| this.ui.stats.state.innerText = "COMPLETED"; | |
| if (this.currentId === this.eosId) { | |
| const span = document.createElement('span'); | |
| span.className = 'output-token'; | |
| span.innerText = "[EOS]"; | |
| span.style.color = '#ff00ff'; | |
| this.ui.terminal.appendChild(span); | |
| } | |
| } | |
| reset() { | |
| this.isRunning = false; | |
| this.pathIds = []; | |
| this.currentId = this.bosId; | |
| this.ui.terminal.innerHTML = '<span style="color: #333;">System Reset. Ready.</span>'; | |
| this.ui.stats.step.innerText = "0"; | |
| this.ui.stats.state.innerText = "READY"; | |
| this.initPathList(); | |
| this.initWeightBars(); | |
| this.ui.tokenDisplay.innerText = "[BOS]"; | |
| } | |
| } | |
| // Initialize | |
| const system = new SovereignSystem(); | |
| </script> | |
| </body> | |
| </html> |