Spaces:
Running
Running
| # -*- coding: utf-8 -*- | |
| # ======================================================= | |
| # Job Search Agent — Firecrawl + OpenAI + Gradio | |
| # Source: naukrigulf.com | Cleaned by GPT-4o-mini | |
| # + Resume Scoring Feature | |
| # HuggingFace Spaces Version — API keys entered in UI | |
| # ======================================================= | |
| import os | |
| import re | |
| import json | |
| import logging | |
| import warnings | |
| from warnings import filterwarnings | |
| filterwarnings("ignore") | |
| warnings.filterwarnings("ignore") | |
| os.environ["PYTHONWARNINGS"] = "ignore" | |
| logging.getLogger("httpx").setLevel(logging.CRITICAL) | |
| logging.getLogger("openai").setLevel(logging.CRITICAL) | |
| from firecrawl import FirecrawlApp | |
| from openai import OpenAI | |
| import gradio as gr | |
| # ══════════════════════════════════ | |
| # URL BUILDER | |
| # ══════════════════════════════════ | |
| def build_naukrigulf_url(job_title: str, location: str) -> str: | |
| def slugify(text: str) -> str: | |
| return re.sub(r"[^a-z0-9]+", "-", text.lower().strip()).strip("-") | |
| title_slug = slugify(job_title) | |
| if location.strip(): | |
| loc_slug = slugify(location) | |
| slug = f"{title_slug}-jobs-in-{loc_slug}" | |
| else: | |
| slug = f"{title_slug}-jobs" | |
| return f"www.naukrigulf.com/{slug}" | |
| # ══════════════════════════════════ | |
| # FIRECRAWL SCRAPER | |
| # ══════════════════════════════════ | |
| def scrape_jobs(slug: str, firecrawl_api_key: str) -> str: | |
| try: | |
| firecrawl = FirecrawlApp(api_key=firecrawl_api_key) | |
| data = firecrawl.scrape( | |
| f"https://{slug}", | |
| only_main_content=False, | |
| max_age=172800000, | |
| parsers=["pdf"], | |
| formats=["markdown"] | |
| ) | |
| if isinstance(data, dict): | |
| return data.get("markdown", data.get("content", "")) | |
| return str(data) | |
| except Exception as e: | |
| return f"SCRAPE_ERROR: {str(e)}" | |
| # ══════════════════════════════════ | |
| # LLM CLEANER | |
| # ══════════════════════════════════ | |
| SYSTEM_PROMPT = """ | |
| You are a job data extraction specialist. | |
| You receive raw scraped markdown from a job listing website (naukrigulf.com). | |
| Your task is to extract structured job listings and return them ONLY as a JSON array. | |
| Each job object must have these exact keys: | |
| - "title": job title (string) | |
| - "company": company name (string) | |
| - "location": job location (string) | |
| - "experience": required experience (string, e.g. "3-5 Years" or "N/A") | |
| - "salary": salary info (string or "Not Disclosed") | |
| - "posted": when posted (string, e.g. "2 days ago" or "N/A") | |
| - "apply_link": direct apply URL — ONLY include if a real URL is explicitly present in the scraped data. If not found, use null. DO NOT invent URLs. | |
| - "skills": top 3-5 key skills as a list of strings (or empty list) | |
| - "description": one-sentence summary of the role (string) | |
| Return ONLY a valid JSON array. No markdown fences, no preamble, no explanation. | |
| If no jobs are found, return an empty array: [] | |
| """ | |
| def clean_with_llm(raw_markdown: str, job_title: str, openai_api_key: str) -> list: | |
| if raw_markdown.startswith("SCRAPE_ERROR:"): | |
| return [] | |
| trimmed = raw_markdown[:30000] | |
| user_msg = ( | |
| f"Extract ALL job listings for '{job_title}' from the following scraped content. Do not skip any jobs.\n\n" | |
| f"---SCRAPED CONTENT---\n{trimmed}" | |
| ) | |
| try: | |
| openai_client = OpenAI(api_key=openai_api_key) | |
| response = openai_client.chat.completions.create( | |
| model="gpt-4o-mini", | |
| temperature=0.0, | |
| max_tokens=8000, | |
| messages=[ | |
| {"role": "system", "content": SYSTEM_PROMPT}, | |
| {"role": "user", "content": user_msg}, | |
| ], | |
| ) | |
| raw_json = response.choices[0].message.content.strip() | |
| raw_json = re.sub(r"^```[a-z]*\n?", "", raw_json) | |
| raw_json = re.sub(r"\n?```$", "", raw_json) | |
| jobs = json.loads(raw_json) | |
| if isinstance(jobs, list): | |
| return jobs | |
| return [] | |
| except Exception as e: | |
| return [{"title": f"Parsing Error: {e}", "company": "", "location": "", | |
| "experience": "", "salary": "", "posted": "", | |
| "apply_link": None, "skills": [], "description": ""}] | |
| # ══════════════════════════════════ | |
| # RESUME PARSER | |
| # ══════════════════════════════════ | |
| def extract_resume_text(file_path) -> str: | |
| if file_path is None: | |
| return "" | |
| ext = os.path.splitext(file_path)[-1].lower() | |
| try: | |
| if ext == ".pdf": | |
| import pypdf | |
| text_parts = [] | |
| with open(file_path, "rb") as f: | |
| reader = pypdf.PdfReader(f) | |
| for page in reader.pages: | |
| page_text = page.extract_text() | |
| if page_text: | |
| text_parts.append(page_text) | |
| return "\n".join(text_parts).strip() | |
| elif ext in (".txt", ".md", ""): | |
| with open(file_path, "r", encoding="utf-8", errors="ignore") as f: | |
| return f.read().strip() | |
| else: | |
| return f"RESUME_ERROR: Unsupported file type '{ext}'. Please upload a PDF or TXT file." | |
| except Exception as e: | |
| return f"RESUME_ERROR: {str(e)}" | |
| # ══════════════════════════════════ | |
| # RESUME SCORER | |
| # ══════════════════════════════════ | |
| SCORING_SYSTEM_PROMPT = """ | |
| You are an expert technical recruiter and resume analyst. | |
| You will be given a candidate's resume text and a list of job listings (each with title, company, skills, description, experience required). | |
| For EACH job, score how well the resume matches the job on a scale of 0–100, where: | |
| - 0–20 : Very poor match (unrelated skills/domain) | |
| - 21–40 : Weak match (some overlap but major gaps) | |
| - 41–60 : Moderate match (relevant background but missing key requirements) | |
| - 61–80 : Good match (strong overlap, minor gaps) | |
| - 81–100: Excellent match (highly aligned skills, experience, and domain) | |
| Return ONLY a valid JSON array (no markdown fences, no preamble). | |
| Each element must have: | |
| - "job_index": 1-based integer (matching the job's position in the input list) | |
| - "title": job title string | |
| - "company": company name string | |
| - "score": integer 0–100 | |
| - "match_summary": 1-2 sentence explanation of the score (key strengths or gaps) | |
| - "missing_skills": list of up to 3 skills the resume is lacking for this role (empty list if none) | |
| Sort results by score descending. | |
| """ | |
| def score_resume_against_jobs(resume_text: str, jobs: list, openai_api_key: str) -> list: | |
| if not resume_text or not jobs: | |
| return [] | |
| jobs_summary = [] | |
| for i, job in enumerate(jobs, start=1): | |
| jobs_summary.append({ | |
| "index": i, | |
| "title": job.get("title", "N/A"), | |
| "company": job.get("company", "N/A"), | |
| "experience_required": job.get("experience", "N/A"), | |
| "skills": job.get("skills", []), | |
| "description": job.get("description", ""), | |
| }) | |
| user_msg = ( | |
| f"RESUME:\n{resume_text[:6000]}\n\n" | |
| f"JOBS:\n{json.dumps(jobs_summary, indent=2)}" | |
| ) | |
| try: | |
| openai_client = OpenAI(api_key=openai_api_key) | |
| response = openai_client.chat.completions.create( | |
| model="gpt-4o-mini", | |
| temperature=0.0, | |
| max_tokens=4000, | |
| messages=[ | |
| {"role": "system", "content": SCORING_SYSTEM_PROMPT}, | |
| {"role": "user", "content": user_msg}, | |
| ], | |
| ) | |
| raw_json = response.choices[0].message.content.strip() | |
| raw_json = re.sub(r"^```[a-z]*\n?", "", raw_json) | |
| raw_json = re.sub(r"\n?```$", "", raw_json) | |
| scored = json.loads(raw_json) | |
| if isinstance(scored, list): | |
| return scored | |
| return [] | |
| except Exception as e: | |
| return [{"job_index": 0, "title": "Scoring Error", "company": "", | |
| "score": 0, "match_summary": str(e), "missing_skills": []}] | |
| def scores_to_markdown(scored_jobs: list, resume_filename: str) -> str: | |
| if not scored_jobs: | |
| return "⚠️ No scoring results available. Make sure jobs were found and resume was uploaded." | |
| def score_badge(s: int) -> str: | |
| if s >= 81: return f"🟢 **{s}/100** _(Excellent)_" | |
| if s >= 61: return f"🔵 **{s}/100** _(Good)_" | |
| if s >= 41: return f"🟡 **{s}/100** _(Moderate)_" | |
| if s >= 21: return f"🟠 **{s}/100** _(Weak)_" | |
| return f"🔴 **{s}/100** _(Poor)_" | |
| fname = os.path.basename(resume_filename) if resume_filename else "your resume" | |
| header = ( | |
| f"### 📄 Resume Match Scores — `{fname}`\n" | |
| f"*Jobs ranked by match score (highest first)*\n\n" | |
| "| Rank | Job Title | Company | Score | Missing Skills |\n" | |
| "|:----:|-----------|---------|:-----:|----------------|\n" | |
| ) | |
| rows = [] | |
| for rank, item in enumerate(scored_jobs, start=1): | |
| title = item.get("title", "N/A") | |
| company = item.get("company", "N/A") | |
| score = item.get("score", 0) | |
| missing = item.get("missing_skills", []) | |
| missing_str = ", ".join(f"`{s}`" for s in missing) if missing else "—" | |
| badge = score_badge(score) | |
| rows.append(f"| {rank} | {title} | {company} | {badge} | {missing_str} |") | |
| details = "\n\n---\n### 🔎 Detailed Match Analysis\n" | |
| for rank, item in enumerate(scored_jobs, start=1): | |
| title = item.get("title", "N/A") | |
| company = item.get("company", "N/A") | |
| score = item.get("score", 0) | |
| summary = item.get("match_summary", "") | |
| missing = item.get("missing_skills", []) | |
| badge = score_badge(score) | |
| missing_md = " · ".join(f"`{s}`" for s in missing) if missing else "None identified" | |
| details += ( | |
| f"\n**{rank}. {title}** @ *{company}* {badge}\n" | |
| f"> {summary}\n\n" | |
| f"**Skills to develop:** {missing_md}\n" | |
| ) | |
| return header + "\n".join(rows) + details | |
| # ══════════════════════════════════ | |
| # MARKDOWN TABLE RENDERER | |
| # ══════════════════════════════════ | |
| def jobs_to_markdown(jobs: list, job_title: str, location: str, url: str) -> str: | |
| if not jobs: | |
| return ( | |
| f"❌ **No jobs found** for **{job_title}**" | |
| + (f" in **{location}**" if location else "") | |
| + f"\n\n🔗 You can try opening the URL manually: [https://{url}](https://{url})" | |
| ) | |
| loc_str = f" in **{location}**" if location else "" | |
| display_url = f"https://{url}" | |
| header = ( | |
| f"### 🔍 Job Results: **{job_title}**{loc_str}\n" | |
| f"*Source: [{display_url}]({display_url})*\n\n" | |
| "| # | Job Title | Company | Location | Experience | Salary | Posted | Skills | Apply |\n" | |
| "|:--:|-----------|---------|----------|:----------:|:------:|:------:|--------|:-----:|\n" | |
| ) | |
| rows = [] | |
| for i, job in enumerate(jobs, start=1): | |
| title = job.get("title", "N/A") or "N/A" | |
| company = job.get("company", "N/A") or "N/A" | |
| loc = job.get("location", "N/A") or "N/A" | |
| experience = job.get("experience", "N/A") or "N/A" | |
| salary = job.get("salary", "Not Disclosed") or "Not Disclosed" | |
| posted = job.get("posted", "N/A") or "N/A" | |
| skills_list = job.get("skills", []) or [] | |
| apply_link = job.get("apply_link") | |
| skills_str = ", ".join(skills_list[:3]) if skills_list else "—" | |
| apply_cell = f"[Apply]({apply_link})" if apply_link else "—" | |
| rows.append( | |
| f"| {i} | {title} | {company} | {loc} | {experience} | {salary} | {posted} | {skills_str} | {apply_cell} |" | |
| ) | |
| details = "\n\n---\n### 📋 Job Details\n" | |
| for i, job in enumerate(jobs, start=1): | |
| title = job.get("title", "N/A") | |
| company = job.get("company", "N/A") | |
| desc = job.get("description", "") | |
| skills_list = job.get("skills", []) | |
| apply_link = job.get("apply_link") | |
| apply_md = f"[🔗 Apply Now]({apply_link})" if apply_link else "_(Apply link not available)_" | |
| skills_md = " · ".join(f"`{s}`" for s in skills_list) if skills_list else "—" | |
| details += ( | |
| f"\n**{i}. {title}** @ *{company}*\n" | |
| f"> {desc}\n\n" | |
| f"**Skills:** {skills_md} \n" | |
| f"**Apply:** {apply_md}\n" | |
| ) | |
| return header + "\n".join(rows) + details | |
| # ══════════════════════════════════ | |
| # SESSION STATE | |
| # ══════════════════════════════════ | |
| _last_fetched_jobs: list = [] | |
| # ══════════════════════════════════ | |
| # MAIN SEARCH FUNCTION | |
| # ══════════════════════════════════ | |
| def run_job_search(job_title: str, location: str, firecrawl_api_key: str, openai_api_key: str, progress=gr.Progress()): | |
| global _last_fetched_jobs | |
| if not firecrawl_api_key.strip(): | |
| return "⚠️ Please enter your Firecrawl API key in the **API Keys** tab.", gr.update(visible=False) | |
| if not openai_api_key.strip(): | |
| return "⚠️ Please enter your OpenAI API key in the **API Keys** tab.", gr.update(visible=False) | |
| if not job_title.strip(): | |
| return "⚠️ Please enter a job title.", gr.update(visible=False) | |
| progress(0.05, desc="🔗 Building URL...") | |
| url = build_naukrigulf_url(job_title, location) | |
| progress(0.20, desc=f"🌐 Scraping {url} ...") | |
| raw_md = scrape_jobs(url, firecrawl_api_key) | |
| if raw_md.startswith("SCRAPE_ERROR:"): | |
| return f"❌ Scraping failed: {raw_md}\n\nURL attempted: {url}", gr.update(visible=False) | |
| if len(raw_md.strip()) < 100: | |
| return ( | |
| f"⚠️ Page returned very little content.\n\nURL: [https://{url}](https://{url})\n\n" | |
| "Try a different job title or location.", | |
| gr.update(visible=False) | |
| ) | |
| progress(0.55, desc="🤖 Cleaning data with GPT-4o-mini...") | |
| jobs = clean_with_llm(raw_md, job_title, openai_api_key) | |
| _last_fetched_jobs = jobs | |
| progress(0.85, desc="📊 Rendering table...") | |
| output = jobs_to_markdown(jobs, job_title, location, url) | |
| progress(1.00, desc="✅ Done!") | |
| return output, gr.update(visible=True) | |
| # ══════════════════════════════════ | |
| # RESUME SCORING FUNCTION | |
| # ══════════════════════════════════ | |
| def run_resume_scoring(resume_file, openai_api_key: str, progress=gr.Progress()): | |
| global _last_fetched_jobs | |
| if not openai_api_key.strip(): | |
| return "⚠️ Please enter your OpenAI API key in the **API Keys** tab.", gr.update(visible=False) | |
| if resume_file is None: | |
| return "⚠️ Please upload a resume (PDF or TXT).", gr.update(visible=False) | |
| if not _last_fetched_jobs: | |
| return ( | |
| "⚠️ No jobs loaded yet. Please run a **Job Search** first, then come back to score your resume.", | |
| gr.update(visible=False) | |
| ) | |
| progress(0.10, desc="📄 Extracting resume text...") | |
| resume_text = extract_resume_text(resume_file) | |
| if not resume_text or resume_text.startswith("RESUME_ERROR:"): | |
| return f"❌ Could not read resume: {resume_text}", gr.update(visible=False) | |
| if len(resume_text.strip()) < 50: | |
| return "⚠️ Resume appears to be empty or unreadable. Please try a different file.", gr.update(visible=False) | |
| progress(0.40, desc=f"🤖 Scoring against {len(_last_fetched_jobs)} jobs with GPT-4o-mini...") | |
| scored = score_resume_against_jobs(resume_text, _last_fetched_jobs, openai_api_key) | |
| progress(0.85, desc="📊 Rendering scores...") | |
| fname = resume_file if isinstance(resume_file, str) else str(resume_file) | |
| output = scores_to_markdown(scored, fname) | |
| progress(1.00, desc="✅ Scoring complete!") | |
| return output, gr.update(visible=True) | |
| # ══════════════════════════════════════════════════════════════ | |
| # BILLION-DOLLAR UI — DARK LUXURY EDITORIAL DESIGN | |
| # ══════════════════════════════════════════════════════════════ | |
| CSS = """ | |
| @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=JetBrains+Mono:wght@400;500&display=swap'); | |
| /* ─── RESET & BASE ─────────────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --void: #04040a; | |
| --deep: #080810; | |
| --surface: #0d0d1a; | |
| --raised: #12121f; | |
| --border: rgba(255,255,255,0.06); | |
| --border-hi: rgba(255,255,255,0.12); | |
| --gold: #f5c842; | |
| --gold-dim: #c9a235; | |
| --gold-glow: rgba(245,200,66,0.15); | |
| --cyan: #00e5ff; | |
| --cyan-dim: #0099b3; | |
| --cyan-glow: rgba(0,229,255,0.12); | |
| --rose: #ff4d6d; | |
| --rose-glow: rgba(255,77,109,0.12); | |
| --sage: #4ade80; | |
| --sage-glow: rgba(74,222,128,0.12); | |
| --text: #f0f0f8; | |
| --muted: #6b6b8a; | |
| --subtle: #3a3a55; | |
| --font-display: 'Syne', sans-serif; | |
| --font-body: 'DM Sans', sans-serif; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| --r-sm: 8px; | |
| --r-md: 14px; | |
| --r-lg: 20px; | |
| --r-xl: 28px; | |
| --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| /* ─── BODY & GRADIO CONTAINER ──────────────────────────────── */ | |
| html, body { | |
| background: var(--void) !important; | |
| color: var(--text) !important; | |
| font-family: var(--font-body) !important; | |
| min-height: 100vh; | |
| } | |
| .gradio-container { | |
| background: var(--void) !important; | |
| max-width: 1200px !important; | |
| margin: 0 auto !important; | |
| padding: 0 24px 80px !important; | |
| } | |
| /* Global noise texture overlay */ | |
| .gradio-container::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); | |
| pointer-events: none; | |
| z-index: 0; | |
| opacity: 0.4; | |
| } | |
| /* ─── AMBIENT GLOW ORBS ────────────────────────────────────── */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: -200px; left: -200px; | |
| width: 600px; height: 600px; | |
| background: radial-gradient(circle, rgba(245,200,66,0.04) 0%, transparent 70%); | |
| pointer-events: none; | |
| z-index: 0; | |
| animation: orb1 20s ease-in-out infinite alternate; | |
| } | |
| body::after { | |
| content: ''; | |
| position: fixed; | |
| bottom: -200px; right: -100px; | |
| width: 700px; height: 700px; | |
| background: radial-gradient(circle, rgba(0,229,255,0.04) 0%, transparent 70%); | |
| pointer-events: none; | |
| z-index: 0; | |
| animation: orb2 25s ease-in-out infinite alternate; | |
| } | |
| @keyframes orb1 { from { transform: translate(0,0) scale(1); } to { transform: translate(100px, 80px) scale(1.2); } } | |
| @keyframes orb2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-80px, -60px) scale(1.15); } } | |
| /* ─── HEADER ───────────────────────────────────────────────── */ | |
| #nexus-header { | |
| position: relative; | |
| padding: 72px 0 56px; | |
| text-align: center; | |
| overflow: hidden; | |
| } | |
| #nexus-header::before { | |
| content: 'NEXUS'; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-family: var(--font-display); | |
| font-size: clamp(80px, 18vw, 200px); | |
| font-weight: 800; | |
| color: transparent; | |
| -webkit-text-stroke: 1px rgba(255,255,255,0.025); | |
| letter-spacing: 0.2em; | |
| white-space: nowrap; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .header-eyebrow { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| letter-spacing: 0.35em; | |
| color: var(--gold); | |
| text-transform: uppercase; | |
| margin-bottom: 20px; | |
| opacity: 0; | |
| animation: fadeUp 0.8s var(--ease-smooth) 0.1s forwards; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| } | |
| .header-eyebrow::before, | |
| .header-eyebrow::after { | |
| content: ''; | |
| width: 40px; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--gold-dim)); | |
| } | |
| .header-eyebrow::after { | |
| background: linear-gradient(90deg, var(--gold-dim), transparent); | |
| } | |
| .header-title { | |
| font-family: var(--font-display); | |
| font-size: clamp(36px, 6vw, 72px); | |
| font-weight: 800; | |
| line-height: 1.05; | |
| letter-spacing: -0.02em; | |
| color: var(--text); | |
| margin-bottom: 6px; | |
| opacity: 0; | |
| animation: fadeUp 0.8s var(--ease-smooth) 0.2s forwards; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .header-title .accent-gold { color: var(--gold); } | |
| .header-title .accent-cyan { color: var(--cyan); } | |
| .header-subtitle { | |
| font-family: var(--font-body); | |
| font-size: 16px; | |
| font-weight: 300; | |
| color: var(--muted); | |
| margin-top: 16px; | |
| letter-spacing: 0.02em; | |
| opacity: 0; | |
| animation: fadeUp 0.8s var(--ease-smooth) 0.35s forwards; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .header-pills { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| margin-top: 28px; | |
| flex-wrap: wrap; | |
| opacity: 0; | |
| animation: fadeUp 0.8s var(--ease-smooth) 0.5s forwards; | |
| } | |
| .pill { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| padding: 6px 14px; | |
| border-radius: 100px; | |
| border: 1px solid var(--border-hi); | |
| color: var(--muted); | |
| background: rgba(255,255,255,0.03); | |
| backdrop-filter: blur(8px); | |
| } | |
| .pill.live { color: var(--sage); border-color: rgba(74,222,128,0.3); background: var(--sage-glow); } | |
| .pill.ai { color: var(--cyan); border-color: rgba(0,229,255,0.3); background: var(--cyan-glow); } | |
| .pill.gulf { color: var(--gold); border-color: rgba(245,200,66,0.3); background: var(--gold-glow); } | |
| /* ─── DIVIDER ──────────────────────────────────────────────── */ | |
| .section-divider { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| margin: 0 0 28px; | |
| } | |
| .section-divider span { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| letter-spacing: 0.3em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| white-space: nowrap; | |
| } | |
| .section-divider::before, | |
| .section-divider::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| /* ─── TABS ─────────────────────────────────────────────────── */ | |
| .tabs { border: none !important; background: transparent !important; } | |
| .tab-nav { | |
| display: flex !important; | |
| gap: 4px !important; | |
| padding: 6px !important; | |
| background: var(--raised) !important; | |
| border: 1px solid var(--border) !important; | |
| border-radius: var(--r-lg) !important; | |
| margin-bottom: 32px !important; | |
| backdrop-filter: blur(20px) !important; | |
| } | |
| .tab-nav button { | |
| font-family: var(--font-display) !important; | |
| font-size: 13px !important; | |
| font-weight: 600 !important; | |
| letter-spacing: 0.04em !important; | |
| color: var(--muted) !important; | |
| background: transparent !important; | |
| border: none !important; | |
| border-radius: var(--r-md) !important; | |
| padding: 10px 20px !important; | |
| transition: all 0.2s var(--ease-smooth) !important; | |
| cursor: pointer !important; | |
| } | |
| .tab-nav button.selected, | |
| .tab-nav button[aria-selected="true"] { | |
| background: var(--gold) !important; | |
| color: var(--void) !important; | |
| box-shadow: 0 4px 16px rgba(245,200,66,0.3) !important; | |
| } | |
| /* ─── PANELS ────────────────────────────────────────────────── */ | |
| #search-panel, #results-panel, #resume-panel, #score-panel, #api-keys-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-xl); | |
| padding: 32px; | |
| margin-bottom: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| #search-panel::before, #results-panel::before, | |
| #resume-panel::before, #score-panel::before, | |
| #api-keys-panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--border-hi), transparent); | |
| } | |
| /* ─── INPUTS ─────────────────────────────────────────────────── */ | |
| .gradio-textbox input, | |
| .gradio-textbox textarea, | |
| input[type="text"], | |
| input[type="password"], | |
| textarea { | |
| background: var(--raised) !important; | |
| border: 1px solid var(--border-hi) !important; | |
| border-radius: var(--r-md) !important; | |
| color: var(--text) !important; | |
| font-family: var(--font-body) !important; | |
| font-size: 15px !important; | |
| padding: 14px 18px !important; | |
| transition: all 0.2s var(--ease-smooth) !important; | |
| outline: none !important; | |
| } | |
| .gradio-textbox input:focus, | |
| .gradio-textbox textarea:focus, | |
| input[type="text"]:focus, | |
| input[type="password"]:focus, | |
| textarea:focus { | |
| border-color: var(--gold) !important; | |
| box-shadow: 0 0 0 3px var(--gold-glow) !important; | |
| } | |
| label span { | |
| font-family: var(--font-mono) !important; | |
| font-size: 11px !important; | |
| letter-spacing: 0.15em !important; | |
| text-transform: uppercase !important; | |
| color: var(--muted) !important; | |
| } | |
| /* ─── BUTTONS ─────────────────────────────────────────────────── */ | |
| #search-btn, #score-btn { | |
| width: 100% !important; | |
| padding: 18px 32px !important; | |
| font-family: var(--font-display) !important; | |
| font-size: 14px !important; | |
| font-weight: 700 !important; | |
| letter-spacing: 0.12em !important; | |
| text-transform: uppercase !important; | |
| background: linear-gradient(135deg, var(--gold), var(--gold-dim)) !important; | |
| color: var(--void) !important; | |
| border: none !important; | |
| border-radius: var(--r-md) !important; | |
| cursor: pointer !important; | |
| margin: 20px 0 !important; | |
| transition: all 0.25s var(--ease-spring) !important; | |
| box-shadow: 0 4px 24px rgba(245,200,66,0.25) !important; | |
| } | |
| #search-btn:hover, #score-btn:hover { | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 8px 32px rgba(245,200,66,0.4) !important; | |
| } | |
| #search-btn:active, #score-btn:active { | |
| transform: translateY(0) !important; | |
| } | |
| /* ─── BANNERS ─────────────────────────────────────────────────── */ | |
| #success-banner, #score-banner { | |
| text-align: center; | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| letter-spacing: 0.3em; | |
| text-transform: uppercase; | |
| color: var(--gold); | |
| padding: 16px; | |
| border: 1px solid rgba(245,200,66,0.2); | |
| border-radius: var(--r-md); | |
| background: var(--gold-glow); | |
| margin-bottom: 16px; | |
| } | |
| /* ─── STATS BAR ───────────────────────────────────────────────── */ | |
| #stats-bar { | |
| display: flex; | |
| gap: 16px; | |
| margin-bottom: 32px; | |
| flex-wrap: wrap; | |
| } | |
| .stat-card { | |
| flex: 1; | |
| min-width: 140px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-lg); | |
| padding: 20px 24px; | |
| text-align: center; | |
| transition: border-color 0.2s; | |
| } | |
| .stat-card:hover { border-color: var(--border-hi); } | |
| .stat-num { | |
| font-family: var(--font-display); | |
| font-size: 28px; | |
| font-weight: 800; | |
| color: var(--gold); | |
| line-height: 1; | |
| } | |
| .stat-label { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| margin-top: 8px; | |
| } | |
| /* ─── URL HINT ────────────────────────────────────────────────── */ | |
| #url-hint { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| color: var(--muted); | |
| margin-top: 12px; | |
| padding: 10px 14px; | |
| background: rgba(255,255,255,0.02); | |
| border-radius: var(--r-sm); | |
| border-left: 2px solid var(--gold-dim); | |
| } | |
| #url-hint code { | |
| color: var(--cyan); | |
| background: rgba(0,229,255,0.08); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| } | |
| /* ─── MARKDOWN OUTPUT ─────────────────────────────────────────── */ | |
| .prose, .markdown-body, [data-testid="markdown"] { | |
| font-family: var(--font-body) !important; | |
| color: var(--text) !important; | |
| line-height: 1.7 !important; | |
| } | |
| .prose table, [data-testid="markdown"] table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 13px; | |
| margin: 16px 0; | |
| } | |
| .prose th, [data-testid="markdown"] th { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border-hi); | |
| text-align: left; | |
| white-space: nowrap; | |
| } | |
| .prose td, [data-testid="markdown"] td { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border); | |
| color: var(--text); | |
| vertical-align: top; | |
| } | |
| .prose tr:hover td, [data-testid="markdown"] tr:hover td { | |
| background: rgba(255,255,255,0.02); | |
| } | |
| .prose a, [data-testid="markdown"] a { | |
| color: var(--cyan); | |
| text-decoration: none; | |
| } | |
| .prose a:hover, [data-testid="markdown"] a:hover { | |
| text-decoration: underline; | |
| color: var(--gold); | |
| } | |
| .prose code, [data-testid="markdown"] code { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| background: rgba(255,255,255,0.06); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| color: var(--cyan); | |
| } | |
| .prose blockquote, [data-testid="markdown"] blockquote { | |
| border-left: 3px solid var(--gold-dim); | |
| padding-left: 16px; | |
| color: var(--muted); | |
| font-style: italic; | |
| margin: 8px 0; | |
| } | |
| /* ─── FILE UPLOAD ─────────────────────────────────────────────── */ | |
| .gradio-file { | |
| background: var(--raised) !important; | |
| border: 2px dashed var(--border-hi) !important; | |
| border-radius: var(--r-lg) !important; | |
| transition: all 0.2s !important; | |
| } | |
| .gradio-file:hover { | |
| border-color: var(--gold-dim) !important; | |
| background: rgba(245,200,66,0.03) !important; | |
| } | |
| /* ─── API KEYS PANEL ─────────────────────────────────────────── */ | |
| #api-keys-panel { | |
| border-color: rgba(245,200,66,0.2); | |
| background: linear-gradient(135deg, var(--surface) 0%, rgba(245,200,66,0.03) 100%); | |
| } | |
| .api-notice { | |
| font-family: var(--font-body); | |
| font-size: 13px; | |
| color: var(--muted); | |
| line-height: 1.6; | |
| margin-bottom: 20px; | |
| padding: 14px 18px; | |
| background: rgba(0,229,255,0.05); | |
| border: 1px solid rgba(0,229,255,0.15); | |
| border-radius: var(--r-md); | |
| } | |
| .api-notice a { color: var(--cyan); } | |
| .api-notice strong { color: var(--text); } | |
| /* ─── FOOTER ──────────────────────────────────────────────────── */ | |
| #nexus-footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| padding: 40px 0 20px; | |
| border-top: 1px solid var(--border); | |
| margin-top: 40px; | |
| } | |
| .footer-brand { | |
| font-family: var(--font-display); | |
| font-size: 18px; | |
| font-weight: 800; | |
| color: var(--gold); | |
| letter-spacing: -0.02em; | |
| } | |
| .footer-brand span { color: var(--muted); } | |
| .footer-stack { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .footer-tag { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| letter-spacing: 0.15em; | |
| color: var(--muted); | |
| border: 1px solid var(--border); | |
| padding: 4px 10px; | |
| border-radius: 100px; | |
| text-transform: uppercase; | |
| } | |
| .footer-copy { | |
| font-family: var(--font-body); | |
| font-size: 12px; | |
| color: var(--subtle); | |
| width: 100%; | |
| text-align: center; | |
| margin-top: 16px; | |
| } | |
| /* ─── ANIMATIONS ─────────────────────────────────────────────── */ | |
| @keyframes fadeUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -200% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| /* ─── SCROLLBAR ─────────────────────────────────────────────── */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--deep); } | |
| ::-webkit-scrollbar-thumb { background: var(--subtle); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--muted); } | |
| /* ─── PROGRESS BAR ──────────────────────────────────────────── */ | |
| .progress-bar, [data-testid="progress"] { | |
| background: rgba(245,200,66,0.1) !important; | |
| border-radius: 100px !important; | |
| } | |
| .progress-bar > div { background: var(--gold) !important; border-radius: 100px !important; } | |
| /* ─── SELECTION ─────────────────────────────────────────────── */ | |
| ::selection { background: rgba(245,200,66,0.2); color: var(--text); } | |
| """ | |
| HEADER_HTML = """ | |
| <div id="nexus-header"> | |
| <div class="header-eyebrow">⬡ AI-POWERED JOB INTELLIGENCE ⬡</div> | |
| <div class="header-title"> | |
| NEXUS <span class="accent-gold">JOB</span><br> | |
| <span class="accent-cyan">SEARCH</span> AGENT | |
| </div> | |
| <div class="header-subtitle"> | |
| Real-time Gulf job intelligence · Firecrawl web scraping · GPT-4o-mini extraction · AI resume scoring | |
| </div> | |
| <div class="header-pills"> | |
| <span class="pill live">● Live Data</span> | |
| <span class="pill ai">GPT-4o-mini</span> | |
| <span class="pill gulf">NaukriGulf</span> | |
| <span class="pill">Firecrawl</span> | |
| <span class="pill">Resume AI</span> | |
| </div> | |
| </div> | |
| """ | |
| STATS_HTML = """ | |
| <div id="stats-bar"> | |
| <div class="stat-card"> | |
| <div class="stat-num">∞</div> | |
| <div class="stat-label">Live Jobs Scraped</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-num">AI</div> | |
| <div class="stat-label">GPT-4o-mini Powered</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-num">0–100</div> | |
| <div class="stat-label">Resume Match Score</div> | |
| </div> | |
| </div> | |
| """ | |
| FOOTER_HTML = """ | |
| <div id="nexus-footer"> | |
| <div class="footer-brand">NEXUS<span>AI</span></div> | |
| <div class="footer-stack"> | |
| <span class="footer-tag">Firecrawl</span> | |
| <span class="footer-tag">OpenAI GPT-4o-mini</span> | |
| <span class="footer-tag">Gradio</span> | |
| <span class="footer-tag">NaukriGulf</span> | |
| </div> | |
| <div class="footer-copy"> | |
| Real-time job data scraped and cleaned by AI · Gulf region specialist · Built for ambitious professionals | |
| </div> | |
| </div> | |
| """ | |
| SUCCESS_BANNER_HTML = '<div id="success-banner">✦ SEARCH COMPLETE — EXPLORE YOUR OPPORTUNITIES BELOW ✦</div>' | |
| SCORE_BANNER_HTML = '<div id="score-banner">✦ SCORING COMPLETE — YOUR MATCH RESULTS ARE READY ✦</div>' | |
| # ══════════════════════════════════ | |
| # GRADIO UI BUILD | |
| # ══════════════════════════════════ | |
| with gr.Blocks(css=CSS, title="NEXUS — Job Search Agent") as demo: | |
| gr.HTML(HEADER_HTML) | |
| gr.HTML(STATS_HTML) | |
| with gr.Tabs(elem_classes="tabs"): | |
| # ════════════════════════════════════════ | |
| # TAB 0 — API KEYS | |
| # ════════════════════════════════════════ | |
| with gr.Tab("🔑 API Keys"): | |
| gr.HTML('<div id="api-keys-panel"><div class="section-divider"><span>Configure API Keys</span></div>') | |
| gr.HTML( | |
| '<div class="api-notice">' | |
| '🔐 <strong>Your API keys are never stored</strong> — they exist only in your browser session and are sent directly to the respective APIs.<br><br>' | |
| '• Get your <strong>Firecrawl API key</strong> at <a href="https://www.firecrawl.dev" target="_blank">firecrawl.dev</a><br>' | |
| '• Get your <strong>OpenAI API key</strong> at <a href="https://platform.openai.com/api-keys" target="_blank">platform.openai.com/api-keys</a>' | |
| '</div>' | |
| ) | |
| firecrawl_key_input = gr.Textbox( | |
| label="Firecrawl API Key", | |
| placeholder="fc-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", | |
| type="password", | |
| interactive=True, | |
| ) | |
| openai_key_input = gr.Textbox( | |
| label="OpenAI API Key", | |
| placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", | |
| type="password", | |
| interactive=True, | |
| ) | |
| gr.HTML('</div>') | |
| # ════════════════════════════════════════ | |
| # TAB 1 — JOB SEARCH | |
| # ════════════════════════════════════════ | |
| with gr.Tab("🔍 Job Search"): | |
| gr.HTML('<div id="search-panel"><div class="section-divider"><span>Search Criteria</span></div>') | |
| with gr.Row(): | |
| job_title = gr.Textbox( | |
| label="Job Title", | |
| placeholder="e.g. Data Scientist, Software Engineer, Marketing Manager", | |
| scale=3, | |
| ) | |
| location = gr.Textbox( | |
| label="Location", | |
| placeholder="e.g. UAE, Saudi Arabia, Qatar, Dubai", | |
| scale=2, | |
| ) | |
| gr.HTML( | |
| '<div id="url-hint">URL pattern: <code>naukrigulf.com/{job-title}-jobs-in-{location}</code> — All found listings are returned</div>' | |
| '</div>' | |
| ) | |
| search_btn = gr.Button( | |
| "⚡ Search Jobs on NaukriGulf", | |
| elem_id="search-btn", | |
| variant="primary", | |
| ) | |
| result_banner = gr.HTML( | |
| value=SUCCESS_BANNER_HTML, | |
| visible=False, | |
| ) | |
| gr.HTML('<div id="results-panel"><div class="section-divider"><span>Live Results</span></div>') | |
| jobs_out = gr.Markdown(value="_Enter a job title above and hit Search to begin._") | |
| gr.HTML('</div>') | |
| # ════════════════════════════════════════ | |
| # TAB 2 — RESUME SCORING | |
| # ════════════════════════════════════════ | |
| with gr.Tab("📄 Resume Scorer"): | |
| with gr.Group(elem_id="resume-panel"): | |
| gr.HTML('<div class="section-divider"><span>Upload Resume</span></div>') | |
| gr.HTML( | |
| '<p style="font-family:\'DM Sans\',sans-serif;font-size:14px;color:#6b6b8a;margin:0 0 20px;line-height:1.6;">' | |
| 'First run a <strong style="color:#f5c842;">Job Search</strong>, then upload your resume to see ' | |
| 'how well you match each listing — scored 0–100 by AI.' | |
| '</p>' | |
| ) | |
| resume_upload = gr.File( | |
| label="Upload Resume (PDF or TXT)", | |
| file_types=[".pdf", ".txt"], | |
| type="filepath", | |
| ) | |
| score_btn = gr.Button( | |
| "⚡ Score My Resume Against Jobs", | |
| elem_id="score-btn", | |
| variant="primary", | |
| ) | |
| score_banner = gr.HTML( | |
| value=SCORE_BANNER_HTML, | |
| visible=False, | |
| ) | |
| gr.HTML('<div id="score-panel"><div class="section-divider"><span>Match Analysis</span></div>') | |
| score_out = gr.Markdown( | |
| value="_Upload your resume and click Score after running a job search._" | |
| ) | |
| gr.HTML('</div>') | |
| gr.HTML(FOOTER_HTML) | |
| # ── Wire Job Search ─────────────────────────────────────────── | |
| search_btn.click( | |
| fn=run_job_search, | |
| inputs=[job_title, location, firecrawl_key_input, openai_key_input], | |
| outputs=[jobs_out, result_banner], | |
| show_progress="full", | |
| ) | |
| # ── Wire Resume Scoring ─────────────────────────────────────── | |
| score_btn.click( | |
| fn=run_resume_scoring, | |
| inputs=[resume_upload, openai_key_input], | |
| outputs=[score_out, score_banner], | |
| show_progress="full", | |
| ) | |
| # ══════════════════════════════════ | |
| # LAUNCH | |
| # ══════════════════════════════════ | |
| if __name__ == "__main__": | |
| demo.launch() |