HyperCache-AI-Demo / index.html
Walid-Kotb-1's picture
Upload 2 files
1196364 verified
Raw History Blame Contribute Delete
29.5 kB
<!DOCTYPE html>
<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>