Hugging Face's logo

Spaces:
Darkweb007
/
CONCORD_DATA_AGENTS
Runtime error

App Files Community
CONCORD_DATA_AGENTS / docs /index.html
Darkweb007's picture
Darkweb007
Add landing page
7dbfc99
Raw
History Blame Contribute Delete
10.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Concord Data Agents</title>
<style>
 :root {
 --accent: #3FD1B8;
 --accent-dim: rgba(63,209,184,0.26);
 --bg: #07100E;
 --panel: #0F1D1A;
 --border: #1C332E;
 --text: #F2F3F5;
 --muted: #97A0AE;
 }
 * { box-sizing: border-box; }
 body {
 margin: 0; background: var(--bg); color: var(--text);
 font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 }
 a { color: inherit; text-decoration: none; }
 .wrap { max-width: 980px; margin: 0 auto; padding: 0 28px; }
 nav {
 position: sticky; top: 0; z-index: 10;
 background: rgba(10,10,12,0.75); backdrop-filter: blur(10px);
 border-bottom: 1px solid var(--border);
 }
 nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
 .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.01em; }
 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
 .navlinks { display: flex; gap: 28px; font-size: 0.92rem; color: var(--muted); }
 .navlinks a:hover { color: var(--text); }
 .hero {
 position: relative; padding: 110px 0 80px; text-align: center; overflow: hidden;
 }
 .hero::before {
 content: ""; position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
 width: 900px; height: 500px; background: radial-gradient(ellipse at center, var(--accent-dim) 0%, transparent 70%);
 pointer-events: none;
 }
 .badge {
 display: inline-block; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--accent);
 color: var(--accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 28px;
 position: relative;
 }
 .hero h1 {
 font-size: 4.2rem; line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 24px;
 background: linear-gradient(180deg, #fff 0%, #d7dbe2 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
 position: relative;
 }
 .hero p.sub {
 max-width: 640px; margin: 0 auto 40px; color: var(--muted); font-size: 1.15rem; line-height: 1.6;
 position: relative;
 }
 .cta-row { display: flex; gap: 14px; justify-content: center; position: relative; flex-wrap: wrap; }
 .btn {
 padding: 15px 28px; border-radius: 12px; font-weight: 700; font-size: 0.98rem; display: inline-block;
 transition: transform 0.15s ease;
 }
 .btn:hover { transform: translateY(-1px); }
 .btn-primary { background: var(--accent); color: #0A0A0C; box-shadow: 0 8px 30px var(--accent-dim); }
 .btn-secondary { background: var(--panel); color: var(--text); border: 1px solid var(--border); }
 section { padding: 60px 0; border-top: 1px solid var(--border); }
 .eyebrow { color: var(--accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 14px; }
 .headline-card {
 background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 36px 40px;
 font-size: 1.55rem; font-weight: 600; line-height: 1.45;
 }
 .headline-card b { color: var(--accent); }
 .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 20px; }
 .metric-card {
 background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px;
 }
 .metric-value { font-size: 2.1rem; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
 .metric-label { color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
 .steps { counter-reset: step; margin-top: 24px; }
 .step { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--border); }
 .step:last-child { border-bottom: none; }
 .step-num {
 counter-increment: step; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
 background: var(--panel); border: 1px solid var(--accent); color: var(--accent);
 display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem;
 }
 .step-num::before { content: counter(step); }
 .step-title { font-weight: 700; margin-bottom: 4px; }
 .step-desc { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
 .findings { display: grid; gap: 14px; margin-top: 20px; }
 .finding {
 background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
 border-radius: 10px; padding: 18px 20px; font-size: 0.98rem; line-height: 1.6; color: #DCE1E8;
 }
 footer { padding: 50px 0 70px; text-align: center; color: var(--muted); font-size: 0.88rem; }
 footer a { color: var(--accent); font-weight: 600; }
 .footer-links { margin-top: 14px; display: flex; gap: 24px; justify-content: center; }
 code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
 @media (max-width: 640px) {
 .hero h1 { font-size: 2.6rem; }
 .navlinks { display: none; }
 }
</style>
</head>
<body>
<nav>
 <div class="wrap">
 <div class="brand"><span class="dot"></span> CDA &middot; Concord Data Agents Lab</div>
 <div class="navlinks">
 <a href="#results">Results</a>
 <a href="#method">Method</a>
 <a href="#findings">Findings</a>
 <a href="https://github.com/data-geek-astronomy/CONCORD_DATA_AGENTS">GitHub</a>
 </div>
 </div>
</nav>
<section class="hero">
 <div class="wrap">
 <span class="badge">RESEARCH PREVIEW &middot; CDA</span>
 <h1>Concord Data Agents</h1>
 <p class="sub">Two agents that scan an undocumented, decades-old legacy table, infer its schema with zero manual mapping, and auto-generate the cleaning rules &mdash; turning the 80% of a data scientist's time spent on cleanup into a few seconds.</p>
 <div class="cta-row">
 <a class="btn btn-primary" href="https://huggingface.co/spaces/Darkweb007/CONCORD_DATA_AGENTS">Launch live demo</a>
 <a class="btn btn-secondary" href="https://github.com/data-geek-astronomy/CONCORD_DATA_AGENTS">Read the code</a>
 </div>
 </div>
</section>
<section id="results">
 <div class="wrap">
 <div class="eyebrow">HEADLINE RESULT</div>
 <div class="headline-card">Agent 1 correctly mapped <b>all 10 undocumented columns</b> to canonical fields with zero manual schema work, and Agent 2's cleaning pipeline removed <b>8 duplicate rows</b> from 258 raw records while standardizing 4 mixed date formats and 8 missing-value conventions.</div>
 <div class="grid">
 <div class="metric-card"><div class="metric-value">10 / 10</div><div class="metric-label">legacy columns correctly mapped to canonical fields</div></div>
 <div class="metric-card"><div class="metric-value">258 &rarr; 250</div><div class="metric-label">rows after deduplication</div></div>
 <div class="metric-card"><div class="metric-value">4</div><div class="metric-label">legacy date formats parsed into one ISO standard</div></div>
 <div class="metric-card"><div class="metric-value">8</div><div class="metric-label">different missing-value sentinels normalized to one</div></div>
 </div>
 </div>
</section>
<section id="method">
 <div class="wrap">
 <div class="eyebrow">METHOD</div>
 <h2 style="margin:0 0 6px; font-size:1.6rem;">Schema first, cleaning rules second</h2>
 <p style="color:var(--muted); max-width:640px; margin:0 0 10px;">Agent 2 never touches a column Agent 1 hasn't already classified &mdash; the same boundary a LangGraph/CrewAI handoff would enforce in production.</p>
 <div class="steps">
 <div class="step"><div class="step-num"></div><div><div class="step-title">Scan</div><div class="step-desc">Agent 1 profiles every column: sample values, distinct-value count, and pattern matching infer a canonical name, type, and specific issues.</div></div></div>
 <div class="step"><div class="step-num"></div><div><div class="step-title">Map</div><div class="step-desc">Cryptic mainframe names (PT_NM, CLM_AMT_STR) are resolved to canonical fields (patient_name, claim_amount) using keyword + pattern heuristics.</div></div></div>
 <div class="step"><div class="step-num"></div><div><div class="step-title">Clean</div><div class="step-desc">Agent 2 dispatches a cleaning rule per inferred type: date parsing across 4 formats (with a proper 2-digit-year pivot), currency coercion, categorical normalization, name standardization.</div></div></div>
 <div class="step"><div class="step-num"></div><div><div class="step-title">Dedupe</div><div class="step-desc">Exact duplicate rows &mdash; another classic legacy-data artifact &mdash; are dropped after cleaning.</div></div></div>
 <div class="step"><div class="step-num"></div><div><div class="step-title">Score</div><div class="step-desc">A before/after quality dashboard measures completeness and validity per column, so the improvement is measured, not asserted.</div></div></div>
 </div>
 </div>
</section>
<section id="findings">
 <div class="wrap">
 <div class="eyebrow">FINDINGS</div>
 <h2 style="margin:0 0 20px; font-size:1.6rem;">What the synthetic test runs showed</h2>
 <div class="findings">
 <div class="finding">A 2-digit-year date format (10-NOV-60) initially parsed to the year 2060 under Python's default pivot &mdash; a real Y2K-style bug caught during testing and fixed with an explicit &gt;30 &rarr; 19xx pivot rule.</div>
 <div class="finding">Two columns (PT_NM patient name, PROV_NM provider name) initially collided into a single canonical field because of an overly broad keyword hint &mdash; fixed by making the schema-inference hints column-specific.</div>
 <div class="finding">Categorical columns arrived with 8-9 raw spellings each for what should be a 2-4 value controlled vocabulary (gender, policy status, region) &mdash; all normalized in a single pass.</div>
 </div>
 </div>
</section>
<footer>
 <div class="wrap">
 <div>All data on this page is synthetic &mdash; part of a 5-project AI engineering portfolio.</div>
 <div class="footer-links">
 <a href="https://huggingface.co/spaces/Darkweb007/CONCORD_DATA_AGENTS">Live demo</a>
 <a href="https://github.com/data-geek-astronomy/CONCORD_DATA_AGENTS">GitHub repo</a>
 </div>
 </div>
</footer>
</body>
</html>