LLM Selection Advisor: Interactive Tool to Find the Right Model

:root{–bg:#0f1117;–card:#1a1d27;–accent:#6366f1;–text:#e2e8f0;–muted:#94a3b8;–border:#2d3148;–success:#22c55e;–warning:#f59e0b}
*{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;max-width:900px;margin:0 auto}
h1{font-size:1.8rem;margin-bottom:0.5rem;background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{color:var(–muted);margin-bottom:2rem}
.card{background:var(–card);border:1px solid var(–border);border-radius:12px;padding:1.5rem;margin:1rem 0}
label{display:block;font-weight:600;margin-bottom:0.5rem;color:var(–muted);font-size:0.85rem;text-transform:uppercase}
select,input{width:100%;padding:0.75rem;background:var(–bg);border:1px solid var(–border);border-radius:8px;color:var(–text);font-size:1rem;margin-bottom:1rem}
select:focus,input:focus{outline:none;border-color:var(–accent)}
button{background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;border:none;padding:1rem 2rem;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;width:100%;margin:1rem 0}
button:hover{opacity:0.9}
#result{display:none}
.rec{background:linear-gradient(135deg,#22c55e10,#22c55e05);border:1px solid #22c55e40;border-radius:12px;padding:1.5rem;margin:1rem 0}
.rec h3{color:#22c55e;margin-top:0}
.rec.model{background:linear-gradient(135deg,#6366f110,#6366f105);border-color:#6366f440}
.rec.model h3{color:var(–accent)}
.warn{background:#f59e0b10;border:1px solid #f59e0b40;border-radius:8px;padding:1rem;margin:1rem 0;color:#f59e0b}
.comparison{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1rem 0}
.comp-card{background:var(–bg);border:1px solid var(–border);border-radius:8px;padding:1rem;text-align:center}
.comp-card .name{font-weight:700;font-size:0.9rem}
.comp-card .score{font-size:1.5rem;font-weight:700;color:var(–accent);margin:0.5rem 0}
.comp-card .detail{font-size:0.75rem;color:var(–muted)}

🤖 LLM Selection Advisor

Reviewed: June 4, 2026

Answer 6 questions and get a personalized model recommendation with cost estimates.

function recommend(){
const uc=document.getElementById(‚usecase‘).value;
const vol=document.getElementById(‚volume‘).value;
const budget=document.getElementById(‚budget‘).value;
const lat=document.getElementById(‚latency‘).value;
const host=document.getElementById(‚hosting‘).value;
const sens=document.getElementById(’sensitivity‘).value;

if(!uc||!vol||!budget||!lat||!host||!sens){
alert(‚Please answer all 6 questions.‘);
return;
}

let scores={};
// Scoring logic
const models=[‚claude-sonnet‘,’gpt-4o‘,’gpt-4o-mini‘,’gemini-pro‘,’llama-3-70b‘,’mistral-large‘];
models.forEach(m=>scores[m]={score:0,cost:“,reason:[]});

// Use case weighting
if(uc===’chat‘){scores[‚gpt-4o-mini‘].score+=3;scores[‚gpt-4o‘].score+=2;scores[‚claude-sonnet‘].score+=2;}
if(uc===’code‘){scores[‚claude-sonnet‘].score+=3;scores[‚gpt-4o‘].score+=3;scores[‚gpt-4o-mini‘].score+=1;}
if(uc===’analysis‘){scores[‚gpt-4o‘].score+=3;scores[‚claude-sonnet‘].score+=2;scores[‚gemini-pro‘].score+=2;}
if(uc===’creative‘){scores[‚claude-sonnet‘].score+=3;scores[‚gpt-4o‘].score+=2;}
if(uc===’reasoning‘){scores[‚gpt-4o‘].score+=3;scores[‚claude-sonnet‘].score+=3;scores[‚mistral-large‘].score+=1;}
if(uc===’agent‘){scores[‚claude-sonnet‘].score+=3;scores[‚gpt-4o‘].score+=2;scores[‚llama-3-70b‘].score+=2;}

// Volume + budget
if(vol===’low’&&budget===’tight‘){scores[‚gpt-4o-mini‘].score+=3;scores[‚llama-3-70b‘].score+=2;}
if(vol===’enterprise’||budget===’flexible‘){scores[‚gpt-4o‘].score+=2;scores[‚claude-sonnet‘].score+=2;}
if(budget===’tight‘){scores[‚mistral-large‘].score+=2;scores[‚gemini-pro‘].score+=1;}

// Latency
if(lat===’fast‘){scores[‚gpt-4o-mini‘].score+=3;scores[‚gemini-pro‘].score+=2;scores[‚gpt-4o‘].score+=1;}
if(lat===’batch‘){scores[‚llama-3-70b‘].score+=2;scores[‚mistral-large‘].score+=2;}

// Hosting
if(host===’onprem‘){scores[‚llama-3-70b‘].score+=5;scores[‚mistral-large‘].score+=4;scores[‚gpt-4o‘].score-=3;scores[‚claude-sonnet‘].score-=3;}
if(host===’cloud‘){scores[‚gpt-4o‘].score+=2;scores[‚claude-sonnet‘].score+=2;scores[‚gemini-pro‘].score+=2;}

// Sensitivity
if(sens===’confidential‘){scores[‚llama-3-70b‘].score+=3;scores[‚mistral-large‘].score+=2;scores[‚gpt-4o‘].score-=1;}

// Sort
const sorted=Object.entries(scores).sort((a,b)=>b[1].score-a[1].score);
const top=sorted[0];
const runnerUp=sorted[1];

const costMap={‚claude-sonnet‘:’$3-15/1M tokens‘,’gpt-4o‘:’$2.5-10/1M tokens‘,’gpt-4o-mini‘:’$0.15-0.60/1M tokens‘,’gemini-pro‘:’$0.5-2/1M tokens‘,’llama-3-70b‘:’~$0 (self-hosted GPU cost)‘,’mistral-large‘:’$2-8/1M tokens (API) or self-hosted‘};

let html=`

`;

html+=`

`;

if(sens===’confidential’&&host===’cloud‘){
html+=`

`;
}
if(budget===’tight’&&top[0]!==’gpt-4o-mini’&&top[0]!==’llama-3-70b‘){
html+=`

`;
}

html+=`

`;

const resultDiv=document.getElementById(‚result‘);
resultDiv.innerHTML=html;
resultDiv.style.display=’block‘;
resultDiv.scrollIntoView({behavior:’smooth‘});
}