Update app.py

app.py

@@ -20,28 +20,42 @@ MODELS = {
         "id": "nickmuchi/vit-finetuned-chest-xray-pneumonia",
         "desc": "Tuberculosis & Pneumonia (Chest X-Ray)",
         "safe": ["NORMAL", "normal", "No Pneumonia"],
-        "rules": {"max_saturation": 30, "reject_msg": "Invalid: Too colorful. Upload B&W X-Ray."}
+        "rules": {"max_sat": 30, "reject_msg": "Invalid: Too colorful. Upload B&W X-Ray."}
     },
     "cough": { 
         "type": "audio",
         "id": "MIT/ast-finetuned-audioset-10-10-0.4593",
         "desc": "COPD & Respiratory Screening (Cough Audio)",
         "target_labels": ["Cough", "Throat clearing", "Respiratory sounds", "Wheeze"],
-        "rules": {"min_duration": 1.0, "reject_msg": "Invalid: Audio too short or silent."}
+        "rules": {"min_duration": 0.5, "reject_msg": "Invalid: Audio too short or silent."}
+    },
+    "fracture": {
+        "type": "image",
+        "id": "dima806/bone_fracture_detection",
+        "desc": "Bone Fracture Detection (X-Ray)",
+        "safe": ["normal", "healed"],
+        "rules": {"max_sat": 30, "reject_msg": "Invalid: Too colorful. Upload B&W X-Ray."}
+    },
+    "brain": {
+        "type": "image",
+        "id": "Hemgg/brain-tumor-classification",
+        "desc": "Brain Tumor & Stroke Screening (MRI/CT)",
+        "safe": ["no_tumor"],
+        "rules": {"max_sat": 30, "reject_msg": "Invalid: Too colorful. Upload B&W MRI Scan."}
     },
     "eye": {
         "type": "image",
         "id": "AventIQ-AI/resnet18-cataract-detection-system", 
         "desc": "Cataract Detection (Eye Photo)",
         "safe": ["Normal", "normal", "healthy"],
-        "rules": {"min_saturation": 20, "min_white_ratio": 0.05, "reject_msg": "Invalid: No eye detected."}
+        "rules": {"min_sat": 20, "min_white": 0.05, "reject_msg": "Invalid: No eye detected."}
     },
     "skin": {
         "type": "image",
         "id": "Anwarkh1/Skin_Cancer-Image_Classification",
         "desc": "Dermatology Analysis (Lesion Photo)",
         "safe": ["Benign", "benign", "nv", "bkl"],
-        "rules": {"min_saturation": 20, "max_white_ratio": 0.25, "reject_msg": "Invalid: Not a skin close-up."}
+        "rules": {"min_sat": 20, "max_white": 0.25, "reject_msg": "Invalid: Not a skin close-up."}
     }
 }
 
@@ -59,7 +73,6 @@ class MedicalEngine:
             transforms.Normalize(mean=[0.5, 0.5, 0.5], std=[0.5, 0.5, 0.5])
         ])
 
-    # --- IMAGE VALIDATION ---
     def validate_image(self, image, task):
         rules = MODELS[task].get("rules", {})
         img_hsv = image.convert('HSV')
@@ -71,63 +84,44 @@ class MedicalEngine:
         white_pixels = np.logical_and(img_np[:,:,1] < 40, img_np[:,:,2] > 180)
         white_ratio = np.sum(white_pixels) / white_pixels.size
 
-        if "max_saturation" in rules and avg_sat > rules["max_saturation"]: return False, rules["reject_msg"]
-        if "min_saturation" in rules and avg_sat < rules["min_saturation"]: return False, rules["reject_msg"]
-        if "min_white_ratio" in rules and white_ratio < rules["min_white_ratio"]: return False, rules["reject_msg"]
-        if "max_white_ratio" in rules and white_ratio > rules["max_white_ratio"]: return False, rules["reject_msg"]
+        if "max_sat" in rules and avg_sat > rules["max_sat"]: return False, rules["reject_msg"]
+        if "min_sat" in rules and avg_sat < rules["min_sat"]: return False, rules["reject_msg"]
+        if "min_white" in rules and white_ratio < rules["min_white"]: return False, rules["reject_msg"]
+        if "max_white" in rules and white_ratio > rules["max_white"]: return False, rules["reject_msg"]
         
         return True, ""
 
-    # --- AUDIO VALIDATION ---
     def validate_audio(self, audio_array, sr):
         duration = len(audio_array) / sr
         if duration < 0.5: return False, "Audio too short (< 0.5s)."
         if np.max(np.abs(audio_array)) < 0.01: return False, "Audio is silent/empty."
         return True, ""
 
-    # --- PREDICTION LOGIC ---
     def predict(self, file_bytes, task):
         model_cfg = MODELS[task]
         
-        # === AUDIO PIPELINE ===
         if model_cfg["type"] == "audio":
-            print(f"⏳ Processing Audio for {task}...")
             try:
-                # Load Audio
                 audio, sr = librosa.load(io.BytesIO(file_bytes), sr=16000)
-                
-                # Guardrail
                 is_valid, msg = self.validate_audio(audio, sr)
                 if not is_valid: return {"error": msg, "risk": "INVALID"}
 
-                # Inference
                 classifier = pipeline("audio-classification", model=model_cfg["id"])
-                # We save to temp file because pipeline prefers paths or structured input
                 sf.write("temp.wav", audio, sr)
                 outputs = classifier("temp.wav")
                 
-                # Logic: Check if top prediction is a "Cough"
                 top = outputs[0]
                 target_labels = model_cfg["target_labels"]
-                
-                # Check if ANY of the top 3 results match "Cough"
                 is_cough = any(target in res['label'] for res in outputs[:3] for target in target_labels)
                 
                 risk = "HIGH" if is_cough and top['score'] > 0.4 else "LOW"
                 label = f"Detected: {top['label']}" if is_cough else "Normal / Background Noise"
                 
-                return {
-                    "task": task,
-                    "desc": model_cfg["desc"],
-                    "prediction": {"label": label, "score": top['score']},
-                    "risk": risk
-                }
+                return {"task": task, "desc": model_cfg["desc"], "prediction": {"label": label, "score": top['score']}, "risk": risk}
             except Exception as e:
                 return {"error": f"Audio Error: {str(e)}"}
 
-        # === IMAGE PIPELINE ===
         else:
-            print(f"⏳ Processing Image for {task}...")
             try:
                 image = Image.open(io.BytesIO(file_bytes)).convert("RGB")
                 is_valid, msg = self.validate_image(image, task)
@@ -138,7 +132,7 @@ class MedicalEngine:
                 model.to(self.device)
                 model.eval()
 
-                inputs = self.transform(image).unsqueeze(0).to(self.device)
+                inputs = self.img_transform(image).unsqueeze(0).to(self.device)
                 with torch.no_grad():
                     outputs = model(inputs)
                     probs = F.softmax(outputs.logits, dim=-1)
@@ -152,7 +146,7 @@ class MedicalEngine:
                 
                 if top["score"] < 0.5: risk = "UNCERTAIN"
                 elif is_safe: risk = "LOW"
-                else: risk = "HIGH" if top["score"] > 0.75 else "MODERATE"
+                else: risk = "HIGH" if top["score"] > 0.70 else "MODERATE"
                 
                 del model
                 gc.collect()
@@ -180,93 +174,130 @@ def home():
 <!DOCTYPE html>
 <html>
 <head>
-    <title>MediScan Rural | Ayushman Bharat Node</title>
+    <title>MediScan Rural | Govt of Meghalaya</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body class="bg-slate-50 min-h-screen flex flex-col font-sans">
 
-    <nav class="bg-blue-900 text-white p-4 shadow-xl">
+    <nav class="bg-white border-b-4 border-blue-900 shadow-sm p-3">
         <div class="container mx-auto flex justify-between items-center">
-            <div class="flex items-center gap-3">
-                <i class="fas fa-heartbeat text-2xl text-green-400"></i>
+            <div class="flex items-center gap-4">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Seal_of_Meghalaya.svg/150px-Seal_of_Meghalaya.svg.png" class="h-16">
                 <div>
-                    <h1 class="text-xl font-bold">MediScan Rural</h1>
-                    <p class="text-xs text-blue-200">North East Node • Online</p>
+                    <h2 class="text-sm font-bold text-gray-500 uppercase tracking-widest" data-translate="govt_title">GOVERNMENT OF MEGHALAYA</h2>
+                    <h1 class="text-2xl font-extrabold text-blue-900 tracking-tight">MediScan Rural AI</h1>
+                    <p class="text-xs text-green-600 font-bold flex items-center gap-1">
+                        <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+                        <span data-translate="online_status">Online Node: Shillong HQ</span>
+                    </p>
                 </div>
             </div>
-            <div class="text-right hidden md:block">
-                <span class="bg-blue-800 px-3 py-1 rounded text-xs font-bold border border-blue-600">
-                    <i class="fas fa-satellite-dish mr-1"></i> Ayushman Bharat Linked
-                </span>
+            
+            <div class="flex flex-col items-end gap-2">
+                <select id="lang-select" onchange="changeLanguage()" class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2">
+                    <option value="en">🇬🇧 English</option>
+                    <option value="hi">🇮🇳 हिंदी (Hindi)</option>
+                    <option value="as">🇮🇳 অসমীয়া (Assamese)</option>
+                    <option value="kha">🌲 Khasi</option>
+                    <option value="gar">⛰️ Garo</option>
+                </select>
+                
+                <div class="hidden md:flex items-center gap-2 bg-blue-50 px-3 py-1 rounded text-xs font-bold border border-blue-100 text-blue-800">
+                    <img src="https://upload.wikimedia.org/wikipedia/en/c/cf/Aadhaar_Logo.svg" class="h-4">
+                    <span data-translate="abha_link">ABHA Linked</span>
+                </div>
             </div>
         </div>
     </nav>
 
-    <div class="container mx-auto mt-8 p-4 max-w-3xl flex-grow">
+    <div class="container mx-auto mt-6 p-4 max-w-5xl flex-grow">
         
-        <div class="grid grid-cols-4 gap-2 mb-6">
-            <button onclick="setTask('lungs', 'image')" id="btn-lungs" class="p-3 bg-white rounded-lg shadow hover:bg-blue-50 border-2 border-transparent transition text-sm font-bold text-gray-600">
-                <i class="fas fa-lungs text-blue-500 block text-2xl mb-1"></i> Lungs
+        <div class="grid grid-cols-3 md:grid-cols-6 gap-3 mb-6">
+            <button onclick="setTask('lungs', 'image')" id="btn-lungs" class="p-3 bg-white rounded-xl shadow-sm hover:shadow-md border-2 border-transparent transition text-sm font-bold text-gray-600 flex flex-col items-center group">
+                <i class="fas fa-lungs text-blue-500 text-3xl mb-2 group-hover:scale-110 transition-transform"></i>
+                <span data-translate="btn_lungs">Lungs</span>
             </button>
-            <button onclick="setTask('cough', 'audio')" id="btn-cough" class="p-3 bg-white rounded-lg shadow hover:bg-teal-50 border-2 border-transparent transition text-sm font-bold text-gray-600">
-                <i class="fas fa-head-side-cough text-teal-500 block text-2xl mb-1"></i> COPD
+            <button onclick="setTask('cough', 'audio')" id="btn-cough" class="p-3 bg-white rounded-xl shadow-sm hover:shadow-md border-2 border-transparent transition text-sm font-bold text-gray-600 flex flex-col items-center group">
+                <i class="fas fa-head-side-cough text-teal-500 text-3xl mb-2 group-hover:scale-110 transition-transform"></i>
+                <span data-translate="btn_cough">Cough/COPD</span>
             </button>
-            <button onclick="setTask('eye', 'image')" id="btn-eye" class="p-3 bg-white rounded-lg shadow hover:bg-indigo-50 border-2 border-transparent transition text-sm font-bold text-gray-600">
-                <i class="fas fa-eye text-indigo-500 block text-2xl mb-1"></i> Eye
+            <button onclick="setTask('fracture', 'image')" id="btn-fracture" class="p-3 bg-white rounded-xl shadow-sm hover:shadow-md border-2 border-transparent transition text-sm font-bold text-gray-600 flex flex-col items-center group">
+                <i class="fas fa-bone text-slate-500 text-3xl mb-2 group-hover:scale-110 transition-transform"></i>
+                <span data-translate="btn_bone">Fracture</span>
             </button>
-            <button onclick="setTask('skin', 'image')" id="btn-skin" class="p-3 bg-white rounded-lg shadow hover:bg-orange-50 border-2 border-transparent transition text-sm font-bold text-gray-600">
-                <i class="fas fa-hand-dots text-orange-500 block text-2xl mb-1"></i> Skin
+            <button onclick="setTask('brain', 'image')" id="btn-brain" class="p-3 bg-white rounded-xl shadow-sm hover:shadow-md border-2 border-transparent transition text-sm font-bold text-gray-600 flex flex-col items-center group">
+                <i class="fas fa-brain text-purple-500 text-3xl mb-2 group-hover:scale-110 transition-transform"></i>
+                <span data-translate="btn_brain">Brain</span>
+            </button>
+            <button onclick="setTask('eye', 'image')" id="btn-eye" class="p-3 bg-white rounded-xl shadow-sm hover:shadow-md border-2 border-transparent transition text-sm font-bold text-gray-600 flex flex-col items-center group">
+                <i class="fas fa-eye text-indigo-500 text-3xl mb-2 group-hover:scale-110 transition-transform"></i>
+                <span data-translate="btn_eye">Eye</span>
+            </button>
+            <button onclick="setTask('skin', 'image')" id="btn-skin" class="p-3 bg-white rounded-xl shadow-sm hover:shadow-md border-2 border-transparent transition text-sm font-bold text-gray-600 flex flex-col items-center group">
+                <i class="fas fa-hand-dots text-orange-500 text-3xl mb-2 group-hover:scale-110 transition-transform"></i>
+                <span data-translate="btn_skin">Skin</span>
             </button>
         </div>
 
-        <div class="bg-white rounded-2xl shadow-xl p-6 border border-gray-200">
-            <h2 id="header-text" class="text-xl font-bold text-gray-700 mb-4">Select a Category above</h2>
+        <div class="bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
+            <h2 id="header-text" class="text-xl font-bold text-gray-700 mb-6 text-center border-b pb-4">Select a Category</h2>
             
             <div id="inputs" class="opacity-50 pointer-events-none transition-opacity mb-6">
                 <div class="grid grid-cols-2 gap-4 mb-4">
-                    <input type="text" id="p-name" placeholder="Patient Name" class="border p-2 rounded bg-gray-50">
-                    <input type="text" placeholder="Age / ID" class="border p-2 rounded bg-gray-50">
+                    <div>
+                        <label class="text-xs font-bold text-gray-400 uppercase" data-translate="lbl_name">Patient Name</label>
+                        <input type="text" id="p-name" class="w-full border p-2 rounded bg-gray-50 outline-none focus:border-blue-500">
+                    </div>
+                    <div>
+                        <label class="text-xs font-bold text-gray-400 uppercase" data-translate="lbl_age">Age / ID</label>
+                        <input type="text" class="w-full border p-2 rounded bg-gray-50 outline-none focus:border-blue-500">
+                    </div>
                 </div>
                 
-                <div onclick="document.getElementById('file-input').click()" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:bg-gray-50 transition">
+                <div onclick="document.getElementById('file-input').click()" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:bg-blue-50 transition group">
                     <input type="file" id="file-input" class="hidden" onchange="showPreview(event)" onclick="this.value=null">
                     
-                    <div id="placeholder">
-                        <i id="upload-icon" class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
-                        <p id="upload-text" class="text-gray-500 text-sm">Tap to upload</p>
+                    <div id="placeholder" class="group-hover:scale-105 transition-transform">
+                        <i id="upload-icon" class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
+                        <p id="upload-text" class="text-gray-500 font-medium" data-translate="txt_upload">Tap to upload</p>
                     </div>
                     
-                    <img id="img-preview" class="hidden mx-auto max-h-48 rounded shadow object-contain">
+                    <img id="img-preview" class="hidden mx-auto max-h-56 rounded shadow object-contain">
                     <audio id="audio-preview" controls class="hidden w-full mt-4"></audio>
                 </div>
             </div>
 
-            <button id="run-btn" onclick="analyze()" class="hidden w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-xl shadow-lg transition">
-                <i class="fas fa-microscope mr-2"></i> Run Diagnosis
+            <button id="run-btn" onclick="analyze()" class="hidden w-full bg-blue-900 hover:bg-blue-800 text-white font-bold py-4 rounded-xl shadow-lg transition transform hover:scale-[1.02] flex items-center justify-center gap-2">
+                <i class="fas fa-microscope"></i> <span data-translate="btn_run">Run Diagnosis</span>
             </button>
             
             <div id="loader" class="hidden text-center py-6">
                 <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-blue-500 border-t-transparent"></div>
-                <p class="text-sm text-gray-500 mt-2 font-semibold">Analyzing Data...</p>
+                <p class="text-sm text-gray-500 mt-2 font-semibold" data-translate="txt_analyzing">Analyzing Data...</p>
             </div>
 
-            <div id="result-box" class="hidden mt-6 border-t pt-6">
+            <div id="result-box" class="hidden mt-6 border-t pt-6 bg-gray-50 -mx-6 -mb-6 p-6 rounded-b-2xl">
                 <div class="flex justify-between items-start">
                     <div>
-                        <p class="text-xs font-bold text-gray-400 uppercase">Analysis</p>
+                        <p class="text-xs font-bold text-gray-400 uppercase" data-translate="lbl_result">Analysis Result</p>
                         <h1 id="res-label" class="text-2xl font-extrabold text-gray-800">--</h1>
-                        <p class="text-sm text-gray-600 mt-1">Confidence: <span id="res-conf" class="font-mono font-bold">--</span></p>
+                        <p class="text-sm text-gray-600 mt-1"><span data-translate="lbl_conf">Confidence</span>: <span id="res-conf" class="font-mono font-bold">--</span></p>
                     </div>
                     <span id="res-badge" class="px-3 py-1 rounded text-sm font-bold uppercase">--</span>
                 </div>
                 
-                <div id="alert-box" class="hidden mt-4 p-3 bg-red-50 text-red-800 rounded border border-red-200 text-sm">
-                    <i class="fas fa-ambulance mr-2"></i> <span id="alert-text">High Risk Detected.</span>
+                <div id="alert-box" class="hidden mt-4 p-4 rounded-lg border text-sm flex items-start gap-3 shadow-sm">
+                    <i class="fas fa-info-circle text-xl mt-0.5"></i> 
+                    <div>
+                        <strong class="block" data-translate="lbl_action">Action Required</strong>
+                        <span id="alert-text">--</span>
+                    </div>
                 </div>
 
-                <div class="mt-4 bg-gray-50 p-3 rounded border flex items-center justify-between text-xs">
-                    <span class="font-bold text-gray-500"><i class="fas fa-database mr-1"></i> Govt Sync</span>
+                <div class="mt-4 flex items-center justify-between text-xs text-gray-500 border-t pt-2">
+                    <span class="font-bold flex items-center gap-1"><i class="fas fa-database"></i> <span data-translate="lbl_sync">Govt Sync</span></span>
                     <span id="sync-msg" class="text-yellow-600"><i class="fas fa-sync fa-spin"></i> Pending...</span>
                 </div>
             </div>
@@ -275,38 +306,120 @@ def home():
     </div>
 
     <script>
+        // TRANSLATION DICTIONARY
+        const TRANSLATIONS = {
+            en: {
+                govt_title: "GOVERNMENT OF MEGHALAYA",
+                online_status: "Online Node: Shillong HQ",
+                abha_link: "ABHA Linked",
+                btn_lungs: "Lungs", btn_cough: "Cough/COPD", btn_bone: "Fracture", btn_brain: "Brain", btn_eye: "Eye", btn_skin: "Skin",
+                lbl_name: "Patient Name", lbl_age: "Age / ID",
+                txt_upload: "Tap to upload Scan/Photo",
+                btn_run: "Run Diagnosis",
+                txt_analyzing: "Downloading AI Model & Analyzing...",
+                lbl_result: "Analysis Result", lbl_conf: "Confidence",
+                lbl_action: "Action Required", lbl_sync: "Govt Sync"
+            },
+            hi: {
+                govt_title: "मेघालय सरकार",
+                online_status: "ऑनलाइन नोड: शिलांग मुख्यालय",
+                abha_link: "ABHA लिंक किया गया",
+                btn_lungs: "फेफड़े", btn_cough: "खांसी/COPD", btn_bone: "हड्डी", btn_brain: "मस्तिष्क", btn_eye: "आंख", btn_skin: "त्वचा",
+                lbl_name: "रोगी का नाम", lbl_age: "आयु / आईडी",
+                txt_upload: "फोटो अपलोड करें",
+                btn_run: "जांच शुरू करें",
+                txt_analyzing: "विश्लेषण कर रहा है...",
+                lbl_result: "परिणाम", lbl_conf: "विश्वास स्तर",
+                lbl_action: "आवश्यक कार्रवाई", lbl_sync: "सरकारी सिंक"
+            },
+            as: {
+                govt_title: "মেঘালয় চৰকাৰ",
+                online_status: "অনলাইন ন'ড: শ্বিলং",
+                abha_link: "ABHA সংযুক্ত",
+                btn_lungs: "হাঁওফাঁও", btn_cough: "কাহ", btn_bone: "হাৰ ভঙা", btn_brain: "মগজু", btn_eye: "চকু", btn_skin: "ছাল",
+                lbl_name: "ৰোগীৰ নাম", lbl_age: "বয়স / আইডি",
+                txt_upload: "ফটো আপলোড কৰক",
+                btn_run: "পৰীক্ষা কৰক",
+                txt_analyzing: "বিশ্লেষণ চলি আছে...",
+                lbl_result: "ফলাফল", lbl_conf: "নিশ্চয়তা",
+                lbl_action: "পৰৱৰ্তী পদক্ষেপ", lbl_sync: "চৰকাৰী ডাটাবেচ"
+            },
+            kha: { // Khasi Language
+                govt_title: "SORKAR MEGHALAYA",
+                online_status: "Online: Shillong",
+                abha_link: "ABHA Link",
+                btn_lungs: "Phopsa", btn_cough: "Jyrhoh", btn_bone: "Shyieng", btn_brain: "Jabieng", btn_eye: "Khmat", btn_skin: "Doh",
+                lbl_name: "Kyrteng Nongpang", lbl_age: "Rta / ID",
+                txt_upload: "Thep ia ka dur",
+                btn_run: "Leh Test",
+                txt_analyzing: "Dang Check...",
+                lbl_result: "Result", lbl_conf: "Jingshisha",
+                lbl_action: "Leh ia kane", lbl_sync: "Sorkar Sync"
+            },
+            gar: { // Garo Language
+                govt_title: "MEGHALAYA SORKARI",
+                online_status: "Online: Shillong",
+                abha_link: "ABHA Link",
+                btn_lungs: "Ka'sop", btn_cough: "Gusuk", btn_bone: "Greng", btn_brain: "Taning", btn_eye: "Mikron", btn_skin: "Bigil",
+                lbl_name: "Sagipani Bimung", lbl_age: "Bilsi / ID",
+                txt_upload: "Photo Gata",
+                btn_run: "Porikka Ka'bo",
+                txt_analyzing: "Niyenga...",
+                lbl_result: "Result", lbl_conf: "Bebera'ani",
+                lbl_action: "Nangchongmotgipa Kam", lbl_sync: "Sorkar Sync"
+            }
+        };
+
         let currTask = null;
         let currType = 'image';
         let currFile = null;
+        let currLang = 'en';
+
+        function changeLanguage() {
+            currLang = document.getElementById('lang-select').value;
+            let t = TRANSLATIONS[currLang];
+            
+            document.querySelectorAll('[data-translate]').forEach(el => {
+                let key = el.getAttribute('data-translate');
+                if (t[key]) el.innerText = t[key];
+            });
+            
+            // Refresh Header Text if task selected
+            if (currTask) {
+                let taskKey = "btn_" + currTask;
+                document.getElementById('header-text').innerHTML = `Upload <span class="uppercase text-blue-600">${t[taskKey]}</span>`;
+            }
+        }
 
         function setTask(task, type) {
             currTask = task;
             currType = type;
+            let t = TRANSLATIONS[currLang];
             
-            // Highlight Buttons
-            document.querySelectorAll('button[id^="btn-"]').forEach(b => b.classList.remove('ring-2', 'ring-blue-400', 'border-blue-500'));
-            document.getElementById('btn-'+task).classList.add('ring-2', 'ring-blue-400', 'border-blue-500');
+            // Buttons
+            document.querySelectorAll('button[id^="btn-"]').forEach(b => b.classList.remove('ring-2', 'ring-blue-400', 'border-blue-500', 'bg-blue-50'));
+            let btn = document.getElementById('btn-'+task);
+            btn.classList.add('ring-2', 'ring-blue-400', 'border-blue-500', 'bg-blue-50');
             
-            // UI Text
-            let taskName = task === 'cough' ? 'COUGH Audio' : task.toUpperCase() + ' Image';
+            // Text
+            let taskName = t["btn_" + task];
             document.getElementById('header-text').innerHTML = `Upload <span class="uppercase text-blue-600">${taskName}</span>`;
             
-            // Input Type Handling
+            // Input Logic
             let input = document.getElementById('file-input');
             let icon = document.getElementById('upload-icon');
             let text = document.getElementById('upload-text');
             
             if (type === 'audio') {
                 input.accept = "audio/*";
-                icon.className = "fas fa-microphone-alt text-3xl text-teal-500 mb-2";
-                text.innerText = "Tap to upload Cough Audio (.wav/.mp3)";
+                icon.className = "fas fa-microphone-alt text-4xl text-teal-500 mb-2";
             } else {
                 input.accept = "image/*";
-                icon.className = "fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2";
-                text.innerText = "Tap to upload Image";
+                icon.className = "fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2";
             }
+            text.innerText = t['txt_upload'];
 
-            // Reset
+            // Reset UI
             document.getElementById('inputs').classList.remove('opacity-50', 'pointer-events-none');
             document.getElementById('result-box').classList.add('hidden');
             document.getElementById('run-btn').classList.add('hidden');
@@ -361,7 +474,7 @@ def home():
                     document.getElementById('res-label').innerText = "Rejected";
                     document.getElementById('res-conf').innerText = "--";
                     updateBadge("INVALID", "bg-gray-200", "text-gray-700");
-                    showAlert(data.error || "Invalid File", "bg-gray-100");
+                    showAlert(data.error, "bg-gray-100", "text-gray-800");
                     return;
                 }
 
@@ -372,10 +485,10 @@ def home():
 
                 if (data.risk === "HIGH") {
                     updateBadge("HIGH RISK", "bg-red-100", "text-red-700");
-                    showAlert("Respiratory Symptom Detected. Refer to PHC.", "bg-red-50", "text-red-800");
+                    showAlert("Critical Issue. Referral Needed.", "bg-red-50", "text-red-800");
                 } else if (data.risk === "MODERATE") {
                     updateBadge("MODERATE", "bg-yellow-100", "text-yellow-700");
-                    showAlert("Moderate Risk. Monitor symptoms.", "bg-yellow-50", "text-yellow-800");
+                    showAlert("Moderate Risk. Monitor.", "bg-yellow-50", "text-yellow-800");
                 } else {
                     updateBadge("LOW RISK", "bg-green-100", "text-green-700");
                     document.getElementById('alert-box').classList.add('hidden');
@@ -401,7 +514,7 @@ def home():
         }
         function showAlert(msg, bg, color) {
             let a = document.getElementById('alert-box');
-            a.className = `mt-4 p-3 rounded border border-gray-200 text-sm ${bg} ${color || ''}`;
+            a.className = `mt-4 p-4 rounded-lg border flex items-start gap-3 ${bg} ${color}`;
             a.classList.remove('hidden');
             document.getElementById('alert-text').innerText = msg;
         }