gooneyryan/hermes-webui
1
0
Fork 0
mirror of https://github.com/nesquena/hermes-webui.git synced 2026-05-27 04:00:37 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
94ff339dd81eb53d45da2afec6129d13bc8f8fc5
hermes-webui/models/index.html
T

1473 lines
64 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<script>
// Canonical URL: strip trailing index.html so links always show the clean path
(function(){
var p = window.location.pathname;
if (p.endsWith('/index.html')) {
var clean = p.slice(0, p.length - 'index.html'.length);
window.history.replaceState(null, '', clean + window.location.search + window.location.hash);
}
})();
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Best AI Models for Hermes — 2026 Guide</title>
<meta name="description" content="The best AI models to use with Hermes in 2026 — top picks for coding, writing, web search, and all-around use.">
<style>
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--bg-card: #161b22;
--border: #30363d;
--text-primary: #e6edf3;
--text-secondary: #8b949e;
--text-muted: #6e7681;
--accent: #f0a500;
--accent-dim: #c88800;
--accent-glow: rgba(240,165,0,0.12);
--green: #3fb950;
--blue: #58a6ff;
--purple: #bc8cff;
--red: #f85149;
--orange: #ff9040;
--nav-height: 64px;
}
[data-theme="light"] nav {
background: rgba(246, 248, 250, 0.95);
}
[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f6f8fa;
--bg-tertiary: #eaeef2;
--bg-card: #ffffff;
--border: #d0d7de;
--text-primary: #1f2328;
--text-secondary: #656d76;
--text-muted: #9198a1;
--accent: #c07800;
--accent-dim: #9a6200;
--accent-glow: rgba(192,120,0,0.10);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
}
/* NAV */
nav {
position: sticky;
top: 0;
height: var(--nav-height);
background: rgba(13, 17, 23, 0.92);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
z-index: 100;
}
.nav-logo {
font-size: 1.1rem;
font-weight: 700;
color: var(--accent);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
.nav-logo span { font-size: 1.4rem; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-back {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 4px;
transition: color 0.2s;
}
.nav-back:hover { color: var(--text-primary); }
#theme-toggle {
background: none;
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 10px;
cursor: pointer;
font-size: 1rem;
color: var(--text-primary);
transition: border-color 0.2s;
}
#theme-toggle:hover { border-color: var(--accent); }
.btn-cta {
background: var(--accent);
color: #000;
border: none;
border-radius: 8px;
padding: 8px 18px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: opacity 0.2s;
}
.btn-cta:hover { opacity: 0.85; }
/* TAB NAV */
.tab-bar {
position: sticky;
top: var(--nav-height);
z-index: 90;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
padding: 0 24px;
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-pill {
padding: 12px 18px;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color 0.2s, border-color 0.2s;
text-decoration: none;
display: block;
}
.tab-pill:hover { color: var(--text-primary); }
.tab-pill.active { color: var(--accent); border-bottom-color: var(--accent); }
/* HERO */
.hero {
text-align: center;
padding: 72px 24px 56px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(240,165,0,0.07), transparent);
pointer-events: none;
}
.hero-badge {
display: inline-block;
background: var(--accent-glow);
border: 1px solid var(--accent);
color: var(--accent);
border-radius: 20px;
padding: 4px 14px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 20px;
}
.hero h1 {
font-size: clamp(1.9rem, 4.5vw, 3.2rem);
font-weight: 800;
line-height: 1.2;
margin-bottom: 14px;
letter-spacing: -0.02em;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub {
font-size: clamp(0.95rem, 2.2vw, 1.15rem);
color: var(--text-secondary);
max-width: 580px;
margin: 0 auto 20px;
}
.hero-note {
font-size: 0.82rem;
color: var(--text-muted);
margin-top: 8px;
}
.hero-note a { color: var(--accent); text-decoration: none; }
/* SECTION */
.model-section {
padding: 64px 24px;
max-width: 960px;
margin: 0 auto;
}
.model-section + .model-section { padding-top: 0; }
.section-alt {
background: var(--bg-secondary);
}
.section-alt .model-section { }
.section-header {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border);
}
.section-icon {
width: 52px;
height: 52px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
flex-shrink: 0;
}
.icon-gold { background: rgba(240,165,0,0.15); border: 1px solid rgba(240,165,0,0.4); }
.icon-blue { background: rgba(88,166,255,0.12); border: 1px solid rgba(88,166,255,0.35); }
.icon-green { background: rgba(63,185,80,0.12); border: 1px solid rgba(63,185,80,0.35); }
.icon-purple { background: rgba(188,140,255,0.12); border: 1px solid rgba(188,140,255,0.35); }
.icon-orange { background: rgba(255,144,64,0.12); border: 1px solid rgba(255,144,64,0.35); }
.section-header-text h2 {
font-size: clamp(1.3rem, 2.5vw, 1.75rem);
font-weight: 700;
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.section-header-text p {
font-size: 0.92rem;
color: var(--text-secondary);
max-width: 560px;
}
/* MODEL CARDS */
.model-list {
display: grid;
gap: 14px;
}
.model-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 24px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
transition: border-color 0.2s, transform 0.2s;
position: relative;
overflow: hidden;
}
.model-card:hover {
border-color: var(--model-color, var(--accent));
transform: translateY(-1px);
}
.model-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--model-color, var(--accent));
border-radius: 14px 0 0 14px;
}
.rank-badge {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.95rem;
flex-shrink: 0;
border: 2px solid var(--model-color, var(--accent));
color: var(--model-color, var(--accent));
background: transparent;
}
.rank-badge.gold { background: rgba(240,165,0,0.15); }
.rank-badge.silver { background: rgba(139,148,158,0.15); }
.rank-badge.bronze { background: rgba(201,120,80,0.15); }
.model-info h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 4px;
}
.model-info .model-meta {
font-size: 0.83rem;
color: var(--text-secondary);
margin-bottom: 6px;
}
.model-info .model-why {
font-size: 0.88rem;
color: var(--text-secondary);
line-height: 1.5;
}
.model-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.pill {
font-size: 0.72rem;
font-weight: 600;
padding: 3px 9px;
border-radius: 20px;
border: 1px solid var(--border);
color: var(--text-muted);
white-space: nowrap;
}
.pill.green { border-color: rgba(63,185,80,0.5); color: var(--green); background: rgba(63,185,80,0.08); }
.pill.blue { border-color: rgba(88,166,255,0.5); color: var(--blue); background: rgba(88,166,255,0.08); }
.pill.purple { border-color: rgba(188,140,255,0.5); color: var(--purple); background: rgba(188,140,255,0.08); }
.pill.gold { border-color: rgba(240,165,0,0.5); color: var(--accent); background: rgba(240,165,0,0.08); }
.pill.orange { border-color: rgba(255,144,64,0.5); color: var(--orange); background: rgba(255,144,64,0.08); }
.model-score {
text-align: right;
flex-shrink: 0;
}
.score-val {
font-size: 1.3rem;
font-weight: 800;
color: var(--model-color, var(--accent));
display: block;
line-height: 1;
margin-bottom: 3px;
}
.score-label {
font-size: 0.72rem;
color: var(--text-muted);
white-space: nowrap;
}
/* SETUP BOX */
.setup-box {
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-radius: 12px;
padding: 22px 24px;
margin-top: 24px;
}
.setup-box h4 {
font-size: 0.88rem;
font-weight: 700;
margin-bottom: 8px;
color: var(--accent);
}
.setup-box p {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.5;
}
.setup-box code {
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 5px;
padding: 1px 6px;
font-size: 0.82rem;
font-family: 'SFMono-Regular', Consolas, monospace;
color: var(--text-primary);
}
/* HOW TO PICK */
.picker-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-top: 28px;
}
.picker-card {
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: 10px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.picker-card:hover {
border-color: var(--accent);
box-shadow: 0 4px 20px rgba(240,165,0,0.12);
transform: translateY(-1px);
}
.picker-card .use-case {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.picker-card .use-case .uc-icon {
font-size: 0.95rem;
letter-spacing: 0;
}
.picker-card .recommendation {
font-size: 1rem;
font-weight: 800;
color: var(--accent);
line-height: 1.2;
}
.picker-card .why-short {
font-size: 0.8rem;
color: var(--text-secondary);
line-height: 1.45;
margin-top: 2px;
}
/* FREE TIER NOTE */
.free-note {
background: rgba(63,185,80,0.08);
border: 1px solid rgba(63,185,80,0.3);
border-radius: 10px;
padding: 14px 18px;
margin-top: 20px;
font-size: 0.87rem;
color: var(--text-secondary);
display: flex;
gap: 10px;
align-items: flex-start;
}
.free-note .note-icon { font-size: 1.1rem; flex-shrink: 0; }
/* CTA STRIP */
.cta-strip {
background: var(--accent-glow);
border: 1px solid var(--accent);
border-radius: 16px;
padding: 36px 40px;
text-align: center;
margin: 40px auto;
max-width: 700px;
}
.cta-strip h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; }
.cta-strip p { color: var(--text-secondary); margin-bottom: 22px; font-size: 0.95rem; }
.cta-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
background: var(--accent);
color: #000;
font-weight: 700;
padding: 13px 26px;
border-radius: 10px;
text-decoration: none;
font-size: 0.95rem;
transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-ghost {
background: transparent;
color: var(--text-primary);
font-weight: 600;
padding: 13px 26px;
border-radius: 10px;
text-decoration: none;
font-size: 0.95rem;
border: 1px solid var(--border);
transition: border-color 0.2s;
}
.btn-ghost:hover { border-color: var(--accent); }
/* FOOTER */
footer {
border-top: 1px solid var(--border);
text-align: center;
padding: 32px 24px;
color: var(--text-muted);
font-size: 0.85rem;
}
footer a { color: var(--accent); text-decoration: none; }
/* DIVIDER */
.section-divider { height: 1px; background: var(--border); }
/* MOBILE */
@media (max-width: 640px) {
nav { padding: 0 16px; }
.nav-back { display: none; }
.btn-cta { display: none; }
.model-card { grid-template-columns: auto 1fr; }
.model-score { display: none; }
.tab-bar { padding: 0 12px; }
.tab-pill { padding: 10px 14px; font-size: 0.82rem; }
.section-header { flex-direction: column; gap: 12px; }
.cta-strip { padding: 28px 20px; }
}
@media (max-width: 480px) {
.picker-grid { grid-template-columns: 1fr 1fr; }
}
/* HAMBURGER + MOBILE MENU */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 6px;
border: 1px solid var(--border);
border-radius: 6px;
background: none;
transition: border-color 0.15s;
flex-shrink: 0;
}
.hamburger:hover { border-color: var(--accent); }
.hamburger span {
display: block;
width: 20px;
height: 2px;
background: var(--text-secondary);
border-radius: 2px;
transition: transform 0.2s, opacity 0.2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#models-mobile-menu {
display: none;
position: fixed;
top: var(--nav-height);
left: 0; right: 0;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
padding: 16px 24px;
z-index: 999;
flex-direction: column;
gap: 4px;
}
#models-mobile-menu.open { display: flex; }
#models-mobile-menu a {
color: var(--text-secondary);
font-size: 0.95rem;
font-weight: 500;
padding: 10px 12px;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
text-decoration: none;
}
#models-mobile-menu a:hover { color: var(--text-primary); background: var(--bg-tertiary); }
#models-mobile-menu a.accent { color: var(--accent); }
#models-mobile-menu .menu-divider {
height: 1px;
background: var(--border);
margin: 4px 0;
}
@media (max-width: 640px) {
.hamburger { display: flex; }
.btn-cta { display: none; }
.nav-back { display: none; }
}
</style>
</head>
<body>
<nav>
<a href="../" class="nav-logo"><span>⚡</span> Hermes</a>
<div class="nav-right">
<a href="../" class="nav-back">← <span>Back to main site</span></a>
<button id="theme-toggle" aria-label="Toggle theme">🌙</button>
<a href="https://hermes-agent.nousresearch.com/docs/getting-started/installation" class="btn-cta" target="_blank">Get started →</a>
</div>
<button class="hamburger" id="models-hamburger" aria-label="Open menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</nav>
<div id="models-mobile-menu">
<a href="../">⚡ Hermes Home</a>
<a href="../#why">Why Hermes</a>
<a href="../#features">Features</a>
<a href="../#compare">Compare</a>
<a href="../#install">Install</a>
<div class="menu-divider"></div>
<a href="../eli5/" class="accent">🧠 ELI5 — What is Hermes?</a>
<a href="../models/" class="accent">🤖 Best Models 2026</a>
<a href="../community/" class="accent">🌎 Community</a>
<a href="https://hermes-agent.nousresearch.com/docs/getting-started/installation" target="_blank" class="accent" style="margin-top:4px">Get started →</a>
</div>
<!-- TAB BAR -->
<div class="tab-bar">
<a class="tab-pill active" href="#overall">🏆 Overall</a>
<a class="tab-pill" href="#coding">💻 Coding</a>
<a class="tab-pill" href="#writing">✍️ Writing</a>
<a class="tab-pill" href="#search">🔍 Search</a>
<a class="tab-pill" href="#reasoning">🧮 Reasoning</a>
<a class="tab-pill" href="#local">🖥️ Local models</a>
<a class="tab-pill" href="#howto">⚙️ How to configure</a>
</div>
<!-- HERO -->
<section class="hero">
<div class="hero-badge">2026 Model Guide</div>
<h1>Best AI models for <em>Hermes</em></h1>
<p class="hero-sub">Top picks across coding, writing, search, and reasoning — so you know exactly what to plug in and why.</p>
<p class="hero-note">Data from SWE-bench Pro, GPQA Diamond, Chatbot Arena, and BenchLM. Updated April 23, 2026. <a href="https://lmarena.ai/leaderboard" target="_blank">Source →</a></p>
</section>
<!-- =========================================
OVERALL
========================================= -->
<div id="overall" class="section-alt">
<div class="model-section">
<div class="section-header">
<div class="section-icon icon-gold">🏆</div>
<div class="section-header-text">
<h2>Overall best models</h2>
<p>Great at everything. If you only pick one, pick from here. These handle coding, writing, research, and reasoning with minimal trade-offs.</p>
</div>
</div>
<div class="model-list">
<!-- #1 -->
<div class="model-card" style="--model-color: #f0a500;">
<div class="rank-badge gold">🥇</div>
<div class="model-info">
<h3>Claude Opus 4.7</h3>
<div class="model-meta">Anthropic &middot; 1M context &middot; $5 / $25 per 1M tokens &middot; Released Apr 16, 2026</div>
<div class="model-why">Anthropic's most capable generally available model as of April 2026. 70% on CursorBench (vs 58% for Opus 4.6), 98.5% XBOW visual-acuity (vs 54.5%), 3x more resolved production tasks at Rakuten. Catches its own logical faults mid-planning. 3x higher image resolution — 3.75MP vs 1.15MP. Substantially better at multi-session memory and long agentic work. Use it for your most demanding tasks where quality matters more than speed.</div>
<div class="model-pills">
<span class="pill gold">New Anthropic flagship</span>
<span class="pill green">Best all-rounder</span>
<span class="pill blue">1M context</span>
</div>
</div>
<div class="model-score">
<span class="score-val">70%</span>
<span class="score-label">CursorBench</span>
</div>
</div>
<!-- #2 -->
<div class="model-card" style="--model-color: #4a9eff;">
<div class="rank-badge silver">🥈</div>
<div class="model-info">
<h3>Gemini 3.1 Pro</h3>
<div class="model-meta">Google DeepMind &middot; 1–2M context &middot; $2 / $12 per 1M tokens</div>
<div class="model-why">#1 on Chatbot Arena (1,505 Elo) — now the top-ranked publicly available model. Also #1 on GPQA Diamond reasoning (94.1%), #1 on ARC-AGI-2 (77.1%), and #1 on creative writing Arena. Exceptional value at $2/$12 per 1M tokens. The 2M context handles entire codebases and book-length documents.</div>
<div class="model-pills">
<span class="pill gold">Arena #1 (1505 Elo)</span>
<span class="pill green">Best value</span>
<span class="pill purple">2M context</span>
</div>
</div>
<div class="model-score">
<span class="score-val">1492</span>
<span class="score-label">Arena Elo</span>
</div>
</div>
<!-- #3 -->
<div class="model-card" style="--model-color: #3fb950;">
<div class="rank-badge bronze">🥉</div>
<div class="model-info">
<h3>GPT-5.4</h3>
<div class="model-meta">OpenAI &middot; 1.1M context &middot; $2.50 / $15 per 1M tokens</div>
<div class="model-why">OpenAI's flagship released March 2026. #2 on SWE-bench Pro (57.7%, behind Kimi K2.6 at 58.6%) and leads Terminal-Bench DevOps (75.1%). Solid GPQA Diamond (91.67%). The 1.1M token context window is among the largest of any frontier model, and it costs less per token than Opus. Best pick when you need breadth across coding, writing, and reasoning at a reasonable price.</div>
<div class="model-pills">
<span class="pill gold">SWE-Pro #2</span>
<span class="pill blue">1.1M context</span>
<span class="pill green">Coding + reasoning</span>
</div>
</div>
<div class="model-score">
<span class="score-val">1484</span>
<span class="score-label">Arena Elo</span>
</div>
</div>
<!-- #4 -->
<div class="model-card" style="--model-color: #8b949e;">
<div class="rank-badge">4</div>
<div class="model-info">
<h3>Claude Sonnet 4.6</h3>
<div class="model-meta">Anthropic &middot; 200K context &middot; $3 / $15 per 1M tokens</div>
<div class="model-why">The fast, smart everyday workhorse. 87.5% on GPQA Diamond, 79.6% on SWE-bench Verified, 1,462 Elo on Chatbot Arena. Nearly as capable as Opus at lower cost and higher speed. The right choice for high-volume tasks — daily summaries, coding, research — where you need quality without always paying Opus prices.</div>
<div class="model-pills">
<span class="pill green">Great value</span>
<span class="pill blue">Low latency</span>
<span class="pill gold">Reliable</span>
</div>
</div>
<div class="model-score">
<span class="score-val">1462</span>
<span class="score-label">Arena Elo</span>
</div>
</div>
<!-- #5 -->
<div class="model-card" style="--model-color: #ff9040;">
<div class="rank-badge">5</div>
<div class="model-info">
<h3>DeepSeek V3.2</h3>
<div class="model-meta">DeepSeek &middot; 128K context &middot; $0.28 / $0.42 per 1M tokens</div>
<div class="model-why">The remarkable open-source value pick. Released December 2025 with MIT license and "reasoning-first" architecture that integrates thinking directly into tool use. Claims GPT-5 level performance at a tiny fraction of the cost. Self-hostable. Arena score of 1,424 puts it solidly in reach of the closed frontier. The budget pick that doesn't embarrass itself against anything.</div>
<div class="model-pills">
<span class="pill orange">MIT license</span>
<span class="pill green">Ultra cheap</span>
<span class="pill gold">Self-hostable</span>
</div>
</div>
<div class="model-score">
<span class="score-val">$0.28</span>
<span class="score-label">per 1M input</span>
</div>
</div>
</div>
<div class="free-note">
<span class="note-icon">💡</span>
<span>Starting out? Claude Sonnet 4.6 is the best first pick — strong, affordable, and the model this project was built and tested with. Get your API key at <a href="https://console.anthropic.com" target="_blank" style="color:var(--green)">console.anthropic.com</a>.</span>
</div>
</div>
</div>
<div class="section-divider"></div>
<!-- =========================================
CODING
========================================= -->
<div id="coding">
<div class="model-section">
<div class="section-header">
<div class="section-icon icon-blue">💻</div>
<div class="section-header-text">
<h2>Best for coding</h2>
<p>Ranked on SWE-bench Pro (1,865 real GitHub issues, multi-language, standardised scaffold — the current clean benchmark) and SWE-bench Verified. These fix bugs and ship features, not just autocomplete.</p>
</div>
</div>
<div class="model-list">
<div class="model-card" style="--model-color: #f0a500;">
<div class="rank-badge gold">🥇</div>
<div class="model-info">
<h3>Claude Opus 4.7</h3>
<div class="model-meta">Anthropic &middot; 1M context &middot; $5 / $25 per 1M tokens</div>
<div class="model-why">Powers Claude Code and Cursor — the two most-used AI coding tools. 70% on CursorBench (vs 58% for Opus 4.6), 90.9% on BigLaw Bench at high effort, 10-15% task success lift at Factory, 10%+ recall improvement on complex PRs at CodeRabbit. Where Opus 4.7 shines specifically is deep multi-file reasoning with self-correction: it catches its own logical faults during planning before reporting back. The 1M context window fits entire codebases.</div>
<div class="model-pills">
<span class="pill gold">Powers Claude Code</span>
<span class="pill green">Self-correcting</span>
<span class="pill blue">1M context</span>
</div>
</div>
<div class="model-score">
<span class="score-val">70%</span>
<span class="score-label">CursorBench</span>
</div>
</div>
<div class="model-card" style="--model-color: #ff9040;">
<div class="rank-badge silver">🥈</div>
<div class="model-info">
<h3>Kimi K2.6</h3>
<div class="model-meta">Moonshot AI &middot; 262K context &middot; $0.60 / $3.00 per 1M tokens &middot; Open weights</div>
<div class="model-why">Leads SWE-bench Pro at 58.6% — beating GPT-5.4 (57.7%) and every other closed model. The only major open coding model with native image and video input (MoonViT-3D encoder). Supports agent swarms up to 300 parallel sub-agents with 4,000 coordinated tool calls and 12+ hours of sustained autonomous execution. Demonstrated real-world gains: 185% throughput improvement on a production financial matching engine, and 15% task success lift reported by Factory.ai. Self-hostable under a modified MIT license.</div>
<div class="model-pills">
<span class="pill orange">SWE-Pro #1 (58.6%)</span>
<span class="pill blue">300-agent swarm</span>
<span class="pill green">Open weights</span>
</div>
</div>
<div class="model-score">
<span class="score-val">58.6%</span>
<span class="score-label">SWE-bench Pro</span>
</div>
</div>
<div class="model-card" style="--model-color: #58a6ff;">
<div class="rank-badge bronze">🥉</div>
<div class="model-info">
<h3>GPT-5.4</h3>
<div class="model-meta">OpenAI &middot; 1.1M context &middot; $2.50 / $15 per 1M tokens</div>
<div class="model-why">#2 on SWE-bench Pro at 57.7% — second only to Kimi K2.6 (58.6%) — and leads Terminal-Bench 2.0 DevOps tasks at 75.1%, a 9.7-point gap over third place. Best at CLI automation, shell scripting, and agentic code pipelines. GPT-5.4 is the recommended replacement for GPT-5.3 Codex across most coding use cases.</div>
<div class="model-pills">
<span class="pill blue">SWE-Pro #2 (57.7%)</span>
<span class="pill green">DevOps/CLI</span>
<span class="pill gold">Agentic pipelines</span>
</div>
</div>
<div class="model-score">
<span class="score-val">57.7%</span>
<span class="score-label">SWE-bench Pro</span>
</div>
</div>
<div class="model-card" style="--model-color: #3fb950;">
<div class="rank-badge bronze">4</div>
<div class="model-info">
<h3>Claude Sonnet 4.6</h3>
<div class="model-meta">Anthropic &middot; 200K context &middot; $3 / $15 per 1M tokens</div>
<div class="model-why">79.6% on SWE-bench Verified — within 1.2 points of Opus at 40% lower cost and significantly faster. The right everyday coding model for iterative development, unit tests, code explanation, and high-volume agentic loops where paying Opus prices for every call doesn't make sense. Outperforms the now-deprecated Sonnet 4.5 on every benchmark.</div>
<div class="model-pills">
<span class="pill purple">Best value</span>
<span class="pill gold">Fast iteration</span>
<span class="pill green">High volume</span>
</div>
</div>
<div class="model-score">
<span class="score-val">79.6%</span>
<span class="score-label">SWE-bench Verified</span>
</div>
</div>
<div class="model-card" style="--model-color: #8b949e;">
<div class="rank-badge">5</div>
<div class="model-info">
<h3>Gemini 3.1 Pro</h3>
<div class="model-meta">Google DeepMind &middot; 1–2M context &middot; $2 / $12 per 1M tokens</div>
<div class="model-why">80.6% on SWE-bench Verified and 54.2% on SWE-bench Pro at the most competitive price of any frontier model. The massive 2M context window means you can load an entire large codebase and reason across it in one pass — no chunking, no retrieval. The cheapest path to top-tier coding performance.</div>
<div class="model-pills">
<span class="pill blue">2M context</span>
<span class="pill green">Cheapest frontier</span>
<span class="pill gold">Full-codebase</span>
</div>
</div>
<div class="model-score">
<span class="score-val">80.6%</span>
<span class="score-label">SWE-bench Verified</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-divider"></div>
<!-- =========================================
WRITING
========================================= -->
<div id="writing" class="section-alt">
<div class="model-section">
<div class="section-header">
<div class="section-icon icon-purple">✍️</div>
<div class="section-header-text">
<h2>Best for writing</h2>
<p>Creative writing, copywriting, long-form docs, email drafts. Ranked on EQ-Bench Creative Writing Elo (sycophancy-resistant, community-verified) and Chatbot Arena creative writing scores.</p>
</div>
</div>
<div class="model-list">
<div class="model-card" style="--model-color: #f0a500;">
<div class="rank-badge gold">🥇</div>
<div class="model-info">
<h3>Claude Sonnet 4.6</h3>
<div class="model-meta">Anthropic &middot; 200K context &middot; $3 / $15 per 1M tokens</div>
<div class="model-why">Leads EQ-Bench Creative Writing at 1,936 Elo — higher than Opus (1,932) on the benchmark specifically designed to resist sycophancy and measure genuine literary quality. Best voice consistency over long documents: tone, register, and style stay coherent across sessions. At 85% lower cost than Opus, it's the smart pick for high-volume writing — drafts, summaries, long-form content pipelines.</div>
<div class="model-pills">
<span class="pill gold">EQ-Bench CW #1 (1936)</span>
<span class="pill green">Best value</span>
<span class="pill blue">Voice consistency</span>
</div>
</div>
<div class="model-score">
<span class="score-val">1936</span>
<span class="score-label">EQ-Bench CW Elo</span>
</div>
</div>
<div class="model-card" style="--model-color: #58a6ff;">
<div class="rank-badge silver">🥈</div>
<div class="model-info">
<h3>Claude Opus 4.7</h3>
<div class="model-meta">Anthropic &middot; 1M context &middot; $5 / $25 per 1M tokens</div>
<div class="model-why">The upgraded heir to Opus 4.6 on literary and instruction-following benchmarks. More direct and opinionated tone than 4.6 — fewer hedges, more conviction. Described as "best model in the world for building dashboards and data-rich interfaces" by Val Town. Raises the bar on professional output quality — interfaces, slides, long-form docs. Best for projects demanding precision and creative depth where spending more per token is worth it.</div>
<div class="model-pills">
<span class="pill blue">Professional output</span>
<span class="pill gold">More opinionated</span>
<span class="pill green">Literary depth</span>
</div>
</div>
<div class="model-score">
<span class="score-val">#2</span>
<span class="score-label">EQ-Bench CW</span>
</div>
</div>
<div class="model-card" style="--model-color: #3fb950;">
<div class="rank-badge bronze">🥉</div>
<div class="model-info">
<h3>Gemini 3.1 Pro</h3>
<div class="model-meta">Google DeepMind &middot; 1–2M context &middot; $2 / $12 per 1M tokens</div>
<div class="model-why">#1 on Chatbot Arena creative writing Elo (1,487) — human raters prefer it for fiction and blogs — and best for AI-tell avoidance across independent evals. The 2M context and 65K output limit are unmatched for long-form projects: entire chapters, full reports, long narrative arcs. Strong multilingual creative writing in 40+ languages. 12x cheaper on input than Opus.</div>
<div class="model-pills">
<span class="pill purple">Arena CW #1 (1487)</span>
<span class="pill blue">2M context</span>
<span class="pill gold">AI-tell avoidance</span>
</div>
</div>
<div class="model-score">
<span class="score-val">1487</span>
<span class="score-label">Arena CW Elo</span>
</div>
</div>
<div class="model-card" style="--model-color: #8b949e;">
<div class="rank-badge">4</div>
<div class="model-info">
<h3>GPT-5.4</h3>
<div class="model-meta">OpenAI &middot; 1.1M context &middot; $2.50 / $15 per 1M tokens</div>
<div class="model-why">Solid for structured and commercial writing: technical docs, reports, pitch decks, email campaigns. Excellent instruction-following (~92% IFEval). Ranked ~9th on Arena creative writing — noticeably behind Claude and Gemini for fiction and literary prose, but a strong default when your output needs precise formatting or structured argument flow over stylistic voice.</div>
<div class="model-pills">
<span class="pill blue">Structured docs</span>
<span class="pill green">92% IFEval</span>
<span class="pill gold">Technical writing</span>
</div>
</div>
<div class="model-score">
<span class="score-val">~9th</span>
<span class="score-label">Arena CW rank</span>
</div>
</div>
<div class="model-card" style="--model-color: #ff9040;">
<div class="rank-badge">5</div>
<div class="model-info">
<h3>Kimi K2.6</h3>
<div class="model-meta">Moonshot AI &middot; 262K context &middot; $0.60 / $3.00 per 1M tokens &middot; Open weights</div>
<div class="model-why">~1,700 EQ-Bench Creative Writing Elo — roughly 87% of Sonnet's literary quality at 80% lower cost. The budget pick for high-volume content: product descriptions, social copy, blog drafts, and content pipelines where you need coherent writing at scale without paying frontier prices on every call. Upgraded from K2.5 with a larger 262K context window and native image input. API live via Moonshot platform.</div>
<div class="model-pills">
<span class="pill orange">Budget CW pick</span>
<span class="pill green">~1700 EQ-Bench CW</span>
<span class="pill gold">Volume content</span>
</div>
</div>
<div class="model-score">
<span class="score-val">$0.60</span>
<span class="score-label">per 1M input</span>
</div>
</div>
</div>
</div>
</div>
<div class="section-divider"></div>
<!-- =========================================
SEARCH / WEB
========================================= -->
<div id="search">
<div class="model-section">
<div class="section-header">
<div class="section-icon icon-green">🔍</div>
<div class="section-header-text">
<h2>Best for search and web tasks</h2>
<p>Models with real-time web access, retrieval, and research capabilities. For Hermes cron jobs that check news, summarise feeds, monitor prices, or answer time-sensitive questions.</p>
</div>
</div>
<div class="model-list">
<div class="model-card" style="--model-color: #f0a500;">
<div class="rank-badge gold">🥇</div>
<div class="model-info">
<h3>Gemini 3.1 Pro</h3>
<div class="model-meta">Google DeepMind &middot; 1–2M context &middot; Native Google Search grounding</div>
<div class="model-why">The strongest model for search-heavy tasks. Integrates directly with Google Search for real-time grounding — cites sources, verifies claims, and pulls current information without you building a retrieval layer. The 2M context window absorbs the results of dozens of parallel searches in one pass. Best for long-document research, competitive intelligence, and multi-source synthesis.</div>
<div class="model-pills">
<span class="pill gold">Google Search built-in</span>
<span class="pill blue">2M context</span>
<span class="pill green">Cited sources</span>
</div>
</div>
<div class="model-score">
<span class="score-val">2M</span>
<span class="score-label">context tokens</span>
</div>
</div>
<div class="model-card" style="--model-color: #58a6ff;">
<div class="rank-badge silver">🥈</div>
<div class="model-info">
<h3>Grok 4.20</h3>
<div class="model-meta">xAI &middot; 2M context &middot; $2 / $6 per 1M tokens &middot; Live X data</div>
<div class="model-why">Released April 7, 2026. 2M token context window at a lower price than before. 1,496 Elo on Chatbot Arena (#3 overall), 92% GPQA Diamond. The only frontier model with live access to the X/Twitter firehose — real-time social data, breaking news, market sentiment. Strong reasoning via chain-of-thought. The price drop makes it genuinely competitive for general use, not just real-time tasks.</div>
<div class="model-pills">
<span class="pill blue">Live X/Twitter data</span>
<span class="pill gold">Arena #3 (1496 Elo)</span>
<span class="pill green">2M context</span>
</div>
</div>
<div class="model-score">
<span class="score-val">1496</span>
<span class="score-label">Arena Elo</span>
</div>
</div>
<div class="model-card" style="--model-color: #3fb950;">
<div class="rank-badge bronze">🥉</div>
<div class="model-info">
<h3>Claude Sonnet 4.6 + web_search tool</h3>
<div class="model-meta">Anthropic &middot; 200K context &middot; Hermes web_search tool</div>
<div class="model-why">Hermes ships a web_search tool that any Claude model can use natively. Sonnet 4.6 is the best balance for high-frequency search automations — fast enough to run cron jobs every few minutes, smart enough to synthesise results well. The most practical pick for daily Hermes scheduled tasks: morning briefings, feed monitors, price watchers, news digests.</div>
<div class="model-pills">
<span class="pill purple">Hermes native</span>
<span class="pill gold">Daily cron jobs</span>
<span class="pill green">Best value</span>
</div>
</div>
<div class="model-score">
<span class="score-val">Built-in</span>
<span class="score-label">web_search tool</span>
</div>
</div>
<div class="model-card" style="--model-color: #8b949e;">
<div class="rank-badge">4</div>
<div class="model-info">
<h3>GPT-5.4 (with browsing)</h3>
<div class="model-meta">OpenAI &middot; 1.1M context &middot; $2.50 / $15 per 1M tokens</div>
<div class="model-why">Excellent at combining web retrieval with deep reasoning — synthesises many search results into a coherent, well-structured answer. The 1.1M context window helps absorb large volumes of retrieved content. Strong for research tasks, fact-checking, and competitive intelligence where you need the model to reason carefully over what it finds, not just retrieve it.</div>
<div class="model-pills">
<span class="pill blue">1.1M context</span>
<span class="pill gold">Deep synthesis</span>
<span class="pill green">Research</span>
</div>
</div>
<div class="model-score">
<span class="score-val">1.1M</span>
<span class="score-label">context tokens</span>
</div>
</div>
<div class="model-card" style="--model-color: #ff9040;">
<div class="rank-badge">5</div>
<div class="model-info">
<h3>Gemini 3 Flash (Thinking)</h3>
<div class="model-meta">Google DeepMind &middot; 1M context &middot; $0.50 / $3 per 1M tokens</div>
<div class="model-why">Ultra-low latency with native Google Search grounding and a 0.34s time-to-first-token. 89.8% on GPQA Diamond at just $0.50/$3 per 1M tokens — the best reasoning value on the market. Perfect for latency-sensitive search pipelines: live monitoring, real-time alerts, high-frequency lookups where you need a response in under a second at minimal cost.</div>
<div class="model-pills">
<span class="pill gold">0.34s latency</span>
<span class="pill green">Cheapest reasoning</span>
<span class="pill blue">Search grounding</span>
</div>
</div>
<div class="model-score">
<span class="score-val">$0.50</span>
<span class="score-label">per 1M input</span>
</div>
</div>
</div>
</div>
</div>
<div class="section-divider"></div>
<!-- =========================================
REASONING
========================================= -->
<div id="reasoning" class="section-alt">
<div class="model-section">
<div class="section-header">
<div class="section-icon icon-orange">🧮</div>
<div class="section-header-text">
<h2>Best for reasoning and analysis</h2>
<p>Hard math, PhD-level science, complex multi-step logic, knowledge work, and second-brain tasks. Ranked on GPQA Diamond (PhD expert baseline: 65%), Humanity's Last Exam, and ARC-AGI-2.</p>
</div>
</div>
<div class="model-list">
<div class="model-card" style="--model-color: #f0a500;">
<div class="rank-badge gold">🥇</div>
<div class="model-info">
<h3>Gemini 3.1 Pro</h3>
<div class="model-meta">Google DeepMind &middot; 1–2M context &middot; 94.1% GPQA Diamond</div>
<div class="model-why">Leads GPQA Diamond at 94.1% and ARC-AGI-2 visual reasoning at 77.1% — the highest score on both of the hardest published reasoning benchmarks. Near-perfect AIME 2025 math (98%+). Strong across physics, chemistry, biology, and multi-domain expert knowledge. The 2M context makes it uniquely capable for research requiring both depth and breadth in one pass.</div>
<div class="model-pills">
<span class="pill gold">GPQA #1 (94.1%)</span>
<span class="pill blue">ARC-AGI-2 #1 (77.1%)</span>
<span class="pill purple">2M context</span>
</div>
</div>
<div class="model-score">
<span class="score-val">94.1%</span>
<span class="score-label">GPQA Diamond</span>
</div>
</div>
<div class="model-card" style="--model-color: #58a6ff;">
<div class="rank-badge silver">🥈</div>
<div class="model-info">
<h3>GPT-5.4</h3>
<div class="model-meta">OpenAI &middot; 1.1M context &middot; ~92% GPQA Diamond</div>
<div class="model-why">~92% on GPQA Diamond, 41.6% on Humanity's Last Exam, and ~92% on IFEval strict compliance. The best-balanced reasoning model: strong on scientific knowledge, reliable at following precise analytical instructions, and capable across coding and writing tasks simultaneously. The GPT-5.4 Pro variant adds extended reasoning for the genuinely hard problems.</div>
<div class="model-pills">
<span class="pill blue">GPQA ~92%</span>
<span class="pill gold">92% IFEval</span>
<span class="pill green">Balanced</span>
</div>
</div>
<div class="model-score">
<span class="score-val">~92%</span>
<span class="score-label">GPQA Diamond</span>
</div>
</div>
<div class="model-card" style="--model-color: #3fb950;">
<div class="rank-badge bronze">🥉</div>
<div class="model-info">
<h3>Claude Opus 4.7</h3>
<div class="model-meta">Anthropic &middot; 1M context &middot; 128K max output</div>
<div class="model-why">21% fewer errors on OfficeQA Pro document reasoning (Databricks), 13% resolution lift on 93-task coding benchmark (Morph), and 90.9% on BigLaw Bench (Harvey). Now accepts images up to 3.75MP — 3x more than Opus 4.6 — making it the strongest pick for visual research, dense diagrams, and chart analysis. Best for research requiring both depth and 1M-token coherence. Claude Sonnet 4.6 leads GDPval-AA retrieval (1,633 Elo) if throughput matters.</div>
<div class="model-pills">
<span class="pill gold">Best Anthropic model</span>
<span class="pill blue">1M context</span>
<span class="pill green">3.75MP vision</span>
</div>
</div>
<div class="model-score">
<span class="score-val">90.9%</span>
<span class="score-label">BigLaw Bench</span>
</div>
</div>
<div class="model-card" style="--model-color: #8b949e;">
<div class="rank-badge">4</div>
<div class="model-info">
<h3>Gemini 3 Flash (Thinking)</h3>
<div class="model-meta">Google DeepMind &middot; 1M context &middot; $0.50 / $3 per 1M tokens</div>
<div class="model-why">89.8% on GPQA Diamond at just $0.50/$3 per 1M tokens — the best reasoning value by a large margin, outperforming models that cost 20x more. The thinking mode shows its chain-of-thought for auditing. 0.34s time-to-first-token. If you run many hard reasoning calls per day and can't justify frontier pricing, nothing else comes close at this price point.</div>
<div class="model-pills">
<span class="pill orange">89.8% GPQA</span>
<span class="pill green">Best value</span>
<span class="pill gold">Auditable thinking</span>
</div>
</div>
<div class="model-score">
<span class="score-val">$0.50</span>
<span class="score-label">per 1M input</span>
</div>
</div>
<div class="model-card" style="--model-color: #ff9040;">
<div class="rank-badge">5</div>
<div class="model-info">
<h3>Qwen 3.6-Plus</h3>
<div class="model-meta">Alibaba &middot; 1M context &middot; 88.2% GPQA Diamond &middot; Competitive pricing</div>
<div class="model-why">88.2% on GPQA Diamond with a 1M token context window at a fraction of frontier pricing — a genuine dark-horse for knowledge work. Strong on structured knowledge retrieval and multi-step analytical tasks. The same model that leads Terminal-Bench for coding also performs well on reasoning benchmarks, making it unusually versatile. Available via Alibaba Cloud and OpenRouter.</div>
<div class="model-pills">
<span class="pill orange">GPQA 88.2%</span>
<span class="pill blue">1M context</span>
<span class="pill green">Value pick</span>
</div>
</div>
<div class="model-score">
<span class="score-val">88.2%</span>
<span class="score-label">GPQA Diamond</span>
</div>
</div>
</div>
</div>
</div>
<div class="section-divider"></div>
<div class="section-divider"></div>
<!-- =========================================
LOCAL MODELS
========================================= -->
<div id="local" class="section-alt">
<div class="model-section">
<div class="section-header">
<div class="section-icon icon-green">🖥️</div>
<div class="section-header-text">
<h2>Best models to run locally</h2>
<p>Open-weight models you can run on hardware you own — no API key, no monthly bill, no data leaving your machine. Ranked by practical capability on consumer GPU and Apple Silicon hardware.</p>
</div>
</div>
<div class="model-list">
<!-- #1 -->
<div class="model-card" style="--model-color: #4a9eff;">
<div class="rank-badge gold">🥇</div>
<div class="model-info">
<h3>Gemma 4 31B</h3>
<div class="model-meta">Google &middot; Apache 2.0 &middot; 256K context &middot; ~20 GB VRAM (Q4)</div>
<div class="model-why">The best single-GPU open model in 2026. 84.3% on GPQA Diamond, 80.0% on LiveCodeBench v6, 89.2% on AIME 2026 math. Dense architecture (all 31B active every call) gives it consistent quality without the coordination overhead of MoE. Genuinely multimodal — text and images. Runs on an RTX 3090/4090 or an M2/M3 Pro MacBook. Apache 2.0 means you can fine-tune and deploy commercially. The cloud-model quality gap is now thin at this tier.</div>
<div class="model-pills">
<span class="pill blue">GPQA 84.3%</span>
<span class="pill green">Apache 2.0</span>
<span class="pill gold">20 GB VRAM</span>
</div>
</div>
<div class="model-score">
<span class="score-val">84.3%</span>
<span class="score-label">GPQA Diamond</span>
</div>
</div>
<!-- #2 -->
<div class="model-card" style="--model-color: #f0a500;">
<div class="rank-badge silver">🥈</div>
<div class="model-info">
<h3>Qwen3.6 35B</h3>
<div class="model-meta">Alibaba &middot; Apache 2.0 &middot; 128K context &middot; ~18 GB VRAM (Q4)</div>
<div class="model-why">Released April 14, 2026. 73.4% SWE-bench Verified and 86.0% GPQA Diamond — the strongest coding and reasoning scores of any open-weight model that runs on consumer hardware. Sparse 35B/3B-active MoE architecture runs on a 16 GB Mac Mini or RTX 4090. Terminal-Bench 2.0: 51.5% (up from 41.6% on Qwen3.5-27B). Multimodal (vision + language), supports thinking mode. Supersedes Qwen 3.5 27B on all major coding benchmarks.</div>
<div class="model-pills">
<span class="pill gold">SWE 73.4%</span>
<span class="pill blue">128K context</span>
<span class="pill green">16 GB VRAM</span>
</div>
</div>
<div class="model-score">
<span class="score-val">73.4%</span>
<span class="score-label">SWE-bench</span>
</div>
</div>
<!-- #3 -->
<div class="model-card" style="--model-color: #3fb950;">
<div class="rank-badge bronze">🥉</div>
<div class="model-info">
<h3>DeepSeek R1 32B (distill)</h3>
<div class="model-meta">DeepSeek &middot; MIT &middot; 128K context &middot; ~20 GB VRAM (Q4)</div>
<div class="model-why">The strongest battle-tested reasoning model on a single RTX 4090. This is the 32B knowledge-distilled version of the 671B DeepSeek R1 — same chain-of-thought training, fraction of the compute. 62.1% GPQA Diamond, 72.6% AIME 2024, 94.3% MATH-500. Released January 2025 and still the most downloaded reasoning model on Ollama (82M+ pulls) — genuinely proven at scale. MIT license, free to fine-tune. Run it with <code>ollama run deepseek-r1:32b</code>.</div>
<div class="model-pills">
<span class="pill orange">MIT license</span>
<span class="pill blue">Chain-of-thought</span>
<span class="pill green">20 GB VRAM</span>
</div>
</div>
<div class="model-score">
<span class="score-val">62.1%</span>
<span class="score-label">GPQA Diamond</span>
</div>
</div>
<!-- #4 -->
<div class="model-card" style="--model-color: #8b949e;">
<div class="rank-badge">4</div>
<div class="model-info">
<h3>Llama 4 Scout</h3>
<div class="model-meta">Meta &middot; Llama 4 Community License &middot; 10M ctx (128K via Ollama) &middot; ~24 GB VRAM (Q4, 67 GB download)</div>
<div class="model-why">One trick nothing else matches: a 10 million token context window — fit entire codebases, books, or months of logs in a single prompt. MoE architecture (109B total, only 17B active per token) keeps inference fast despite the scale. Natively multimodal: text and images. MMLU Pro 74.3%, GPQA Diamond 57.2%, DocVQA 94.4%. Note: Ollama serves it at 128K context by default — the full 10M requires a multi-GPU server build. The 67 GB Q4 download fits a single RTX 4090 (24 GB) but it is tight. Not true open source — the Llama 4 Community License restricts deployment at 700M+ MAU.</div>
<div class="model-pills">
<span class="pill purple">10M context</span>
<span class="pill blue">Multimodal</span>
<span class="pill gold">24 GB VRAM</span>
</div>
</div>
<div class="model-score">
<span class="score-val">10M</span>
<span class="score-label">token context</span>
</div>
</div>
<!-- #5 -->
<div class="model-card" style="--model-color: #ff9040;">
<div class="rank-badge">5</div>
<div class="model-info">
<h3>Phi-4 Reasoning 14B</h3>
<div class="model-meta">Microsoft &middot; MIT &middot; 32–64K context &middot; ~8 GB VRAM (Q4)</div>
<div class="model-why">The best reasoning model for machines with limited VRAM — an 8 GB GPU or a MacBook with 16 GB RAM. The "plus" variant (Phi-4-reasoning-plus) adds RL training on top of the base SFT and is the one to use: 81.3% AIME 2024 and 68.9% GPQA Diamond, which outperforms the DeepSeek R1 70B distill (5× its size) on both benchmarks. Run it with <code>ollama run phi4-reasoning:14b-plus</code>. Short context (32K, tested to 64K) is the main limit — not suitable for large documents. For math, structured analysis, and code review on laptop hardware, nothing at this weight class comes close.</div>
<div class="model-pills">
<span class="pill green">8 GB VRAM</span>
<span class="pill orange">MIT license</span>
<span class="pill blue">Laptop-friendly</span>
</div>
</div>
<div class="model-score">
<span class="score-val">8 GB</span>
<span class="score-label">min VRAM</span>
</div>
</div>
</div>
<div class="free-note">
<span class="note-icon">💡</span>
<span>Running locally means you own the model and the data. Use <a href="https://ollama.ai" target="_blank" style="color:var(--green)">Ollama</a> or <a href="https://github.com/ggerganov/llama.cpp" target="_blank" style="color:var(--green)">llama.cpp</a> to serve any of these, then point Hermes at your local server: set <code>provider: openai</code> with <code>base_url: http://localhost:11434/v1</code>. Your API key can be any string.</span>
</div>
</div>
</div>
<div class="section-divider"></div>
<!-- =========================================
HOW TO CONFIGURE
========================================= -->
<div id="howto">
<div class="model-section">
<div class="section-header">
<div class="section-icon icon-gold">⚙️</div>
<div class="section-header-text">
<h2>How to set up a model in Hermes</h2>
<p>Each model needs an API key and a provider setting. Here's the quick version for each major provider.</p>
</div>
</div>
<div style="display:grid;gap:16px;">
<div class="setup-box">
<h4>Anthropic (Claude models)</h4>
<p>Get your key at <a href="https://console.anthropic.com" target="_blank" style="color:var(--blue)">console.anthropic.com</a>, then in Hermes settings set <code>provider: anthropic</code> and <code>ANTHROPIC_API_KEY</code> in your environment. Model names: <code>claude-opus-4-7</code>, <code>claude-opus-4-6</code>, <code>claude-sonnet-4-6</code>.</p>
</div>
<div class="setup-box">
<h4>OpenAI (GPT models)</h4>
<p>Get your key at <a href="https://platform.openai.com" target="_blank" style="color:var(--blue)">platform.openai.com</a>, then set <code>provider: openai</code> and <code>OPENAI_API_KEY</code>. Model names: <code>gpt-5-4</code>, <code>gpt-5-4-mini</code>, <code>gpt-5-4-nano</code>.</p>
</div>
<div class="setup-box">
<h4>Google (Gemini models)</h4>
<p>Get your key at <a href="https://aistudio.google.com" target="_blank" style="color:var(--blue)">aistudio.google.com</a>, then set <code>provider: google</code> and <code>GOOGLE_API_KEY</code>. Model names: <code>gemini-3-1-pro-preview</code>, <code>gemini-3-pro</code>, <code>gemini-3-flash</code>.</p>
</div>
<div class="setup-box">
<h4>OpenRouter (all models via one key)</h4>
<p>The easiest way to try multiple models without multiple accounts. Get a key at <a href="https://openrouter.ai" target="_blank" style="color:var(--blue)">openrouter.ai</a>, set <code>provider: openrouter</code> and <code>OPENROUTER_API_KEY</code>. Access Claude, GPT, Gemini, DeepSeek, Llama and more with one key.</p>
</div>
<div class="setup-box">
<h4>Self-hosted (DeepSeek V3.2, Qwen 3.6-Plus, Gemma 4)</h4>
<p>Run models locally with <a href="https://github.com/ggerganov/llama.cpp" target="_blank" style="color:var(--blue)">llama.cpp</a> or <a href="https://ollama.ai" target="_blank" style="color:var(--blue)">Ollama</a>. DeepSeek V3.2 (MIT) and Qwen 3.6-Plus are the top open-weight picks for coding. Gemma 4 26B MoE (Apache 2.0, 82.3% GPQA Diamond with only 3.8B active parameters) is the best edge/self-hosted reasoning option. Point Hermes at your local server: set <code>provider: openai</code> with a <code>base_url</code> like <code>http://localhost:11434/v1</code>. Your API key can be any string.</p>
</div>
</div>
<!-- QUICK PICKER -->
<div style="margin-top:48px;">
<div style="margin-bottom:20px;">
<div class="section-label" style="font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;">Quick reference</div>
<div style="font-size:1.1rem;font-weight:700;color:var(--text-primary);margin-bottom:4px;">Pick by use case</div>
<div style="font-size:0.85rem;color:var(--text-secondary);">Not sure which model to start with? Match your task to a pick.</div>
</div>
<div class="picker-grid">
<div class="picker-card">
<div class="use-case"><span class="uc-icon">🤖</span> Daily assistant</div>
<div class="recommendation">Claude Sonnet 4.6</div>
<div class="why-short">Fast, affordable, strong across everything. The best starting point.</div>
</div>
<div class="picker-card">
<div class="use-case"><span class="uc-icon">💻</span> Complex coding</div>
<div class="recommendation">Claude Opus 4.7</div>
<div class="why-short">Newest Anthropic flagship. Powers Claude Code. Self-correcting reasoning.</div>
</div>
<div class="picker-card">
<div class="use-case"><span class="uc-icon">✍️</span> Creative writing</div>
<div class="recommendation">Claude Sonnet 4.6</div>
<div class="why-short">EQ-Bench CW #1 (1936). Best voice consistency, 85% cheaper than Opus.</div>
</div>
<div class="picker-card">
<div class="use-case"><span class="uc-icon">🔍</span> Search &amp; news</div>
<div class="recommendation">Gemini 3.1 Pro</div>
<div class="why-short">Native Google Search grounding. 2M context for long research.</div>
</div>
<div class="picker-card">
<div class="use-case"><span class="uc-icon">🧮</span> Hard reasoning</div>
<div class="recommendation">Gemini 3.1 Pro</div>
<div class="why-short">GPQA #1 at 94.1%, ARC-AGI-2 #1 at 77.1%.</div>
</div>
<div class="picker-card">
<div class="use-case"><span class="uc-icon">💰</span> Budget pick</div>
<div class="recommendation">Gemini 3 Flash (Thinking)</div>
<div class="why-short">$0.50/1M, 89.8% GPQA Diamond. Best reasoning per dollar by far.</div>
</div>
<div class="picker-card">
<div class="use-case"><span class="uc-icon">📄</span> Huge documents</div>
<div class="recommendation">Gemini 3.1 Pro</div>
<div class="why-short">Up to 2M token context. Load entire codebases or books in one pass.</div>
</div>
<div class="picker-card">
<div class="use-case"><span class="uc-icon">🗝️</span> Try everything</div>
<div class="recommendation">OpenRouter</div>
<div class="why-short">One API key, every model. Switch between Claude, GPT, Gemini instantly.</div>
</div>
<div class="picker-card">
<div class="use-case"><span class="uc-icon">🖥️</span> Run privately</div>
<div class="recommendation">Gemma 4 31B or Qwen3.6 35B</div>
<div class="why-short">No API key, no data leaving your machine. Best two on consumer hardware.</div>
</div>
</div>
</div>
</div>
</div>
<!-- CTA -->
<div style="padding:40px 24px 60px;max-width:960px;margin:0 auto;">
<div class="cta-strip">
<h2>Ready to get started?</h2>
<p>Self-host Hermes in under five minutes and bring your own API key.</p>
<div class="cta-group">
<a href="https://github.com/nesquena/hermes-webui" class="btn-primary" target="_blank">View on GitHub →</a>
<a href="../eli5/" class="btn-ghost">New to AI agents? →</a>
</div>
</div>
</div>
<footer>
<p>Part of the <a href="../">Hermes</a> project &mdash; <a href="https://github.com/nesquena/hermes-webui" target="_blank">open source on GitHub</a> &mdash; benchmarks from <a href="https://www.vellum.ai/llm-leaderboard" target="_blank">Vellum Leaderboard</a></p>
</footer>
<script>
var themeToggle = document.getElementById('theme-toggle');
function setTheme(t) {
document.documentElement.setAttribute('data-theme', t);
localStorage.setItem('theme', t);
themeToggle.textContent = t === 'light' ? '🌙' : '☀️';
}
themeToggle.addEventListener('click', function() {
setTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
});
var saved = localStorage.getItem('theme');
if (saved) setTheme(saved);
// Hamburger
var modelsHam = document.getElementById('models-hamburger');
var modelsMenu = document.getElementById('models-mobile-menu');
if (modelsHam && modelsMenu) {
modelsHam.addEventListener('click', function() {
var open = modelsMenu.classList.toggle('open');
modelsHam.classList.toggle('open', open);
modelsHam.setAttribute('aria-expanded', open);
});
document.addEventListener('click', function(e) {
if (!modelsHam.contains(e.target) && !modelsMenu.contains(e.target)) {
modelsMenu.classList.remove('open');
modelsHam.classList.remove('open');
modelsHam.setAttribute('aria-expanded', 'false');
}
});
}
// Tab bar scroll-to-section
document.querySelectorAll('.tab-pill[href^="#"]').forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
var target = document.querySelector(this.getAttribute('href'));
if (target) {
var offset = 64 + 46; // nav + tab bar
var top = target.getBoundingClientRect().top + window.scrollY - offset;
window.scrollTo({ top: top, behavior: 'smooth' });
}
document.querySelectorAll('.tab-pill').forEach(function(p) { p.classList.remove('active'); });
this.classList.add('active');
});
});
// Update active tab on scroll
var sections = ['overall','coding','writing','search','reasoning','local','howto'];
window.addEventListener('scroll', function() {
var scrollY = window.scrollY + 120;
var current = sections[0];
sections.forEach(function(id) {
var el = document.getElementById(id);
if (el && el.getBoundingClientRect().top + window.scrollY <= scrollY) current = id;
});
document.querySelectorAll('.tab-pill').forEach(function(p) {
p.classList.toggle('active', p.getAttribute('href') === '#' + current);
});
}, { passive: true });
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink