${cta}

`; html += `

Sign-off

`; html += `

Thank the listeners and any guests. Tease the next episode if applicable. Play outro music.

`; outlineOutput.innerHTML = html; } /** * PDF Download Functionality using html2canvas */ async function downloadPDF() { if (typeof html2canvas === 'undefined' || typeof jspdf === 'undefined') { alert("Error: PDF generation libraries are not loaded."); return; } const originalContent = outlineOutput.innerHTML; if (!originalContent.trim() || originalContent.includes("will appear here")) { alert("Please generate an outline before downloading."); return; } const { jsPDF } = window.jspdf; const pdf = new jsPDF('p', 'pt', 'a4'); pdfButton.innerText = 'Generating...'; pdfButton.disabled = true; // html2canvas is better for capturing user's visual edits. // It renders the HTML content to a canvas. try { const canvas = await html2canvas(outlineOutput, { scale: 2 // Higher scale for better quality }); const imgData = canvas.toDataURL('image/png'); const imgProps = pdf.getImageProperties(imgData); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const ratio = imgProps.width / imgProps.height; let width = pdfWidth - 40; // with margin let height = width / ratio; // if content is too long, we can't fit it. // A better approach for long docs is jsPDF's .html() method, // but it's complex. For this tool, we fit to one page. if (height > pdfHeight - 40) { height = pdfHeight - 40; width = height * ratio; } const x = (pdfWidth - width) / 2; const y = 20; pdf.addImage(imgData, 'PNG', x, y, width, height); const fileName = (episodeTitleInput.value || 'Podcast_Outline').replace(/[^a-z0-9]/gi, '_').toLowerCase(); pdf.save(`${fileName}.pdf`); } catch (error) { console.error("PESO TOOL: PDF Generation Error - ", error); alert("An error occurred while generating the PDF."); } finally { pdfButton.innerText = 'Download Outline (PDF)'; pdfButton.disabled = false; } } // --- Event Listeners --- addPointButton.addEventListener('click', () => addTalkingPoint()); nextButton.addEventListener('click', () => { if (currentTabIndex === 0) { generateOutline(); peso_showTab(1); } }); prevButton.addEventListener('click', () => { if (currentTabIndex > 0) { peso_showTab(currentTabIndex - 1); } }); pdfButton.addEventListener('click', downloadPDF); // --- Initial Setup --- // Add some default talking points for the sample data addTalkingPoint("How recommendation algorithms work (e.g., Netflix, Spotify)"); addTalkingPoint("AI in navigation and traffic prediction (e.g., Google Maps)"); addTalkingPoint("The role of AI in virtual assistants (Siri, Alexa)"); // Generate initial outline based on default values generateOutline(); }); // --- End of DOMContentLoaded --- // --- Global Functions for onclick --- // This function must be in the global scope to be called from HTML attributes. window.peso_openTab = function(evt, tabName) { const tabs = ['peso-tab-config', 'peso-tab-dashboard']; const newIndex = tabs.indexOf(tabName); // The core logic is inside the DOMContentLoaded scope, so we can't call it directly. // A simple solution is to just click the appropriate nav button. if (newIndex === 0) { document.getElementById('peso-prev-button').click(); } else if (newIndex === 1) { document.getElementById('peso-next-button').click(); } }; })(); // --- End of IIFE (Immediately Invoked Function Expression) ---