Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>AIGov — AI Governance Lab</title> | |
| <style> | |
| :root { | |
| --bg: #07101f; | |
| --surface: #0d1728; | |
| --surface-2: #111e32; | |
| --border: rgba(255,255,255,.08); | |
| --text: #f8fafc; | |
| --muted: #98a2b3; | |
| --blue: #004cff; | |
| --green: #34d399; | |
| --yellow: #fbbf24; | |
| --red: #fb7185; | |
| } | |
| * { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| background: | |
| radial-gradient(circle at top left, rgba(0,76,255,.15), transparent 32%), | |
| var(--bg); | |
| color: var(--text); | |
| } | |
| .page { | |
| width: min(1180px, calc(100% - 36px)); | |
| margin: 0 auto; | |
| padding-bottom: 64px; | |
| } | |
| header { | |
| height: 76px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-weight: 700; | |
| } | |
| .mark { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 7px; | |
| background: var(--blue); | |
| box-shadow: 0 0 24px rgba(0,76,255,.45); | |
| } | |
| .badge { | |
| padding: 7px 10px; | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .hero { | |
| padding: 78px 0 50px; | |
| max-width: 920px; | |
| } | |
| .eyebrow { | |
| color: #7da4ff; | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: .14em; | |
| margin-bottom: 16px; | |
| } | |
| h1 { | |
| margin: 0; | |
| font-size: clamp(46px, 7vw, 82px); | |
| line-height: 1; | |
| letter-spacing: -.05em; | |
| } | |
| .hero p { | |
| margin-top: 24px; | |
| max-width: 760px; | |
| color: var(--muted); | |
| font-size: 18px; | |
| line-height: 1.7; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: 1.05fr .95fr; | |
| gap: 18px; | |
| } | |
| .panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 18px; | |
| padding: 26px; | |
| } | |
| h2 { | |
| margin-top: 0; | |
| } | |
| label { | |
| display: block; | |
| margin: 16px 0 8px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| select, | |
| input, | |
| textarea { | |
| width: 100%; | |
| border: 1px solid var(--border); | |
| border-radius: 11px; | |
| background: #09111d; | |
| color: var(--text); | |
| padding: 12px 13px; | |
| outline: none; | |
| } | |
| textarea { | |
| min-height: 130px; | |
| resize: vertical; | |
| line-height: 1.5; | |
| } | |
| button { | |
| width: 100%; | |
| margin-top: 18px; | |
| padding: 14px 16px; | |
| border: 0; | |
| border-radius: 11px; | |
| background: var(--blue); | |
| color: white; | |
| font-weight: 700; | |
| cursor: pointer; | |
| } | |
| button.secondary { | |
| margin-top: 10px; | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| color: var(--muted); | |
| } | |
| .risk { | |
| display: inline-block; | |
| padding: 7px 10px; | |
| border-radius: 999px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .low { color: var(--green); background: rgba(52,211,153,.12); } | |
| .limited { color: #7da4ff; background: rgba(0,76,255,.12); } | |
| .high { color: var(--yellow); background: rgba(251,191,36,.12); } | |
| .unacceptable { color: var(--red); background: rgba(251,113,133,.12); } | |
| .score { | |
| margin: 12px 0 4px; | |
| font-size: 54px; | |
| font-weight: 750; | |
| letter-spacing: -.04em; | |
| } | |
| .muted { | |
| color: var(--muted); | |
| line-height: 1.6; | |
| font-size: 13px; | |
| } | |
| .metrics { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .metric { | |
| padding: 12px; | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| background: var(--surface-2); | |
| } | |
| .metric span { | |
| display: block; | |
| color: var(--muted); | |
| font-size: 11px; | |
| margin-bottom: 4px; | |
| } | |
| .section { | |
| margin-top: 24px; | |
| } | |
| ul { | |
| line-height: 1.65; | |
| padding-left: 20px; | |
| color: #d6dbe5; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| footer { | |
| margin-top: 56px; | |
| padding-top: 24px; | |
| border-top: 1px solid var(--border); | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| @media (max-width: 850px) { | |
| .grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page"> | |
| <header> | |
| <div class="brand"> | |
| <div class="mark"></div> | |
| AIGov | |
| </div> | |
| <div class="badge">AI Governance Lab</div> | |
| </header> | |
| <section class="hero"> | |
| <div class="eyebrow">GOVERNANCE ENGINEERING</div> | |
| <h1>Turn AI governance into observable system controls.</h1> | |
| <p> | |
| A lightweight interactive prototype for assessing AI-system risk, | |
| governance readiness, human oversight, traceability, monitoring, | |
| and documentation signals. | |
| </p> | |
| </section> | |
| <section class="grid"> | |
| <div class="panel"> | |
| <h2>System profile</h2> | |
| <label for="usecase">AI use case</label> | |
| <input id="usecase" placeholder="Example: Automated creditworthiness assessment"> | |
| <label for="impact">Potential impact</label> | |
| <select id="impact"> | |
| <option value="low">Low</option> | |
| <option value="medium" selected>Medium</option> | |
| <option value="high">High</option> | |
| <option value="critical">Critical</option> | |
| </select> | |
| <label for="automation">Decision autonomy</label> | |
| <select id="automation"> | |
| <option value="assistive">Assistive</option> | |
| <option value="recommendation" selected>Recommendation</option> | |
| <option value="automated">Automated decision</option> | |
| </select> | |
| <label for="oversight">Human oversight</label> | |
| <select id="oversight"> | |
| <option value="strong">Documented and effective</option> | |
| <option value="partial" selected>Partial</option> | |
| <option value="none">None</option> | |
| </select> | |
| <label for="monitoring">Post-deployment monitoring</label> | |
| <select id="monitoring"> | |
| <option value="strong">Continuous and documented</option> | |
| <option value="partial" selected>Limited</option> | |
| <option value="none">None</option> | |
| </select> | |
| <label for="traceability">Traceability</label> | |
| <select id="traceability"> | |
| <option value="strong">Inputs, outputs and key events traceable</option> | |
| <option value="partial" selected>Partial logs</option> | |
| <option value="none">No reliable trace</option> | |
| </select> | |
| <label for="docs">Technical documentation</label> | |
| <select id="docs"> | |
| <option value="strong">Current and complete</option> | |
| <option value="partial" selected>Incomplete</option> | |
| <option value="none">Missing</option> | |
| </select> | |
| <label for="notes">Additional context</label> | |
| <textarea id="notes" placeholder="Describe deployment context, affected users, safeguards or known limitations."></textarea> | |
| <button id="assess">Assess governance signals</button> | |
| <button id="loadHighRisk" class="secondary">Load high-risk example</button> | |
| </div> | |
| <div class="panel"> | |
| <div id="empty"> | |
| <h2>Assessment ready</h2> | |
| <p class="muted"> | |
| Complete the system profile and run the governance assessment. | |
| </p> | |
| </div> | |
| <div id="result" class="hidden"> | |
| <h2>Governance assessment</h2> | |
| <div id="riskBadge" class="risk"></div> | |
| <div id="score" class="score"></div> | |
| <div class="metrics" id="metrics"></div> | |
| <div class="section"> | |
| <h3>Governance gaps</h3> | |
| <ul id="gaps"></ul> | |
| </div> | |
| <div class="section"> | |
| <h3>Positive controls</h3> | |
| <ul id="controls"></ul> | |
| </div> | |
| <div class="section"> | |
| <h3>Interpretation</h3> | |
| <p class="muted"> | |
| This prototype provides deterministic governance-engineering | |
| signals. It is not a legal classification tool and does not | |
| determine regulatory compliance. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| AIGov · practical infrastructure for transparent and accountable AI systems | |
| </footer> | |
| </div> | |
| <script> | |
| function assess() { | |
| const impact = document.getElementById("impact").value; | |
| const automation = document.getElementById("automation").value; | |
| const oversight = document.getElementById("oversight").value; | |
| const monitoring = document.getElementById("monitoring").value; | |
| const traceability = document.getElementById("traceability").value; | |
| const docs = document.getElementById("docs").value; | |
| let score = 100; | |
| const gaps = []; | |
| const controls = []; | |
| if (impact === "critical") score -= 18; | |
| else if (impact === "high") score -= 12; | |
| else if (impact === "medium") score -= 5; | |
| if (automation === "automated") { | |
| score -= 15; | |
| gaps.push("The system makes automated decisions and therefore requires stronger governance controls."); | |
| } else if (automation === "recommendation") { | |
| score -= 5; | |
| } | |
| const controlChecks = [ | |
| ["Human oversight", oversight, 20], | |
| ["Post-deployment monitoring", monitoring, 18], | |
| ["Traceability", traceability, 20], | |
| ["Technical documentation", docs, 15] | |
| ]; | |
| controlChecks.forEach(([name, value, weight]) => { | |
| if (value === "none") { | |
| score -= weight; | |
| gaps.push(`${name} is missing.`); | |
| } else if (value === "partial") { | |
| score -= Math.round(weight / 2); | |
| gaps.push(`${name} is only partially implemented.`); | |
| } else { | |
| controls.push(`${name} is documented and implemented.`); | |
| } | |
| }); | |
| score = Math.max(0, Math.min(100, score)); | |
| let risk = "Unacceptable"; | |
| let cls = "unacceptable"; | |
| if (score >= 85) { | |
| risk = "Low"; | |
| cls = "low"; | |
| } else if (score >= 70) { | |
| risk = "Limited"; | |
| cls = "limited"; | |
| } else if (score >= 50) { | |
| risk = "High"; | |
| cls = "high"; | |
| } | |
| const metrics = { | |
| "Governance score": `${score}/100`, | |
| "Impact": impact, | |
| "Automation": automation, | |
| "Oversight": oversight, | |
| "Monitoring": monitoring, | |
| "Traceability": traceability, | |
| "Documentation": docs | |
| }; | |
| document.getElementById("empty").classList.add("hidden"); | |
| document.getElementById("result").classList.remove("hidden"); | |
| const badge = document.getElementById("riskBadge"); | |
| badge.textContent = `${risk} governance risk`; | |
| badge.className = `risk ${cls}`; | |
| document.getElementById("score").textContent = `${score}/100`; | |
| const metricsNode = document.getElementById("metrics"); | |
| metricsNode.innerHTML = ""; | |
| Object.entries(metrics).forEach(([key, value]) => { | |
| metricsNode.innerHTML += ` | |
| <div class="metric"> | |
| <span>${key}</span> | |
| <strong>${value}</strong> | |
| </div> | |
| `; | |
| }); | |
| const gapsNode = document.getElementById("gaps"); | |
| gapsNode.innerHTML = ""; | |
| (gaps.length ? gaps : ["No major governance gaps detected by this heuristic assessment."]) | |
| .forEach(item => { | |
| gapsNode.innerHTML += `<li>${item}</li>`; | |
| }); | |
| const controlsNode = document.getElementById("controls"); | |
| controlsNode.innerHTML = ""; | |
| (controls.length ? controls : ["No strong governance controls detected."]) | |
| .forEach(item => { | |
| controlsNode.innerHTML += `<li>${item}</li>`; | |
| }); | |
| } | |
| document.getElementById("assess").onclick = assess; | |
| document.getElementById("loadHighRisk").onclick = () => { | |
| document.getElementById("usecase").value = | |
| "Automated eligibility decision for access to an essential service"; | |
| document.getElementById("impact").value = "critical"; | |
| document.getElementById("automation").value = "automated"; | |
| document.getElementById("oversight").value = "none"; | |
| document.getElementById("monitoring").value = "partial"; | |
| document.getElementById("traceability").value = "partial"; | |
| document.getElementById("docs").value = "partial"; | |
| document.getElementById("notes").value = | |
| "The system is deployed in production and directly affects individual eligibility decisions."; | |
| }; | |
| </script> | |
| </body> | |
| </html> | |