Spaces:
Running
Running
| <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> | |