index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Validation Readiness</title>
<meta name="description" content="Assess AI validation readiness across intended use, data, models, agents, observability, revalidation, and governance." />
<style>
:root{
  --bg:#f7fbff;--panel:#fff;--text:#102235;--muted:#617286;--line:#dfeaf3;
  --a:#1685ff;--b:#17ba9c;--soft:#eef8ff;--good:#edfdf6;--warn:#fff8ea;
  --shadow:0 16px 42px rgba(28,77,117,.10)
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#f9fdff,#eef8ff);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
.container{max-width:1180px;margin:auto;padding:26px 18px 60px}
.hero{padding:34px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,#fff 0%,#effaff 58%,#eef8ff 100%);box-shadow:var(--shadow)}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#2878c5}
h1{font-size:clamp(34px,5vw,60px);line-height:1.03;letter-spacing:-.04em;margin:9px 0 14px}
.lead{font-size:18px;line-height:1.65;color:#40546a;max-width:900px}
.badges{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.badge{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:750;color:#39536b}
.grid{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;margin-top:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 10px 28px rgba(31,79,121,.07)}
.card h2{font-size:22px;margin:0 0 8px}
.card p{color:var(--muted);line-height:1.6}
.item{border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:12px;background:#fbfdff}
.item h3{font-size:16px;margin:0 0 7px}
.item p{font-size:14px;margin:0 0 12px;color:var(--muted)}
.choice{display:flex;gap:8px;flex-wrap:wrap}
.choice label{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #d6e4ef;border-radius:11px;background:#fff;font-size:13px;cursor:pointer}
.choice input{accent-color:#1886f7}
button{margin-top:22px;border:0;border-radius:14px;padding:14px 17px;background:linear-gradient(135deg,var(--a),var(--b));color:#fff;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 8px 18px rgba(30,136,255,.18)}
button:hover{transform:translateY(-1px)}
.scorebox{text-align:center;padding:24px;border-radius:20px;background:linear-gradient(135deg,#eff8ff,#effdf8);border:1px solid #d7ebe4}
.scorebox .score{font-size:56px;line-height:1;font-weight:850;letter-spacing:-.05em}
.scorebox .label{font-size:13px;color:var(--muted);margin-top:7px}
.level{display:inline-block;margin-top:12px;padding:8px 12px;border-radius:999px;font-weight:800;font-size:13px;background:#fff;border:1px solid var(--line)}
.progress{height:12px;background:#edf2f6;border-radius:999px;overflow:hidden;margin:20px 0 8px}
.bar{height:100%;width:0;background:linear-gradient(90deg,var(--a),var(--b));transition:width .35s ease}
.small{font-size:13px;color:var(--muted)}
.section{margin-top:22px}
.section h3{font-size:18px;margin:0 0 10px}
.checks{display:grid;gap:10px}
.check{padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fbfdff}
.check b{display:block;margin-bottom:4px}
.check span{font-size:14px;line-height:1.5;color:var(--muted)}
.info{margin-top:24px;padding:20px 22px;border:1px solid #d8ebff;border-radius:18px;background:var(--soft);color:#34526c;line-height:1.65}
.footer{margin-top:34px;color:#6b7b8c;font-size:13px;line-height:1.6}
a{color:#0f71da}
@media(max-width:860px){.grid{grid-template-columns:1fr}.hero{padding:26px}.container{padding:16px 13px 45px}}
</style>
</head>
<body>
<div class="container">
  <section class="hero">
    <div class="eyebrow">Validation · Readiness Assessment</div>
    <h1>Validation Readiness</h1>
    <p class="lead">Assess whether your AI validation process covers the essential layers needed for reliable deployment, monitoring, and revalidation.</p>
    <div class="badges">
      <span class="badge">Requirements</span><span class="badge">Data</span><span class="badge">Models</span>
      <span class="badge">Agents</span><span class="badge">Observability</span><span class="badge">Revalidation</span>
    </div>
  </section>

  <div class="grid">
    <section class="card">
      <h2>Readiness assessment</h2>
      <p>Rate each statement based on the evidence your team currently has.</p>
      <div id="questions"></div>
      <button onclick="calculate()">Calculate readiness score</button>
      <p class="small">This is a self-assessment and not a certification, audit, or legal opinion.</p>
    </section>

    <section class="card">
      <div class="scorebox">
        <div class="score" id="score">—</div>
        <div class="label">Validation readiness score</div>
        <div class="level" id="level">Complete the assessment</div>
        <div class="progress"><div class="bar" id="bar"></div></div>
        <div class="small" id="coverage">0 of 10 dimensions assessed</div>
      </div>

      <div class="section">
        <h3>Priority improvements</h3>
        <div class="checks" id="improvements">
          <div class="check"><b>No result yet</b><span>Complete the assessment to see the highest-priority gaps.</span></div>
        </div>
      </div>

      <div class="section">
        <h3>How to interpret the score</h3>
        <div class="checks">
          <div class="check"><b>0–39 · Early</b><span>Core validation evidence is incomplete or informal.</span></div>
          <div class="check"><b>40–69 · Developing</b><span>Several validation layers exist, but important gaps remain.</span></div>
          <div class="check"><b>70–84 · Strong</b><span>A structured validation process exists across most important layers.</span></div>
          <div class="check"><b>85–100 · Advanced</b><span>Validation is systematic, versioned, monitored, and linked to revalidation triggers.</span></div>
        </div>
      </div>
    </section>
  </div>

  <div class="info">
    <strong>Working definition:</strong> Validation readiness is the degree to which an organization has defined requirements, representative evidence, repeatable testing, production visibility, and revalidation processes sufficient to judge whether an AI system is fit for its intended use.
  </div>

  <div class="footer">
    Open technical resource by the <strong>Validation</strong> organization on Hugging Face.<br>
    Research & industry collaborations: <a href="mailto:agenten@magenta.de">agenten@magenta.de</a>
  </div>
</div>

<script>
const dimensions = [
  {
    id:"use",
    title:"1. Intended use & requirements",
    question:"We have a documented intended use, target users, operating conditions, measurable acceptance criteria, and unacceptable failure modes.",
    improve:"Define intended use, measurable acceptance criteria, prohibited behavior, and failure severity before evaluating the system."
  },
  {
    id:"data",
    title:"2. Data validation",
    question:"Training, evaluation, and production data are checked for schema quality, provenance, leakage, coverage, and representativeness.",
    improve:"Add versioned checks for schema integrity, provenance, leakage, duplication, drift, and deployment-relevant coverage."
  },
  {
    id:"model",
    title:"3. Model validation",
    question:"Model quality is evaluated with representative benchmarks plus robustness, regression, and operational tests.",
    improve:"Go beyond one benchmark: add robustness, edge cases, regression tests, latency, and deployment-specific acceptance thresholds."
  },
  {
    id:"agent",
    title:"4. Agent & tool-use validation",
    question:"If agents or tools are used, we validate task completion, tool selection, arguments, recovery, permissions, and escalation behavior.",
    improve:"Validate agent trajectories, tool calls, permissions, recovery, and safe escalation—not only final answers."
  },
  {
    id:"system",
    title:"5. System & integration validation",
    question:"We test the complete AI system end-to-end, including interfaces, retrieval, routing, tools, dependencies, and failure modes.",
    improve:"Add end-to-end and failure-injection tests across interfaces, retrieval, routing, tools, APIs, and infrastructure."
  },
  {
    id:"output",
    title:"6. Output validation",
    question:"Important outputs are checked for structural validity, semantic correctness, grounding, and relevant policy or business rules.",
    improve:"Validate both format and meaning. Structured output can be schema-valid and still be semantically wrong."
  },
  {
    id:"observe",
    title:"7. Observability & production evidence",
    question:"We can reconstruct production behavior using traces, model/tool versions, failures, routing, latency, and relevant user corrections.",
    improve:"Capture enough production telemetry to explain behavior and detect drift, regressions, incidents, and changing failure patterns."
  },
  {
    id:"reval",
    title:"8. Revalidation triggers",
    question:"We have explicit triggers for revalidation after changes to models, prompts, tools, data, permissions, infrastructure, or intended use.",
    improve:"Define which changes invalidate previous evidence and require partial or full revalidation."
  },
  {
    id:"repro",
    title:"9. Reproducibility & documentation",
    question:"Validation evidence includes versions, datasets, methods, thresholds, results, limitations, and enough context to reproduce key findings.",
    improve:"Version models, prompts, datasets, tools, configurations, metrics, and thresholds so results remain interpretable and reproducible."
  },
  {
    id:"ownership",
    title:"10. Ownership, release gates & escalation",
    question:"Validation responsibilities, release decisions, human escalation paths, and approval gates are clearly assigned.",
    improve:"Assign validation ownership and define who can approve, restrict, stop, or revalidate the system."
  }
];

const q = document.getElementById("questions");
q.innerHTML = dimensions.map((d,i)=>`
  <div class="item">
    <h3>${d.title}</h3>
    <p>${d.question}</p>
    <div class="choice">
      <label><input type="radio" name="${d.id}" value="0"> Not in place</label>
      <label><input type="radio" name="${d.id}" value="1"> Partial / informal</label>
      <label><input type="radio" name="${d.id}" value="2"> Defined</label>
      <label><input type="radio" name="${d.id}" value="3"> Implemented & evidenced</label>
    </div>
  </div>`).join("");

function calculate(){
  let points=0, answered=0, gaps=[];
  dimensions.forEach(d=>{
    const el=document.querySelector(`input[name="${d.id}"]:checked`);
    if(el){
      answered++;
      const val=Number(el.value);
      points += val;
      if(val < 2) gaps.push({score:val,title:d.title,improve:d.improve});
    } else {
      gaps.push({score:-1,title:d.title,improve:d.improve});
    }
  });

  const max = dimensions.length * 3;
  const score = Math.round((points / max) * 100);
  let label = "Early";
  if(score >= 85) label = "Advanced";
  else if(score >= 70) label = "Strong";
  else if(score >= 40) label = "Developing";

  document.getElementById("score").textContent = score;
  document.getElementById("level").textContent = label + " readiness";
  document.getElementById("bar").style.width = score + "%";
  document.getElementById("coverage").textContent = `${answered} of ${dimensions.length} dimensions assessed`;

  gaps.sort((a,b)=>a.score-b.score);
  const top = gaps.slice(0,5);
  document.getElementById("improvements").innerHTML = top.length
    ? top.map(g=>`<div class="check"><b>${g.title}</b><span>${g.improve}</span></div>`).join("")
    : `<div class="check"><b>Maintain and revalidate</b><span>No major gaps were reported. Preserve evidence, monitor production behavior, and revalidate after material changes.</span></div>`;
}
</script>
</body>
</html>