app.py

"""
CPPS Gradio App — Campus Placement Prediction System UI.

Upload a resume (PDF/DOCX) and paste a Job Description to get:
- Placement Score with match level
- Component breakdown (6 MW-ESE components)
- Improvement suggestions ranked by impact
- Actionable recommendations
"""

import gradio as gr
import traceback
import base64
import os
from app_logic import predict


# ── Background image → base64 data URI ───────────────────────────────────
# Encode bg.jpg once at import time so it works on HF Spaces without
# needing allowed_paths (the SDK launcher doesn't use our launch() call).

_bg_dir = os.path.dirname(os.path.abspath(__file__))
_bg_uri = ""
for _name in ("bg.jpg", "bg.png"):
    _path = os.path.join(_bg_dir, _name)
    if os.path.exists(_path):
        with open(_path, "rb") as _f:
            _ext = "jpeg" if _name.endswith(".jpg") else "png"
            _bg_uri = f"data:image/{_ext};base64,{base64.b64encode(_f.read()).decode()}"
        break


# ── Theme & CSS ──────────────────────────────────────────────────────────

CUSTOM_CSS = """
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

* { font-family: 'Inter', sans-serif !important; }

/* ── Full-page background image ── */
body, .main, .app {
    background-image: url('__BG_URL__') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

.gradio-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    background: rgba(15, 12, 41, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-left: 1px solid rgba(99, 102, 241, 0.1);
    border-right: 1px solid rgba(99, 102, 241, 0.1);
    min-height: 100vh;
}

/* ── Header ── */
.app-header {
    text-align: center;
    padding: 2rem 1rem 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.12) 100%);
    border-radius: 16px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    margin-bottom: 1.5rem;
}
.app-header h1 {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #818cf8, #c084fc, #f472b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 0.3rem;
}
.app-header p {
    color: #94a3b8;
    font-size: 0.95rem;
    margin: 0;
}

/* ── Score Card ── */
.score-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(12px);
}
.score-value {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    margin: 0.5rem 0;
}
.score-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}
.match-badge {
    display: inline-block;
    padding: 0.35rem 1.2rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-top: 0.5rem;
}
.badge-excellent { background: rgba(52, 211, 153, 0.2); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); }
.badge-good { background: rgba(96, 165, 250, 0.2); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.3); }
.badge-moderate { background: rgba(251, 191, 36, 0.2); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); }
.badge-below { background: rgba(251, 146, 60, 0.2); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.3); }
.badge-poor { background: rgba(248, 113, 113, 0.2); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.3); }

/* ── Section Card ── */
.section-card {
    background: rgba(30, 30, 60, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(8px);
}
.section-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #c4b5fd;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Breakdown Table ── */
.breakdown-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
}
.breakdown-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}
.breakdown-table td {
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
    color: #e2e8f0;
    background: rgba(99, 102, 241, 0.05);
    border-top: 1px solid rgba(99, 102, 241, 0.08);
    border-bottom: 1px solid rgba(99, 102, 241, 0.08);
}
.breakdown-table tr td:first-child { border-left: 1px solid rgba(99, 102, 241, 0.08); border-radius: 8px 0 0 8px; }
.breakdown-table tr td:last-child { border-right: 1px solid rgba(99, 102, 241, 0.08); border-radius: 0 8px 8px 0; }

/* ── Progress bar ── */
.progress-bar-bg {
    background: rgba(99, 102, 241, 0.1);
    border-radius: 6px;
    height: 8px;
    width: 100%;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
}

/* ── Skill tags ── */
.skill-tag {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    margin: 0.2rem;
}
.skill-missing { background: rgba(248, 113, 113, 0.15); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.2); }
.skill-matched { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; border: 1px solid rgba(52, 211, 153, 0.2); }

/* ── Improvement row ── */
.imp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.75rem;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 0.88rem;
    color: #e2e8f0;
}
.imp-delta {
    font-weight: 700;
    color: #34d399;
    white-space: nowrap;
}

/* ── Recommendation pill ── */
.rec-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: #cbd5e1;
    font-size: 0.9rem;
}
.rec-bullet {
    color: #818cf8;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Info cards row ── */
.info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.info-card {
    background: rgba(30, 30, 60, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    padding: 1.2rem;
    text-align: center;
}
.info-card .label { font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; }
.info-card .value { font-size: 1.5rem; font-weight: 700; color: #c4b5fd; margin-top: 0.3rem; }

/* ── Error ── */
.error-card {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    color: #f1f5f9;
}
.error-card h3 { color: #ffffff; margin: 0 0 0.5rem; }
.error-card pre { color: #e2e8f0; font-size: 0.8rem; white-space: pre-wrap; }

/* ── Gradio overrides ── */
footer { display: none !important; }
"""

# Inject the base64 background image URI into the CSS
CUSTOM_CSS = CUSTOM_CSS.replace("__BG_URL__", _bg_uri)

THEME = gr.themes.Base(
    primary_hue=gr.themes.colors.indigo,
    secondary_hue=gr.themes.colors.purple,
    neutral_hue=gr.themes.colors.slate,
    font=gr.themes.GoogleFont("Inter"),
)


# ── HTML Rendering ───────────────────────────────────────────────────────

def _score_color(score: float) -> str:
    if score >= 85: return "#34d399"
    if score >= 70: return "#60a5fa"
    if score >= 50: return "#fbbf24"
    if score >= 30: return "#fb923c"
    return "#f87171"


def _badge_class(level: str) -> str:
    level_map = {
        "EXCELLENT": "badge-excellent",
        "GOOD": "badge-good",
        "MODERATE": "badge-moderate",
        "BELOW AVERAGE": "badge-below",
        "POOR": "badge-poor",
    }
    return level_map.get(level, "badge-poor")


def _bar_color(pct: float) -> str:
    if pct >= 70: return "linear-gradient(90deg, #34d399, #6ee7b7)"
    if pct >= 40: return "linear-gradient(90deg, #fbbf24, #fcd34d)"
    return "linear-gradient(90deg, #f87171, #fca5a5)"


def render_results(result: dict) -> str:
    """Render pipeline result dict as styled HTML."""
    score = result["placement_score"]
    level = result["match_level"]
    domain = result.get("domain_detected", "unknown").replace("_", " ").title()
    role = result.get("role_title", "Not Specified")
    color = _score_color(score)

    # ── Score Card ──
    html = f"""
    <div class="score-card">
        <div class="score-label">Placement Score</div>
        <div class="score-value" style="color: {color}">{score}%</div>
        <div class="match-badge {_badge_class(level)}">{level}</div>
    </div>
    """

    # ── Info Row ──
    html += f"""
    <div class="info-row">
        <div class="info-card">
            <div class="label">Domain</div>
            <div class="value">{domain}</div>
        </div>
        <div class="info-card">
            <div class="label">Role</div>
            <div class="value" style="font-size: 1.1rem">{role}</div>
        </div>
    </div>
    """

    # ── Component Breakdown ──
    breakdown = result.get("component_breakdown", [])
    excluded_names = {e["component"] for e in result.get("excluded_components", [])}
    html += '<div class="section-card"><h3>📊 Component Breakdown</h3>'
    html += '<table class="breakdown-table"><tr><th>Component</th><th>Weight</th><th>Score</th><th>Progress</th></tr>'
    for item in breakdown:
        name = item["component"]
        total = item["total_score"]
        achieved = item["score_achieved"]
        pct = (achieved / total * 100) if total > 0 else 0
        excluded = name in excluded_names
        label = f'{name} <span style="color:#64748b;font-size:0.75rem">⊘ excluded</span>' if excluded else name
        weight_pct = f"{total * 100:.1f}%"
        score_pct = f"{achieved * 100:.1f}%"
        bar = f"""<div class="progress-bar-bg"><div class="progress-bar-fill" style="width:{min(pct,100):.0f}%;background:{_bar_color(pct)}"></div></div>"""
        opacity = "opacity: 0.4;" if excluded else ""
        html += f'<tr style="{opacity}"><td>{label}</td><td>{weight_pct}</td><td>{score_pct}</td><td style="min-width:120px">{bar}</td></tr>'
    html += '</table></div>'

    # ── Skills Analysis ──
    sa = result.get("skills_analysis", {})
    matched_ct = sa.get("matched_count", 0)
    total_ct = sa.get("total_jd_count", 0)
    missing = sa.get("missing_skills", [])
    html += '<div class="section-card"><h3>🎯 Skills Analysis</h3>'
    html += f'<p style="color:#94a3b8;margin:0 0 0.8rem"><strong style="color:#e2e8f0">{matched_ct}/{total_ct}</strong> JD skills matched</p>'
    if missing:
        html += '<p style="color:#94a3b8;font-size:0.8rem;margin:0 0 0.5rem">Missing skills:</p><div>'
        for skill in missing:
            html += f'<span class="skill-tag skill-missing">{skill}</span>'
        html += '</div>'
    else:
        html += '<p style="color:#34d399">✓ All required skills matched!</p>'
    html += '</div>'

    # ── Improvement Suggestions ──
    suggestions = result.get("improvement_suggestions", [])
    if suggestions:
        html += '<div class="section-card"><h3>📈 Improvement Suggestions</h3>'
        for s in suggestions[:8]:
            html += f"""<div class="imp-row">
                <span>#{s['rank']} {s['improvement']}</span>
                <span><span style="color:#94a3b8;font-size:0.8rem">{s['score_change']}</span> &nbsp;<span class="imp-delta">{s['delta']}</span></span>
            </div>"""

        comb = result.get("combined_improvement", {})
        if comb and comb.get("combined_delta", 0) > 0:
            html += f"""<div style="margin-top:0.8rem;padding:0.8rem;background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.2);border-radius:8px;text-align:center">
                <span style="color:#94a3b8;font-size:0.85rem">Combined potential: </span>
                <strong style="color:#34d399;font-size:1.1rem">{comb['current_score']}% → {comb['combined_new_score']}%</strong>
                <span style="color:#34d399;font-weight:700"> (+{comb['combined_delta']}%)</span>
            </div>"""
        html += '</div>'

    # ── Recommendations ──
    recs = result.get("recommendations", [])
    if recs:
        html += '<div class="section-card"><h3>💡 Recommendations</h3>'
        for rec in recs:
            html += f'<div class="rec-item"><span class="rec-bullet">→</span><span>{rec}</span></div>'
        html += '</div>'

    return html


def render_error(error_msg: str, tb: str = "") -> str:
    """Render an error message as styled HTML."""
    html = f'<div class="error-card"><h3>⚠ Error</h3><p>{error_msg}</p>'
    if tb:
        html += f'<details><summary style="cursor:pointer;color:#ffffff;margin-top:0.5rem">Technical Details</summary><pre>{tb}</pre></details>'
    html += '</div>'
    return html


# ── Gradio Handler ───────────────────────────────────────────────────────

def analyze(resume_file, jd_text):
    try:
        if resume_file is None:
            return render_error("Please upload a resume file (PDF or DOCX).")
        if not jd_text or not jd_text.strip():
            return render_error("Please paste a job description.")

        file_path = resume_file.name if hasattr(resume_file, "name") else str(resume_file)
        result = predict(file_path, jd_text)
        return render_results(result)

    except Exception as e:
        tb = traceback.format_exc()
        return render_error(str(e), tb)


# ── Build Gradio App ─────────────────────────────────────────────────────
# Gradio 6: theme/css moved from gr.Blocks() constructor to app.launch()

with gr.Blocks(
    title="CPPS — Campus Placement Prediction System",
) as app:

    # Header
    gr.HTML("""
    <div class="app-header">
        <h1>🎓 CPPS</h1>
        <p>Campus Placement Prediction System — AI-Powered Resume Analyzer</p>
    </div>
    """, padding=False)

    with gr.Row(equal_height=False):
        # Left Column: Inputs
        with gr.Column(scale=2):
            resume_input = gr.File(
                label="📄 Upload Resume",
                file_types=[".pdf", ".docx"],
                type="filepath",
                elem_id="resume-upload",
            )
            jd_input = gr.Textbox(
                label="📋 Job Description",
                placeholder="Paste the full job description here...\n\nExample:\nSoftware Developer\n\nRequired Skills:\n- Python\n- SQL\n- Flask\n- REST APIs\n\n2+ years of experience\nB.Tech in Computer Science",
                lines=12,
                max_lines=25,
                elem_id="jd-input",
            )
            analyze_btn = gr.Button(
                "🔍  Analyze Match",
                variant="primary",
                size="lg",
                elem_id="analyze-btn",
            )

        # Right Column: Results
        with gr.Column(scale=3):
            output_html = gr.HTML(
                value="""
                <div style="text-align:center;padding:4rem 2rem;color:#64748b">
                    <p style="font-size:3rem;margin:0">🎓</p>
                    <p style="font-size:1.1rem;margin:0.5rem 0 0.3rem;color:#94a3b8">Ready to Analyze</p>
                    <p style="font-size:0.85rem">Upload a resume and paste a job description to get started</p>
                </div>
                """,
                padding=False,
                elem_id="results-output",
            )

    # Wire up
    analyze_btn.click(
        fn=analyze,
        inputs=[resume_input, jd_input],
        outputs=[output_html],
    )

    # Also trigger on Enter in JD box (submit event)
    jd_input.submit(
        fn=analyze,
        inputs=[resume_input, jd_input],
        outputs=[output_html],
    )


# ── Launch ───────────────────────────────────────────────────────────────
# Gradio 6: theme and css are passed to launch(), not gr.Blocks()

if __name__ == "__main__":
    app.launch(
        server_name="0.0.0.0",
        server_port=7860,
        theme=THEME,
        css=CUSTOM_CSS,
    )