index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Interactive AI dataset readiness and data quality assessment for training, post-training, RAG and evaluation.">
<title>Data Quality</title>
<style>
:root{
  --bg:#07111e;--panel:#0d1a2f;--line:#27415e;
  --text:#f4f8ff;--muted:#9fb3c7;--cyan:#50ddff;--violet:#a48aff;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(circle at 15% -8%,rgba(80,221,255,.14),transparent 30%),
    radial-gradient(circle at 90% 0,rgba(164,138,255,.12),transparent 28%),
    var(--bg);
  color:var(--text);
  font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.wrap{max-width:1120px;margin:auto;padding:0 22px}
.hero{text-align:center;padding:66px 0 32px}
.kicker{
  display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 12px;
  background:#0a1830;color:var(--cyan);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.1em
}
h1{font-size:clamp(46px,8vw,76px);line-height:1;margin:20px 0 14px;letter-spacing:-.055em}
.grad{
  background:linear-gradient(90deg,var(--cyan),#dce8ff,var(--violet));
  background-clip:text;-webkit-background-clip:text;color:transparent
}
.hero p{max-width:760px;margin:auto;color:var(--muted);font-size:18px}
.layout{display:grid;grid-template-columns:390px 1fr;gap:16px;padding:18px 0 50px}
.panel{
  border:1px solid var(--line);border-radius:19px;padding:18px;
  background:linear-gradient(150deg,#10213b,#09172b);
  box-shadow:0 18px 44px rgba(0,0,0,.22)
}
h2{font-size:20px;margin:0 0 5px}.sub{color:var(--muted);font-size:12px;margin-bottom:14px}
label{display:block;font-size:12px;font-weight:800;margin:11px 0 5px}
select,input[type=range]{width:100%}
select{
  background:#08172b;color:var(--text);border:1px solid var(--line);
  border-radius:11px;padding:10px 11px;outline:none
}
.row{
  border:1px solid #223b58;background:#09182d;border-radius:11px;padding:10px;margin:9px 0
}
.rowtop{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:800}
.val{color:var(--cyan)}
input[type=range]{accent-color:#6e7dff}
button{
  width:100%;border:0;border-radius:11px;padding:11px 12px;color:white;font-weight:850;
  background:linear-gradient(90deg,#3188ff,#775df0);cursor:pointer;margin-top:13px
}
.scorebox{text-align:center;border:1px solid #284662;background:#08172c;border-radius:16px;padding:20px}
.score{font-size:72px;line-height:1;font-weight:950;letter-spacing:-.06em}
.status{font-size:13px;color:var(--muted);margin-top:5px}
.profile{margin-top:15px}
.metric{margin:11px 0}
.metricTop{display:flex;justify-content:space-between;font-size:11px;font-weight:800}
.bar{height:7px;background:#182a43;border-radius:999px;overflow:hidden;margin-top:5px}
.fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.risks{margin-top:18px}
.risk{border-top:1px solid var(--line);padding:10px 0}
.risk b{display:block;font-size:12px}.risk span{font-size:11px;color:var(--muted)}
.badge{
  display:inline-block;border:1px solid #31516f;border-radius:999px;padding:5px 8px;
  font-size:10px;color:#c7d8e7;background:#0d2038;margin-bottom:10px
}
.note{margin-top:14px;font-size:11px;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:28px 0 45px;color:var(--muted);font-size:13px}
footer strong{color:var(--text)}
@media(max-width:860px){.layout{grid-template-columns:1fr}}
</style>
</head>
<body>
<header class="hero">
  <div class="wrap">
    <span class="kicker">Dataset Readiness · Data-Centric AI</span>
    <h1>Data <span class="grad">Quality</span></h1>
    <p>Assess whether a dataset is ready for training, post-training, evaluation, RAG or agentic AI.</p>
  </div>
</header>

<main class="wrap">
  <section class="layout">
    <aside class="panel">
      <h2>Dataset profile</h2>
      <div class="sub">Choose the AI stage and score the dataset.</div>

      <label for="stage">Primary use</label>
      <select id="stage">
        <option value="pretraining">Pretraining</option>
        <option value="posttraining">Post-Training</option>
        <option value="evaluation">Evaluation</option>
        <option value="rag">RAG / Retrieval</option>
        <option value="agents">Agent Data</option>
      </select>

      <div id="sliders"></div>
      <button id="assess">Assess readiness</button>
    </aside>

    <section class="panel">
      <span class="badge" id="stageBadge">Pretraining</span>
      <div class="scorebox">
        <div class="score" id="overall">0</div>
        <div class="status" id="status"></div>
      </div>

      <div class="profile" id="profile"></div>

      <div class="risks">
        <h2 style="font-size:18px">Priority actions</h2>
        <div class="sub">The weakest dimensions should be addressed first.</div>
        <div id="actions"></div>
      </div>

      <div class="note">
        Educational assessment only. It does not certify legal, regulatory, security or production readiness.
      </div>
    </section>
  </section>
</main>

<footer>
  <div class="wrap">
    <strong>Data Quality</strong> — an independent Hugging Face Space for dataset readiness.<br>
    Collaboration and partnerships: <strong>agenten@magenta.de</strong>
  </div>
</footer>

<script>
const dims=[
  ["Structure","Schema consistency, parseability and missing fields."],
  ["Content quality","Coherence, usefulness and low-noise content."],
  ["Deduplication","Control of exact, near and semantic duplicates."],
  ["Provenance","Traceable source, transformation history and versioning."],
  ["Privacy","PII awareness and appropriate handling."],
  ["Contamination","Protection against benchmark or evaluation leakage."],
  ["Diversity","Coverage across relevant domains, sources and difficulty."],
  ["Task fit","How closely the dataset matches the target use case."]
];

const weights={
  pretraining:[1.0,1.35,1.2,1.0,1.0,1.05,1.25,1.15],
  posttraining:[1.0,1.5,1.0,0.9,1.0,1.05,1.25,1.5],
  evaluation:[1.0,1.3,0.9,1.1,0.9,1.6,1.25,1.55],
  rag:[1.0,1.2,1.0,1.35,1.1,0.8,1.0,1.55],
  agents:[1.0,1.4,0.9,1.0,1.1,0.9,1.25,1.6]
};

const labels={
  pretraining:"Pretraining",
  posttraining:"Post-Training",
  evaluation:"Evaluation",
  rag:"RAG / Retrieval",
  agents:"Agent Data"
};

const actionsMap={
  "Structure":"Normalize schema, repair malformed records and validate required fields.",
  "Content quality":"Add heuristic and model-based quality scoring, then review low-scoring examples.",
  "Deduplication":"Run exact, near-duplicate and—if necessary—semantic deduplication.",
  "Provenance":"Track source, license, transformations, version and filtering decisions.",
  "Privacy":"Scan for PII and define redaction, removal or access-control policies.",
  "Contamination":"Check overlap with evaluation data using exact and fuzzy/semantic methods.",
  "Diversity":"Measure source/domain coverage and rebalance underrepresented areas.",
  "Task fit":"Compare the dataset distribution with real target tasks and deployment conditions."
};

const sliders=document.getElementById("sliders");
dims.forEach(([name,desc],i)=>{
  const wrap=document.createElement("div");
  wrap.className="row";
  wrap.innerHTML=`
    <div class="rowtop"><span>${name}</span><span class="val" id="v${i}">75</span></div>
    <input id="r${i}" type="range" min="0" max="100" value="75">
    <div style="font-size:10px;color:#9fb3c7">${desc}</div>`;
  sliders.appendChild(wrap);
  wrap.querySelector("input").addEventListener("input",e=>{
    document.getElementById("v"+i).textContent=e.target.value;
    assess();
  });
});

function values(){return dims.map((_,i)=>+document.getElementById("r"+i).value)}

function assess(){
  const stage=document.getElementById("stage").value;
  const vals=values();
  const w=weights[stage];
  const total=vals.reduce((s,v,i)=>s+v*w[i],0)/w.reduce((a,b)=>a+b,0);

  document.getElementById("overall").textContent=Math.round(total);
  document.getElementById("stageBadge").textContent=labels[stage];

  let status="Needs significant curation before use.";
  if(total>=85) status="Strong readiness profile — validate remaining risks before use.";
  else if(total>=70) status="Promising, but several curation checks still matter.";
  else if(total>=55) status="Moderate readiness — prioritize the weakest dimensions.";
  document.getElementById("status").textContent=status;

  document.getElementById("profile").innerHTML=dims.map(([name],i)=>`
    <div class="metric">
      <div class="metricTop"><span>${name}</span><span>${vals[i]}</span></div>
      <div class="bar"><div class="fill" style="width:${vals[i]}%"></div></div>
    </div>`).join("");

  const ranked=dims.map(([name],i)=>({name,v:vals[i]})).sort((a,b)=>a.v-b.v).slice(0,3);
  document.getElementById("actions").innerHTML=ranked.map(x=>`
    <div class="risk"><b>${x.name} · ${x.v}/100</b><span>${actionsMap[x.name]}</span></div>
  `).join("");
}

document.getElementById("stage").addEventListener("change",assess);
document.getElementById("assess").addEventListener("click",assess);
assess();
</script>
</body>
</html>