AI Model Selector — Find the Right Model for Your Use Case

:root{–bg:#0f1117;–surface:#1a1d27;–border:#2a2d3a;–accent:#6366f1;–accent-light:#818cf8;–text:#e2e8f0;–muted:#94a3b8;–green:#34d399}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,’Segoe UI‘,Roboto,sans-serif;background:var(–bg);color:var(–text);line-height:1.6;padding:2rem 1rem}
.container{max-width:800px;margin:0 auto}
h1{font-size:1.8rem;font-weight:800;margin-bottom:0.3rem;background:linear-gradient(135deg,var(–accent-light),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{color:var(–muted);margin-bottom:2rem;font-size:0.95rem}
.step{background:var(–surface);border:1px solid var(–border);border-radius:10px;padding:1.5rem;margin-bottom:1.2rem}
.step-number{display:inline-block;background:var(–accent);color:#fff;width:28px;height:28px;border-radius:50%;text-align:center;line-height:28px;font-weight:700;font-size:0.85rem;margin-right:0.6rem}
.step-title{font-size:1.1rem;font-weight:700;margin-bottom:1rem}
.options{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem}
@media(max-width:500px){.options{grid-template-columns:1fr}}
.option{padding:0.8rem 1rem;background:var(–bg);border:2px solid var(–border);border-radius:8px;cursor:pointer;transition:all 0.2s;font-size:0.92rem}
.option:hover{border-color:var(–accent)}
.option.selected{border-color:var(–accent);background:rgba(99,102,241,0.1)}
.option-title{font-weight:600;margin-bottom:0.2rem}
.option-desc{font-size:0.8rem;color:var(–muted)}
.result{display:none;background:var(–surface);border:1px solid var(–green);border-radius:10px;padding:1.5rem;margin-top:1.5rem}
.result.show{display:block}
.result-title{font-size:1.2rem;font-weight:700;color:var(–green);margin-bottom:0.8rem}
.model-rec{background:var(–bg);border-radius:8px;padding:1rem;margin:0.6rem 0;border-left:3px solid var(–accent)}
.model-name{font-weight:700;font-size:1rem;margin-bottom:0.3rem}
.model-reason{font-size:0.9rem;color:var(–muted)}
.model-score{display:inline-block;background:var(–accent);color:#fff;padding:0.15rem 0.5rem;border-radius:4px;font-size:0.75rem;font-weight:600;margin-left:0.5rem}
.reset-btn{background:var(–surface);border:1px solid var(–border);color:var(–muted);padding:0.6rem 1.2rem;border-radius:6px;cursor:pointer;font-size:0.9rem;margin-top:1rem;transition:all 0.2s}
.reset-btn:hover{border-color:var(–accent);color:var(–text)}

const answers = {};

function select(step, value, el) {
answers[step] = value;
const stepEl = document.getElementById(’step‘ + step);
stepEl.querySelectorAll(‚.option‘).forEach(o => o.classList.remove(’selected‘));
el.classList.add(’selected‘);

const nextStep = document.getElementById(’step‘ + (step + 1));
if (nextStep) {
nextStep.style.opacity = ‚1‘;
nextStep.style.pointerEvents = ‚auto‘;
}

if (step === 5) {
showResults();
}
}

function score(models) {
const s = answers;
return models.map(m => {
let score = 0;
const use = s[1], budget = s[2], ctx = s[3], lat = s[4], priv = s[5];

if (m.strengths.includes(use)) score += 30;
if (m.budget === budget || m.budget === ‚any‘) score += 20;
if (m.context >= ctx) score += 15;
if (m.latency = priv) score += 20;

return { …m, score };
}).sort((a, b) => b.score – a.score);
}

const models = [
{ name: „GPT-4o (OpenAI)“, strengths: [„coding“,“writing“,“chat“,“vision“], budget: „medium“, context: „long“, latency: „fast“, privacy: „standard“, reason: „Best all-rounder. Excellent at coding, writing, and multimodal tasks. Good balance of quality and cost.“ },
{ name: „Claude 3.5 Sonnet (Anthropic)“, strengths: [„coding“,“writing“,“analysis“,“agent“], budget: „medium“, context: „long“, latency: „fast“, privacy: „standard“, reason: „Superior at nuanced writing and complex reasoning. Excellent agent/tool use capabilities.“ },
{ name: „Gemini 2.5 Pro (Google)“, strengths: [„vision“,“analysis“,“coding“,“agent“], budget: „medium“, context: „xlong“, latency: „fast“, privacy: „standard“, reason: „Massive 1M context window. Best for long documents and multimodal analysis.“ },
{ name: „o4-mini (OpenAI)“, strengths: [„analysis“,“coding“], budget: „low“, context: „long“, latency: „fast“, privacy: „standard“, reason: „Incredible value for reasoning tasks. Near GPT-4o quality at a fraction of the cost.“ },
{ name: „GPT-4o mini (OpenAI)“, strengths: [„chat“,“writing“], budget: „low“, context: „medium“, latency: „realtime“, privacy: „standard“, reason: „Ultra-cheap and fast. Perfect for high-volume chat and simple content tasks.“ },
{ name: „DeepSeek-V3“, strengths: [„coding“,“analysis“], budget: „low“, context: „long“, latency: „fast“, privacy: „public“, reason: „Open-source quality at API prices. Excellent coding model, very cost-effective.“ },
{ name: „DeepSeek-R1“, strengths: [„analysis“,“coding“], budget: „low“, context: „long“, latency: „normal“, privacy: „public“, reason: „Best open-source reasoning model. Matches o1/o3 on many benchmarks.“ },
{ name: „Llama 3.1 405B (self-hosted)“, strengths: [„coding“,“writing“,“chat“,“agent“], budget: „free“, context: „long“, latency: „batch“, privacy: „strict“, reason: „Full control, no API costs. Requires significant GPU infrastructure (4x H100 minimum).“ },
{ name: „Llama 3.1 70B (self-hosted)“, strengths: [„coding“,“chat“,“agent“], budget: „free“, context: „medium“, latency: „normal“, privacy: „strict“, reason: „Best open-source model that fits on a single node. Great for private deployments.“ },
{ name: „Gemini 2.5 Flash (Google)“, strengths: [„chat“,“writing“,“vision“], budget: „low“, context: „xlong“, latency: „realtime“, privacy: „standard“, reason: „Blazing fast, ultra-cheap, massive context. Best for high-throughput applications.“ },
{ name: „Mistral Large 2“, strengths: [„coding“,“analysis“,“writing“], budget: „medium“, context: „long“, latency: „fast“, privacy: „standard“, reason: „Strong European alternative. Good multilingual support, competitive pricing.“ },
{ name: „Groq Llama 3.1 70B“, strengths: [„chat“,“coding“], budget: „low“, context: „medium“, latency: „realtime“, privacy: „public“, reason: „Fastest inference available (500+ tokens/sec). Real-time applications only.“ },
];

function showResults() {
const scored = score(models);
const top3 = scored.slice(0, 3);
const maxScore = top3[0].score;

document.getElementById(‚recommendations‘).innerHTML = top3.map((m, i) => `

`).join(“);

document.getElementById(‚result‘).classList.add(’show‘);
document.getElementById(‚result‘).scrollIntoView({ behavior: ’smooth‘ });
}

function reset() {
answers = {};
for (let i = 1; i o.classList.remove(’selected‘));
if (i > 1) {
document.getElementById(’step‘ + i).style.opacity = ‚0.4‘;
document.getElementById(’step‘ + i).style.pointerEvents = ’none‘;
}
}
document.getElementById(‚result‘).classList.remove(’show‘);
window.scrollTo({ top: 0, behavior: ’smooth‘ });
}