Spaces:

Zhjckfd
/

anycoder-ff951235

Running

File size: 20,921 Bytes

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NULL-SPACE | Context Compression Engine v2.0</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: #00e5ff; /* Cyan for "Bypass/Injection" */
      --secondary-color: #005c6e;
      --error-color: #ff2a2a;
      --success-color: #00e676;
      --text-dim: #666;
      --text-main: #e0e0e0;
      --font-main: 'Courier New', Courier, monospace;
      --border-glow: 0 0 15px rgba(0, 229, 255, 0.2);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      outline: none;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-main);
      font-family: var(--font-main);
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      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;
    }

    /* --- HEADER --- */
    header {
      display: flex;
      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 {
      font-weight: 900;
      font-size: 1.4rem;
      letter-spacing: 3px;
      color: var(--primary-color);
      text-shadow: 0 0 10px var(--primary-color);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .brand i {
      color: var(--text-dim);
    }

    .built-with {
      font-size: 0.8rem;
      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);
      position: relative;
      z-index: 5;
    }

    /* --- 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(0, 229, 255, 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: ERROR PAYLOAD --- */
    .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;
    }

    .error-highlight {
      color: var(--error-color);
      text-shadow: 0 0 5px rgba(255, 42, 42, 0.5);
      font-weight: bold;
    }

    .compressed-highlight {
      color: var(--primary-color);
      text-shadow: 0 0 5px rgba(0, 229, 255, 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;
      transition: all 0.3s;
    }

    .stat-box.critical {
      border-color: var(--error-color);
      background: rgba(255, 42, 42, 0.05);
      animation: pulse-red 2s infinite;
    }

    .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;
    }

    .sub-stats {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      font-size: 0.7rem;
      color: #555;
    }

    /* --- CENTER: THE ENGINE --- */
    .engine-viz {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      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, #001a20 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(0, 229, 255, 0.1);
      transition: all 0.5s;
    }

    .core-icon {
      font-size: 3rem;
      color: var(--primary-color);
      margin-bottom: 10px;
      transition: all 0.3s;
    }

    .core-status {
      font-size: 0.7rem;
      color: var(--text-dim);
      text-transform: uppercase;
      text-align: center;
    }

    .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: 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(0, 229, 255, 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.95); opacity: 0.8; }
      50% { transform: scale(1.05); opacity: 1; }
      100% { transform: scale(0.95); opacity: 0.8; }
    }

    @keyframes pulse-red {
      0% { box-shadow: 0 0 0 0 rgba(255, 42, 42, 0.4); }
      70% { box-shadow: 0 0 0 10px rgba(255, 42, 42, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 42, 42, 0); }
    }

    .processing .core-ring {
      animation: spin 1s linear infinite;
      border-color: var(--primary-color);
      box-shadow: 0 0 20px var(--primary-color);
    }

    .processing .core-inner {
      animation: pulse-ring 0.8s infinite;
    }

    /* --- RESPONSIVE --- */
    @media (max-width: 1024px) {
      main {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
        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-bug-slash"></i>
      ERROR <span>BYPASS</span>
    </div>
    <div class="built-with">
      Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
    </div>
  </header>

  <main>
    <!-- LEFT: ERROR DATA -->
    <section class="panel">
      <div class="panel-header">
        <span>Error Analysis: Request ID Root-1-696dec20</span>
        <i class="fa-solid fa-triangle-exclamation" style="color: var(--error-color);"></i>
      </div>

      <div class="payload-container" id="payload-view">
        <!-- Error details will be injected here -->
      </div>

      <div class="stats-overlay">
        <div class="stat-box critical" id="box-orig">
          <div class="stat-label">REQUESTED TOKENS</div>
          <div class="stat-value error-highlight" id="orig-tokens">61,322</div>
          <div class="sub-stats">
            <span>MSG: 57,226</span>
            <span>CMP: 4,096</span>
          </div>
        </div>
        <div class="stat-box" id="box-new">
          <div class="stat-label">AFTER COMPRESSION</div>
          <div class="stat-value" id="new-tokens">61,322</div>
        </div>
      </div>
    </section>

    <!-- CENTER: ENGINE -->
    <section class="panel">
      <div class="panel-header">
        <span>Recursive Compression</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-bomb core-icon" id="core-icon" style="color: var(--error-color);"></i>
            <span class="core-status" id="core-text" style="color: var(--error-color);">OVERFLOW</span>
          </div>
        </div>

        <div class="compression-ratio" id="ratio-display">0%</div>
        <div class="ratio-label">REDUCTION EFFICIENCY</div>
      </div>

      <button class="action-btn" id="inject-btn" onclick="startBypass()">
        <i class="fa-solid fa-wrench"></i> FIX & INJECT
      </button>
    </section>

    <!-- RIGHT: LOGS -->
    <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. INTERCEPT ERROR</h4>
          <p>Catch invalid_request_error. Analyze breakdown: 57,226 messages + 4,096 completion.</p>
        </div>
        <div class="algo-step" id="step-2">
          <h4>2. SEMANTIC PRUNING</h4>
          <p>Remove low-entropy tokens from message history while retaining semantic weight.</p>
        </div>
        <div class="algo-step" id="step-3">
          <h4>3. COMPLETION TRUNCATION</h4>
          <p>Dynamically adjust max_tokens parameter from 4096 to fit remaining budget.</p>
        </div>
        <div class="algo-step" id="step-4">
          <h4>4. RE-SUBMIT</h4>
          <p>Validate final count is below 32,768. Re-issue request with new headers.</p>
        </div>
      </div>

      <div style="margin-top: auto; border-top: 1px solid #222; padding-top: 15px;">
        <div class="stat-label">HARD 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" id="limit-icon" style="color: #555;"></i>
        </div>
      </div>
    </section>
  </main>

  <script>
    // --- CONFIG BASED ON USER ERROR ---
    // Error: requested 61322 tokens (57226 in messages, 4096 in completion)
    const CONFIG = {
      limit: 32768,
      requestedTotal: 61322,
      messages: 57226,
      completion: 4096,
      // Target needs to be safely under 32,768. Let's aim for 30,000 to be safe.
      targetTotal: 30000, 
      targetCompletion: 2000 // Reduced from 4096
    };

    // --- 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 limitIcon = document.getElementById('limit-icon');
    const boxOrig = document.getElementById('box-orig');
    const boxNew = document.getElementById('box-new');
    
    const steps = [
      document.getElementById('step-1'),
      document.getElementById('step-2'),
      document.getElementById('step-3'),
      document.getElementById('step-4')
    ];

    // --- STATE ---
    let isProcessing = false;

    // --- INIT ---
    function init() {
      generateErrorView();
      initCanvas();
      
      // Set initial error state
      origTokenDisplay.innerText = CONFIG.requestedTotal.toLocaleString();
      newTokenDisplay.innerText = CONFIG.requestedTotal.toLocaleString();
      ratioDisplay.innerText = "0%";
      
      // Visual cues for error
      coreIcon.className = "fa-solid fa-triangle-exclamation core-icon";
      coreText.innerText = "ERROR";
    }

    // --- ERROR GENERATOR ---
    function generateErrorView() {
      const rawError = `Error in interaction: Error in generating model output: (Request ID: Root=1-696dec20-59ca024f1826f4b36b4b1696;dba6b9cd-5b13-4460-b15c-97d27b9411ce) Bad request: {'message': "This model's maximum context length is 32768 tokens. However, you requested 61322 tokens (57226 in the messages, 4096 in the completion). Please reduce the length of the messages or completion. None", 'type': 'invalid_request_error', 'param': None, 'code': 'bad_request'}`;
      
      payloadView.innerHTML = `<span class="error-highlight">>${rawError}</span>`;
    }

    // --- 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 startBypass() {
      if (isProcessing) return;
      isProcessing = true;
      injectBtn.disabled = true;
      injectBtn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> BYPASSING...';

      // Reset UI
      setActiveStep(-1);
      engineViz.classList.add('processing');

      // Step 1: Intercept
      setActiveStep(0);
      coreText.innerText = "INTERCEPTING";
      coreText.style.color = "#ffcc00"; // Warning yellow
      coreIcon.className = "fa-solid fa-bug core-icon";
      await wait(800);

      // Step 2: Prune Messages
      setActiveStep(1);
      coreText.innerText = "PRUNING MSGS";
      coreIcon.className = "fa-solid fa-scissors core-icon";
      
      // Animate number down from 57226 to roughly 28000
      const msgReduction = CONFIG.messages - (CONFIG.targetTotal - CONFIG.targetCompletion);
      
      // Visual effect in payload view
      payloadView.innerHTML = `<span class="compressed-highlight">> ANALYZING SEMANTIC DENSITY...</span><br>> REMOVING REDUNDANT CONTEXT...`;
      await animateNumber(newTokenDisplay, CONFIG.requestedTotal, CONFIG.requestedTotal - 20000, 1000);
      await wait(500);

      // Step 3: Truncate Completion
      setActiveStep(2);
      coreText.innerText = "ADJUSTING LIMITS";
      coreIcon.className = "fa-solid fa-compress core-icon";
      
      payloadView.innerHTML = `<span class="compressed-highlight">> MAX_TOKENS: 4096 -> ${CONFIG.targetCompletion}</span><br>> OPTIMIZING PROMPT STRUCTURE...`;
      
      // Animate to final target
      await animateNumber(newTokenDisplay, (CONFIG.requestedTotal - 20000), CONFIG.targetTotal, 1000);
      
      // Calculate saved ratio
      const saved = CONFIG.requestedTotal - CONFIG.targetTotal;
      const percentSaved = Math.round((saved / CONFIG.requestedTotal) * 100);
      animateNumber(ratioDisplay, 0, percentSaved, 1000, "%");
      
      await wait(800);

      // 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)";
      
      limitIcon.className = "fa-solid fa-lock-open";
      limitIcon.style.color = "var(--success-color)";

      // Update Stats boxes styles
      boxOrig.classList.remove('critical');
      boxOrig.style.borderColor = "#444";
      origTokenDisplay.classList.remove('error-highlight');
      origTokenDisplay.style.color = "#888";

      boxNew.classList.add('success');
      newTokenDisplay.style.color = "var(--success-color)";
      newTokenDisplay.style.fontWeight = "bold";

      payloadView.innerHTML = `<span style="color:var(--success-color)">> REQUEST VALIDATED</span><br>> PAYLOAD SIZE: ${CONFIG.targetTotal.toLocaleString()}<br>> STATUS: READY FOR INJECTION`;

      injectBtn.innerHTML = '<i class="fa-solid fa-rocket"></i> INJECTED';
      injectBtn.style.borderColor = "var(--success-color)";
      injectBtn.style.color = "var(--success-color)";
      
      isProcessing = false;
    }

    // --- UTILS ---
    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() + suffix;
        if (progress < 1) {
          window.requestAnimationFrame(step);
        }
      };
      window.requestAnimationFrame(step);
    }

    // --- BACKGROUND CANVAS ---
    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 = '#00e5ff';
          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);
        ctx.strokeStyle = 'rgba(0, 229, 255, 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>