Hugging Face's logo

Spaces:
deepakpro
/
resumeranker-pro
Running

App Files Community
resumeranker-pro
File size: 5,918 Bytes 
21cb660
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f391f76
3ea2894
21cb660
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f391f76
 
 
 
21cb660
 
 
 
 
f391f76
 
21cb660
f391f76
21cb660
 
 
 
 
 
 
 
 
 
 
f391f76
 
3ea2894
21cb660
 
 
 
 
 
 
 
f391f76
 
3ea2894
21cb660
 
 
 
 
 
 
 
f391f76
 
 
21cb660
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3ea2894
f391f76
 
21cb660
f391f76
 
21cb660
f391f76
 
 
3ea2894
21cb660
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ResumeRanker Pro 🌟</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .hero-section {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            padding: 5rem 0;
            border-radius: 0 0 20px 20px;
        }
        .upload-container {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-top: -3rem;
        }
        .feature-icon {
            font-size: 2.5rem;
            color: #6e8efb;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <div class="hero-section text-center">
        <div class="container">
            <h1 class="display-4 fw-bold mb-3">ResumeRanker Pro 🌟</h1>
            <p class="lead mb-4">Advanced NLP and Decision Tree-powered resume classification for student talent evaluation</p>
</div>
    </div>

    <div class="container">
        <div class="upload-container">
            <h2 class="text-center mb-4">Upload Resume</h2>
            <div class="d-flex justify-content-center">
                <div class="text-center">
                    <div class="mb-3">
                        <input type="file" class="form-control" id="resumeUpload" accept=".pdf,.doc,.docx,.txt">
                    </div>
                    <button class="btn btn-primary btn-lg" id="analyzeBtn">
                        <i class="fas fa-magic me-2"></i> Analyze Resume
                    </button>
                </div>
            </div>
        </div>

        <div class="row mt-5" id="resultsSection" style="display: none;">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h3 class="card-title"><i class="fas fa-tag me-2"></i>Job Category Prediction</h3>
                        <p class="text-muted small mb-2">Categories: Web Developer, Data Analyst, AI/ML Specialist, Core Engineer</p>
                        <div class="mt-3" id="categoryResult"></div>
</div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h3 class="card-title"><i class="fas fa-star me-2"></i>Key Skill Extraction</h3>
                        <p class="text-muted small mb-2">NLP-identified top 3 most relevant skills</p>
                        <div class="mt-3" id="skillsResult"></div>
</div>
                </div>
            </div>
        </div>

        <div class="row mt-5 mb-5">
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon">
                            <i class="fas fa-brain"></i>
                        </div>
                        <h4>NLP + Decision Tree</h4>
                        <p>TF-IDF features with Decision Tree model for classification</p>
</div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <h4>Student Focused</h4>
                        <p>Optimized for analyzing student resumes and early-career profiles</p>
</div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <h4>4-Category System</h4>
                        <p>Classifies into Web, Data, AI/ML or Core engineering roles</p>
</div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-light py-4 mt-5">
        <div class="container text-center">
            <p class="mb-0">© 2023 ResumeRanker Pro 🌟 - AI Resume Classification System</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('analyzeBtn').addEventListener('click', function() {
            // Simulate analysis
            document.getElementById('resultsSection').style.display = 'block';
            document.getElementById('categoryResult').innerHTML = `
                <div class="alert alert-success">
                    <h4 class="alert-heading">AI/ML Specialist</h4>
                    <p class="mb-1"><strong>Confidence:</strong> 86%</p>
                    <p>This profile shows strong machine learning and data science competencies.</p>
                </div>
            `;
document.getElementById('skillsResult').innerHTML = `
                <div class="d-flex flex-wrap gap-2">
                    <span class="badge bg-primary p-2">Python (92%)</span>
                    <span class="badge bg-primary p-2">TensorFlow (87%)</span>
                    <span class="badge bg-primary p-2">NLP (84%)</span>
</div>
            `;
            
            // Scroll to results
            document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' });
        });
    </script>
</body>
</html>