Product Description Generator
Enter Your Product's Core Information
Define the Voice of Your Description
Your Generated Product Description
Click "Generate Description" on the 'Next' button to create your description here.
${chosenTemplate.replace(/
- /g, '
- ')}
`;
};
/**
* Updates the visibility of tabs and navigation buttons.
*/
const updateTabs = () => {
tabButtons.forEach(btn => {
btn.classList.toggle('active', parseInt(btn.dataset.tab) === currentTab);
});
tabContents.forEach(content => {
content.classList.toggle('active', parseInt(content.id.split('-')[1]) === currentTab);
});
prevBtn.style.visibility = currentTab === 1 ? 'hidden' : 'visible';
if (currentTab === 3) {
nextBtn.textContent = "Generate Description";
} else {
nextBtn.textContent = "Next";
}
};
// --- Event Listeners ---
tabButtons.forEach(btn => {
btn.addEventListener('click', () => {
const targetTab = parseInt(btn.dataset.tab);
// If moving to the last tab, but not from the second-to-last, trigger generation
if (targetTab === 3 && currentTab !== 2) {
generateDescription();
}
currentTab = targetTab;
updateTabs();
});
});
nextBtn.addEventListener('click', () => {
if (currentTab < 3) {
currentTab++;
updateTabs();
// If we just moved to the last tab, generate description
if (currentTab === 3) {
generateDescription();
}
} else if (currentTab === 3) {
// If already on the last tab, the button acts as a generator
generateDescription();
}
});
prevBtn.addEventListener('click', () => {
if (currentTab > 1) {
currentTab--;
updateTabs();
}
});
regenerateBtn.addEventListener('click', generateDescription);
downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const contentToPrint = document.getElementById('pdf-output-content');
if (!contentToPrint) {
console.error("PDF content element not found.");
return;
}
html2canvas(contentToPrint, {
scale: 2,
useCORS: true
}).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'pt',
format: 'a4'
});
const pdfWidth = pdf.internal.pageSize.getWidth();
const pageHeight = pdf.internal.pageSize.getHeight();
const margin = 40;
const contentWidth = pdfWidth - (margin * 2);
const imgHeight = canvas.height * contentWidth / canvas.width;
let heightLeft = imgHeight;
let position = margin;
pdf.addImage(imgData, 'PNG', margin, position, contentWidth, imgHeight);
heightLeft -= (pageHeight - (margin * 2));
while (heightLeft > 0) {
position = heightLeft - imgHeight + margin;
pdf.addPage();
pdf.addImage(imgData, 'PNG', margin, position, contentWidth, imgHeight);
heightLeft -= (pageHeight - margin);
}
const fileName = (productNameInput.value || "product_description").replace(/\s+/g, '_').toLowerCase();
pdf.save(`${fileName}.pdf`);
}).catch(err => {
console.error("Error generating PDF:", err);
});
});
// --- Initialization ---
updateTabs();
});