Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RetiCheck | AI Analysis Report</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } | |
| body { background: #0f172a; color: white; padding: 30px; } | |
| .report-container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(15px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 30px; | |
| padding: 40px; | |
| } | |
| .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #334155; padding-bottom: 20px; } | |
| .logo span { color: #00f2fe; } | |
| .visualization-area { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| margin: 30px 0; | |
| } | |
| .img-card { | |
| background: #1e293b; | |
| padding: 15px; | |
| border-radius: 20px; | |
| text-align: center; | |
| } | |
| .img-card img { | |
| width: 100%; | |
| height: 250px; | |
| object-fit: contain; | |
| border-radius: 15px; | |
| margin-bottom: 10px; | |
| border: 2px solid #334155; | |
| background: #000; | |
| } | |
| .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; } | |
| .res-card { background: rgba(255,255,255,0.05); padding: 20px; border-radius: 15px; text-align: center; border-left: 4px solid #334155; } | |
| .btn-print { | |
| width: 100%; | |
| padding: 15px; | |
| background: linear-gradient(90deg, #00f2fe, #4facfe); | |
| border: none; | |
| border-radius: 12px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| margin-top: 20px; | |
| color: #0f172a; | |
| } | |
| .btn-back { | |
| width: 100%; | |
| padding: 15px; | |
| background: #334155; | |
| border: none; | |
| border-radius: 12px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| margin-top: 15px; | |
| color: white; | |
| transition: 0.3s; | |
| } | |
| .btn-back:hover { background: #475569; } | |
| .btn-voice { | |
| width: 100%; | |
| padding: 15px; | |
| background: rgba(0, 242, 254, 0.1); | |
| border: 2px solid #00f2fe; | |
| border-radius: 12px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| margin-top: 30px; | |
| color: #00f2fe; | |
| display: flex; justify-content: center; align-items: center; gap: 10px; | |
| transition: 0.3s; | |
| } | |
| .btn-voice:hover { background: #00f2fe; color: #0f172a; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="report-container" id="pdf-content"> | |
| <div class="header"> | |
| <h2 class="logo">RetiCheck <span>AI Report</span></h2> | |
| <div id="header-status" style="color: #10b981; font-weight:bold;">● System Diagnosis: Loading...</div> | |
| </div> | |
| <div class="visualization-area"> | |
| <div class="img-card"> | |
| <img id="display-orig" src="" alt="Original Scan"> | |
| <p style="font-size: 13px; color: #94a3b8;">Original Fundus Image</p> | |
| </div> | |
| <div class="img-card"> | |
| <img id="display-heat" src="" alt="Heatmap Scan"> | |
| <p style="font-size: 13px; color: #00f2fe;" id="heatmap-caption">AI Heatmap Visualization (XAI)</p> | |
| </div> | |
| </div> | |
| <h3>Pathology Detection</h3> | |
| <div class="result-grid"> | |
| <div class="res-card" id="main-result-card"> | |
| <p style="font-size: 12px; color: #94a3b8;" id="pred-title">Analyzing...</p> | |
| <h2 id="pred-score">--%</h2> | |
| <small id="pred-status">Please wait...</small> | |
| </div> | |
| <div class="res-card dummy-card"> | |
| <p style="font-size: 12px; color: #94a3b8;">Glaucoma</p> | |
| <h2 style="color: #10b981;">--</h2> | |
| <small>Scanning...</small> | |
| </div> | |
| <div class="res-card dummy-card"> | |
| <p style="font-size: 12px; color: #94a3b8;">AMD</p> | |
| <h2 style="color: #10b981;">--</h2> | |
| <small>Scanning...</small> | |
| </div> | |
| </div> | |
| <div id="verdict-box" style="margin-top: 30px; padding: 20px; border-radius: 15px; border: 1px solid #334155;"> | |
| <strong id="verdict-title">AI Clinical Verdict:</strong> | |
| <p id="verdict-text" style="font-size: 14px; margin-top: 5px;">Analyzing clinical correlations...</p> | |
| </div> | |
| </div> | |
| <div style="max-width: 1000px; margin: 0 auto;"> | |
| <button class="btn-voice" id="voiceBtn"> | |
| <i class="fa-solid fa-volume-high"></i> Listen to AI Report | |
| </button> | |
| <button class="btn-print" id="downloadBtn" onclick="generatePDF()">Download Medical Report (PDF)</button> | |
| <button class="btn-back" onclick="window.location.href='/upload'">Scan Another Image (Go Back)</button> | |
| </div> | |
| <script> | |
| function generatePDF() { | |
| const btn = document.getElementById('downloadBtn'); | |
| btn.innerText = "Generating PDF... Please wait"; | |
| btn.style.opacity = "0.7"; | |
| const element = document.getElementById('pdf-content'); | |
| const opt = { | |
| margin: 0.3, | |
| filename: 'RetiCheck_AI_Report.pdf', | |
| image: { type: 'jpeg', quality: 0.98 }, | |
| html2canvas: { scale: 2, useCORS: true, backgroundColor: '#0f172a' }, | |
| jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' } | |
| }; | |
| html2pdf().set(opt).from(element).save().then(() => { | |
| btn.innerText = "Download Medical Report (PDF)"; | |
| btn.style.opacity = "1"; | |
| }); | |
| } | |
| // --- PUDHU CODE: 100% BULLETPROOF LOGIC 👇 --- | |
| const aiDataJSON = localStorage.getItem('aiResult'); | |
| // 1. டேட்டா இல்லையா? அமைதியாக வெளியேறு (எந்த அலர்ட்டும் இல்லை) | |
| if(!aiDataJSON || aiDataJSON === "undefined" || aiDataJSON === "null") { | |
| try { | |
| window.location.replace('/upload'); | |
| } catch(e) { | |
| document.getElementById('header-status').innerText = "Data missing. Please go back."; | |
| document.getElementById('header-status').style.color = "red"; | |
| } | |
| } else { | |
| // 2. டேட்டா இருந்தால் மட்டும் ப்ராசஸ் செய் | |
| try { | |
| const aiData = JSON.parse(aiDataJSON); | |
| // இமேஜ் செட் பண்ணும் லாஜிக் | |
| if(aiData.orig_img) { | |
| document.getElementById('display-orig').src = "data:image/jpeg;base64," + aiData.orig_img; | |
| } | |
| if(aiData.heat_gen && aiData.heat_img) { | |
| document.getElementById('display-heat').src = "data:image/jpeg;base64," + aiData.heat_img; | |
| } else if(aiData.orig_img) { | |
| document.getElementById('display-heat').src = "data:image/jpeg;base64," + aiData.orig_img; | |
| document.getElementById('heatmap-caption').innerText = "Healthy Retina (No Heatmap Needed)"; | |
| document.getElementById('heatmap-caption').style.color = "#10b981"; | |
| } | |
| // டெக்ஸ்ட் செட் பண்ணும் லாஜிக் | |
| document.getElementById('header-status').innerText = "● System Diagnosis: " + aiData.triage; | |
| document.getElementById('pred-title').innerText = "AI Prediction: " + aiData.disease; | |
| document.getElementById('pred-score').innerText = aiData.confidence; | |
| document.getElementById('pred-status').innerText = "Status: " + aiData.status; | |
| document.getElementById('verdict-text').innerText = "Action Required: " + aiData.action + " | Doctor Advice: " + aiData.advice; | |
| // கலர் மாத்தும் லாஜிக் | |
| const mainCard = document.getElementById('main-result-card'); | |
| const verdictBox = document.getElementById('verdict-box'); | |
| const verdictTitle = document.getElementById('verdict-title'); | |
| const headerStatus = document.getElementById('header-status'); | |
| const scoreValue = document.getElementById('pred-score'); | |
| let color = "#10b981"; | |
| if(aiData.triage === "URGENT") color = "#ef4444"; | |
| else if(aiData.triage === "REFERRAL" || aiData.triage === "WARNING") color = "#f59e0b"; | |
| headerStatus.style.color = color; | |
| scoreValue.style.color = color; | |
| mainCard.style.borderLeftColor = color; | |
| verdictBox.style.background = color === "#10b981" ? "rgba(16, 185, 129, 0.1)" : (color === "#ef4444" ? "rgba(239, 68, 68, 0.1)" : "rgba(245, 158, 11, 0.1)"); | |
| verdictBox.style.borderColor = color; | |
| verdictTitle.style.color = color; | |
| const dummyCards = document.querySelectorAll('.dummy-card'); | |
| dummyCards.forEach(card => card.style.display = "none"); | |
| // 3. வாய்ஸ் சிஸ்டம் (க்ராஷ் ஆகாத பாதுகாப்பான முறை) | |
| const voiceBtn = document.getElementById('voiceBtn'); | |
| if (voiceBtn) { | |
| voiceBtn.addEventListener('click', function() { | |
| try { | |
| window.speechSynthesis.cancel(); | |
| let speech = new SpeechSynthesisUtterance(); | |
| let dialogue = ""; | |
| if(aiData.triage === "SAFE") { | |
| dialogue = "AI Diagnosis complete. The patient is safe. Result is " + aiData.disease + ". No major diseases detected."; | |
| } else { | |
| dialogue = "AI Diagnosis complete. Attention required. The result is " + aiData.disease + ". Please check the clinical verdict."; | |
| } | |
| speech.text = dialogue; | |
| speech.volume = 1; | |
| speech.rate = 0.95; | |
| speech.pitch = 1.1; | |
| speech.lang = 'en-US'; | |
| let voices = window.speechSynthesis.getVoices(); | |
| let femaleVoice = voices.find(voice => voice.name.includes('Female') || voice.name.includes('Google UK English Female') || voice.name.includes('en-US')); | |
| if(femaleVoice) speech.voice = femaleVoice; | |
| window.speechSynthesis.speak(speech); | |
| } catch(e) { | |
| console.log("Voice Assistant Error: System doesn't support speech API here."); | |
| } | |
| }); | |
| } | |
| } catch (error) { | |
| // ஏதாவது எரர் வந்தால் ஆப் ஸ்டக் ஆகாது, மேல ரெட் கலர்ல எரர் காட்டும் | |
| document.getElementById('header-status').innerText = "Data Processing Error. Please go back."; | |
| document.getElementById('header-status').style.color = "red"; | |
| console.log("Data Error:", error); | |
| } | |
| } | |
| // --- PUDHU CODE END 👆 --- | |
| </script> | |
| </body> | |
| </html> |