Upload 8 files

.env

@@ -0,0 +1 @@
+OPENROUTER_API_KEY=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

Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.10
+
+# Install dependencies for wkhtmltopdf
+RUN apt-get update && apt-get install -y \
+    wkhtmltopdf \
+    build-essential \
+    libssl-dev \
+    libffi-dev \
+    python3-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+COPY . /app/
+
+RUN pip install --upgrade pip
+RUN pip install -r requirements.txt
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -1,10 +1,33 @@
----
-title: AI Resume Builder
-emoji: 🏢
-colorFrom: indigo
-colorTo: indigo
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# AI-Powered Resume Builder
+
+A smart resume builder that uses AI to analyze and improve your resume for better ATS compatibility and hiring potential.
+
+## Features
+
+- Drag-and-drop resume sections
+- AI-powered suggestions for improvement
+- ATS-friendly resume generation
+- PDF export functionality
+
+## Technologies Used
+
+- Frontend: HTML5, CSS3, JavaScript
+- Backend: Python (Flask)
+- AI: OpenAI GPT-3.5 API
+- PDF Generation: pdfkit/wkhtmltopdf
+
+## Setup Instructions
+
+1. Clone the repository
+2. Install Python dependencies: `pip install -r requirements.txt`
+3. Set up your OpenAI API key in a `.env` file
+4. Run the application: `python app.py`
+5. Access the app at `http://localhost:5000`
+
+## Deployment
+
+This app can be deployed to:
+- Heroku
+- PythonAnywhere
+- AWS Elastic Beanstalk
+- Google App Engine

app.py

@@ -0,0 +1,131 @@
+from flask import Flask, render_template, request, jsonify
+import os
+from werkzeug.utils import secure_filename
+import pdfkit
+import requests
+import json
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = Flask(__name__)
+
+UPLOAD_FOLDER = 'uploads'
+ALLOWED_EXTENSIONS = {'pdf', 'doc', 'docx'}
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+
+# Linux-compatible wkhtmltopdf path for Hugging Face
+wkhtmltopdf_path = '/usr/bin/wkhtmltopdf'  # Use system path (you'll install this in Dockerfile)
+config = pdfkit.configuration(wkhtmltopdf=wkhtmltopdf_path)
+
+def allowed_file(filename):
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/analyze', methods=['POST'])
+def analyze_resume():
+    data = request.json
+    resume_text = data.get('resume_text', '')
+    
+    api_key = os.getenv('OPENROUTER_API_KEY')
+    if not api_key:
+        return jsonify({"success": False, "error": "API key not configured"})
+    
+    headers = {
+        "Authorization": f"Bearer {api_key}",
+        "HTTP-Referer": "http://localhost:5000",
+        "X-Title": "AI Resume Builder"
+    }
+    
+    payload = {
+        "model": "openai/gpt-3.5-turbo",
+        "messages": [
+            {"role": "system", "content": "You are a professional resume analyzer. Provide specific, actionable suggestions to improve this resume for ATS compatibility and hiring potential."},
+            {"role": "user", "content": f"Please analyze this resume and provide improvement suggestions:\n\n{resume_text}"}
+        ],
+        "temperature": 0.7
+    }
+    
+    try:
+        response = requests.post(
+            "https://openrouter.ai/api/v1/chat/completions",
+            headers=headers,
+            json=payload,
+            timeout=30
+        )
+        response.raise_for_status()
+        suggestions = response.json()["choices"][0]["message"]["content"]
+        return jsonify({"success": True, "suggestions": suggestions})
+    
+    except requests.exceptions.RequestException as e:
+        return jsonify({"success": False, "error": f"API request failed: {str(e)}"})
+    except Exception as e:
+        return jsonify({"success": False, "error": f"Unexpected error: {str(e)}"})
+
+@app.route('/improve', methods=['POST'])
+def improve_section():
+    data = request.json
+    section_text = data.get('section_text', '')
+    section_type = data.get('section_type', 'general')
+    
+    api_key = os.getenv('OPENROUTER_API_KEY')
+    if not api_key:
+        return jsonify({"success": False, "error": "API key not configured"})
+    
+    headers = {
+        "Authorization": f"Bearer {api_key}",
+        "HTTP-Referer": "http://localhost:5000",
+        "X-Title": "AI Resume Builder"
+    }
+    
+    payload = {
+        "model": "qwen/qwq-32b:free",
+        "messages": [
+            {"role": "system", "content": f"You are a professional resume writer. Improve this {section_type} section to be more impactful and ATS-friendly."},
+            {"role": "user", "content": section_text}
+        ],
+        "temperature": 0.5
+    }
+    
+    try:
+        response = requests.post(
+            "https://openrouter.ai/api/v1/chat/completions",
+            headers=headers,
+            json=payload,
+            timeout=30
+        )
+        response.raise_for_status()
+        improved_text = response.json()["choices"][0]["message"]["content"]
+        return jsonify({"success": True, "improved_text": improved_text})
+    
+    except requests.exceptions.RequestException as e:
+        return jsonify({"success": False, "error": f"API request failed: {str(e)}"})
+    except Exception as e:
+        return jsonify({"success": False, "error": f"Unexpected error: {str(e)}"})
+
+@app.route('/generate-pdf', methods=['POST'])
+def generate_pdf():
+    data = request.json
+    html_content = data.get('html_content', '')
+    
+    try:
+        pdf = pdfkit.from_string(html_content, False, configuration=config)
+        return jsonify({
+            "success": True,
+            "pdf": pdf.decode('latin-1')
+        })
+    
+    except Exception as e:
+        return jsonify({"success": False, "error": f"PDF generation failed: {str(e)}. Please ensure wkhtmltopdf is installed at {wkhtmltopdf_path}"})
+
+
+# Required for Hugging Face
+if __name__ == "__main__":
+    os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+    app.run(debug=True, host="0.0.0.0", port=7860)
+else:
+    server = app

requirements.txt

@@ -0,0 +1,5 @@
+Flask==2.3.2
+python-dotenv==1.0.0
+pdfkit==1.0.0
+wkhtmltopdf==0.2
+requests==2.31.0

static/css/style.css

@@ -0,0 +1,182 @@
+:root {
+    --primary-color: #4361ee;
+    --secondary-color: #3f37c9;
+    --accent-color: #4895ef;
+    --light-color: #f8f9fa;
+    --dark-color: #212529;
+    --success-color: #4bb543;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    background-color: #f5f7fa;
+    color: var(--dark-color);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+header h1 {
+    font-size: 2.5rem;
+    color: var(--primary-color);
+    margin-bottom: 10px;
+}
+
+header p {
+    font-size: 1.1rem;
+    color: #666;
+}
+
+.builder-container {
+    display: flex;
+    gap: 30px;
+}
+
+.resume-form, .resume-preview {
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    padding: 25px;
+    flex: 1;
+}
+
+.resume-preview {
+    background: #f9f9f9;
+}
+
+h2 {
+    color: var(--primary-color);
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #eee;
+}
+
+.form-section {
+    margin-bottom: 25px;
+    padding: 20px;
+    border: 1px dashed #ddd;
+    border-radius: 8px;
+    background: #fafafa;
+    cursor: move;
+}
+
+.form-section:hover {
+    border-color: var(--accent-color);
+}
+
+.form-section h3 {
+    margin-bottom: 15px;
+    color: var(--secondary-color);
+}
+
+input, textarea {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+textarea {
+    min-height: 100px;
+    resize: vertical;
+}
+
+button {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+}
+
+button:hover {
+    background-color: var(--secondary-color);
+    transform: translateY(-2px);
+}
+
+.ai-suggest {
+    background-color: var(--accent-color);
+    margin-top: 10px;
+}
+
+.actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+#download-pdf {
+    background-color: var(--success-color);
+}
+
+#preview-resume {
+    background-color: #6c757d;
+}
+
+/* Drag and drop styling */
+.form-section.dragging {
+    opacity: 0.5;
+    border: 2px dashed var(--accent-color);
+}
+
+/* Modal styles */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border-radius: 8px;
+    width: 80%;
+    max-width: 600px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover {
+    color: black;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .builder-container {
+        flex-direction: column;
+    }
+}

static/js/script.js

@@ -0,0 +1,181 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Drag and drop functionality
+    const sections = document.querySelectorAll('.form-section');
+    let draggedSection = null;
+
+    sections.forEach(section => {
+        section.addEventListener('dragstart', function() {
+            draggedSection = this;
+            setTimeout(() => {
+                this.classList.add('dragging');
+            }, 0);
+        });
+
+        section.addEventListener('dragend', function() {
+            this.classList.remove('dragging');
+        });
+    });
+
+    const form = document.querySelector('.resume-form');
+    form.addEventListener('dragover', function(e) {
+        e.preventDefault();
+        const afterElement = getDragAfterElement(form, e.clientY);
+        if (afterElement == null) {
+            form.appendChild(draggedSection);
+        } else {
+            form.insertBefore(draggedSection, afterElement);
+        }
+    });
+
+    function getDragAfterElement(container, y) {
+        const draggableElements = [...container.querySelectorAll('.form-section:not(.dragging)')];
+
+        return draggableElements.reduce((closest, child) => {
+            const box = child.getBoundingClientRect();
+            const offset = y - box.top - box.height / 2;
+            if (offset < 0 && offset > closest.offset) {
+                return { offset: offset, element: child };
+            } else {
+                return closest;
+            }
+        }, { offset: Number.NEGATIVE_INFINITY }).element;
+    }
+
+    // Add experience entry
+    document.getElementById('add-experience').addEventListener('click', function() {
+        const experienceSection = this.parentElement;
+        const newEntry = document.createElement('div');
+        newEntry.className = 'experience-entry';
+        newEntry.innerHTML = `
+            <input type="text" class="job-title" placeholder="Job Title">
+            <input type="text" class="company" placeholder="Company">
+            <input type="text" class="duration" placeholder="Duration">
+            <textarea class="description" placeholder="Job Description"></textarea>
+            <button class="ai-suggest" data-for="experience">Improve with AI</button>
+        `;
+        experienceSection.insertBefore(newEntry, this);
+    });
+
+    // Add skills
+    document.getElementById('add-skill').addEventListener('click', function() {
+        const skillInput = document.getElementById('skills-input');
+        const skillsList = document.getElementById('skills-list');
+        
+        if (skillInput.value.trim() !== '') {
+            const skillTag = document.createElement('span');
+            skillTag.className = 'skill-tag';
+            skillTag.textContent = skillInput.value;
+            skillsList.appendChild(skillTag);
+            skillInput.value = '';
+        }
+    });
+
+    // AI Suggestions
+    const modal = document.getElementById('ai-modal');
+    const span = document.getElementsByClassName('close')[0];
+    const aiSuggestions = document.getElementById('ai-suggestions');
+    let currentField = '';
+
+    document.querySelectorAll('.ai-suggest').forEach(button => {
+        button.addEventListener('click', function() {
+            currentField = this.getAttribute('data-for');
+            const fieldContent = getFieldContent(currentField);
+            
+            // In a real app, you would call your backend API here
+            // For now, we'll simulate a response
+            simulateAIResponse(fieldContent);
+            
+            modal.style.display = 'block';
+        });
+    });
+
+    span.onclick = function() {
+        modal.style.display = 'none';
+    }
+
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = 'none';
+        }
+    }
+
+    document.getElementById('apply-suggestion').addEventListener('click', function() {
+        // In a real app, you would apply the selected suggestion
+        alert('Suggestion applied!');
+        modal.style.display = 'none';
+    });
+
+    function getFieldContent(field) {
+        switch(field) {
+            case 'summary':
+                return document.getElementById('summary').value;
+            case 'experience':
+                // Get the last experience entry's description
+                const experiences = document.querySelectorAll('.experience-entry');
+                const lastExperience = experiences[experiences.length - 1];
+                return lastExperience.querySelector('.description').value;
+            default:
+                return '';
+        }
+    }
+
+    function simulateAIResponse(content) {
+        // This is just a simulation - in a real app, you'd call the OpenAI API
+        const responses = {
+            summary: [
+                "Consider starting with a strong action word and quantifying your achievements.",
+                "Try to align your summary more closely with the job description keywords.",
+                "Your summary could benefit from more specific metrics about your impact."
+            ],
+            experience: [
+                "Reformat your bullet points to start with action verbs and include measurable results.",
+                "Consider adding more context about the scale of your projects or responsibilities.",
+                "This could be strengthened by showing progression or promotion if applicable."
+            ]
+        };
+
+        aiSuggestions.innerHTML = '';
+        responses[currentField].forEach((suggestion, index) => {
+            const suggestionDiv = document.createElement('div');
+            suggestionDiv.className = 'suggestion';
+            suggestionDiv.innerHTML = `
+                <input type="radio" id="suggestion-${index}" name="ai-suggestion" value="${index}">
+                <label for="suggestion-${index}">${suggestion}</label>
+            `;
+            aiSuggestions.appendChild(suggestionDiv);
+        });
+    }
+
+    // Preview Resume
+    document.getElementById('preview-resume').addEventListener('click', function() {
+        // In a real app, you would generate a proper preview
+        const previewContent = document.getElementById('preview-content');
+        previewContent.innerHTML = `
+            <h3>${document.getElementById('name').value || 'Your Name'}</h3>
+            <p>${document.getElementById('email').value || '[email protected]'} | 
+               ${document.getElementById('phone').value || '(123) 456-7890'}</p>
+            <h4>Professional Summary</h4>
+            <p>${document.getElementById('summary').value || 'Experienced professional seeking new opportunities.'}</p>
+            <h4>Work Experience</h4>
+            <div class="preview-experience">
+                ${Array.from(document.querySelectorAll('.experience-entry')).map(exp => `
+                    <h5>${exp.querySelector('.job-title').value || 'Job Title'} at ${exp.querySelector('.company').value || 'Company'}</h5>
+                    <p>${exp.querySelector('.duration').value || 'Duration'}</p>
+                    <p>${exp.querySelector('.description').value || 'Job description and accomplishments.'}</p>
+                `).join('')}
+            </div>
+        `;
+    });
+
+    // Analyze Resume
+    document.getElementById('analyze-resume').addEventListener('click', function() {
+        // In a real app, you would call your backend API for analysis
+        alert('In a complete app, this would analyze your resume for ATS compatibility and suggest improvements.');
+    });
+
+    // Download PDF
+    document.getElementById('download-pdf').addEventListener('click', function() {
+        // In a real app, you would generate a PDF
+        alert('In a complete app, this would generate and download a PDF of your resume.');
+    });
+});

templates/index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Resume Builder</title>
+    <link rel="stylesheet" href="../static/css/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>AI-Powered Resume Builder</h1>
+            <p>Create the perfect resume that gets you hired</p>
+        </header>
+
+        <div class="builder-container">
+            <div class="resume-form">
+                <h2>Your Information</h2>
+                
+                <div class="form-section" draggable="true">
+                    <h3>Personal Details</h3>
+                    <input type="text" id="name" placeholder="Full Name">
+                    <input type="text" id="email" placeholder="Email">
+                    <input type="text" id="phone" placeholder="Phone">
+                    <input type="text" id="linkedin" placeholder="LinkedIn URL">
+                </div>
+
+                <div class="form-section" draggable="true">
+                    <h3>Summary</h3>
+                    <textarea id="summary" placeholder="Professional summary"></textarea>
+                    <button class="ai-suggest" data-for="summary">Get AI Suggestions</button>
+                </div>
+
+                <div class="form-section" draggable="true">
+                    <h3>Work Experience</h3>
+                    <div class="experience-entry">
+                        <input type="text" class="job-title" placeholder="Job Title">
+                        <input type="text" class="company" placeholder="Company">
+                        <input type="text" class="duration" placeholder="Duration">
+                        <textarea class="description" placeholder="Job Description"></textarea>
+                        <button class="ai-suggest" data-for="experience">Improve with AI</button>
+                    </div>
+                    <button id="add-experience">+ Add Another</button>
+                </div>
+
+                <div class="form-section" draggable="true">
+                    <h3>Education</h3>
+                    <input type="text" id="degree" placeholder="Degree">
+                    <input type="text" id="university" placeholder="University">
+                    <input type="text" id="grad-year" placeholder="Graduation Year">
+                </div>
+
+                <div class="form-section" draggable="true">
+                    <h3>Skills</h3>
+                    <div class="skills-container">
+                        <input type="text" id="skills-input" placeholder="Add skill">
+                        <button id="add-skill">+ Add</button>
+                    </div>
+                    <div id="skills-list"></div>
+                </div>
+
+                <div class="actions">
+                    <button id="analyze-resume">Analyze & Improve</button>
+                    <button id="download-pdf">Download PDF</button>
+                    <button id="preview-resume">Preview Resume</button>
+                </div>
+            </div>
+
+            <div class="resume-preview">
+                <h2>Resume Preview</h2>
+                <div id="preview-content"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- AI Suggestions Modal -->
+    <div id="ai-modal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h3>AI Suggestions</h3>
+            <div id="ai-suggestions"></div>
+            <button id="apply-suggestion">Apply Suggestion</button>
+        </div>
+    </div>
+
+    <script src="../static/js/script.js"></script>
+</body>
+</html>