PJCOMMIT

main.py

@@ -0,0 +1,233 @@
+import os
+import sys
+import json
+import random
+import shutil
+import hashlib
+import uuid
+from typing import List
+import base64
+from io import BytesIO
+import time
+import threading
+import numpy as np
+import torch
+import torch.nn as nn
+from PIL import Image, ImageOps
+from matplotlib import cm
+
+import cv2
+from fastapi import FastAPI, File, UploadFile, Form, Request, Depends
+from fastapi.responses import HTMLResponse, RedirectResponse
+from fastapi.templating import Jinja2Templates
+from fastapi.staticfiles import StaticFiles
+
+sys.path.append(os.path.abspath(os.path.dirname(__file__)))
+from models.densenet.preprocess.preprocessingwangchan import get_tokenizer, get_transforms
+from models.densenet.train_densenet_only import DenseNet121Classifier
+from models.densenet.train_text_only import TextClassifier
+torch.manual_seed(42); np.random.seed(42); random.seed(42)
+FUSION_LABELMAP_PATH = "models/densenet/label_map_fusion_densenet.json"
+FUSION_WEIGHTS_PATH  = "models/densenet/best_fusion_densenet.pth"
+with open(FUSION_LABELMAP_PATH, "r", encoding="utf-8") as f:
+    label_map = json.load(f)
+class_names = [label for label, _ in sorted(label_map.items(), key=lambda x: x[1])]
+NUM_CLASSES = len(class_names)
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+print(f"🧠 Using device: {device}")
+class FusionDenseNetText(nn.Module):
+    def __init__(self, num_classes, dropout=0.3):
+        super().__init__()
+        self.image_model = DenseNet121Classifier(num_classes=num_classes)
+        self.text_model  = TextClassifier(num_classes=num_classes)
+        self.fusion = nn.Sequential(
+            nn.Linear(num_classes * 2, 128), nn.ReLU(),
+            nn.Dropout(dropout), nn.Linear(128, num_classes)
+        )
+    def forward(self, image, input_ids, attention_mask):
+        logits_img = self.image_model(image)
+        logits_txt = self.text_model(input_ids, attention_mask)
+        fused_in   = torch.cat([logits_img, logits_txt], dim=1)
+        fused_out  = self.fusion(fused_in)
+        return fused_out, logits_img, logits_txt
+print("🔄 Loading AI model...")
+fusion_model = FusionDenseNetText(num_classes=NUM_CLASSES).to(device)
+fusion_model.load_state_dict(torch.load(FUSION_WEIGHTS_PATH, map_location=device))
+fusion_model.eval()
+print("✅ AI Model loaded successfully!")
+tokenizer = get_tokenizer()
+transform = get_transforms((224, 224))
+def _find_last_conv2d(mod: torch.nn.Module):
+    last = None
+    for m in mod.modules():
+        if isinstance(m, torch.nn.Conv2d): last = m
+    return last
+def compute_gradcam_overlay(img_pil, image_tensor, target_class_idx):
+    img_branch = fusion_model.image_model
+    target_layer = _find_last_conv2d(img_branch)
+    if target_layer is None: return None
+    activations, gradients = [], []
+    def fwd_hook(_m, _i, o): activations.append(o)
+    def bwd_hook(_m, gin, gout): gradients.append(gout[0])
+    h1 = target_layer.register_forward_hook(fwd_hook)
+    h2 = target_layer.register_full_backward_hook(bwd_hook)
+    try:
+        img_branch.zero_grad()
+        logits_img = img_branch(image_tensor)
+        score = logits_img[0, target_class_idx]
+        score.backward()
+        act = activations[-1].detach()[0]
+        grad = gradients[-1].detach()[0]
+        weights = torch.mean(grad, dim=(1, 2))
+        cam = torch.relu(torch.sum(weights[:, None, None] * act, dim=0))
+        cam -= cam.min(); cam /= (cam.max() + 1e-8)
+        cam_img = Image.fromarray((cam.cpu().numpy() * 255).astype(np.uint8)).resize(img_pil.size, Image.BILINEAR)
+        cam_np = np.asarray(cam_img).astype(np.float32) / 255.0
+        heatmap = cm.get_cmap("jet")(cam_np)[:, :, :3]
+        img_np = np.asarray(img_pil.convert("RGB")).astype(np.float32) / 255.0
+        overlay = (0.6 * img_np + 0.4 * heatmap)
+        return np.clip(overlay * 255, 0, 255).astype(np.uint8)
+    finally:
+        h1.remove(); h2.remove(); img_branch.zero_grad()
+
+
+app = FastAPI()
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+os.makedirs("uploads", exist_ok=True)
+
+EXPIRATION_MINUTES = 10 
+results_cache = {}       
+cache_lock = threading.Lock() 
+
+def cleanup_expired_cache():
+    """
+    ฟังก์ชันนี้จะทำงานใน Background Thread เพื่อตรวจสอบและลบ Cache ที่หมดอายุ
+    """
+    while True:
+        with cache_lock: # ล็อคเพื่อความปลอดภัยในการเข้าถึง cache
+            # สร้าง list ของ key ที่จะลบ เพื่อไม่ให้แก้ไข dict ขณะวน loop
+            expired_keys = []
+            current_time = time.time()
+            for key, value in results_cache.items():
+                if current_time - value["created_at"] > EXPIRATION_MINUTES * 60:
+                    expired_keys.append(key)
+            
+            # ลบ key ที่หมดอายุ
+            for key in expired_keys:
+                del results_cache[key]
+                print(f"🧹 Cache expired and removed for key: {key}")
+        
+        time.sleep(60) # ตรวจสอบทุกๆ 60 วินาที
+
+@app.on_event("startup")
+async def startup_event():
+    """
+    เริ่ม Background Thread สำหรับทำความสะอาด Cache เมื่อแอปเริ่มทำงาน
+    """
+    cleanup_thread = threading.Thread(target=cleanup_expired_cache, daemon=True)
+    cleanup_thread.start()
+    print("🗑️  Cache cleanup task started.")
+
+SYMPTOM_MAP = {
+    "noSymptoms": "ไม่มีอาการ", "drinkAlcohol": "ดื่มเหล้า", "smoking": "สูบบุหรี่",
+    "chewBetelNut": "เคี้ยวหมาก", "eatSpicyFood": "กินเผ็ดแสบ", "wipeOff": "เช็ดออกได้",
+    "alwaysHurts": "เจ็บเมื่อโดนแผล"
+}
+def process_with_ai_model(image_path: str, prompt_text: str):
+    try:
+        image_pil = Image.open(image_path)
+        image_pil = ImageOps.exif_transpose(image_pil)
+        image_pil = image_pil.convert("RGB")
+        image_tensor = transform(image_pil).unsqueeze(0).to(device)
+        enc = tokenizer(prompt_text, return_tensors="pt", padding="max_length",
+                        truncation=True, max_length=128)
+        ids, mask = enc["input_ids"].to(device), enc["attention_mask"].to(device)
+        with torch.no_grad():
+            fused_logits, _, _ = fusion_model(image_tensor, ids, mask)
+            probs_fused = torch.softmax(fused_logits, dim=1)[0].cpu().numpy()
+        pred_idx   = int(np.argmax(probs_fused))
+        pred_label = class_names[pred_idx]
+        confidence = float(probs_fused[pred_idx]) * 100
+        gradcam_overlay_np = compute_gradcam_overlay(image_pil, image_tensor, pred_idx)
+        def image_to_base64(img):
+            buffered = BytesIO()
+            img.save(buffered, format="JPEG")
+            return base64.b64encode(buffered.getvalue()).decode('utf-8')
+        original_b64 = image_to_base64(image_pil)
+        if gradcam_overlay_np is not None:
+            gradcam_pil = Image.fromarray(gradcam_overlay_np)
+            gradcam_b64 = image_to_base64(gradcam_pil)
+        else:
+            gradcam_b64 = original_b64
+        return original_b64, gradcam_b64, pred_label, f"{confidence:.2f}"
+    except Exception as e:
+        print(f"❌ Error during AI processing: {e}")
+        return None, None, "Error", "0.00"
+
+@app.get("/", response_class=RedirectResponse)
+async def root():
+    return RedirectResponse(url="/detect")
+@app.get("/detect", response_class=HTMLResponse)
+async def show_upload_form(request: Request):
+    return templates.TemplateResponse("detect.html", {"request": request})
+
+@app.post("/uploaded")
+async def handle_upload(
+    request: Request,
+    file: UploadFile = File(...),
+    checkboxes: List[str] = Form([]),
+    symptom_text: str = Form("")
+):
+    temp_filepath = os.path.join("uploads", f"{uuid.uuid4()}_{file.filename}")
+    with open(temp_filepath, "wb") as buffer:
+        shutil.copyfileobj(file.file, buffer)
+    final_prompt_parts = []
+    selected_symptoms_thai = {SYMPTOM_MAP.get(cb) for cb in checkboxes if SYMPTOM_MAP.get(cb)}
+    if "ไม่มีอาการ" in selected_symptoms_thai:
+        symptoms_group   = {"เจ็บเมื่อโดนแผล", "กินเผ็ดแสบ"}
+        lifestyles_group = {"ดื่มเหล้า", "สูบบุหรี่", "เคี้ยวหมาก"}
+        patterns_group   = {"เช็ดออกได้"}
+        special_group    = {"ไม่มีอาการ"}
+        final_selected = (selected_symptoms_thai - symptoms_group) | \
+                         (selected_symptoms_thai & (lifestyles_group | patterns_group | special_group))
+        final_prompt_parts.append(" ".join(sorted(list(final_selected))))
+    elif selected_symptoms_thai:
+        final_prompt_parts.append(" ".join(sorted(list(selected_symptoms_thai))))
+    if symptom_text and symptom_text.strip():
+        final_prompt_parts.append(symptom_text.strip())
+    final_prompt = "; ".join(final_prompt_parts) if final_prompt_parts else "ไม่มีอาการ"
+    image_b64, gradcam_b64, name_out, eva_output = process_with_ai_model(
+        image_path=temp_filepath, prompt_text=final_prompt
+    )
+    os.remove(temp_filepath)
+    result_id = str(uuid.uuid4())
+    result_data = {
+        "image_b64_data": image_b64, "gradcam_b64_data": gradcam_b64,
+        "name_out": name_out, "eva_output": eva_output,
+    }
+    with cache_lock:
+        results_cache[result_id] = {
+            "data": result_data,
+            "created_at": time.time() 
+        }
+
+    results_url = request.url_for('show_results', result_id=result_id)
+    return RedirectResponse(url=results_url, status_code=303)
+
+@app.get("/results/{result_id}", response_class=HTMLResponse)
+async def show_results(request: Request, result_id: str):
+    with cache_lock:
+        cached_item = results_cache.get(result_id)
+    if not cached_item or (time.time() - cached_item["created_at"] > EXPIRATION_MINUTES * 60):
+        if cached_item:
+            with cache_lock:
+                del results_cache[result_id]
+        return RedirectResponse(url="/detect")
+
+    context = {"request": request, **cached_item["data"]}
+    return templates.TemplateResponse("detect.html", context)
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

models/densenet/best_fusion_densenet.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a2431a8b7f458d21df66690c625f631e2263f2b433bea3e4401a13e835a63d62
+size 451379781

models/densenet/label_map_fusion_densenet.json

@@ -0,0 +1,7 @@
+{
+  "Candidiasis": 0,
+  "Leukoplakia": 1,
+  "Lichenplanus": 2,
+  "Linea Alba Buccalis": 3,
+  "Ulcer": 4
+}

models/densenet/preprocess/preprocessingwangchan.py

@@ -0,0 +1,105 @@
+# -*- coding: utf-8 -*-
+import os
+import json
+import torch
+import pandas as pd
+from PIL import Image
+from torch.utils.data import Dataset
+import torchvision.transforms as T
+# Import โมดูลที่จำเป็น
+from transformers import CamembertTokenizer
+
+# ===== CONFIG =====
+TEXT_MODEL_NAME = "airesearch/wangchanberta-base-att-spm-uncased"
+
+# ใส่ค่า mean/std ของ "train set" คุณ (ที่เพิ่งคำนวณได้)
+DATASET_MEAN = [0.6089681386947632, 0.411862850189209, 0.4016309380531311]
+DATASET_STD = [0.19572971761226654, 0.17690013349056244, 0.170320525765419]
+
+# คีย์ใน CSV
+COL_IMG = "img_path"
+COL_LBL = "disease"
+COL_TXT = "caption"
+
+# ข้อความกลางเมื่อไม่มีอาการ
+NEUTRAL_PROMPT = "ไม่มีอาการ รายละเอียดไม่ระบุ ตำแหน่งไม่ระบุ"
+MAX_LEN = 128
+# ==================
+
+def get_tokenizer():
+    # โหลด tokenizer โดยใช้ CamembertTokenizerFast
+    # ซึ่งใช้ SentencePiece และเข้ากันได้กับโมเดลนี้
+
+    return CamembertTokenizer.from_pretrained("airesearch/wangchanberta-base-att-spm-uncased", use_fast=False)
+
+
+def get_transforms(img_size=(224,224)):
+    return T.Compose([
+        T.Resize(img_size),
+        T.ToTensor(),
+        T.Normalize(mean=DATASET_MEAN, std=DATASET_STD),
+    ])
+
+class CustomDataset(Dataset):
+    """
+    อ่านจาก CSV: ต้องมี img_path, label, caption (caption ว่างได้)
+    label_map: dict เช่น {"Leukoplakia":0, "Lichen":1, ...}
+    """
+    def __init__(self, csv_path, tokenizer, transform, label_map=None):
+        self.df = pd.read_csv(csv_path)
+        assert COL_IMG in self.df.columns and COL_LBL in self.df.columns, \
+            f"CSV ต้องมีคอลัมน์ {COL_IMG}, {COL_LBL}"
+        if COL_TXT not in self.df.columns:
+            self.df[COL_TXT] = ""
+
+        self.tok = tokenizer
+        self.tf = transform
+        self.label_map = label_map or self._build_label_map()
+        self._check_paths()
+
+    def _build_label_map(self):
+        classes = sorted(self.df[COL_LBL].astype(str).unique().tolist())
+        return {c:i for i,c in enumerate(classes)}
+
+    def _check_paths(self):
+        # แจ้งเตือนเฉย ๆ ถ้ารูปหาย
+        missing = (~self.df[COL_IMG].astype(str).apply(os.path.exists)).sum()
+        if missing > 0:
+            print(f"⚠️ พบรูปหาย {missing} ไฟล์ ใน {len(self.df)} แถว (จะ error ตอน __getitem__ ถ้าถึงแถวนั้น)")
+
+    def __len__(self):
+        return len(self.df)
+
+    def __getitem__(self, idx):
+        row = self.df.iloc[idx]
+
+        # Image
+        img_path = str(row[COL_IMG])
+        image = Image.open(img_path).convert("RGB")
+        image = self.tf(image)
+
+        # Label
+        label_name = str(row[COL_LBL])
+        label = torch.tensor(self.label_map[label_name], dtype=torch.long)
+
+        # Text
+        text_raw = str(row.get(COL_TXT, "") or "").strip()
+        text = text_raw if text_raw else NEUTRAL_PROMPT
+
+        enc = self.tok(
+            text,
+            padding="max_length",
+            truncation=True,
+            max_length=MAX_LEN,
+            return_tensors="pt"
+        )
+        input_ids = enc["input_ids"].squeeze(0)      # (L,)
+        attention_mask = enc["attention_mask"].squeeze(0)
+
+        return {
+            "image": image,              # (3,H,W)
+            "input_ids": input_ids,      # (L,)
+            "attention_mask": attention_mask,
+            "label": label,
+            "text_is_neutral": torch.tensor(int(text_raw == ""), dtype=torch.long)
+        }

models/densenet/train_densenet_only.py

@@ -0,0 +1,135 @@
+# -*- coding: utf-8 -*-
+import os, argparse, json, random, csv, sys
+import numpy as np
+import torch
+import torch.nn as nn
+import torch.nn.functional as F
+from torch.utils.data import DataLoader
+from torchvision import models
+from torch.optim import AdamW
+from transformers import get_linear_schedule_with_warmup
+from sklearn.metrics import accuracy_score
+
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), "..")))
+from .preprocess.preprocessingwangchan import CustomDataset, get_transforms, get_tokenizer
+
+def set_seed(seed=42):
+    random.seed(seed); np.random.seed(seed)
+    torch.manual_seed(seed); torch.cuda.manual_seed_all(seed)
+
+@torch.no_grad()
+def evaluate(model, loader, device):
+    model.eval(); y_true,y_pred,loss_sum,n_sum=[],[],0.0,0
+    for b in loader:
+        x, y = b["image"].to(device), b["label"].to(device)
+        logits = model(x)
+        loss = F.cross_entropy(logits, y)
+        loss_sum += loss.item()*y.size(0)
+        pred = logits.argmax(dim=1)
+        y_true.extend(y.cpu().tolist()); y_pred.extend(pred.cpu().tolist())
+        n_sum+=y.size(0)
+    return loss_sum/n_sum, accuracy_score(y_true,y_pred)
+
+class DenseNet121Classifier(nn.Module):
+    def __init__(self, num_classes, dropout=0.3):
+        super().__init__()
+        base = models.densenet121(weights="IMAGENET1K_V1")
+        in_feat = base.classifier.in_features
+        base.classifier = nn.Identity()
+        self.encoder = base
+        self.classifier = nn.Sequential(
+            nn.Linear(in_feat, 256), nn.ReLU(), nn.Dropout(dropout),
+            nn.Linear(256, num_classes)
+        )
+    def forward(self, x):
+        feat = self.encoder(x)
+        return self.classifier(feat)
+
+def main(args):
+    set_seed(args.seed)
+    device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+    tfm = get_transforms((args.img_size, args.img_size))
+    tok = get_tokenizer()
+
+    ds_tmp = CustomDataset(args.train_csv, tok, tfm, label_map=None)
+    label_map = ds_tmp.label_map
+    os.makedirs(args.out_dir, exist_ok=True)
+    with open(os.path.join(args.out_dir,"label_map_imgdensenet121.json"),"w",encoding="utf-8") as f:
+        json.dump(label_map,f,ensure_ascii=False,indent=2)
+
+    ds_tr = CustomDataset(args.train_csv, tok, tfm, label_map=label_map)
+    ds_va = CustomDataset(args.val_csv, tok, tfm, label_map=label_map)
+    dl_tr = DataLoader(ds_tr, batch_size=args.batch_size, shuffle=True)
+    dl_va = DataLoader(ds_va, batch_size=args.batch_size)
+
+    model = DenseNet121Classifier(num_classes=len(label_map)).to(device)
+    optim = AdamW(model.parameters(), lr=args.lr, weight_decay=args.weight_decay)
+    sched = get_linear_schedule_with_warmup(
+        optim, int(0.1*len(dl_tr)*args.epochs), len(dl_tr)*args.epochs
+    )
+
+    best_acc, patience = -1,0
+    best_path=os.path.join(args.out_dir,"best_densenet121_img.pth")
+    last_path=os.path.join(args.out_dir,"last_densenet121_img.pth")
+
+    # 🔹 CSV log
+    csv_path = os.path.join(args.out_dir,"metrics_densenet121_img.csv")
+    with open(csv_path,"w",newline="",encoding="utf-8") as f:
+        writer=csv.writer(f)
+        writer.writerow(["epoch","train_loss","train_acc","val_loss","val_acc"])
+
+    for ep in range(1,args.epochs+1):
+        model.train(); y_true,y_pred,loss_sum,n_sum=[],[],0.0,0
+        for b in dl_tr:
+            x,y=b["image"].to(device),b["label"].to(device)
+            optim.zero_grad()
+            logits=model(x)
+            loss=F.cross_entropy(logits,y)
+            loss.backward(); optim.step(); sched.step()
+            pred=logits.argmax(dim=1)
+            y_true.extend(y.cpu().tolist()); y_pred.extend(pred.cpu().tolist())
+            loss_sum+=loss.item()*y.size(0); n_sum+=y.size(0)
+
+        tr_loss=loss_sum/n_sum; tr_acc=accuracy_score(y_true,y_pred)
+        va_loss,va_acc=evaluate(model,dl_va,device)
+
+        # 🔹 print
+        print(f"Epoch {ep}: TrainLoss={tr_loss:.4f}, TrainAcc={tr_acc:.4f}, ValLoss={va_loss:.4f}, ValAcc={va_acc:.4f}")
+
+        # 🔹 log to CSV
+        with open(csv_path,"a",newline="",encoding="utf-8") as f:
+            writer=csv.writer(f)
+            writer.writerow([ep,f"{tr_loss:.4f}",f"{tr_acc:.4f}",f"{va_loss:.4f}",f"{va_acc:.4f}"])
+
+        # save last
+        torch.save(model.state_dict(),last_path)
+
+        # save best
+        if va_acc>best_acc:
+            best_acc=va_acc
+            torch.save(model.state_dict(),best_path)
+            patience=0
+            print("💾 Saved best model")
+        else:
+            patience+=1
+            if patience>=args.patience:
+                print("⏹️ Early stopping")
+                break
+
+    torch.save(model.state_dict(),last_path)
+    print("💾 Training finished, last model saved")
+
+if __name__=="__main__":
+    ap=argparse.ArgumentParser()
+    ap.add_argument("--train_csv",default="C://pattyarea//project1_weighted//data//train.csv")
+    ap.add_argument("--val_csv",default="C://pattyarea//project1_weighted//data//val.csv")
+    ap.add_argument("--out_dir",default="C://pattyarea//project1_weighted//weights")
+    ap.add_argument("--img_size",type=int,default=224)
+    ap.add_argument("--batch_size",type=int,default=8)
+    ap.add_argument("--epochs",type=int,default=50)
+    ap.add_argument("--patience",type=int,default=50)
+    ap.add_argument("--lr",type=float,default=1e-4)   # 🔹 DenseNet ใช้ lr ประมาณนี้
+    ap.add_argument("--weight_decay",type=float,default=1e-4)
+    ap.add_argument("--seed",type=int,default=42)
+    args=ap.parse_args(); main(args)

models/densenet/train_text_only.py

@@ -0,0 +1,127 @@
+# -*- coding: utf-8 -*-
+import os, argparse, json, random, csv,sys
+import numpy as np
+import torch
+import torch.nn as nn
+import torch.nn.functional as F
+from torch.utils.data import DataLoader
+from transformers import AutoModel, get_linear_schedule_with_warmup
+from torch.optim import AdamW
+from sklearn.metrics import accuracy_score
+
+
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), "..")))
+from .preprocess.preprocessingwangchan import CustomDataset, get_tokenizer, get_transforms
+
+TEXT_MODEL_NAME = "airesearch/wangchanberta-base-att-spm-uncased"
+
+def set_seed(seed=42):
+    random.seed(seed); np.random.seed(seed)
+    torch.manual_seed(seed); torch.cuda.manual_seed_all(seed)
+
+class TextClassifier(nn.Module):
+    def __init__(self, num_classes, dropout=0.3):
+        super().__init__()
+        self.encoder = AutoModel.from_pretrained(TEXT_MODEL_NAME)
+        self.classifier = nn.Sequential(
+            nn.Linear(768, 256), nn.ReLU(), nn.Dropout(dropout),
+            nn.Linear(256, num_classes)
+        )
+    def forward(self, ids, mask):
+        out = self.encoder(input_ids=ids, attention_mask=mask)
+        cls = out.last_hidden_state[:,0,:]
+        return self.classifier(cls)
+
+@torch.no_grad()
+def evaluate(model, loader, device):
+    model.eval(); y_true, y_pred, loss_sum, n_sum = [], [], 0.0, 0
+    for b in loader:
+        ids, mask, y = b["input_ids"].to(device), b["attention_mask"].to(device), b["label"].to(device)
+        logits = model(ids, mask)
+        loss = F.cross_entropy(logits, y)
+        loss_sum += loss.item()*y.size(0)
+        pred = logits.argmax(dim=1)
+        y_true.extend(y.cpu().tolist()); y_pred.extend(pred.cpu().tolist())
+        n_sum+=y.size(0)
+    return loss_sum/n_sum, accuracy_score(y_true,y_pred)
+
+def main(args):
+    set_seed(args.seed)
+    device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+    tok = get_tokenizer(); tfm = get_transforms((args.img_size,args.img_size))
+    ds_tmp = CustomDataset(args.train_csv, tok, tfm, label_map=None)
+    label_map = ds_tmp.label_map
+    os.makedirs(args.out_dir, exist_ok=True)
+    with open(os.path.join(args.out_dir,"label_map_txt.json"),"w",encoding="utf-8") as f:
+        json.dump(label_map,f,ensure_ascii=False,indent=2)
+
+    ds_tr = CustomDataset(args.train_csv, tok, tfm, label_map=label_map)
+    ds_va = CustomDataset(args.val_csv, tok, tfm, label_map=label_map)
+    dl_tr = DataLoader(ds_tr, batch_size=args.batch_size, shuffle=True)
+    dl_va = DataLoader(ds_va, batch_size=args.batch_size)
+
+    model = TextClassifier(num_classes=len(label_map)).to(device)
+    optim = AdamW(model.parameters(), lr=args.lr, weight_decay=args.weight_decay)
+    sched = get_linear_schedule_with_warmup(
+        optim, int(0.1*len(dl_tr)*args.epochs), len(dl_tr)*args.epochs
+    )
+
+    best_acc, patience= -1,0
+    best_path=os.path.join(args.out_dir,"best_text.pth")
+    last_path=os.path.join(args.out_dir,"last_text.pth")
+
+    # ===== prepare CSV logger =====
+    csv_path = os.path.join(args.out_dir, "metrics_log_text.csv")
+    with open(csv_path, "w", newline="", encoding="utf-8") as f:
+        writer = csv.writer(f)
+        writer.writerow(["epoch","train_loss","train_acc","val_loss","val_acc"])
+
+    for ep in range(1,args.epochs+1):
+        model.train(); y_true,y_pred,loss_sum,n_sum=[],[],0.0,0
+        for b in dl_tr:
+            ids, mask, y = b["input_ids"].to(device), b["attention_mask"].to(device), b["label"].to(device)
+            optim.zero_grad()
+            logits=model(ids,mask)
+            loss=F.cross_entropy(logits,y)
+            loss.backward(); optim.step(); sched.step()
+            pred=logits.argmax(dim=1)
+            y_true.extend(y.cpu().tolist()); y_pred.extend(pred.cpu().tolist())
+            loss_sum+=loss.item()*y.size(0); n_sum+=y.size(0)
+        tr_loss=loss_sum/n_sum; tr_acc=accuracy_score(y_true,y_pred)
+        va_loss,va_acc=evaluate(model,dl_va,device)
+
+        # ==== Print & Log ====
+        print(
+            f"Epoch {ep}/{args.epochs} | "
+            f"TrainLoss={tr_loss:.4f} | TrainAcc={tr_acc:.4f} | "
+            f"ValLoss={va_loss:.4f} | ValAcc={va_acc:.4f}"
+        )
+        with open(csv_path, "a", newline="", encoding="utf-8") as f:
+            writer = csv.writer(f)
+            writer.writerow([ep, f"{tr_loss:.4f}", f"{tr_acc:.4f}", f"{va_loss:.4f}", f"{va_acc:.4f}"])
+
+        torch.save(model.state_dict(),last_path)
+        if va_acc>best_acc: 
+            best_acc=va_acc
+            torch.save(model.state_dict(),best_path)
+            patience=0
+            print("💾 saved best_text.pth")
+        else:
+            patience+=1
+            if patience>=args.patience: 
+                print("⏹️ Early stopping"); break
+
+if __name__=="__main__":
+    ap=argparse.ArgumentParser()
+    ap.add_argument("--train_csv",default="C://pattyarea//project1_weighted//data//train.csv")
+    ap.add_argument("--val_csv",default="C://pattyarea//project1_weighted//data//val.csv")
+    ap.add_argument("--out_dir",default="C://pattyarea//project1_weighted//weights")
+    ap.add_argument("--img_size",type=int,default=224)
+    ap.add_argument("--batch_size",type=int,default=8)
+    ap.add_argument("--epochs",type=int,default=50)
+    ap.add_argument("--patience",type=int,default=50)
+    ap.add_argument("--lr",type=float,default=2e-5)
+    ap.add_argument("--weight_decay",type=float,default=0.01)
+    ap.add_argument("--seed",type=int,default=42)
+    args=ap.parse_args();main(args)

static/css/detect.css

@@ -0,0 +1,672 @@
+a {
+  text-decoration: none;
+}
+
+.background-color {
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
+    
+}
+
+/* Body: Flexbox layout for better vertical alignment */
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+/* Navbar: Adjust margins and padding for small screens */
+.navbar {
+  padding: 10px 20px;
+}
+
+/* Ensure home content and services adapt to screen width */
+.content-home {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 50px;
+  padding: 30px 10px;
+  color: #1d3fa1;
+}
+
+.home-row {
+  display: flex;
+  gap: 30px;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* Left section in home content for proper spacing */
+.home-left {
+  position: relative;
+  max-width: 600px;
+  padding: 20px;
+  text-align: center;
+}
+
+.home-right img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Flexbox for service items */
+.service {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.service-items {
+  background-color: #e0f7ff;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  width: 250px;
+  text-align: center;
+}
+
+.service-items:hover {
+  transform: scale(1.05);
+  background-color: #fff7ff;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+footer {
+  background-color: #f8f9fa;
+  text-align: center;
+  padding: 10px 0;
+  margin-top: auto;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .content-home {
+    padding: 20px;
+    gap: 30px;
+  }
+  
+  .home-row {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .home-left {
+    padding: 10px;
+  }
+
+  .service-items {
+    width: 100%;
+    max-width: 300px;
+  }
+
+ 
+}
+
+@media (max-width: 500px) {
+  .navbar-brand img {
+    width: 75px;
+    height: 75px;
+  }
+
+  .home-row {
+    gap: 15px;
+  }
+
+  .home-right img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .service-items {
+    width: 90%;
+  }
+
+
+}
+
+.logo {
+  width: 100px; /* Increase the width */
+  height: auto; /* Adjust height proportionally */
+}
+
+/*--------------------------------------------------------------------------------------*/
+
+/* Global Styles */
+body {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'IBM Plex Sans Thai', sans-serif;
+}
+
+/* Content Layout */
+.content {
+  display: flex;
+  flex-wrap: wrap; /* Enable wrapping for responsiveness */
+  justify-content: space-between;
+  padding: 1rem;
+}
+
+/* Left section styling */
+.left {
+  flex: 1 1 50%; /* Takes up 50% of the width */
+  padding: 20px;
+}
+
+.left .form {
+  max-width: 500px;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.button-layout {
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+}
+
+/* Checkbox styling */
+.symptoms {
+  font-size: 19px;
+  margin-right: 10px;
+}
+
+input[type="checkbox"] {
+  margin-bottom: 10px;
+  transform: scale(0.9);
+}
+
+/* Add hover effects */
+input[type="checkbox"]:hover {
+  cursor: pointer;
+  transform: scale(1.1);
+  transition: transform 0.2s ease-in-out;
+}
+
+.left, .right {
+  flex: 1 1 100%; /* Stack the sections on top of each other */
+  padding: 10px;
+}
+
+.content {
+  flex-direction: column;
+  align-items: center;
+}
+
+.form, .right-top {
+  width: 100%;
+}
+
+input[type="checkbox"] {
+  margin-bottom: 10px;
+  transform: scale(1.5); /* Make checkboxes smaller for mobile */
+}
+
+/* From Uiverse.io by zjssun */
+.button {
+position: relative;
+padding: 10px 22px;
+border-radius: 6px;
+border: none;
+color: #fff;
+cursor: pointer;
+background-color: #7d2ae8;
+transition: all 0.2s ease;
+}
+
+.button:active {
+transform: scale(0.96);
+}
+
+.button:before,
+.button:after {
+position: absolute;
+content: "";
+width: 150%;
+left: 50%;
+height: 100%;
+transform: translateX(-50%);
+z-index: -1000;
+background-repeat: no-repeat;
+}
+
+.button:hover:before {
+top: -70%;
+background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
+  radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%),
+  radial-gradient(circle, #7d2ae8 20%, transparent 20%),
+  radial-gradient(circle, #7d2ae8 20%, transparent 20%),
+  radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
+  radial-gradient(circle, #7d2ae8 20%, transparent 20%),
+  radial-gradient(circle, #7d2ae8 20%, transparent 20%),
+  radial-gradient(circle, #7d2ae8 20%, transparent 20%),
+  radial-gradient(circle, #7d2ae8 20%, transparent 20%);
+background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
+  10% 10%, 18% 18%;
+background-position: 50% 120%;
+animation: greentopBubbles 0.6s ease;
+}
+
+@keyframes greentopBubbles {
+0% {
+  background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
+    40% 90%, 55% 90%, 70% 90%;
+}
+
+50% {
+  background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
+    50% 50%, 65% 20%, 90% 30%;
+}
+
+100% {
+  background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
+    50% 40%, 65% 10%, 90% 20%;
+  background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+}
+}
+
+.button:hover:after {
+bottom: -70%;
+background-image: radial-gradient(circle, #e82a2a 20%, transparent 20%),
+  radial-gradient(circle, #e82a2a 20%, transparent 20%),
+  radial-gradient(circle, transparent 10%, #e82a2a 15%, transparent 20%),
+  radial-gradient(circle, #e82a2a 20%, transparent 20%),
+  radial-gradient(circle, #e82a2a 20%, transparent 20%),
+  radial-gradient(circle, #e82a2a 20%, transparent 20%),
+  radial-gradient(circle, #e82a2a 20%, transparent 20%);
+background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
+background-position: 50% 0%;
+animation: greenbottomBubbles 0.6s ease;
+}
+
+@keyframes greenbottomBubbles {
+0% {
+  background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
+    70% -10%, 70% 0%;
+}
+
+50% {
+  background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
+    105% 0%;
+}
+
+100% {
+  background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
+    110% 10%;
+  background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+}
+}
+
+
+/*เส้นบน----------------------------------------------------------------------------------------------------------*/
+
+/* Navbar links hover animation */
+.navbar-nav .nav-link {
+  position: relative;
+  color: #000;
+  padding: 10px;
+  font-size: 1rem;
+  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.navbar-nav .nav-link:hover {
+  color: #007bff; /* Change the color on hover */
+  
+}
+
+/* Underline effect: starts from center and expands outward */
+.navbar-nav .nav-link::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: -5px;
+  left: 50%;
+  background-color: #007bff;
+  transform: translateX(-50%);
+  transition: width 0.4s ease-in-out; /* Smooth expansion */
+}
+
+.navbar-nav .nav-link:hover::after {
+  width: 100%; /* Expand to full width */
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/*เส้นล่าง-----------------------------------------------------------------------------------------------------------------------------*/
+/* Add a color-changing line at the top of the navbar */
+.navbar {
+  position: relative;
+  z-index: 1;
+}
+.navbar::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 6px;                         /* Set the height of the color line */
+  background: linear-gradient(90deg, #71C9CE 0%, #A6E3E9 25%, #CBF1F5 75%, #E3FDFD 100%);
+  background-size: 600%;
+  animation: colorChange 6s linear infinite;  /* Infinite animation */
+}
+
+/* Keyframes to animate the gradient colors */
+@keyframes colorChange {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+
+.footer {
+  position: relative;
+  z-index: 1;
+  padding: 20px 0; /* Adjust padding as needed */
+  text-align: center; /* Center the footer text */
+}
+
+.footer::after { /* Use ::after to place the gradient at the bottom */
+  content: "";
+  position: absolute;
+  bottom: 0; /* Align it to the bottom */
+  left: 0;
+  width: 100%;
+  height: 6px; /* Set the height of the color line */
+  background: linear-gradient(90deg, #71C9CE 0%, #A6E3E9 25%, #CBF1F5 75%, #E3FDFD 100%);
+  background-size: 600%;
+  animation: colorChange 6s linear infinite; /* Infinite animation */
+}
+
+/* Keyframes to animate the gradient colors */
+@keyframes colorChange {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/*-----------------------------------------------------------------------------------------------------------------------------*/  
+
+/*animate background*/
+.circles {
+position: absolute;
+top: 100px;
+left: 0;
+width: 100%;
+height: 1200px;
+
+}
+
+.circles li {
+position: absolute;
+display: block;
+list-style: none;
+width: 20px;
+height: 70px;
+background: rgba(255, 255, 255, 0.5);
+animation: animate 25s linear infinite;
+bottom: 0px;
+
+}
+
+.circles li:nth-child(1) {
+left: 25%;
+width: 80px;
+height: 80px;
+animation-delay: 0s;
+}
+
+
+.circles li:nth-child(2) {
+left: 10%;
+width: 20px;
+height: 20px;
+animation-delay: 2s;
+animation-duration: 12s;
+}
+
+.circles li:nth-child(3) {
+left: 70%;
+width: 20px;
+height: 20px;
+animation-delay: 4s;
+}
+
+.circles li:nth-child(4) {
+left: 40%;
+width: 60px;
+height: 60px;
+animation-delay: 0s;
+animation-duration: 18s;
+}
+
+.circles li:nth-child(5) {
+left: 65%;
+width: 20px;
+height: 20px;
+animation-delay: 0s;
+}
+
+.circles li:nth-child(6) {
+left: 75%;
+width: 110px;
+height: 110px;
+animation-delay: 3s;
+}
+
+.circles li:nth-child(7) {
+left: 35%;
+width: 150px;
+height: 150px;
+animation-delay: 7s;
+}
+
+.circles li:nth-child(8) {
+left: 50%;
+width: 25px;
+height: 25px;
+animation-delay: 15s;
+animation-duration: 45s;
+}
+
+.circles li:nth-child(9) {
+left: 20%;
+width: 15px;
+height: 15px;
+animation-delay: 2s;
+animation-duration: 35s;
+}
+
+.circles li:nth-child(10) {
+left: 85%;
+width: 150px;
+height: 150px;
+animation-delay: 0s;
+animation-duration: 11s;
+}
+
+
+
+@keyframes animate {
+
+0% {
+  transform: translateY(500) rotate(0deg);
+  opacity: 1;
+  border-radius: 0;
+}
+
+100% {
+  transform: translateY(-1500px) rotate(720deg);
+  opacity: 0;
+  border-radius: 50%;
+}
+
+}
+
+.footer {
+background-color: #333;
+color: #fff;
+padding: 20px 10%;
+}
+.footer-container {
+display: flex;
+flex-wrap: wrap;
+justify-content: space-between;
+}
+.footer-section {
+flex: 1;
+margin: 10px;
+min-width: 200px;
+}
+.footer-section h3 {
+margin-bottom: 10px;
+font-size: 18px;
+color: #f2f2f2;
+}
+.footer-section p, 
+.footer-section a {
+color: #ccc;
+text-decoration: none;
+margin-bottom: 8px;
+display: block;
+}
+.footer-section a:hover {
+color: #fff;
+}
+.footer-section img {
+width: 100%;
+max-width: 300px;
+border-radius: 8px;
+margin-top: 10px;
+}
+.social-links a {
+display: inline-block;
+margin: 5px 10px 5px 0;
+color: #ccc;
+font-size: 20px;
+}
+.social-links a:hover {
+color: #fff;
+}
+.footer-bottom {
+text-align: center;
+margin-top: 20px;
+border-top: 1px solid #444;
+padding-top: 10px;
+font-size: 14px;
+}
+
+@media (max-width: 768px) {
+.footer-container {
+    flex-direction: column;
+    text-align: center;
+}
+.footer-section img {
+    margin: 10px auto;
+}
+}
+
+/*new css detect*/
+.detect-section {
+background-color: #f4f6f9;
+padding: 3rem 0;
+}
+
+.input-card {
+background-color: white;
+border-radius: 12px;
+box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+padding: 2rem;
+transition: transform 0.3s ease;
+}
+
+.input-card:hover {
+transform: translateY(-5px);
+}
+
+.custom-checkbox .form-check-input:checked {
+background-color: var(--primary-color);
+border-color: var(--primary-color);
+}
+
+.btn-submit {
+background-color: var(--primary-color);
+color: white;
+transition: all 0.3s ease;
+}
+
+.btn-submit:hover {
+background-color: var(--secondary-color);
+transform: translateY(-3px);
+}
+
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1050;
+}
+
+.spinner-container {
+  text-align: center;
+}
+
+.spinner {
+  width: 50px;
+  height: 50px;
+  animation: rotate 2s linear infinite;
+}
+
+.spinner .path {
+  stroke: #007bff; /* Customize the color */
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+  100% {
+      transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+      stroke-dasharray: 1, 150;
+      stroke-dashoffset: 0;
+  }
+  50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -35;
+  }
+  100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -124;
+  }
+}

static/js/index.js

@@ -0,0 +1,155 @@
+// ฟังก์ชันสำหรับแสดงชื่อไฟล์ที่อัปโหลด (โค้ดเดิม)
+function displayFilename() {
+    const fileInput = document.getElementById('file');
+    const filenameLabel = document.getElementById('filename');
+
+    if (fileInput && fileInput.files.length > 0) {
+        let fileName = fileInput.files[0].name;
+        const maxLength = 20;
+
+        if (fileName.length > maxLength) {
+            const start = fileName.substring(0, 10);
+            const end = fileName.substring(fileName.length - 7);
+            fileName = `${start}...${end}`;
+        }
+        if(filenameLabel) {
+            filenameLabel.textContent = fileName;
+        }
+    }
+}
+
+// ฟังก์ชันสำหรับตรวจสอบชนิดของไฟล์ (โค้ดเดิม)
+function validateFileType() {
+    const fileInput = document.getElementById('file');
+    const filePath = fileInput.value;
+    const allowedExtensions = /(\.jpg|\.jpeg|\.png|\.bmp)$/i;
+    
+    if (fileInput && !allowedExtensions.exec(filePath)) {
+        alert('Please upload a valid image file (JPG, JPEG, PNG, BMP).');
+        fileInput.value = '';
+        return false;
+    }
+    return true;
+}
+
+// ใช้ Event Listener เพื่อให้แน่ใจว่า DOM (โครงสร้างหน้าเว็บ) โหลดเสร็จก่อน
+document.addEventListener("DOMContentLoaded", function() {
+
+    // --- 1. ส่วนจัดการฟอร์มและ Loader ---
+    const sectionForm = document.getElementById('sectionForm');
+    const loadingOverlay = document.getElementById('loading');
+    const fileInput = document.getElementById('file');
+    const symptomTextArea = document.getElementById('symptomTextArea'); // เพิ่มเข้ามาเพื่อเข้าถึงง่าย
+
+    if (sectionForm) {
+        sectionForm.addEventListener('submit', function (event) {
+            // ตรวจสอบว่ามีไฟล์ถูกอัปโหลดหรือยัง
+            if (!fileInput.value) {
+                alert('กรุณาอัปโหลดรูปภาพ');
+                event.preventDefault(); // หยุดการส่งฟอร์ม
+                return;
+            }
+
+            // <<< DEBUG START: พิมพ์ข้อมูลที่จะส่งไปยัง Backend >>>
+            console.clear(); // ล้าง console เก่าเพื่อความสะอาดตา
+            console.log("=============================================");
+            console.log("🔬 DATA TO BE SENT TO BACKEND (main.py)");
+            console.log("=============================================");
+
+            // 1. เก็บค่าจาก Checkbox ที่ถูกติ๊ก
+            const checkedBoxes = document.querySelectorAll('input[name="checkboxes"]:checked');
+            const checkboxValues = Array.from(checkedBoxes).map(cb => cb.value);
+            console.log("✅ Checkbox values (name='checkboxes'):", checkboxValues);
+
+            // 2. เก็บค่าจาก Text Area
+            const textAreaValue = symptomTextArea.value;
+            console.log("📝 Text Area value (name='symptom_text'):", textAreaValue);
+            
+            // Bonus: พิมพ์ค่า Model Version ที่เลือกด้วย
+            const modelVersion = document.querySelector('input[name="model_version"]:checked').value;
+            console.log("🤖 Model Version (name='model_version'):", modelVersion);
+            
+            console.log("---------------------------------------------");
+            console.log("Backend (main.py) จะได้รับข้อมูล 3 ส่วนนี้จากฟอร์ม");
+            console.log("คุณสามารถนำข้อมูลเหล่านี้ไปสร้างเป็น 'final_prompt' สำหรับ preprocessingwangchan.py ต่อไป");
+            console.log("=============================================");
+            // <<< DEBUG END >>>
+
+
+            // ถ้าผ่าน ให้แสดง Loader
+            if (loadingOverlay) {
+                loadingOverlay.classList.remove('d-none');
+            }
+        });
+    }
+
+    // --- 2. ส่วนจัดการ Logic ของ Checkbox (ควบคุมการ Disable เท่านั้น) ---
+    const noSymptomCheckbox = document.getElementById('check6');
+    const spicyFoodCheckbox = document.getElementById('check4');
+    const alwaysHurtsCheckbox = document.getElementById('check7');
+    
+    function manageCheckboxStates() {
+        if (!noSymptomCheckbox || !spicyFoodCheckbox || !alwaysHurtsCheckbox) return;
+
+        const isAnySymptomChecked = spicyFoodCheckbox.checked || alwaysHurtsCheckbox.checked;
+
+        noSymptomCheckbox.disabled = isAnySymptomChecked;
+        spicyFoodCheckbox.disabled = noSymptomCheckbox.checked;
+        alwaysHurtsCheckbox.disabled = noSymptomCheckbox.checked;
+    }
+
+    if (noSymptomCheckbox && spicyFoodCheckbox && alwaysHurtsCheckbox) {
+        [noSymptomCheckbox, spicyFoodCheckbox, alwaysHurtsCheckbox].forEach(checkbox => {
+            checkbox.addEventListener('change', manageCheckboxStates);
+        });
+    }
+
+    // --- 3. ส่วนจัดการการแสดง Modal ผลลัพธ์ ---
+    const resultImageDataElement = document.getElementById('result-image-data');
+    if (resultImageDataElement) {
+        const imageUrl = resultImageDataElement.getAttribute('data-url');
+        
+        if (imageUrl) {
+            const outputModalElement = document.getElementById('outputModal');
+            if (outputModalElement) {
+                const outputModal = new bootstrap.Modal(outputModalElement);
+                outputModal.show();
+                if (loadingOverlay) {
+                    loadingOverlay.classList.add('d-none');
+                }
+            }
+        }
+    }
+
+    // --- 4. ส่วนจัดการไฟล์อินพุต ---
+    if (fileInput) {
+        fileInput.addEventListener('change', function() {
+            if (!this.value) return;
+            const allowedExtensions = /(\.jpg|\.jpeg|\.png|\.bmp)$/i;
+            if (!allowedExtensions.exec(this.value)) {
+                alert('กรุณาอัปโหลดไฟล์รูปภาพที่ถูกต้อง (JPG, JPEG, PNG, BMP)');
+                this.value = '';
+            }
+        });
+    }
+
+    // เรียกใช้ฟังก์ชันครั้งแรกเมื่อหน้าเว็บโหลดเสร็จ
+    manageCheckboxStates();
+    
+    const resultTrigger = document.getElementById('result-data-trigger');
+    if (resultTrigger) {
+        const outputModalElement = document.getElementById('outputModal');
+        if (outputModalElement) {
+            const outputModal = new bootstrap.Modal(outputModalElement);
+            outputModal.show();
+            if (loadingOverlay) {
+                loadingOverlay.classList.add('d-none');
+            }
+        }
+    }
+});
+
+const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+});

templates/detect.html

@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lesion Detection</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='css/detect.css') }}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="{{ url_for('static', path='image/production.png') }}">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+    <style>
+        :root {
+            --primary-color: #1da2e0;
+            --secondary-color: #c8e5fa;
+        }
+        body {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            font-family: 'IBM Plex Sans Thai', sans-serif;
+            min-height: 100vh;
+        }
+        .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1060; display: flex; justify-content: center; align-items: center; }
+        .spinner-container { color: white; }
+        .spinner { animation: rotate 2s linear infinite; width: 50px; height: 50px; }
+        .path { stroke: #93d3f4; stroke-linecap: round; animation: dash 1.5s ease-in-out infinite; }
+        @keyframes rotate { 100% { transform: rotate(360deg); } }
+        @keyframes dash {
+            0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
+            50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
+            100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
+        }
+        #symptomTextArea::placeholder {
+            color: #adb5bd;
+            opacity: 1;
+        }
+        .background-color {
+             background-color: #f8f9fa;
+        }
+        .footer {
+            margin-top: auto;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/">
+                <img src="{{ url_for('static', path='image/Logo.png') }}" alt="Logo" class="img-fluid logo"
+                    style="max-width: 100px; height: auto;" />
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item"><a class="nav-link active" href="/detect">ตรวจจับรอยโรค</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    
+    <!-- Detection Section -->
+    <div class="detect-section flex-grow-1 background-color">
+        <div class="container py-4">
+            <div class="row justify-content-center">
+                <div class="col-md-8">
+                    <div class="input-card shadow-lg p-4 bg-white rounded-3">
+                        <h2 class="text-center mb-4 fw-bold">ตรวจจับรอยโรคในช่องปาก</h2>
+                        <form id="sectionForm" method="post" enctype="multipart/form-data" action="/uploaded">
+                            <div class="mb-4">
+                                <label for="file" class="form-label fs-5">อัปโหลดรูปภาพ</label>
+                                <input class="form-control" type="file" id="file" name="file" required accept="image/*">
+                            </div>
+                            <div>
+                                <p class="fs-5">ประวัติ/อาการผู้ป่วย</p>
+                                <p class="text-muted small">โปรดเลือกจากรายการ หรือพิมพ์เพิ่มเติม (หากไม่เลือกหรือพิมพ์ ระบบจะบันทึกว่า “ไม่มีอาการผิดปกติ” โดยอัตโนมัติ)</p>
+                            </div>
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check6" name="checkboxes" value="noSymptoms"><label class="form-check-label" for="check6">ไม่มีอาการผิดปกติ</label></div>
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check1" name="checkboxes" value="drinkAlcohol"><label class="form-check-label" for="check1">ดื่มเครื่องดื่มแอลกอฮอล์</label></div>
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check2" name="checkboxes" value="smoking"><label class="form-check-label" for="check2">สูบบุหรี่</label></div>
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check3" name="checkboxes" value="chewBetelNut"><label class="form-check-label" for="check3">เคี้ยวหมาก</label></div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check4" name="checkboxes" value="eatSpicyFood"><label class="form-check-label" for="check4">รับประทานอาหารเผ็ดแล้วรู้สึกระคายเคือง</label></div>
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check5" name="checkboxes" value="wipeOff"><label class="form-check-label" for="check5">คราบขาวที่สามารถลอกออก</label></div>
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check7" name="checkboxes" value="alwaysHurts"><label class="form-check-label" for="check7">มีอาการเจ็บหรือระคายเคืองตลอดเวลา</label></div>
+                                </div>
+                            </div>
+
+                            <div class="mt-4">
+                                <label for="symptomTextArea" class="form-label">รายละเอียดอาการเพิ่มเติม:</label>
+                                <textarea class="form-control" id="symptomTextArea" name="symptom_text" rows="4" placeholder="เช่น มีอาการปวดเป็นบางครั้ง, เป็นมานาน 2 สัปดาห์ ..."></textarea>
+                            </div>
+
+                            <div class="mt-4 d-flex justify-content-center">
+                                <button class="button" type="submit">Submit</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Loader Section -->
+    <div id="loading" class="loading-overlay d-none">
+        <div class="spinner-container text-center">
+            <svg class="spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+                <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
+            </svg>
+            <p class="mt-2">กำลังประมวลผล, กรุณารอสักครู่...</p>
+        </div>
+    </div>
+
+    <!-- ===== Result Modal ===== -->
+    {% if image_b64_data %}
+    <div class="modal fade" id="outputModal" tabindex="-1">
+        <div class="modal-dialog modal-xl modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">ผลการตรวจจับรอยโรค</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row g-3">
+                        <div class="col-lg-8">
+                            <div class="row">
+                                <div class="col-md-6 text-center mb-2">
+                                    <h6>ภาพต้นฉบับ</h6>
+                                    <img src="data:image/jpeg;base64, {{ image_b64_data }}" alt="Original Image" class="img-fluid rounded shadow-sm">
+                                </div>
+                                <div class="col-md-6 text-center">
+                                    <h6 class="d-inline-block">Grad-CAM Heatmap</h6>
+                                    <i class="bi bi-info-circle-fill ms-1 info-icon" 
+                                        data-bs-toggle="tooltip" 
+                                        data-bs-placement="top"
+                                        title="Grad-CAM Heatmap แสดงถึงความสนใจของโมเดล โดยพื้นที่สีแดงคือบริเวณที่โมเดลให้ความสำคัญสูงสุด���นการตัดสินใจ"></i>
+                                    <img src="data:image/jpeg;base64, {{ gradcam_b64_data }}" alt="Grad-CAM Heatmap" class="img-fluid rounded shadow-sm">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-4 d-flex align-items-center">
+                            <div class="w-100">
+                                <h4 class="mb-3">ผลการวิเคราะห์</h4>
+                                <p class="fs-6">ผลการวิเคราะห์รอยโรคจากภาพร่วมกับประวัติผู้ป่วย:</p>
+                                <div class="alert alert-primary" role="alert">
+                                    <h5 class="alert-heading">ประเภทรอยโรคที่คาดการณ์:</h5>
+                                    <p class="fs-4 fw-bold mb-0">{{ name_out }}</p>
+                                </div>
+                                <div class="alert alert-danger" role="alert">
+                                    <h5 class="alert-heading">โอกาสเป็นรอยโรค:</h5>
+                                    <p class="fs-4 fw-bold mb-0">{{ eva_output }} %</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+
+    <footer class="footer bg-dark text-white p-4 text-center">
+        &copy; 2025 MYCompany. All Rights Reserved.
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            // ส่วนจัดการ Loader
+            const form = document.getElementById('sectionForm');
+            const loadingOverlay = document.getElementById('loading');
+            if (form) {
+                form.addEventListener('submit', function () {
+                    // ตรวจสอบว่าฟอร์ม valid ก่อนแสดง loader
+                    if (form.checkValidity()) {
+                        loadingOverlay.classList.remove('d-none');
+                    }
+                });
+            }
+
+            // ส่วนจัดการ Modal แสดงผล
+            const outputModalElement = document.getElementById('outputModal');
+            if (outputModalElement) {
+                const outputModal = new bootstrap.Modal(outputModalElement);
+                outputModal.show();
+            }
+
+            // ส่วนจัดการ Checkbox "ไม่มีอาการผิดปกติ"
+            const noSymptomsCheckbox = document.getElementById('check6');
+            const otherCheckboxes = document.querySelectorAll('.symptom-checkbox:not(#check6)');
+
+            if (noSymptomsCheckbox) {
+                noSymptomsCheckbox.addEventListener('change', function() {
+                    if (this.checked) {
+                        otherCheckboxes.forEach(checkbox => {
+                            // ยกเว้นกลุ่มพฤติกรรมเสี่ยง
+                            if (!['check1', 'check2', 'check3'].includes(checkbox.id)) {
+                                checkbox.checked = false;
+                                checkbox.disabled = true;
+                            }
+                        });
+                    } else {
+                        otherCheckboxes.forEach(checkbox => {
+                            checkbox.disabled = false;
+                        });
+                    }
+                });
+            }
+        });
+    </script>
+</body>
+</html>

templates/detect2.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lesion Detection</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='css/detect.css') }}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="{{ url_for('static', path='image/production.png') }}">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <style>
+        :root {
+            --primary-color: #1da2e0;
+            --secondary-color: #c8e5fa;
+        }
+        body {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            font-family: 'IBM Plex Sans Thai', sans-serif;
+        }
+        .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1060; display: flex; justify-content: center; align-items: center; }
+        .spinner-container { color: white; }
+        .spinner { animation: rotate 2s linear infinite; width: 50px; height: 50px; }
+        .path { stroke: #93d3f4; stroke-linecap: round; animation: dash 1.5s ease-in-out infinite; }
+        @keyframes rotate { 100% { transform: rotate(360deg); } }
+        @keyframes dash {
+            0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
+            50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
+            100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
+        }
+
+        #symptomTextArea::placeholder {
+        color: #adb5bd; /* สีเทาอ่อน (เป็นสีมาตรฐานของ Bootstrap Muted Text) */
+        opacity: 1; /* สำหรับเบราว์เซอร์บางตัวที่อาจจะลด opacity เอง */
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-light bg-white">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/">
+                <img src="{{ url_for('static', path='image/Logo.png') }}" alt="Logo" class="img-fluid logo"
+                    style="max-width: 100px; height: auto;" />
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item"><a class="nav-link" href="/detect">ตรวจจับรอยโรค</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">ติดต่อสนับสนุน</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    
+    <!-- Detection Section -->
+    <div class="detect-section flex-grow-1 background-color">
+        <div class="container py-4">
+            <div class="row justify-content-center">
+                <div class="col-md-8">
+                    <div class="input-card shadow-lg p-4">
+                        <h2 class="text-center mb-4">ตรวจจับรอยโรคในช่องปาก</h2>
+                        <form id="sectionForm" method="post" enctype="multipart/form-data" action="/uploaded">
+                            <div class="mb-4">
+                                <label for="file" class="form-label">อัปโหลดรูปภาพ</label>
+                                <input class="form-control" type="file" id="file" name="file" required accept="image/*">
+                            </div>
+                            <div class="d-flex flex-row">
+                                <h3>ประวัติ/อาการผู้ป่วย</h3>
+                                <p class="ms-2 mt-1">(เลือกจากรายการ หรือพิมพ์เพิ่มเติม)</p>
+                            </div>
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check6" name="checkboxes" value="noSymptoms"><label class="form-check-label" for="check6">ไม่มีอาการผิดปกติ</label></div>
+                                    <div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check1" name="checkboxes" value="drinkAlcohol"><label class="form-check-label" for="check1">ดื่มเครื่องดื่มแอลกอฮอล์</label></div>
+                                    <div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check2" name="checkboxes" value="smoking"><label class="form-check-label" for="check2">สูบบุหรี่</label></div>
+                                    <div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check3" name="checkboxes" value="chewBetelNut"><label class="form-check-label" for="check3">เคี้ยวหมาก</label></div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check4" name="checkboxes" value="eatSpicyFood"><label class="form-check-label" for="check4">รับประทานอาหารเผ็ดแล้วรู้สึกระคายเคือง</label></div>
+                                    <div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check5" name="checkboxes" value="wipeOff"><label class="form-check-label" for="check5">คราบขาวที่สามารถลอกออก</label></div>
+                                    <div class="form-check"><input class="form-check-input symptom-checkbox" type="checkbox" id="check7" name="checkboxes" value="alwaysHurts"><label class="form-check-label" for="check7">มีอาการเจ็บหรือระคายเคืองตลอดเวลา</label></div>
+                                </div>
+                            </div>
+
+                            <div class="mt-4">
+                                <label for="symptomTextArea" class="form-label">รายละเอียดอาการเพิ่มเติม:</label>
+                                <textarea class="form-control" id="symptomTextArea" name="symptom_text" rows="4" placeholder="ข้อความจากรายการที่เลือกจะปรากฏที่นี่ หรือคุณสามารถพิมพ์อาการเพิ่มเติมได้เอง"></textarea>
+                            </div>
+
+                            <div class="d-grid gap-2 mt-4">
+                                <button class="btn btn-primary" type="submit">Submit</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Loader Section -->
+    <div id="loading" class="loading-overlay d-none">
+        <div class="spinner-container text-center">
+            <svg class="spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+                <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
+            </svg>
+            <p class="mt-2">Processing, please wait...</p>
+        </div>
+    </div>
+
+    <!-- Result Modal -->
+    {% if image_output %}
+    <div class="modal fade" id="outputModal" tabindex="-1">
+        <div class="modal-dialog modal-lg modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">ผลการตรวจจับรอยโรค</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row g-2">
+                        <div class="col-md-6">
+                            <img src="{{ image_output }}" alt="Processed Image" class="img-fluid rounded">
+                        </div>
+                        <div class="col-md-6">
+                            <img src="{{ image_output }}" alt="Processed Image" class="img-fluid rounded">
+                        </div>
+                        <div class="d-flex flex-column justify-content-center">
+                            <p class="fs-5">ผลการวิเคราะห์รอยโรคจากภาพสามารถสรุปผลการวิเคราะห์รอยโรคร่วมกับประวัติผู้ป่วย</p>
+                            <h4>โอกาสเป็นรอยโรค: <span class="fs-5 text-danger">{{ eva_output }}%</span></h4>
+                            <h4>ประเภทรอยโรค: <span class="fs-5 text-primary">{{ name_out }}</span></h4>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
+                </div>
+            </div>
+        </div>
+        <!-- เพิ่ม div นี้เพื่อส่งข้อมูลให้ JavaScript โดยไม่แสดงผล -->
+        <div id="result-image-data" data-url="{{ image_output or '' }}" style="display: none;"></div>
+    {% endif %}
+
+    <footer class="footer bg-dark text-white p-4 text-center">
+        &copy; 2025 MYCompany. All Rights Reserved.
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="{{ url_for('static', path='js/index.js') }}"></script>
+</body>
+</html>
+

templates/detect3.html

@@ -0,0 +1,229 @@
+<!-- ลบออกอัตโนมัติ -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lesion Detection</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='css/detect.css') }}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="{{ url_for('static', path='image/production.png') }}">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+    <style>
+        :root {
+            --primary-color: #1da2e0;
+            --secondary-color: #c8e5fa;
+        }
+        body {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            font-family: 'IBM Plex Sans Thai', sans-serif;
+            min-height: 100vh;
+        }
+        .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1060; display: flex; justify-content: center; align-items: center; }
+        .spinner-container { color: white; }
+        .spinner { animation: rotate 2s linear infinite; width: 50px; height: 50px; }
+        .path { stroke: #93d3f4; stroke-linecap: round; animation: dash 1.5s ease-in-out infinite; }
+        @keyframes rotate { 100% { transform: rotate(360deg); } }
+        @keyframes dash {
+            0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
+            50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
+            100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
+        }
+        #symptomTextArea::placeholder {
+            color: #adb5bd;
+            opacity: 1;
+        }
+        .background-color {
+             background-color: #f8f9fa; /* สีพื้นหลังอ่อนๆ */
+        }
+        .footer {
+            margin-top: auto; /* ดัน footer ไปอยู่ด้านล่างสุด */
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/">
+                <img src="{{ url_for('static', path='image/Logo.png') }}" alt="Logo" class="img-fluid logo"
+                    style="max-width: 100px; height: auto;" />
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item"><a class="nav-link active" href="/detect">ตรวจจับรอยโรค</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    
+    <!-- Detection Section -->
+    <div class="detect-section flex-grow-1 background-color">
+        <div class="container py-4">
+            <div class="row justify-content-center">
+                <div class="col-md-8">
+                    <div class="input-card shadow-lg p-4 bg-white rounded-3">
+                        <h2 class="text-center mb-4 fw-bold">ตรวจจับรอยโรคในช่องปาก</h2>
+                        <form id="sectionForm" method="post" enctype="multipart/form-data" action="/uploaded">
+                            <div class="mb-4">
+                                <label for="file" class="form-label fs-5">อัปโหลดรูปภาพ</label>
+                                <input class="form-control" type="file" id="file" name="file" required accept="image/*">
+                            </div>
+                            <div>
+                                <p class="fs-5">ประวัติ/อาการผู้ป่วย</p>
+                                <p class="text-muted small">โปรดเลือกจากรายการ หรือพิมพ์เพิ่มเติม (หากไม่เลือกหรือพิมพ์ ระบบจะบันทึกว่า “ไม่มีอาการผิดปกติ” โดยอัตโนมัติ)</p>
+                            </div>
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check6" name="checkboxes" value="noSymptoms"><label class="form-check-label" for="check6">ไม่มีอาการผิดปกติ</label></div>
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check1" name="checkboxes" value="drinkAlcohol"><label class="form-check-label" for="check1">ดื่มเครื่องดื่มแอลกอฮอล์</label></div>
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check2" name="checkboxes" value="smoking"><label class="form-check-label" for="check2">สูบบุหรี่</label></div>
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check3" name="checkboxes" value="chewBetelNut"><label class="form-check-label" for="check3">เคี้ยวหมาก</label></div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check4" name="checkboxes" value="eatSpicyFood"><label class="form-check-label" for="check4">รับประทานอาหารเผ็ดแล้วรู้สึกระคายเคือง</label></div>
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check5" name="checkboxes" value="wipeOff"><label class="form-check-label" for="check5">คราบขาวที่สามารถลอกออก</label></div>
+                                    <div class="form-check mb-1"><input class="form-check-input symptom-checkbox" type="checkbox" id="check7" name="checkboxes" value="alwaysHurts"><label class="form-check-label" for="check7">มีอาการเจ็บหรือระคายเคืองตลอดเวลา</label></div>
+                                </div>
+                            </div>
+
+                            <div class="mt-4">
+                                <label for="symptomTextArea" class="form-label">รายละเอียดอาการเพิ่มเติม:</label>
+                                <textarea class="form-control" id="symptomTextArea" name="symptom_text" rows="4" placeholder="เช่น มีอาการปวดเป็นบางครั้ง, เป็นมานาน 2 สัปดาห์ ..."></textarea>
+                            </div>
+
+                            <div class="mt-4 d-flex justify-content-center">
+                                <button class="button" type="submit">Submit</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Loader Section -->
+    <div id="loading" class="loading-overlay d-none">
+        <div class="spinner-container text-center">
+            <svg class="spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+                <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
+            </svg>
+            <p class="mt-2">กำลังประมวลผล, กรุณารอสักครู่...</p>
+        </div>
+    </div>
+
+    <!-- ===== Result Modal ===== -->
+    {% if image_b64_data %}
+    <div class="modal fade" id="outputModal" tabindex="-1">
+        <div class="modal-dialog modal-xl modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">ผลการตรวจจับรอยโรค</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row g-3">
+                        <div class="col-lg-8">
+                            <div class="row">
+                                <div class="col-md-6 text-center mb-2">
+                                    <h6>ภาพต้นฉบับ</h6>
+                                    <img src="data:image/jpeg;base64, {{ image_b64_data }}" alt="Original Image" class="img-fluid rounded shadow-sm">
+                                </div>
+                                <div class="col-md-6 text-center">
+                                    <h6 class="d-inline-block">Grad-CAM Heatmap</h6>
+                                    <i class="bi bi-info-circle-fill ms-1 info-icon" 
+                                        data-bs-toggle="tooltip" 
+                                        data-bs-placement="top"
+                                        title="Grad-CAM Heatmap แสดงถึงความสน��จของโมเดล โดยพื้นที่สีแดงคือบริเวณที่โมเดลให้ความสำคัญสูงสุดในการตัดสินใจ"></i>
+                                    <img src="data:image/jpeg;base64, {{ gradcam_b64_data }}" alt="Grad-CAM Heatmap" class="img-fluid rounded shadow-sm">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-4 d-flex align-items-center">
+                            <div class="w-100">
+                                <h4 class="mb-3">ผลการวิเคราะห์</h4>
+                                <p class="fs-6">ผลการวิเคราะห์รอยโรคจากภาพร่วมกับประวัติผู้ป่วย:</p>
+                                <div class="alert alert-primary" role="alert">
+                                    <h5 class="alert-heading">ประเภทรอยโรคที่คาดการณ์:</h5>
+                                    <p class="fs-4 fw-bold mb-0">{{ name_out }}</p>
+                                </div>
+                                <div class="alert alert-danger" role="alert">
+                                    <h5 class="alert-heading">โอกาสเป็นรอยโรค:</h5>
+                                    <p class="fs-4 fw-bold mb-0">{{ eva_output }} %</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+
+    <footer class="footer bg-dark text-white p-4 text-center">
+        &copy; 2025 MYCompany. All Rights Reserved.
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            // ส่วนจัดการ Loader
+            const form = document.getElementById('sectionForm');
+            const loadingOverlay = document.getElementById('loading');
+            if (form) {
+                form.addEventListener('submit', function () {
+                    // ตรวจสอบว่าฟอร์ม valid ก่อนแสดง loader
+                    if (form.checkValidity()) {
+                        loadingOverlay.classList.remove('d-none');
+                    }
+                });
+            }
+
+            // ส่วนจัดการ Modal แสดงผล
+            const outputModalElement = document.getElementById('outputModal');
+            if (outputModalElement) {
+                const outputModal = new bootstrap.Modal(outputModalElement);
+                outputModal.show();
+            }
+
+            // ส่วนจัดการ Checkbox "ไม่มีอาการผิดปกติ"
+            const noSymptomsCheckbox = document.getElementById('check6');
+            const otherCheckboxes = document.querySelectorAll('.symptom-checkbox:not(#check6)');
+
+            if (noSymptomsCheckbox) {
+                noSymptomsCheckbox.addEventListener('change', function() {
+                    if (this.checked) {
+                        otherCheckboxes.forEach(checkbox => {
+                            // ยกเว้นกลุ่มพฤติกรรมเสี่ยง
+                            if (!['check1', 'check2', 'check3'].includes(checkbox.id)) {
+                                checkbox.checked = false;
+                                checkbox.disabled = true;
+                            }
+                        });
+                    } else {
+                        otherCheckboxes.forEach(checkbox => {
+                            checkbox.disabled = false;
+                        });
+                    }
+                });
+            }
+        });
+    </script>
+</body>
+</html>