Hugging Face's logo

Spaces:
stinkyyy
/
llm64
Running

App Files Community
llm64 / index.html
stinkyyy's picture
stinkyyy
Add 2 files
649dd7e verified
raw
history blame contribute delete
22 kB
<!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>