daniel-benchmark / index.html
cognitivedaniel's picture
Update index.html
f8adadf verified
Raw History Blame Contribute Delete
26.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel vs Devin β€” Live Benchmark</title>
<meta name="description" content="Daniel (Cognitive AI) vs Devin (Cognition AI) β€” 6 real open-source bugs, identical prompts. Daniel passes 100% at 70% lower cost.">
<meta property="og:title" content="Daniel vs Devin β€” Live Benchmark">
<meta property="og:description" content="Daniel passes 100% of bugs at $0.24/bug vs Devin's $0.82/bug. Same accuracy. 70% cheaper.">
<meta property="og:image" content="https://www.cognitivedaniel.com/og-benchmark.png">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');
:root {
--bg: #0f1117;
--surface: #1a1d27;
--surface2: #22263a;
--border: #2d3148;
--fg: #e8eaf0;
--fg2: #9499b3;
--accent: #00d4aa;
--win: #00d4aa;
--win-bg: rgba(0,212,170,0.08);
--badge-bg: rgba(0,212,170,0.12);
--danger: #ff5c6a;
--danger-bg: rgba(255,92,106,0.08);
font-family: 'Inter', system-ui, sans-serif;
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg);
min-height: 100vh;
padding: 0 16px 60px;
line-height: 1.6;
}
/* ── Hero ── */
.hero {
max-width: 860px;
margin: 0 auto;
padding: 56px 0 44px;
text-align: center;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--badge-bg);
border: 1px solid rgba(0,212,170,0.25);
border-radius: 999px;
padding: 4px 14px;
font-size: 0.78rem;
font-weight: 600;
color: var(--accent);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 20px;
}
.hero-eyebrow .dot {
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
.hero h1 {
font-size: clamp(2rem, 6vw, 3.2rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--fg);
}
.hero h1 span { color: var(--accent); }
.hero p {
margin-top: 14px;
color: var(--fg2);
font-size: 1rem;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
.winner-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--win-bg);
border: 1px solid rgba(0,212,170,0.3);
border-radius: 999px;
padding: 7px 20px;
font-size: 0.92rem;
font-weight: 700;
color: var(--win);
margin-top: 24px;
}
/* ── Savings Spotlight ── */
.savings-spotlight {
max-width: 860px;
margin: 0 auto 36px;
background: linear-gradient(135deg, rgba(0,212,170,0.07) 0%, rgba(0,212,170,0.03) 100%);
border: 1px solid rgba(0,212,170,0.22);
border-radius: 16px;
padding: 26px 32px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.savings-spotlight .main-savings {
display: flex;
flex-direction: column;
}
.savings-spotlight .savings-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--accent);
margin-bottom: 4px;
}
.savings-spotlight .savings-num {
font-size: 2.6rem;
font-weight: 800;
color: var(--accent);
letter-spacing: -0.03em;
line-height: 1;
}
.savings-spotlight .savings-sub {
font-size: 0.85rem;
color: var(--fg2);
margin-top: 6px;
}
.savings-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pill {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 16px;
text-align: center;
}
.pill .pill-num {
font-size: 1.3rem;
font-weight: 800;
color: var(--fg);
letter-spacing: -0.02em;
}
.pill .pill-label {
font-size: 0.7rem;
color: var(--fg2);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 500;
}
/* ── Stats Grid ── */
.stats-grid {
max-width: 860px;
margin: 0 auto 36px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.stat-card.win-card {
border-color: rgba(0,212,170,0.3);
background: linear-gradient(135deg, rgba(0,212,170,0.06) 0%, var(--surface) 60%);
}
.stat-card.loss-card {
border-color: rgba(255,92,106,0.2);
background: linear-gradient(135deg, rgba(255,92,106,0.05) 0%, var(--surface) 60%);
}
.stat-card .num {
font-size: 2rem;
font-weight: 800;
color: var(--accent);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1;
}
.stat-card .num.red { color: var(--danger); }
.stat-card .num.neutral { color: var(--fg); }
.stat-card .label {
font-size: 0.78rem;
color: var(--fg2);
margin-top: 6px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stat-card .card-tag {
position: absolute;
top: 10px;
right: 10px;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 4px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.card-tag.daniel-tag { background: var(--badge-bg); color: var(--accent); }
.card-tag.devin-tag { background: rgba(255,92,106,0.12); color: var(--danger); }
/* ── Section ── */
.section {
max-width: 860px;
margin: 0 auto 32px;
}
.section h2 {
font-size: 1.1rem;
font-weight: 700;
color: var(--fg);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.section h2::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* ── Tables ── */
.tbl-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
thead th {
background: var(--surface2);
color: var(--fg2);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 11px 16px;
text-align: left;
white-space: nowrap;
}
thead th:not(:first-child) { text-align: center; }
tbody tr { border-top: 1px solid var(--border); transition: background 0.12s; }
tbody tr:hover { background: rgba(255,255,255,0.03); }
td { padding: 13px 16px; vertical-align: middle; color: var(--fg); white-space: nowrap; }
td:not(:first-child) { text-align: center; }
.pass { color: #00d4aa; font-weight: 600; }
.repo-link { color: var(--fg2); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; text-decoration: none; }
.repo-link:hover { color: var(--fg); }
.lang-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 5px;
font-size: 0.72rem;
font-weight: 600;
background: var(--surface2);
color: var(--fg2);
}
.lang-badge.js { background: rgba(240,219,79,0.12); color: #f0db4f; }
.lang-badge.py { background: rgba(55,118,171,0.15); color: #6fb3e0; }
.winner-col { color: var(--accent); font-weight: 700; }
.loser-col { color: var(--fg2); }
.summary-winner td { background: rgba(0,212,170,0.04); }
.gh-link {
font-size: 0.72rem;
color: var(--fg2);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
margin-top: 2px;
}
.gh-link:hover { color: var(--accent); }
/* ── Cost Bar Chart ── */
.cost-chart {
max-width: 860px;
margin: 0 auto 32px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px 28px;
}
.cost-chart h2 {
font-size: 1.1rem;
font-weight: 700;
color: var(--fg);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}
.cost-chart h2::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.chart-legend {
display: flex;
gap: 20px;
margin-bottom: 18px;
font-size: 0.8rem;
font-weight: 600;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.chart-bars { display: flex; flex-direction: column; gap: 18px; }
.bar-row { display: flex; flex-direction: column; gap: 5px; }
.bar-repo { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--fg2); margin-bottom: 2px; }
.bar-pair { display: flex; flex-direction: column; gap: 4px; }
.bar-item { display: flex; align-items: center; gap: 8px; }
.bar-agent { font-size: 0.72rem; font-weight: 600; width: 52px; text-align: right; color: var(--fg2); flex-shrink: 0; }
.bar-track { flex: 1; height: 20px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
.bar-fill {
height: 100%;
border-radius: 4px;
display: flex;
align-items: center;
padding-left: 8px;
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
transition: width 1s ease;
}
.bar-fill.daniel { background: rgba(0,212,170,0.8); color: #0a1512; }
.bar-fill.devin { background: rgba(255,92,106,0.6); color: var(--fg); }
/* ── Language Breakdown ── */
.lang-breakdown {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.lang-card {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.lang-card .lang-name {
font-size: 0.85rem;
font-weight: 600;
color: var(--fg);
display: flex;
align-items: center;
gap: 8px;
}
.lang-stats { text-align: right; }
.lang-stats .lang-pass { font-size: 0.9rem; font-weight: 700; color: var(--accent); }
.lang-stats .lang-cost { font-size: 0.75rem; color: var(--fg2); }
/* ── Methodology ── */
.method {
max-width: 860px;
margin: 0 auto 32px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px 28px;
}
.method h2 {
font-weight: 700;
margin-bottom: 12px;
color: var(--fg2);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.75rem;
}
.method p { color: var(--fg2); font-size: 0.875rem; line-height: 1.7; }
/* ── Badge Embed ── */
.embed-section {
max-width: 860px;
margin: 0 auto 32px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 28px;
}
.embed-section h2 {
font-weight: 700;
margin-bottom: 4px;
color: var(--fg);
font-size: 0.95rem;
}
.embed-section p { font-size: 0.8rem; color: var(--fg2); margin-bottom: 14px; }
.embed-code-wrap {
position: relative;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 16px;
}
.embed-code {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
color: var(--fg2);
white-space: pre-wrap;
word-break: break-all;
line-height: 1.6;
}
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 10px;
font-size: 0.72rem;
font-weight: 600;
color: var(--fg2);
cursor: pointer;
transition: all 0.15s;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-btn.copied { color: var(--accent); border-color: var(--accent); }
/* ── CTAs ── */
.links {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 11px 22px;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: opacity 0.15s, transform 0.1s;
cursor: pointer;
border: none;
}
.btn:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #0a1512; }
.btn-secondary { background: var(--surface2); border: 1px solid var(--border); color: var(--fg); }
.btn-share { background: #1a1a1a; border: 1px solid #333; color: #e7e9ea; }
.divider { max-width: 860px; margin: 36px auto; border: none; border-top: 1px solid var(--border); }
@media (max-width: 520px) {
.savings-spotlight { flex-direction: column; }
.lang-breakdown { grid-template-columns: 1fr; }
.bar-agent { width: 44px; font-size: 0.65rem; }
}
</style>
</head>
<body>
<!-- ── Hero ── -->
<div class="hero">
<div class="hero-eyebrow">
<span class="dot"></span>
Live Benchmark Β· v1 Β· October 2026
</div>
<h1>Daniel vs <span>Devin</span></h1>
<p>6 real open-source bugs Β· identical prompts Β· graded by maintainer hidden tests</p>
<div class="winner-badge">
✦ Daniel is 70% cheaper at equal accuracy
</div>
</div>
<!-- ── Savings Spotlight ── -->
<div class="savings-spotlight">
<div class="main-savings">
<div class="savings-label">Total Savings with Daniel</div>
<div class="savings-num" id="savings-counter">$3.46</div>
<div class="savings-sub">across 6 bugs vs Devin Β· same 100% pass rate</div>
</div>
<div class="savings-pills">
<div class="pill">
<div class="pill-num" id="ratio-counter">3.4Γ—</div>
<div class="pill-label">More cost-efficient</div>
</div>
<div class="pill">
<div class="pill-num">70%</div>
<div class="pill-label">Cost reduction</div>
</div>
<div class="pill">
<div class="pill-num">6/6</div>
<div class="pill-label">Daniel pass rate</div>
</div>
</div>
</div>
<!-- ── Stat Cards ── -->
<div class="stats-grid">
<div class="stat-card win-card">
<div class="card-tag daniel-tag">Daniel</div>
<div class="num" id="c-passrate">100%</div>
<div class="label">Pass rate</div>
</div>
<div class="stat-card win-card">
<div class="card-tag daniel-tag">Daniel</div>
<div class="num" id="c-total">$1.45</div>
<div class="label">Total cost</div>
</div>
<div class="stat-card win-card">
<div class="card-tag daniel-tag">Daniel</div>
<div class="num" id="c-perbug">$0.24</div>
<div class="label">Cost / bug</div>
</div>
<div class="stat-card loss-card">
<div class="card-tag devin-tag">Devin</div>
<div class="num red" id="c-devin">$4.91</div>
<div class="label">Devin total cost</div>
</div>
</div>
<!-- ── Summary Table ── -->
<div class="section">
<h2>Summary</h2>
<div class="tbl-wrap">
<table>
<thead>
<tr>
<th>Agent</th>
<th>Pass Rate</th>
<th>Total Cost</th>
<th>Cost / Bug</th>
<th>Total Time</th>
</tr>
</thead>
<tbody>
<tr class="summary-winner">
<td><strong>Daniel</strong> <span style="font-size:0.75rem;color:var(--fg2)">(Cognitive AI)</span></td>
<td class="winner-col">6 / 6 (100%)</td>
<td class="winner-col">$1.45</td>
<td class="winner-col">$0.24</td>
<td>12m 33s</td>
</tr>
<tr>
<td><strong>Devin</strong> <span style="font-size:0.75rem;color:var(--fg2)">(Cognition AI)</span></td>
<td>6 / 6 (100%)</td>
<td class="loser-col">$4.91</td>
<td class="loser-col">$0.82</td>
<td>12m 12s</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ── Per-Bug Results ── -->
<div class="section">
<h2>Per-Bug Results</h2>
<div class="tbl-wrap">
<table>
<thead>
<tr>
<th>Repository</th>
<th>Lang</th>
<th>Bug</th>
<th>Daniel</th>
<th>D. Time</th>
<th>D. Cost</th>
<th>Devin</th>
<th>Dv. Time</th>
<th>Dv. Cost</th>
<th>Saved</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="repo-link" href="https://github.com/python-humanize/humanize" target="_blank">python-humanize/humanize</a>
</td>
<td><span class="lang-badge py">Python</span></td>
<td style="max-width:200px;white-space:normal">intword() returns wrong value for huge numbers</td>
<td class="pass">Pass</td>
<td>1m 53s</td>
<td class="winner-col">$0.25</td>
<td class="pass">Pass</td>
<td>1m 54s</td>
<td class="loser-col">$0.74</td>
<td style="color:var(--accent);font-weight:600">$0.49</td>
</tr>
<tr>
<td>
<a class="repo-link" href="https://github.com/more-itertools/more-itertools" target="_blank">more-itertools/more-itertools</a>
</td>
<td><span class="lang-badge py">Python</span></td>
<td style="max-width:200px;white-space:normal">bucket() invents phantom keys for missing elements</td>
<td class="pass">Pass</td>
<td>1m 46s</td>
<td class="winner-col">$0.15</td>
<td class="pass">Pass</td>
<td>1m 36s</td>
<td class="loser-col">$0.71</td>
<td style="color:var(--accent);font-weight:600">$0.56</td>
</tr>
<tr>
<td>
<a class="repo-link" href="https://github.com/jshttp/mime-types" target="_blank">jshttp/mime-types</a>
</td>
<td><span class="lang-badge js">JS</span></td>
<td style="max-width:200px;white-space:normal">.mp4 extension resolves to wrong MIME type</td>
<td class="pass">Pass</td>
<td>1m 06s</td>
<td class="winner-col">$0.16</td>
<td class="pass">Pass</td>
<td>1m 46s</td>
<td class="loser-col">$0.84</td>
<td style="color:var(--accent);font-weight:600">$0.68</td>
</tr>
<tr>
<td>
<a class="repo-link" href="https://github.com/sindresorhus/pretty-bytes" target="_blank">sindresorhus/pretty-bytes</a>
</td>
<td><span class="lang-badge js">JS</span></td>
<td style="max-width:200px;white-space:normal">Rounding error at unit boundaries (999.95 bytes)</td>
<td class="pass">Pass</td>
<td>2m 06s</td>
<td class="winner-col">$0.33</td>
<td class="pass">Pass</td>
<td>3m 00s</td>
<td class="loser-col">$0.93</td>
<td style="color:var(--accent);font-weight:600">$0.60</td>
</tr>
<tr>
<td>
<a class="repo-link" href="https://github.com/sindresorhus/camelcase" target="_blank">sindresorhus/camelcase</a>
</td>
<td><span class="lang-badge js">JS</span></td>
<td style="max-width:200px;white-space:normal">Acronym plurals like IDs not handled correctly</td>
<td class="pass">Pass</td>
<td>3m 16s</td>
<td class="winner-col">$0.37</td>
<td class="pass">Pass</td>
<td>2m 39s</td>
<td class="loser-col">$0.95</td>
<td style="color:var(--accent);font-weight:600">$0.58</td>
</tr>
<tr>
<td>
<a class="repo-link" href="https://github.com/pillarjs/path-to-regexp" target="_blank">pillarjs/path-to-regexp</a>
</td>
<td><span class="lang-badge js">JS</span></td>
<td style="max-width:200px;white-space:normal">Empty parameter name accepted, causes incorrect routing</td>
<td class="pass">Pass</td>
<td>2m 26s</td>
<td class="winner-col">$0.19</td>
<td class="pass">Pass</td>
<td>1m 17s</td>
<td class="loser-col">$0.74</td>
<td style="color:var(--accent);font-weight:600">$0.55</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ── Cost Bar Chart ── -->
<div class="cost-chart">
<h2>Cost Per Bug β€” Daniel vs Devin</h2>
<div class="chart-legend">
<div class="legend-item">
<div class="legend-dot" style="background:rgba(0,212,170,0.8)"></div>
<span style="color:var(--accent)">Daniel</span>
</div>
<div class="legend-item">
<div class="legend-dot" style="background:rgba(255,92,106,0.7)"></div>
<span style="color:var(--danger)">Devin</span>
</div>
</div>
<div class="chart-bars" id="chart-bars">
<!-- Injected by JS -->
</div>
</div>
<!-- ── Language Breakdown ── -->
<div class="section">
<h2>By Language</h2>
<div class="lang-breakdown">
<div class="lang-card">
<div class="lang-name">
<span class="lang-badge py">Python</span>
2 bugs
</div>
<div class="lang-stats">
<div class="lang-pass">2/2 Pass</div>
<div class="lang-cost">Daniel avg $0.20/bug Β· Devin $0.73/bug</div>
</div>
</div>
<div class="lang-card">
<div class="lang-name">
<span class="lang-badge js">JS</span>
4 bugs
</div>
<div class="lang-stats">
<div class="lang-pass">4/4 Pass</div>
<div class="lang-cost">Daniel avg $0.26/bug Β· Devin $0.87/bug</div>
</div>
</div>
</div>
</div>
<!-- ── Methodology ── -->
<div class="method">
<h2>Methodology</h2>
<p>Each repo was forked at the commit before the maintainer's fix. Both agents received identical issue-style prompts with no hints about the solution. Each PR was graded by overwriting test files with the maintainer's version and running the project's test command. All PRs are public on GitHub. Cost figures are API usage costs only β€” Devin's $500/month seat fee not included.</p>
</div>
<!-- ── Badge Embed ── -->
<div class="embed-section">
<h2>Add to your README</h2>
<p>Drop this badge in your project to show you run Daniel for bug fixes.</p>
<div class="embed-code-wrap">
<div class="embed-code" id="embed-code">[![Daniel Benchmark](https://img.shields.io/badge/Daniel-100%25_pass_%7C_70%25_cheaper-00d4aa?style=flat-square&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iIzAwZDRhYSIvPjwvc3ZnPg==)](https://huggingface.co/spaces/cognitivedaniel/daniel-benchmark)</div>
<button class="copy-btn" onclick="copyEmbed()" id="copy-btn">Copy</button>
</div>
</div>
<hr class="divider">
<!-- ── CTAs ── -->
<div class="links">
<a class="btn btn-primary" href="https://www.cognitivedaniel.com" target="_blank">Try Daniel</a>
<a class="btn btn-secondary" href="https://www.cognitivedaniel.com/devin-alternative" target="_blank">Full Benchmark Page</a>
<a class="btn btn-secondary" href="https://huggingface.co/datasets/cognitivedaniel/daniel-benchmark-v1" target="_blank">Dataset on HF</a>
<a class="btn btn-secondary" href="https://huggingface.co/cognitivedaniel/daniel" target="_blank">Model Card</a>
<a class="btn btn-share" href="https://twitter.com/intent/tweet?text=Daniel+(Cognitive+AI)+passed+100%25+of+bugs+at+%240.24%2Fbug+vs+Devin%27s+%240.82%2Fbug.+Same+accuracy.+70%25+cheaper.+Live+benchmark+%E2%86%92&url=https%3A%2F%2Fhuggingface.co%2Fspaces%2Fcognitivedaniel%2Fdaniel-benchmark" target="_blank">
Share on 𝕏
</a>
</div>
<p style="text-align:center;color:var(--fg2);font-size:0.75rem;margin-top:32px;">
Built by <a href="https://www.cognitivedaniel.com" style="color:var(--accent);text-decoration:none">Cognitive AI</a> Β· October 2026
</p>
<script>
// ── Animated counters ──
function animateCounter(el, start, end, duration, prefix, suffix) {
const startTime = performance.now();
function step(now) {
const elapsed = now - startTime;
const progress = Math.min(elapsed / duration, 1);
const ease = 1 - Math.pow(1 - progress, 3);
const val = start + (end - start) * ease;
el.textContent = prefix + val.toFixed(2) + suffix;
if (progress < 1) requestAnimationFrame(step);
else el.textContent = prefix + end.toFixed(2) + suffix;
}
requestAnimationFrame(step);
}
window.addEventListener('load', () => {
// Savings counter
const sv = document.getElementById('savings-counter');
animateCounter(sv, 0, 3.46, 1400, '$', '');
// Ratio counter
const rc = document.getElementById('ratio-counter');
const startTime = performance.now();
(function step(now) {
const p = Math.min((now - startTime) / 1200, 1);
const e = 1 - Math.pow(1 - p, 3);
rc.textContent = (e * 3.4).toFixed(1) + 'Γ—';
if (p < 1) requestAnimationFrame(step);
else rc.textContent = '3.4Γ—';
})(performance.now());
// Build bar chart
const bugs = [
{ repo: 'python-humanize/humanize', daniel: 0.25, devin: 0.74 },
{ repo: 'more-itertools/more-itertools', daniel: 0.15, devin: 0.71 },
{ repo: 'jshttp/mime-types', daniel: 0.16, devin: 0.84 },
{ repo: 'sindresorhus/pretty-bytes', daniel: 0.33, devin: 0.93 },
{ repo: 'sindresorhus/camelcase', daniel: 0.37, devin: 0.95 },
{ repo: 'pillarjs/path-to-regexp', daniel: 0.19, devin: 0.74 },
];
const maxVal = Math.max(...bugs.map(b => b.devin));
const container = document.getElementById('chart-bars');
bugs.forEach(bug => {
const dPct = (bug.daniel / maxVal * 100).toFixed(1);
const dvPct = (bug.devin / maxVal * 100).toFixed(1);
const row = document.createElement('div');
row.className = 'bar-row';
row.innerHTML = `
<div class="bar-repo">${bug.repo}</div>
<div class="bar-pair">
<div class="bar-item">
<div class="bar-agent">Daniel</div>
<div class="bar-track">
<div class="bar-fill daniel" style="width:0%" data-target="${dPct}">$${bug.daniel}</div>
</div>
</div>
<div class="bar-item">
<div class="bar-agent">Devin</div>
<div class="bar-track">
<div class="bar-fill devin" style="width:0%" data-target="${dvPct}">$${bug.devin}</div>
</div>
</div>
</div>`;
container.appendChild(row);
});
// Animate bars after a brief delay
setTimeout(() => {
document.querySelectorAll('.bar-fill').forEach(el => {
el.style.width = el.dataset.target + '%';
});
}, 200);
});
// ── Copy embed ──
function copyEmbed() {
const code = document.getElementById('embed-code').textContent;
navigator.clipboard.writeText(code).then(() => {
const btn = document.getElementById('copy-btn');
btn.textContent = 'Copied!';
btn.classList.add('copied');
setTimeout(() => {
btn.textContent = 'Copy';
btn.classList.remove('copied');
}, 2000);
});
}
</script>
</body>
</html>