`;
const highlightedSegment = `
${escapeHTML(originalSegment)}${tooltipHTML}
`;
correctedHTML = correctedHTML.substring(0, start_index) + highlightedSegment + correctedHTML.substring(end_index);
}
// Use DOMPurify to sanitize the final HTML
correctedOutput.innerHTML = DOMPurify.sanitize(correctedHTML.replace(/\n/g, '
')); resultsContainer.classList.remove('hidden'); displaySuggestionsList(corrections.reverse()); // re-reverse for display order } function displaySuggestionsList(corrections) { suggestionsList.innerHTML = ''; // Clear previous suggestions if (corrections.length === 0) { noSuggestionsP.classList.remove('hidden'); } else { noSuggestionsP.classList.add('hidden'); const typeColors = { Grammar: 'bg-blue-100 text-blue-800', Spelling: 'bg-red-100 text-red-800', Punctuation: 'bg-orange-100 text-orange-800', Style: 'bg-violet-100 text-violet-800', }; corrections.forEach(corr => { const card = document.createElement('div'); card.className = 'p-4 bg-white border border-gray-200 rounded-lg'; const typeClass = typeColors[corr.type] || 'bg-gray-100 text-gray-800'; card.innerHTML = DOMPurify.sanitize(`
')); resultsContainer.classList.remove('hidden'); displaySuggestionsList(corrections.reverse()); // re-reverse for display order } function displaySuggestionsList(corrections) { suggestionsList.innerHTML = ''; // Clear previous suggestions if (corrections.length === 0) { noSuggestionsP.classList.remove('hidden'); } else { noSuggestionsP.classList.add('hidden'); const typeColors = { Grammar: 'bg-blue-100 text-blue-800', Spelling: 'bg-red-100 text-red-800', Punctuation: 'bg-orange-100 text-orange-800', Style: 'bg-violet-100 text-violet-800', }; corrections.forEach(corr => { const card = document.createElement('div'); card.className = 'p-4 bg-white border border-gray-200 rounded-lg'; const typeClass = typeColors[corr.type] || 'bg-gray-100 text-gray-800'; card.innerHTML = DOMPurify.sanitize(`
${corr.type}
Change ${corr.original_text} to ${corr.suggested_text}
${corr.explanation}
`); suggestionsList.appendChild(card); }); } suggestionsPanel.classList.remove('hidden'); } function downloadPdf() { if (!originalText) { showError("Please proofread some text before downloading a report."); return; } const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFontSize(20); doc.text("Proofreading Report", 105, 20, { align: 'center' }); doc.setFontSize(12); doc.text("Original Text:", 14, 35); const originalLines = doc.splitTextToSize(originalText, 180); doc.setFontSize(10); doc.setTextColor(100); doc.text(originalLines, 14, 42); let startY = 42 + (originalLines.length * 5) + 10; if (currentCorrections.length > 0) { doc.autoTable({ startY: startY, head: [['Type', 'Original', 'Suggestion', 'Reason']], body: currentCorrections.map(c => [c.type, c.original_text, c.suggested_text, c.explanation]), theme: 'grid' }); } else { doc.setFontSize(12); doc.text("No corrections were suggested.", 14, startY); } doc.save('Proofreading_Report.pdf'); } function resetUI() { suggestionsPanel.classList.add('hidden'); resultsContainer.classList.add('hidden'); } // --- UI Helper Functions --- function toggleLoading(isLoading) { proofreadBtn.disabled = isLoading; loader.classList.toggle('hidden', !isLoading); btnText.classList.toggle('hidden', isLoading); } function showError(message) { errorMessage.textContent = message; errorMessage.classList.remove('hidden'); } function hideError() { errorMessage.classList.add('hidden'); } });