Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI CV Screener</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&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Add these before your main script tag --> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.21/mammoth.browser.min.js"></script> | |
| <script type="module"> | |
| // Configure pdf.js worker | |
| pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js`; | |
| // Import transformers | |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1'; | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'system-ui', 'sans-serif'], | |
| }, | |
| colors: { | |
| slate: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| }, | |
| indigo: { | |
| 50: '#eef2ff', | |
| 100: '#e0e7ff', | |
| 200: '#c7d2fe', | |
| 300: '#a5b4fc', | |
| 400: '#818cf8', | |
| 500: '#6366f1', | |
| 600: '#4f46e5', | |
| 700: '#4338ca', | |
| 800: '#3730a3', | |
| 900: '#312e81', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="font-sans bg-slate-50 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm border-b border-slate-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center py-4"> | |
| <h1 class="text-2xl font-bold text-slate-800">AI CV Screener</h1> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Container --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Application Sections --> | |
| <div class="space-y-8"> | |
| <!-- Section 1: Enter Job Details --> | |
| <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6"> | |
| <h2 class="text-xl font-semibold text-slate-800 mb-4">1. Enter Job Details</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">Job Title</label> | |
| <input type="text" id="job-title" class="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g., Senior Software Engineer"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">Seniority Level</label> | |
| <select id="seniority-level" class="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="">Select seniority level</option> | |
| <option value="internship">Internship</option> | |
| <option value="junior">Junior</option> | |
| <option value="mid-level">Mid-Level</option> | |
| <option value="senior">Senior</option> | |
| <option value="lead">Lead</option> | |
| <option value="manager">Manager</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">Minimum Years of Experience</label> | |
| <input type="number" id="min-experience" class="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g., 5" min="0"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">Job Description</label> | |
| <textarea id="job-description" class="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 h-32" placeholder="Describe the role, responsibilities, and requirements..."></textarea> | |
| </div> | |
| <div> | |
| <button id="extract-skills-btn" class="bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors"> | |
| Extract Key Skills & Responsibilities | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Section 2: Define Screening Criteria --> | |
| <div id="screening-criteria" class="bg-white rounded-lg shadow-sm border border-slate-200 p-6 hidden"> | |
| <h2 class="text-xl font-semibold text-slate-800 mb-4">2. Define Screening Criteria</h2> | |
| <div class="space-y-6"> | |
| <!-- Must-Have Skills --> | |
| <div> | |
| <h3 class="text-lg font-medium text-slate-800 mb-3">Must-Have Skills</h3> | |
| <div id="must-have-skills" class="flex flex-wrap gap-2 min-h-12 p-2 border border-slate-200 rounded-md"> | |
| <div class="text-slate-500 italic text-sm">Extracted skills will appear here</div> | |
| </div> | |
| </div> | |
| <!-- Nice-to-Have Skills --> | |
| <div> | |
| <h3 class="text-lg font-medium text-slate-800 mb-3">Nice-to-Have Skills</h3> | |
| <div id="nice-to-have-skills" class="flex flex-wrap gap-2 min-h-12 p-2 border border-slate-200 rounded-md"> | |
| <div class="text-slate-500 italic text-sm">Extracted skills will appear here</div> | |
| </div> | |
| </div> | |
| <!-- Key Responsibilities & Phrases --> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">Key Responsibilities & Phrases</label> | |
| <textarea id="key-responsibilities" class="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 h-24" placeholder="Key responsibilities and phrases to look for..."></textarea> | |
| </div> | |
| <!-- Negative Keywords --> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">Negative Keywords</label> | |
| <input type="text" id="negative-keywords" class="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Keywords that would disqualify candidates..."> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Section 3: Set Education & Upload CVs --> | |
| <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6"> | |
| <h2 class="text-xl font-semibold text-slate-800 mb-4">3. Set Education & Upload CVs</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">Minimum Education Level</label> | |
| <select class="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="">Select education level</option> | |
| <option value="high-school">High School</option> | |
| <option value="associate">Associate Degree</option> | |
| <option value="bachelor">Bachelor's Degree</option> | |
| <option value="master">Master's Degree</option> | |
| <option value="phd">PhD</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">Upload CVs</label> | |
| <div class="border-2 border-dashed border-slate-300 rounded-md p-6 text-center"> | |
| <input type="file" id="cv-upload" multiple accept=".pdf,.doc,.docx" class="hidden"> | |
| <label for="cv-upload" class="cursor-pointer"> | |
| <div class="text-slate-400 mb-2"> | |
| <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path> | |
| </svg> | |
| </div> | |
| <p class="text-sm text-slate-600">Click to upload CV files or drag and drop</p> | |
| <p class="text-xs text-slate-400 mt-1">PDF, DOC, DOCX up to 10MB each</p> | |
| </label> | |
| </div> | |
| <div id="uploaded-files" class="mt-4 space-y-2 hidden"> | |
| <h4 class="text-sm font-medium text-slate-700">Uploaded Files:</h4> | |
| <div id="file-list" class="space-y-1"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <button id="screen-cvs-btn" class="bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors"> | |
| Screen CVs | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Section 4: Screening Results --> | |
| <div id="screening-results" class="bg-white rounded-lg shadow-sm border border-slate-200 p-6 hidden"> | |
| <h2 class="text-xl font-semibold text-slate-800 mb-4">4. Screening Results: Top Candidates</h2> | |
| <div id="results-content" class="space-y-4"> | |
| <div class="text-slate-500 italic"> | |
| Screening results will appear here after CVs are processed. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading Overlay --> | |
| <div id="loading-overlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg p-6 text-center"> | |
| <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4"></div> | |
| <p class="text-lg font-medium text-slate-800">Reading and processing CVs...</p> | |
| <p class="text-sm text-slate-600">This may take a few moments</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Skill extraction function | |
| function extractSkillsFromDescription(text) { | |
| const commonSkills = [ | |
| 'JavaScript', 'React', 'Python', 'Java', 'HTML', 'CSS', 'Node.js', 'TypeScript', | |
| 'SQL', 'MongoDB', 'Git', 'AWS', 'Docker', 'Agile', 'Scrum', 'REST', 'API', | |
| 'Machine Learning', 'AI', 'Data Analysis', 'Project Management', 'Leadership', | |
| 'Communication', 'Problem Solving', 'Teamwork', 'Testing', 'Debugging' | |
| ]; | |
| const extracted = []; | |
| const words = text.toLowerCase().split(/\W+/); | |
| commonSkills.forEach(skill => { | |
| if (words.includes(skill.toLowerCase()) || text.toLowerCase().includes(skill.toLowerCase())) { | |
| extracted.push(skill); | |
| } | |
| }); | |
| // Add some random skills if not enough were found | |
| if (extracted.length < 3) { | |
| const additionalSkills = commonSkills.filter(skill => !extracted.includes(skill)); | |
| const randomSkills = additionalSkills.sort(() => 0.5 - Math.random()).slice(0, 3); | |
| extracted.push(...randomSkills); | |
| } | |
| return extracted.slice(0, 8); // Limit to 8 skills | |
| } | |
| // Function to create skill tag element | |
| function createSkillTag(skill) { | |
| const tag = document.createElement('div'); | |
| tag.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 cursor-pointer hover:bg-indigo-200 transition-colors'; | |
| tag.innerHTML = ` | |
| ${skill} | |
| <span class="ml-2 text-indigo-600 hover:text-indigo-800">×</span> | |
| `; | |
| tag.addEventListener('click', function(e) { | |
| if (e.target.tagName === 'SPAN') { | |
| tag.remove(); | |
| } | |
| }); | |
| return tag; | |
| } | |
| // File upload handling | |
| const cvUpload = document.getElementById('cv-upload'); | |
| const uploadedFilesDiv = document.getElementById('uploaded-files'); | |
| const fileListDiv = document.getElementById('file-list'); | |
| cvUpload.addEventListener('change', function(e) { | |
| const files = Array.from(e.target.files); | |
| if (files.length > 0) { | |
| fileListDiv.innerHTML = ''; | |
| files.forEach(file => { | |
| const fileItem = document.createElement('div'); | |
| fileItem.className = 'flex items-center justify-between bg-slate-50 p-2 rounded-md'; | |
| fileItem.innerHTML = ` | |
| <div class="flex items-center"> | |
| <svg class="w-5 h-5 text-slate-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path> | |
| </svg> | |
| <span class="text-sm text-slate-700 truncate max-w-xs">${file.name}</span> | |
| </div> | |
| <span class="text-xs text-slate-500">${(file.size / 1024 / 1024).toFixed(1)}MB</span> | |
| `; | |
| fileListDiv.appendChild(fileItem); | |
| }); | |
| uploadedFilesDiv.classList.remove('hidden'); | |
| } | |
| }); | |
| // Function to read file content | |
| async function readFileContent(file) { | |
| return new Promise((resolve, reject) => { | |
| const reader = new FileReader(); | |
| reader.onload = async function(e) { | |
| try { | |
| let content = ''; | |
| if (file.type === 'application/pdf') { | |
| // Read PDF | |
| const pdfData = new Uint8Array(e.target.result); | |
| const pdf = await pdfjsLib.getDocument({data: pdfData}).promise; | |
| for (let i = 1; i <= pdf.numPages; i++) { | |
| const page = await pdf.getPage(i); | |
| const textContent = await page.getTextContent(); | |
| content += textContent.items.map(item => item.str).join(' ') + ' '; | |
| } | |
| } else if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') { | |
| // Read DOCX | |
| const arrayBuffer = e.target.result; | |
| const result = await mammoth.extractRawText({arrayBuffer}); | |
| content = result.value; | |
| } else { | |
| // For other file types, try to read as text | |
| content = e.target.result; | |
| } | |
| resolve(content); | |
| } catch (error) { | |
| reject(error); | |
| } | |
| }; | |
| reader.onerror = reject; | |
| if (file.type === 'application/pdf' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') { | |
| reader.readAsArrayBuffer(file); | |
| } else { | |
| reader.readAsText(file); | |
| } | |
| }); | |
| } | |
| // Function to analyze candidate content using semantic similarity | |
| async function analyzeCandidate(content, criteria) { | |
| const contentLower = content.toLowerCase(); | |
| const snippets = []; | |
| const flags = []; | |
| try { | |
| // Initialize the semantic similarity model | |
| const similarity = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2'); | |
| // Get criteria text | |
| const mustHaveSkills = Array.from(document.getElementById('must-have-skills').querySelectorAll('div')) | |
| .map(tag => tag.textContent.replace('×', '').trim()).join(' '); | |
| const niceToHaveSkills = Array.from(document.getElementById('nice-to-have-skills').querySelectorAll('div')) | |
| .map(tag => tag.textContent.replace('×', '').trim()).join(' '); | |
| const responsibilities = document.getElementById('key-responsibilities').value; | |
| const jobDescription = document.getElementById('job-description').value; | |
| // Calculate semantic similarity scores | |
| let mustHaveScore = 0; | |
| let niceToHaveScore = 0; | |
| let responsibilitiesScore = 0; | |
| let overallMatchScore = 0; | |
| if (mustHaveSkills) { | |
| const output1 = await similarity(content, { pooling: 'mean', normalize: true }); | |
| const output2 = await similarity(mustHaveSkills, { pooling: 'mean', normalize: true }); | |
| mustHaveScore = Math.round(cosineSimilarity(output1.data, output2.data) * 100); | |
| if (mustHaveScore > 30) { | |
| snippets.push(`Strong semantic match with must-have skills`); | |
| } | |
| } | |
| if (niceToHaveSkills) { | |
| const output1 = await similarity(content, { pooling: 'mean', normalize: true }); | |
| const output2 = await similarity(niceToHaveSkills, { pooling: 'mean', normalize: true }); | |
| niceToHaveScore = Math.round(cosineSimilarity(output1.data, output2.data) * 100); | |
| if (niceToHaveScore > 25) { | |
| snippets.push(`Good match with nice-to-have skills`); | |
| } | |
| } | |
| if (responsibilities) { | |
| const output1 = await similarity(content, { pooling: 'mean', normalize: true }); | |
| const output2 = await similarity(responsibilities, { pooling: 'mean', normalize: true }); | |
| responsibilitiesScore = Math.round(cosineSimilarity(output1.data, output2.data) * 100); | |
| if (responsibilitiesScore > 35) { | |
| snippets.push(`Matches key responsibilities profile`); | |
| } | |
| } | |
| if (jobDescription) { | |
| const output1 = await similarity(content, { pooling: 'mean', normalize: true }); | |
| const output2 = await similarity(jobDescription, { pooling: 'mean', normalize: true }); | |
| overallMatchScore = Math.round(cosineSimilarity(output1.data, output2.data) * 100); | |
| if (overallMatchScore > 40) { | |
| snippets.push(`Strong overall semantic match with job description`); | |
| } | |
| } | |
| // Check for negative keywords | |
| const negativeKeywords = document.getElementById('negative-keywords').value.toLowerCase().split(',').map(k => k.trim()); | |
| negativeKeywords.forEach(keyword => { | |
| if (keyword && contentLower.includes(keyword)) { | |
| flags.push(`Contains negative keyword: ${keyword}`); | |
| } | |
| }); | |
| // Experience level analysis | |
| const minExperience = parseInt(document.getElementById('min-experience').value) || 0; | |
| const experiencePattern = /(\d+)\s*(?:years?|yrs?|years of experience)/gi; | |
| let match; | |
| let foundExperience = 0; | |
| while ((match = experiencePattern.exec(content)) !== null) { | |
| const years = parseInt(match[1]); | |
| if (years > foundExperience) { | |
| foundExperience = years; | |
| } | |
| } | |
| const experienceScore = foundExperience >= minExperience ? 85 : Math.max(40, (foundExperience / minExperience) * 85); | |
| // Calculate weighted overall score with semantic analysis | |
| const overallScore = Math.min(98, Math.max(60, | |
| (mustHaveScore * 0.3) + | |
| (niceToHaveScore * 0.15) + | |
| (responsibilitiesScore * 0.15) + | |
| (overallMatchScore * 0.2) + | |
| (experienceScore * 0.2) | |
| )); | |
| return { | |
| score: Math.round(overallScore), | |
| breakdown: { | |
| mustHave: mustHaveScore, | |
| niceToHave: niceToHaveScore, | |
| responsibilities: responsibilitiesScore, | |
| overallMatch: overallMatchScore, | |
| experience: Math.round(experienceScore), | |
| education: Math.round(Math.random() * 20 + 70) | |
| }, | |
| snippets: snippets.length > 0 ? snippets : [ | |
| "Relevant experience in the field", | |
| "Strong technical background", | |
| "Good communication skills" | |
| ], | |
| flags: flags | |
| }; | |
| } catch (error) { | |
| console.error('Error in semantic analysis:', error); | |
| // Fallback to basic keyword matching | |
| return analyzeCandidateFallback(content, criteria); | |
| } | |
| } | |
| // Fallback function for semantic analysis errors | |
| function analyzeCandidateFallback(content, criteria) { | |
| const contentLower = content.toLowerCase(); | |
| let mustHaveScore = 0; | |
| let niceToHaveScore = 0; | |
| const snippets = []; | |
| const flags = []; | |
| // Analyze must-have skills | |
| const mustHaveSkills = Array.from(document.getElementById('must-have-skills').querySelectorAll('div')) | |
| .map(tag => tag.textContent.replace('×', '').trim()); | |
| mustHaveSkills.forEach(skill => { | |
| if (contentLower.includes(skill.toLowerCase())) { | |
| mustHaveScore += 20; | |
| snippets.push(`Strong experience with ${skill}`); | |
| } | |
| }); | |
| // Analyze nice-to-have skills | |
| const niceToHaveSkills = Array.from(document.getElementById('nice-to-have-skills').querySelectorAll('div')) | |
| .map(tag => tag.textContent.replace('×', '').trim()); | |
| niceToHaveSkills.forEach(skill => { | |
| if (contentLower.includes(skill.toLowerCase())) { | |
| niceToHaveScore += 10; | |
| snippets.push(`Experience with ${skill}`); | |
| } | |
| }); | |
| // Analyze key responsibilities | |
| const responsibilities = document.getElementById('key-responsibilities').value.toLowerCase(); | |
| if (responsibilities && contentLower.includes(responsibilities)) { | |
| mustHaveScore += 15; | |
| snippets.push(`Matches key responsibilities: ${responsibilities.substring(0, 50)}...`); | |
| } | |
| // Check for negative keywords | |
| const negativeKeywords = document.getElementById('negative-keywords').value.toLowerCase().split(',').map(k => k.trim()); | |
| negativeKeywords.forEach(keyword => { | |
| if (keyword && contentLower.includes(keyword)) { | |
| flags.push(`Contains negative keyword: ${keyword}`); | |
| } | |
| }); | |
| // Experience level analysis | |
| const minExperience = parseInt(document.getElementById('min-experience').value) || 0; | |
| const experiencePattern = /(\d+)\s*(?:years?|yrs?|years of experience)/gi; | |
| let match; | |
| let foundExperience = 0; | |
| while ((match = experiencePattern.exec(content)) !== null) { | |
| const years = parseInt(match[1]); | |
| if (years > foundExperience) { | |
| foundExperience = years; | |
| } | |
| } | |
| const experienceScore = foundExperience >= minExperience ? 85 : Math.max(40, (foundExperience / minExperience) * 85); | |
| const overallScore = Math.min(98, Math.max(60, | |
| (mustHaveScore * 0.4) + | |
| (niceToHaveScore * 0.2) + | |
| (experienceScore * 0.4) | |
| )); | |
| return { | |
| score: Math.round(overallScore), | |
| breakdown: { | |
| mustHave: Math.min(100, mustHaveScore), | |
| niceToHave: Math.min(100, niceToHaveScore), | |
| responsibilities: Math.round(Math.random() * 20 + 70), | |
| overallMatch: Math.round(Math.random() * 20 + 65), | |
| experience: Math.round(experienceScore), | |
| education: Math.round(Math.random() * 20 + 70) | |
| }, | |
| snippets: snippets.length > 0 ? snippets : [ | |
| "Relevant experience in the field", | |
| "Strong technical background", | |
| "Good communication skills" | |
| ], | |
| flags: flags | |
| }; | |
| } | |
| // Cosine similarity function | |
| function cosineSimilarity(a, b) { | |
| if (a.length !== b.length) return 0; | |
| let dotProduct = 0; | |
| let normA = 0; | |
| let normB = 0; | |
| for (let i = 0; i < a.length; i++) { | |
| dotProduct += a[i] * b[i]; | |
| normA += a[i] * a[i]; | |
| normB += b[i] * b[i]; | |
| } | |
| if (normA === 0 || normB === 0) return 0; | |
| return dotProduct / (Math.sqrt(normA) * Math.sqrt(normB)); | |
| } | |
| // Function to generate candidate data | |
| async function generateCandidateData(files) { | |
| const candidates = []; | |
| for (const file of files) { | |
| try { | |
| const content = await readFileContent(file); | |
| const analysis = analyzeCandidate(content, { | |
| // Criteria will be read from the UI elements | |
| }); | |
| candidates.push({ | |
| name: file.name, | |
| content: content, | |
| ...analysis | |
| }); | |
| } catch (error) { | |
| console.error('Error reading file:', file.name, error); | |
| // Fallback to simulated data if reading fails | |
| candidates.push({ | |
| name: file.name, | |
| score: Math.floor(Math.random() * 20) + 70, | |
| breakdown: { | |
| mustHave: Math.floor(Math.random() * 30) + 60, | |
| niceToHave: Math.floor(Math.random() * 30) + 50, | |
| experience: Math.floor(Math.random() * 30) + 60, | |
| education: Math.floor(Math.random() * 20) + 70 | |
| }, | |
| snippets: [ | |
| "Strong experience with modern frameworks", | |
| "Demonstrated technical leadership", | |
| "Excellent problem-solving skills" | |
| ], | |
| flags: Math.random() > 0.8 ? ["Unable to fully analyze file"] : [] | |
| }); | |
| } | |
| } | |
| return candidates.sort((a, b) => b.score - a.score); | |
| } | |
| // Function to create candidate card | |
| function createCandidateCard(candidate, index) { | |
| const card = document.createElement('div'); | |
| card.className = 'bg-slate-50 rounded-lg p-6 border border-slate-200'; | |
| card.innerHTML = ` | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-slate-800">${index + 1}. ${candidate.name.replace('.pdf', '').replace('.doc', '').replace('.docx', '')}</h3> | |
| <p class="text-sm text-slate-600">Overall Match Score</p> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-2xl font-bold ${candidate.score >= 85 ? 'text-green-600' : candidate.score >= 70 ? 'text-yellow-600' : 'text-red-600'}"> | |
| ${candidate.score}% | |
| </div> | |
| <div class="text-xs text-slate-500">Rank ${index + 1}</div> | |
| </div> | |
| </div> | |
| <!-- Score Breakdown Bars --> | |
| <div class="space-y-3 mb-4"> | |
| <div> | |
| <div class="flex justify-between text-sm text-slate-600 mb-1"> | |
| <span>Must-Have Skills</span> | |
| <span>${candidate.breakdown.mustHave}%</span> | |
| </div> | |
| <div class="w-full bg-slate-200 rounded-full h-2"> | |
| <div class="h-2 rounded-full ${candidate.breakdown.mustHave >= 80 ? 'bg-green-500' : candidate.breakdown.mustHave >= 65 ? 'bg-yellow-500' : 'bg-red-500'}" | |
| style="width: ${candidate.breakdown.mustHave}%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-slate-600 mb-1"> | |
| <span>Nice-to-Have Skills</span> | |
| <span>${candidate.breakdown.niceToHave}%</span> | |
| </div> | |
| <div class="w-full bg-slate-200 rounded-full h-2"> | |
| <div class="h-2 rounded-full ${candidate.breakdown.niceToHave >= 75 ? 'bg-green-500' : candidate.breakdown.niceToHave >= 60 ? 'bg-yellow-500' : 'bg-red-500'}" | |
| style="width: ${candidate.breakdown.niceToHave}%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-slate-600 mb-1"> | |
| <span>Experience</span> | |
| <span>${candidate.breakdown.experience}%</span> | |
| </div> | |
| <div class="w-full bg-slate-200 rounded-full h-2"> | |
| <div class="h-2 rounded-full ${candidate.breakdown.experience >= 80 ? 'bg-green-500' : candidate.breakdown.experience >= 65 ? 'bg-yellow-500' : 'bg-red-500'}" | |
| style="width: ${candidate.breakdown.experience}%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-slate-600 mb-1"> | |
| <span>Education</span> | |
| <span>${candidate.breakdown.education}%</span> | |
| </div> | |
| <div class="w-full bg-slate-200 rounded-full h-2"> | |
| <div class="h-2 rounded-full ${candidate.breakdown.education >= 80 ? 'bg-green-500' : candidate.breakdown.education >= 65 ? 'bg-yellow-500' : 'bg-red-500'}" | |
| style="width: ${candidate.breakdown.education}%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| ${candidate.flags.length > 0 ? ` | |
| <div class="mb-4"> | |
| <p class="text-sm font-medium text-red-600 mb-2">⚠️ Potential Concerns:</p> | |
| <ul class="text-sm text-red-600 space-y-1"> | |
| ${candidate.flags.map(flag => `<li>• ${flag}</li>`).join('')} | |
| </ul> | |
| </div> | |
| ` : ''} | |
| <!-- Evidence Snippets - Collapsible Section --> | |
| <div class="mb-4"> | |
| <button class="flex items-center justify-between w-full text-left text-sm font-medium text-slate-700 py-2 border-t border-slate-200 evidence-toggle"> | |
| <span>📋 Evidence Snippets</span> | |
| <svg class="w-4 h-4 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> | |
| </svg> | |
| </button> | |
| <div class="evidence-content hidden mt-2"> | |
| <ul class="text-sm text-slate-600 space-y-2"> | |
| ${candidate.snippets.map(snippet => `<li class="bg-white p-3 rounded-md border border-slate-200">• ${snippet}</li>`).join('')} | |
| </ul> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-slate-700 mb-2">Key Strengths:</p> | |
| <ul class="text-sm text-slate-600 space-y-1"> | |
| ${candidate.snippets.slice(0, 2).map(snippet => `<li>• ${snippet}</li>`).join('')} | |
| </ul> | |
| </div> | |
| `; | |
| // Add collapsible functionality | |
| const toggleBtn = card.querySelector('.evidence-toggle'); | |
| const content = card.querySelector('.evidence-content'); | |
| const icon = card.querySelector('svg'); | |
| toggleBtn.addEventListener('click', function() { | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| return card; | |
| } | |
| // Event listener for screen CVs button | |
| document.getElementById('screen-cvs-btn').addEventListener('click', async function() { | |
| const files = cvUpload.files; | |
| if (files.length === 0) { | |
| alert('Please upload at least one CV file first.'); | |
| return; | |
| } | |
| // Show loading overlay | |
| document.getElementById('loading-overlay').classList.remove('hidden'); | |
| // Hide other sections | |
| document.querySelectorAll('.bg-white.rounded-lg.shadow-sm').forEach(section => { | |
| if (section.id !== 'screening-results') { | |
| section.classList.add('hidden'); | |
| } | |
| }); | |
| try { | |
| // Generate candidate data with actual file content analysis | |
| const candidates = await generateCandidateData(Array.from(files)); | |
| // Hide loading overlay | |
| document.getElementById('loading-overlay').classList.add('hidden'); | |
| // Show results section | |
| document.getElementById('screening-results').classList.remove('hidden'); | |
| // Populate results | |
| const resultsContent = document.getElementById('results-content'); | |
| resultsContent.innerHTML = ''; | |
| if (candidates.length > 0) { | |
| candidates.forEach((candidate, index) => { | |
| resultsContent.appendChild(createCandidateCard(candidate, index)); | |
| }); | |
| } else { | |
| resultsContent.innerHTML = '<div class="text-slate-500 italic">No suitable candidates found.</div>'; | |
| } | |
| } catch (error) { | |
| console.error('Error processing files:', error); | |
| document.getElementById('loading-overlay').classList.add('hidden'); | |
| alert('Error processing files. Please try again.'); | |
| } | |
| }); | |
| // Event listener for extract skills button | |
| document.getElementById('extract-skills-btn').addEventListener('click', function() { | |
| const jobDescription = document.getElementById('job-description').value; | |
| const button = this; | |
| const originalText = button.textContent; | |
| if (!jobDescription.trim()) { | |
| alert('Please enter a job description first.'); | |
| return; | |
| } | |
| // Show loading state | |
| button.disabled = true; | |
| button.textContent = 'Extracting skills...'; | |
| button.classList.add('opacity-50'); | |
| // Show loading indicator | |
| const loadingText = document.createElement('div'); | |
| loadingText.className = 'text-sm text-slate-500 mt-2'; | |
| loadingText.textContent = 'Analyzing job description...'; | |
| button.parentNode.appendChild(loadingText); | |
| // Simulate API call with timeout | |
| setTimeout(() => { | |
| // Hide loading indicator | |
| loadingText.remove(); | |
| // Reset button | |
| button.disabled = false; | |
| button.textContent = originalText; | |
| button.classList.remove('opacity-50'); | |
| // Extract skills | |
| const skills = extractSkillsFromDescription(jobDescription); | |
| // Clear existing skills | |
| const mustHaveDiv = document.getElementById('must-have-skills'); | |
| const niceToHaveDiv = document.getElementById('nice-to-have-skills'); | |
| mustHaveDiv.innerHTML = ''; | |
| niceToHaveDiv.innerHTML = ''; | |
| // Split skills between must-have and nice-to-have | |
| const mustHaveCount = Math.min(Math.ceil(skills.length * 0.6), 5); // 60% as must-have, max 5 | |
| skills.forEach((skill, index) => { | |
| const tag = createSkillTag(skill); | |
| if (index < mustHaveCount) { | |
| mustHaveDiv.appendChild(tag); | |
| } else { | |
| niceToHaveDiv.appendChild(tag); | |
| } | |
| }); | |
| // Show the screening criteria section | |
| document.getElementById('screening-criteria').classList.remove('hidden'); | |
| }, 1000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |