Update templates/result.html

templates/result.html

@@ -77,7 +77,6 @@
         }
         .btn-back:hover { background: #475569; }
 
-        /* PUDHU CODE: பேசும் பட்டன் டிசைன் 👇 */
         .btn-voice {
             width: 100%;
             padding: 15px;
@@ -92,7 +91,6 @@
             transition: 0.3s;
         }
         .btn-voice:hover { background: #00f2fe; color: #0f172a; }
-        /* PUDHU CODE END 👆 */
     </style>
 </head>
 <body>
@@ -144,6 +142,7 @@
         <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>
@@ -170,9 +169,14 @@
             });
         }
 
-        // --- PUDHU CODE: AI VOICE ASSISTANT (Advanced Female Voice) 👇 ---
+        // --- PUDHU CODE: AI VOICE ASSISTANT (Crash-Proof Safeguard Added) 👇 ---
         function speakReport(triage, disease) {
-            // ஏற்கனவே பேசிட்டு இருந்தா நிப்பாட்டிடு
+            // மொபைல் ஆப்பில் வாய்ஸ் சப்போர்ட் இல்லை என்றால் எரர் வராமல் தடுக்க
+            if (!('speechSynthesis' in window)) {
+                alert("⚠️ App Notice: Voice Assistant is not supported in this mobile view. Please check the text report.");
+                return;
+            }
+
             window.speechSynthesis.cancel(); 
 
             let speech = new SpeechSynthesisUtterance();
@@ -186,11 +190,10 @@
             
             speech.text = dialogue; 
             speech.volume = 1;      
-            speech.rate = 0.95;     // கொஞ்சம் நிதானமா பேசுற வேகம்
-            speech.pitch = 1.1;     // கொஞ்சம் பெண் குரல் மாதிரி Pitch
+            speech.rate = 0.95;     
+            speech.pitch = 1.1;     
             speech.lang = 'en-US';  
 
-            // போன்ல இருக்குற வாய்ஸ் லிஸ்டை எடுத்து, "Female" வாய்ஸ் செலக்ட் பண்ற லாஜிக்
             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'));
             
@@ -198,86 +201,82 @@
                 speech.voice = femaleVoice;
             }
 
-            // பேசு!
             window.speechSynthesis.speak(speech);
         }
-        // வாய்ஸ் லிஸ்டை ரெடியா முன்கூட்டியே லோட் பண்ணி வைக்கும் கோடு
-        window.speechSynthesis.onvoiceschanged = function() {
-            window.speechSynthesis.getVoices();
-        };
-        // --- PUDHU CODE END 👆 ---
 
+        // போனில் வாய்ஸ் சிஸ்டம் இருந்தால் மட்டும் இதை ரன் பண்ணு (இதுதான் ஆப்பை க்ராஷ் ஆக்கிய வில்லன்!)
+        if ('speechSynthesis' in window) {
+            window.speechSynthesis.onvoiceschanged = function() {
+                window.speechSynthesis.getVoices();
+            };
+        }
+        // --- PUDHU CODE END 👆 ---
 
-        const aiDataJSON = localStorage.getItem('aiResult');
-        
-        if(!aiDataJSON) {
-            window.location.href = '/upload';
-        } else {
-            const aiData = JSON.parse(aiDataJSON);
+        // --- PUDHU CODE: Try-Catch பாதுகாப்பு அரண் 👇 ---
+        try {
+            const aiDataJSON = localStorage.getItem('aiResult');
             
-            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;
+            if(!aiDataJSON || aiDataJSON === "undefined" || aiDataJSON === "null") {
+                window.location.href = '/upload';
             } else {
-                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";
-            }
+                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 {
+                    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";
+                }
 
-            const headerStatus = document.getElementById('header-status');
-            const mainCard = document.getElementById('main-result-card');
-            const scoreTitle = document.getElementById('pred-title');
-            const scoreValue = document.getElementById('pred-score');
-            const scoreStatus = document.getElementById('pred-status');
-            const dummyCards = document.querySelectorAll('.dummy-card');
-            
-            const verdictBox = document.getElementById('verdict-box');
-            const verdictTitle = document.getElementById('verdict-title');
-            const verdictText = document.getElementById('verdict-text');
+                const headerStatus = document.getElementById('header-status');
+                const mainCard = document.getElementById('main-result-card');
+                const scoreTitle = document.getElementById('pred-title');
+                const scoreValue = document.getElementById('pred-score');
+                const scoreStatus = document.getElementById('pred-status');
+                const dummyCards = document.querySelectorAll('.dummy-card');
+                
+                const verdictBox = document.getElementById('verdict-box');
+                const verdictTitle = document.getElementById('verdict-title');
+                const verdictText = document.getElementById('verdict-text');
 
-            headerStatus.innerText = "● System Diagnosis: " + aiData.triage;
-            scoreTitle.innerText = "AI Prediction: " + aiData.disease;
-            scoreValue.innerText = aiData.confidence;
-            scoreStatus.innerText = "Status: " + aiData.status;
+                headerStatus.innerText = "● System Diagnosis: " + aiData.triage;
+                scoreTitle.innerText = "AI Prediction: " + aiData.disease;
+                scoreValue.innerText = aiData.confidence;
+                scoreStatus.innerText = "Status: " + aiData.status;
 
-            verdictText.innerText = "Action Required: " + aiData.action + " | Doctor Advice: " + aiData.advice;
+                verdictText.innerText = "Action Required: " + aiData.action + " | Doctor Advice: " + aiData.advice;
 
-            if(aiData.triage === "SAFE") {
-                const color = "#10b981"; 
-                headerStatus.style.color = color;
-                scoreValue.style.color = color;
-                mainCard.style.borderLeftColor = color;
-                verdictBox.style.background = "rgba(16, 185, 129, 0.1)";
-                verdictBox.style.borderColor = color;
-                verdictTitle.style.color = color;
-            } else if(aiData.triage === "URGENT") {
-                const color = "#ef4444"; 
-                headerStatus.style.color = color;
-                scoreValue.style.color = color;
-                mainCard.style.borderLeftColor = color;
-                verdictBox.style.background = "rgba(239, 68, 68, 0.1)";
-                verdictBox.style.borderColor = color;
-                verdictTitle.style.color = color;
-            } else {
-                const color = "#f59e0b"; 
-                headerStatus.style.color = color;
-                scoreValue.style.color = color;
-                mainCard.style.borderLeftColor = color;
-                verdictBox.style.background = "rgba(245, 158, 11, 0.1)";
-                verdictBox.style.borderColor = color;
-                verdictTitle.style.color = color;
-            }
+                if(aiData.triage === "SAFE") {
+                    const color = "#10b981"; 
+                    headerStatus.style.color = color;
+                    scoreValue.style.color = color;
+                    mainCard.style.borderLeftColor = color;
+                    verdictBox.style.background = "rgba(16, 185, 129, 0.1)";
+                    verdictBox.style.borderColor = color;
+                    verdictTitle.style.color = color;
+                } else if(aiData.triage === "URGENT") {
+                    const color = "#ef4444"; 
+                    headerStatus.style.color = color;
+                    scoreValue.style.color = color;
+                    mainCard.style.borderLeftColor = color;
+                    verdictBox.style.background = "rgba(239, 68, 68, 0.1)";
+                    verdictBox.style.borderColor = color;
+                    verdictTitle.style.color = color;
+                } else {
+                    const color = "#f59e0b"; 
+                    headerStatus.style.color = color;
+                    scoreValue.style.color = color;
+                    mainCard.style.borderLeftColor = color;
+                    verdictBox.style.background = "rgba(245, 158, 11, 0.1)";
+                    verdictBox.style.borderColor = color;
+                    verdictTitle.style.color = color;
+                }
 
-            dummyCards.forEach(card => card.style.display = "none");
+                dummyCards.forEach(card => card.style.display = "none");
 
-            // --- PUDHU CODE: பட்டனை தொட்டா பேசுற மாதிரி இணைக்கப்பட்டுள்ளது 👇 ---
-            document.getElementById('voiceBtn').addEventListener('click', function() {
-                speakReport(aiData.triage, aiData.disease);
-            });
-            // --- PUDHU CODE END 👆 ---
-        }
-    </script>
-</body>
-</html>
+                // பட்டனை தொட்டா பேசுற லாஜிக்
+                document.getElementById('voiceBtn').addEventListener