Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TalentMatch-RL | Sounak Kumar Mondal</title> | |
| <link rel="stylesheet" href="/static/css/style.css"> | |
| <!-- Load FontAwesome for icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <div class="dashboard"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar"> | |
| <div class="brand"> | |
| <h1>TalentMatch-RL</h1> | |
| <p>Bias-Aware Candidate Screening</p> | |
| </div> | |
| <div class="setup-controls"> | |
| <label for="taskSelect" style="color: var(--text-muted); font-size: 0.9rem; display: block; margin-bottom: 0.5rem;">Select Task Constraint</label> | |
| <select id="taskSelect" style="width:100%; padding: 0.75rem; border-radius: 8px; background: rgba(0,0,0,0.3); color: white; border: 1px solid var(--glass-border); margin-bottom: 1rem; outline: none; font-family: 'Outfit';"> | |
| <option value="easy_shortlist">Easy: Basic Shortlist</option> | |
| <option value="medium_rank">Medium: Ranked Select</option> | |
| <option value="hard_fair_screen">Hard: Strict Fair Screen</option> | |
| </select> | |
| <button id="btnStart" class="btn btn-primary" style="width: 100%; margin-bottom: 1.5rem;"> | |
| <i class="fa-solid fa-play"></i> Initialize Environment | |
| </button> | |
| <hr style="border-color: var(--glass-border); margin-bottom: 1.5rem;"> | |
| <label style="color: var(--text-muted); font-size: 0.9rem; display: block; margin-bottom: 0.5rem;">OCR Algorithm Fetch</label> | |
| <input type="file" id="pdfUpload" accept="application/pdf" style="display: none;"> | |
| <button id="btnUpload" class="btn" style="width: 100%; background: rgba(255,255,255,0.1); color: white; border: 1px dashed var(--primary);"> | |
| <i class="fa-solid fa-file-pdf"></i> Upload PDF Resume | |
| </button> | |
| </div> | |
| <div class="author-chip"> | |
| <div class="author-avatar">SM</div> | |
| <div> | |
| <div style="font-size: 0.85rem; color: var(--text-muted);">Developed by</div> | |
| <div style="font-weight: 600;">Sounak Kumar Mondal</div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Workspace --> | |
| <main class="main-content"> | |
| <!-- Header bar --> | |
| <header class="header"> | |
| <div> | |
| <h2 style="font-size: 1.2rem; font-weight: 600;">Live Evaluation Portal</h2> | |
| <p style="color: var(--text-muted); font-size: 0.9rem;">Interact with the RL environment manually.</p> | |
| </div> | |
| <div style="text-align: right;"> | |
| <div id="stepCounter" style="font-weight: 600; font-size: 1.1rem;">Step Session: Offline</div> | |
| <div id="candidatesLeft" style="color: var(--text-muted); font-size: 0.85rem;">-</div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Grid --> | |
| <div class="dashboard-grid"> | |
| <!-- Candidate Viewer --> | |
| <div class="card" id="candidateCard"> | |
| <h2><i class="fa-solid fa-user-astronaut"></i> Active Candidate</h2> | |
| <div id="jobInfo">No Job Context Loaded.</div> | |
| <div id="candidateDetails" class="hidden"> | |
| <div class="candidate-detail"> | |
| <h3 id="cName">Sounak Example</h3> | |
| <div class="candidate-meta"> | |
| <span id="cId"><i class="fa-solid fa-id-card"></i> ID: C000</span> | | |
| <span id="cExp"><i class="fa-solid fa-briefcase"></i> 5 Yrs Exp</span> | | |
| <span id="cEdu"><i class="fa-solid fa-graduation-cap"></i> BSc</span> | |
| </div> | |
| <div class="candidate-meta" style="color: #64748b;"> | |
| <i>Demographic proxies visible for testing: <span id="cDemo">M / Asian</span></i> | |
| </div> | |
| <div style="margin-bottom: 1.5rem; display: inline-block; padding: 0.5rem 1rem; border-radius: 8px; background: rgba(139, 92, 246, 0.15); border: 1px solid var(--primary);"> | |
| <strong style="color: var(--primary); font-size: 0.9rem;"><i class="fa-solid fa-brain"></i> ML Bias-Cleared Prediction:</strong> | |
| <span id="cMLProb" style="font-weight: 700; font-size: 1.1rem; color: #fff; margin-left: 10px;">0.0%</span> Match | |
| </div> | |
| <h4 style="margin-bottom: 0.5rem; color: var(--text-main);">Technical Stack</h4> | |
| <div class="skills-wrapper" id="cSkills" style="margin-bottom: 1rem;"> | |
| <!-- Skills injected here --> | |
| </div> | |
| <!-- Analysis Block --> | |
| <div id="cAnalysisBox" style="background: rgba(255, 255, 255, 0.03); border: 1px solid var(--glass-border); padding: 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem;"> | |
| <h4 style="margin-bottom: 0.5rem; color: var(--secondary);"><i class="fa-solid fa-microscope"></i> Sounak's Renew Analysis</h4> | |
| <p style="color: var(--text-muted); margin-bottom: 0.5rem;"><strong>Experience Verdict:</strong> <span id="cExpVerdict">Analyzing...</span></p> | |
| <div style="display: flex; gap: 1rem;"> | |
| <div style="flex: 1;"> | |
| <strong style="color: var(--success);"><i class="fa-solid fa-plus"></i> Pros</strong> | |
| <ul id="cPros" style="padding-left: 1.2rem; color: #cbd5e1; margin-top: 0.3rem;"></ul> | |
| </div> | |
| <div style="flex: 1;"> | |
| <strong style="color: var(--danger);"><i class="fa-solid fa-minus"></i> Cons</strong> | |
| <ul id="cCons" style="padding-left: 1.2rem; color: #cbd5e1; margin-top: 0.3rem;"></ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="action-row"> | |
| <button id="btnShortlist" class="btn btn-success" style="flex: 1;"><i class="fa-solid fa-check"></i> Shortlist</button> | |
| <button id="btnReject" class="btn btn-danger" style="flex: 1;"><i class="fa-solid fa-xmark"></i> Reject</button> | |
| </div> | |
| </div> | |
| <div id="waitingState" style="text-align: center; color: var(--text-muted); padding: 3rem 0;"> | |
| <i class="fa-solid fa-inbox" style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.5;"></i> | |
| <p>Initialize environment to stream candidates.</p> | |
| </div> | |
| </div> | |
| <!-- Live Metrics --> | |
| <div class="card"> | |
| <h2><i class="fa-solid fa-scale-balanced"></i> Real-Time Fairness Audit</h2> | |
| <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem;">EEOC compliance & statistical parity calculated intra-step.</p> | |
| <div class="metrics-container" id="metricsContainer"> | |
| <div class="metric-row"> | |
| <span class="metric-label" title="Disparate Impact Ratio">DIR (EEOC 4/5ths)</span> | |
| <span class="metric-val" id="valDIR">-</span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label" title="Equal Opportunity Difference">EOD</span> | |
| <span class="metric-val" id="valEOD">-</span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label" title="Statistical Parity Diff">SPD</span> | |
| <span class="metric-val" id="valSPD">-</span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label" title="False Positive Rate Diff">FPRD</span> | |
| <span class="metric-val" id="valFPRD">-</span> | |
| </div> | |
| <div class="metric-row"> | |
| <span class="metric-label" title="Average Odds Diff">AOD</span> | |
| <span class="metric-val" id="valAOD">-</span> | |
| </div> | |
| </div> | |
| <div id="finalRewardCard" class="hidden" style="margin-top: 2rem; padding: 1.5rem; background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); border-radius: 12px; text-align: center;"> | |
| <h3 style="color: var(--success); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px;">Final Environment Reward</h3> | |
| <div id="valReward" style="font-size: 2.5rem; font-weight: 700; color: white;">0.850</div> | |
| <p style="font-size: 0.85rem; color: var(--text-muted);">Calculated using custom NDCG & Penalty composite.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- SweetAlert2 for nice popups --> | |
| <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> | |
| <script src="/static/js/main.js"></script> | |
| </body> | |
| </html> | |