| const $ = (id) => document.getElementById(id); |
| const cvFile = $("cvFile"); |
| const dropzone = $("dropzone"); |
| const fileLabel = $("fileLabel"); |
| const extractButton = $("extractButton"); |
| const scoreButton = $("scoreButton"); |
| const status = $("status"); |
| const preview = $("preview"); |
| const result = $("result"); |
| let selectedFile = null; |
|
|
| function setStatus(message, type = "") { |
| status.textContent = message; |
| status.className = `status ${type}`.trim(); |
| } |
|
|
| function value(id) { |
| return $(id).value.trim(); |
| } |
|
|
| function setSelectedFile(file) { |
| if (!file) return; |
| selectedFile = file; |
| fileLabel.textContent = file.name; |
| extractButton.disabled = false; |
| setStatus("File selected. Click Extract CV details to fill the form."); |
| } |
|
|
| function applyCandidate(candidate) { |
| const mapping = { |
| candidateRole: candidate.role, |
| candidateSeniority: candidate.seniority, |
| yearsExperience: candidate.years_experience, |
| candidateIndustry: candidate.industry, |
| education: candidate.education, |
| candidateSkills: candidate.skills, |
| summary: candidate.summary, |
| experienceBullets: candidate.experience_bullets, |
| }; |
| for (const [id, fieldValue] of Object.entries(mapping)) $(id).value = fieldValue || ""; |
| } |
|
|
| async function extractCv() { |
| if (!selectedFile) return; |
| extractButton.disabled = true; |
| setStatus("Uploading CV to the FastAPI service for extraction…"); |
| try { |
| const body = new FormData(); |
| body.append("file", selectedFile); |
| const response = await fetch("/api/extract-cv", { method: "POST", body }); |
| const data = await response.json(); |
| if (!response.ok) throw new Error(data.detail || "Could not read this CV."); |
| preview.value = data.preview || ""; |
| applyCandidate(data.candidate || {}); |
| const filled = Object.values(data.candidate || {}).filter(Boolean).length; |
| const warning = data.warnings?.length ? ` ${data.warnings.join(" ")}` : ""; |
| setStatus(`Extracted ${filled} of 8 candidate fields. Please review them before scoring.${warning}`, data.warnings?.length ? "" : "success"); |
| } catch (error) { |
| setStatus(error.message || "Could not read this CV.", "error"); |
| } finally { |
| extractButton.disabled = false; |
| } |
| } |
|
|
| function buildPayload() { |
| return { |
| job: { |
| job_title: value("jobTitle"), |
| seniority: value("jobSeniority"), |
| industry: value("jobIndustry"), |
| must_have_skills: value("mustHaveSkills"), |
| nice_to_have_skills: value("niceToHaveSkills"), |
| description: value("jobDescription"), |
| responsibilities: value("responsibilities"), |
| requirements: value("requirements"), |
| }, |
| candidate: { |
| role: value("candidateRole"), |
| seniority: value("candidateSeniority"), |
| years_experience: value("yearsExperience"), |
| industry: value("candidateIndustry"), |
| education: value("education"), |
| skills: value("candidateSkills"), |
| summary: value("summary"), |
| experience_bullets: value("experienceBullets"), |
| }, |
| }; |
| } |
|
|
| async function scoreMatch() { |
| scoreButton.disabled = true; |
| scoreButton.textContent = "Scoring…"; |
| setStatus("FastAPI is scoring the job and candidate profile…"); |
| result.hidden = true; |
| try { |
| const response = await fetch("/api/score", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify(buildPayload()), |
| }); |
| const data = await response.json(); |
| if (!response.ok) throw new Error(data.detail || "Scoring failed."); |
| const percent = (data.probability * 100).toFixed(1); |
| result.innerHTML = ` |
| <div class="result-top"> |
| <div><h3>${data.verdict}</h3><p>Model-estimated relevance for this job and candidate profile.</p></div> |
| <div class="score-number">${percent}%</div> |
| </div> |
| <div class="score-bar"><span style="width:${Math.max(2, data.probability * 100)}%"></span></div> |
| <p>Decision threshold: ${(data.threshold * 100).toFixed(1)}%</p> |
| <p class="result-note">${data.disclaimer}</p> |
| `; |
| result.hidden = false; |
| setStatus("Match scored by FastAPI.", "success"); |
| } catch (error) { |
| setStatus(error.message || "Scoring failed.", "error"); |
| } finally { |
| scoreButton.disabled = false; |
| scoreButton.innerHTML = 'Score match <span>→</span>'; |
| } |
| } |
|
|
| cvFile.addEventListener("change", (event) => setSelectedFile(event.target.files[0])); |
| extractButton.addEventListener("click", extractCv); |
| scoreButton.addEventListener("click", scoreMatch); |
| dropzone.addEventListener("dragover", (event) => { event.preventDefault(); dropzone.classList.add("dragging"); }); |
| dropzone.addEventListener("dragleave", () => dropzone.classList.remove("dragging")); |
| dropzone.addEventListener("drop", (event) => { |
| event.preventDefault(); |
| dropzone.classList.remove("dragging"); |
| setSelectedFile(event.dataTransfer.files[0]); |
| }); |
|
|
