This commit is contained in:
Oleg Maslov
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Waggle · Benchmarks</title>
|
||||
<script>document.documentElement.classList.add('js');</script>
|
||||
<link rel="stylesheet" href="../styles/waggle.css">
|
||||
<style>
|
||||
body { height:100vh; overflow:hidden; display:flex; flex-direction:column; }
|
||||
.controls { flex:none; display:flex; align-items:center; gap:14px; padding:11px 20px; border-bottom:1px solid var(--line-soft); background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); z-index:30; }
|
||||
.controls .lab { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }
|
||||
.seg { display:inline-flex; padding:3px; gap:3px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line-soft); }
|
||||
.seg button { font-family:var(--sans); font-size:12.5px; font-weight:600; cursor:pointer; border:0; background:transparent; color:var(--text-muted); padding:6px 13px; border-radius:7px; transition:.14s; white-space:nowrap; }
|
||||
.seg button.on { background:var(--honey); color:#1a1407; }
|
||||
.controls .vlabel { font-size:12.5px; color:var(--text-muted); } .controls .vlabel b { color:var(--text); font-weight:600; }
|
||||
.controls .right { margin-left:auto; display:flex; align-items:center; gap:10px; }
|
||||
.tbtn { width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--text-2); cursor:pointer; }
|
||||
.tbtn:hover { border-color:var(--honey-line); color:var(--honey); }
|
||||
.stage { flex:1; min-height:0; overflow:auto; }
|
||||
.wrap { max-width:1000px; margin:0 auto; padding:30px 32px 70px; }
|
||||
.view { display:none; } .view.on { display:block; }
|
||||
|
||||
.head { margin-bottom:24px; }
|
||||
.head .eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--honey); margin-bottom:12px; display:flex; align-items:center; gap:9px; } .head .eyebrow::before { content:''; width:20px; height:1px; background:var(--honey-line); }
|
||||
.head h1 { font-size:28px; font-weight:650; letter-spacing:-0.02em; margin:0 0 10px; } .head h1 em { font-style:normal; color:var(--honey); }
|
||||
.head p { font-size:15px; color:var(--text-muted); line-height:1.55; margin:0; max-width:64ch; } .head p b { color:var(--text-2); }
|
||||
|
||||
/* category framing */
|
||||
.frame-cats { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:30px; }
|
||||
.fcat { padding:22px; border-radius:var(--r-lg); border:1px solid var(--line-soft); background:var(--surface); }
|
||||
.fcat.us { border-color:var(--honey-line); background:linear-gradient(155deg,var(--surface-2),var(--surface)); }
|
||||
.fcat .tag { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:10px; } .fcat.us .tag { color:var(--honey); }
|
||||
.fcat h3 { font-size:18px; font-weight:650; letter-spacing:-0.01em; margin:0 0 8px; }
|
||||
.fcat p { margin:0; font-size:13px; color:var(--text-muted); line-height:1.55; }
|
||||
.fcat .who { margin-top:12px; font-size:11.5px; color:var(--text-dim); } .fcat .who b { color:var(--text-2); }
|
||||
|
||||
/* matrix */
|
||||
.matrix { border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
|
||||
.mtable { width:100%; border-collapse:collapse; }
|
||||
.mtable th, .mtable td { padding:13px 10px; text-align:center; border-bottom:1px solid var(--line-soft); }
|
||||
.mtable thead th { font-size:11.5px; font-weight:650; color:var(--text-2); position:sticky; top:0; background:var(--surface-2); }
|
||||
.mtable thead th.usCol { color:var(--honey); }
|
||||
.mtable th.cap { text-align:left; font-size:13px; font-weight:600; color:var(--text); width:32%; }
|
||||
.mtable td.cap { text-align:left; font-size:13px; color:var(--text-2); width:32%; }
|
||||
.mtable .usCol { background:color-mix(in srgb,var(--honey) 7%,transparent); }
|
||||
.mtable td.usCol { border-left:1px solid var(--honey-line); border-right:1px solid var(--honey-line); }
|
||||
.mtable tbody tr:last-child td.usCol { border-bottom:1px solid var(--honey-line); }
|
||||
.mk { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:999px; font-size:13px; }
|
||||
.mk.yes { color:var(--healthy); } .mk.us { color:var(--honey); font-weight:700; }
|
||||
.mk.part { color:var(--attention); } .mk.no { color:var(--text-dim); }
|
||||
.colsub { font-size:9.5px; font-weight:400; color:var(--text-dim); display:block; margin-top:2px; font-family:var(--mono); }
|
||||
.legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; font-size:12.5px; color:var(--text-muted); }
|
||||
.legend span { display:inline-flex; align-items:center; gap:7px; }
|
||||
.disclaimer { margin-top:18px; display:flex; gap:11px; align-items:flex-start; padding:14px 16px; border-radius:var(--r); background:var(--bg-2); border:1px solid var(--line-soft); }
|
||||
.disclaimer svg { width:16px; height:16px; stroke:var(--text-muted); fill:none; stroke-width:1.8; flex:none; margin-top:1px; }
|
||||
.disclaimer p { margin:0; font-size:12px; color:var(--text-dim); line-height:1.55; } .disclaimer b { color:var(--text-2); }
|
||||
|
||||
/* memory bench */
|
||||
.bench { display:grid; gap:12px; margin-top:8px; }
|
||||
.barrow { display:grid; grid-template-columns:180px 1fr 64px; gap:16px; align-items:center; }
|
||||
.barrow .blab { font-size:13.5px; font-weight:600; text-align:right; line-height:1.15; } .barrow .blab small { display:block; font-weight:400; color:var(--text-dim); font-size:10.5px; font-family:var(--mono); margin-top:2px; }
|
||||
.barrow .track { height:34px; border-radius:9px; background:var(--surface); border:1px solid var(--line-soft); overflow:hidden; }
|
||||
.barrow .fill { height:100%; border-radius:8px 0 0 8px; background:var(--surface-3); }
|
||||
.barrow.us .fill { background:linear-gradient(90deg,var(--honey-deep),var(--honey-bright)); box-shadow:var(--honey-glow); }
|
||||
.barrow .bval { font-family:var(--mono); font-size:14px; font-weight:600; color:var(--text-2); } .barrow.us .bval { color:var(--honey); }
|
||||
.benchstats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:26px 0; }
|
||||
.bs { padding:20px; border-radius:var(--r-lg); border:1px solid var(--line-soft); background:var(--surface); } .bs .v { font-size:32px; font-weight:750; letter-spacing:-0.03em; color:var(--honey); } .bs .l { font-size:13px; color:var(--text-muted); margin-top:6px; } .bs .l b { color:var(--text); }
|
||||
|
||||
@media (max-width:820px){ .frame-cats { grid-template-columns:1fr; } .mtable thead th, .mtable td { padding:10px 5px; font-size:10px; } .barrow { grid-template-columns:110px 1fr 50px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="controls">
|
||||
<span class="lab">Benchmarks · view</span>
|
||||
<div class="seg" id="seg">
|
||||
<button class="on" data-v="caps">vs competitors</button>
|
||||
<button data-v="memory">Memory SOTA</button>
|
||||
</div>
|
||||
<span class="vlabel" id="vlabel"><b>Capabilities</b> — where Waggle sits vs the field</span>
|
||||
<div class="right"><button class="tbtn" id="tbtn" title="Toggle theme">☾</button></div>
|
||||
</div>
|
||||
|
||||
<div class="stage">
|
||||
<!-- CAPS -->
|
||||
<div class="view on wrap" data-view="caps">
|
||||
<div class="head">
|
||||
<div class="eyebrow">How we're different</div>
|
||||
<h1>They automate tasks. <em>Waggle remembers you.</em></h1>
|
||||
<p>The strong agents today are <b>terminal coding tools</b> for engineers. Waggle plays a different game: a <b>persistent, local-first memory layer</b> for knowledge workers that even <b>runs those agents inside it</b>. Here's the honest lay of the land.</p>
|
||||
</div>
|
||||
|
||||
<div class="frame-cats">
|
||||
<div class="fcat">
|
||||
<div class="tag">The field</div>
|
||||
<h3>Task agents</h3>
|
||||
<p>Powerful, mostly terminal-based, model-locked, and built for developers. Each session starts fresh; the intelligence lives in the model, not in a memory of you.</p>
|
||||
<div class="who"><b>Claude Code · Codex · Claude Cowork · Hermes · Odysseus</b></div>
|
||||
</div>
|
||||
<div class="fcat us">
|
||||
<div class="tag">Our category</div>
|
||||
<h3>A memory layer + workspace</h3>
|
||||
<p>Knows you and your work across every session, runs on any model (even local), is built for non-technical experts — and can launch the task agents into its shared memory.</p>
|
||||
<div class="who"><b>Waggle</b> — complements them, doesn't compete head-on</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="matrix">
|
||||
<table class="mtable">
|
||||
<thead><tr>
|
||||
<th class="cap">Capability</th>
|
||||
<th class="usCol">Waggle</th>
|
||||
<th>Claude Code<span class="colsub">CLI</span></th>
|
||||
<th>Codex<span class="colsub">CLI</span></th>
|
||||
<th>Cowork<span class="colsub">Anthropic</span></th>
|
||||
<th>Hermes<span class="colsub">agent</span></th>
|
||||
<th>Odysseus<span class="colsub">agent</span></th>
|
||||
</tr></thead>
|
||||
<tbody id="mbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span><span class="mk yes">●</span>Yes</span>
|
||||
<span><span class="mk part">◐</span>Partial / limited</span>
|
||||
<span><span class="mk no">○</span>No / not the focus</span>
|
||||
</div>
|
||||
<div class="disclaimer">
|
||||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg>
|
||||
<p><b>This is a positioning view, not a lab benchmark</b> — capabilities as understood June 2026, focused on the dimensions Waggle is built around. Coding agents are genuinely excellent at deep code work (the last row), which is exactly why Waggle <b>launches them</b> rather than replacing them. The one head-to-head lab result is the memory benchmark → see "Memory SOTA".</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MEMORY -->
|
||||
<div class="view wrap" data-view="memory">
|
||||
<div class="head">
|
||||
<div class="eyebrow">State of the art · LoCoMo · June 2026</div>
|
||||
<h1>The best long-term memory <em>on record.</em></h1>
|
||||
<p>On <b>LoCoMo</b> — the standard test for long-term conversational memory — Waggle's open-source substrate scores <b>87.66%</b>, a new state of the art, measured under the prior leader's own protocol and judge.</p>
|
||||
</div>
|
||||
<div class="bench">
|
||||
<div class="barrow us"><div class="blab">Waggle · Hive Mind<small>ours · local</small></div><div class="track"><div class="fill" style="width:87.7%"></div></div><div class="bval">87.66</div></div>
|
||||
<div class="barrow"><div class="blab">Memori<small>prev. SOTA</small></div><div class="track"><div class="fill" style="width:81.95%"></div></div><div class="bval">81.95</div></div>
|
||||
<div class="barrow"><div class="blab">LangMem<small>corrected</small></div><div class="track"><div class="fill" style="width:78.05%"></div></div><div class="bval">78.05</div></div>
|
||||
<div class="barrow"><div class="blab">Mem0<small>baseline</small></div><div class="track"><div class="fill" style="width:62.47%"></div></div><div class="bval">62.47</div></div>
|
||||
</div>
|
||||
<div class="benchstats">
|
||||
<div class="bs"><div class="v">+5.71</div><div class="l">points over the prior best · <b>z = 4.42, p < 10⁻⁵</b></div></div>
|
||||
<div class="bs"><div class="v">92.75%</div><div class="l">single-hop recall — <b>~1pt off the full-context ceiling</b></div></div>
|
||||
<div class="bs"><div class="v">100%</div><div class="l">local — warm recalls in <b>58–83 ms</b>, on-device</div></div>
|
||||
</div>
|
||||
<div class="disclaimer">
|
||||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg>
|
||||
<p><b>LoCoMo</b>, N = 1,540, GPT-4.1-mini as answerer & judge — the prior SOTA's exact published protocol, reproduced in-harness to 0.03 points before comparison. The intelligence lives in the <b>memory layer, not the model</b>, so it travels onto a small local model too. Honest caveat: higher token use per question than the leanest systems; efficiency work underway. Reproducible offline: <span style="font-family:var(--mono);color:var(--text-2)">github.com/marolinik/hive-mind</span>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const root = document.documentElement, tbtn = document.getElementById('tbtn');
|
||||
function setTheme(t){ root.setAttribute('data-theme', t); tbtn.textContent = t==='dark'?'☾':'☀'; try{localStorage.setItem('waggle-concept-theme',t);}catch(e){} }
|
||||
setTheme((()=>{ try{ return localStorage.getItem('waggle-concept-theme')||'dark'; }catch(e){ return 'dark'; } })());
|
||||
tbtn.onclick = () => setTheme(root.getAttribute('data-theme')==='dark'?'light':'dark');
|
||||
window.addEventListener('message', e => { if(e.data && e.data.theme) setTheme(e.data.theme); });
|
||||
window.addEventListener('storage', e => { if(e.key==='waggle-concept-theme' && e.newValue) setTheme(e.newValue); });
|
||||
|
||||
// matrix data — Y=yes, P=partial, N=no. Order: Waggle, ClaudeCode, Codex, Cowork, Hermes, Odysseus
|
||||
const CAPS = [
|
||||
['Persistent memory across sessions', ['Y','P','N','P','P','P']],
|
||||
['Local-first & private by default', ['Y','N','N','N','P','P']],
|
||||
['Any model — incl. small local models', ['Y','N','N','N','P','P']],
|
||||
['Built for non-technical experts', ['Y','N','N','P','N','N']],
|
||||
['Runs your existing coding agents', ['Y','N','N','N','N','N']],
|
||||
['Self-evolving skills', ['Y','N','N','N','P','N']],
|
||||
['Skills shared across agents/workspaces', ['Y','P','P','N','P','N']],
|
||||
['Multi-agent swarm', ['Y','P','N','P','P','Y']],
|
||||
['Native desktop app · Win + Mac', ['Y','N','N','P','N','N']],
|
||||
['Audit-ready / EU AI Act', ['Y','P','P','P','N','N']],
|
||||
['Deep coding in the terminal', ['P','Y','Y','P','P','Y']],
|
||||
];
|
||||
const MK = { Y:'<span class="mk yes">●</span>', P:'<span class="mk part">◐</span>', N:'<span class="mk no">○</span>' };
|
||||
const USMK = '<span class="mk us">●</span>';
|
||||
document.getElementById('mbody').innerHTML = CAPS.map(([cap, marks]) => `
|
||||
<tr>
|
||||
<td class="cap">${cap}</td>
|
||||
<td class="usCol">${marks[0]==='Y'?USMK:(marks[0]==='P'?'<span class="mk part">◐</span>':'<span class="mk no">○</span>')}</td>
|
||||
${marks.slice(1).map(m=>`<td>${MK[m]}</td>`).join('')}
|
||||
</tr>`).join('');
|
||||
|
||||
const labels = { caps:'<b>Capabilities</b> — where Waggle sits vs the field', memory:'<b>Memory SOTA</b> — the one head-to-head lab result' };
|
||||
const seg = document.getElementById('seg');
|
||||
seg.addEventListener('click', e=>{ const b=e.target.closest('button'); if(!b) return; [...seg.children].forEach(x=>x.classList.toggle('on',x===b)); document.querySelectorAll('.view').forEach(v=>v.classList.toggle('on', v.dataset.view===b.dataset.v)); document.getElementById('vlabel').innerHTML = labels[b.dataset.v]; document.querySelector('.stage').scrollTop=0; });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user