Upload 9 files

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Set permission for SQLite database
+RUN chmod -R 777 /app
+
+# Hugging Face Spaces default port is 7860
+CMD ["uvicorn", "backend:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -0,0 +1,93 @@
+from fastapi import FastAPI, File, UploadFile, Form
+from fastapi.middleware.cors import CORSMiddleware
+import torch, torch.nn as nn, timm, io, os, warnings, shutil
+import torchvision.transforms as transforms
+from PIL import Image
+
+warnings.filterwarnings("ignore")
+
+app = FastAPI(title="AI Forensic Detector API")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+DEVICE = "cpu"
+CKPT_PATH = "ckpt_best_v4.pth"
+FEEDBACK_DIR = "feedback"
+
+os.makedirs(f"{FEEDBACK_DIR}/real", exist_ok=True)
+os.makedirs(f"{FEEDBACK_DIR}/fake", exist_ok=True)
+
+print("⏳ Loading EfficientNet V4...")
+try:
+    effnet_v4 = timm.create_model("efficientnet_b0", pretrained=False, num_classes=2)
+    ckpt = torch.load(CKPT_PATH, map_location=DEVICE, weights_only=False)
+    ckpt_state = ckpt["state_dict"] if "state_dict" in ckpt else ckpt
+    effnet_v4.load_state_dict(ckpt_state)
+    effnet_v4.to(DEVICE).eval()
+    print("✅ V4 Loaded!")
+except Exception as e:
+    print(f"❌ Error loading model: {e}")
+    effnet_v4 = None
+
+transform = transforms.Compose([
+    transforms.Resize((224, 224)),
+    transforms.ToTensor(),
+    transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225])
+])
+
+def predict_image(img: Image.Image):
+    if effnet_v4 is None:
+        return "REAL", 0.5
+
+    x = transform(img.convert("RGB")).unsqueeze(0).to(DEVICE)
+    with torch.no_grad():
+        prob = torch.softmax(effnet_v4(x), dim=1)[0].cpu().numpy()
+
+    p_ai = float(prob[1])
+
+    if p_ai > 0.80:
+        return "AI", round(p_ai, 4)
+    else:
+        return "REAL", round(1.0 - p_ai, 4)
+
+@app.get("/")
+def root():
+    return {"message": "AI Forensic Detector API is running", "model": "efficientnet_b0_v4"}
+
+@app.post("/predict")
+async def predict(file: UploadFile = File(...)):
+    ext = file.filename.lower().split('.')[-1]
+    if ext not in ('png', 'jpg', 'jpeg', 'webp'):
+        return {"error": "Format tidak didukung"}
+
+    contents = await file.read()
+    img = Image.open(io.BytesIO(contents))
+    prediction, confidence = predict_image(img)
+
+    return {
+        "filename": file.filename,
+        "prediction": prediction,
+        "confidence": confidence,
+        "file_size": len(contents)
+    }
+
+@app.post("/save-feedback")
+async def save_feedback(file: UploadFile = File(...), correct_label: str = Form(...)):
+    folder = "real" if correct_label.upper() == "REAL" else "fake"
+    path = f"{FEEDBACK_DIR}/{folder}/{file.filename}"
+
+    contents = await file.read()
+    with open(path, "wb") as f:
+        f.write(contents)
+
+    return {"status": "saved", "path": path}
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=5000)

backend.py

@@ -0,0 +1,662 @@
+from fastapi import FastAPI, UploadFile, File, Form, HTTPException, BackgroundTasks
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import HTMLResponse, FileResponse
+import shutil, os, time, uuid, zipfile
+import database
+import httpx
+
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+FEEDBACK_DIR = os.path.join(BASE_DIR, "feedback")
+PENDING_DIR = os.path.join(FEEDBACK_DIR, "pending")
+os.makedirs(f"{FEEDBACK_DIR}/real", exist_ok=True)
+os.makedirs(f"{FEEDBACK_DIR}/fake", exist_ok=True)
+os.makedirs(PENDING_DIR, exist_ok=True)
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+@app.get("/")
+def root():
+    with open(os.path.join(BASE_DIR, "index.html"), encoding="utf-8") as f:
+        return HTMLResponse(f.read())
+
+@app.get("/style.css")
+def serve_css():
+    with open(os.path.join(BASE_DIR, "style.css"), encoding="utf-8") as f:
+        return HTMLResponse(f.read(), media_type="text/css")
+
+@app.get("/template/style.css")
+def serve_template_css():
+    with open(os.path.join(BASE_DIR, "template", "style.css"), encoding="utf-8") as f:
+        return HTMLResponse(f.read(), media_type="text/css")
+
+@app.get("/script.js")
+def serve_js():
+    with open(os.path.join(BASE_DIR, "script.js"), encoding="utf-8") as f:
+        return HTMLResponse(f.read(), media_type="application/javascript")
+
+@app.on_event("startup")
+def startup():
+    database.init_db()
+    database.migrate_existing_learning_data()
+    database.sync_scan_history_to_test_results()
+
+@app.post("/api/register")
+def api_register(username: str = Form(...), password: str = Form(...), name: str = Form(...)):
+    if database.register_user(username, password, name):
+        return {"status": "success", "message": "Registrasi berhasil!"}
+    raise HTTPException(status_code=400, detail="Username sudah digunakan")
+
+@app.post("/api/login")
+def api_login(username: str = Form(...), password: str = Form(...)):
+    user = database.login_user(username, password)
+    if user:
+        return {
+            "status": "success", 
+            "name": user["name"], 
+            "username": user["username"],
+            "trust_score": user["trust_score"] if "trust_score" in user and user["trust_score"] is not None else 50
+        }
+    raise HTTPException(status_code=401, detail="Username atau password salah")
+
+import math
+from PIL import Image
+
+def get_color_feature_vector(img_path):
+    try:
+        with Image.open(img_path) as img:
+            img = img.resize((64, 64))
+            hist = img.histogram()
+            bins = []
+            for i in range(0, len(hist), 32):
+                bins.append(sum(hist[i:i+32]))
+            return bins
+    except Exception:
+        return [1.0] * 24
+
+def cosine_similarity(v1, v2):
+    dot_product = sum(a * b for a, b in zip(v1, v2))
+    norm_v1 = math.sqrt(sum(a * a for a in v1))
+    norm_v2 = math.sqrt(sum(b * b for b in v2))
+    if norm_v1 == 0 or norm_v2 == 0:
+        return 0.0
+    return dot_product / (norm_v1 * norm_v2)
+
+# Reference vector representing typical digital photo color centroid
+REF_VECTOR = [100.0, 150.0, 200.0, 180.0, 120.0, 90.0, 80.0, 110.0, 130.0, 140.0, 160.0, 170.0, 190.0, 210.0, 220.0, 230.0, 240.0, 250.0, 200.0, 150.0, 100.0, 80.0, 60.0, 40.0]
+
+def analyze_image_conditions(img_path):
+    try:
+        with Image.open(img_path) as img:
+            img_rgb = img.convert('RGB')
+            img_small = img_rgb.resize((32, 32))
+            pixels = list(img_small.getdata())
+            
+            grayscale_diffs = []
+            brightness_vals = []
+            for r, g, b in pixels:
+                brightness = 0.299*r + 0.587*g + 0.114*b
+                brightness_vals.append(brightness)
+                diff = abs(r - g) + abs(g - b) + abs(b - r)
+                grayscale_diffs.append(diff)
+                
+            avg_brightness = sum(brightness_vals) / len(brightness_vals)
+            avg_diff = sum(grayscale_diffs) / len(grayscale_diffs)
+            
+            is_dark = 1 if avg_brightness < 45 else 0
+            is_grayscale = 1 if avg_diff < 12 else 0
+            
+            return bool(is_dark), bool(is_grayscale), round(avg_brightness, 1)
+    except Exception:
+        return False, False, 127.0
+
+def save_compressed_image(source_path, target_path, max_size=(512, 512)):
+    try:
+        with Image.open(source_path) as img:
+            if img.mode in ("RGBA", "P"):
+                img = img.convert("RGB")
+            img.thumbnail(max_size, Image.Resampling.LANCZOS)
+            ext = target_path.split('.')[-1].lower()
+            fmt = "PNG" if ext == "png" else "JPEG"
+            if fmt == "JPEG":
+                img.save(target_path, "JPEG", quality=80, optimize=True)
+            else:
+                img.save(target_path, "PNG", optimize=True)
+        return True
+    except Exception:
+        import shutil
+        shutil.copy2(source_path, target_path)
+        return False
+
+HF_API_URL = "https://alstears-ai-forensic-detector.hf.space/predict"
+
+@app.post("/api/scan-image")
+def api_scan_image(file: UploadFile = File(...), username: str = Form(...)):
+    if not file.filename.lower().endswith(('png', 'jpg', 'jpeg', 'webp')):
+        raise HTTPException(status_code=400, detail="Format gambar tidak didukung")
+
+    uid = uuid.uuid4().hex[:8]
+    safe_name = file.filename.replace("\\", "/").split("/")[-1]
+    temp_path = f"temp_{uid}_{safe_name}"
+    with open(temp_path, "wb") as buffer:
+        shutil.copyfileobj(file.file, buffer)
+
+    try:
+        with open(temp_path, "rb") as f:
+            resp = httpx.post(HF_API_URL, files={"file": (file.filename, f, "image/jpeg")}, timeout=30)
+
+        if resp.status_code != 200:
+            raise HTTPException(status_code=502, detail="Gagal menghubungi AI detector")
+
+        result = resp.json()
+        prediction = result.get("prediction", "REAL")
+        confidence = result.get("confidence", 0.0)
+
+        is_ai = prediction.upper() in ("AI", "FAKE")
+        source = "Pollinations AI (Stable Diffusion)" if is_ai else "Kamera/Foto Digital Asli"
+        accuracy = round(confidence * 100, 1)
+
+        feedback_path = f"{PENDING_DIR}/{uid}_{safe_name}"
+        save_compressed_image(temp_path, feedback_path)
+
+        file_size = os.path.getsize(temp_path)
+        database.add_scan_history(username, file.filename, "Image", f"{file_size/(1024*1024):.2f} MB", source, is_ai, accuracy)
+
+        # Calculate color similarity & outlier detection (Solusi 2)
+        vector = get_color_feature_vector(temp_path)
+        similarity = cosine_similarity(vector, REF_VECTOR)
+        similarity = round(similarity, 3)
+        is_outlier = 1 if similarity < 0.88 else 0
+
+        # Detect low-light and monochrome conditions
+        is_dark, is_grayscale, avg_brightness = analyze_image_conditions(temp_path)
+
+        # Check for Trap image (Solusi 3)
+        is_trap = 1 if "trap" in file.filename.lower() else 0
+
+        # Get user's current trust score
+        conn = database.get_connection()
+        user_row = conn.execute("SELECT trust_score FROM users WHERE username=?", (username,)).fetchone()
+        trust_score = user_row["trust_score"] if user_row else 50
+        conn.close()
+
+        # --- SINKRONISASI AKURASI GAMBAR TUNGGAL (Poin 2) ---
+        # Coba tebak ground truth (REAL/AI) dari nama file (misal: real11.jpg, fake4.jpg)
+        prediction_label = "AI" if is_ai else "REAL"
+        inferred_label = None
+        fn_lower = file.filename.lower()
+        if "real" in fn_lower:
+            inferred_label = "REAL"
+        elif "fake" in fn_lower or "ai" in fn_lower:
+            inferred_label = "AI"
+
+        if inferred_label:
+            is_mismatch = 1 if prediction_label != inferred_label else 0
+            database.save_test_result(
+                None, username, file.filename, inferred_label,
+                prediction_label, accuracy, is_mismatch
+            )
+            # Simpan data pembelajaran mismatch jika tebakan salah
+            if is_mismatch:
+                database.save_learning_data(
+                    username, file.filename, prediction_label, inferred_label, accuracy,
+                    source="single_mismatch"
+                )
+
+        return {
+            "status": "success",
+            "filename": file.filename,
+            "feedback_id": uid,
+            "type": "image",
+            "file_size": f"{file_size/(1024*1024):.2f} MB",
+            "source": source,
+            "is_ai": is_ai,
+            "accuracy": accuracy,
+            "date": time.strftime("%Y-%m-%d %H:%M:%S"),
+            "similarity": similarity,
+            "is_outlier": bool(is_outlier),
+            "is_trap": bool(is_trap),
+            "trust_score": trust_score,
+            "is_dark": is_dark,
+            "is_grayscale": is_grayscale,
+            "avg_brightness": avg_brightness
+        }
+    finally:
+        if os.path.exists(temp_path): os.remove(temp_path)
+
+def scan_single_image(file_bytes, filename):
+    resp = httpx.post(HF_API_URL, files={"file": (filename, file_bytes, "image/jpeg")}, timeout=30)
+    if resp.status_code != 200:
+        return None
+    return resp.json()
+
+@app.post("/api/batch-scan")
+async def api_batch_scan(files: list[UploadFile] = File(...), username: str = Form(...), labels: str = Form("[]")):
+    import json as json_mod
+    try:
+        parsed_labels = json_mod.loads(labels)
+    except:
+        parsed_labels = []
+
+    results = []
+    saved_bytes = {}
+
+    for idx, file in enumerate(files):
+        ext = file.filename.lower().split('.')[-1]
+        if ext not in ('png', 'jpg', 'jpeg', 'webp'):
+            continue
+
+        folder_label = None
+        # Safe lookup in dictionary map or fallback to list
+        if isinstance(parsed_labels, dict):
+            # Try exact match, then fallback to case-insensitive match
+            folder_label = parsed_labels.get(file.filename)
+            if not folder_label:
+                # Extract just the base filename in case of relative path difference
+                base_filename = file.filename.replace("\\", "/").split("/")[-1]
+                for k, v in parsed_labels.items():
+                    k_base = k.replace("\\", "/").split("/")[-1]
+                    if k_base.lower() == base_filename.lower():
+                        folder_label = v
+                        break
+        elif isinstance(parsed_labels, list) and idx < len(parsed_labels):
+            folder_label = parsed_labels[idx]
+
+        # Standardize folder label to uppercase
+        if folder_label:
+            folder_label_upper = str(folder_label).upper()
+            folder_label = "AI" if folder_label_upper in ("FAKE", "AI") else "REAL"
+
+        bytes_data = await file.read()
+
+        try:
+            resp = httpx.post(HF_API_URL, files={"file": (file.filename, bytes_data, "image/jpeg")}, timeout=30)
+
+            if resp.status_code != 200:
+                results.append({"filename": file.filename, "folder_label": folder_label, "error": "Gagal scan"})
+                continue
+
+            result = resp.json()
+            prediction = result.get("prediction", "REAL")
+            confidence = result.get("confidence", 0.0)
+            prediction_label = "AI" if prediction.upper() in ("AI", "FAKE") else "REAL"
+            confidence_pct = round(confidence * 100, 1)
+
+            is_mismatch = 0
+            if folder_label:
+                expected = "AI" if folder_label.upper() in ("FAKE", "AI") else "REAL"
+                if prediction_label != expected:
+                    is_mismatch = 1
+
+            results.append({
+                "filename": file.filename,
+                "folder_label": folder_label,
+                "prediction": prediction_label,
+                "confidence": confidence_pct,
+                "is_mismatch": is_mismatch
+            })
+
+            if is_mismatch and folder_label:
+                uid = uuid.uuid4().hex[:8]
+                safe_name = file.filename.replace("\\", "/").split("/")[-1]
+                pending_path = f"{PENDING_DIR}/{uid}_{safe_name}"
+                with open(pending_path, "wb") as pf:
+                    pf.write(bytes_data)
+                saved_bytes[file.filename] = uid
+                results[-1]["feedback_id"] = uid
+            else:
+                results[-1]["feedback_id"] = ""
+        except Exception as e:
+            results.append({"filename": file.filename, "folder_label": folder_label, "error": str(e)})
+
+    total = len(results)
+    mismatches = [r for r in results if r.get("is_mismatch")]
+    mismatch_count = len(mismatches)
+    correct_count = total - mismatch_count
+    accuracy = round((correct_count / total * 100), 1) if total > 0 else 0
+
+    batch_id = database.create_test_batch(username, total, correct_count, mismatch_count, accuracy)
+    for r in results:
+        database.save_test_result(
+            batch_id, username, r["filename"], r.get("folder_label"),
+            r.get("prediction", "ERROR"), r.get("confidence", 0.0), r.get("is_mismatch", 0)
+        )
+        if r.get("is_mismatch") and r.get("folder_label"):
+            expected = "AI" if r["folder_label"].lower() in ("fake", "ai") else "REAL"
+            database.save_learning_data(
+                username, r["filename"], r.get("prediction", "ERROR"), expected, r.get("confidence", 0.0),
+                source="batch_mismatch"
+            )
+            fid = r.get("feedback_id", "")
+            if fid:
+                safe_name = r['filename'].replace("\\", "/").split("/")[-1]
+                pending_file = f"{PENDING_DIR}/{fid}_{safe_name}"
+                target_dir = f"{FEEDBACK_DIR}/real" if expected == "REAL" else f"{FEEDBACK_DIR}/fake"
+                target_path = f"{target_dir}/{safe_name}"
+                if os.path.exists(pending_file):
+                    os.makedirs(target_dir, exist_ok=True)
+                    shutil.move(pending_file, target_path)
+
+    return {
+        "batch_id": batch_id,
+        "total": total,
+        "correct": correct_count,
+        "wrong": mismatch_count,
+        "accuracy": accuracy,
+        "results": results,
+        "needs_confirmation": mismatch_count if 1 <= mismatch_count <= 5 else 0
+    }
+
+@app.post("/api/batch-confirm")
+def api_batch_confirm(data: dict):
+    batch_id = data.get("batch_id")
+    corrections = data.get("corrections", [])
+    results = database.get_test_results_by_batch(batch_id)
+
+    for corr in corrections:
+        idx = corr.get("index")
+        user_answer = corr.get("user_answer")
+        if idx < len(results):
+            r = results[idx]
+            corrected_label = user_answer.upper()
+            original_prediction = r["prediction"]
+            confidence = r["confidence"]
+            database.update_test_result_correction(r["id"], corrected_label, corrected_label)
+            if original_prediction != corrected_label:
+                database.save_learning_data(
+                    r["username"], r["filename"],
+                    original_prediction, corrected_label, confidence
+                )
+
+    results = database.get_test_results_by_batch(batch_id)
+    total_with_label = 0
+    correct = 0
+    for r in results:
+        if not r["folder_label"]:
+            continue
+        total_with_label += 1
+        final_label = r.get("corrected_label") or r["prediction"]
+        expected = "AI" if r["folder_label"].lower() in ("fake", "ai") else "REAL"
+        if final_label == expected:
+            correct += 1
+    wrong = total_with_label - correct
+    accuracy = round((correct / total_with_label * 100), 1) if total_with_label > 0 else 0
+
+    return {"status": "success", "total": total_with_label, "correct": correct, "wrong": wrong, "accuracy": accuracy}
+
+@app.post("/api/correction-single")
+def api_correction_single(data: dict):
+    username = data.get("username")
+    filename = data.get("filename")
+    original_prediction = data.get("original_prediction")
+    correct_label = data.get("correct_label")
+    confidence = data.get("confidence", 0)
+    feedback_id = data.get("feedback_id")
+
+    # Standardize correct_label to uppercase
+    correct_label = "AI" if str(correct_label).upper() in ("FAKE", "AI") else "REAL"
+    original_prediction = "AI" if str(original_prediction).upper() in ("FAKE", "AI") else "REAL"
+
+    # Determine if it is a trap image and adjust trust score
+    is_trap = "trap" in filename.lower()
+    trap_correct = False
+    trust_change = 0
+    new_trust = 50
+
+    if is_trap:
+        if "trap_real" in filename.lower():
+            true_label = "REAL"
+        elif "trap_ai" in filename.lower() or "trap_fake" in filename.lower():
+            true_label = "AI"
+        else:
+            true_label = "REAL" if original_prediction == "AI" else "AI"
+
+        if correct_label == true_label:
+            trap_correct = True
+            trust_change = 5
+        else:
+            trap_correct = False
+            trust_change = -15
+
+        conn = database.get_connection()
+        user_row = conn.execute("SELECT trust_score FROM users WHERE username=?", (username,)).fetchone()
+        if user_row:
+            current_trust = user_row["trust_score"] if user_row["trust_score"] is not None else 50
+            new_trust = max(0, min(100, current_trust + trust_change))
+            conn.execute("UPDATE users SET trust_score=? WHERE username=?", (new_trust, username))
+            conn.commit()
+        conn.close()
+
+    # Save to learning data for retraining
+    database.save_learning_data(username, filename, original_prediction, correct_label, confidence)
+
+    # Update or insert into test_results
+    conn = database.get_connection()
+    existing = conn.execute("SELECT id FROM test_results WHERE username=? AND filename=? AND batch_id IS NULL", 
+                            (username, filename)).fetchone()
+    is_mismatch = 1 if original_prediction != correct_label else 0
+    if existing:
+        conn.execute("UPDATE test_results SET folder_label=?, prediction=?, confidence=?, is_mismatch=?, corrected_label=? WHERE id=?",
+                     (correct_label, original_prediction, confidence, is_mismatch, correct_label, existing["id"]))
+        conn.commit()
+    else:
+        database.save_test_result(None, username, filename, correct_label, original_prediction, confidence, is_mismatch)
+    conn.close()
+
+    if feedback_id:
+        safe_name = filename.replace("\\", "/").split("/")[-1]
+        pending_file = f"{PENDING_DIR}/{feedback_id}_{safe_name}"
+        target_dir = f"{FEEDBACK_DIR}/real" if correct_label == "REAL" else f"{FEEDBACK_DIR}/fake"
+        target_path = f"{target_dir}/{safe_name}"
+        if os.path.exists(pending_file):
+            os.makedirs(target_dir, exist_ok=True)
+            save_compressed_image(pending_file, target_path)
+            os.remove(pending_file)
+
+    return {
+        "status": "success",
+        "is_trap": is_trap,
+        "trap_correct": trap_correct,
+        "trust_change": trust_change,
+        "new_trust": new_trust
+    }
+
+@app.get("/api/history/{username}")
+def api_get_history(username: str):
+    return {"history": database.get_user_history(username)}
+
+@app.get("/api/clear-history")
+def api_clear_history():
+    database.clear_all_history()
+    return {"status": "success", "message": "Semua history berhasil dihapus"}
+
+@app.get("/api/accuracy-report")
+def api_accuracy_report(username: str = None, filter: str = "all"):
+    import datetime
+    import traceback
+    
+    try:
+        now = datetime.datetime.now()
+        
+        # Calculate time threshold
+        threshold_str = None
+        if filter == "today":
+            threshold_str = now.strftime("%Y-%m-%d")
+        elif filter == "week":
+            threshold_str = (now - datetime.timedelta(days=7)).isoformat()
+        elif filter == "month":
+            threshold_str = (now - datetime.timedelta(days=30)).isoformat()
+
+        conn = database.get_connection()
+        
+        # Fetch test results with time filter
+        query_results = "SELECT * FROM test_results"
+        params_results = []
+        conditions = []
+        if username:
+            conditions.append("username = ?")
+            params_results.append(username)
+        if threshold_str:
+            conditions.append("scan_date >= ?")
+            params_results.append(threshold_str)
+            
+        if conditions:
+            query_results += " WHERE " + " AND ".join(conditions)
+        rows = conn.execute(query_results, params_results).fetchall()
+        
+        # Compute Confusion Matrix, Failures, and Confidence Distributions
+        tp = 0
+        fp = 0
+        fn = 0
+        tn = 0
+        
+        real_conf_buckets = [0, 0, 0, 0, 0] # 50-60, 60-70, 70-80, 80-90, 90-100
+        ai_conf_buckets = [0, 0, 0, 0, 0]
+        
+        failures = []
+        
+        for r in rows:
+            if not r["folder_label"]:
+                continue
+            expected = "AI" if r["folder_label"].lower() in ("fake", "ai") else "REAL"
+            final_pred = r["corrected_label"] or r["prediction"] or "REAL"
+            
+            # Safe None check for confidence
+            confidence = float(r["confidence"]) if r["confidence"] is not None else 0.0
+            
+            if expected == "AI" and final_pred == "AI":
+                tp += 1
+            elif expected == "REAL" and final_pred == "AI":
+                fp += 1
+            elif expected == "AI" and final_pred == "REAL":
+                fn += 1
+            elif expected == "REAL" and final_pred == "REAL":
+                tn += 1
+                
+            # Add mismatch (prediction failure) to failure log
+            if final_pred != expected:
+                failures.append({
+                    "filename": r["filename"] or "Unknown File",
+                    "expected": expected,
+                    "prediction": r["prediction"] or "REAL",
+                    "final_pred": final_pred,
+                    "confidence": confidence,
+                    "date": r["scan_date"][:19].replace("T", " ") if r["scan_date"] else "-"
+                })
+                
+            bucket_idx = min(int((confidence - 50) / 10), 4)
+            if bucket_idx >= 0:
+                if final_pred == "AI":
+                    ai_conf_buckets[bucket_idx] += 1
+                else:
+                    real_conf_buckets[bucket_idx] += 1
+                    
+        # Calculate global metrics
+        total = tp + fp + fn + tn
+        correct = tp + tn
+        wrong = fp + fn
+        accuracy = round((correct / total * 100), 1) if total > 0 else 0.0
+        
+        # Calculate Advanced ML metrics
+        precision = round((tp / (tp + fp) * 100), 1) if (tp + fp) > 0 else 0.0
+        recall = round((tp / (tp + fn) * 100), 1) if (tp + fn) > 0 else 0.0
+        f1_score = round((2 * (precision * recall) / (precision + recall)), 1) if (precision + recall) > 0 else 0.0
+        
+        # Count scans with time filter
+        q_scan = "SELECT COUNT(*) as cnt FROM scan_history"
+        p_scan = []
+        if username or threshold_str:
+            conds = []
+            if username:
+                conds.append("username = ?")
+                p_scan.append(username)
+            if threshold_str:
+                conds.append("scan_date >= ?")
+                p_scan.append(threshold_str)
+            q_scan += " WHERE " + " AND ".join(conds)
+        scan_count = conn.execute(q_scan, p_scan).fetchone()["cnt"]
+        
+        # Count batch images with time filter
+        q_batch = "SELECT COALESCE(SUM(total_images), 0) as cnt FROM test_batches"
+        p_batch = []
+        if username or threshold_str:
+            conds = []
+            if username:
+                conds.append("username = ?")
+                p_batch.append(username)
+            if threshold_str:
+                conds.append("test_date >= ?")
+                p_batch.append(threshold_str)
+            q_batch += " WHERE " + " AND ".join(conds)
+        batch_images = conn.execute(q_batch, p_batch).fetchone()["cnt"]
+        
+        # Count other parameters
+        learning_count = database.get_learning_data_count()
+        
+        q_batches = "SELECT * FROM test_batches"
+        p_batches = []
+        conds_b = []
+        if username:
+            conds_b.append("username = ?")
+            p_batches.append(username)
+        if threshold_str:
+            conds_b.append("test_date >= ?")
+            p_batches.append(threshold_str)
+        if conds_b:
+            q_batches += " WHERE " + " AND ".join(conds_b)
+        q_batches += " ORDER BY id DESC"
+        batches_rows = conn.execute(q_batches, p_batches).fetchall()
+        batches = [dict(row) for row in batches_rows]
+        
+        conn.close()
+        
+        return {
+            "stats": {
+                "total": total,
+                "correct": correct,
+                "wrong": wrong,
+                "accuracy": accuracy,
+                "precision": precision,
+                "recall": recall,
+                "f1_score": f1_score
+            },
+            "confusion_matrix": {
+                "tp": tp,
+                "fp": fp,
+                "fn": fn,
+                "tn": tn
+            },
+            "confidence_distribution": {
+                "buckets": ["50-60%", "60-70%", "70-80%", "80-90%", "90-100%"],
+                "real": real_conf_buckets,
+                "ai": ai_conf_buckets
+            },
+            "failures": failures[:15], # limit to latest 15 failures
+            "batches": batches,
+            "learning_data_count": learning_count,
+            "scan_count": scan_count,
+            "batch_images": batch_images
+        }
+    except Exception as e:
+        print("EXCEPTION DETECTED IN ACCURACY REPORT:")
+        traceback.print_exc()
+        raise HTTPException(status_code=500, detail=str(e))
+@app.get("/api/download-feedback")
+def api_download_feedback(background: BackgroundTasks):
+    zip_path = os.path.join(BASE_DIR, f"feedback_{time.strftime('%Y%m%d_%H%M%S')}.zip")
+    with zipfile.ZipFile(zip_path, "w", zipfile.ZIP_DEFLATED) as zf:
+        for root, dirs, files in os.walk(FEEDBACK_DIR):
+            for file in files:
+                file_path = os.path.join(root, file)
+                arcname = os.path.relpath(file_path, FEEDBACK_DIR)
+                zf.write(file_path, arcname)
+    background.add_task(os.remove, zip_path)
+    return FileResponse(zip_path, media_type="application/zip",
+                        filename=os.path.basename(zip_path))

database.py

@@ -0,0 +1,283 @@
+import sqlite3
+import json
+import os
+import hashlib
+from datetime import datetime
+
+DATASET_CONFIG = {
+    "dataset_dir": "./dataset_ai_vs_real",
+    "real_dir": "./dataset_ai_vs_real/real",
+    "ai_dir": "./dataset_ai_vs_real/fake"
+}
+
+DB_NAME = "app_database.db"
+
+def get_connection():
+    conn = sqlite3.connect(DB_NAME)
+    conn.row_factory = sqlite3.Row
+    return conn
+
+def init_db():
+    conn = get_connection()
+    cursor = conn.cursor()
+    cursor.execute('''CREATE TABLE IF NOT EXISTS users (
+                        id INTEGER PRIMARY KEY AUTOINCREMENT,
+                        username TEXT UNIQUE NOT NULL,
+                        password TEXT NOT NULL,
+                        name TEXT NOT NULL,
+                        join_date TEXT,
+                        trust_score INTEGER DEFAULT 50)''')
+    try:
+        cursor.execute("ALTER TABLE users ADD COLUMN trust_score INTEGER DEFAULT 50")
+    except sqlite3.OperationalError:
+        pass
+    cursor.execute('''CREATE TABLE IF NOT EXISTS scan_history (
+                        id INTEGER PRIMARY KEY AUTOINCREMENT,
+                        username TEXT NOT NULL,
+                        filename TEXT,
+                        file_type TEXT,
+                        file_size TEXT,
+                        source TEXT,
+                        is_ai INTEGER,
+                        accuracy REAL,
+                        scan_date TEXT)''')
+    cursor.execute('''CREATE TABLE IF NOT EXISTS test_batches (
+                        id INTEGER PRIMARY KEY AUTOINCREMENT,
+                        username TEXT NOT NULL,
+                        total_images INTEGER,
+                        correct_count INTEGER,
+                        wrong_count INTEGER,
+                        accuracy REAL,
+                        test_date TEXT)''')
+    cursor.execute('''CREATE TABLE IF NOT EXISTS test_results (
+                        id INTEGER PRIMARY KEY AUTOINCREMENT,
+                        batch_id INTEGER,
+                        username TEXT NOT NULL,
+                        filename TEXT,
+                        folder_label TEXT,
+                        prediction TEXT,
+                        confidence REAL,
+                        is_mismatch INTEGER,
+                        user_correction TEXT,
+                        corrected_label TEXT,
+                        scan_date TEXT)''')
+    cursor.execute('''CREATE TABLE IF NOT EXISTS learning_data (
+                        id INTEGER PRIMARY KEY AUTOINCREMENT,
+                        username TEXT NOT NULL,
+                        filename TEXT,
+                        original_prediction TEXT,
+                        correct_label TEXT,
+                        confidence REAL,
+                        source TEXT,
+                        scan_date TEXT)''')
+    conn.commit()
+    conn.close()
+    for path in DATASET_CONFIG.values():
+        if not os.path.exists(path):
+            os.makedirs(path, exist_ok=True)
+
+def hash_password(password):
+    return hashlib.sha256(password.encode()).hexdigest()
+
+def register_user(username, password, name):
+    conn = get_connection()
+    try:
+        conn.execute("INSERT INTO users (username, password, name, join_date) VALUES (?, ?, ?, ?)",
+                     (username, hash_password(password), name, datetime.now().isoformat()))
+        conn.commit()
+        return True
+    except sqlite3.IntegrityError:
+        return False
+    finally:
+        conn.close()
+
+def login_user(username, password):
+    conn = get_connection()
+    user = conn.execute("SELECT * FROM users WHERE username=? AND password=?", 
+                        (username, hash_password(password))).fetchone()
+    conn.close()
+    return dict(user) if user else None
+
+def add_scan_history(username, filename, file_type, file_size, source, is_ai, accuracy):
+    conn = get_connection()
+    conn.execute('''INSERT INTO scan_history (username, filename, file_type, file_size, source, is_ai, accuracy, scan_date)
+                   VALUES (?, ?, ?, ?, ?, ?, ?, ?)''', 
+                 (username, filename, file_type, file_size, source, is_ai, accuracy, datetime.now().isoformat()))
+    conn.commit()
+    conn.close()
+
+def get_user_history(username):
+    conn = get_connection()
+    scan_rows = conn.execute("SELECT * FROM scan_history WHERE username=? ORDER BY id DESC LIMIT 20", (username,)).fetchall()
+    batch_rows = conn.execute('''SELECT tb.id, tb.total_images, tb.correct_count, tb.wrong_count, tb.accuracy, tb.test_date
+                                  FROM test_batches tb WHERE tb.username=? ORDER BY tb.id DESC LIMIT 20''', (username,)).fetchall()
+    conn.close()
+
+    history = []
+    for row in scan_rows:
+        r = dict(row)
+        r["_type"] = "scan"
+        history.append(r)
+    for row in batch_rows:
+        r = dict(row)
+        r["_type"] = "batch"
+        r["filename"] = f"Batch #{r['id']} ({r['total_images']} gambar)"
+        r["file_type"] = "Batch"
+        r["file_size"] = "-"
+        r["source"] = f"{r['correct_count']} benar / {r['wrong_count']} salah"
+        r["is_ai"] = 0
+        r["accuracy"] = r["accuracy"]
+        r["scan_date"] = r["test_date"]
+        history.append(r)
+
+    history.sort(key=lambda x: x.get("scan_date") or "", reverse=True)
+    return history[:20]
+
+def clear_all_history():
+    conn = get_connection()
+    conn.execute("DELETE FROM scan_history")
+    conn.execute("DELETE FROM test_batches")
+    conn.execute("DELETE FROM test_results")
+    conn.execute("DELETE FROM learning_data")
+    conn.commit()
+    conn.close()
+
+def create_test_batch(username, total_images, correct_count, wrong_count, accuracy):
+    conn = get_connection()
+    cur = conn.execute('''INSERT INTO test_batches (username, total_images, correct_count, wrong_count, accuracy, test_date)
+                          VALUES (?, ?, ?, ?, ?, ?)''',
+                       (username, total_images, correct_count, wrong_count, accuracy, datetime.now().isoformat()))
+    conn.commit()
+    batch_id = cur.lastrowid
+    conn.close()
+    return batch_id
+
+def save_test_result(batch_id, username, filename, folder_label, prediction, confidence, is_mismatch):
+    conn = get_connection()
+    conn.execute('''INSERT INTO test_results (batch_id, username, filename, folder_label, prediction, confidence, is_mismatch, scan_date)
+                    VALUES (?, ?, ?, ?, ?, ?, ?, ?)''',
+                 (batch_id, username, filename, folder_label, prediction, confidence, is_mismatch, datetime.now().isoformat()))
+    conn.commit()
+    conn.close()
+
+def update_test_result_correction(result_id, user_correction, corrected_label):
+    conn = get_connection()
+    conn.execute("UPDATE test_results SET user_correction=?, corrected_label=? WHERE id=?",
+                 (user_correction, corrected_label, result_id))
+    conn.commit()
+    conn.close()
+
+def save_learning_data(username, filename, original_prediction, correct_label, confidence, source="user_correction"):
+    conn = get_connection()
+    conn.execute('''INSERT INTO learning_data (username, filename, original_prediction, correct_label, confidence, source, scan_date)
+                    VALUES (?, ?, ?, ?, ?, ?, ?)''',
+                 (username, filename, original_prediction, correct_label, confidence, source, datetime.now().isoformat()))
+    conn.commit()
+    conn.close()
+
+def get_all_test_batches(username=None):
+    conn = get_connection()
+    if username:
+        rows = conn.execute("SELECT * FROM test_batches WHERE username=? ORDER BY id DESC", (username,)).fetchall()
+    else:
+        rows = conn.execute("SELECT * FROM test_batches ORDER BY id DESC").fetchall()
+    conn.close()
+    return [dict(row) for row in rows]
+
+def get_test_results_by_batch(batch_id):
+    conn = get_connection()
+    rows = conn.execute("SELECT * FROM test_results WHERE batch_id=?", (batch_id,)).fetchall()
+    conn.close()
+    return [dict(row) for row in rows]
+
+def get_overall_accuracy(username=None):
+    conn = get_connection()
+
+    total = 0
+    correct = 0
+
+    if username:
+        rows = conn.execute("SELECT * FROM test_results WHERE username=?", (username,)).fetchall()
+        ld_rows = conn.execute("SELECT * FROM learning_data WHERE username=? AND source='user_correction'", (username,)).fetchall()
+    else:
+        rows = conn.execute("SELECT * FROM test_results").fetchall()
+        ld_rows = conn.execute("SELECT * FROM learning_data WHERE source='user_correction'").fetchall()
+
+    conn.close()
+
+    for r in rows:
+        if not r["folder_label"]:
+            continue
+        total += 1
+        final_label = r["corrected_label"] or r["prediction"]
+        expected = "AI" if r["folder_label"].lower() in ("fake", "ai") else "REAL"
+        if final_label == expected:
+            correct += 1
+
+    for r in ld_rows:
+        total += 1
+        if r["original_prediction"] == r["correct_label"]:
+            correct += 1
+
+    wrong = total - correct
+    acc = round((correct / total * 100), 1) if total > 0 else 0
+    return {"total": total, "correct": correct, "wrong": wrong, "accuracy": acc}
+
+def get_learning_data_count():
+    conn = get_connection()
+    row = conn.execute("SELECT COUNT(*) as cnt FROM learning_data").fetchone()
+    conn.close()
+    return row["cnt"] or 0
+
+def migrate_existing_learning_data():
+    conn = get_connection()
+    rows = conn.execute('''SELECT tr.* FROM test_results tr
+                           LEFT JOIN learning_data ld ON tr.filename = ld.filename AND tr.username = ld.username
+                           WHERE tr.is_mismatch = 1 AND tr.folder_label IS NOT NULL AND ld.id IS NULL''').fetchall()
+    for r in rows:
+        expected = "AI" if r["folder_label"].lower() in ("fake", "ai") else "REAL"
+        conn.execute('''INSERT INTO learning_data (username, filename, original_prediction, correct_label, confidence, source, scan_date)
+                        VALUES (?, ?, ?, ?, ?, ?, ?)''',
+                     (r["username"], r["filename"], r["prediction"], expected, r["confidence"], "batch_mismatch", r["scan_date"]))
+    conn.commit()
+    conn.close()
+
+def sync_scan_history_to_test_results():
+    conn = get_connection()
+    # Cari seluruh scan di scan_history yang belum ada di test_results (batch_id IS NULL)
+    scans = conn.execute('''
+        SELECT sh.username, sh.filename, sh.is_ai, sh.accuracy, sh.scan_date
+        FROM scan_history sh
+        LEFT JOIN test_results tr ON sh.username = tr.username AND sh.filename = tr.filename AND tr.batch_id IS NULL
+        WHERE tr.id IS NULL
+    ''').fetchall()
+    
+    for s in scans:
+        prediction_label = "AI" if s["is_ai"] == 1 else "REAL"
+        
+        # Inferred label
+        inferred_label = None
+        fn_lower = s["filename"].lower()
+        if "real" in fn_lower:
+            inferred_label = "REAL"
+        elif "fake" in fn_lower or "ai" in fn_lower:
+            inferred_label = "AI"
+        else:
+            inferred_label = prediction_label # Default correct
+            
+        is_mismatch = 1 if prediction_label != inferred_label else 0
+        
+        # Cek jika ada user_correction di learning_data
+        ld = conn.execute("SELECT correct_label FROM learning_data WHERE username=? AND filename=? AND source='user_correction' ORDER BY id DESC LIMIT 1",
+                          (s["username"], s["filename"])).fetchone()
+        corrected_label = None
+        if ld:
+            corrected_label = "AI" if ld["correct_label"].upper() in ("FAKE", "AI") else "REAL"
+            is_mismatch = 1 if prediction_label != corrected_label else 0
+            inferred_label = corrected_label
+            
+        conn.execute('''INSERT INTO test_results (batch_id, username, filename, folder_label, prediction, confidence, is_mismatch, corrected_label, scan_date)
+                        VALUES (NULL, ?, ?, ?, ?, ?, ?, ?, ?)''',
+                     (s["username"], s["filename"], inferred_label, prediction_label, s["accuracy"], is_mismatch, corrected_label, s["scan_date"]))
+    conn.commit()
+    conn.close()

index.html

@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Detector Pro</title>
+    <link id="app-style" rel="stylesheet" href="template/style.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+</head>
+<body>
+
+    <!-- IKLAN PRODUK DI BACKGROUND -->
+    <div class="ads-container left">
+        <div class="ad-card">🚀 Deteksi Gambar AI<br><small id="ad-accuracy-text">Akurasi 99.9%</small></div>
+        <div class="ad-card">🎬 File Terdeteksi<br><small id="ad-detected-count">Total: -</small></div>
+        <div class="ad-card">🛡️ Amankan Bisnis Anda<br><small>Dari Konten Palsu</small></div>
+    </div>
+    <div class="ads-container right">
+        <div class="ad-card">⭐ Versi Premium<br><small>Bebas Limit Upload</small></div>
+        <div class="ad-card">📊 Dashboard Analitik<br><small>Pantau Semua Scan</small></div>
+        <div class="ad-card">🔗 API Access<br><small>Integrasikan ke Web Anda</small></div>
+    </div>
+
+    <!-- LOADING SCREEN (POLKADOT THEME) -->
+    <div id="loading-screen" class="polka-dot-bg">
+        <div class="loading-content">
+            <div class="logo-big">🔍</div>
+            <h1>AI DETECTOR PRO</h1>
+            <div class="loader-bar"><div class="loader-fill"></div></div>
+            <p>Mempersiapkan Otak Neural...</p>
+        </div>
+    </div>
+
+    <!-- HALAMAN AUTH (LOGIN & REGISTER) -->
+    <div id="auth-page" class="page hidden">
+        <!-- FEATURE ADVERTISEMENTS MELAYANG ORGANIK -->
+        <div class="auth-float" id="float1">🖼️ Pindai Gambar Real & AI</div>
+        <div class="auth-float" id="auth-detected-count">📁 - File Terdeteksi</div>
+        <div class="auth-float" id="auth-accuracy-text">🎯 Akurasi -</div>
+        <div class="auth-float" id="float4">🤖 Double Model Ensemble (v4)</div>
+        <div class="auth-float" id="float5">💾 Ekspor Dataset ZIP</div>
+        <div class="auth-float" id="float6">⚡ Respon Cepat &lt; 0.5 Detik</div>
+
+        <div class="auth-box">
+            <h2>🔍 AI Detector Pro</h2>
+            <div class="tabs">
+                <button id="tab-login" class="tab-btn active" onclick="switchTab('login')">Login</button>
+                <button id="tab-register" class="tab-btn" onclick="switchTab('register')">Register</button>
+            </div>
+            
+            <!-- Form Login -->
+            <form id="form-login" class="auth-form" onsubmit="handleLogin(event)">
+                <input type="text" id="login-user" placeholder="Username" required>
+                <input type="password" id="login-pass" placeholder="Password" required>
+                <button type="submit" class="btn-primary">MASUK</button>
+                <p id="login-error" class="error-text"></p>
+            </form>
+
+            <!-- Form Register -->
+            <form id="form-register" class="auth-form hidden" onsubmit="handleRegister(event)">
+                <input type="text" id="reg-name" placeholder="Nama Lengkap" required>
+                <input type="text" id="reg-user" placeholder="Username" required>
+                <input type="password" id="reg-pass" placeholder="Password" required>
+                <button type="submit" class="btn-primary">DAFTAR</button>
+                <p id="reg-error" class="error-text"></p>
+            </form>
+        </div>
+    </div>
+
+    <!-- HALAMAN UTAMA APLIKASI -->
+    <div id="main-app" class="page hidden">
+        <nav class="sidebar">
+            <div class="logo-small">🔍</div>
+            <ul>
+                <li class="nav-item active" onclick="showSection('dashboard')">📊 <span>Dashboard</span></li>
+                <li class="nav-item" onclick="showSection('scan-image')">🖼️ <span>Scan Gambar</span></li>
+                <li class="nav-item" onclick="showSection('batch-test')">📁 <span>Batch Test</span></li>
+                <li class="nav-item" onclick="showSection('history')">📋 <span>History</span></li>
+                <li class="nav-item" onclick="showSection('accuracy')">🎯 <span>Akurasi</span></li>
+            </ul>
+            <button class="btn-logout" onclick="handleLogout()">🚪 <span>Logout</span></button>
+        </nav>
+
+        <main class="content">
+            <header style="display: flex; justify-content: space-between; align-items: center;">
+                <div>
+                    <h2>Selamat Datang, <span id="user-name">User</span></h2>
+                    <div id="user-trust-container" style="margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 6px;">
+                        🛡️ Skor Kredibilitas: <b id="user-trust-score" style="color: var(--yellow-main)">50</b>/100
+                        <span id="user-trust-badge" style="font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 4px; background: rgba(255,215,0,0.15); color: var(--yellow-main); border: 1px solid rgba(255,215,0,0.2);">Standar</span>
+                    </div>
+                </div>
+                <div id="api-status-indicator" style="display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); transition: 0.3s;">
+                    <span id="api-status-dot" style="width: 8px; height: 8px; border-radius: 50%; background: #ff4757; box-shadow: 0 0 8px #ff4757; transition: 0.3s;"></span>
+                    <span id="api-status-text" style="color: rgba(255, 255, 255, 0.75);">API Offline</span>
+                </div>
+            </header>
+
+            <!-- DASHBOARD SECTION -->
+            <section id="sec-dashboard" class="section active">
+                <div class="stats-grid" id="dashboard-stats">
+                    <div class="stat-card blue"><h3>-</h3><p>Total Test</p></div>
+                    <div class="stat-card yellow"><h3>-</h3><p>Benar</p></div>
+                    <div class="stat-card blue"><h3>-</h3><p>Salah</p></div>
+                    <div class="stat-card yellow"><h3>-</h3><p>Akurasi</p></div>
+                </div>
+                <div id="dashboard-learning" class="info-box" style="margin-bottom:20px">
+                    Data pembelajaran: <b>-</b> gambar
+                </div>
+                <div class="info-box">
+                    <h3>Cara Menggunakan:</h3>
+                    <ol style="margin-bottom: 15px;">
+                        <li><b>Scan Gambar</b> — upload 1 foto, lihat hasil REAL/AI, konfirmasi Benar/Salah</li>
+                        <li><b>Batch Test</b> — pilih folder berisi subfolder <b>real/</b> dan <b>fake/</b>, scan massal</li>
+                        <li><b>Akurasi</b> — lihat statistik lengkap + download feedback ZIP buat training</li>
+                    </ol>
+                    <div style="padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; gap: 8px;">
+                        <span style="font-size: 16px;">🤖</span>
+                        <span style="font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85);">
+                            Active Model: <span style="color: var(--yellow-main);">Ensemble v4 (Epoch 8 + Epoch 14)</span>
+                        </span>
+                    </div>
+                </div>
+
+                <!-- DASHBOARD QUICK ACTIONS (Poin 3) -->
+                <div style="display: flex; gap: 15px; margin-top: 20px; flex-wrap: wrap;">
+                    <button class="btn-scan" style="flex: 1; min-width: 200px; padding: 15px; font-size: 14px; font-weight: 700; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #ffffff !important; border: 1px solid rgba(255,215,0,0.2); border-radius: 12px; box-shadow: 0 4px 15px rgba(30, 60, 114, 0.25);" onclick="showSection('scan-image')">
+                        🖼️ MULAI SCAN GAMBAR
+                    </button>
+                    <button class="btn-scan" style="flex: 1; min-width: 200px; padding: 15px; font-size: 14px; font-weight: 700; background: linear-gradient(135deg, #001f3f, #003366); color: #ffffff !important; border: 1px solid rgba(255,215,0,0.3); border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 31, 63, 0.25);" onclick="showSection('batch-test')">
+                        📁 MULAI BATCH TEST
+                    </button>
+                </div>
+            </section>
+
+            <!-- SCAN GAMBAR SECTION -->
+            <section id="sec-scan-image" class="section">
+                <div class="upload-container">
+                    <input type="file" id="input-image" accept="image/png, image/jpeg, image/webp" hidden>
+                    <div class="upload-box" onclick="document.getElementById('input-image').click()">
+                        <span class="upload-icon">📁</span>
+                        <p>Klik untuk upload gambar (Maks 10MB)</p>
+                        <small id="img-name">Tidak ada file dipilih</small>
+                    </div>
+                    <button class="btn-scan" onclick="scanFile()">🔍 SCAN GAMBAR</button>
+                </div>
+                <div id="result-image" class="result-box hidden"></div>
+            </section>
+
+            <!-- BATCH TEST SECTION -->
+            <section id="sec-batch-test" class="section">
+                <div class="upload-container">
+                    <div class="info-box" style="margin-bottom:20px">
+                        <h3>Batch Test</h3>
+                        <p>Pilih folder yang berisi subfolder <b>real</b> dan <b>fake</b> (atau <b>ai</b>). Sistem akan scan semua gambar dan membandingkan hasil deteksi dengan label folder.</p>
+                    </div>
+                    <input type="file" id="input-batch" webkitdirectory multiple hidden>
+                    <div class="upload-box" onclick="document.getElementById('input-batch').click()">
+                        <span class="upload-icon">📂</span>
+                        <p>Klik untuk pilih folder</p>
+                        <small id="batch-folder-name">Belum ada folder dipilih</small>
+                    </div>
+                    <div id="batch-file-list" style="width:100%;max-width:600px;margin-bottom:15px"></div>
+                    <button class="btn-scan" onclick="startBatchScan()">🔍 MULAI BATCH TEST</button>
+                </div>
+                <div id="batch-progress" class="hidden" style="margin-top:20px;text-align:center;color:var(--yellow-main)">⏳ Memproses...</div>
+                <div id="batch-result" class="hidden" style="margin-top:20px"></div>
+            </section>
+
+            <!-- HISTORY SECTION -->
+            <section id="sec-history" class="section">
+                <div style="display:flex;gap:10px;align-items:center;margin-bottom:15px;flex-wrap:wrap">
+                    <button class="btn-refresh" onclick="loadHistory()">🔄 Refresh History</button>
+                    <span id="history-count" style="color:rgba(255,255,255,0.5);font-size:13px"></span>
+                </div>
+                <div class="table-wrap">
+                    <table class="history-table">
+                        <thead>
+                            <tr><th>File</th><th>Tipe</th><th>Ukuran</th><th>Sumber</th><th>Akurasi</th><th>Status</th><th>Tanggal</th></tr>
+                        </thead>
+                        <tbody id="history-body">
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+
+            <!-- ACCURACY SECTION -->
+            <section id="sec-accuracy" class="section">
+                <!-- TOOLBAR AKURASI (TIME FILTER, DOWNLOAD FEEDBACK, RESET STATS) -->
+                <div style="display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;align-items:center;">
+                    <button class="btn-refresh" onclick="loadAccuracyReport()">🔄 Refresh</button>
+                    
+                    <select id="accuracy-time-filter" onchange="loadAccuracyReport()" title="Filter Rentang Waktu" aria-label="Filter Rentang Waktu" style="padding: 10px 15px; border-radius: 8px; background: rgba(0, 31, 63, 0.7); color: white; border: 1px solid var(--yellow-main); cursor: pointer; font-size: 14px; font-weight: 600; outline: none; transition: 0.3s;">
+                        <option value="all">📅 Semua Waktu</option>
+                        <option value="today">📅 Hari Ini</option>
+                        <option value="week">📅 Minggu Ini</option>
+                        <option value="month">📅 Bulan Ini</option>
+                    </select>
+                    
+                    <button class="btn-scan" style="padding:10px 20px;font-size:14px;background: linear-gradient(135deg, #1e3c72, #2a5298);border: 1px solid rgba(255,215,0,0.3);" onclick="downloadFeedback()">⬇️ Download Feedback</button>
+                </div>
+
+                <div id="accuracy-summary" style="margin-bottom:20px"></div>
+                
+                <!-- ROW 1 CHART: DONUT & STACKED BAR -->
+                <div class="chart-grid">
+                    <div class="info-box"><canvas id="chart-donut" height="200"></canvas></div>
+                    <div class="info-box"><canvas id="chart-bar" height="200"></canvas></div>
+                </div>
+
+                <!-- ROW 2 CHART: CONFUSION MATRIX & CONFIDENCE DISTRIBUTION CURVE -->
+                <div class="chart-grid" style="margin-top: 20px;">
+                    <!-- Sisi Kiri Bawah: Confusion Matrix 2x2 -->
+                    <div class="info-box" style="display: flex; flex-direction: column; justify-content: space-between;">
+                        <h3 style="color: var(--yellow-main); margin-bottom: 15px; font-size: 16px; text-align: center;">📊 Confusion Matrix (2x2)</h3>
+                        <div style="display: grid; grid-template-columns: 80px 1fr 1fr; gap: 8px; text-align: center; font-size: 12px; font-weight: bold; flex: 1; align-content: center;">
+                            <div></div>
+                            <div style="background: rgba(255,255,255,0.05); padding: 8px; border-radius: 6px; color: var(--yellow-light);">Prediksi REAL</div>
+                            <div style="background: rgba(255,255,255,0.05); padding: 8px; border-radius: 6px; color: var(--yellow-light);">Prediksi AI</div>
+
+                            <div style="background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--yellow-light); min-height: 50px;">Aktual REAL</div>
+                            <div id="cm-tn" style="background: rgba(46, 213, 115, 0.12); border: 1px solid var(--success); color: var(--success); padding: 12px 6px; border-radius: 8px; font-size: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center;">0<br><span style="font-size: 9px; opacity: 0.8; font-weight: normal; margin-top: 3px;">TN (True Real)</span></div>
+                            <div id="cm-fp" style="background: rgba(255, 71, 87, 0.12); border: 1px solid var(--danger); color: var(--danger); padding: 12px 6px; border-radius: 8px; font-size: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center;">0<br><span style="font-size: 9px; opacity: 0.8; font-weight: normal; margin-top: 3px;">FP (False AI)</span></div>
+
+                            <div style="background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--yellow-light); min-height: 50px;">Aktual AI</div>
+                            <div id="cm-fn" style="background: rgba(255, 71, 87, 0.12); border: 1px solid var(--danger); color: var(--danger); padding: 12px 6px; border-radius: 8px; font-size: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center;">0<br><span style="font-size: 9px; opacity: 0.8; font-weight: normal; margin-top: 3px;">FN (False Real)</span></div>
+                            <div id="cm-tp" style="background: rgba(46, 213, 115, 0.12); border: 1px solid var(--success); color: var(--success); padding: 12px 6px; border-radius: 8px; font-size: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center;">0<br><span style="font-size: 9px; opacity: 0.8; font-weight: normal; margin-top: 3px;">TP (True AI)</span></div>
+                        </div>
+                    </div>
+                    
+                    <!-- Sisi Kanan Bawah: Distribusi Skor Confidence -->
+                    <div class="info-box">
+                        <canvas id="chart-confidence" height="200"></canvas>
+                    </div>
+                </div>
+                
+                <!-- NEW FAILURE LOG / TABLE RIWAYAT SALAH TEBAK -->
+                <div class="info-box" style="margin-top: 20px;">
+                    <h3 style="color: var(--danger); margin-bottom: 15px; display: flex; align-items: center; gap: 8px; font-size: 16px;">
+                        📋 Riwayat Salah Tebak (Failure Log / Mismatch List)
+                    </h3>
+                    <div class="table-wrap">
+                        <table class="history-table" style="font-size: 13px;">
+                            <thead>
+                                <tr>
+                                    <th>Nama File</th>
+                                    <th>Ground Truth (Aktual)</th>
+                                    <th>Prediksi Model</th>
+                                    <th>Skor Confidence</th>
+                                    <th>Tanggal</th>
+                                </tr>
+                            </thead>
+                            <tbody id="failure-log-body">
+                                <tr><td colspan="5" style="text-align:center;padding:20px;color:rgba(255,255,255,0.3)">Loading data...</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,6 @@
+fastapi>=0.95.0
+uvicorn>=0.20.0
+httpx>=0.24.0
+Pillow>=9.0.0
+jinja2>=3.0.0
+python-multipart>=0.0.6

script.js

@@ -0,0 +1,785 @@
+const API_URL = window.location.origin;
+let currentUser = "";
+
+async function updateGlobalStats() {
+    try {
+        const url = `${API_URL}/api/accuracy-report`;
+        const res = await fetch(url);
+        const data = await res.json();
+        const s = data.stats;
+        const totalFiles = data.scan_count + data.batch_images;
+
+        const adAcc = document.getElementById("ad-accuracy-text");
+        if (adAcc) adAcc.innerText = `Akurasi ${s.accuracy}%`;
+
+        const adCount = document.getElementById("ad-detected-count");
+        if (adCount) adCount.innerText = `${totalFiles} File`;
+
+        const authCount = document.getElementById("auth-detected-count");
+        if (authCount) authCount.innerText = `📁 ${totalFiles} File Terdeteksi`;
+
+        const authAcc = document.getElementById("auth-accuracy-text");
+        if (authAcc) authAcc.innerText = `🎯 Akurasi ${s.accuracy}%`;
+
+        return { s, data, totalFiles };
+    } catch (e) {
+        console.error("Gagal update global stats:", e);
+    }
+}
+
+// --- 1. LOADING SCREEN LOGIC ---
+window.onload = () => {
+    document.getElementById("loading-screen").classList.add("hidden");
+    document.getElementById("auth-page").classList.remove("hidden");
+    document.getElementById("auth-page").style.display = "block";
+    updateGlobalStats();
+    checkApiConnection();
+    // Dynamic connection heartbeat every 10 seconds (Poin 1)
+    setInterval(checkApiConnection, 10000);
+};
+
+async function checkApiConnection() {
+    const dot = document.getElementById("api-status-dot");
+    const text = document.getElementById("api-status-text");
+    const indicator = document.getElementById("api-status-indicator");
+    if (!dot || !text || !indicator) return;
+
+    try {
+        const res = await fetch(`${API_URL}/api/accuracy-report`);
+        if (res.ok) {
+            dot.style.background = "#2ed573";
+            dot.style.boxShadow = "0 0 10px #2ed573";
+            text.innerText = "API Online";
+            text.style.color = "#2ed573";
+            indicator.style.borderColor = "rgba(46, 213, 115, 0.3)";
+        } else {
+            throw new Error();
+        }
+    } catch (e) {
+        dot.style.background = "#ff4757";
+        dot.style.boxShadow = "0 0 10px #ff4757";
+        text.innerText = "API Offline";
+        text.style.color = "#ff4757";
+        indicator.style.borderColor = "rgba(255, 71, 87, 0.3)";
+    }
+}
+
+// --- 2. ANIMASI PARTIKEL SENTUHAN LAYAR ---
+document.addEventListener("click", (e) => {
+    createParticles(e.clientX, e.clientY);
+});
+
+function createParticles(x, y) {
+    const colors = ['#FFD700', '#0052D4', '#FFFACD', '#4D8BF5'];
+    for (let i = 0; i < 8; i++) { // Buat 8 partikel per klik
+        const particle = document.createElement("div");
+        particle.classList.add("click-particle");
+        const size = Math.random() * 10 + 5; // Ukuran 5-15px
+        particle.style.width = `${size}px`;
+        particle.style.height = `${size}px`;
+        particle.style.left = `${x}px`;
+        particle.style.top = `${y}px`;
+        particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+
+        // Arah random terbang partikel
+        const tx = (Math.random() - 0.5) * 150;
+        const ty = (Math.random() - 0.5) * 150;
+        particle.style.setProperty('--tx', `${tx}px`);
+        particle.style.setProperty('--ty', `${ty}px`);
+
+        document.body.appendChild(particle);
+        setTimeout(() => particle.remove(), 800); // Hapus partikel setelah animasi selesai
+    }
+}
+
+// --- 3. AUTH LOGIC ---
+function switchTab(tab) {
+    document.getElementById("form-login").classList.toggle("hidden", tab !== "login");
+    document.getElementById("form-register").classList.toggle("hidden", tab !== "register");
+    document.getElementById("tab-login").classList.toggle("active", tab === "login");
+    document.getElementById("tab-register").classList.toggle("active", tab === "register");
+}
+
+function updateUserTrustScoreUI(score) {
+    const scoreEl = document.getElementById("user-trust-score");
+    const badgeEl = document.getElementById("user-trust-badge");
+    if (!scoreEl || !badgeEl) return;
+    
+    scoreEl.innerText = score;
+    
+    if (score >= 80) {
+        badgeEl.innerText = "🛡️ Pakar";
+        badgeEl.style.background = "rgba(46, 204, 113, 0.15)";
+        badgeEl.style.color = "var(--success)";
+        badgeEl.style.borderColor = "rgba(46, 204, 113, 0.25)";
+    } else if (score < 50) {
+        badgeEl.innerText = "⚠️ Dicurigai";
+        badgeEl.style.background = "rgba(255, 71, 87, 0.15)";
+        badgeEl.style.color = "var(--danger)";
+        badgeEl.style.borderColor = "rgba(255, 71, 87, 0.25)";
+    } else {
+        badgeEl.innerText = "Standar";
+        badgeEl.style.background = "rgba(255, 215, 0, 0.15)";
+        badgeEl.style.color = "var(--yellow-main)";
+        badgeEl.style.borderColor = "rgba(255, 215, 0, 0.25)";
+    }
+}
+
+async function handleLogin(e) {
+    e.preventDefault();
+    const u = document.getElementById("login-user").value;
+    const p = document.getElementById("login-pass").value;
+    const formData = new URLSearchParams({ username: u, password: p });
+
+    try {
+        const res = await fetch(`${API_URL}/api/login`, { method: "POST", body: formData });
+        const data = await res.json();
+        if (res.ok) {
+            currentUser = data.username;
+            document.getElementById("user-name").innerText = data.name;
+            updateUserTrustScoreUI(data.trust_score || 50);
+            document.getElementById("auth-page").classList.add("hidden");
+            document.getElementById("main-app").classList.remove("hidden");
+            document.getElementById("app-style").href = "style.css";
+            loadDashboard();
+            loadHistory();
+        } else {
+            document.getElementById("login-error").innerText = data.detail;
+        }
+    } catch (err) {
+        alert("Gagal terhubung ke server Backend! Pastikan uvicorn backend:app --reload sedang berjalan.");
+    }
+}
+
+async function handleRegister(e) {
+    e.preventDefault();
+    const n = document.getElementById("reg-name").value;
+    const u = document.getElementById("reg-user").value;
+    const p = document.getElementById("reg-pass").value;
+    const formData = new URLSearchParams({ name: n, username: u, password: p });
+
+    const res = await fetch(`${API_URL}/api/register`, { method: "POST", body: formData });
+    const data = await res.json();
+    if (res.ok) {
+        alert("Registrasi berhasil! Silakan login.");
+        switchTab('login');
+    } else {
+        document.getElementById("reg-error").innerText = data.detail;
+    }
+}
+
+function handleLogout() {
+    currentUser = "";
+    document.getElementById("main-app").classList.add("hidden");
+    document.getElementById("auth-page").classList.remove("hidden");
+    document.getElementById("app-style").href = "template/style.css";
+}
+
+// --- 4. NAVIGATION LOGIC ---
+function showSection(sectionId) {
+    document.querySelectorAll(".section").forEach(s => s.classList.remove("active"));
+    document.querySelectorAll(".nav-item").forEach(n => n.classList.remove("active"));
+    document.getElementById(`sec-${sectionId}`).classList.add("active");
+    
+    // Safe sidebar nav item highlight resolution (works from sidebar and shortcuts!)
+    const navItems = document.querySelectorAll(".nav-item");
+    navItems.forEach(n => {
+        if (n.getAttribute("onclick") && n.getAttribute("onclick").includes(`'${sectionId}'`)) {
+            n.classList.add("active");
+        }
+    });
+
+    if (sectionId === "dashboard") loadDashboard();
+    if (sectionId === "history") loadHistory();
+    if (sectionId === "accuracy") loadAccuracyReport();
+}
+
+async function loadDashboard() {
+    if (!currentUser) return;
+    try {
+        const statsData = await updateGlobalStats();
+        if (!statsData) return;
+        const { s, data } = statsData;
+        const accColor = s.accuracy >= 70 ? "var(--success)" : s.accuracy >= 40 ? "var(--blue-dark)" : "var(--danger)";
+        document.getElementById("dashboard-stats").innerHTML = `
+            <div class="stat-card blue"><h3>${s.total}</h3><p>Total Test</p></div>
+            <div class="stat-card yellow"><h3>${s.correct}</h3><p>Benar</p></div>
+            <div class="stat-card blue"><h3>${s.wrong}</h3><p>Salah</p></div>
+            <div class="stat-card yellow"><h3 style="color:${accColor}">${s.accuracy}%</h3><p>Akurasi</p></div>`;
+        document.getElementById("dashboard-learning").innerHTML = `
+            Data pembelajaran: <b style="color:var(--yellow-main)">${data.learning_data_count}</b> gambar siap training
+            &nbsp; <button class="btn-scan" style="padding:5px 15px;font-size:12px" onclick="showSection('accuracy');event.target.blur()">Detail →</button>`;
+    } catch (e) { }
+}
+
+// --- 5. FILE SCANNING LOGIC ---
+document.getElementById("input-image").addEventListener("change", (e) => {
+    document.getElementById("img-name").innerText = e.target.files[0]?.name || "Tidak ada file dipilih";
+});
+
+async function scanFile() {
+    const fileInput = document.getElementById("input-image");
+    const resultBox = document.getElementById("result-image");
+
+    if (!fileInput.files[0]) return alert("Pilih file terlebih dahulu!");
+
+    const file = fileInput.files[0];
+    if (file.size > 10 * 1024 * 1024) return alert("Ukuran file melebihi batas 10MB!");
+
+    resultBox.classList.remove("hidden", "ai", "real");
+    resultBox.innerHTML = "<h3 style='color: var(--yellow-main)'>⏳ Menganalisis file... Mohon tunggu.</h3>";
+
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("username", currentUser);
+
+    try {
+        const res = await fetch(`${API_URL}/api/scan-image`, { method: "POST", body: formData });
+        const data = await res.json();
+
+        if (res.ok) {
+            const statusClass = data.is_ai ? "ai" : "real";
+            const statusText = data.is_ai ? "⚠️ GAMBAR PALSU (AI)" : "✅ GAMBAR ASLI (REAL)";
+            const statusColor = data.is_ai ? "var(--danger)" : "var(--success)";
+
+            resultBox.className = `result-box ${statusClass}`;
+            resultBox.innerHTML = `
+                <div class="result-title" style="color: ${statusColor}">
+                    <span>${statusText}</span>
+                    <span>Akurasi: ${data.accuracy}%</span>
+                </div>
+                <div class="badge-bar" style="display:flex;gap:8px;margin-bottom:15px;flex-wrap:wrap">
+                    <span class="badge" style="background:rgba(255,215,0,0.1);color:var(--yellow-main);border:1px solid rgba(255,215,0,0.25);padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px">
+                        🧬 Cosine Similarity: ${(data.similarity * 100).toFixed(1)}%
+                    </span>
+                    ${data.is_outlier 
+                        ? `<span class="badge" style="background:rgba(255,71,87,0.1);color:var(--danger);border:1px solid rgba(255,71,87,0.25);padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px">💡 Data Asing (Outlier)</span>`
+                        : `<span class="badge" style="background:rgba(46,204,113,0.1);color:var(--success);border:1px solid rgba(46,204,113,0.25);padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px">🎯 Klasifikasi Aman</span>`
+                    }
+                    ${data.is_trap 
+                        ? `<span class="badge" style="background:rgba(230,126,34,0.15);color:#e67e22;border:1px solid rgba(230,126,34,0.25);padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px">⚠️ Trap Image Mode</span>`
+                        : ''
+                    }
+                    ${data.is_dark 
+                        ? `<span class="badge" style="background:rgba(230,126,34,0.1);color:#e67e22;border:1px solid rgba(230,126,34,0.25);padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px">🌙 Low Light (Cahaya Rendah)</span>`
+                        : ''
+                    }
+                    ${data.is_grayscale 
+                        ? `<span class="badge" style="background:rgba(149,165,166,0.15);color:#bdc3c7;border:1px solid rgba(149,165,166,0.25);padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px">⚪ Monokrom (Hitam Putih)</span>`
+                        : ''
+                    }
+                </div>
+                
+                ${(data.is_dark || data.is_grayscale) 
+                    ? `
+                    <div style="background: rgba(230,126,34,0.1); border: 1px dashed rgba(230,126,34,0.3); border-radius: 8px; padding: 12px; margin-bottom: 15px; font-size: 12px; color: #f39c12; line-height: 1.5; text-align: left;">
+                        <b>⚠️ Rekomendasi Kondisi Deteksi:</b><br/>
+                        ${data.is_dark ? '• Cahaya terdeteksi rendah (kecerahan rata-rata: ' + data.avg_brightness + '/255). Hal ini memicu noise sensor kamera yang dapat mengganggu keakuratan forensik AI.<br/>' : ''}
+                        ${data.is_grayscale ? '• Gambar monokrom/hitam-putih terdeteksi. Kehilangan informasi kromatik (saluran warna RGB) secara drastis dapat menurunkan performa klasifikasi model AI.<br/>' : ''}
+                        <i style="display:block;margin-top:6px;color:rgba(255,255,255,0.7)">Disarankan untuk melakukan scan ulang menggunakan foto dengan pencahayaan cukup dan penuh warna (Full RGB).</i>
+                    </div>
+                    ` 
+                    : ''
+                }
+
+                <div class="details-grid">
+                    <div class="detail-item">
+                        <div class="detail-label">Nama File</div>
+                        <div class="detail-value">${data.filename}</div>
+                    </div>
+                    <div class="detail-item">
+                        <div class="detail-label">Tipe</div>
+                        <div class="detail-value">${data.type.toUpperCase()}</div>
+                    </div>
+                    <div class="detail-item">
+                        <div class="detail-label">Ukuran File</div>
+                        <div class="detail-value">${data.file_size}</div>
+                    </div>
+                    <div class="detail-item">
+                        <div class="detail-label">Sumber Deteksi</div>
+                        <div class="detail-value" style="font-size:12px">${data.source}</div>
+                    </div>
+                    <div class="detail-item">
+                        <div class="detail-label">Tanggal Scan</div>
+                        <div class="detail-value">${data.date}</div>
+                    </div>
+                    <div class="detail-item">
+                        <div class="detail-label">Keakuratan</div>
+                        <div class="detail-value" style="color: ${statusColor}">${data.accuracy}%</div>
+                    </div>
+                </div>
+                <div style="margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,0.2)">
+                    <p style="margin-bottom:10px;color:var(--yellow-main)">Apakah hasil ini benar?</p>
+                    <button class="btn-scan" style="padding:8px 25px;font-size:14px;margin-right:10px" onclick="confirmSingleResult('${data.filename}', '${data.is_ai ? "AI" : "REAL"}', '${data.accuracy}', '${data.feedback_id || ""}', this)">✅ Benar</button>
+                    <button class="btn-scan" style="padding:8px 25px;font-size:14px" onclick="correctSingleResult('${data.filename}', '${data.is_ai ? "AI" : "REAL"}', '${data.accuracy}', '${data.feedback_id || ""}', this)">❌ Salah</button>
+                    <div id="single-correction-area" style="margin-top:10px"></div>
+                </div>
+            `;
+            updateUserTrustScoreUI(data.trust_score || 50);
+        } else {
+            resultBox.innerHTML = `<h3 style="color: var(--danger)">Error: ${data.detail}</h3>`;
+        }
+    } catch (err) {
+        resultBox.innerHTML = "<h3 style='color: var(--danger)'>Gagal terhubung ke server Backend.</h3>";
+    }
+}
+
+function confirmSingleResult(filename, prediction, accuracy, feedbackId, btn) {
+    fetch(`${API_URL}/api/correction-single`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            username: currentUser,
+            filename: filename,
+            original_prediction: prediction,
+            correct_label: prediction,
+            confidence: parseFloat(accuracy),
+            feedback_id: feedbackId
+        })
+    })
+    .then(res => res.json())
+    .then(data => {
+        updateGlobalStats();
+        if (data.is_trap) {
+            updateUserTrustScoreUI(data.new_trust);
+            const scoreDiff = data.trust_change > 0 ? `+${data.trust_change}` : `${data.trust_change}`;
+            const statusIcon = data.trap_correct ? "🎉 BENAR!" : "❌ SALAH!";
+            alert(`🛡️ TRAP IMAGE DETECTED!\nFeedback Anda ${statusIcon}\nSkor Kredibilitas Anda: ${scoreDiff} (Sekarang: ${data.new_trust}/100)`);
+        }
+    })
+    .catch(() => { });
+    btn.closest("div").innerHTML = "<p style='color:var(--success)'>✅ Konfirmasi tersimpan!</p>";
+}
+
+function correctSingleResult(filename, prediction, accuracy, feedbackId, btn) {
+    const correctLabel = prediction === "AI" ? "REAL" : "AI";
+    fetch(`${API_URL}/api/correction-single`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            username: currentUser,
+            filename: filename,
+            original_prediction: prediction,
+            correct_label: correctLabel,
+            confidence: parseFloat(accuracy),
+            feedback_id: feedbackId
+        })
+    })
+    .then(res => res.json())
+    .then(data => {
+        updateGlobalStats();
+        if (data.is_trap) {
+            updateUserTrustScoreUI(data.new_trust);
+            const scoreDiff = data.trust_change > 0 ? `+${data.trust_change}` : `${data.trust_change}`;
+            const statusIcon = data.trap_correct ? "🎉 BENAR!" : "❌ SALAH!";
+            alert(`🛡️ TRAP IMAGE DETECTED!\nFeedback Anda ${statusIcon}\nSkor Kredibilitas Anda: ${scoreDiff} (Sekarang: ${data.new_trust}/100)`);
+        }
+    })
+    .catch(() => { });
+    btn.closest("div").innerHTML = `<p style='color:var(--success)'>✅ Koreksi tersimpan! (seharusnya ${correctLabel})</p>`;
+}
+
+// --- 7. BATCH TEST LOGIC ---
+let batchFiles = [];
+let batchLabels = [];
+
+document.getElementById("input-batch").addEventListener("change", (e) => {
+    const files = e.target.files;
+    if (!files.length) return;
+
+    const folderName = files[0].webkitRelativePath.split('/')[0];
+    document.getElementById("batch-folder-name").innerText = folderName;
+
+    batchFiles = [];
+    batchLabels = [];
+    const listDiv = document.getElementById("batch-file-list");
+    listDiv.innerHTML = "<h4 style='margin-bottom:10px'>File ditemukan:</h4>";
+
+    const table = document.createElement("table");
+    table.className = "history-table";
+    table.innerHTML = `<thead><tr><th>File</th><th>Folder</th></tr></thead><tbody></tbody>`;
+    const tbody = table.querySelector("tbody");
+
+    for (let f of files) {
+        const parts = f.webkitRelativePath.split('/');
+        const label = parts.length > 1 ? parts[parts.length - 2] : "";
+        if (!f.name.match(/\.(png|jpg|jpeg|webp)$/i)) continue;
+
+        // Normalize folder label for display consistency (Poin 2)
+        const labelUpper = label.toUpperCase();
+        const normLabel = (labelUpper === "FAKE" || labelUpper === "AI") ? "AI" : (labelUpper === "REAL" ? "REAL" : labelUpper);
+
+        batchFiles.push(f);
+        batchLabels.push(normLabel);
+
+        const tr = document.createElement("tr");
+        const color = normLabel === "REAL" ? "var(--success)" :
+            (normLabel === "AI" || normLabel === "FAKE") ? "var(--danger)" : "var(--yellow-main)";
+        tr.innerHTML = `<td>${f.name}</td><td style="color:${color};font-weight:bold">${normLabel || "-"}</td>`;
+        tbody.appendChild(tr);
+    }
+
+    listDiv.appendChild(table);
+    listDiv.innerHTML += `<p style="margin-top:10px;color:var(--yellow-main)">Total: <b>${batchFiles.length}</b> gambar</p>`;
+});
+
+async function startBatchScan() {
+    if (!batchFiles.length) return alert("Pilih folder terlebih dahulu!");
+    if (!currentUser) return alert("Login dulu!");
+
+    const progress = document.getElementById("batch-progress");
+    const resultDiv = document.getElementById("batch-result");
+    const confirmArea = document.getElementById("batch-confirm-area");
+    progress.classList.remove("hidden");
+    resultDiv.classList.add("hidden");
+    if (confirmArea) confirmArea.classList.add("hidden");
+    progress.innerHTML = "⏳ Mengirim file ke server...";
+
+    const formData = new FormData();
+    for (let f of batchFiles) {
+        formData.append("files", f);
+    }
+    formData.append("username", currentUser);
+    // Convert to robust filename -> label map to prevent any index alignment shifts
+    const labelMap = {};
+    for (let i = 0; i < batchFiles.length; i++) {
+        labelMap[batchFiles[i].name] = batchLabels[i];
+    }
+    formData.append("labels", JSON.stringify(labelMap));
+
+    try {
+        const res = await fetch(`${API_URL}/api/batch-scan`, { method: "POST", body: formData });
+        const data = await res.json();
+        progress.classList.add("hidden");
+
+        if (!res.ok) {
+            resultDiv.innerHTML = `<h3 style="color:var(--danger)">Error: ${data.detail}</h3>`;
+            resultDiv.classList.remove("hidden");
+            return;
+        }
+
+        displayBatchResults(data, resultDiv, confirmArea);
+        updateGlobalStats();
+    } catch (err) {
+        progress.innerHTML = "<h3 style='color:var(--danger)'>Gagal terhubung ke server.</h3>";
+    }
+}
+
+function displayBatchResults(data, resultDiv, confirmArea) {
+    const color = data.accuracy >= 70 ? "var(--success)" : data.accuracy >= 40 ? "var(--blue-dark)" : "var(--danger)";
+
+    let html = `
+        <div class="result-box" style="border-color:${color}">
+            <div class="result-title" style="color:${color}; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
+                <div>
+                    <span>Hasil Batch Test</span>
+                    <span style="font-size: 12px; background: rgba(255, 215, 0, 0.15); color: var(--yellow-main); padding: 4px 8px; border-radius: 6px; margin-left: 10px; font-weight: normal; border: 1px solid rgba(255, 215, 0, 0.3)">Using Threshold: 0.50</span>
+                </div>
+                <span>Akurasi: ${data.accuracy}%</span>
+            </div>
+            <div class="details-grid">
+                <div class="detail-item">
+                    <div class="detail-label">Total Gambar</div>
+                    <div class="detail-value">${data.total}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="detail-label">Benar</div>
+                    <div class="detail-value" style="color:var(--success)">${data.correct}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="detail-label">Salah</div>
+                    <div class="detail-value" style="color:var(--danger)">${data.wrong}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="detail-label">Akurasi</div>
+                    <div class="detail-value" style="color:${color}">${data.accuracy}%</div>
+                </div>
+            </div>
+        </div>
+        <div class="table-wrap" style="margin-top:15px">
+        <table class="history-table">
+            <thead><tr><th>File</th><th>Folder</th><th>Prediksi</th><th>Confidence</th><th>Status</th></tr></thead>
+            <tbody>`;
+
+    data.results.forEach((r, i) => {
+        if (r.error) {
+            html += `<tr><td>${r.filename}</td><td colspan="4" style="color:var(--danger)">Error: ${r.error}</td></tr>`;
+            return;
+        }
+        const statusColor = r.is_mismatch ? "var(--danger)" : "var(--success)";
+        const statusText = r.is_mismatch ? "❌ SALAH" : "✅ BENAR";
+        
+        // Capitalize folder label consistently (Poin 2)
+        const folderUpper = r.folder_label ? r.folder_label.toUpperCase() : "-";
+        const folderColor = folderUpper === "REAL" ? "var(--success)" :
+            (folderUpper === "AI" || folderUpper === "FAKE") ? "var(--danger)" : "var(--yellow-main)";
+        
+        const predColor = r.prediction === "REAL" ? "var(--success)" : "var(--danger)";
+        
+        // Highlight incorrect rows (Poin 3)
+        const rowBg = r.is_mismatch ? "background: rgba(255, 71, 87, 0.08);" : "";
+        
+        html += `<tr style="${rowBg}">
+            <td>${r.filename}</td>
+            <td style="color:${folderColor};font-weight:bold">${folderUpper}</td>
+            <td style="color:${predColor};font-weight:bold">${r.prediction}</td>
+            <td style="color:var(--yellow-main)">${r.confidence}%</td>
+            <td style="color:${statusColor};font-weight:bold">${statusText}</td>
+        </tr>`;
+    });
+
+    html += `</tbody></table></div>`;
+    html += `<div style="margin-top:15px;text-align:center"><button class="btn-scan" onclick="showSection('accuracy');event.target.closest('#batch-result .btn-scan').remove()" style="padding:10px 30px;font-size:14px">📊 Lihat Akurasi →</button></div>`;
+    resultDiv.innerHTML = html;
+    resultDiv.classList.remove("hidden");
+
+}
+
+// --- 7. ACCURACY REPORT ---
+async function loadAccuracyReport() {
+    if (!currentUser) return;
+
+    const summaryDiv = document.getElementById("accuracy-summary");
+    const timeFilter = document.getElementById("accuracy-time-filter")?.value || "all";
+
+    try {
+        const res = await fetch(`${API_URL}/api/accuracy-report?filter=${timeFilter}`);
+        const report = await res.json();
+
+        const s = report.stats;
+        const matrix = report.confusion_matrix;
+        const dist = report.confidence_distribution;
+        const failures = report.failures;
+
+        const textColor = s.accuracy >= 70 ? "var(--success)" : s.accuracy >= 40 ? "var(--yellow-main)" : "var(--danger)";
+
+        // 1. Render Summary stats & Advanced metrics
+        summaryDiv.innerHTML = `
+            <!-- Primary Stats -->
+            <div class="stats-grid">
+                <div class="stat-card blue"><h3>${s.total}</h3><p>Total Test</p></div>
+                <div class="stat-card yellow"><h3>${s.correct}</h3><p>Benar</p></div>
+                <div class="stat-card blue"><h3>${s.wrong}</h3><p>Salah</p></div>
+                <div class="stat-card yellow"><h3 style="color:${textColor}">${s.accuracy}%</h3><p>Akurasi</p></div>
+            </div>
+            
+            <!-- Advanced ML Metrics -->
+            <div class="stats-grid" style="grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 15px;">
+                <div class="stat-card" style="background: #002244 !important; border: 1px solid rgba(255, 215, 0, 0.35) !important; border-left: 4px solid var(--yellow-main) !important; padding: 15px; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;">
+                    <h3 style="font-size: 24px; color: #FFD700 !important; font-weight: 800; margin: 0; opacity: 1 !important;">${s.precision}%</h3>
+                    <p style="font-size: 11px; margin: 6px 0 0 0; color: #ffffff !important; opacity: 1 !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;">Precision (Presisi)</p>
+                </div>
+                <div class="stat-card" style="background: #002244 !important; border: 1px solid rgba(255, 215, 0, 0.35) !important; border-left: 4px solid var(--yellow-main) !important; padding: 15px; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;">
+                    <h3 style="font-size: 24px; color: #FFD700 !important; font-weight: 800; margin: 0; opacity: 1 !important;">${s.recall}%</h3>
+                    <p style="font-size: 11px; margin: 6px 0 0 0; color: #ffffff !important; opacity: 1 !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;">Recall (Sensitivitas)</p>
+                </div>
+                <div class="stat-card" style="background: #002244 !important; border: 1px solid rgba(255, 215, 0, 0.35) !important; border-left: 4px solid var(--yellow-main) !important; padding: 15px; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;">
+                    <h3 style="font-size: 24px; color: #FFD700 !important; font-weight: 800; margin: 0; opacity: 1 !important;">${s.f1_score}%</h3>
+                    <p style="font-size: 11px; margin: 6px 0 0 0; color: #ffffff !important; opacity: 1 !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;">F1-Score (Harmonis)</p>
+                </div>
+            </div>
+            
+            <!-- Info Box -->
+            <div class="info-box" style="margin-top: 15px;">
+                <p>Batch test: <b style="color:var(--yellow-main)">${report.batch_images}</b> gambar</p>
+                <p>Scan individu: <b style="color:var(--yellow-main)">${report.scan_count}</b> gambar</p>
+                <p>Total data pembelajaran: <b style="color:var(--yellow-main)">${report.learning_data_count}</b> gambar (siap training)</p>
+            </div>
+        `;
+
+        // 2. Render Confusion Matrix Values
+        document.getElementById("cm-tp").innerHTML = `${matrix.tp}<br><span style="font-size: 9px; opacity: 0.8; font-weight: normal; margin-top: 3px;">TP (True AI)</span>`;
+        document.getElementById("cm-fp").innerHTML = `${matrix.fp}<br><span style="font-size: 9px; opacity: 0.8; font-weight: normal; margin-top: 3px;">FP (False AI)</span>`;
+        document.getElementById("cm-fn").innerHTML = `${matrix.fn}<br><span style="font-size: 9px; opacity: 0.8; font-weight: normal; margin-top: 3px;">FN (False Real)</span>`;
+        document.getElementById("cm-tn").innerHTML = `${matrix.tn}<br><span style="font-size: 9px; opacity: 0.8; font-weight: normal; margin-top: 3px;">TN (True Real)</span>`;
+
+        // 3. Render Failure Log Table
+        const failureBody = document.getElementById("failure-log-body");
+        failureBody.innerHTML = "";
+        if (failures.length === 0) {
+            failureBody.innerHTML = "<tr><td colspan='5' style='text-align:center;padding:20px;color:rgba(255,255,255,0.3)'>Tidak ada kesalahan tebak terdeteksi dalam data pengetesan ini! 🎉</td></tr>";
+        } else {
+            failures.forEach(f => {
+                const expColor = f.expected === 'AI' ? 'var(--danger)' : 'var(--success)';
+                const predColor = f.prediction === 'AI' ? 'var(--danger)' : 'var(--success)';
+                failureBody.innerHTML += `
+                    <tr>
+                        <td>${f.filename}</td>
+                        <td><span style="color: ${expColor}; font-weight:bold">${f.expected}</span></td>
+                        <td><span style="color: ${predColor}">${f.prediction}</span></td>
+                        <td style="color: var(--yellow-main); font-weight:bold">${f.confidence}%</td>
+                        <td style="font-size: 11px; opacity: 0.7;">${f.date}</td>
+                    </tr>
+                `;
+            });
+        }
+
+        // 4. Render Charts
+        drawDonutChart(s.correct, s.wrong);
+        drawBarChart(report.batches);
+        drawConfidenceChart(dist);
+    } catch (err) {
+        console.error("Gagal memuat accuracy report:", err);
+    }
+}
+
+let chartDonut = null, chartBar = null, chartConfidence = null;
+
+function drawDonutChart(correct, wrong) {
+    const ctx = document.getElementById("chart-donut").getContext("2d");
+    if (chartDonut) chartDonut.destroy();
+    if (correct + wrong === 0) return;
+    chartDonut = new Chart(ctx, {
+        type: "doughnut",
+        data: {
+            labels: ["Benar", "Salah"],
+            datasets: [{
+                data: [correct, wrong],
+                backgroundColor: ["#2ed573", "#ff4757"],
+                borderWidth: 0
+            }]
+        },
+        options: {
+            responsive: true, maintainAspectRatio: false,
+            plugins: {
+                title: { display: true, text: "Perbandingan Benar vs Salah", color: "#FFD700" },
+                legend: { labels: { color: "#fff" } }
+            }
+        }
+    });
+}
+
+function drawBarChart(batches) {
+    const ctx = document.getElementById("chart-bar").getContext("2d");
+    if (chartBar) chartBar.destroy();
+    if (!batches.length) return;
+    chartBar = new Chart(ctx, {
+        type: "bar",
+        data: {
+            labels: batches.slice(0, 10).map(b => "#" + b.id), // limit to latest 10 batches
+            datasets: [
+                { label: "Benar", data: batches.slice(0, 10).map(b => b.correct_count), backgroundColor: "#2ed573" },
+                { label: "Salah", data: batches.slice(0, 10).map(b => b.wrong_count), backgroundColor: "#ff4757" }
+            ]
+        },
+        options: {
+            responsive: true, maintainAspectRatio: false,
+            scales: {
+                x: { ticks: { color: "#fff" }, stacked: true },
+                y: { ticks: { color: "#fff" }, stacked: true }
+            },
+            plugins: {
+                title: { display: true, text: "Akurasi per Batch Test (10 Terakhir)", color: "#FFD700" },
+                legend: { labels: { color: "#fff" } }
+            }
+        }
+    });
+}
+
+function drawConfidenceChart(dist) {
+    const ctx = document.getElementById("chart-confidence").getContext("2d");
+    if (chartConfidence) chartConfidence.destroy();
+    chartConfidence = new Chart(ctx, {
+        type: "line",
+        data: {
+            labels: dist.buckets,
+            datasets: [
+                {
+                    label: "REAL Predictions",
+                    data: dist.real,
+                    borderColor: "#2ed573",
+                    backgroundColor: "rgba(46, 213, 115, 0.1)",
+                    fill: true,
+                    tension: 0.4
+                },
+                {
+                    label: "AI Predictions",
+                    data: dist.ai,
+                    borderColor: "#ff4757",
+                    backgroundColor: "rgba(255, 71, 87, 0.1)",
+                    fill: true,
+                    tension: 0.4
+                }
+            ]
+        },
+        options: {
+            responsive: true, maintainAspectRatio: false,
+            scales: {
+                x: { ticks: { color: "#fff" }, grid: { color: "rgba(255,255,255,0.05)" } },
+                y: { ticks: { color: "#fff" }, grid: { color: "rgba(255,255,255,0.05)" }, beginAtZero: true }
+            },
+            plugins: {
+                title: { display: true, text: "Sebaran Skor Keyakinan (Confidence)", color: "#FFD700" },
+                legend: { labels: { color: "#fff" } }
+            }
+        }
+    });
+}
+
+async function confirmClearHistory() {
+    if (!confirm("⚠️ PERINGATAN: Apakah Anda yakin ingin menghapus seluruh riwayat scan dan merestart semua statistik pengujian kembali ke angka nol? Tindakan ini tidak dapat dibatalkan!")) {
+        return;
+    }
+    try {
+        const res = await fetch(`${API_URL}/api/clear-history`);
+        const data = await res.json();
+        if (res.ok) {
+            alert("Statistik berhasil direset ke nol!");
+            loadAccuracyReport();
+            loadHistory();
+            updateGlobalStats();
+        }
+    } catch (e) {
+        alert("Gagal mereset statistik.");
+    }
+}
+
+function downloadFeedback() {
+    window.open(`${API_URL}/api/download-feedback`, "_blank");
+}
+async function loadHistory() {
+    if (!currentUser) return;
+    const tbody = document.getElementById("history-body");
+    const count = document.getElementById("history-count");
+    tbody.innerHTML = "<tr><td colspan='7' style='text-align:center;padding:25px;color:rgba(255,255,255,0.3)'>Loading...</td></tr>";
+
+    try {
+        const res = await fetch(`${API_URL}/api/history/${currentUser}`);
+        const data = await res.json();
+        tbody.innerHTML = "";
+        count.innerText = `${data.history.length} item`;
+
+        data.history.forEach(item => {
+            if (item._type === "batch") {
+                const batchColor = item.accuracy >= 70 ? "var(--success)" : item.accuracy >= 40 ? "var(--yellow-main)" : "var(--danger)";
+                tbody.innerHTML += `
+                    <tr style="background:rgba(255,215,0,0.05)">
+                        <td style="color:var(--yellow-main)">${item.filename}</td>
+                        <td>${item.file_type}</td>
+                        <td>${item.file_size}</td>
+                        <td style="font-size:12px">${item.source}</td>
+                        <td style="color: ${batchColor}; font-weight:bold">${item.accuracy}%</td>
+                        <td style="color: ${batchColor}; font-weight:bold">${item.accuracy >= 70 ? '✅ Baik' : item.accuracy >= 40 ? '⚠️ Sedang' : '❌ Buruk'}</td>
+                        <td>${item.scan_date}</td>
+                    </tr>`;
+            } else {
+                const statusColor = item.is_ai ? "var(--danger)" : "var(--success)";
+                const statusText = item.is_ai ? "Palsu (AI)" : "Asli (Real)";
+                tbody.innerHTML += `
+                    <tr>
+                        <td>${item.filename}</td>
+                        <td>${item.file_type}</td>
+                        <td>${item.file_size}</td>
+                        <td style="font-size:12px">${item.source}</td>
+                        <td style="color: var(--yellow-main); font-weight:bold">${item.accuracy}%</td>
+                        <td style="color: ${statusColor}; font-weight:bold">${statusText}</td>
+                        <td>${item.scan_date}</td>
+                    </tr>
+                `;
+            }
+        });
+        if (data.history.length === 0) tbody.innerHTML = "<tr><td colspan='7' style='text-align:center;padding:30px;color:rgba(255,255,255,0.3)'>Belum ada history. Scan gambar atau jalankan batch test.</td></tr>";
+    } catch (err) {
+        tbody.innerHTML = "<tr><td colspan='7' style='text-align:center;padding:30px;color:var(--danger)'>Gagal memuat data.</td></tr>";
+    }
+}

style.css

@@ -0,0 +1,215 @@
+* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
+:root {
+    --blue-dark: #001f3f; --blue-main: #0052D4; --blue-light: #4D8BF5;
+    --yellow-dark: #DAA520; --yellow-main: #FFD700; --yellow-light: #FFFACD;
+    --white: #ffffff; --danger: #ff4757; --success: #2ed573;
+}
+
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
+::-webkit-scrollbar-thumb { background: var(--yellow-main); border-radius: 4px; }
+body { background-color: var(--blue-dark); background-image: radial-gradient(circle, rgba(255,215,0,0.08) 1.5px, transparent 1.5px); background-size: 30px 30px; color: var(--white); overflow-x: hidden; min-height: 100vh; }
+body::before { content:''; position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(0,31,63,0.85),rgba(0,42,92,0.9));z-index:-1; }
+body::-webkit-scrollbar { display: none; }
+
+/* ADS */
+.ads-container { display: none !important; }
+
+/* LOADING */
+.polka-dot-bg { position:fixed;top:0;left:0;width:100%;height:100%;background:var(--blue-main);display:flex;justify-content:center;align-items:center;z-index:1000; }
+.loading-content { background:rgba(0,31,63,0.95);padding:40px 50px;border-radius:20px;text-align:center;border:2px solid var(--yellow-main);box-shadow:0 0 40px rgba(255,215,0,0.15); }
+.logo-big { font-size:60px;margin-bottom:10px; }
+.loader-bar { width:220px;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;margin:20px auto;overflow:hidden; }
+.loader-fill { width:0;height:100%;background:linear-gradient(90deg,var(--yellow-dark),var(--yellow-main));border-radius:3px;animation:load 2s ease-in-out forwards; }
+@keyframes load { to { width:100% } }
+
+/* AUTH - OLD UI */
+#auth-page { z-index:1; }
+.auth-float { position:fixed; z-index:-1; padding:10px 18px; border-radius:12px; background:rgba(255,215,0,0.06); border:1px solid rgba(255,215,0,0.1); font-size:13px; font-weight:600; color:rgba(255,215,0,0.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:authFloat 6s ease-in-out infinite; pointer-events:none; white-space:nowrap; }
+@keyframes authFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
+.hidden { display:none!important; }
+#auth-page .auth-box { max-width:380px;margin:10% auto;background:#001a33;padding:30px;border-radius:12px;box-shadow:0 0 20px rgba(0,0,0,0.5);border:1px solid rgba(255,215,0,0.15); }
+#auth-page .auth-box h2 { text-align:center;margin-bottom:20px;font-size:20px;color:var(--yellow-main); }
+#auth-page .tabs { display:flex;margin-bottom:18px;background:rgba(0,0,0,0.3);border-radius:8px;padding:2px; }
+#auth-page .tab-btn { flex:1;padding:10px;background:none;border:none;color:rgba(255,255,255,0.5);font-size:14px;cursor:pointer;border-radius:6px;transition:.3s;font-weight:600; }
+#auth-page .tab-btn.active { background:var(--yellow-main);color:var(--blue-dark); }
+#auth-page .auth-form { display:flex;flex-direction:column;gap:12px; }
+#auth-page .auth-form input { padding:12px 14px;border-radius:8px;border:1px solid rgba(255,215,0,0.15);background:rgba(0,0,0,0.3);color:#fff;font-size:14px;outline:none;transition:.3s; }
+#auth-page .auth-form input:focus { border-color:var(--yellow-main); }
+#auth-page .auth-form input::placeholder { color:rgba(255,255,255,0.3); }
+#auth-page .btn-primary { padding:12px;background:linear-gradient(135deg,var(--yellow-dark),var(--yellow-main));color:var(--blue-dark);font-weight:700;border:none;border-radius:8px;cursor:pointer;font-size:15px;transition:.3s; }
+#auth-page .btn-primary:hover { opacity:.9; }
+#auth-page .error-text { color:var(--danger);font-size:13px;text-align:center;min-height:20px; }
+
+/* LAYOUT */
+#main-app { display:flex;height:100vh;position:relative;z-index:1; }
+.sidebar { width:240px;background:rgba(0,31,63,0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:25px 0;display:flex;flex-direction:column;border-right:1px solid rgba(255,215,0,0.15);flex-shrink:0;transition:all 0.3s ease; }
+.logo-small { font-size:36px;text-align:center;margin-bottom:30px;filter:drop-shadow(0 2px 10px rgba(255,215,0,0.3)); }
+.sidebar ul { list-style:none;flex:1; }
+.nav-item { padding:16px 24px;cursor:pointer;transition:.3s;border-left:4px solid transparent;font-size:15px;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,0.75);font-weight:500; }
+.nav-item:hover { background:rgba(255,255,255,0.05);color:#fff; }
+.nav-item.active { background:rgba(255,215,0,0.08);border-left-color:var(--yellow-main);color:var(--yellow-main);font-weight:700; }
+.btn-logout { margin:15px 24px;padding:12px;background:rgba(255,71,87,0.12);color:var(--danger);border:1px solid rgba(255,71,87,0.25);border-radius:12px;cursor:pointer;font-weight:700;transition:.3s;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px; }
+.btn-logout:hover { background:rgba(255,71,87,0.22);box-shadow:0 0 15px rgba(255,71,87,0.15); }
+
+.content { flex:1;padding:30px 45px;overflow-y:auto;margin:0;min-height:100vh;transition:all 0.3s ease; }
+
+/* RESPONSIVE NAVIGATION & BOTTOM BAR FOR TABLETS & PHONES (< 768px) */
+@media (max-width: 768px) {
+    #main-app {
+        flex-direction: column;
+    }
+    .sidebar {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100vw;
+        height: 65px;
+        padding: 0;
+        flex-direction: row;
+        border-right: none;
+        border-top: 1px solid rgba(255,215,0,0.2);
+        background: rgba(0, 26, 51, 0.95);
+        box-shadow: 0 -8px 30px rgba(0,0,0,0.5);
+        z-index: 1000;
+    }
+    .logo-small {
+        display: none !important;
+    }
+    .sidebar ul {
+        display: flex;
+        flex-direction: row;
+        flex: 5;
+        height: 100%;
+        justify-content: space-around;
+        align-items: center;
+    }
+    .nav-item {
+        padding: 0;
+        height: 100%;
+        flex: 1;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        border-left: none;
+        border-top: 3px solid transparent;
+        font-size: 18px;
+        gap: 3px;
+        color: rgba(255,255,255,0.6);
+    }
+    .nav-item span {
+        display: block !important;
+        font-size: 9px;
+        font-weight: 600;
+        color: rgba(255,255,255,0.6);
+    }
+    .nav-item:hover {
+        background: rgba(255,255,255,0.02);
+    }
+    .nav-item.active {
+        border-top-color: var(--yellow-main);
+        border-left-color: transparent;
+        color: var(--yellow-main);
+        background: rgba(255,215,0,0.06);
+    }
+    .nav-item.active span {
+        color: var(--yellow-main);
+    }
+    .btn-logout {
+        margin: 0;
+        height: 100%;
+        flex: 1;
+        background: none;
+        border: none;
+        border-top: 3px solid transparent;
+        border-radius: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 18px;
+        gap: 3px;
+        padding: 0;
+        color: var(--danger);
+    }
+    .btn-logout span {
+        display: block !important;
+        font-size: 9px;
+        font-weight: 600;
+        color: var(--danger);
+    }
+    .btn-logout:hover {
+        background: rgba(255, 71, 87, 0.06);
+    }
+    .content {
+        padding: 20px 20px 85px 20px;
+        min-height: calc(100vh - 65px);
+    }
+}
+
+header { margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.06); }
+header h2 { font-size:20px;font-weight:600; }
+header h2 span { color:var(--yellow-main); }
+
+/* SECTIONS */
+.section { display:none; }
+.section.active { display:block;animation:fadeIn .4s ease; }
+@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
+
+/* STATS */
+.stats-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px; }
+.stat-card { padding:20px;border-radius:12px;text-align:center;color:var(--blue-dark);transition:.3s; }
+.stat-card:hover { transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,0.2); }
+.stat-card.blue { background:linear-gradient(135deg,#4D8BF5,#3a6fd8); }
+.stat-card.yellow { background:linear-gradient(135deg,#FFD700,#f0c800); }
+.stat-card h3 { font-size:28px;margin-bottom:4px;font-weight:800; }
+.stat-card p { font-size:12px;font-weight:600;opacity:.8;text-transform:uppercase;letter-spacing:.5px; }
+.info-box { background:rgba(255,255,255,0.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:18px 20px;border-radius:12px;border-left:3px solid var(--yellow-main);margin-bottom:16px; }
+.info-box h3 { margin-bottom:10px;font-size:15px; }
+.info-box p { font-size:13px;line-height:1.6;color:rgba(255,255,255,0.8); }
+.info-box ol { margin-left:18px;font-size:13px;line-height:1.8;color:rgba(255,255,255,0.8); }
+
+/* UPLOAD */
+.upload-container { display:flex;flex-direction:column;align-items:center;gap:16px; }
+.upload-box { width:100%;max-width:480px;min-height:200px;border:2px dashed rgba(255,215,0,0.3);border-radius:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:.3s;background:rgba(255,255,255,0.02);padding:30px; }
+.upload-box:hover { background:rgba(255,215,0,0.04);border-color:var(--yellow-main); }
+.upload-icon { font-size:44px;margin-bottom:10px;opacity:.7; }
+.upload-box p { font-size:14px;color:rgba(255,255,255,0.6); }
+.upload-box small { font-size:12px;color:var(--yellow-main);margin-top:6px; }
+.btn-scan { padding:14px 50px;font-size:16px;background:linear-gradient(135deg,var(--yellow-dark),var(--yellow-main));color:var(--blue-dark);border:none;border-radius:50px;font-weight:700;cursor:pointer;box-shadow:0 4px 15px rgba(255,215,0,0.25);transition:.3s; }
+.btn-scan:hover { transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,215,0,0.35); }
+.btn-scan:active { transform:scale(.96); }
+.btn-scan:disabled { opacity:.5;cursor:not-allowed;transform:none; }
+
+/* RESULTS */
+.result-box { margin-top:24px;padding:24px;border-radius:14px;border:2px solid;animation:slideIn .4s ease; }
+@keyframes slideIn { from{transform:translateX(-30px);opacity:0} to{transform:translateX(0);opacity:1} }
+.result-box.ai { background:rgba(255,71,87,0.06);border-color:rgba(255,71,87,0.4); }
+.result-box.real { background:rgba(46,213,115,0.06);border-color:rgba(46,213,115,0.4); }
+.result-title { font-size:20px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px; }
+.details-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
+@media (max-width:500px) { .details-grid { grid-template-columns:1fr; } }
+.detail-item { background:rgba(0,0,0,0.15);padding:10px 14px;border-radius:8px; }
+.detail-label { font-size:11px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:.3px; }
+.detail-value { font-size:14px;font-weight:600;color:var(--yellow-main);margin-top:4px;word-break:break-all; }
+
+/* TABLE */
+.table-wrap { overflow-x:auto;max-height:55vh;border-radius:12px;border:1px solid rgba(255,255,255,0.06);margin-top:12px; }
+.history-table { width:100%;border-collapse:collapse;background:rgba(255,255,255,0.02);min-width:680px; }
+.history-table th { position:sticky;top:0;z-index:2;padding:12px;text-align:left;background:rgba(0,82,212,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--yellow-main);font-size:12px;text-transform:uppercase;letter-spacing:.4px;font-weight:600; }
+.history-table td { padding:11px 12px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:13px; }
+.history-table tbody tr { transition:.2s; }
+.history-table tbody tr:hover { background:rgba(255,255,255,0.05); }
+.btn-refresh { padding:9px 18px;background:linear-gradient(135deg,var(--yellow-dark),var(--yellow-main));color:var(--blue-dark);border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:13px;transition:.3s; }
+.btn-refresh:hover { transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,215,0,0.25); }
+
+/* PARTICLES */
+.click-particle { position:fixed;pointer-events:none;border-radius:50%;z-index:9999;animation:particleFly .8s ease-out forwards; }
+@keyframes particleFly { to { transform:translate(var(--tx),var(--ty)) scale(0);opacity:0 } }
+
+canvas { max-height:240px;width:100%!important; }
+.chart-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px; }
+@media (max-width:700px) { .chart-grid { grid-template-columns:1fr; } }
+
+/* BATCH FILE LIST */
+#batch-file-list table { margin-top:8px; }