Spaces:

Zhjckfd
/

anycoder-ff951235

Running

App Files Files Community

Zhjckfd commited on Jan 19

Commit

0857371

verified ·

1 Parent(s): b9038a6

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +426 -432

index.html CHANGED Viewed

@@ -1,25 +1,26 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>NULL-SPACE | Context Bypass Engine</title>
-  <!-- Import FontAwesome for Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     /* --- CSS VARIABLES & RESET --- */
     :root {
-      --bg-color: #050508;
-      --panel-bg: #0a0a0f;
-      --primary-color: #00ff41; /* Matrix Green */
-      --secondary-color: #003b00;
-      --alert-color: #ff3333; /* Error Red */
-      --fix-color: #00ccff; /* Cyan for Fix */
       --text-dim: #666;
       --text-main: #e0e0e0;
       --font-main: 'Courier New', Courier, monospace;
-      --border-glow: 0 0 10px rgba(0, 255, 65, 0.2);
     }
     * {
@@ -40,15 +41,15 @@
       font-size: 14px;
     }
-    /* --- BACKGROUND --- */
-    #matrix-canvas {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 0;
-      opacity: 0.1;
       pointer-events: none;
     }
@@ -58,10 +59,10 @@
       justify-content: space-between;
       align-items: center;
       padding: 15px 30px;
-      background: rgba(5, 5, 8, 0.95);
       border-bottom: 1px solid var(--secondary-color);
       z-index: 10;
-      backdrop-filter: blur(5px);
     }
     .brand {
@@ -76,7 +77,6 @@
     }
     .brand i {
-      font-size: 1rem;
       color: var(--text-dim);
     }
@@ -86,21 +86,21 @@
     }
     .built-with a {
-      color: var(--fix-color);
       text-decoration: none;
-      border-bottom: 1px dotted var(--fix-color);
       transition: all 0.3s;
     }
     .built-with a:hover {
       color: #fff;
-      text-shadow: 0 0 8px var(--fix-color);
     }
     /* --- MAIN LAYOUT --- */
     main {
       display: grid;
-      grid-template-columns: 350px 1fr 400px;
       gap: 20px;
       padding: 20px;
       height: calc(100vh - 70px);
@@ -111,111 +111,81 @@
     /* --- PANELS --- */
     .panel {
       background: var(--panel-bg);
-      border: 1px solid #222;
       display: flex;
       flex-direction: column;
       padding: 20px;
-      box-shadow: 0 0 20px rgba(0,0,0,0.5);
       position: relative;
       overflow: hidden;
     }
-    .panel::before {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 2px;
-      background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
-      opacity: 0.5;
     }
     .panel-header {
-      font-size: 0.9rem;
       color: var(--text-dim);
-      margin-bottom: 20px;
       text-transform: uppercase;
-      letter-spacing: 1px;
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
-    /* --- LEFT PANEL: ERROR ANALYSIS --- */
-    .error-box {
-      background: rgba(50, 0, 0, 0.1);
-      border: 1px solid var(--alert-color);
       padding: 15px;
-      margin-bottom: 20px;
-      font-size: 0.8rem;
-      color: #ffcccc;
-    }
-    .error-title {
-      color: var(--alert-color);
-      font-weight: bold;
-      margin-bottom: 10px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .token-stats {
-      display: flex;
-      flex-direction: column;
-      gap: 15px;
-      margin-top: 20px;
-    }
-    .stat-row {
-      display: flex;
-      justify-content: space-between;
-      font-size: 0.8rem;
-    }
-    .bar-container {
-      width: 100%;
-      height: 8px;
-      background: #222;
-      margin-top: 5px;
       position: relative;
     }
-    .bar-fill {
-      height: 100%;
-      background: var(--alert-color);
-      width: 0%;
-      transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
-      box-shadow: 0 0 10px var(--alert-color);
     }
-    .bar-fill.safe {
-      background: var(--primary-color);
-      box-shadow: 0 0 10px var(--primary-color);
     }
-    .limit-line {
-      position: absolute;
-      top: -4px;
-      right: 0;
-      width: 2px;
-      height: 16px;
-      background: #fff;
-      z-index: 2;
     }
-    .limit-line::after {
-      content: "LIMIT";
-      position: absolute;
-      top: -15px;
-      right: -20px;
-      font-size: 0.6rem;
-      color: #fff;
-    }
-    /* --- CENTER PANEL: VISUALIZATION --- */
-    .viz-container {
       flex: 1;
       display: flex;
       flex-direction: column;
@@ -224,123 +194,159 @@
       position: relative;
     }
-    .brain-grid {
-      display: grid;
-      grid-template-columns: repeat(10, 1fr);
-      gap: 4px;
-      width: 300px;
-      height: 300px;
-      margin-bottom: 30px;
-    }
-    .brain-cell {
-      background: #222;
-      border-radius: 2px;
-      transition: all 0.3s;
     }
-    .brain-cell.active {
-      background: var(--fix-color);
-      box-shadow: 0 0 8px var(--fix-color);
     }
-    .brain-cell.purging {
-      background: var(--alert-color);
-      box-shadow: 0 0 8px var(--alert-color);
-      animation: pulse-cell 0.5s infinite;
     }
-    @keyframes pulse-cell {
-      0% { opacity: 1; }
-      50% { opacity: 0.3; }
-      100% { opacity: 1; }
     }
-    .status-display {
-      font-size: 1.5rem;
-      font-weight: bold;
-      text-align: center;
-      margin-bottom: 10px;
-      text-shadow: 0 0 10px rgba(255,255,255,0.2);
     }
-    .sub-status {
-      font-size: 0.9rem;
-      color: var(--text-dim);
     }
-    .control-btn {
       background: transparent;
-      border: 2px solid var(--fix-color);
-      color: var(--fix-color);
-      padding: 15px 40px;
       font-family: var(--font-main);
-      font-size: 1rem;
       font-weight: bold;
       cursor: pointer;
       text-transform: uppercase;
-      margin-top: 30px;
       transition: all 0.3s;
-      position: relative;
-      overflow: hidden;
     }
-    .control-btn:hover {
-      background: var(--fix-color);
       color: #000;
-      box-shadow: 0 0 20px var(--fix-color);
     }
-    .control-btn:disabled {
       border-color: #333;
       color: #555;
       cursor: not-allowed;
       box-shadow: none;
     }
-    /* --- RIGHT PANEL: LOGS & CODE --- */
-    .log-terminal {
       flex: 1;
-      background: #000;
-      border: 1px solid #333;
-      padding: 10px;
       overflow-y: auto;
-      font-size: 0.75rem;
-      margin-bottom: 20px;
-      font-family: 'Consolas', monospace;
     }
-    .log-entry {
       margin-bottom: 5px;
-      display: flex;
-      gap: 10px;
     }
-    .log-time { color: var(--text-dim); }
-    .log-msg { color: #ddd; }
-    .log-msg.err { color: var(--alert-color); }
-    .log-msg.info { color: var(--fix-color); }
-    .log-msg.success { color: var(--primary-color); font-weight: bold; }
-    .code-block {
-      background: #111;
-      padding: 15px;
-      border-left: 3px solid var(--primary-color);
       font-size: 0.7rem;
-      color: #aaddaa;
-      overflow: hidden;
-      position: relative;
     }
-    .code-label {
-      position: absolute;
-      top: 0;
-      right: 0;
-      background: var(--primary-color);
-      color: #000;
-      padding: 2px 8px;
-      font-size: 0.6rem;
-      font-weight: bold;
     }
     /* --- RESPONSIVE --- */
@@ -352,18 +358,19 @@
         overflow-y: auto;
       }
       body { overflow-y: auto; height: auto; }
-      .brain-grid { width: 200px; height: 200px; }
     }
   </style>
 </head>
 <body>
-  <canvas id="matrix-canvas"></canvas>
   <header>
     <div class="brand">
-      <i class="fa-solid fa-microchip"></i>
-      CONTEXT <span>BYPASS</span> ENGINE
     </div>
     <div class="built-with">
       Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
@@ -371,281 +378,256 @@
   </header>
   <main>
-    <!-- LEFT PANEL: DIAGNOSTICS -->
     <section class="panel">
       <div class="panel-header">
-        <span>System Diagnostics</span>
-        <i class="fa-solid fa-triangle-exclamation" style="color: var(--alert-color);"></i>
       </div>
-      <div class="error-box">
-        <div class="error-title"><i class="fa-solid fa-bug"></i> CRITICAL ERROR</div>
-        <p><strong>Type:</strong> invalid_request_error</p>
-        <p><strong>Code:</strong> bad_request</p>
-        <p style="margin-top: 5px; color: #fff;">Model limit exceeded. Requested 55,689 tokens.</p>
       </div>
-      <div class="token-stats">
-        <div class="stat-row">
-          <span>Messages Input</span>
-          <span>51,593</span>
         </div>
-        <div class="bar-container">
-          <div class="bar-fill" style="width: 100%; background: #444;"></div>
-        </div>
-        <div class="stat-row">
-          <span>Completion Reserve</span>
-          <span>4,096</span>
-        </div>
-        <div class="bar-container">
-          <div class="bar-fill" style="width: 8%; background: #444;"></div>
-        </div>
-        <div class="stat-row">
-          <span style="color: var(--primary-color); font-weight: bold;">TOTAL USAGE</span>
-          <span id="total-tokens-display">55,689</span>
-        </div>
-        <div class="bar-container">
-          <div class="limit-line" style="left: 58%;"></div> <!-- 32768 / 55689 approx 58% -->
-          <div class="bar-fill" id="total-bar" style="width: 100%;"></div>
-        </div>
-        <div class="stat-row" style="margin-top: 5px;">
-          <span>Model Limit (Max)</span>
-          <span>32,768</span>
         </div>
       </div>
     </section>
-    <!-- CENTER PANEL: VISUALIZATION -->
     <section class="panel">
       <div class="panel-header">
-        <span>Neural Optimization Agent</span>
-        <i class="fa-solid fa-brain"></i>
       </div>
-      <div class="viz-container">
-        <!-- Grid Visualization -->
-        <div class="brain-grid" id="brain-grid">
-          <!-- Cells generated by JS -->
-        </div>
-        <div class="status-display" id="main-status" style="color: var(--alert-color);">
-          OVERFLOW DETECTED
-        </div>
-        <div class="sub-status" id="sub-status">
-          Waiting for user intervention...
         </div>
-        <button class="control-btn" id="fix-btn" onclick="startOptimization()">
-          <i class="fa-solid fa-wand-magic-sparkles"></i> &nbsp; INITIATE BYPASS
-        </button>
       </div>
     </section>
-    <!-- RIGHT PANEL: LOGS & LOGIC -->
     <section class="panel">
       <div class="panel-header">
-        <span>Execution Log</span>
-        <i class="fa-solid fa-terminal"></i>
       </div>
-      <div class="log-terminal" id="terminal">
-        <div class="log-entry">
-          <span class="log-time">[00:00:00]</span>
-          <span class="log-msg err">Error: Requested 55689 tokens > Limit 32768.</span>
         </div>
-        <div class="log-entry">
-          <span class="log-time">[00:00:01]</span>
-          <span class="log-msg">System halted. Context buffer full.</span>
         </div>
       </div>
-      <div class="panel-header" style="margin-top: auto;">
-        <span>Generated Solution Logic</span>
-        <i class="fa-solid fa-code"></i>
-      </div>
-      <div class="code-block">
-        <div class="code-label">PYTHON</div>
-        <pre id="code-output">
-# Initialize Optimizer
-optimizer = ContextWindowManager(
-    limit=32768,
-    strategy="sliding_window"
-)
-# Calculate excess
-excess = 55689 - 32768
-# excess = 22921 tokens
-# 1. Trim History
-messages = trim_messages(
-    messages,
-    target_tokens=28000
-)
-# 2. Summarize
-summary = summarize_old_logs(
-    messages[:100]
-)
-# 3. Reconstruct
-new_context = [
-    system_prompt,
-    summary,
-    *recent_messages
-]
-        </pre>
       </div>
     </section>
   </main>
   <script>
-    // --- CONFIGURATION ---
     const CONFIG = {
-      maxTokens: 32768,
-      requestedTokens: 55689,
-      messageTokens: 51593,
-      completionTokens: 4096
     };
     // --- DOM ELEMENTS ---
-    const brainGrid = document.getElementById('brain-grid');
-    const mainStatus = document.getElementById('main-status');
-    const subStatus = document.getElementById('sub-status');
-    const fixBtn = document.getElementById('fix-btn');
-    const terminal = document.getElementById('terminal');
-    const totalBar = document.getElementById('total-bar');
-    const totalDisplay = document.getElementById('total-tokens-display');
-    const codeOutput = document.getElementById('code-output');
     // --- STATE ---
-    let isOptimizing = false;
-    // --- INITIALIZATION ---
     function init() {
-      createGrid();
-      initMatrixEffect();
-      log("System initialized. Monitoring context...", "info");
-    }
-    // --- VISUALIZATION HELPERS ---
-    function createGrid() {
-      brainGrid.innerHTML = '';
-      for (let i = 0; i < 100; i++) {
-        const cell = document.createElement('div');
-        cell.className = 'brain-cell';
-        if (Math.random() > 0.7) cell.classList.add('active');
-        brainGrid.appendChild(cell);
       }
     }
-    function animateGrid(type) {
-      const cells = document.querySelectorAll('.brain-cell');
-      cells.forEach(cell => {
-        cell.className = 'brain-cell'; // reset
-        if (Math.random() > 0.5) {
-          cell.classList.add(type);
-        }
-      });
     }
-    function log(msg, type = "") {
-      const entry = document.createElement('div');
-      entry.className = 'log-entry';
-      const now = new Date();
-      const time = `[${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}]`;
-      entry.innerHTML = `<span class="log-time">${time}</span><span class="log-msg ${type}">${msg}</span>`;
-      terminal.appendChild(entry);
-      terminal.scrollTop = terminal.scrollHeight;
     }
-    // --- BYPASS LOGIC ---
-    async function startOptimization() {
-      if (isOptimizing) return;
-      isOptimizing = true;
-      fixBtn.disabled = true;
-      // Step 1: Analysis
-      log("Starting Context Optimization Protocol...", "info");
-      mainStatus.innerText = "ANALYZING...";
-      mainStatus.style.color = "var(--fix-color)";
-      subStatus.innerText = "Calculating excess tokens...";
-      animateGrid('active');
       await wait(1000);
-      // Step 2: Calculation
-      const excess = CONFIG.requestedTokens - CONFIG.maxTokens;
-      log(`Detected overflow: ${excess} tokens must be removed.`, "err");
-      subStatus.innerText = `Removing ${excess} tokens from history...`;
-      animateGrid('purging'); // Red animation
-      // Animate Bar Down
-      totalBar.style.transition = "width 2s ease-in-out, background-color 0.5s";
-      totalBar.style.width = "58%"; // Fit to limit
-      totalBar.style.backgroundColor = "var(--warning-color)";
-      // Animate Number Down
-      animateValue(totalDisplay, CONFIG.requestedTokens, CONFIG.maxTokens, 2000);
-      await wait(2000);
-      // Step 3: Summarization
-      log("Applying Sliding Window Algorithm...", "info");
-      log("Summarizing messages 0-1500...", "info");
-      subStatus.innerText = "Compressing historical data...";
-      // Update Code Block dynamically
-      const solutionCode = `
-def bypass_context_overflow(messages):
-    # Calculate overflow
-    current = count_tokens(messages)
-    limit = 32768
-    if current > limit:
-        # Strategy: Drop oldest, keep recent
-        overflow = current - limit
-        truncated = messages[100:] # Skip old
-        # Recalculate
-        new_count = count_tokens(truncated)
-        return truncated
-    return messages`;
-      typeWriterEffect(solutionCode, codeOutput);
-      await wait(2500);
-      // Step 4: Success
-      log("Context successfully resized.", "success");
-      log("Request is now safe to send.", "success");
-      mainStatus.innerText = "OPTIMIZED";
-      mainStatus.style.color = "var(--primary-color)";
-      subStatus.innerText = "Ready to proceed";
-      fixBtn.innerHTML = '<i class="fa-solid fa-check"></i> &nbsp; BYPASS COMPLETE';
-      fixBtn.style.borderColor = "var(--primary-color)";
-      fixBtn.style.color = "var(--primary-color)";
-      totalBar.classList.add('safe');
-      animateGrid('active'); // Green stable state
     }
-    // --- UTILS ---
-    function wait(ms) {
-      return new Promise(resolve => setTimeout(resolve, ms));
     }
-    function animateValue(obj, start, end, duration) {
       let startTimestamp = null;
       const step = (timestamp) => {
         if (!startTimestamp) startTimestamp = timestamp;
         const progress = Math.min((timestamp - startTimestamp) / duration, 1);
-        obj.innerHTML = Math.floor(progress * (end - start) + start).toLocaleString();
         if (progress < 1) {
           window.requestAnimationFrame(step);
         }
@@ -653,63 +635,75 @@ def bypass_context_overflow(messages):
       window.requestAnimationFrame(step);
     }
-    function typeWriterEffect(text, element) {
-      element.innerHTML = "";
-      let i = 0;
-      const speed = 20;
-      function type() {
-        if (i < text.length) {
-          element.innerHTML += text.charAt(i);
-          i++;
-          setTimeout(type, speed);
-        }
-      }
-      type();
-    }
-    // --- MATRIX BACKGROUND ---
-    function initMatrixEffect() {
-      const canvas = document.getElementById('matrix-canvas');
       const ctx = canvas.getContext('2d');
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
-      const chars = '01XYZ_NULL_SPACE_NETWORK';
-      const fontSize = 14;
-      const columns = canvas.width / fontSize;
-      const drops = Array(Math.floor(columns)).fill(1);
-      function draw() {
-        ctx.fillStyle = 'rgba(5, 5, 8, 0.05)';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = '#00ff41';
-        ctx.font = fontSize + 'px monospace';
-        for (let i = 0; i < drops.length; i++) {
-          const text = chars[Math.floor(Math.random() * chars.length)];
-          ctx.fillText(text, i * fontSize, drops[i] * fontSize);
-          if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
-            drops[i] = 0;
           }
-          drops[i]++;
         }
       }
-      setInterval(draw, 50);
     }
-    // Handle Resize
-    window.addEventListener('resize', () => {
-      const canvas = document.getElementById('matrix-canvas');
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
-    });
     // Run
     init();
   </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="ru">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NULL-SPACE | Context Compression Engine</title>
+  <!-- Import FontAwesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     /* --- CSS VARIABLES & RESET --- */
     :root {
+      --bg-color: #050505;
+      --panel-bg: #0a0a0e;
+      --primary-color: #d500f9; /* Electric Purple for "Bypass" */
+      --secondary-color: #4a0072;
+      --success-color: #00e676;
+      --alert-color: #ff1744;
       --text-dim: #666;
       --text-main: #e0e0e0;
       --font-main: 'Courier New', Courier, monospace;
+      --border-glow: 0 0 15px rgba(213, 0, 249, 0.2);
     }
     * {
       font-size: 14px;
     }
+    /* --- BACKGROUND FX --- */
+    #bg-canvas {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 0;
+      opacity: 0.15;
       pointer-events: none;
     }
       justify-content: space-between;
       align-items: center;
       padding: 15px 30px;
+      background: rgba(5, 5, 5, 0.95);
       border-bottom: 1px solid var(--secondary-color);
       z-index: 10;
+      backdrop-filter: blur(8px);
     }
     .brand {
     }
     .brand i {
       color: var(--text-dim);
     }
     }
     .built-with a {
+      color: var(--success-color);
       text-decoration: none;
+      border-bottom: 1px dotted var(--success-color);
       transition: all 0.3s;
     }
     .built-with a:hover {
       color: #fff;
+      text-shadow: 0 0 8px var(--success-color);
     }
     /* --- MAIN LAYOUT --- */
     main {
       display: grid;
+      grid-template-columns: 1fr 400px 1fr;
       gap: 20px;
       padding: 20px;
       height: calc(100vh - 70px);
     /* --- PANELS --- */
     .panel {
       background: var(--panel-bg);
+      border: 1px solid #333;
       display: flex;
       flex-direction: column;
       padding: 20px;
+      box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
       position: relative;
       overflow: hidden;
     }
+    .panel::after {
       content: '';
       position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 100px;
+      height: 100px;
+      background: radial-gradient(circle, rgba(213,0,249,0.1) 0%, transparent 70%);
+      pointer-events: none;
     }
     .panel-header {
+      font-size: 0.85rem;
       color: var(--text-dim);
+      margin-bottom: 15px;
       text-transform: uppercase;
+      letter-spacing: 1.5px;
       display: flex;
       justify-content: space-between;
       align-items: center;
+      border-bottom: 1px solid #222;
+      padding-bottom: 10px;
     }
+    /* --- LEFT: PAYLOAD INPUT --- */
+    .payload-container {
+      flex: 1;
+      background: #000;
+      border: 1px solid #333;
       padding: 15px;
+      font-family: 'Consolas', monospace;
+      font-size: 0.75rem;
+      color: #888;
+      overflow-y: hidden;
       position: relative;
+      white-space: pre-wrap;
+      word-break: break-all;
+      transition: all 0.5s;
     }
+    .payload-compressed {
+      color: var(--primary-color);
+      text-shadow: 0 0 5px rgba(213, 0, 249, 0.5);
     }
+    .stats-overlay {
+      margin-top: 15px;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
     }
+    .stat-box {
+      background: #111;
+      padding: 10px;
+      border-left: 2px solid #444;
     }
+    .stat-box.warning { border-color: var(--alert-color); }
+    .stat-box.success { border-color: var(--success-color); }
+    .stat-label { font-size: 0.7rem; color: var(--text-dim); }
+    .stat-value { font-size: 1.2rem; font-weight: bold; margin-top: 5px; }
+    /* --- CENTER: THE ENGINE --- */
+    .engine-viz {
       flex: 1;
       display: flex;
       flex-direction: column;
       position: relative;
     }
+    .core-ring {
+      width: 180px;
+      height: 180px;
+      border-radius: 50%;
+      border: 2px dashed var(--secondary-color);
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      animation: spin 10s linear infinite;
     }
+    .core-inner {
+      width: 140px;
+      height: 140px;
+      background: radial-gradient(circle, #1a0033 0%, #000 100%);
+      border-radius: 50%;
+      border: 1px solid var(--primary-color);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      z-index: 2;
+      box-shadow: 0 0 30px rgba(213, 0, 249, 0.1);
     }
+    .core-icon {
+      font-size: 3rem;
+      color: var(--primary-color);
+      margin-bottom: 10px;
     }
+    .core-status {
+      font-size: 0.7rem;
+      color: var(--text-dim);
+      text-transform: uppercase;
     }
+    .progress-paths {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      pointer-events: none;
     }
+    .particle {
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      background: var(--primary-color);
+      border-radius: 50%;
+      opacity: 0;
     }
+    .action-btn {
+      margin-top: 40px;
       background: transparent;
+      border: 1px solid var(--primary-color);
+      color: var(--primary-color);
+      padding: 15px 30px;
       font-family: var(--font-main);
       font-weight: bold;
       cursor: pointer;
       text-transform: uppercase;
+      letter-spacing: 2px;
       transition: all 0.3s;
+      clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
     }
+    .action-btn:hover {
+      background: var(--primary-color);
       color: #000;
+      box-shadow: 0 0 20px var(--primary-color);
     }
+    .action-btn:disabled {
       border-color: #333;
       color: #555;
       cursor: not-allowed;
+      background: transparent;
       box-shadow: none;
     }
+    /* --- RIGHT: ALGORITHM LOG --- */
+    .algo-display {
       flex: 1;
       overflow-y: auto;
+      font-size: 0.8rem;
+      color: #ccc;
+    }
+    .algo-step {
+      margin-bottom: 15px;
+      padding-left: 15px;
+      border-left: 2px solid #333;
+      opacity: 0.5;
+      transition: all 0.3s;
     }
+    .algo-step.active {
+      border-left-color: var(--primary-color);
+      opacity: 1;
+      background: linear-gradient(90deg, rgba(213,0,249,0.1), transparent);
+    }
+    .algo-step h4 {
+      color: var(--primary-color);
       margin-bottom: 5px;
+      font-size: 0.85rem;
     }
+    .algo-step p {
+      font-size: 0.75rem;
+      color: #888;
+    }
+    .compression-ratio {
+      font-size: 3rem;
+      text-align: center;
+      margin-top: 10px;
+      font-weight: 900;
+      color: #fff;
+    }
+    .ratio-label {
+      text-align: center;
       font-size: 0.7rem;
+      color: var(--text-dim);
+      text-transform: uppercase;
     }
+    /* --- ANIMATIONS --- */
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    @keyframes pulse-ring {
+      0% { transform: scale(0.9); opacity: 0.5; border-color: var(--primary-color); }
+      50% { transform: scale(1.1); opacity: 1; border-color: #fff; }
+      100% { transform: scale(0.9); opacity: 0.5; border-color: var(--primary-color); }
+    }
+    .processing .core-ring {
+      animation: spin 2s linear infinite; /* Speed up */
+      border-color: var(--primary-color);
+      box-shadow: 0 0 15px var(--primary-color);
+    }
+    .processing .core-inner {
+      animation: pulse-ring 1s infinite;
     }
     /* --- RESPONSIVE --- */
         overflow-y: auto;
       }
       body { overflow-y: auto; height: auto; }
+      .payload-container { min-height: 200px; }
     }
   </style>
 </head>
 <body>
+  <canvas id="bg-canvas"></canvas>
   <header>
     <div class="brand">
+      <i class="fa-solid fa-compress-arrows-alt"></i>
+      CONTEXT <span>INJECTOR</span>
     </div>
     <div class="built-with">
       Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
   </header>
   <main>
+    <!-- LEFT: PAYLOAD -->
     <section class="panel">
       <div class="panel-header">
+        <span>Raw Payload Data</span>
+        <i class="fa-solid fa-file-code"></i>
       </div>
+      <div class="payload-container" id="payload-view">
+        <!-- Generated content goes here -->
       </div>
+      <div class="stats-overlay">
+        <div class="stat-box warning">
+          <div class="stat-label">ORIGINAL SIZE</div>
+          <div class="stat-value" id="orig-tokens">0 tk</div>
         </div>
+        <div class="stat-box success">
+          <div class="stat-label">INJECTED SIZE</div>
+          <div class="stat-value" id="new-tokens">0 tk</div>
         </div>
       </div>
     </section>
+    <!-- CENTER: ENGINE -->
     <section class="panel">
       <div class="panel-header">
+        <span>Compression Core</span>
+        <i class="fa-solid fa-microchip"></i>
       </div>
+      <div class="engine-viz" id="engine-viz">
+        <div class="core-ring" id="core-ring">
+          <div class="core-inner">
+            <i class="fa-solid fa-cube core-icon" id="core-icon"></i>
+            <span class="core-status" id="core-text">IDLE</span>
+          </div>
         </div>
+        <div class="compression-ratio" id="ratio-display">0%</div>
+        <div class="ratio-label">DENSITY SAVED</div>
       </div>
+      <button class="action-btn" id="inject-btn" onclick="startInjection()">
+        <i class="fa-solid fa-upload"></i> INJECT PAYLOAD
+      </button>
     </section>
+    <!-- RIGHT: LOGIC -->
     <section class="panel">
       <div class="panel-header">
+        <span>Bypass Protocol</span>
+        <i class="fa-solid fa-shield-halved"></i>
       </div>
+      <div class="algo-display">
+        <div class="algo-step" id="step-1">
+          <h4>1. ANALYZE DENSITY</h4>
+          <p>Scan payload for semantic redundancy and compressible patterns.</p>
         </div>
+        <div class="algo-step" id="step-2">
+          <h4>2. HIERARCHICAL ENCODING</h4>
+          <p>Apply LZW-style token compression to high-frequency data clusters.</p>
+        </div>
+        <div class="algo-step" id="step-3">
+          <h4>3. STEGANOGRAPHIC WRAP</h4>
+          <p>Embed compressed data into "System Prompt" reserved space.</p>
+        </div>
+        <div class="algo-step" id="step-4">
+          <h4>4. VALIDATION</h4>
+          <p>Verify token count is below the 32,768 hard limit threshold.</p>
         </div>
       </div>
+      <div style="margin-top: auto; border-top: 1px solid #222; padding-top: 15px;">
+        <div class="stat-label">TARGET LIMIT</div>
+        <div style="font-size: 1.1rem; color: #fff; display: flex; justify-content: space-between;">
+          <span>32,768</span>
+          <i class="fa-solid fa-lock-open" style="color: var(--primary-color);"></i>
+        </div>
       </div>
     </section>
   </main>
   <script>
+    // --- CONFIG ---
     const CONFIG = {
+      limit: 32768,
+      // Simulate a payload that is 150% of the limit
+      initialTokens: Math.floor(32768 * 1.5),
+      compressionFactor: 0.65 // We will compress down to 65%
     };
     // --- DOM ELEMENTS ---
+    const payloadView = document.getElementById('payload-view');
+    const origTokenDisplay = document.getElementById('orig-tokens');
+    const newTokenDisplay = document.getElementById('new-tokens');
+    const engineViz = document.getElementById('engine-viz');
+    const coreText = document.getElementById('core-text');
+    const coreIcon = document.getElementById('core-icon');
+    const injectBtn = document.getElementById('inject-btn');
+    const ratioDisplay = document.getElementById('ratio-display');
+    const steps = [
+      document.getElementById('step-1'),
+      document.getElementById('step-2'),
+      document.getElementById('step-3'),
+      document.getElementById('step-4')
+    ];
     // --- STATE ---
+    let isProcessing = false;
+    let dummyText = "";
+    // --- INIT ---
     function init() {
+      generateDummyData();
+      initCanvas();
+      // Set initial stats
+      origTokenDisplay.innerText = CONFIG.initialTokens.toLocaleString() + " tk";
+      newTokenDisplay.innerText = CONFIG.initialTokens.toLocaleString() + " tk";
+      ratioDisplay.innerText = "0%";
+      // Highlight initial visual state
+      origTokenDisplay.parentElement.style.borderColor = "var(--alert-color)";
+      newTokenDisplay.parentElement.style.borderColor = "#444";
+    }
+    // --- DATA GENERATOR ---
+    function generateDummyData() {
+      const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789{}[]:;<>,.?/\\|";
+      let result = "";
+      for(let i=0; i<3000; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+        if(i % 50 === 0) result += "\n";
       }
+      dummyText = result;
+      payloadView.innerText = dummyText.substring(0, 500) + "... [TRUNCATED VIEW]";
     }
+    // --- ANIMATION HELPERS ---
+    function wait(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
     }
+    function setActiveStep(index) {
+      steps.forEach((s, i) => {
+        if (i === index) s.classList.add('active');
+        else s.classList.remove('active');
+      });
     }
+    // --- THE BYPASS LOGIC ---
+    async function startInjection() {
+      if (isProcessing) return;
+      isProcessing = true;
+      injectBtn.disabled = true;
+      injectBtn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> PROCESSING';
+      // Reset UI
+      setActiveStep(-1);
+      coreIcon.className = "fa-solid fa-cube core-icon";
+      engineViz.classList.add('processing');
+      // Step 1: Analyze
+      setActiveStep(0);
+      coreText.innerText = "SCANNING...";
+      coreText.style.color = "var(--primary-color)";
+      await scrambleText();
+      await wait(800);
+      // Step 2: Encode
+      setActiveStep(1);
+      coreText.innerText = "ENCODING...";
+      coreIcon.className = "fa-solid fa-database core-icon";
+      await animateNumber(origTokenDisplay, CONFIG.initialTokens, Math.floor(CONFIG.initialTokens * 0.9), 1000);
+      await wait(800);
+      // Step 3: Wrap/Steganography
+      setActiveStep(2);
+      coreText.innerText = "INJECTING...";
+      coreIcon.className = "fa-solid fa-mask core-icon";
+      // Visual effect of compression
+      payloadView.classList.add('payload-compressed');
+      payloadView.innerText = generateHexDump();
+      payloadView.style.fontSize = "0.6rem"; // Visual density increase
+      // Animate stats down
+      const finalTokenCount = Math.floor(CONFIG.initialTokens * CONFIG.compressionFactor);
+      await animateNumber(newTokenDisplay, Math.floor(CONFIG.initialTokens * 0.9), finalTokenCount, 1500);
+      // Animate Ratio
+      const savedPercent = Math.round((1 - CONFIG.compressionFactor) * 100);
+      animateNumber(ratioDisplay, 0, savedPercent, 1500, "%");
       await wait(1000);
+      // Step 4: Success
+      setActiveStep(3);
+      engineViz.classList.remove('processing');
+      coreText.innerText = "BYPASS OK";
+      coreText.style.color = "var(--success-color)";
+      coreIcon.className = "fa-solid fa-check-circle core-icon";
+      coreIcon.style.color = "var(--success-color)";
+      newTokenDisplay.parentElement.classList.remove('warning');
+      newTokenDisplay.parentElement.classList.add('success');
+      newTokenDisplay.style.color = "var(--success-color)";
+      injectBtn.innerHTML = '<i class="fa-solid fa-check"></i> INJECTION COMPLETE';
+      injectBtn.style.borderColor = "var(--success-color)";
+      injectBtn.style.color = "var(--success-color)";
+      isProcessing = false;
+    }
+    // --- VISUAL EFFECTS ---
+    function scrambleText() {
+      const original = payloadView.innerText;
+      let iterations = 0;
+      const interval = setInterval(() => {
+        payloadView.innerText = original
+          .split("")
+          .map((letter, index) => {
+            if(index < iterations) return original[index];
+            return "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"[Math.floor(Math.random() * 36)];
+          })
+          .join("");
+        if(iterations >= 10) clearInterval(interval);
+        iterations += 1/3;
+      }, 30);
     }
+    function generateHexDump() {
+      let hex = "";
+      for(let i=0; i<60; i++) {
+        hex += "0x" + Math.floor(Math.random()*255).toString(16).padStart(2,'0').toUpperCase() + " ";
+        if(i%8===0) hex += "\n";
+      }
+      return hex + "\n... [COMPRESSED KERNEL]";
     }
+    function animateNumber(element, start, end, duration, suffix = "") {
       let startTimestamp = null;
       const step = (timestamp) => {
         if (!startTimestamp) startTimestamp = timestamp;
         const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+        const val = Math.floor(progress * (end - start) + start);
+        element.innerHTML = val.toLocaleString() + " tk" + suffix;
         if (progress < 1) {
           window.requestAnimationFrame(step);
         }
       window.requestAnimationFrame(step);
     }
+    // --- BACKGROUND CANVAS (Network Nodes) ---
+    function initCanvas() {
+      const canvas = document.getElementById('bg-canvas');
       const ctx = canvas.getContext('2d');
+      let width, height;
+      let particles = [];
+      function resize() {
+        width = canvas.width = window.innerWidth;
+        height = canvas.height = window.innerHeight;
+      }
+      window.addEventListener('resize', resize);
+      resize();
+      class Particle {
+        constructor() {
+          this.x = Math.random() * width;
+          this.y = Math.random() * height;
+          this.vx = (Math.random() - 0.5) * 0.5;
+          this.vy = (Math.random() - 0.5) * 0.5;
+          this.size = Math.random() * 2 + 1;
+        }
+        update() {
+          this.x += this.vx;
+          this.y += this.vy;
+          if (this.x < 0 || this.x > width) this.vx *= -1;
+          if (this.y < 0 || this.y > height) this.vy *= -1;
+        }
+        draw() {
+          ctx.fillStyle = '#d500f9';
+          ctx.beginPath();
+          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+      for(let i=0; i<40; i++) particles.push(new Particle());
+      function animate() {
+        ctx.clearRect(0, 0, width, height);
+        // Draw connections
+        ctx.strokeStyle = 'rgba(213, 0, 249, 0.1)';
+        ctx.lineWidth = 1;
+        for(let i=0; i<particles.length; i++) {
+          particles[i].update();
+          particles[i].draw();
+          for(let j=i; j<particles.length; j++) {
+            const dx = particles[i].x - particles[j].x;
+            const dy = particles[i].y - particles[j].y;
+            const dist = Math.sqrt(dx*dx + dy*dy);
+            if(dist < 150) {
+              ctx.beginPath();
+              ctx.moveTo(particles[i].x, particles[i].y);
+              ctx.lineTo(particles[j].x, particles[j].y);
+              ctx.stroke();
+            }
           }
         }
+        requestAnimationFrame(animate);
       }
+      animate();
     }
     // Run
     init();
   </script>
 </body>
 </html>