Resume to Cover Letter Conversion App using worqhat API
Table of Contents
- Demo Preview
- Introduction
- Prerequisites
- Getting Started
- File Upload and PDF Extraction
- Generating Cover Letter
- Conclusion
Demo
1. Introduction
The Resume to Cover Letter Conversion App is a web application that allows users to upload their resume, extract its content using AI-powered PDF extraction, and generate a cover letter based on the extracted content. The app utilizes the Worqhat API for PDF extraction and content generation.
2. Prerequisites
Before starting the project, ensure you have the following installed:
Node.js
npm or yarn (Node Package Manager)
Basic knowledge of React and Next.js
3. Getting Started
To create the project, follow these steps:
Step 1: Create a new Next.js app using the following command:
bash
npx create-next-app resume-to-cover-letter-app
Step 2: Navigate to the project directory:
cd resume-to-cover-letter-app
Step 3: Install the required dependencies:
npm install
# or
yarn
Step 4: Obtain the API keys:
You'll need two API keys: x-api-key and x-org-key.
Sign up on the Worqhat website to get your API keys.
4. File Upload and PDF Extraction
In this section, we'll implement the file upload functionality and use the Worqhat API for PDF extraction.
// pages/index.js
import React, { useState } from 'react';
import FileUpload from '../components/FileUpload';
export default function Home() {
const [extractedContent, setExtractedContent] = useState('');
const handleExtractedContent = (content) => {
setExtractedContent(content);
};
return (
<main>
<h1>Resume to Cover Letter Conversion</h1>
<FileUpload onExtractedContent={handleExtractedContent} />
{/* Rest of the code... */}
</main>
);
}
jsx
Copy code
// components/FileUpload.js
import React, { useState } from 'react';
const FileUpload = ({ onExtractedContent }) => {
const [isLoading, setIsLoading] = useState(false);
const [uploadedFileName, setUploadedFileName] = useState('');
const handleFileUpload = async (event) => {
const file = event.target.files?.[0];
if (file) {
setUploadedFileName(file.name);
setIsLoading(true);
const formData = new FormData();
formData.append('file', file);
formData.append('output_format', 'text');
try {
const response = await fetch('https://api.worqhat.com/api/ai/v2/pdf-extract', {
method: 'POST',
headers: {
'x-api-key': 'YOUR_X_API_KEY',
'x-org-key': 'YOUR_X_ORG_KEY',
},
body: formData,
});
const data = await response.json();
if (data.content) {
onExtractedContent(data.content);
} else {
console.error('Error extracting content: Unexpected API response format');
}
} catch (error) {
console.error('Error extracting content:', error);
} finally {
setIsLoading(false);
}
}
};
return (
<div>
<label htmlFor="upload-button">Upload Resume</label>
<input
type="file"
id="upload-button"
accept=".pdf,.doc,.docx"
onChange={handleFileUpload}
/>
{uploadedFileName && <p>Uploaded File: {uploadedFileName}</p>}
{isLoading && <p>Extracting content...</p>}
</div>
);
};
export default FileUpload;
6. Generating Cover Letter
In this section, we'll implement the functionality to generate a cover letter based on the extracted content.
jsx
Copy code
// components/CoverLetterGenerator.js
import React, { useState } from 'react';
const CoverLetterGenerator = ({ extractedContent }) => {
const [isLoading, setIsLoading] = useState(false);
const [coverLetter, setCoverLetter] = useState('');
const generateCoverLetter = async () => {
setIsLoading(true);
try {
const question = 'Generate a cover letter for the given extracted content';
const fullQuestion = `${extractedContent}\n\n${question}`;
const requestData = {
question: fullQuestion,
randomness: 0.4, // You can adjust the randomness factor as needed
};
const response = await fetch('https://api.worqhat.com/api/ai/content/v2', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': 'YOUR_X_API_KEY',
'x-org-key': 'YOUR_X_ORG_KEY',
},
body: JSON.stringify(requestData),
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
if (data.content) {
setCoverLetter(data.content);
} else {
console.error('Error generating cover letter: Unexpected API response format');
}
} catch (error) {
console.error('Error generating cover letter:', error);
} finally {
setIsLoading(false);
}
};
return (
<div>
<button
type="button"
onClick={generateCoverLetter}
disabled={!extractedContent || isLoading}
>
{isLoading ? 'Generating...' : 'Generate Cover Letter'}
</button>
{coverLetter && <textarea value={coverLetter} readOnly></textarea>}
</div>
);
};
export default CoverLetterGenerator;
jsx
Copy code
// pages/index.js
import React, { useState } from 'react';
import FileUpload from '../components/FileUpload';
import CoverLetterGenerator from '../components/CoverLetterGenerator';
export default function Home() {
const [extractedContent, setExtractedContent] = useState('');
const handleExtractedContent = (content) => {
setExtractedContent(content);
};
return (
<main>
<h1>Resume to Cover Letter Conversion</h1>
<FileUpload onExtractedContent={handleExtractedContent} />
{extractedContent && <CoverLetterGenerator extractedContent={extractedContent} />}
</main>
);
}
7. Conclusion
Congratulations! You have successfully built the Resume to Cover Letter Conversion App using Next.js and the Worqhat API. Users can now upload their resumes, extract content, and generate cover letters based on the extracted content.
Note: Don't forget to replace YOUR_X_API_KEY and YOUR_X_ORG_KEY with your actual API keys from the Worqhat API.
The documentation above provides a step-by-step guide to creating the Resume to Cover Letter Conversion App using Next.js and React. It covers the prerequisites, project structure, and implementation details for file upload, PDF extraction, and cover letter generation.
Please remember to replace YOUR_X_API_KEY and YOUR_X_ORG_KEY with your actual API keys obtained from the Worqhat API. Additionally, you can further enhance the app by adding additional features and styling to meet your specific requirements.
Feel free to customize and extend the app as needed to make it more user-friendly and feature-rich. If you encounter any issues or have further questions, you can refer to the official documentation of Next.js and React or seek help from the Worqhat API support team.
Happy coding!
No comments:
Post a Comment