Added an 'Enhance Description Text' button to each section (projects …

…and internships) to enhance the description entered by the user using Groq API. (#48)

* made api calling script/function and handled secret key.

* implemented dynamic prompt (project or internship) and completed with the feature

* refactored model name to a global variable

* added handling of empty fields and feedback placeholder when enhancing text

* commented logs

* going back and some changes

* fixed bugs

---------

Co-authored-by: Kishan-Ved <[email protected]>

groq-script.js

@@ -0,0 +1,85 @@
+import secrets from "./secrets.json" with {type: 'json'}
+// console.log('loaded module')
+
+const MODEL = 'llama-3.1-8b-instant'
+
+// function using groq api for enhancing description text for internships and projects
+async function enhanceDescription(section) {
+	let element1
+	let element2
+	switch(section){
+		case 'internship':
+			element1 = document.getElementById("interndescriptionF")
+			element2 = document.getElementById("interndescription2F")
+			break;
+		case 'project':
+			element1 = document.getElementById("projectdescriptionF")
+			element2 = document.getElementById("projectdescription2F")
+			break;
+	}
+
+	const description = element1.value;
+	const description2 = element2.value;
+
+	// handle empty fields
+	if(description === '' || description2 === '') {
+		window.alert('Please fill in both fields')
+		return
+	}
+
+	// set placeholder as 'enhancing'
+	element1.value = ""
+	element2.value = ""
+	element1.placeholder = "Enhancing Text..."
+	element2.placeholder = "Enhancing Text..."
+
+	// console.log(description, description2)
+	const response = await fetch('https://api.groq.com/openai/v1/chat/completions', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${secrets.GROQ_KEY}`
+            },
+            body: JSON.stringify({
+                messages: [
+                    {
+                        role: 'system',
+                        content:
+                            `-You are a text enhancer assistant. -You are given 2 lines of description about an ${section}, enhance them for them to be put in a professional resume, highlighting key points and useful skills involved in the ${section}. -Do this within 2 short lines only for EACH input line. -Return only the enhanced texts, separated by a line, without any prefixes like 'Enhanced text:'.`
+
+                    },
+                    {
+                        role: 'user',
+                        content: `Line 1: ${description}\n\nLine 2: ${description2}`
+                    }
+                ],
+                model: MODEL,
+                temperature: 1,
+                // max_tokens: 1024,
+                top_p: 1,
+                stream: false,
+                stop: null
+            })
+        });
+
+	if (response.ok) {
+		const data = await response.json();
+		const answer = data.choices[0].message?.content
+		const enhancedLines = answer.split('\n').filter(e=> e != "")
+		// console.log(enhancedLines)
+		element1.value = enhancedLines[0]
+		element2.value = enhancedLines[1]
+
+		element1.placeholder = "Enter the description line 1"
+		element2.placeholder = "Enter the description line 2"
+
+		// return JSON.parse(data.choices[0].message?.content);
+	} else {
+		console.error(await response.json());
+		element1.value = ""
+		element2.value = ""
+	}
+}
+
+// Module scope != global scope, hence assigning it to the global scope.
+window.enhanceDescription = enhanceDescription;

resumegenerator.html

@@ -183,6 +183,10 @@ <h3>Internships <input type="checkbox" id="internshipCheckBox" style="accent-col
                                 <button onclick="addNewIntern()" class="btn btn-dark btn-lg hidden" id="internaddbutton">Add
                                     This</button>
 
+                                <button onclick="enhanceDescription('internship')" class="btn btn-dark btn-lg hidden" id="internenhancebutton">Enhance using AI</button>
+                                <div>You must click the button to add this to LaTeX code.</div><br>
+
+
                                     <button class="btn btn-dark btn-lg hidden" id="internupdatebutton">Update</button>
 
                                 <div id="internshipDetailR">You must click the button to add this to LaTeX code.</div><br>
@@ -197,6 +201,7 @@ <h3>Internships <input type="checkbox" id="internshipCheckBox" style="accent-col
                                 </div>
 
 
+
                                 <div id="projects-container">
                                     <h3>Projects</h3>
                                     <div>(If you dont want to include this, leave it blank and delete this section from
@@ -219,6 +224,9 @@ <h3>Projects</h3>
 
                                 <button onclick="addNewProject()" class="btn btn-dark btn-lg" id="projectaddbutton">Add
                                     This</button>
+
+                                    <button onclick="enhanceDescription('project')" class="btn btn-dark btn-lg">Enhance using AI</button>
+
                                 <button class="btn btn-dark btn-lg hidden" id="projectupdatebutton">Update</button>                                
 
                                 <div>You must click the button to add this to LaTeX code.</div><br>
@@ -822,6 +830,7 @@ <h2>IIT Gandhinagar</h2>
         integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
         crossorigin="anonymous"></script>
     <script src="script.js"></script>
+    <script type="module" src="groq-script.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
 

script.js

@@ -16,6 +16,7 @@ if(internCheckBox.checked){
 document.getElementById("internshipDetailL1").classList.remove("hidden");
 document.getElementById("internshipDetailL2").classList.remove("hidden");
 document.getElementById("internaddbutton").classList.remove("hidden");
+document.getElementById("internenhancebutton").classList.remove("hidden");
 document.getElementById("internshipDetailR").classList.remove("hidden");
 document.getElementById("userEnteredInternshipsLatex").innerHTML = `
   \\resheading{\\textbf{ INTERNSHIPS} }

secrets.json

@@ -0,0 +1,3 @@
+{
+	"GROQ_KEY": "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"
+}