A required library could not be loaded.

'; return; } const { jsPDF } = jspdf; // --- STATE --- let userResponses = {}; // --- ELEMENT SELECTORS --- const tabs = document.querySelectorAll('.tab-btn'); const tabContents = document.querySelectorAll('.tab-content'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); // Inputs const allInputs = { q1: document.getElementById('q1'), q2: document.getElementById('q2'), q3: document.getElementById('q3'), }; // Results const getInsightsBtn = document.getElementById('get-insights-btn'); const resultsLoader = document.getElementById('results-loader'); const resultsOutput = document.getElementById('results-output'); const summaryContentContainer = document.getElementById('summary-content-container'); const downloadPdfBtn = document.getElementById('download-pdf-btn'); // --- INITIALIZATION --- const initialize = () => { updateNavButtons(); attachEventListeners(); }; // --- EVENT LISTENERS --- const attachEventListeners = () => { tabs.forEach(tab => tab.addEventListener('click', () => switchTab(tab.dataset.tab))); prevBtn.addEventListener('click', navigatePrev); nextBtn.addEventListener('click', navigateNext); getInsightsBtn.addEventListener('click', handleGetInsights); downloadPdfBtn.addEventListener('click', handleDownloadPdf); }; // --- NAVIGATION --- const switchTab = (targetTab) => { tabs.forEach(tab => tab.classList.toggle('active', tab.dataset.tab === targetTab)); tabContents.forEach(content => content.classList.toggle('active', content.id === targetTab)); updateNavButtons(); }; const updateNavButtons = () => { const activeTabIndex = Array.from(tabs).findIndex(tab => tab.classList.contains('active')); prevBtn.style.visibility = activeTabIndex === 0 ? 'hidden' : 'visible'; nextBtn.style.visibility = activeTabIndex === tabs.length - 1 ? 'hidden' : 'visible'; }; const navigatePrev = () => { const activeTabIndex = Array.from(tabs).findIndex(tab => tab.classList.contains('active')); if (activeTabIndex > 0) switchTab(tabs[activeTabIndex - 1].dataset.tab); }; const navigateNext = () => { const activeTabIndex = Array.from(tabs).findIndex(tab => tab.classList.contains('active')); if (activeTabIndex < tabs.length - 1) switchTab(tabs[activeTabIndex + 1].dataset.tab); }; // --- API & RESULTS LOGIC --- const handleGetInsights = async () => { resultsLoader.classList.remove('hidden'); resultsOutput.classList.add('hidden'); getInsightsBtn.style.display = 'none'; userResponses = { q1: allInputs.q1.value, q2: allInputs.q2.value, q3: allInputs.q3.value, }; const prompt = buildPrompt(); const insightsText = await callGeminiApi(prompt); renderSummary(insightsText); resultsLoader.classList.add('hidden'); resultsOutput.classList.remove('hidden'); }; const buildPrompt = () => { let screeningResult = "low likelihood of astigmatism"; if (userResponses.q1 === 'Yes') { screeningResult = "some indication of potential astigmatism"; } return ` As a health information AI assistant (not a medical professional), analyze the following responses from an astigmatism screening tool. **User's Responses:** - While looking at the chart, did some lines appear darker or more in focus than others? **${userResponses.q1}** - Do you experience blurry or distorted vision at both near and far distances? **${userResponses.q2}** - Do you experience eye strain, squinting, or headaches after focusing? **${userResponses.q3}** **Screening Result Interpretation:** The user's response to the chart question suggests a **${screeningResult}**. **Task:** Generate a supportive and educational summary. Structure your response into the following sections using the exact headings: ### Your Screening Results Explained Based on the **Screening Result Interpretation**, explain what the user's experience means in simple terms. If the result indicates potential astigmatism (q1 is 'Yes'), explain that this can happen when the eye's cornea is shaped more like a football than a basketball, causing light to focus unevenly. If the result is low likelihood, state that their responses do not strongly indicate astigmatism based on this screening. ### Connecting Your Symptoms Briefly discuss how their other reported symptoms (blurry vision, eye strain) are commonly associated with refractive errors like astigmatism. ### Recommended Next Steps Strongly recommend that the user schedule a comprehensive eye exam with an optometrist or ophthalmologist for a definitive diagnosis. Emphasize that only a professional can determine their vision needs. **IMPORTANT:** Conclude the entire response with a clear, bolded disclaimer: **Disclaimer: This is a screening tool, not a diagnosis. The information provided is for educational purposes only. Consult with a qualified eye care professional for any vision concerns.** `; }; const callGeminiApi = async (prompt) => { const apiKey = ""; // Provided by environment const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`; const payload = { contents: [{ role: "user", parts: [{ text: prompt }] }] }; try { const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!response.ok) throw new Error(`API Error: ${response.status}`); const data = await response.json(); return data.candidates[0].content.parts[0].text; } catch (error) { console.error("Gemini API Error:", error); return "## Error\nCould not generate insights. Please try again later.\n\n**Disclaimer:** This is not medical advice."; } }; const renderSummary = (insightsText) => { document.getElementById('summary-date').textContent = `Report generated on ${new Date().toLocaleDateString('en-US')}`; const screeningResult = userResponses.q1 === 'Yes' ? "Indicates potential for astigmatism." : "Does not strongly indicate astigmatism."; const riskColor = userResponses.q1 === 'Yes' ? "bg-yellow-100 text-yellow-800" : "bg-green-100 text-green-800"; const resultsHtml = `

Your Screening Summary

Your Answers

• Lines appear different: ${userResponses.q1}
• Blurry/distorted vision: ${userResponses.q2}
• Eye strain/headaches: ${userResponses.q3}

`; const insightsHtml = insightsText .replace(/### (.*?)\n/g, '

$1

') .replace(/\n\n/g, '

') .replace(/\n- /g, '

• ') .replace(/(\n- .*?)+/g, (match) => match.replace(/\n- /g, '
• ') + '

') .replace(/

/,'') .replace(/\*\*(.*?)\*\*/g, '$1'); summaryContentContainer.innerHTML = resultsHtml + insightsHtml; }; // --- PDF GENERATION --- const handleDownloadPdf = () => { const content = document.getElementById('pdf-content'); if (!content) return; html2canvas(content, { scale: 2, useCORS: true, backgroundColor: '#ffffff' }) .then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const ratio = canvas.width / canvas.height; const imgWidth = pdfWidth - 20; let imgHeight = imgWidth / ratio; let heightLeft = imgHeight; let position = 10; pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight); heightLeft -= (pdf.internal.pageSize.getHeight() - 20); while (heightLeft > 0) { position = -heightLeft - 10; pdf.addPage(); pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight); heightLeft -= (pdf.internal.pageSize.getHeight() - 20); } pdf.save('My-Astigmatism-Screening-Report.pdf'); }) .catch(err => console.error("PDF Generation Error:", err)); }; // --- START THE APP --- initialize(); });