initial commit

Dockerfile

@@ -0,0 +1,15 @@
+FROM python:3.11-slim
+
+RUN useradd -m -u 1000 user
+ENV HOME=/home/user PATH=/home/user/.local/bin:$PATH
+WORKDIR $HOME/app
+USER user
+
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY --chown=user app/ ./app/
+COPY --chown=user static/ ./static/
+
+EXPOSE 7860
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,32 @@
+---
+title: ResumeForge
+emoji: 📄
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# ResumeForge - AI Resume Optimizer
+
+Upload your resume and a job description to get a tailored PDF resume optimized for the position.
+
+## Features
+
+- **Resume Parsing**: Upload PDF, DOCX, or TXT resumes
+- **AI Optimization**: Uses MiMo V2 Flash via OpenRouter to tailor your resume
+- **Professional Output**: Generates high-quality PDF using LaTeX
+
+## Usage
+
+1. Upload your current resume
+2. Paste the job description you're applying for
+3. Click "Optimize Resume"
+4. Download your tailored PDF
+
+## Configuration
+
+This Space requires the `OPENROUTER_API_KEY` secret to be set in the Space Settings.
+
+Get your free API key at [OpenRouter](https://openrouter.ai).

app/main.py

@@ -0,0 +1,462 @@
+"""
+Resume Optimizer API
+- Parses uploaded resumes (PDF/DOCX/TXT)
+- Uses MiMo V2 Flash via OpenRouter to optimize for job descriptions
+- Compiles to PDF via latex.ytotech.com
+"""
+
+import os
+import re
+import json
+import base64
+import tempfile
+from typing import Optional
+from fastapi import FastAPI, UploadFile, File, Form, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import Response
+from fastapi.staticfiles import StaticFiles
+import httpx
+
+# PDF parsing
+import fitz  # PyMuPDF
+
+app = FastAPI(title="Resume Optimizer API")
+
+# CORS for frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # In production, restrict this
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Configuration
+OPENROUTER_API_KEY = os.getenv("OPENROUTER_API_KEY", "")
+OPENROUTER_URL = "https://openrouter.ai/api/v1/chat/completions"
+LATEX_API_URL = "https://latex.ytotech.com/builds/sync"
+
+# LaTeX Template
+LATEX_TEMPLATE = r"""
+\documentclass[a4paper,10pt]{extarticle}
+
+\usepackage[utf8]{inputenc}
+\usepackage{geometry}
+\geometry{a4paper, margin=0.5in}
+\usepackage{titlesec}
+\usepackage{enumitem}
+\usepackage{hyperref}
+\setlist{noitemsep,leftmargin=*}
+\titleformat{\section}{\Large\bfseries}{\thesection}{1em}{}[\titlerule]
+\titlespacing*{\section}{0pt}{0.5em}{0.5em}
+\pagestyle{empty}
+
+\begin{document}
+
+\begin{center}
+    \textbf{\Large <<NAME>>}\\[2pt]
+    \href{mailto:<<EMAIL>>}{<<EMAIL>>} $|$ \href{<<LINKEDIN_URL>>}{<<LINKEDIN_DISPLAY>>} $|$
+    \href{<<GITHUB_URL>>}{<<GITHUB_DISPLAY>>}
+\end{center}
+
+\section*{EDUCATION}
+<<EDUCATION_CONTENT>>
+
+\section*{EXPERIENCE}
+<<EXPERIENCE_CONTENT>>
+
+\section*{PROJECTS}
+<<PROJECTS_CONTENT>>
+
+\section*{SKILLS}
+<<SKILLS_CONTENT>>
+
+\end{document}
+"""
+
+
+def extract_text_from_pdf(pdf_bytes: bytes) -> str:
+    """Extract text from PDF using PyMuPDF"""
+    doc = fitz.open(stream=pdf_bytes, filetype="pdf")
+    text = ""
+    for page in doc:
+        text += page.get_text()
+    doc.close()
+    return text
+
+
+def extract_text_from_file(content: bytes, filename: str) -> str:
+    """Extract text based on file type"""
+    ext = filename.lower().split('.')[-1]
+
+    if ext == 'pdf':
+        return extract_text_from_pdf(content)
+    elif ext == 'txt':
+        return content.decode('utf-8', errors='ignore')
+    elif ext in ['doc', 'docx']:
+        # For simplicity, try to extract as text
+        # In production, use python-docx
+        return content.decode('utf-8', errors='ignore')
+    else:
+        return content.decode('utf-8', errors='ignore')
+
+
+def escape_latex(text: str) -> str:
+    """Escape special LaTeX characters"""
+    replacements = [
+        ('\\', r'\textbackslash{}'),
+        ('&', r'\&'),
+        ('%', r'\%'),
+        ('$', r'\$'),
+        ('#', r'\#'),
+        ('_', r'\_'),
+        ('{', r'\{'),
+        ('}', r'\}'),
+        ('~', r'\textasciitilde{}'),
+        ('^', r'\textasciicircum{}'),
+    ]
+    for old, new in replacements:
+        if old != '\\':  # Handle backslash separately
+            text = text.replace(old, new)
+    return text
+
+
+async def call_openrouter(prompt: str, system_prompt: str) -> str:
+    """Call OpenRouter API with MiMo V2 Flash"""
+
+    if not OPENROUTER_API_KEY:
+        raise HTTPException(status_code=500, detail="OPENROUTER_API_KEY not configured")
+
+    async with httpx.AsyncClient(timeout=120.0) as client:
+        response = await client.post(
+            OPENROUTER_URL,
+            headers={
+                "Authorization": f"Bearer {OPENROUTER_API_KEY}",
+                "Content-Type": "application/json",
+                "HTTP-Referer": "https://resume-optimizer.app",
+            },
+            json={
+                "model": "moonshotai/mimo-7b-rl:free",
+                "messages": [
+                    {"role": "system", "content": system_prompt},
+                    {"role": "user", "content": prompt}
+                ],
+                "max_tokens": 4000,
+                "temperature": 0.3,
+            }
+        )
+
+        if response.status_code != 200:
+            raise HTTPException(
+                status_code=response.status_code,
+                detail=f"OpenRouter API error: {response.text}"
+            )
+
+        data = response.json()
+        return data["choices"][0]["message"]["content"]
+
+
+async def compile_latex(latex_content: str) -> bytes:
+    """Compile LaTeX to PDF using latex.ytotech.com"""
+
+    async with httpx.AsyncClient(timeout=60.0) as client:
+        response = await client.post(
+            LATEX_API_URL,
+            json={
+                "compiler": "pdflatex",
+                "resources": [
+                    {"main": True, "content": latex_content}
+                ]
+            }
+        )
+
+        if response.status_code != 200:
+            raise HTTPException(
+                status_code=500,
+                detail=f"LaTeX compilation failed: {response.text}"
+            )
+
+        return response.content
+
+
+SYSTEM_PROMPT = """You are an expert resume optimizer. Your task is to optimize a resume for a specific job description.
+
+IMPORTANT RULES:
+1. Keep all information TRUTHFUL - do not fabricate experiences, skills, or achievements
+2. Reorder and emphasize existing experiences that are most relevant to the job
+3. Rephrase bullet points to use keywords from the job description where applicable
+4. Quantify achievements where possible (if numbers already exist, keep them)
+5. Make the language more impactful using strong action verbs
+6. Ensure the skills section highlights the most relevant skills for the job
+
+You must respond with a JSON object containing these fields:
+{
+    "name": "Full Name",
+    "email": "email@example.com",
+    "linkedin_url": "https://linkedin.com/in/username",
+    "linkedin_display": "linkedin.com/in/username",
+    "github_url": "https://github.com/username",
+    "github_display": "github.com/username",
+    "education": [
+        {
+            "institution": "University Name",
+            "expected": "Expected May 2028",
+            "degree": "B.S. in Engineering",
+            "coursework": "Course 1, Course 2, Course 3",
+            "honors": "Honor 1, Honor 2"
+        }
+    ],
+    "experience": [
+        {
+            "company": "Company Name",
+            "department": "Department (optional, can be empty)",
+            "location": "City, State",
+            "role": "Job Title",
+            "dates": "Month Year – Month Year",
+            "bullets": [
+                "Achievement bullet 1 with metrics",
+                "Achievement bullet 2 with impact"
+            ]
+        }
+    ],
+    "projects": [
+        {
+            "name": "Project Name",
+            "technologies": "Tech1, Tech2, Tech3",
+            "location": "City, State",
+            "role": "Developer",
+            "dates": "Month Year – Month Year",
+            "bullets": [
+                "What you built and its impact",
+                "Technical details and results"
+            ]
+        }
+    ],
+    "skills": {
+        "technical": "Skill1, Skill2, Skill3",
+        "communication": "Skill1, Skill2"
+    }
+}
+
+Optimize the resume content for the job description while maintaining complete truthfulness.
+Reorder experiences and projects to put the most relevant ones first.
+Return ONLY the JSON object, no additional text."""
+
+
+def build_latex_from_json(data: dict) -> str:
+    """Build LaTeX document from structured JSON data"""
+
+    # Header info
+    name = escape_latex(data.get("name", "Name"))
+    email = data.get("email", "email@example.com")
+    linkedin_url = data.get("linkedin_url", "https://linkedin.com")
+    linkedin_display = data.get("linkedin_display", "linkedin.com")
+    github_url = data.get("github_url", "https://github.com")
+    github_display = data.get("github_display", "github.com")
+
+    # Build education section
+    education_lines = []
+    for edu in data.get("education", []):
+        institution = escape_latex(edu.get("institution", ""))
+        expected = escape_latex(edu.get("expected", ""))
+        degree = escape_latex(edu.get("degree", ""))
+        coursework = escape_latex(edu.get("coursework", ""))
+        honors = escape_latex(edu.get("honors", ""))
+
+        edu_block = f"""\\noindent
+\\textbf{{{institution}}} \\hfill \\textbf{{{expected}}} \\\\
+{degree}
+\\begin{{itemize}}
+    \\item \\textbf{{Coursework: }}{coursework}
+    \\item \\textbf{{Honors:}} {honors}
+\\end{{itemize}}"""
+        education_lines.append(edu_block)
+
+    # Build experience section
+    experience_lines = []
+    for exp in data.get("experience", []):
+        company = escape_latex(exp.get("company", ""))
+        department = exp.get("department", "")
+        location = escape_latex(exp.get("location", ""))
+        role = escape_latex(exp.get("role", ""))
+        dates = escape_latex(exp.get("dates", ""))
+
+        if department:
+            company_line = f"\\textbf{{{company} $|$ {escape_latex(department)}}}"
+        else:
+            company_line = f"\\textbf{{{company}}}"
+
+        bullets = "\n    ".join([f"\\item {escape_latex(b)}" for b in exp.get("bullets", [])])
+
+        exp_block = f"""\\noindent
+{company_line} \\hfill {location} \\\\
+\\textit{{{role}}} \\hfill {dates}
+\\begin{{itemize}}
+    {bullets}
+\\end{{itemize}}"""
+        experience_lines.append(exp_block)
+
+    # Build projects section
+    project_lines = []
+    for proj in data.get("projects", []):
+        name_p = escape_latex(proj.get("name", ""))
+        tech = escape_latex(proj.get("technologies", ""))
+        location = escape_latex(proj.get("location", ""))
+        role = escape_latex(proj.get("role", ""))
+        dates = escape_latex(proj.get("dates", ""))
+
+        bullets = "\n    ".join([f"\\item {escape_latex(b)}" for b in proj.get("bullets", [])])
+
+        proj_block = f"""\\noindent
+\\textbf{{{name_p} $|$ {tech}}} \\hfill {location} \\\\
+\\textit{{{role}}} \\hfill {dates}
+\\begin{{itemize}}
+    {bullets}
+\\end{{itemize}}"""
+        project_lines.append(proj_block)
+
+    # Build skills section
+    skills = data.get("skills", {})
+    technical = escape_latex(skills.get("technical", ""))
+    communication = escape_latex(skills.get("communication", ""))
+
+    skills_content = f"""\\begin{{itemize}}
+    \\item \\textbf{{Technical:}} {technical}
+    \\item \\textbf{{Communication:}} {communication}
+\\end{{itemize}}"""
+
+    # Assemble final LaTeX
+    latex = LATEX_TEMPLATE
+    latex = latex.replace("<<NAME>>", name)
+    latex = latex.replace("<<EMAIL>>", email)
+    latex = latex.replace("<<LINKEDIN_URL>>", linkedin_url)
+    latex = latex.replace("<<LINKEDIN_DISPLAY>>", linkedin_display)
+    latex = latex.replace("<<GITHUB_URL>>", github_url)
+    latex = latex.replace("<<GITHUB_DISPLAY>>", github_display)
+    latex = latex.replace("<<EDUCATION_CONTENT>>", "\n\n".join(education_lines))
+    latex = latex.replace("<<EXPERIENCE_CONTENT>>", "\n\n".join(experience_lines))
+    latex = latex.replace("<<PROJECTS_CONTENT>>", "\n\n".join(project_lines))
+    latex = latex.replace("<<SKILLS_CONTENT>>", skills_content)
+
+    return latex
+
+
+@app.get("/api/")
+async def root():
+    return {"message": "Resume Optimizer API", "status": "running"}
+
+
+@app.get("/api/health")
+async def health():
+    return {"status": "healthy"}
+
+
+@app.post("/api/optimize")
+async def optimize_resume(
+    resume: UploadFile = File(...),
+    job_description: str = Form(...)
+):
+    """
+    Optimize a resume for a specific job description.
+    Returns a compiled PDF.
+    """
+
+    # Read and extract text from resume
+    content = await resume.read()
+    resume_text = extract_text_from_file(content, resume.filename or "resume.pdf")
+
+    if not resume_text.strip():
+        raise HTTPException(status_code=400, detail="Could not extract text from resume")
+
+    # Build prompt for LLM
+    prompt = f"""Here is the original resume:
+
+{resume_text}
+
+Here is the job description to optimize for:
+
+{job_description}
+
+Please optimize this resume for the job description. Return only the JSON object as specified."""
+
+    # Call OpenRouter
+    llm_response = await call_openrouter(prompt, SYSTEM_PROMPT)
+
+    # Parse JSON from response
+    try:
+        # Try to extract JSON from the response
+        json_match = re.search(r'\{[\s\S]*\}', llm_response)
+        if json_match:
+            resume_data = json.loads(json_match.group())
+        else:
+            raise ValueError("No JSON found in response")
+    except (json.JSONDecodeError, ValueError) as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to parse LLM response: {str(e)}\n\nResponse: {llm_response[:500]}"
+        )
+
+    # Build LaTeX from structured data
+    latex_content = build_latex_from_json(resume_data)
+
+    # Compile to PDF
+    pdf_bytes = await compile_latex(latex_content)
+
+    return Response(
+        content=pdf_bytes,
+        media_type="application/pdf",
+        headers={
+            "Content-Disposition": "attachment; filename=optimized_resume.pdf"
+        }
+    )
+
+
+@app.post("/api/optimize-json")
+async def optimize_resume_json(
+    resume: UploadFile = File(...),
+    job_description: str = Form(...)
+):
+    """
+    Optimize a resume and return the structured JSON data (for debugging).
+    """
+
+    content = await resume.read()
+    resume_text = extract_text_from_file(content, resume.filename or "resume.pdf")
+
+    if not resume_text.strip():
+        raise HTTPException(status_code=400, detail="Could not extract text from resume")
+
+    prompt = f"""Here is the original resume:
+
+{resume_text}
+
+Here is the job description to optimize for:
+
+{job_description}
+
+Please optimize this resume for the job description. Return only the JSON object as specified."""
+
+    llm_response = await call_openrouter(prompt, SYSTEM_PROMPT)
+
+    try:
+        json_match = re.search(r'\{[\s\S]*\}', llm_response)
+        if json_match:
+            resume_data = json.loads(json_match.group())
+        else:
+            raise ValueError("No JSON found in response")
+    except (json.JSONDecodeError, ValueError) as e:
+        return {"error": str(e), "raw_response": llm_response}
+
+    return {
+        "optimized_data": resume_data,
+        "latex": build_latex_from_json(resume_data)
+    }
+
+
+# Mount static files LAST so API routes take precedence
+app.mount("/", StaticFiles(directory="static", html=True), name="static")
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,6 @@
+fastapi==0.109.0
+uvicorn[standard]==0.27.0
+python-multipart==0.0.6
+httpx==0.26.0
+PyMuPDF==1.23.8
+aiofiles==23.2.1

static/index.html

@@ -0,0 +1,697 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ResumeForge | AI Resume Optimizer</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=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: #0a0a0b;
+            --bg-secondary: #111113;
+            --bg-tertiary: #1a1a1d;
+            --text-primary: #fafafa;
+            --text-secondary: #a1a1a6;
+            --text-muted: #636366;
+            --accent: #6366f1;
+            --accent-soft: rgba(99, 102, 241, 0.15);
+            --border: #2a2a2d;
+            --success: #22c55e;
+            --error: #ef4444;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            min-height: 100vh;
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+
+        /* Animated gradient background */
+        .bg-gradient {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(ellipse 80% 50% at 20% -20%, rgba(99, 102, 241, 0.15), transparent),
+                radial-gradient(ellipse 60% 40% at 80% 100%, rgba(139, 92, 246, 0.1), transparent);
+            pointer-events: none;
+            z-index: 0;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            position: relative;
+            z-index: 1;
+        }
+
+        /* Header */
+        header {
+            text-align: center;
+            padding: 3rem 0 4rem;
+        }
+
+        .logo {
+            font-family: 'Instrument Serif', Georgia, serif;
+            font-size: 3rem;
+            font-weight: 400;
+            letter-spacing: -0.02em;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .tagline {
+            color: var(--text-secondary);
+            font-size: 1.1rem;
+            font-weight: 300;
+        }
+
+        /* Main Grid */
+        .main-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+        }
+
+        @media (max-width: 900px) {
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        /* Cards */
+        .card {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 1.75rem;
+            transition: all 0.3s ease;
+        }
+
+        .card:hover {
+            border-color: rgba(99, 102, 241, 0.3);
+        }
+
+        .card-title {
+            font-family: 'Instrument Serif', Georgia, serif;
+            font-size: 1.5rem;
+            font-weight: 400;
+            margin-bottom: 0.25rem;
+        }
+
+        .card-subtitle {
+            color: var(--text-muted);
+            font-size: 0.875rem;
+            margin-bottom: 1.5rem;
+        }
+
+        /* File Upload */
+        .upload-zone {
+            border: 2px dashed var(--border);
+            border-radius: 12px;
+            padding: 2.5rem;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: var(--bg-tertiary);
+        }
+
+        .upload-zone:hover,
+        .upload-zone.dragover {
+            border-color: var(--accent);
+            background: var(--accent-soft);
+        }
+
+        .upload-zone.has-file {
+            border-color: var(--success);
+            border-style: solid;
+        }
+
+        .upload-icon {
+            width: 48px;
+            height: 48px;
+            margin: 0 auto 1rem;
+            opacity: 0.5;
+        }
+
+        .upload-text {
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+        }
+
+        .upload-text strong {
+            color: var(--accent);
+        }
+
+        .file-name {
+            color: var(--success);
+            font-weight: 500;
+            margin-top: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+
+        #resume-input {
+            display: none;
+        }
+
+        /* Job Description */
+        .jd-textarea {
+            width: 100%;
+            min-height: 280px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 1rem;
+            color: var(--text-primary);
+            font-family: inherit;
+            font-size: 0.95rem;
+            resize: vertical;
+            transition: all 0.3s ease;
+        }
+
+        .jd-textarea:focus {
+            outline: none;
+            border-color: var(--accent);
+            box-shadow: 0 0 0 3px var(--accent-soft);
+        }
+
+        .jd-textarea::placeholder {
+            color: var(--text-muted);
+        }
+
+        /* Submit Button */
+        .submit-section {
+            margin-top: 2rem;
+            text-align: center;
+        }
+
+        .submit-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 1rem 2.5rem;
+            background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
+            color: white;
+            font-family: inherit;
+            font-size: 1rem;
+            font-weight: 500;
+            border: none;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
+        }
+
+        .submit-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 30px rgba(99, 102, 241, 0.4);
+        }
+
+        .submit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .submit-btn svg {
+            width: 20px;
+            height: 20px;
+        }
+
+        /* Loading State */
+        .loading {
+            display: none;
+            flex-direction: column;
+            align-items: center;
+            gap: 1rem;
+            padding: 3rem;
+        }
+
+        .loading.active {
+            display: flex;
+        }
+
+        .spinner {
+            width: 48px;
+            height: 48px;
+            border: 3px solid var(--border);
+            border-top-color: var(--accent);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .loading-text {
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+        }
+
+        .loading-steps {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            margin-top: 0.5rem;
+        }
+
+        .step {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--text-muted);
+            font-size: 0.85rem;
+        }
+
+        .step.active {
+            color: var(--accent);
+        }
+
+        .step.done {
+            color: var(--success);
+        }
+
+        /* Result */
+        .result {
+            display: none;
+            text-align: center;
+            padding: 2rem;
+        }
+
+        .result.active {
+            display: block;
+        }
+
+        .success-icon {
+            width: 64px;
+            height: 64px;
+            margin: 0 auto 1rem;
+            color: var(--success);
+        }
+
+        .result h3 {
+            font-family: 'Instrument Serif', Georgia, serif;
+            font-size: 1.75rem;
+            font-weight: 400;
+            margin-bottom: 0.5rem;
+        }
+
+        .result p {
+            color: var(--text-secondary);
+            margin-bottom: 1.5rem;
+        }
+
+        .download-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.875rem 2rem;
+            background: var(--success);
+            color: white;
+            font-family: inherit;
+            font-size: 1rem;
+            font-weight: 500;
+            border: none;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+        }
+
+        .download-btn:hover {
+            background: #16a34a;
+            transform: translateY(-2px);
+        }
+
+        .reset-btn {
+            display: inline-block;
+            margin-top: 1rem;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+
+        .reset-btn:hover {
+            color: var(--text-primary);
+        }
+
+        /* Error */
+        .error-message {
+            display: none;
+            background: rgba(239, 68, 68, 0.1);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            border-radius: 12px;
+            padding: 1rem;
+            color: var(--error);
+            margin-top: 1rem;
+        }
+
+        .error-message.active {
+            display: block;
+        }
+
+        /* Footer */
+        footer {
+            text-align: center;
+            padding: 3rem 0;
+            color: var(--text-muted);
+            font-size: 0.85rem;
+        }
+
+        footer a {
+            color: var(--text-secondary);
+            text-decoration: none;
+        }
+
+        footer a:hover {
+            color: var(--accent);
+        }
+    </style>
+</head>
+<body>
+    <div class="bg-gradient"></div>
+
+    <div class="container">
+        <header>
+            <h1 class="logo">ResumeForge</h1>
+            <p class="tagline">AI-powered resume optimization for your dream job</p>
+        </header>
+
+        <form id="optimize-form">
+            <div class="main-grid">
+                <div class="card">
+                    <h2 class="card-title">Your Resume</h2>
+                    <p class="card-subtitle">Upload your current resume (PDF, DOCX, or TXT)</p>
+
+                    <div class="upload-zone" id="upload-zone">
+                        <svg class="upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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"/>
+                        </svg>
+                        <p class="upload-text">
+                            <strong>Click to upload</strong> or drag and drop<br>
+                            PDF, DOCX, or TXT (max 10MB)
+                        </p>
+                        <p class="file-name" id="file-name" style="display: none;">
+                            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+                            </svg>
+                            <span></span>
+                        </p>
+                    </div>
+                    <input type="file" id="resume-input" name="resume" accept=".pdf,.doc,.docx,.txt">
+                </div>
+
+                <div class="card">
+                    <h2 class="card-title">Job Description</h2>
+                    <p class="card-subtitle">Paste the job posting you're applying for</p>
+
+                    <textarea
+                        class="jd-textarea"
+                        id="job-description"
+                        name="job_description"
+                        placeholder="Paste the full job description here...
+
+Include:
+• Job title and company
+• Required qualifications
+• Preferred skills
+• Responsibilities
+• Any specific keywords or technologies mentioned"
+                    ></textarea>
+                </div>
+            </div>
+
+            <div class="submit-section" id="submit-section">
+                <button type="submit" class="submit-btn" id="submit-btn" disabled>
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+                    </svg>
+                    Optimize Resume
+                </button>
+            </div>
+
+            <div class="error-message" id="error-message"></div>
+        </form>
+
+        <div class="loading" id="loading">
+            <div class="spinner"></div>
+            <p class="loading-text">Optimizing your resume...</p>
+            <div class="loading-steps">
+                <div class="step" id="step-1">
+                    <span>○</span> Analyzing your resume
+                </div>
+                <div class="step" id="step-2">
+                    <span>○</span> Matching with job description
+                </div>
+                <div class="step" id="step-3">
+                    <span>○</span> Generating optimized content
+                </div>
+                <div class="step" id="step-4">
+                    <span>○</span> Compiling PDF
+                </div>
+            </div>
+        </div>
+
+        <div class="result" id="result">
+            <svg class="success-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            <h3>Resume Optimized!</h3>
+            <p>Your tailored resume is ready to download.</p>
+            <a href="#" class="download-btn" id="download-btn">
+                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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"/>
+                </svg>
+                Download PDF
+            </a>
+            <p class="reset-btn" id="reset-btn">← Optimize another resume</p>
+        </div>
+
+        <footer>
+            <p>
+                Built with FastAPI + latex.ytotech.com<br>
+                Powered by <a href="https://openrouter.ai" target="_blank">OpenRouter</a> (MiMo V2 Flash)<br>
+                Deployed on <a href="https://huggingface.co/spaces" target="_blank">Hugging Face Spaces</a>
+            </p>
+        </footer>
+    </div>
+
+    <script>
+        // Elements
+        const form = document.getElementById('optimize-form');
+        const uploadZone = document.getElementById('upload-zone');
+        const resumeInput = document.getElementById('resume-input');
+        const fileNameEl = document.getElementById('file-name');
+        const jobDescription = document.getElementById('job-description');
+        const submitBtn = document.getElementById('submit-btn');
+        const submitSection = document.getElementById('submit-section');
+        const loading = document.getElementById('loading');
+        const result = document.getElementById('result');
+        const errorMessage = document.getElementById('error-message');
+        const downloadBtn = document.getElementById('download-btn');
+        const resetBtn = document.getElementById('reset-btn');
+
+        // State
+        let selectedFile = null;
+        let pdfBlob = null;
+
+        // File upload handling
+        uploadZone.addEventListener('click', () => resumeInput.click());
+
+        uploadZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadZone.classList.add('dragover');
+        });
+
+        uploadZone.addEventListener('dragleave', () => {
+            uploadZone.classList.remove('dragover');
+        });
+
+        uploadZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadZone.classList.remove('dragover');
+            const file = e.dataTransfer.files[0];
+            if (file) handleFileSelect(file);
+        });
+
+        resumeInput.addEventListener('change', (e) => {
+            if (e.target.files[0]) {
+                handleFileSelect(e.target.files[0]);
+            }
+        });
+
+        function handleFileSelect(file) {
+            const validTypes = ['application/pdf', 'application/msword',
+                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+                'text/plain'];
+
+            if (!validTypes.includes(file.type) && !file.name.match(/\.(pdf|doc|docx|txt)$/i)) {
+                showError('Please upload a PDF, DOCX, or TXT file.');
+                return;
+            }
+
+            if (file.size > 10 * 1024 * 1024) {
+                showError('File size must be less than 10MB.');
+                return;
+            }
+
+            selectedFile = file;
+            uploadZone.classList.add('has-file');
+            fileNameEl.style.display = 'flex';
+            fileNameEl.querySelector('span').textContent = file.name;
+            updateSubmitButton();
+        }
+
+        // Job description handling
+        jobDescription.addEventListener('input', updateSubmitButton);
+
+        function updateSubmitButton() {
+            const hasFile = selectedFile !== null;
+            const hasJD = jobDescription.value.trim().length > 50;
+            submitBtn.disabled = !(hasFile && hasJD);
+        }
+
+        // Form submission
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            hideError();
+            submitSection.style.display = 'none';
+            form.style.display = 'none';
+            loading.classList.add('active');
+
+            // Simulate progress steps
+            const steps = ['step-1', 'step-2', 'step-3', 'step-4'];
+            let currentStep = 0;
+
+            const stepInterval = setInterval(() => {
+                if (currentStep > 0) {
+                    document.getElementById(steps[currentStep - 1]).classList.remove('active');
+                    document.getElementById(steps[currentStep - 1]).classList.add('done');
+                    document.getElementById(steps[currentStep - 1]).querySelector('span').textContent = '✓';
+                }
+                if (currentStep < steps.length) {
+                    document.getElementById(steps[currentStep]).classList.add('active');
+                    document.getElementById(steps[currentStep]).querySelector('span').textContent = '◉';
+                    currentStep++;
+                }
+            }, 2000);
+
+            try {
+                const formData = new FormData();
+                formData.append('resume', selectedFile);
+                formData.append('job_description', jobDescription.value);
+
+                const response = await fetch('/api/optimize', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                clearInterval(stepInterval);
+
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    throw new Error(errorText || 'Failed to optimize resume');
+                }
+
+                pdfBlob = await response.blob();
+
+                // Mark all steps as done
+                steps.forEach(stepId => {
+                    const step = document.getElementById(stepId);
+                    step.classList.remove('active');
+                    step.classList.add('done');
+                    step.querySelector('span').textContent = '✓';
+                });
+
+                setTimeout(() => {
+                    loading.classList.remove('active');
+                    result.classList.add('active');
+                }, 500);
+
+            } catch (error) {
+                clearInterval(stepInterval);
+                loading.classList.remove('active');
+                form.style.display = 'block';
+                submitSection.style.display = 'block';
+                showError(error.message);
+
+                // Reset steps
+                steps.forEach(stepId => {
+                    const step = document.getElementById(stepId);
+                    step.classList.remove('active', 'done');
+                    step.querySelector('span').textContent = '○';
+                });
+            }
+        });
+
+        // Download
+        downloadBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (pdfBlob) {
+                const url = URL.createObjectURL(pdfBlob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'optimized_resume.pdf';
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            }
+        });
+
+        // Reset
+        resetBtn.addEventListener('click', () => {
+            result.classList.remove('active');
+            form.style.display = 'block';
+            submitSection.style.display = 'block';
+
+            // Reset form
+            selectedFile = null;
+            pdfBlob = null;
+            uploadZone.classList.remove('has-file');
+            fileNameEl.style.display = 'none';
+            jobDescription.value = '';
+            updateSubmitButton();
+
+            // Reset steps
+            ['step-1', 'step-2', 'step-3', 'step-4'].forEach(stepId => {
+                const step = document.getElementById(stepId);
+                step.classList.remove('active', 'done');
+                step.querySelector('span').textContent = '○';
+            });
+        });
+
+        // Error handling
+        function showError(message) {
+            errorMessage.textContent = message;
+            errorMessage.classList.add('active');
+        }
+
+        function hideError() {
+            errorMessage.classList.remove('active');
+        }
+    </script>
+</body>
+</html>