Spaces:

stinkyyy
/

llm64

Running

App Files Files Community

stinkyyy commited on Apr 2

Commit

649dd7e

verified ·

1 Parent(s): 94afc58

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +500 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Llm64
-emoji: 🚀
-colorFrom: red
 colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: llm64
+emoji: 🐳
+colorFrom: yellow
 colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,500 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

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