*{margin:0;padding:0;box-sizing:border-box}
:root{–bg:#0f1117;–card:#1a1d2e;–accent:#6c63ff;–accent2:#ff6584;–text:#e0e0e0;–muted:#8892b0;–border:#2a2d3e;–success:#00c853;–warn:#ffc107;–info:#2196f3}
body{font-family:’Segoe UI‘,system-ui,sans-serif;background:var(–bg);color:var(–text);min-height:100vh;line-height:1.6}
.header{background:linear-gradient(135deg,#1a1d2e 0%,#0f1117 100%);padding:40px 20px;text-align:center;border-bottom:1px solid var(–border)}
.header h1{font-size:2em;background:linear-gradient(135deg,var(–accent),#00c853);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.header p{color:var(–muted);max-width:600px;margin:0 auto}
.container{max-width:800px;margin:0 auto;padding:30px 20px}
.tree-node{background:var(–card);border:1px solid var(–border);border-radius:12px;padding:24px;margin-bottom:16px;display:none;animation:fadeIn .3s}
.tree-node.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tree-node h3{font-size:1.2em;margin-bottom:16px}
.choices{display:flex;flex-direction:column;gap:10px}
.choice{background:var(–bg);border:2px solid var(–border);border-radius:10px;padding:14px 18px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:12px}
.choice:hover{border-color:var(–accent);background:rgba(108,99,255,0.08)}
.choice .icon{font-size:1.4em}
.choice .text .label{font-size:1em;font-weight:600}
.choice .text .sub{font-size:.82em;color:var(–muted);margin-top:2px}
.result{display:none;background:linear-gradient(135deg,rgba(0,200,83,0.08),rgba(33,150,243,0.08));border:2px solid var(–success);border-radius:14px;padding:32px;text-align:center;animation:fadeIn .4s}
.result.active{display:block}
.result h2{font-size:1.4em;color:var(–success);margin-bottom:8px}
.result .verdict{font-size:2em;font-weight:800;margin:12px 0}
.result .explanation{color:var(–text);line-height:1.7;margin:16px 0;text-align:left}
.result .pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0;text-align:left}
.pros{background:rgba(0,200,83,0.1);border-radius:10px;padding:16px}
.cons{background:rgba(255,101,132,0.1);border-radius:10px;padding:16px}
.pros h4{color:var(–success);margin-bottom:8px}
.cons h4{color:var(–accent2);margin-bottom:8px}
.pros li,.cons li{margin-bottom:6px;font-size:.92em}
.result .tags span{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.8em;font-weight:600;margin:3px}
.tag-rag{background:rgba(0,200,83,0.15);color:var(–success)}
.tag-ft{background:rgba(33,150,243,0.15);color:var(–info)}
.tag-hybrid{background:rgba(108,99,255,0.15);color:var(–accent)}
.tag-fewshot{background:rgba(255,193,7,0.15);color:var(–warn)}
.reset-btn{display:inline-block;padding:12px 28px;background:var(–bg);color:var(–text);border:1px solid var(–border);border-radius:10px;cursor:pointer;font-size:1em;margin-top:16px;transition:all .2s}
.reset-btn:hover{border-color:var(–accent)}
.footer{text-align:center;padding:30px;color:var(–muted);font-size:.9em;border-top:1px solid var(–border);margin-top:40px}
🔀 RAG vs Fine-Tuning Decision Tool
Reviewed: June 4, 2026
Navigate the key tradeoffs with an interactive decision tree. Get a clear recommendation for your use case.
1. How much domain-specific training data do you have?
2. How often does your knowledge base change?
2. Is your domain highly specialized or generic?
2. Do you have documents/knowledge-base to reference?
3. What’s your latency requirement?
✅ Recommendation: RAG (Retrieval-Augmented Generation)
✅ Pros
- Always current — no retraining needed
- Source attribution & explainability
- Lower upfront cost
- Easy to update knowledge
⚠️ Watch out
- Retrieval quality is critical
- Higher latency than pure generation
- Context window limits retrieval volume
✅ Recommendation: Fine-Tuning
✅ Pros
- Fast inference — no retrieval step
- Deep domain expertise baked in
- Consistent style and terminology
- Lower per-query cost at scale
⚠️ Watch out
- Expensive to train and retrain
- Knowledge becomes stale
- Risk of catastrophic forgetting
- Needs quality training data
✅ Recommendation: Hybrid Approach
✅ Pros
- Domain expertise + current knowledge
- Optimized latency with cached retrieval
- Most flexible architecture
⚠️ Watch out
- More complex to implement
- Higher initial development cost
- Requires orchestration layer
✅ Recommendation: Few-Shot Prompting
✅ Pros
- Zero training cost
- Instant to deploy and iterate
- Works with any base model
- Easy to A/B test examples
⚠️ Watch out
- Consumes context window
- Quality depends on example selection
- Not ideal for complex domain shifts
function go(from,to){
document.getElementById(from).classList.remove(‚active‘);
const target=document.getElementById(to);
target.classList.add(‚active‘);
target.scrollIntoView({behavior:’smooth‘,block:’center‘});
}
function resetTree(){
document.querySelectorAll(‚.tree-node,.result‘).forEach(el=>el.classList.remove(‚active‘));
document.getElementById(‚q1‘).classList.add(‚active‘);
window.scrollTo({top:0,behavior:’smooth‘});
}