Update static/resume-optimizer.html

static/resume-optimizer.html

@@ -4,12 +4,17 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Resume Optimizer</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
+        body { 
+            background-color: #f0f2f5; 
+            font-family: 'Arial', sans-serif;
+        }
         :root {
             --primary-color: #003366;
             --secondary-color: #f0f2f5;
-            --accent-color: #ff6b6b;
         }
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -19,10 +24,6 @@
             background-color: var(--secondary-color);
             color: #333;
         }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
         h1, h2 {
             color: var(--primary-color);
         }
@@ -30,227 +31,225 @@
             text-align: center;
             margin-bottom: 30px;
         }
-        form {
-            background: #ffffff;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            margin-bottom: 30px;
-            display: flex;
-            flex-wrap: wrap;
-            gap: 20px;
-            align-items: flex-start;
-        }
-        .form-group {
-            flex: 1 1 calc(50% - 10px);
-            min-width: 250px;
-        }
-        label {
-            display: block;
-            margin-bottom: 8px;
-            color: var(--primary-color);
-            font-weight: bold;
-        }
-        input[type="text"], input[type="file"], textarea {
-            width: 100%;
+        .container { 
+            max-width: 800px; 
+            margin: 30px auto; 
+            background-color: #ffffff; 
+            padding: 30px; 
+            border-radius: 10px; 
+            box-shadow: 0 0 20px rgba(0,0,0,0.1);
+        }
+        textarea { 
+            width: 100%; 
+            min-height: 150px; 
+            border: 1px solid #ced4da;
+            border-radius: 5px;
             padding: 10px;
-            margin-bottom: 10px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            font-size: 14px;
-            transition: border-color 0.3s ease;
-            box-sizing: border-box;
-        }
-        input[type="text"]:focus, textarea:focus {
-            border-color: var(--accent-color);
-            outline: none;
         }
-        textarea {
-            height: 150px;
-            resize: vertical;
+        .spinner { 
+            border: 4px solid #f3f3f3; 
+            border-top: 4px solid #3498db; 
+            border-radius: 50%; 
+            width: 40px; 
+            height: 40px; 
+            animation: spin 1s linear infinite; 
+            margin: 0 auto; 
         }
-        .button-container {
-            flex-basis: 100%;
-            display: flex;
-            justify-content: center;
-            margin-top: 20px;
-        }
-        button {
-            background: var(--primary-color);
-            color: #fff;
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 16px;
-            transition: background-color 0.3s ease;
-            width: auto;
-            min-width: 200px;
+        @keyframes spin { 
+            0% { transform: rotate(0deg); } 
+            100% { transform: rotate(360deg); } 
         }
-        button:hover {
-            background: var(--accent-color);
+        .btn-primary, .btn-success, .btn-info {
+            transition: all 0.3s ease;
         }
-        .report-section {
-            background-color: #ffffff;
-            padding: 40px;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            margin-top: 30px;
-            display: none;
+        .btn-primary:hover, .btn-success:hover, .btn-info:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
         }
-        .report-section h2 {
-            border-bottom: 2px solid var(--accent-color);
-            padding-bottom: 10px;
-            margin-top: 0;
+        .fade-enter-active, .fade-leave-active {
+            transition: opacity 0.5s;
         }
-        .markdown-body {
-            font-size: 14px;
-            line-height: 1.6;
+        .fade-enter-from, .fade-leave-to {
+            opacity: 0;
         }
-        pre {
-            background-color: #f6f8fa;
-            border-radius: 4px;
-            padding: 15px;
-            overflow-x: auto;
-            font-size: 12px;
-        }
-        #loading {
-            text-align: center;
-            display: none;
+        .optimized-content {
+            background-color: #f8f9fa;
+            border-radius: 5px;
             padding: 20px;
-        }
-        .spinner {
-            display: inline-block;
-            width: 50px;
-            height: 50px;
-            border: 3px solid rgba(0,51,102,.3);
-            border-radius: 50%;
-            border-top-color: var(--primary-color);
-            animation: spin 1s ease-in-out infinite;
-            -webkit-animation: spin 1s ease-in-out infinite;
-        }
-        @keyframes spin {
-            to { -webkit-transform: rotate(360deg); }
-        }
-        @-webkit-keyframes spin {
-            to { -webkit-transform: rotate(360deg); }
-        }
-        .loading-text {
-            margin-top: 10px;
-            font-weight: bold;
-            color: var(--primary-color);
-        }
-        @media (max-width: 768px) {
-            .form-group {
-                flex: 1 1 100%;
-            }
+            margin-top: 20px;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>Resume Optimizer</h1>
-        <form id="optimizeForm">
-            <div class="form-group">
-                <label for="resumeText">Resume:</label>
-                <textarea id="resumeText" placeholder="Paste your resume here"></textarea>
-                <input type="file" id="resumeFile" accept=".txt,.pdf,.doc,.docx">
-            </div>
-            <div class="form-group">
-                <label for="jobDescriptionText">Job Description:</label>
-                <textarea id="jobDescriptionText" placeholder="Paste the job description here"></textarea>
-                <input type="text" id="jobDescriptionUrl" placeholder="Or enter job description URL">
-            </div>
-            <div class="button-container">
-                <button type="submit">Optimize Resume</button>
-            </div>
-        </form>
-        <div id="loading">
+    <div id="app" class="container">
+        <h1 class="text-center mb-4">Resume Optimizer</h1>
+        <transition name="fade">
+            <form v-if="!optimizedResume" @submit.prevent="optimizeResume">
+                <div class="mb-3">
+                    <label for="resumeText" class="form-label">Resume:</label>
+                    <textarea id="resumeText" v-model="resumeText" class="form-control" placeholder="Paste your resume here"></textarea>
+                    <input type="file" @change="handleResumeFile" class="form-control mt-2" accept=".txt,.pdf,.doc,.docx">
+                </div>
+                <div class="mb-3">
+                    <label for="jobDescriptionText" class="form-label">Job Description:</label>
+                    <textarea id="jobDescriptionText" v-model="jobDescriptionText" class="form-control" placeholder="Paste the job description here"></textarea>
+                    <input type="text" v-model="jobDescriptionUrl" class="form-control mt-2" placeholder="Or enter job description URL">
+                </div>
+                <button type="submit" class="btn btn-primary w-100" :disabled="isLoading">Optimize Resume</button>
+            </form>
+        </transition>
+
+        <div v-if="isLoading" class="text-center mt-4">
             <div class="spinner"></div>
-            <div class="loading-text">Optimizing your resume...</div>
+            <p>Optimizing your resume...</p>
         </div>
-        <div id="optimizedResumeContainer" class="report-section"></div>
-        <div id="changesMadeContainer" class="report-section"></div>
+
+        <transition name="fade">
+            <div v-if="optimizedResume" class="mt-4">
+                <h3 class="mb-3">Optimized Resume</h2>
+                <div class="optimized-content" v-html="markedOptimizedResume"></div>
+                <div class="mt-3">
+                    <button @click="downloadPdf" class="btn btn-success me-2">Download as PDF</button>
+                    <button @click="downloadDocx" class="btn btn-info">Download as DOCX</button>
+                    <button @click="resetForm" class="btn btn-outline-secondary ms-2">Start Over</button>
+                </div>
+            </div>
+        </transition>
+
+        <transition name="fade">
+            <div v-if="changesMade" class="mt-4">
+                <h3 class="mb-3">Changes Made</h2>
+                <div class="optimized-content" v-html="markedChangesMade"></div>
+            </div>
+        </transition>
+
+        <div v-if="errorMessage" class="alert alert-danger mt-4">{{ errorMessage }}</div>
     </div>
 
     <script>
-        const AUTH_TOKEN = "44d5c2ac18ced6fc25c1e57dcd06fc0b31fb4ad97bf56e67540671a647465df4";
+        const { createApp } = Vue;
 
-        document.getElementById('optimizeForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const optimizedResumeContainer = document.getElementById('optimizedResumeContainer');
-            const changesMadeContainer = document.getElementById('changesMadeContainer');
-            const loadingDiv = document.getElementById('loading');
-            
-            // Hide result containers and show loading animation
-            optimizedResumeContainer.style.display = 'none';
-            changesMadeContainer.style.display = 'none';
-            loadingDiv.style.display = 'block';
+        createApp({
+            data() {
+                return {
+                    resumeText: '',
+                    resumeFile: null,
+                    jobDescriptionText: '',
+                    jobDescriptionUrl: '',
+                    optimizedResume: '',
+                    changesMade: '',
+                    isLoading: false,
+                    errorMessage: '',
+                    AUTH_TOKEN: "44d5c2ac18ced6fc25c1e57dcd06fc0b31fb4ad97bf56e67540671a647465df4"
+                }
+            },
+            computed: {
+                markedOptimizedResume() {
+                    return marked.parse(this.optimizedResume);
+                },
+                markedChangesMade() {
+                    return marked.parse(this.changesMade);
+                }
+            },
+            methods: {
+                async optimizeResume() {
+                    this.isLoading = true;
+                    this.errorMessage = '';
 
-            const formData = new FormData();
+                    const formData = new FormData();
+                    if (this.resumeFile) {
+                        formData.append('resume', this.resumeFile);
+                    } else if (this.resumeText) {
+                        formData.append('resumeText', this.resumeText);
+                    } else {
+                        this.errorMessage = 'Please provide a resume (text or file).';
+                        this.isLoading = false;
+                        return;
+                    }
 
-            // Handle resume input
-            const resumeText = document.getElementById('resumeText').value;
-            const resumeFile = document.getElementById('resumeFile').files[0];
-            if (resumeText) {
-                formData.append('resumeText', resumeText);
-            } else if (resumeFile) {
-                formData.append('resume', resumeFile);
-            } else {
-                loadingDiv.innerHTML = '<div class="loading-text" style="color: red;">Please provide a resume (text or file).</div>';
-                return;
-            }
+                    if (this.jobDescriptionText) {
+                        formData.append('jobDescription', this.jobDescriptionText);
+                    } else if (this.jobDescriptionUrl) {
+                        formData.append('jobDescriptionUrl', this.jobDescriptionUrl);
+                    } else {
+                        this.errorMessage = 'Please provide a job description (text or URL).';
+                        this.isLoading = false;
+                        return;
+                    }
 
-            // Handle job description input
-            const jobDescriptionText = document.getElementById('jobDescriptionText').value;
-            const jobDescriptionUrl = document.getElementById('jobDescriptionUrl').value;
-            if (jobDescriptionText) {
-                formData.append('jobDescription', jobDescriptionText);
-            } else if (jobDescriptionUrl) {
-                formData.append('jobDescriptionUrl', jobDescriptionUrl);
-            } else {
-                loadingDiv.innerHTML = '<div class="loading-text" style="color: red;">Please provide a job description (text or URL).</div>';
-                return;
-            }
+                    try {
+                        const response = await fetch('https://pvanand-specialized-agents.hf.space/api/v1/optimize-resume', {
+                            method: 'POST',
+                            headers: { 'Authorization': `Bearer ${this.AUTH_TOKEN}` },
+                            body: formData
+                        });
+
+                        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
 
-            try {
-                const response = await fetch('https://pvanand-specialized-agents.hf.space/api/v1/optimize-resume', {
-                    method: 'POST',
-                    headers: {
-                        'Authorization': `Bearer ${AUTH_TOKEN}`
-                    },
-                    body: formData
-                });
-            
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
+                        const data = await response.json();
+                        this.optimizedResume = data.optimized_resume || 'Optimized resume not found.';
+                        this.changesMade = data.changes_made || 'Changes not found.';
+                    } catch (error) {
+                        this.errorMessage = `Error: ${error.message}`;
+                    } finally {
+                        this.isLoading = false;
+                    }
+                },
+                handleResumeFile(event) {
+                    const file = event.target.files[0];
+                    if (file) {
+                        this.resumeFile = file;
+                        if (file.type === 'application/pdf') {
+                            this.resumeText = `[PDF File: ${file.name}]`;
+                        } else {
+                            const reader = new FileReader();
+                            reader.onload = (e) => {
+                                this.resumeText = e.target.result;
+                            };
+                            reader.readAsText(file);
+                        }
+                    }
+                },
+                async downloadPdf() {
+                    await this.downloadFile('https://pvanand-web-scraping.hf.space/html_to_pdf', 'html_content', 'optimized_resume.pdf');
+                },
+                async downloadDocx() {
+                    await this.downloadFile('https://pvanand-web-scraping.hf.space/convert', 'html', 'optimized_resume.docx');
+                },
+                async downloadFile(url, paramName, filename) {
+                    try {
+                        const response = await fetch(url, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ [paramName]: this.markedOptimizedResume })
+                        });
+                        
+                        if (!response.ok) throw new Error('Conversion failed');
+                        
+                        const blob = await response.blob();
+                        const downloadUrl = window.URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.style.display = 'none';
+                        a.href = downloadUrl;
+                        a.download = filename;
+                        document.body.appendChild(a);
+                        a.click();
+                        window.URL.revokeObjectURL(downloadUrl);
+                    } catch (error) {
+                        this.errorMessage = `Failed to download ${filename}. Please try again.`;
+                    }
+                },
+                resetForm() {
+                    this.resumeText = '';
+                    this.resumeFile = null;
+                    this.jobDescriptionText = '';
+                    this.jobDescriptionUrl = '';
+                    this.optimizedResume = '';
+                    this.changesMade = '';
+                    this.errorMessage = '';
                 }
-            
-                const data = await response.json();
-                
-                const optimizedResume = data.optimized_resume || 'Optimized resume not found.';
-                const changesMade = data.changes_made || 'Changes not found.';
-            
-                optimizedResumeContainer.innerHTML = `
-                    <h2>Optimized Resume</h2>
-                    <div class="markdown-body">${marked.parse(optimizedResume)}</div>
-                `;
-            
-                changesMadeContainer.innerHTML = `
-                    <h2>Changes Made</h2>
-                    <div class="markdown-body">${marked.parse(changesMade)}</div>
-                `;
-            
-                // Hide loading animation and show result containers
-                loadingDiv.style.display = 'none';
-                optimizedResumeContainer.style.display = 'block';
-                changesMadeContainer.style.display = 'block';
-            } catch (error) {
-                loadingDiv.innerHTML = `
-                    <div class="loading-text" style="color: red;">Error: ${error.message}</div>
-                `;
             }
-        });
+        }).mount('#app');
     </script>
 </body>
 </html>