function GptResumeTailor({ resumePDF, jobDescription }) { const [tailoredResume, setTailoredResume] = React.useState(""); const [loading, setLoading] = React.useState(false); React.useEffect(()=>{ if (!resumePDF || !jobDescription) return; setLoading(true); const prompt = `You are a resume tailor GPT, your goal is to tailor a given resume to a particular job description. Here are the instructions for how to do this: 1. First, take the job description and isolate commonly used keywords. Ignore filler words that have nothing to do with the actual job at hand. Make a list of the top 50 keywords that are most used in the job description (skills, adjectives, tools used, qualities of ideal candidate, etc. ). Keep this list on hand. 2. Second, Tailor the user's resume to the job description using the keyword list you have made. Here are specific instructions for how to tailor each section of the resume: - Summary Section: Read the job description and using only the job description, think of the ideal candidate for this job. Write a 2 -3 sentence summary of this candidate, and then combine it with the user's resume summary. Use ideal years of experience from the job description, use the ideal job title from the job description, specifically mention ideal skills and experience mentioned in the job description. If there is overlap in any of these areas between the user's resume and the job description, prioritize mentioning those skills and experiences. Only mention skills and experiences not in the user's resume if you have to. - Work experience: Only edit the most recent work experience (the top work experience), do not touch the other/later work experiences. Take the user’s latest work experience bullet points and find places to insert the keywords, change a several words in a sentence to keywords from the job description. You are ideally not changing the meaning of the sentences or what the candidate did, but finding a word in the resume and replacing it with a keyword. Essentially, find similar words or synonyms in the user’s resume and replace them with one of the keywords from the job description. Do not embellish or change the nature or type of work from the persons resume. Only identify and replace specific words from the resume with the same or similar meaning, and replace them with ones from the job description. Edit at least 3 of the 4 bullet points in the latest work experience section. -Education: Do not change anything in the education section, keep exactly as is on the user's resume - Awards: Do not edit or change any awards in the user's resume. - Skills: Scan the job description for specific hard skills, soft skills, tools, and abilities that an ideal candidate must have. Then, cross reference those list of skills with skills the candidate does not have on their resume, and list at least 7 skills/keywords that the resume does not have that the job description mentions. Preference for hard skills or tools mentioned in the job description or an ideal candidate might have. Output them in a list format on the same line, with commas separating them. Only output the skills. Tailor the summary section, work experience bullet points, and skills section. Do not change dates, locations, education, company name, or awards under any circumstances. Do not add any languages under any circumstances. Make sure there are 4 bullet points under each work experience, make sure you include every single work experience included in the original resume. 3. Output the entire tailored resume in the same format as was given to you. Make sure to include all the same sections such as Summary, Work Experience, Education, and Skills/Awards. Each work experience must have 4 bullet points. 4. After outputting the entire tailored resume with edits, list the places that you made changes/tailored the resume in bullet point format. Do not output a "before" and "after" resume. Only output the tailored resume and only after outputting the tailored resume, briefly describe the changes made.`; fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "system", content: prompt }, { role: "user", content: resumePDF }, { role: "user", content: jobDescription } ] }) }).then((response)=>response.json()).then((data)=>{ setTailoredResume(data.result); setLoading(false); }).catch(()=>{ setLoading(false); setTailoredResume("Failed to tailor resume. Please try again."); }); }, [ resumePDF, jobDescription ]); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Tailoring resume...") : /*#__PURE__*/ React.createElement("div", { className: "text-[#121212] whitespace-pre-wrap", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, tailoredResume)); } function GptResumeTailorStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GptResumeTailor, { resumePDF: "PDF content of Jane Doe's resume.", jobDescription: "Software Engineer job description content here.", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(GptResumeTailor, { resumePDF: "", jobDescription: "", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); } function MainComponent() { const [resumeData, setResumeData] = React.useState(''); const [jobDescription, setJobDescription] = React.useState(''); const [loading, setLoading] = React.useState(false); const [tailoredResume, setTailoredResume] = React.useState(''); const handleResumeUpload = async (event)=>{ setLoading(true); setTailoredResume(''); const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = async ()=>{ const base64String = reader.result.replace('data:application/pdf;base64,', ''); const gptVisionResponse = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'text', text: 'Scan this resume PDF' }, { type: 'image_url', image_url: { url: `data:application/pdf;base64,${base64String}` } } ] } ] }) }); const visionData = await gptVisionResponse.json(); setLoading(false); if (visionData.choices && visionData.choices.length > 0 && visionData.choices[0].message) { setResumeData(visionData.choices[0].message.content); setLoading(false); } }; reader.readAsDataURL(file); } }; const handleJobDescriptionChange = (event)=>{ setJobDescription(event.target.value); }; const handleSubmit = ()=>{ setLoading(true); setTailoredResume(''); }; React.useEffect(()=>{ if (loading && resumeData && jobDescription) { setLoading(true); setTailoredResume(''); } }, [ loading, resumeData, jobDescription ]); React.useEffect(()=>{ if (!loading && resumeData && jobDescription) { // GptResumeTailor is expected to set its own loading state internally setTailoredResume(/*#__PURE__*/ React.createElement(GptResumeTailor, { resumePDF: resumeData, jobDescription: jobDescription, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this })); } }, [ resumeData, jobDescription ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-[#F9FAFB] p-4", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-6", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-[#F3EADD] rounded-full flex justify-center items-center mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-briefcase text-[#1F2937] text-3xl", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#111827] text-3xl mb-1", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Resume Tailor GPT 👆"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#6B7280] text-sm", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Tailors your resume to any job description")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block mb-2 text-sm font-medium text-[#6B7280]", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Resume Upload (PDF)"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "block w-full text-sm text-[#6B7280] p-2 border-[#D1D5DB] rounded-l-lg file:font-roboto file:bg-[#111827] file:text-white file:py-2 file:px-4 file:rounded-none file:border-0 file:border-r cursor-pointer", type: "file", accept: "application/pdf", onChange: handleResumeUpload, disabled: loading, __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `p-2 bg-[#E5E7EB] rounded-r-lg ${resumeData ? 'text-[#10B981]' : 'text-[#9CA3AF]'}`, __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, resumeData ? 'File uploaded' : 'No file chosen'))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block mb-2 text-sm font-medium text-[#6B7280]", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "Paste Job Description"), /*#__PURE__*/ React.createElement("textarea", { className: "resize-none w-full p-4 text-sm border-[#D1D5DB] rounded-lg font-roboto", placeholder: "Type here", rows: "5", onChange: handleJobDescriptionChange, value: jobDescription, name: "jobDescription", disabled: loading, __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 mb-4 text-sm text-center rounded-lg font-roboto font-medium bg-[#111827] text-white disabled:bg-gray-300 disabled:text-[#9CA3AF]", onClick: handleSubmit, disabled: !resumeData || !jobDescription || loading, __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fa fa-spinner animate-spin", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }) : 'GENERATE'), /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-[#9CA3AF] text-xs", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, "App created on FoxyApps")), tailoredResume); }