""" 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"""
Placement Score
{score}%
{level}
""" # ── Info Row ── html += f"""
Domain
{domain}
Role
{role}
""" # ── Component Breakdown ── breakdown = result.get("component_breakdown", []) excluded_names = {e["component"] for e in result.get("excluded_components", [])} html += '

📊 Component Breakdown

' html += '' 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} ⊘ excluded' if excluded else name weight_pct = f"{total * 100:.1f}%" score_pct = f"{achieved * 100:.1f}%" bar = f"""
""" opacity = "opacity: 0.4;" if excluded else "" html += f'' html += '
ComponentWeightScoreProgress
{label}{weight_pct}{score_pct}{bar}
' # ── 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 += '

🎯 Skills Analysis

' html += f'

{matched_ct}/{total_ct} JD skills matched

' if missing: html += '

Missing skills:

' for skill in missing: html += f'{skill}' html += '
' else: html += '

✓ All required skills matched!

' html += '
' # ── Improvement Suggestions ── suggestions = result.get("improvement_suggestions", []) if suggestions: html += '

📈 Improvement Suggestions

' for s in suggestions[:8]: html += f"""
#{s['rank']} {s['improvement']} {s['score_change']}  {s['delta']}
""" comb = result.get("combined_improvement", {}) if comb and comb.get("combined_delta", 0) > 0: html += f"""
Combined potential: {comb['current_score']}% → {comb['combined_new_score']}% (+{comb['combined_delta']}%)
""" html += '
' # ── Recommendations ── recs = result.get("recommendations", []) if recs: html += '

💡 Recommendations

' for rec in recs: html += f'
→{rec}
' html += '
' return html def render_error(error_msg: str, tb: str = "") -> str: """Render an error message as styled HTML.""" html = f'

⚠ Error

{error_msg}

' if tb: html += f'
Technical Details
{tb}
' html += '
' 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("""

🎓 CPPS

Campus Placement Prediction System — AI-Powered Resume Analyzer

""", 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="""

🎓

Ready to Analyze

Upload a resume and paste a job description to get started

""", 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, )