File size: 4,868 Bytes
aa1977a 2f80eea a2a617d 2f80eea aa1977a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#0b1220" />
<title>CV Match - Free Browser App</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/mammoth@1.8.0/mammoth.browser.min.js"></script>
</head>
<body>
<main class="shell">
<header class="hero">
<div class="eyebrow"><span class="pulse"></span> Free browser-based CV matcher</div>
<h1>Find the right match<br /><em>with confidence.</em></h1>
<p class="hero-copy">Upload a CV, review the extracted details, and compare it with a job description using your trained model.</p>
<div class="privacy-note"><span>🔒</span> Your CV is processed in this browser. It is not uploaded to an application server.</div>
</header>
<section class="workflow">
<form class="panel" id="jobPanel">
<div class="panel-heading">
<span class="step-number">01</span>
<div><p class="overline">Start here</p><h2>Job details</h2></div>
</div>
<p class="panel-intro">Describe the role you are hiring for. More context usually gives a more useful ranking signal.</p>
<label>Job title<input id="jobTitle" value="Customer Support Specialist" /></label>
<div class="two-col">
<label>Required seniority<input id="jobSeniority" value="Junior" /></label>
<label>Industry<input id="jobIndustry" value="FinTech" /></label>
</div>
<label>Must-have skills<input id="mustHaveSkills" placeholder="Python, customer service, CRM" /></label>
<label>Nice-to-have skills<input id="niceToHaveSkills" placeholder="Separate skills with commas" /></label>
<label>Job description<textarea id="jobDescription" rows="4" placeholder="What is this person expected to do?"></textarea></label>
<label>Responsibilities<textarea id="responsibilities" rows="3" placeholder="List the main responsibilities"></textarea></label>
<label>Requirements<textarea id="requirements" rows="3" placeholder="List the essential requirements"></textarea></label>
</form>
<section class="panel" id="candidatePanel">
<div class="panel-heading">
<span class="step-number">02</span>
<div><p class="overline">Upload and review</p><h2>Candidate CV</h2></div>
</div>
<p class="panel-intro">PDF, DOCX and TXT files are supported. The first model download may take a minute and will be cached in your browser.</p>
<label class="dropzone" id="dropzone">
<input id="cvFile" type="file" accept=".pdf,.docx,.txt" />
<span class="upload-icon">↑</span>
<strong id="fileLabel">Choose a CV file</strong>
<small>or drag and drop it here</small>
</label>
<button class="button button-secondary" id="extractButton" type="button" disabled>Extract CV details</button>
<div class="status" id="status" role="status">Waiting for a CV upload.</div>
<label>Extracted text preview<textarea id="preview" rows="5" readonly placeholder="Your CV text preview will appear here."></textarea></label>
<div class="subheading"><span>Candidate details</span><small>Review before scoring</small></div>
<label>Candidate role<input id="candidateRole" /></label>
<div class="two-col">
<label>Seniority<input id="candidateSeniority" /></label>
<label>Years of experience<input id="yearsExperience" /></label>
</div>
<label>Industry experience<input id="candidateIndustry" /></label>
<label>Education<input id="education" /></label>
<label>Skills<input id="candidateSkills" placeholder="Separate skills with commas" /></label>
<label>Professional summary<textarea id="summary" rows="3"></textarea></label>
<label>Experience highlights<textarea id="experienceBullets" rows="4"></textarea></label>
</section>
</section>
<section class="score-section">
<div class="score-heading">
<div><p class="overline">Final step</p><h2>Score the match</h2></div>
<button class="button button-primary" id="scoreButton" type="button">Score match <span>→</span></button>
</div>
<div class="result" id="result" hidden></div>
</section>
<footer>
<span>Assistive ranking only - always review the original CV and job requirements.</span>
<a href="https://huggingface.co/Gehan77/cv-match-browser" target="_blank" rel="noreferrer">Model card ↗</a>
</footer>
</main>
<script type="module" src="app.js?v=20260810"></script>
</body>
</html>
|