*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0f172a;color:#e2e8f0;padding:20px;line-height:1.6}
h1{text-align:center;margin:8px 0 4px;font-size:1.8em;color:#f8fafc}
.subtitle{text-align:center;color:#94a3b8;margin-bottom:24px;font-size:0.95em}
.container{max-width:800px;margin:0 auto}
.slider-group{margin:20px 0;padding:16px;background:#1e293b;border-radius:12px;border:1px solid #334155}
.slider-group label{display:flex;justify-content:space-between;margin-bottom:8px;font-weight:600}
.slider-group .desc{font-size:0.85em;color:#94a3b8;margin-bottom:8px}
input[type=range]{width:100%;accent-color:#3b82f6}
.scores{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:24px 0}
.score-card{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:16px;text-align:center}
.score-card .val{font-size:2.5em;font-weight:700}
.score-card .label{color:#94a3b8;font-size:0.85em;margin-top:4px}
.overall{text-align:center;padding:24px;background:#1e293b;border-radius:16px;margin:24px 0;border:2px solid #3b82f6}
.overall .grade{font-size:4em;font-weight:800}
.overall .total{font-size:1.2em;color:#94a3b8;margin-top:4px}
.bar{height:8px;background:#334155;border-radius:4px;overflow:hidden;margin-top:8px}
.bar-fill{height:100%;border-radius:4px;transition:width 0.5s}
.actions{display:flex;gap:12px;justify-content:center;margin:24px 0}
.btn{padding:12px 24px;border:none;border-radius:8px;cursor:pointer;font-size:1em;font-weight:600}
.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover{background:#2563eb}
.btn-secondary{background:#334155;color:#e2e8f0}.btn-secondary:hover{background:#475569}
.recommendations{margin-top:24px;padding:16px;background:#1e293b;border-radius:12px;border:1px solid #334155}
.recommendations h3{margin-bottom:12px;color:#f8fafc}
.recommendations ul{margin-left:20px}
.recommendations li{margin:6px 0}
#radarChart{max-width:400px;margin:0 auto}

if(v<50)recs.push(`🔴 ${k} is critically low (${v}/100). Focus here first.`);
else if(v<70)recs.push(`🟡 ${k} needs improvement (${v}/100). Consider targeted data augmentation.`);

document.getElementById('recList').innerHTML=recs.map(r=>`${r}`).join('');

function getColor(s){return s>=85?'#22c55e':s>=70?'#eab308':s>=50?'#f59e0b':'#ef4444'}
function getGrade(s){if(s>=90)return'A+';if(s>=85)return'A';if(s>=80)return'A-';if(s>=75)return'B+';if(s>=70)return'B';if(s>=65)return'B-';if(s>=60)return'C+';if(s>=55)return'C';return'D'}

function update(){
const f=Math.round(parseInt(document.getElementById('fidelity').value)*0.30);
const d=Math.round(parseInt(document.getElementById('diversity').value)*0.25);
const p=Math.round(parseInt(document.getElementById('privacy').value)*0.15);
const u=Math.round(parseInt(document.getElementById('utility').value)*0.20);
const cval=Math.round(parseInt(document.getElementById('consistency').value)*0.10);
const total=Math.round(f+d+p+u+cval);

const recs=[];
const vals={Fidelity:parseInt(document.getElementById('fidelity').value),Diversity:parseInt(document.getElementById('diversity').value),Privacy:parseInt(document.getElementById('privacy').value),Utility:parseInt(document.getElementById('utility').value),Consistency:parseInt(document.getElementById('consistency').value)};

function exportReport(){
const vals={Fidelity:document.getElementById('fidelity').value,Diversity:document.getElementById('diversity').value,Privacy:document.getElementById('privacy').value,Utility:document.getElementById('utility').value,Consistency:document.getElementById('consistency').value};
const report=JSON.stringify({timestamp:new Date().toISOString(),scores:vals,overall:document.getElementById('overallScore').textContent},null,2);
const blob=new Blob([report],{type:'application/json'});
const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='synthetic-data-quality-report.json';a.click();

function resetAll(){
['fidelity','diversity','privacy','utility','consistency'].forEach(id=>{document.getElementById(id).value=70;});

🧪 Synthetic Data Quality Assessment Tool

Evaluate your synthetic data across 5 key quality dimensions

// Update slider displays
document.getElementById(‚fidelityVal‘).textContent=document.getElementById(‚fidelity‘).value;
document.getElementById(‚diversityVal‘).textContent=document.getElementById(‚diversity‘).value;
document.getElementById(‚privacyVal‘).textContent=document.getElementById(‚privacy‘).value;
document.getElementById(‚utilityVal‘).textContent=document.getElementById(‚utility‘).value;
document.getElementById(‚consistencyVal‘).textContent=document.getElementById(‚consistency‘).value;

// Update cards
document.getElementById(‚fCard‘).textContent=document.getElementById(‚fidelity‘).value;
document.getElementById(‚dCard‘).textContent=document.getElementById(‚diversity‘).value;
document.getElementById(‚pCard‘).textContent=document.getElementById(‚privacy‘).value;
document.getElementById(‚uCard‘).textContent=document.getElementById(‚utility‘).value;
document.getElementById(‚cCard‘).textContent=document.getElementById(‚consistency‘).value;
document.getElementById(‚fCard‘).style.color=getColor(parseInt(document.getElementById(‚fidelity‘).value));
document.getElementById(‚dCard‘).style.color=getColor(parseInt(document.getElementById(‚diversity‘).value));
document.getElementById(‚pCard‘).style.color=getColor(parseInt(document.getElementById(‚privacy‘).value));
document.getElementById(‚uCard‘).style.color=getColor(parseInt(document.getElementById(‚utility‘).value));
document.getElementById(‚cCard‘).style.color=getColor(parseInt(document.getElementById(‚consistency‘).value));

// Update overall
document.getElementById(‚overallScore‘).textContent=’Overall Score: ‚+total+’/100‘;
document.getElementById(‚overallGrade‘).textContent=getGrade(total);
document.getElementById(‚overallGrade‘).style.color=getColor(total);
document.getElementById(‚overallBar‘).style.width=total+’%‘;
document.getElementById(‚overallBar‘).style.background=getColor(total);

// Recommendations

for(const[k,v] of Object.entries(vals)){

}
if(total>=85)recs.push(‚🟢 Data quality is excellent. Ready for production training.‘);

else if(total>=70)recs.push('🟡 Data quality is good. Address yellow items before scaling.');
else recs.push('🔴 Data quality needs significant improvement. Do not train production models.');

}

}

update();
}

update();