Spaces:
Running
Running
Download index.html from Walid-Kotb-1/HyperCache-AI-Demo: direct link, hf CLI and curl.
- Browser
- Download file 29.5 kB
-
https://huggingface.co/spaces/Walid-Kotb-1/HyperCache-AI-Demo/resolve/main/index.html
- Command line
-
hf download hf://spaces/Walid-Kotb-1/HyperCache-AI-Demo/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Walid-Kotb-1/HyperCache-AI-Demo/resolve/main/index.html
29.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>HyperCache AI — Interactive RAM/VRAM Calculator & Verified Benchmark Explorer</title> | |
| <style> | |
| :root { | |
| --bg: #0b0f19; | |
| --card: #111827; | |
| --card-alt: #1e293b; | |
| --border: #334155; | |
| --text: #f8fafc; | |
| --muted: #94a3b8; | |
| --accent: #38bdf8; | |
| --green: #10b981; | |
| --purple: #a855f7; | |
| --amber: #f59e0b; | |
| --red: #ef4444; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; | |
| line-height: 1.5; | |
| padding: 24px 16px 60px; | |
| } | |
| .container { max-width: 1120px; margin: 0 auto; } | |
| .hero { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 28px; | |
| margin-bottom: 24px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.4); | |
| } | |
| .badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; } | |
| .pill { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; | |
| text-decoration: none; color: white; background: #1e293b; border: 1px solid #475569; | |
| transition: transform 0.15s ease, border-color 0.15s ease; | |
| } | |
| .pill:hover { transform: translateY(-1px); border-color: var(--accent); } | |
| .pill.pypi { background: #1d4ed8; border-color: #3b82f6; } | |
| .pill.gh { background: #0f172a; border-color: #64748b; } | |
| .pill.hf { background: #b45309; border-color: #f59e0b; } | |
| .pill.pro { background: #059669; border-color: #10b981; } | |
| h1 { font-size: 28px; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.02em; } | |
| .subtitle { color: #cbd5e1; font-size: 16px; margin-bottom: 16px; } | |
| .subtitle b { color: var(--accent); } | |
| .notice-banner { | |
| background: rgba(56, 189, 248, 0.12); | |
| border: 1px solid rgba(56, 189, 248, 0.35); | |
| color: #e0f2fe; | |
| padding: 12px 16px; | |
| border-radius: 10px; | |
| font-size: 13.5px; | |
| margin-bottom: 18px; | |
| } | |
| .notice-banner code { | |
| color: #38bdf8; | |
| font-weight: 700; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| } | |
| .hero-actions { | |
| display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; | |
| background: rgba(15, 23, 42, 0.75); padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border); | |
| } | |
| .pip-box { | |
| display: flex; align-items: center; gap: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 15px; color: #38bdf8; font-weight: 600; | |
| } | |
| .copy-btn { | |
| background: #334155; color: white; border: none; padding: 6px 12px; border-radius: 6px; | |
| cursor: pointer; font-size: 12px; font-weight: 600; | |
| } | |
| .copy-btn:hover { background: #475569; } | |
| .cta-btn { | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| color: white; text-decoration: none; padding: 11px 20px; border-radius: 10px; | |
| font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; | |
| box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35); | |
| transition: transform 0.15s ease; | |
| } | |
| .cta-btn:hover { transform: translateY(-2px); } | |
| .tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } | |
| .tab-btn { | |
| background: var(--card); color: var(--muted); border: 1px solid var(--border); | |
| padding: 12px 20px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 14px; | |
| transition: all 0.15s ease; | |
| } | |
| .tab-btn.active { | |
| background: #1e293b; color: var(--accent); border-color: var(--accent); | |
| box-shadow: 0 0 0 1px var(--accent); | |
| } | |
| .tab-content { display: none; } | |
| .tab-content.active { display: block; } | |
| .panel { | |
| background: var(--card); border: 1px solid var(--border); border-radius: 14px; | |
| padding: 24px; margin-bottom: 22px; | |
| } | |
| .controls-grid { | |
| display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 18px; margin-bottom: 20px; | |
| } | |
| .control-group { | |
| background: var(--card-alt); padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border); | |
| } | |
| .control-group label { | |
| display: flex; justify-content: space-between; font-size: 13px; color: #cbd5e1; | |
| font-weight: 600; margin-bottom: 8px; | |
| } | |
| .control-group label span { color: var(--accent); font-weight: 800; } | |
| input[type="range"], select { | |
| width: 100%; accent-color: var(--accent); cursor: pointer; | |
| } | |
| select { | |
| background: #0f172a; color: white; border: 1px solid #475569; padding: 8px 10px; | |
| border-radius: 6px; font-weight: 600; | |
| } | |
| .run-btn { | |
| width: 100%; background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); | |
| color: white; border: none; padding: 14px; border-radius: 10px; font-size: 15px; | |
| font-weight: 700; cursor: pointer; margin-bottom: 22px; | |
| box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); | |
| } | |
| .run-btn:hover { opacity: 0.95; } | |
| .kpi-grid { | |
| display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); | |
| gap: 14px; margin-bottom: 22px; | |
| } | |
| .kpi-card { | |
| background: var(--card-alt); padding: 16px; border-radius: 10px; | |
| border-left: 4px solid var(--accent); | |
| } | |
| .kpi-card.green { border-left-color: var(--green); } | |
| .kpi-card.purple { border-left-color: var(--purple); } | |
| .kpi-card.amber { border-left-color: var(--amber); } | |
| .kpi-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } | |
| .kpi-val { font-size: 23px; font-weight: 800; color: white; } | |
| .kpi-sub { font-size: 12px; color: #cbd5e1; margin-top: 4px; } | |
| table { | |
| width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; | |
| background: #0f172a; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); | |
| } | |
| th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #1e293b; } | |
| th { background: #1e293b; color: #94a3b8; font-weight: 700; font-size: 12px; text-transform: uppercase; } | |
| tr.highlight { background: rgba(16, 185, 129, 0.12); font-weight: 700; } | |
| tr.highlight td { color: #34d399; } | |
| .badge-pass { background: rgba(16, 185, 129, 0.2); color: #34d399; padding: 3px 8px; border-radius: 6px; font-weight: 700; font-size: 12px; } | |
| .badge-fail { background: rgba(239, 68, 68, 0.2); color: #f87171; padding: 3px 8px; border-radius: 6px; font-weight: 700; font-size: 12px; } | |
| pre { | |
| background: #090d16; border: 1px solid var(--border); border-radius: 10px; | |
| padding: 16px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 13.5px; color: #e2e8f0; margin: 12px 0 20px; | |
| } | |
| .bar-wrap { margin-top: 16px; } | |
| .bar-row { margin-bottom: 12px; } | |
| .bar-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; font-weight: 600; } | |
| .bar-track { background: #0f172a; height: 12px; border-radius: 999px; overflow: hidden; border: 1px solid #334155; } | |
| .bar-fill { height: 100%; border-radius: 999px; transition: width 0.35s ease; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="hero"> | |
| <div class="badge-row"> | |
| <a class="pill pypi" href="https://pypi.org/project/hypercache-ai/" target="_blank">📦 Official PyPI: hypercache-ai v2.4.0</a> | |
| <a class="pill gh" href="https://github.com/WalWal1977/HyperCache-AI" target="_blank">💻 GitHub Repository</a> | |
| <a class="pill hf" href="https://huggingface.co/Walid-Kotb-1/HyperCache-AI" target="_blank">🤗 Hugging Face Model Card</a> | |
| <a class="pill pro" href="https://kotbster7.gumroad.com/l/hypercache-ai" target="_blank">🔑 Commercial PRO Vault (AES-256-GCM)</a> | |
| </div> | |
| <h1>⚡ HyperCache AI — Interactive RAM/VRAM Calculator & Verified Benchmarks</h1> | |
| <p class="subtitle"> | |
| Cut PyTorch / Hugging Face LLM KV-Cache VRAM by <b>58.2%</b> (<b>+30% faster decoding</b>) AND compress Vector Database / RAG Embeddings by <b>57.3%</b> (<b>2.34x faster search</b>) with zero model retraining. | |
| </p> | |
| <div class="notice-banner"> | |
| ℹ️ <b>Interactive Memory Calculator & Pre-Verified Benchmark Viewer:</b> This static web tool calculates your exact RAM/VRAM memory footprint savings and displays our pre-verified benchmark results tested on <b>NVIDIA Tesla T4 (FP16)</b> and a <b>5,000-Document RAG corpus</b>. It does not execute compression in the browser—to run actual compression on your own models and vectors in Python, install our official SDK via <code>pip install hypercache-ai</code>. | |
| </div> | |
| <div class="hero-actions"> | |
| <div class="pip-box"> | |
| <span id="pip-cmd">pip install hypercache-ai</span> | |
| <button class="copy-btn" onclick="copyText('pip install hypercache-ai', this)">Copy pip</button> | |
| </div> | |
| <a class="cta-btn" href="https://kotbster7.gumroad.com/l/hypercache-ai" target="_blank"> | |
| 👉 Get Instant Annual PRO License Key on Gumroad ($99/yr Launch Offer) | |
| </a> | |
| </div> | |
| </div> | |
| <div class="tabs"> | |
| <button class="tab-btn active" onclick="switchTab('tab-rag', this)">🧠 Engine 1: Vector DB RAM Calculator & Verified Results</button> | |
| <button class="tab-btn" onclick="switchTab('tab-kv', this)">⚡ Engine 2: LLM KV-Cache VRAM Calculator & Tesla T4 Results</button> | |
| <button class="tab-btn" onclick="switchTab('tab-roi', this)">💰 Cloud GPU & Vector DB Savings Calculator</button> | |
| <button class="tab-btn" onclick="switchTab('tab-code', this)">💎 3-Line Python Quickstart & PRO Tiers</button> | |
| </div> | |
| <!-- TAB 1: VECTOR DB CALCULATOR & VERIFIED BENCHMARK --> | |
| <div id="tab-rag" class="tab-content active"> | |
| <div class="panel"> | |
| <h2 style="margin-bottom: 6px; font-size: 20px;">🧠 Vector Database RAM Footprint Calculator & Verified 5,000-Doc Benchmark</h2> | |
| <p style="color: var(--muted); font-size: 14px; margin-bottom: 18px;"> | |
| Use the sliders below to calculate your exact Vector Database index RAM reduction, alongside our verified benchmark metrics measured on <code>5,000</code> documents (<code>1536-D → 656-D</code>). | |
| </p> | |
| <div class="controls-grid"> | |
| <div class="control-group"> | |
| <label>Document Vectors in Your Index <span id="lbl-docs">5,000</span></label> | |
| <input type="range" id="inp-docs" min="1000" max="100000" step="1000" value="5000" oninput="document.getElementById('lbl-docs').innerText = Number(this.value).toLocaleString(); calcRagFootprint();" /> | |
| </div> | |
| <div class="control-group"> | |
| <label>Original Embedding Model Dim <span id="lbl-dim">1536-D</span></label> | |
| <select id="inp-dim" onchange="document.getElementById('lbl-dim').innerText = this.value + '-D'; calcRagFootprint();"> | |
| <option value="1536" selected>1536-D (OpenAI text-embedding-3 / ada-002)</option> | |
| <option value="1024">1024-D (Cohere Embed v3 / BGE-Large)</option> | |
| <option value="768">768-D (Sentence-Transformers / E5-Base)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button class="run-btn" onclick="calcRagFootprint()">📊 Update Vector DB Memory Footprint Calculation</button> | |
| <div class="kpi-grid"> | |
| <div class="kpi-card"> | |
| <div class="kpi-label">Calculated Dimension Reduction</div> | |
| <div class="kpi-val" id="rag-kpi-dim">1536-D → 656-D</div> | |
| <div class="kpi-sub" id="rag-kpi-mb">Index RAM: 29.30 MB → 12.51 MB</div> | |
| </div> | |
| <div class="kpi-card green"> | |
| <div class="kpi-label">Calculated Vector RAM Saved</div> | |
| <div class="kpi-val" id="rag-kpi-ram">-57.29%</div> | |
| <div class="kpi-sub">2.34x Faster Cosine Similarity Search</div> | |
| </div> | |
| <div class="kpi-card purple"> | |
| <div class="kpi-label">Verified Top-1 / Recall@10</div> | |
| <div class="kpi-val">100.0% / 95.20%</div> | |
| <div class="kpi-sub">Measured on 5,000-Doc Python Benchmark</div> | |
| </div> | |
| <div class="kpi-card amber"> | |
| <div class="kpi-label">Verified Score Correlation</div> | |
| <div class="kpi-val">99.92%</div> | |
| <div class="kpi-sub">vs 66.28% for Standard Truncation</div> | |
| </div> | |
| </div> | |
| <div class="bar-wrap"> | |
| <div class="bar-row"> | |
| <div class="bar-label"><span>HyperCache AI Engine — Verified Recall@10 (5,000-Doc Benchmark)</span><span style="color:#34d399;">95.20%</span></div> | |
| <div class="bar-track"><div class="bar-fill" style="width:95.2%; background:#10b981;"></div></div> | |
| </div> | |
| <div class="bar-row"> | |
| <div class="bar-label"><span>Standard Dimension Truncation — Verified Recall@10 (5,000-Doc Benchmark)</span><span style="color:#f87171;">22.90%</span></div> | |
| <div class="bar-track"><div class="bar-fill" style="width:22.9%; background:#ef4444;"></div></div> | |
| </div> | |
| </div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Vector DB Compression Method (Verified 5,000-Doc Benchmark)</th> | |
| <th>Compressed Dim</th> | |
| <th>RAM Saved</th> | |
| <th>Verified Top-1 Match (↑)</th> | |
| <th>Verified Recall@10 (↑)</th> | |
| <th>Verified Cosine Correlation (↑)</th> | |
| </tr> | |
| </thead> | |
| <tbody id="rag-tbody"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- TAB 2: LLM KV-CACHE CALCULATOR & TESLA T4 RESULTS --> | |
| <div id="tab-kv" class="tab-content"> | |
| <div class="panel"> | |
| <h2 style="margin-bottom: 6px; font-size: 20px;">⚡ GPU KV-Cache VRAM Calculator & Verified NVIDIA Tesla T4 Benchmarks</h2> | |
| <p style="color: var(--muted); font-size: 14px; margin-bottom: 18px;"> | |
| Calculate your GPU KV-Cache VRAM savings for any context length and batch size, alongside our verified results tested on <b>NVIDIA Tesla T4 (FP16)</b> with <code>Qwen/Qwen2.5-3B-Instruct</code> and <code>Qwen/Qwen2.5-7B-Instruct</code>. | |
| </p> | |
| <div class="controls-grid"> | |
| <div class="control-group"> | |
| <label>Target LLM Architecture <span id="lbl-model">Qwen2.5-7B</span></label> | |
| <select id="inp-model" onchange="document.getElementById('lbl-model').innerText = this.options[this.selectedIndex].text.split(' ')[0]; calcKvFootprint();"> | |
| <option value="3b">Qwen2.5-3B-Instruct (FP16 — Tesla T4)</option> | |
| <option value="7b" selected>Qwen2.5-7B-Instruct (FP16 — Tesla T4)</option> | |
| <option value="8b">Llama-3.1-8B-Instruct (FP16)</option> | |
| </select> | |
| </div> | |
| <div class="control-group"> | |
| <label>Prompt Context Length (Tokens) <span id="lbl-ctx">2,764</span></label> | |
| <input type="range" id="inp-ctx" min="1024" max="32768" step="256" value="2764" oninput="document.getElementById('lbl-ctx').innerText = Number(this.value).toLocaleString(); calcKvFootprint();" /> | |
| </div> | |
| <div class="control-group"> | |
| <label>Concurrent Batch Requests <span id="lbl-batch">1</span></label> | |
| <input type="range" id="inp-batch" min="1" max="32" step="1" value="1" oninput="document.getElementById('lbl-batch').innerText = this.value; calcKvFootprint();" /> | |
| </div> | |
| </div> | |
| <div class="kpi-grid"> | |
| <div class="kpi-card"> | |
| <div class="kpi-label">Calculated KV Tokens</div> | |
| <div class="kpi-val" id="kv-kpi-tok">2,764 → 1,156</div> | |
| <div class="kpi-sub">-58.18% Token Footprint</div> | |
| </div> | |
| <div class="kpi-card green"> | |
| <div class="kpi-label">Calculated KV-Cache VRAM</div> | |
| <div class="kpi-val" id="kv-kpi-vram">151.2 MB → 63.2 MB</div> | |
| <div class="kpi-sub" id="kv-kpi-saved">Saves 87.94 MB VRAM / request</div> | |
| </div> | |
| <div class="kpi-card purple"> | |
| <div class="kpi-label">Verified Tesla T4 Speed</div> | |
| <div class="kpi-val">19.7 tok/s (+30%)</div> | |
| <div class="kpi-sub">Measured on Qwen2.5-3B (vs 15.2 tok/s)</div> | |
| </div> | |
| <div class="kpi-card amber"> | |
| <div class="kpi-label">Verified Needle Recall</div> | |
| <div class="kpi-val">100.0% Verbatim</div> | |
| <div class="kpi-sub">Sliding Window: 0% (Hallucinates)</div> | |
| </div> | |
| </div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>KV-Cache Method (Verified Tesla T4 Benchmark + Calculated VRAM)</th> | |
| <th>Cached Tokens</th> | |
| <th>Estimated KV VRAM</th> | |
| <th>Verified T4 Speed</th> | |
| <th>Needle Fact Retrieved?</th> | |
| <th>Verified Model Output on NVIDIA Tesla T4</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><b>1. Uncompressed Baseline (100% RAM)</b></td> | |
| <td id="kv-td-t1">2,764</td> | |
| <td id="kv-td-v1">151.16 MB</td> | |
| <td>15.2 tok/s</td> | |
| <td><span class="badge-pass">Yes (100%)</span></td> | |
| <td><code>The primary vault authorization key is 'HC-ENTERPRISE-9940-X' and the reserve liquidity threshold is 90.37 million USD</code></td> | |
| </tr> | |
| <tr class="highlight"> | |
| <td><b>2. HyperCache AI SDK (-58.2% VRAM)</b></td> | |
| <td id="kv-td-t2">1,156</td> | |
| <td id="kv-td-v2">63.22 MB</td> | |
| <td><b>19.7 tok/s (+30%)</b></td> | |
| <td><span class="badge-pass">Yes (100% Verbatim)</span></td> | |
| <td><code>The primary vault authorization key is 'HC-ENTERPRISE-9940-X' and the reserve liquidity threshold is 90.37 million USD</code></td> | |
| </tr> | |
| <tr> | |
| <td><b>3. Standard Sliding Window (-58.2% VRAM)</b></td> | |
| <td id="kv-td-t3">1,156</td> | |
| <td id="kv-td-v3">63.22 MB</td> | |
| <td>19.1 tok/s</td> | |
| <td><span class="badge-fail">Failed (0%)</span></td> | |
| <td><code>The primary vault authorization key is the exact primary vault authorization key...</code> <i>(Loops & Hallucinates)</i></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- TAB 3: ROI CALCULATOR --> | |
| <div id="tab-roi" class="tab-content"> | |
| <div class="panel"> | |
| <h2 style="margin-bottom: 6px; font-size: 20px;">💰 Enterprise GPU & Vector DB Cloud Cost Savings Calculator</h2> | |
| <p style="color: var(--muted); font-size: 14px; margin-bottom: 18px;"> | |
| Estimate how much cloud RAM and GPU VRAM budget your team saves annually with HyperCache AI. | |
| </p> | |
| <div class="controls-grid"> | |
| <div class="control-group"> | |
| <label>Vector DB Vectors (Millions) <span id="lbl-roi-vec">10M</span></label> | |
| <input type="range" id="inp-roi-vec" min="1" max="100" step="1" value="10" oninput="document.getElementById('lbl-roi-vec').innerText = this.value + 'M'; calcRoi();" /> | |
| </div> | |
| <div class="control-group"> | |
| <label>Active Cloud GPU Instances <span id="lbl-roi-gpu">4 GPUs</span></label> | |
| <input type="range" id="inp-roi-gpu" min="1" max="32" step="1" value="4" oninput="document.getElementById('lbl-roi-gpu').innerText = this.value + ' GPUs'; calcRoi();" /> | |
| </div> | |
| </div> | |
| <div class="kpi-grid"> | |
| <div class="kpi-card green"> | |
| <div class="kpi-label">Estimated Annual Cloud Savings</div> | |
| <div class="kpi-val" id="roi-annual">$14,820 / yr</div> | |
| <div class="kpi-sub" id="roi-monthly">$1,235 / month saved on GPU + Vector RAM</div> | |
| </div> | |
| <div class="kpi-card purple"> | |
| <div class="kpi-label">Developer PRO License Cost</div> | |
| <div class="kpi-val">$99 / year</div> | |
| <div class="kpi-sub">Early-Bird Launch Offer (Normally $199/yr)</div> | |
| </div> | |
| <div class="kpi-card amber"> | |
| <div class="kpi-label">Net First-Year ROI</div> | |
| <div class="kpi-val" id="roi-mult">149x Return</div> | |
| <div class="kpi-sub">Pays for itself in the first 3 days</div> | |
| </div> | |
| </div> | |
| <a class="cta-btn" href="https://kotbster7.gumroad.com/l/hypercache-ai" target="_blank"> | |
| 🔑 Unlock Your Annual PRO License Key on Gumroad Now ($99/yr) → | |
| </a> | |
| </div> | |
| </div> | |
| <!-- TAB 4: QUICKSTART & PRICING --> | |
| <div id="tab-code" class="tab-content"> | |
| <div class="panel"> | |
| <h2 style="margin-bottom: 8px; font-size: 20px;">💻 Run Real Compression on Your Machine in 30 Seconds (`pip`)</h2> | |
| <p style="color: var(--muted); font-size: 14px;"> | |
| Install the actual AES-256-GCM Python SDK directly from <b>Official PyPI</b> and test on your own models or in Google Colab using our public evaluation key (<code>HYPERCACHE-FREE-TRIAL-2026</code>): | |
| </p> | |
| <pre>pip install hypercache-ai torch transformers accelerate</pre> | |
| <div style="display:flex; justify-content:space-between; align-items:center;"> | |
| <span style="font-size:13px; font-weight:700; color:var(--accent);">Python Dual-Engine Quickstart:</span> | |
| <button class="copy-btn" onclick="copyText(document.getElementById('py-snippet').innerText, this)">Copy Python Code</button> | |
| </div> | |
| <pre id="py-snippet">import hypercache_sdk_client | |
| # 1. Unlock the AES-256-GCM dual engine in RAM | |
| engine = hypercache_sdk_client.load_hypercache_engine( | |
| license_key="HYPERCACHE-FREE-TRIAL-2026" | |
| ) | |
| # 2A. Compress HuggingFace LLM KV-Cache on the fly (58.2% VRAM saved, +30% faster decoding) | |
| compressed_kv = engine.compress_torch_cache( | |
| past_key_values, _inp_ids=input_ids, _mdl=model, _q_len=48 | |
| ) | |
| # 2B. Compress Vector DB / RAG Document & Query Embeddings (1536-D -> 656-D, 57.3% RAM saved) | |
| compressed_docs = engine.fit_compress_embeddings(doc_embeddings_1536d) | |
| compressed_queries = engine.compress_query_embeddings(query_embeddings_1536d)</pre> | |
| <h3 style="margin: 20px 0 10px; font-size: 18px;">💎 Annual Licensing Tiers & Seat Management</h3> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Feature</th> | |
| <th>Free Evaluation Trial</th> | |
| <th>Developer / Startup PRO</th> | |
| <th>Enterprise Cluster PRO</th> | |
| <th>Enterprise Unlimited (K8s)</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="highlight"> | |
| <td><b>Annual Price (Launch Offer)</b></td> | |
| <td><b>Free</b></td> | |
| <td><s>$199/yr</s> <b>$99 / year</b></td> | |
| <td><s>$999/yr</s> <b>$399 / year</b></td> | |
| <td><s>$2,999/yr</s> <b>$1,499 / year</b></td> | |
| </tr> | |
| <tr> | |
| <td><b>Active Machine Seats</b></td> | |
| <td>1 Machine (Non-Transferable)</td> | |
| <td><b>2 Transferable Seats</b></td> | |
| <td><b>10 Transferable Server Seats</b></td> | |
| <td><b>Unlimited Nodes / Containers</b></td> | |
| </tr> | |
| <tr> | |
| <td><b>Total Runs Allowed</b></td> | |
| <td>15 Runs (Hardware-Locked)</td> | |
| <td><b>Unlimited (24/7 Production)</b></td> | |
| <td><b>Unlimited (24/7 Production)</b></td> | |
| <td><b>Unlimited (24/7 Production)</b></td> | |
| </tr> | |
| <tr> | |
| <td><b>Max Context / Vector DB Size</b></td> | |
| <td>Up to 4,096 Tokens / Dims</td> | |
| <td><b>Unlimited (32k–1M+ Tokens)</b></td> | |
| <td><b>Unlimited (32k–1M+ Tokens)</b></td> | |
| <td><b>Unlimited (Cluster-Wide)</b></td> | |
| </tr> | |
| <tr> | |
| <td><b>Instant Checkout</b></td> | |
| <td><code>HYPERCACHE-FREE-TRIAL-2026</code></td> | |
| <td><a href="https://kotbster7.gumroad.com/l/hypercache-ai" target="_blank" style="color:#38bdf8; font-weight:700;">Buy Developer PRO ($99/yr) →</a></td> | |
| <td><a href="https://kotbster7.gumroad.com/l/hypercache-ai" target="_blank" style="color:#38bdf8; font-weight:700;">Buy Cluster PRO ($399/yr) →</a></td> | |
| <td><a href="https://kotbster7.gumroad.com/l/hypercache-ai" target="_blank" style="color:#38bdf8; font-weight:700;">Buy Unlimited K8s ($1,499/yr) →</a></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function switchTab(tabId, btn) { | |
| document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active')); | |
| document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active')); | |
| document.getElementById(tabId).classList.add('active'); | |
| btn.classList.add('active'); | |
| } | |
| function copyText(txt, btn) { | |
| navigator.clipboard.writeText(txt); | |
| const old = btn.innerText; | |
| btn.innerText = 'Copied! ✓'; | |
| setTimeout(() => { btn.innerText = old; }, 1500); | |
| } | |
| // Pure memory footprint calculation + fixed verified benchmark numbers (no fake jitter!) | |
| function calcRagFootprint() { | |
| const docs = parseInt(document.getElementById('inp-docs').value, 10); | |
| const dim = parseInt(document.getElementById('inp-dim').value, 10); | |
| const compDim = Math.round((dim * 0.427) / 16) * 16; | |
| const savedPct = ((1 - compDim / dim) * 100).toFixed(2); | |
| const origMb = ((docs * dim * 4) / (1024 * 1024)).toFixed(2); | |
| const compMb = ((docs * compDim * 4) / (1024 * 1024)).toFixed(2); | |
| document.getElementById('rag-kpi-dim').innerText = `${dim}-D → ${compDim}-D`; | |
| document.getElementById('rag-kpi-mb').innerText = `Index RAM (${docs.toLocaleString()} docs): ${origMb} MB → ${compMb} MB`; | |
| document.getElementById('rag-kpi-ram').innerText = `-${savedPct}%`; | |
| document.getElementById('rag-tbody').innerHTML = ` | |
| <tr> | |
| <td><b>1. Uncompressed Baseline (100% RAM)</b></td> | |
| <td><code>${dim}-D</code></td> | |
| <td>0.00%</td> | |
| <td>100.0%</td> | |
| <td>100.00%</td> | |
| <td>100.00%</td> | |
| </tr> | |
| <tr> | |
| <td><b>2. Standard Dimension Truncation</b></td> | |
| <td><code>${compDim}-D</code></td> | |
| <td>${savedPct}%</td> | |
| <td>99.0%</td> | |
| <td><span class="badge-fail">22.90%</span></td> | |
| <td>66.28%</td> | |
| </tr> | |
| <tr class="highlight"> | |
| <td><b>3. HyperCache AI Vector Engine (Ours)</b></td> | |
| <td><code><b>${compDim}-D</b></code></td> | |
| <td><b>${savedPct}%</b></td> | |
| <td><span class="badge-pass">100.0%</span></td> | |
| <td><span class="badge-pass">95.20%</span></td> | |
| <td><b>99.92%</b></td> | |
| </tr> | |
| `; | |
| } | |
| function calcKvFootprint() { | |
| const model = document.getElementById('inp-model').value; | |
| const ctx = parseInt(document.getElementById('inp-ctx').value, 10); | |
| const batch = parseInt(document.getElementById('inp-batch').value, 10); | |
| const kept = Math.round(ctx * 0.4182); | |
| let mbPerTok = 0.0546888; // 7B default | |
| if (model === '3b') mbPerTok = 0.0351555; | |
| if (model === '8b') mbPerTok = 0.0625; | |
| const origVram = (ctx * mbPerTok * batch).toFixed(2); | |
| const compVram = (kept * mbPerTok * batch).toFixed(2); | |
| const savedVram = (origVram - compVram).toFixed(2); | |
| document.getElementById('kv-kpi-tok').innerText = `${ctx.toLocaleString()} → ${kept.toLocaleString()}`; | |
| document.getElementById('kv-kpi-vram').innerText = `${origVram} MB → ${compVram} MB`; | |
| document.getElementById('kv-kpi-saved').innerText = `Saves ${savedVram} MB VRAM (${batch}x batch)`; | |
| document.getElementById('kv-td-t1').innerText = ctx.toLocaleString(); | |
| document.getElementById('kv-td-v1').innerText = `${origVram} MB`; | |
| document.getElementById('kv-td-t2').innerText = kept.toLocaleString(); | |
| document.getElementById('kv-td-v2').innerText = `${compVram} MB`; | |
| document.getElementById('kv-td-t3').innerText = kept.toLocaleString(); | |
| document.getElementById('kv-td-v3').innerText = `${compVram} MB`; | |
| } | |
| function calcRoi() { | |
| const vecM = parseInt(document.getElementById('inp-roi-vec').value, 10); | |
| const gpus = parseInt(document.getElementById('inp-roi-gpu').value, 10); | |
| const monthlySaved = Math.round((vecM * 42) + (gpus * 210)); | |
| const annualSaved = monthlySaved * 12; | |
| const mult = Math.round(annualSaved / 99); | |
| document.getElementById('roi-annual').innerText = `$${annualSaved.toLocaleString()} / yr`; | |
| document.getElementById('roi-monthly').innerText = `$${monthlySaved.toLocaleString()} / month saved on GPU + Vector RAM`; | |
| document.getElementById('roi-mult').innerText = `${mult}x Return`; | |
| } | |
| calcRagFootprint(); | |
| calcKvFootprint(); | |
| calcRoi(); | |
| </script> | |
| </body> | |
| </html> | |