Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <meta name="description" content="PlacementPredictor+ - AI-Powered Placement Prediction & Career Routing"> | |
| <meta name="theme-color" content="#000000"> | |
| <title>PlacementPredictor+ | AI Career Router</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap" | |
| rel="stylesheet"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <!-- Loading Overlay --> | |
| <div class="loading-overlay" id="loadingOverlay"> | |
| <div class="loader"> | |
| <div class="pulse-ring"></div> | |
| <div class="pulse-ring"></div> | |
| <div class="pulse-ring"></div> | |
| <svg class="heart-icon" viewBox="0 0 24 24" fill="currentColor"> | |
| <path | |
| d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z" /> | |
| </svg> | |
| </div> | |
| <p class="loading-text">Analyzing Career Factors...</p> | |
| </div> | |
| <!-- Main Container --> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <div class="logo-icon"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"> | |
| <path | |
| d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z" /> | |
| </svg> | |
| </div> | |
| <div class="logo-text"> | |
| <span class="logo-title">PlacementPredictor<span class="plus">+</span></span> | |
| <span class="logo-subtitle">AI Career Router</span> | |
| </div> | |
| </div> | |
| <div class="header-badge"> | |
| <span class="badge-dot"></span> | |
| <span>XAI Powered</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="hero-content"> | |
| <h1 class="hero-title">AI-Powered<br><span class="highlight">Placement Predictor</span></h1> | |
| <p class="hero-subtitle">Advanced machine learning with real-time explainable insights for personalized | |
| career path routing</p> | |
| </div> | |
| <div class="hero-visual"> | |
| <div class="floating-card card-1"> | |
| <span class="card-value">98.9%</span> | |
| <span class="card-label">Accuracy</span> | |
| </div> | |
| <div class="floating-card card-2"> | |
| <span class="card-value">SHAP</span> | |
| <span class="card-label">Explainability</span> | |
| </div> | |
| <div class="floating-card card-3"> | |
| <span class="card-value">22</span> | |
| <span class="card-label">Features</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Form Section --> | |
| <section class="form-section" id="assessmentForm"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Student Assessment</h2> | |
| <p class="section-subtitle">Enter academic parameters for placement evaluation</p> | |
| <div class="demo-btn-container" style="margin-top: var(--space-md);"> | |
| <button type="button" onclick="fillDemoData()" class="demo-btn"> | |
| <span class="demo-btn-icon">🎲</span> | |
| <span class="demo-btn-text">Demo Data</span> | |
| </button> | |
| </div> | |
| </div> | |
| <form id="patientForm" class="patient-form"> | |
| <!-- Demographics --> | |
| <div class="form-group-container"> | |
| <h3 class="group-title"> | |
| <span class="group-icon">👤</span> | |
| Personal Details | |
| </h3> | |
| <div class="input-row"> | |
| <div class="input-group"> | |
| <label class="input-label">Gender</label> | |
| <div class="select-wrapper"> | |
| <select id="gender" name="gender" required> | |
| <option value="">Select gender</option> | |
| <option value="Male">Male</option> | |
| <option value="Female">Female</option> | |
| </select> | |
| <span class="select-arrow"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M6 9l6 6 6-6" /> | |
| </svg> | |
| </span> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Age (years)</label> | |
| <input type="number" id="age" name="age" placeholder="e.g., 45" min="0" max="120" required> | |
| <span class="input-hint">0-120 years</span> | |
| </div> | |
| </div> | |
| <div class="input-row"> | |
| <div class="input-group"> | |
| <label class="input-label">Stream</label> | |
| <div class="select-wrapper"> | |
| <select id="stream" name="stream" required> | |
| <option value="">Loading streams...</option> | |
| </select> | |
| <span class="select-arrow"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M6 9l6 6 6-6" /> | |
| </svg> | |
| </span> | |
| </div> | |
| </div> | |
| <div class="input-group" style="position:relative;"> | |
| <label class="input-label">Target Skills</label> | |
| <div class="skills-input-wrapper" id="skillsWrapper" style="display: flex; flex-wrap: wrap; gap: 6px; padding: 0.5rem; background: var(--gray-100); border: 2px solid transparent; border-radius: var(--radius-md); min-height: 52px; cursor: text; transition: var(--transition-base);"> | |
| <div id="skillsTags" style="display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px;"></div> | |
| <input type="text" id="skillsInput" placeholder="Search skills..." style="border: none; background: transparent; color: var(--black); outline: none; flex: 1; min-width: 130px; font-family: var(--font-primary); font-size: 1rem; padding-top: 2px;" autocomplete="off"> | |
| <input type="hidden" id="skills" name="skills" required> | |
| </div> | |
| <div id="skillsDropdown" style="display: none; position: absolute; top: calc(100% - 15px); left: 0; right: 0; max-height: 200px; overflow-y: auto; background: var(--cream); border: 1px solid var(--gray-300); border-radius: var(--radius-md); z-index: 100; box-shadow: var(--shadow-md);"></div> | |
| <span class="input-hint">Select from available skills</span> | |
| </div> | |
| </div> | |
| <div class="input-row"> | |
| <div class="input-group"> | |
| <label class="input-label">Desired Role (Dream Job)</label> | |
| <div class="select-wrapper"> | |
| <select id="desired_role" name="desired_role"> | |
| <option value="">Select Target Job Role</option> | |
| </select> | |
| <span class="select-arrow"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M6 9l6 6 6-6" /> | |
| </svg> | |
| </span> | |
| </div> | |
| <span class="input-hint">Optional: to compare your skills against a specific job!</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Medical History --> | |
| <div class="form-group-container"> | |
| <h3 class="group-title"> | |
| <span class="group-icon">🏛️</span> | |
| Academic Background | |
| </h3> | |
| <div class="input-row"> | |
| <div class="input-group"> | |
| <label class="input-label">Hostel</label> | |
| <div class="checkbox-card"> | |
| <input type="checkbox" id="hostel" name="hostel"> | |
| <label for="hostel" class="checkbox-label"> | |
| <span class="checkbox-box"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> | |
| <path d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </span> | |
| <span class="checkbox-text"> | |
| <span class="checkbox-title">Hostel Accommodation</span> | |
| <span class="checkbox-desc">Checked = Yes (1), Unchecked = No (0)</span> | |
| </span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">History of Backlogs</label> | |
| <div class="checkbox-card"> | |
| <input type="checkbox" id="backlogs" name="backlogs"> | |
| <label for="backlogs" class="checkbox-label"> | |
| <span class="checkbox-box"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"> | |
| <path d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </span> | |
| <span class="checkbox-text"> | |
| <span class="checkbox-title">Academic Backlogs</span> | |
| <span class="checkbox-desc">Checked = Yes (1), Unchecked = No (0)</span> | |
| </span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Health Metrics --> | |
| <div class="form-group-container"> | |
| <h3 class="group-title"> | |
| <span class="group-icon">📈</span> | |
| Performance Metrics | |
| </h3> | |
| <div class="input-row"> | |
| <div class="input-group"> | |
| <label class="input-label">Internships</label> | |
| <div class="input-with-unit"> | |
| <input type="number" id="internships" name="internships" | |
| placeholder="e.g., 2" step="1" min="0" required> | |
| <span class="input-unit">count</span> | |
| </div> | |
| <span class="input-hint">Number of internships completed</span> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">CGPA</label> | |
| <div class="input-with-unit"> | |
| <input type="number" id="cgpa" name="cgpa" placeholder="e.g., 8.5" step="0.01" min="0" | |
| max="10" required> | |
| <span class="input-unit">/10</span> | |
| </div> | |
| <span class="input-hint">Cumulative Grade Point Average</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Submit Button --> | |
| <button type="submit" class="submit-btn" id="submitBtn"> | |
| <span class="btn-text">Analyze Placement</span> | |
| <span class="btn-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M5 12h14M12 5l7 7-7 7" /> | |
| </svg> | |
| </span> | |
| </button> | |
| </form> | |
| </section> | |
| <!-- Results Section --> | |
| <section class="results-section hidden" id="resultsSection"> | |
| <div class="results-header"> | |
| <button class="back-btn" id="backBtn"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M19 12H5M12 19l-7-7 7-7" /> | |
| </svg> | |
| <span>New Assessment</span> | |
| </button> | |
| </div> | |
| <!-- Risk Score Card --> | |
| <div class="risk-card" id="riskCard"> | |
| <div class="risk-header"> | |
| <span class="risk-label">Placement Chance</span> | |
| <span class="risk-confidence" id="riskConfidence">High Confidence</span> | |
| </div> | |
| <div class="risk-display"> | |
| <div class="risk-circle" id="riskCircle"> | |
| <svg class="progress-ring" viewBox="0 0 120 120"> | |
| <circle class="progress-ring-bg" cx="60" cy="60" r="54" /> | |
| <circle class="progress-ring-fill" id="progressRing" cx="60" cy="60" r="54" /> | |
| </svg> | |
| <div class="risk-value"> | |
| <span class="risk-percentage" id="riskPercentage">0</span> | |
| <span class="risk-symbol">%</span> | |
| </div> | |
| </div> | |
| <div class="risk-level" id="riskLevel">CALCULATING</div> | |
| </div> | |
| <div class="risk-meter"> | |
| <div class="meter-track"> | |
| <div class="meter-fill" id="meterFill"></div> | |
| <div class="meter-pointer" id="meterPointer"> | |
| <div class="pointer-line"></div> | |
| </div> | |
| </div> | |
| <div class="meter-labels"> | |
| <span>Low</span> | |
| <span>Medium</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Risk Score Card end above --> | |
| <!-- Interactive Risk Simulator --> | |
| <div class="sim-card hidden" id="interactiveSimulator"> | |
| <div class="sim-card-header"> | |
| <h3 class="sim-title">Interactive Risk Simulator</h3> | |
| </div> | |
| <div class="sim-card-body"> | |
| <div class="sim-chart-container"> | |
| <svg viewBox="0 0 200 120" class="sim-svg"> | |
| <!-- Background Track --> | |
| <path d="M 30 100 A 70 70 0 0 1 170 100" fill="none" class="sim-track-bg" /> | |
| <!-- Dynamic Arc --> | |
| <path id="simTrack" d="M 30 100 A 70 70 0 0 1 170 100" fill="none" class="sim-track-fill" | |
| stroke-dasharray="219.91" stroke-dashoffset="219.91" /> | |
| <!-- Baseline Marker --> | |
| <g id="simBaselineGroup" style="transform-origin: 100px 100px;"> | |
| <line x1="16" y1="100" x2="44" y2="100" class="sim-baseline-line" /> | |
| <g id="simBaselineTextGroup" transform="translate(18, 90)"> | |
| <rect x="-24" y="-8" width="48" height="16" rx="8" class="sim-baseline-rect" /> | |
| <text x="0" y="1" class="sim-marker-text">Baseline</text> | |
| </g> | |
| </g> | |
| <!-- Target Marker --> | |
| <g id="simTargetGroup" style="transform-origin: 100px 100px;"> | |
| <line x1="16" y1="100" x2="44" y2="100" class="sim-target-line" /> | |
| <g id="simTargetTextGroup" transform="translate(18, 110)"> | |
| <rect x="-20" y="-8" width="40" height="16" rx="8" class="sim-target-rect" /> | |
| <text x="0" y="1" class="sim-marker-text" fill="#fff" | |
| font-weight="600">Target</text> | |
| </g> | |
| </g> | |
| <!-- Center Shield Icon --> | |
| <path d="M 100 18 L 92 24 V 34 C 92 42 100 48 100 48 C 100 48 108 42 108 34 V 24 Z" | |
| class="sim-shield-icon" /> | |
| <text x="100" y="36" class="sim-shield-cross">+</text> | |
| </svg> | |
| <!-- Center Text --> | |
| <div class="sim-center-text"> | |
| <div id="simRiskValue" class="sim-val">--%</div> | |
| <div id="simRiskLabel" class="sim-lbl">STANDARD CHANCE</div> | |
| </div> | |
| </div> | |
| <div class="sim-stats-row"> | |
| <div class="sim-stat"> | |
| <span class="sim-stat-lbl">Placement Probability</span> | |
| <strong id="simTargetStat" class="sim-stat-val">--%</strong> | |
| </div> | |
| <div class="sim-stat"> | |
| <span class="sim-stat-lbl">Chance Delta</span> | |
| <strong id="simDeltaStat" class="sim-stat-val">--%</strong> | |
| </div> | |
| <div class="sim-stat"> | |
| <span class="sim-stat-lbl">Target Goal</span> | |
| <strong id="simBaselineStat" class="sim-stat-val">--%</strong> | |
| </div> | |
| </div> | |
| <div class="sim-controls-grid"> | |
| <div class="sim-control"> | |
| <span class="sim-control-lbl">Age</span> | |
| <input type="range" id="simAgeSlider" min="15" max="50" step="1" class="sim-slider"> | |
| <input type="number" id="simAgeNum" class="sim-num-input"> | |
| </div> | |
| <div class="sim-control"> | |
| <span class="sim-control-lbl">Internships</span> | |
| <input type="range" id="simInternSlider" min="0" max="10" step="1" class="sim-slider"> | |
| <input type="number" id="simInternNum" class="sim-num-input"> | |
| </div> | |
| <div class="sim-control"> | |
| <span class="sim-control-lbl">CGPA</span> | |
| <input type="range" id="simCGPASlider" min="0" max="10" step="0.01" class="sim-slider"> | |
| <input type="number" id="simCGPANum" class="sim-num-input"> | |
| </div> | |
| <div class="sim-control sim-toggle"> | |
| <span class="sim-control-lbl">Backlogs</span> | |
| <label class="sim-switch"> | |
| <input type="checkbox" id="simBacklogToggle"> | |
| <span class="sim-slider-round"></span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="sim-disclaimer"> | |
| AI-generated, may include mistakes. Don't enter sensitive personal info. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Explanation Section --> | |
| <div class="explanation-section" id="explanationSection"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Placement Factor Analysis</h2> | |
| <p class="section-subtitle">SHAP-based explainable AI insights</p> | |
| </div> | |
| <div class="factors-container" id="factorsContainer"> | |
| <!-- Factors will be dynamically inserted --> | |
| </div> | |
| <div class="info-card"> | |
| <div class="info-icon"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"> | |
| <path | |
| d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" /> | |
| </svg> | |
| </div> | |
| <div class="info-content"> | |
| <h4>About SHAP Analysis</h4> | |
| <p>SHAP (SHapley Additive exPlanations) values show how each factor contributes to your | |
| individual risk prediction, providing transparent and interpretable insights.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Knowledge Graph --> | |
| <div class="graph-section" id="graphSection" style="display:none; margin-bottom: var(--space-xl);"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Knowledge Graph Gap Analysis</h2> | |
| </div> | |
| <div class="panel" style="background: #0f172a; border-radius: 12px; padding: 10px; text-align: center; overflow: hidden; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm);"> | |
| <img id="graphImage" src="" alt="Skill Gap Map" style="max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto;"> | |
| </div> | |
| </div> | |
| <!-- Recommendations --> | |
| <div class="recommendations-section" id="recommendationsSection"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Personalized Insights</h2> | |
| </div> | |
| <div class="recommendations-grid" id="recommendationsGrid"> | |
| <!-- Will be populated dynamically --> | |
| </div> | |
| </div> | |
| <!-- What-If Scenario Analysis --> | |
| <div class="whatif-section" id="whatifSection" style="display:none;"> | |
| <div class="section-header"> | |
| <h2 class="section-title">🔮 What-If Scenario Analysis</h2> | |
| <p class="section-subtitle">See how modifying academic factors could change your placement chance</p> | |
| </div> | |
| <!-- What-If Loading --> | |
| <div class="whatif-loading" id="whatifLoading"> | |
| <div class="whatif-loading-spinner"></div> | |
| <p>Generating counterfactual scenarios...</p> | |
| </div> | |
| <!-- Scenario Cards --> | |
| <div class="whatif-scenarios-grid" id="whatifScenariosGrid"> | |
| <!-- Dynamically populated --> | |
| </div> | |
| <!-- Combined Best Outcome --> | |
| <div class="whatif-combined-card" id="whatifCombinedCard" style="display:none;"> | |
| <div class="combined-header"> | |
| <span class="combined-icon">🌟</span> | |
| <div> | |
| <h3 class="combined-title">Best Possible Outcome</h3> | |
| <p class="combined-subtitle">If all recommended changes are applied together</p> | |
| </div> | |
| </div> | |
| <div class="combined-results"> | |
| <div class="combined-original"> | |
| <span class="combined-label">Current Chance</span> | |
| <span class="combined-value" id="combinedOriginalRisk">—</span> | |
| </div> | |
| <div class="combined-arrow"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M5 12h14M12 5l7 7-7 7" /> | |
| </svg> | |
| </div> | |
| <div class="combined-modified"> | |
| <span class="combined-label">Potential Chance</span> | |
| <span class="combined-value" id="combinedModifiedRisk">—</span> | |
| </div> | |
| </div> | |
| <div class="combined-delta" id="combinedDelta"> | |
| <!-- Dynamically populated --> | |
| </div> | |
| </div> | |
| <div class="whatif-disclaimer"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"> | |
| <path | |
| d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" /> | |
| </svg> | |
| <p>These scenarios are model-based estimates. Actual outcomes depend on many factors. Consult a | |
| professional before making decisions.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <div class="footer-content"> | |
| <p class="disclaimer"> | |
| <strong>Disclaimer:</strong> This tool is for informational purposes only. Predictors are based on historical data. | |
| </p> | |
| <div class="footer-meta"> | |
| <span>Powered by XGBoost + SHAP</span> | |
| <span class="divider">•</span> | |
| <span>PlacementPredictor+ v1.0</span> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Chat Widget (floating, bottom-right) --> | |
| <div class="chat-widget" id="chatWidget" style="display:none;"> | |
| <button class="chat-toggle" id="chatToggle" title="Chat with Placement AI"> | |
| <svg class="chat-icon-open" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" /> | |
| </svg> | |
| <svg class="chat-icon-close" viewBox="0 0 24 24" fill="currentColor" style="display:none;"> | |
| <path | |
| d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /> | |
| </svg> | |
| <span class="chat-pulse"></span> | |
| </button> | |
| <div class="chat-panel" id="chatPanel"> | |
| <div class="chat-header"> | |
| <div class="chat-header-info"> | |
| <div class="chat-avatar">🤖</div> | |
| <div> | |
| <h4 class="chat-name">Placement AI</h4> | |
| <span class="chat-status" id="chatStatus"> | |
| <span class="status-dot"></span> Online | |
| </span> | |
| </div> | |
| </div> | |
| <button class="chat-minimize" id="chatMinimize"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M6 9l6 6 6-6" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="chat-messages" id="chatMessages"></div> | |
| <div class="chat-input-area"> | |
| <input type="text" class="chat-input" id="chatInput" placeholder="Ask about your results..." | |
| autocomplete="off" /> | |
| <button class="chat-send" id="chatSend" disabled> | |
| <svg viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |