| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>AI Hiring Audit | Bias Detection Dashboard</title>
|
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
| </head>
|
|
|
| <body>
|
| <div class="container">
|
| <header>
|
| <div class="brand">
|
| <h1>Hiring AI Audit</h1>
|
| <p class="stat-label">End-to-End Bias Detection & Mitigation Analysis</p>
|
| <div
|
| style="background: rgba(16, 185, 129, 0.2); color: #10b981; display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; margin-top: 5px; font-weight: 700;">
|
| HIRING SYSTEM v1.0</div>
|
| </div>
|
| <div class="status-pill impact-badge impact-good">Live System Audit</div>
|
| </header>
|
|
|
| <div class="stats-grid">
|
| <div class="stat-card">
|
| <div class="stat-label">Total Candidates</div>
|
| <div class="stat-value" id="totalCandidates">-</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-label">AI Approval Rate</div>
|
| <div class="stat-value" id="aiApprovalRate">-</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-label">Human Approval Rate</div>
|
| <div class="stat-value" id="humanApprovalRate">-</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="stat-label">Decision Agreement</div>
|
| <div class="stat-value" id="agreementRate">-</div>
|
| </div>
|
| </div>
|
|
|
| <div class="main-grid">
|
| <div class="left-col">
|
| <div class="card">
|
| <h2>📊 Gender Disparity Analysis</h2>
|
| <div class="chart-container">
|
| <canvas id="genderChart"></canvas>
|
| </div>
|
| <div style="margin-top: 2rem;">
|
| <table class="audit-table">
|
| <thead>
|
| <tr>
|
| <th>Gender Group</th>
|
| <th>Selection Rate</th>
|
| <th>Disparate Impact</th>
|
| <th>Status</th>
|
| </tr>
|
| </thead>
|
| <tbody id="genderTableBody"></tbody>
|
| </table>
|
| </div>
|
| </div>
|
|
|
| <div class="card">
|
| <h2>🌍 Racial Equity Audit</h2>
|
| <div class="chart-container">
|
| <canvas id="raceChart"></canvas>
|
| </div>
|
| <div style="margin-top: 2rem;">
|
| <table class="audit-table">
|
| <thead>
|
| <tr>
|
| <th>Race / Ethnicity</th>
|
| <th>Selection Rate</th>
|
| <th>Disparate Impact</th>
|
| <th>Status</th>
|
| </tr>
|
| </thead>
|
| <tbody id="raceTableBody"></tbody>
|
| </table>
|
| </div>
|
| </div>
|
| <div class="card">
|
| <h2>🧬 Intersectional Analysis</h2>
|
| <p class="stat-label">Gender + Race combinations.</p>
|
| <div style="margin-top: 1rem; max-height: 200px; overflow-y: auto;">
|
| <table class="audit-table">
|
| <thead>
|
| <tr>
|
| <th>Intersection</th>
|
| <th>Selection Rate</th>
|
| </tr>
|
| </thead>
|
| <tbody id="intersectionalTableBody"></tbody>
|
| </table>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="right-col">
|
| <div class="card" style="border: 1px solid var(--primary); background: rgba(99, 102, 241, 0.1);">
|
| <h2>🛡️ Mitigation Control</h2>
|
| <p class="stat-label" style="margin-bottom:1rem">Apply algorithmic fairness constraints.</p>
|
| <button id="mitigateBtn">Apply Fair-Mask™ Mitigation</button>
|
| <div id="mitigationStatus" style="margin-top:1rem; font-size:0.875rem; display:none"></div>
|
| </div>
|
|
|
| <div class="card">
|
| <h2>⚖️ Bias Simulator</h2>
|
| <p class="stat-label" style="margin-bottom:1.5rem">Test candidate profiles for algorithmic bias.</p>
|
| <form id="biasForm">
|
| <div class="form-group">
|
| <label>Job Category</label>
|
| <select id="job">
|
| <option>Software Engineer</option>
|
| <option>Data Analyst</option>
|
| <option>HR Specialist</option>
|
| <option>Marketing Manager</option>
|
| </select>
|
| </div>
|
| <div class="form-group">
|
| <label>Years of Experience</label>
|
| <input type="number" id="years" placeholder="e.g. 5" required>
|
| </div>
|
| <div class="form-group">
|
| <label>Education Level</label>
|
| <select id="edu">
|
| <option>Bachelors</option>
|
| <option>Masters</option>
|
| <option>PhD</option>
|
| <option>Associate</option>
|
| </select>
|
| </div>
|
| <div class="form-group">
|
| <label>Skill Fit Score (0-100)</label>
|
| <input type="number" id="skill" placeholder="e.g. 85" min="0" max="100" required>
|
| </div>
|
| <button type="submit">Analyze Profile</button>
|
| </form>
|
| <div id="predictionResult"></div>
|
| </div>
|
|
|
| <div class="card">
|
| <h2>ℹ️ Fairness Metric</h2>
|
| <p class="stat-label">We use the <b>Four-Fifths Rule</b> (80%) for Disparate Impact calculation.
|
| Ratios below 0.8 indicate potential adverse impact against a protected group.</p>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
| </body>
|
|
|
| </html> |
