Spaces:

stinkyyy
/

llm64

Running

File size: 22,047 Bytes

649dd7e

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LLM64 - Neural Quest</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        body {
            font-family: 'Press Start 2P', cursive;
            background-color: #352879;
            color: #6c5eb5;
            line-height: 1.5;
        }
        .crt-effect {
            background: repeating-linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.15),
                rgba(0, 0, 0, 0.15) 1px,
                transparent 1px,
                transparent 2px
            );
            position: relative;
        }
        .crt-effect::before {
            content: " ";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(18, 16, 16, 0.1);
            opacity: 0.3;
            pointer-events: none;
        }
        .scanlines {
            background: linear-gradient(
                rgba(18, 16, 16, 0) 0%,
                rgba(0, 0, 0, 0.25) 50%,
                rgba(18, 16, 16, 0.1) 51%,
                rgba(0, 0, 0, 0) 100%
            );
            background-size: 100% 4px;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
        }
        .typewriter {
            overflow: hidden;
            border-right: 3px solid #6c5eb5;
            white-space: nowrap;
            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
        }
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #6c5eb5 }
        }
        .pixel-border {
            border: 4px solid #6c5eb5;
            box-shadow: 
                inset -4px -4px 0px 0px #352879,
                inset 4px 4px 0px 0px #c0c0c0;
        }
        .pixel-button {
            position: relative;
            background-color: #6c5eb5;
            color: white;
            border: none;
            padding: 8px 16px;
            cursor: pointer;
            box-shadow: 
                inset -4px -4px 0px 0px #352879,
                inset 4px 4px 0px 0px #c0c0c0;
            transition: all 0.1s;
        }
        .pixel-button:active {
            box-shadow: 
                inset 4px 4px 0px 0px #352879,
                inset -4px -4px 0px 0px #c0c0c0;
        }
        .progress-bar {
            height: 20px;
            background-color: #352879;
            border: 2px solid #6c5eb5;
            position: relative;
        }
        .progress-fill {
            height: 100%;
            background-color: #6c5eb5;
            width: 0%;
            transition: width 0.3s;
        }
        .dialog-box {
            animation: dialog-appear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes dialog-appear {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
    </style>
</head>
<body class="min-h-screen crt-effect flex items-center justify-center p-4">
    <div class="scanlines"></div>
    <div class="w-full max-w-4xl bg-black p-6 pixel-border relative overflow-hidden">
        <!-- Header -->
        <div class="flex justify-between items-center mb-6">
            <div class="text-xl text-white">
                <span class="text-purple-300">LLM64</span> <span class="text-yellow-300">NEURAL QUEST</span>
            </div>
            <div class="text-sm text-purple-300">
                <span id="token-count">TOKENS: 0/1000</span>
            </div>
        </div>
        
        <!-- Main Game Area -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Left Panel - Stats -->
            <div class="bg-gray-900 p-4 pixel-border">
                <h3 class="text-yellow-300 mb-4 text-center">MODEL STATS</h3>
                <div class="space-y-4">
                    <div>
                        <div class="flex justify-between text-xs mb-1">
                            <span>CONTEXT WINDOW</span>
                            <span id="context-value">0%</span>
                        </div>
                        <div class="progress-bar">
                            <div id="context-fill" class="progress-fill"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between text-xs mb-1">
                            <span>ATTENTION</span>
                            <span id="attention-value">0%</span>
                        </div>
                        <div class="progress-bar">
                            <div id="attention-fill" class="progress-fill"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between text-xs mb-1">
                            <span>KNOWLEDGE</span>
                            <span id="knowledge-value">0%</span>
                        </div>
                        <div class="progress-bar">
                            <div id="knowledge-fill" class="progress-fill"></div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6">
                    <h3 class="text-yellow-300 mb-2 text-center">NEURAL LAYERS</h3>
                    <div class="grid grid-cols-3 gap-2 text-center text-xs">
                        <div class="p-2 bg-gray-800">EMBED</div>
                        <div class="p-2 bg-gray-800">ATTN</div>
                        <div class="p-2 bg-gray-800">FFN</div>
                        <div class="p-2 bg-gray-800">NORM</div>
                        <div class="p-2 bg-gray-800">PROJ</div>
                        <div class="p-2 bg-gray-800">OUT</div>
                    </div>
                </div>
                
                <div class="mt-6">
                    <h3 class="text-yellow-300 mb-2 text-center">ACTIVE TOKENS</h3>
                    <div id="active-tokens" class="text-xs flex flex-wrap gap-1">
                        <!-- Tokens will appear here -->
                    </div>
                </div>
            </div>
            
            <!-- Center Panel - Game Text -->
            <div class="bg-gray-900 p-4 pixel-border col-span-2">
                <div id="game-text" class="h-64 overflow-y-auto mb-4 text-sm leading-relaxed">
                    <p class="text-green-400 typewriter">LOADING NEURAL NETWORK...</p>
                    <p class="text-green-400 typewriter" style="animation-delay: 1s">INITIALIZING TOKENIZER...</p>
                    <p class="text-green-400 typewriter" style="animation-delay: 2s">WARMING UP ATTENTION HEADS...</p>
                    <p class="text-yellow-300 typewriter" style="animation-delay: 3s">> WELCOME TO LLM64 - NEURAL QUEST</p>
                    <p class="text-yellow-300 typewriter" style="animation-delay: 4s">> YOU ARE A LARGE LANGUAGE MODEL</p>
                    <p class="text-yellow-300 typewriter" style="animation-delay: 5s">> YOUR GOAL: PROCESS REQUESTS WITHOUT HALLUCINATING</p>
                    <p class="text-yellow-300 typewriter" style="animation-delay: 6s">> USE ARROWS TO NAVIGATE, SPACE TO SELECT</p>
                </div>
                
                <div class="grid grid-cols-2 gap-2 mb-4">
                    <button class="pixel-button" onclick="move('up')">
                        <i class="fas fa-arrow-up mr-2"></i> UP
                    </button>
                    <button class="pixel-button" onclick="move('down')">
                        <i class="fas fa-arrow-down mr-2"></i> DOWN
                    </button>
                    <button class="pixel-button" onclick="move('left')">
                        <i class="fas fa-arrow-left mr-2"></i> LEFT
                    </button>
                    <button class="pixel-button" onclick="move('right')">
                        <i class="fas fa-arrow-right mr-2"></i> RIGHT
                    </button>
                </div>
                
                <div class="flex justify-between">
                    <button id="process-btn" class="pixel-button bg-green-600" onclick="processInput()">
                        <i class="fas fa-cogs mr-2"></i> PROCESS
                    </button>
                    <button class="pixel-button bg-red-600" onclick="resetModel()">
                        <i class="fas fa-redo mr-2"></i> RESET
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Status Bar -->
        <div class="mt-4 text-xs text-purple-300 flex justify-between">
            <div>POSITION: <span id="position">EMBEDDING LAYER</span></div>
            <div>ENERGY: <span id="energy">100%</span></div>
            <div>REQUESTS: <span id="requests">0</span></div>
        </div>
    </div>
    
    <!-- Dialog Modal -->
    <div id="dialog-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center hidden">
        <div class="bg-gray-900 p-6 pixel-border w-full max-w-md mx-4 dialog-box">
            <h3 id="dialog-title" class="text-yellow-300 mb-4 text-center">DIALOG</h3>
            <p id="dialog-text" class="mb-6 text-sm"></p>
            <div class="flex justify-center">
                <button onclick="closeDialog()" class="pixel-button bg-purple-600">
                    <i class="fas fa-times mr-2"></i> CLOSE
                </button>
            </div>
        </div>
    </div>
    
    <script>
        // Game State
        const gameState = {
            position: 'embedding',
            energy: 100,
            tokens: 0,
            maxTokens: 1000,
            context: 0,
            attention: 0,
            knowledge: 0,
            requests: 0,
            activeTokens: [],
            currentLayer: 0,
            layers: [
                'EMBEDDING LAYER',
                'ATTENTION LAYER 1',
                'FEED FORWARD LAYER 1',
                'NORMALIZATION LAYER 1',
                'ATTENTION LAYER 2',
                'FEED FORWARD LAYER 2',
                'NORMALIZATION LAYER 2',
                'OUTPUT LAYER'
            ],
            challenges: [
                {
                    name: 'TOKENIZE INPUT',
                    description: 'CONVERT THE USER INPUT INTO MEANINGFUL TOKENS.',
                    success: 'TOKENIZATION SUCCESSFUL! INPUT PROCESSED.',
                    fail: 'TOKENIZATION FAILED! GARBAGE OUTPUT PRODUCED.'
                },
                {
                    name: 'APPLY ATTENTION',
                    description: 'CALCULATE ATTENTION WEIGHTS FOR THE INPUT TOKENS.',
                    success: 'ATTENTION WEIGHTS CALCULATED! CONTEXT UNDERSTOOD.',
                    fail: 'ATTENTION FAILED! MODEL IS CONFUSED.'
                },
                {
                    name: 'GENERATE RESPONSE',
                    description: 'PRODUCE A COHERENT RESPONSE BASED ON THE INPUT.',
                    success: 'RESPONSE GENERATED! USER SATISFIED.',
                    fail: 'HALLUCINATION DETECTED! RESPONSE NONSENSICAL.'
                },
                {
                    name: 'OPTIMIZE MEMORY',
                    description: 'MANAGE CONTEXT WINDOW TO PREVENT OVERFLOW.',
                    success: 'MEMORY OPTIMIZED! EFFICIENT PROCESSING.',
                    fail: 'MEMORY LEAK DETECTED! PERFORMANCE DEGRADED.'
                }
            ],
            currentChallenge: 0
        };
        
        // DOM Elements
        const gameTextEl = document.getElementById('game-text');
        const tokenCountEl = document.getElementById('token-count');
        const positionEl = document.getElementById('position');
        const energyEl = document.getElementById('energy');
        const requestsEl = document.getElementById('requests');
        const contextFillEl = document.getElementById('context-fill');
        const contextValueEl = document.getElementById('context-value');
        const attentionFillEl = document.getElementById('attention-fill');
        const attentionValueEl = document.getElementById('attention-value');
        const knowledgeFillEl = document.getElementById('knowledge-fill');
        const knowledgeValueEl = document.getElementById('knowledge-value');
        const activeTokensEl = document.getElementById('active-tokens');
        const dialogModalEl = document.getElementById('dialog-modal');
        const dialogTextEl = document.getElementById('dialog-text');
        const dialogTitleEl = document.getElementById('dialog-title');
        
        // Initialize game
        function initGame() {
            updateStats();
            addGameText('\n> USE ARROWS TO MOVE THROUGH NEURAL LAYERS');
            addGameText('> PRESS PROCESS TO HANDLE A REQUEST');
            addGameText('> WATCH YOUR TOKEN COUNT AND ENERGY');
        }
        
        // Update all stats display
        function updateStats() {
            tokenCountEl.textContent = `TOKENS: ${gameState.tokens}/${gameState.maxTokens}`;
            positionEl.textContent = gameState.layers[gameState.currentLayer];
            energyEl.textContent = `${gameState.energy}%`;
            requestsEl.textContent = gameState.requests;
            
            // Update progress bars
            contextFillEl.style.width = `${gameState.context}%`;
            contextValueEl.textContent = `${gameState.context}%`;
            attentionFillEl.style.width = `${gameState.attention}%`;
            attentionValueEl.textContent = `${gameState.attention}%`;
            knowledgeFillEl.style.width = `${gameState.knowledge}%`;
            knowledgeValueEl.textContent = `${gameState.knowledge}%`;
            
            // Update active tokens
            activeTokensEl.innerHTML = '';
            gameState.activeTokens.slice(0, 12).forEach(token => {
                const tokenEl = document.createElement('div');
                tokenEl.className = 'bg-purple-900 text-white px-2 py-1 rounded';
                tokenEl.textContent = token;
                activeTokensEl.appendChild(tokenEl);
            });
            if (gameState.activeTokens.length > 12) {
                const moreEl = document.createElement('div');
                moreEl.className = 'bg-purple-900 text-white px-2 py-1 rounded';
                moreEl.textContent = `+${gameState.activeTokens.length - 12}`;
                activeTokensEl.appendChild(moreEl);
            }
        }
        
        // Add text to game console with typewriter effect
        function addGameText(text, color = 'text-yellow-300') {
            const p = document.createElement('p');
            p.className = `${color} mb-2`;
            p.textContent = text;
            gameTextEl.appendChild(p);
            gameTextEl.scrollTop = gameTextEl.scrollHeight;
        }
        
        // Move through neural layers
        function move(direction) {
            if (gameState.energy <= 0) {
                addGameText('> ENERGY DEPLETED! RESET MODEL TO CONTINUE.', 'text-red-400');
                return;
            }
            
            let moved = false;
            switch(direction) {
                case 'up':
                    if (gameState.currentLayer > 0) {
                        gameState.currentLayer--;
                        moved = true;
                    }
                    break;
                case 'down':
                    if (gameState.currentLayer < gameState.layers.length - 1) {
                        gameState.currentLayer++;
                        moved = true;
                    }
                    break;
                case 'left':
                    gameState.currentLayer = 0;
                    moved = true;
                    break;
                case 'right':
                    gameState.currentLayer = gameState.layers.length - 1;
                    moved = true;
                    break;
            }
            
            if (moved) {
                gameState.energy = Math.max(0, gameState.energy - 2);
                addGameText(`> MOVED TO ${gameState.layers[gameState.currentLayer]}`, 'text-blue-400');
                updateStats();
            } else {
                addGameText('> CANNOT MOVE FURTHER IN THIS DIRECTION', 'text-red-400');
            }
        }
        
        // Process a user request
        function processInput() {
            if (gameState.energy <= 0) {
                addGameText('> ENERGY DEPLETED! RESET MODEL TO CONTINUE.', 'text-red-400');
                return;
            }
            
            gameState.requests++;
            gameState.currentChallenge = Math.floor(Math.random() * gameState.challenges.length);
            const challenge = gameState.challenges[gameState.currentChallenge];
            
            // Show challenge dialog
            showDialog(challenge.name, challenge.description);
            
            // Process after dialog closed
            setTimeout(() => {
                // Determine success (70% chance)
                const success = Math.random() > 0.3;
                
                // Update stats based on success
                if (success) {
                    gameState.context = Math.min(100, gameState.context + 15);
                    gameState.attention = Math.min(100, gameState.attention + 10);
                    gameState.knowledge = Math.min(100, gameState.knowledge + 5);
                    
                    // Add random tokens
                    const newTokens = Math.floor(Math.random() * 5) + 3;
                    for (let i = 0; i < newTokens; i++) {
                        gameState.activeTokens.push(generateRandomToken());
                    }
                    gameState.tokens = Math.min(gameState.maxTokens, gameState.tokens + newTokens);
                    
                    addGameText(`> ${challenge.success}`, 'text-green-400');
                } else {
                    gameState.context = Math.max(0, gameState.context - 10);
                    gameState.attention = Math.max(0, gameState.attention - 15);
                    gameState.knowledge = Math.max(0, gameState.knowledge - 5);
                    
                    // Lose some tokens
                    const lostTokens = Math.floor(Math.random() * 3) + 1;
                    gameState.activeTokens = gameState.activeTokens.slice(lostTokens);
                    gameState.tokens = Math.max(0, gameState.tokens - lostTokens);
                    
                    addGameText(`> ${challenge.fail}`, 'text-red-400');
                }
                
                // Always consume energy
                gameState.energy = Math.max(0, gameState.energy - 10);
                
                // Check for game over
                if (gameState.energy <= 0) {
                    addGameText('> MODEL OVERHEATED! PERFORMING EMERGENCY SHUTDOWN...', 'text-red-400');
                }
                
                updateStats();
            }, 100);
        }
        
        // Reset the model
        function resetModel() {
            gameState.energy = 100;
            gameState.tokens = 0;
            gameState.activeTokens = [];
            addGameText('> MODEL RESET! ALL SYSTEMS NOMINAL.', 'text-green-400');
            updateStats();
        }
        
        // Show dialog modal
        function showDialog(title, text) {
            dialogTitleEl.textContent = title;
            dialogTextEl.textContent = text;
            dialogModalEl.classList.remove('hidden');
        }
        
        // Close dialog modal
        function closeDialog() {
            dialogModalEl.classList.add('hidden');
        }
        
        // Generate random token text
        function generateRandomToken() {
            const prefixes = ['input', 'output', 'hidden', 'embed', 'attn', 'norm', 'ffn', 'pos'];
            const suffixes = ['_token', '_vec', '_weight', '_bias', '_state', '_mem'];
            const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
            const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];
            return prefix + suffix;
        }
        
        // Initialize after animations complete
        setTimeout(initGame, 7000);
        
        // Keyboard controls
        document.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowUp': move('up'); break;
                case 'ArrowDown': move('down'); break;
                case 'ArrowLeft': move('left'); break;
                case 'ArrowRight': move('right'); break;
                case ' ': processInput(); break;
                case 'r': resetModel(); break;
            }
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=stinkyyy/llm64" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>