feat: implement anomaly detection ensemble, feedback system, and upgraded model configuration

README.md

@@ -18,10 +18,10 @@ pinned: true
 </p>
 
 <p align="center">
-    <a href="#"><img src="https://img.shields.io/badge/version-1.0.0-blueviolet" alt="Latest Version"/></a>
+    <a href="#"><img src="https://img.shields.io/badge/version-1.1.0-blueviolet" alt="Latest Version"/></a>
     <a href="#"><img src="https://img.shields.io/badge/license-MIT-green" alt="License"/></a>
     <a href="#"><img src="https://img.shields.io/badge/python-3.12%2B-blue" alt="Python Version"/></a>
-    <a href="#"><img src="https://img.shields.io/badge/next.js-14%2B-black" alt="Next.js Version"/></a>
+    <a href="#"><img src="https://img.shields.io/badge/next.js-16%2B-black" alt="Next.js Version"/></a>
     <a href="#"><img src="https://img.shields.io/badge/pytorch-2.0%2B-ee4c2c" alt="PyTorch Version"/></a>
 </p>
 
@@ -114,7 +114,9 @@ docker run -p 7860:7860 pokedex-web
 ## 🚀 Features
 
 - **Computer Vision Pipeline:** Automatically detects image sources (e.g., Anime versions, custom sites) and extracts normalized silhouettes via OpenCV (headless).
-- **High-Accuracy Inference:** Identifies 1,025 distinct Pokémon classes using a trained ResNet-18 architecture.
+- **High-Accuracy Ensemble Inference:** Identifies 1,025 distinct Pokémon classes using a trained ResNet-18 architecture, combining predictions across independent runs.
+- **Two-Stage Ensemble Open-Set Recognition:** Uses an ensemble of three models (seeds 3, 7, and 25). Features **Stage-One Soft-Voting Logit Thresholding ($\ge 6.5$)** to prevent overconfidence on noise inputs, and **Stage-Two Confidence Margin Thresholding ($\ge 0.30$)** to actively detect epistemic anomalies.
+- **Active Learning Telemetry Flywheel:** Automatically logs predictions with low confidence margins or ensemble disagreements and securely uploads telemetry payloads to Hugging Face datasets, driving a continuous model optimization loop.
 - **Scientific Documentation:** Includes an embedded Research Paper route (`/research`) detailing the dataset preparation, method, and structural adaptations of the ResNet-18 model.
 - **Zero Disk Writes:** Inference is processed entirely in memory (`bytes` to `np.ndarray`), optimizing execution speed and security on free-tier cloud environments.
 - **Client-Side Image Resizing:** The frontend uses HTML5 Canvas to resize images before upload, saving bandwidth and backend CPU cycles.

backend/app.py

@@ -12,6 +12,7 @@ from model import PokedexNet
 from pokemon_service import PokemonService
 from predict import predict_from_bytes
 from rate_limiter import get_rate_limiter
+import feedback_router
 
 
 @asynccontextmanager
@@ -19,26 +20,32 @@ async def lifespan(app: FastAPI) -> AsyncGenerator[None, None]:
     """Lifecycle manager to load models and data into memory at startup."""
     print("Initializing Pokédex Web Backend...")
     
-    # Instantiate services and hold them inside app.state container (prevents global mutability)
     app.state.pokemon_service = PokemonService(settings.DATABASE_PATH)
     
     device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
     app.state.device = device
     print(f"Using device: {device}")
     
-    print(f"Loading model from {settings.MODEL_PATH}...")
-    model = PokedexNet(num_classes=settings.NUM_CLASSES)
+    print("Loading ensemble models...")
+    paths = [settings.MODEL_PATH_SEED_3, settings.MODEL_PATH_SEED_7, settings.MODEL_PATH_SEED_25]
+    app.state.models = []
     
-    if os.path.exists(settings.MODEL_PATH):
-        state_dict = torch.load(settings.MODEL_PATH, map_location=device, weights_only=True)
-        model.load_state_dict(state_dict)
-        model.to(device)
-        model.eval()
-        app.state.model = model
-        print("Model loaded successfully.")
+    for path in paths:
+        if os.path.exists(path):
+            print(f"Loading {path}...")
+            model = PokedexNet(num_classes=settings.NUM_CLASSES)
+            state_dict = torch.load(path, map_location=device, weights_only=True)
+            model.load_state_dict(state_dict)
+            model.to(device)
+            model.eval()
+            app.state.models.append(model)
+        else:
+            print(f"WARNING: Model file not found at {path}.")
+            
+    if len(app.state.models) == 3:
+        print("All 3 ensemble models loaded successfully.")
     else:
-        app.state.model = None
-        print(f"WARNING: Model file not found at {settings.MODEL_PATH}. Inference will fail.")
+        print(f"WARNING: Only {len(app.state.models)}/3 models loaded. Inference may be degraded.")
         
     yield
     print("Shutting down Pokédex Web Backend...")
@@ -50,7 +57,6 @@ app = FastAPI(
     lifespan=lifespan
 )
 
-# Apply restrictive, environment-configurable CORS origins (loaded from .env)
 app.add_middleware(
     CORSMiddleware,
     allow_origins=settings.CORS_ORIGINS,
@@ -59,8 +65,9 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+app.include_router(feedback_router.router)
+
 
-# Reusable FastAPI dependency functions to inject services cleanly (enables perfect unit testing / mocking)
 def get_pokemon_service(request: Request) -> PokemonService:
     service = getattr(request.app.state, "pokemon_service", None)
     if not service:
@@ -68,11 +75,11 @@ def get_pokemon_service(request: Request) -> PokemonService:
     return service
 
 
-def get_model(request: Request) -> PokedexNet:
-    model = getattr(request.app.state, "model", None)
-    if not model:
-        raise HTTPException(status_code=503, detail="Model is not loaded.")
-    return model
+def get_ensemble_models(request: Request) -> list[PokedexNet]:
+    models = getattr(request.app.state, "models", None)
+    if not models or len(models) == 0:
+        raise HTTPException(status_code=503, detail="Models are not loaded.")
+    return models
 
 
 def get_device(request: Request) -> torch.device:
@@ -86,12 +93,13 @@ def get_device(request: Request) -> torch.device:
 async def health_check(request: Request):
     """Health check endpoint for monitoring."""
     service = get_pokemon_service(request)
-    model_obj = getattr(request.app.state, "model", None)
+    models_obj = getattr(request.app.state, "models", None)
     device_obj = getattr(request.app.state, "device", None)
     
     return {
         "status": "healthy",
-        "model_loaded": model_obj is not None,
+        "models_loaded": models_obj is not None and len(models_obj) > 0,
+        "ensemble_count": len(models_obj) if models_obj else 0,
         "device": str(device_obj) if device_obj else "Not set",
         "version": settings.VERSION,
         "pokemon_count": len(service.pokemon_data)
@@ -124,7 +132,7 @@ async def predict(
     file: UploadFile = File(...),
     debug: bool = Query(False, description="Include processed silhouette in base64"),
     service: PokemonService = Depends(get_pokemon_service),
-    model: PokedexNet = Depends(get_model),
+    models: list[PokedexNet] = Depends(get_ensemble_models),
     device: torch.device = Depends(get_device)
 ):
     """
@@ -149,19 +157,28 @@ async def predict(
         
         result = predict_from_bytes(
             file_bytes=file_bytes,
-            model=model,
+            models=models,
             device=device,
             id_to_name=id_to_name_map,
-            include_debug=debug
+            include_debug=debug,
+            margin_threshold=settings.ENSEMBLE_MARGIN_THRESHOLD,
+            logit_threshold=settings.ENSEMBLE_LOGIT_THRESHOLD
         )
         
+        if result.ensemble_metrics:
+            feedback_router.cache_prediction_metrics(result.image_hash, result.ensemble_metrics)
+            
         return JSONResponse(content={
             "pokemon_id": result.pokemon_id,
             "name": result.name,
             "confidence": result.confidence,
             "detected_source": result.detected_source,
             "top_5": result.top_5,
-            "debug_silhouette": result.debug_silhouette_b64
+            "debug_silhouette": result.debug_silhouette_b64,
+            "status": result.status,
+            "votes": result.votes,
+            "models_in_doubt_count": result.models_in_doubt_count,
+            "image_hash": result.image_hash
         })
         
     except ValueError as ve:
@@ -171,7 +188,6 @@ async def predict(
         raise HTTPException(status_code=500, detail="Internal server error during inference.")
 
 
-# SPA Fallback - MUST be the last route registered!
 static_dir = os.path.join(settings.BASE_DIR, settings.STATIC_DIR)
 
 if os.path.exists(static_dir) and os.listdir(static_dir):

backend/best_model_multirun_seed_3.pth

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

backend/best_model_multirun_seed_7.pth

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

backend/config.py

@@ -1,7 +1,6 @@
 import os
 from pathlib import Path
 
-# Load environment variables from .env if it exists (pure Python, zero dependencies)
 BASE_DIR = Path(__file__).parent
 env_file = BASE_DIR / ".env"
 if env_file.exists():
@@ -11,7 +10,6 @@ if env_file.exists():
                 line = line.strip()
                 if line and not line.startswith("#") and "=" in line:
                     key, val = line.split("=", 1)
-                    # Strip whitespace and potential surrounding quotes
                     val_clean = val.strip().strip('"').strip("'")
                     os.environ[key.strip()] = val_clean
     except Exception as e:
@@ -23,32 +21,39 @@ class Settings:
     
     BASE_DIR: Path = Path(__file__).parent
     
-    MODEL_PATH: str = os.getenv("POKEDEX_MODEL_PATH", str(BASE_DIR / "pokedex_model.pth"))
+    MODEL_PATH_SEED_3: str = os.getenv("POKEDEX_MODEL_PATH_SEED_3", str(BASE_DIR / "best_model_multirun_seed_3.pth"))
+    MODEL_PATH_SEED_7: str = os.getenv("POKEDEX_MODEL_PATH_SEED_7", str(BASE_DIR / "best_model_multirun_seed_7.pth"))
+    MODEL_PATH_SEED_25: str = os.getenv("POKEDEX_MODEL_PATH_SEED_25", str(BASE_DIR / "best_model_multirun_seed_25.pth"))
+    ENSEMBLE_MARGIN_THRESHOLD: float = float(os.getenv("POKEDEX_ENSEMBLE_MARGIN_THRESHOLD", "0.30"))
+    ENSEMBLE_LOGIT_THRESHOLD: float = float(os.getenv("POKEDEX_ENSEMBLE_LOGIT_THRESHOLD", "6.5"))
     DATABASE_PATH: str = os.getenv("POKEDEX_DB_PATH", str(BASE_DIR / "poke_database.json"))
     
+    PERSISTENT_STORAGE_PATH: str = os.getenv("PERSISTENT_STORAGE_PATH", str(BASE_DIR / "telemetry"))
+    PARTITION_INTERVAL: str = os.getenv("PARTITION_INTERVAL", "monthly")
+    
+    HF_TOKEN: str | None = os.getenv("HF_TOKEN")
+    HF_DATASET_REPO: str | None = os.getenv("HF_DATASET_REPO")
+    
     NUM_CLASSES: int = int(os.getenv("POKEDEX_NUM_CLASSES", "1025"))
-    MAX_UPLOAD_SIZE: int = int(os.getenv("POKEDEX_MAX_UPLOAD_SIZE", str(10 * 1024 * 1024))) # 10MB
+    MAX_UPLOAD_SIZE: int = int(os.getenv("POKEDEX_MAX_UPLOAD_SIZE", str(10 * 1024 * 1024)))
     
     ALLOWED_TYPES: set[str] = {"image/png", "image/jpeg", "image/webp", "image/gif"}
     
     POKEAPI_BASE: str = os.getenv("POKEAPI_BASE", "https://pokeapi.co/api/v2")
     POKEAPI_CACHE: str = os.getenv("POKEAPI_CACHE", "/tmp/pokeapi_cache.json")
     
-    # CORS Configurations from .env
     CORS_ORIGINS: list[str] = [
         origin.strip()
         for origin in os.getenv("POKEDEX_CORS_ORIGINS", "http://localhost:3000,http://127.0.0.1:3000,http://localhost:7860").split(",")
         if origin.strip()
     ]
     
-    # Rate Limiting Configurations from .env
     RATE_LIMIT_REQUESTS: int = int(os.getenv("POKEDEX_RATE_LIMIT_REQUESTS", "10"))
     RATE_LIMIT_WINDOW: int = int(os.getenv("POKEDEX_RATE_LIMIT_WINDOW", "60"))
     
-    # PokéAPI Cache Configurations from .env (default: 30 days)
     POKEAPI_CACHE_TTL: int = int(os.getenv("POKEDEX_POKEAPI_CACHE_TTL", "2592000"))
     
-    VERSION: str = "1.0.0"
+    VERSION: str = "1.1.0"
     STATIC_DIR: str = "static"
 
 

backend/feedback_router.py

@@ -0,0 +1,157 @@
+import os
+import json
+from datetime import datetime
+from fastapi import APIRouter, BackgroundTasks, Request, HTTPException
+from pydantic import BaseModel
+
+from config import settings
+
+router = APIRouter()
+
+ip_request_counts = {}
+
+prediction_metrics_cache = {}
+prediction_metrics_order = []
+
+def cache_prediction_metrics(image_hash: str, metrics: dict):
+    if image_hash not in prediction_metrics_cache:
+        prediction_metrics_order.append(image_hash)
+    prediction_metrics_cache[image_hash] = metrics
+    
+    if len(prediction_metrics_order) > 1000:
+        oldest = prediction_metrics_order.pop(0)
+        prediction_metrics_cache.pop(oldest, None)
+
+
+import hashlib
+
+def calculate_md5(filepath: str) -> str:
+    md5_hash = hashlib.md5()
+    try:
+        with open(filepath, "rb") as f:
+            for byte_block in iter(lambda: f.read(4096), b""):
+                md5_hash.update(byte_block)
+        return md5_hash.hexdigest()
+    except FileNotFoundError:
+        return "file_not_found"
+
+import os
+
+def extract_model_name(filepath: str) -> str:
+    """Ex: /app/best_model_multirun_seed_3.pth -> best_model_multirun_seed_3 -> seed_3"""
+    basename = os.path.basename(filepath)
+    name_without_ext = os.path.splitext(basename)[0]
+    parts = name_without_ext.split("_")
+    if len(parts) >= 2:
+        return f"{parts[-2]}_{parts[-1]}"
+    return name_without_ext
+
+MODELS_SIGNATURE = [
+    {"name": extract_model_name(settings.MODEL_PATH_SEED_3), "hash": calculate_md5(settings.MODEL_PATH_SEED_3)},
+    {"name": extract_model_name(settings.MODEL_PATH_SEED_7), "hash": calculate_md5(settings.MODEL_PATH_SEED_7)},
+    {"name": extract_model_name(settings.MODEL_PATH_SEED_25), "hash": calculate_md5(settings.MODEL_PATH_SEED_25)}
+]
+
+class FeedbackPayload(BaseModel):
+    image_hash: str
+    predicted_id: int | None
+    is_correct: bool
+    user_correction_id: int | str | None = None
+    is_ood_screen: bool = False
+    
+    system_version: str = settings.VERSION
+    ensemble_models: list[dict] = MODELS_SIGNATURE
+
+def get_partitioned_filename():
+    """Generates the filename based on the partition interval."""
+    now = datetime.utcnow()
+    
+    if settings.PARTITION_INTERVAL == "daily":
+        date_str = now.strftime("%Y-%m-%d")
+    else:
+        date_str = now.strftime("%Y-%m")
+        
+    return os.path.join(settings.PERSISTENT_STORAGE_PATH, f"feedback_{date_str}.jsonl")
+
+def save_feedback(payload: FeedbackPayload, client_ip: str):
+    os.makedirs(settings.PERSISTENT_STORAGE_PATH, exist_ok=True)
+    filename = get_partitioned_filename()
+    repo_filename = os.path.basename(filename)
+    
+    if settings.HF_TOKEN and settings.HF_DATASET_REPO:
+        try:
+            from huggingface_hub import hf_hub_download
+            import shutil
+            if not os.path.exists(filename):
+                try:
+                    downloaded_path = hf_hub_download(
+                        repo_id=settings.HF_DATASET_REPO,
+                        filename=repo_filename,
+                        repo_type="dataset",
+                        token=settings.HF_TOKEN
+                    )
+                    shutil.copy(downloaded_path, filename)
+                except Exception:
+                    pass
+        except Exception as e:
+            print(f"Failed to sync baseline file from Hugging Face: {e}")
+
+    data = payload.dict()
+    data["timestamp"] = datetime.utcnow().isoformat()
+    data["client_ip_hash"] = hash(client_ip)
+    
+    data["ensemble_margin_threshold"] = settings.ENSEMBLE_MARGIN_THRESHOLD
+    data["ensemble_logit_threshold"] = settings.ENSEMBLE_LOGIT_THRESHOLD
+    
+    metrics = prediction_metrics_cache.pop(payload.image_hash, None)
+    if metrics:
+        data["ensemble_metrics"] = metrics
+        
+    with open(filename, "a", encoding="utf-8") as f:
+        f.write(json.dumps(data) + "\n")
+        
+    if settings.HF_TOKEN and settings.HF_DATASET_REPO:
+        try:
+            from huggingface_hub import HfApi
+            api = HfApi(token=settings.HF_TOKEN)
+            
+            repo_filename = os.path.basename(filename)
+            
+            api.upload_file(
+                path_or_fileobj=filename,
+                path_in_repo=repo_filename,
+                repo_id=settings.HF_DATASET_REPO,
+                repo_type="dataset",
+                commit_message=f"Sync telemetry log {repo_filename} (Auto-Commit)"
+            )
+        except Exception as e:
+            print(f"Failed to sync telemetry to Hugging Face: {e}")
+
+@router.post("/api/feedback")
+async def receive_feedback(request: Request, payload: FeedbackPayload, background_tasks: BackgroundTasks):
+    client_ip = request.client.host if request.client else "unknown"
+    now = datetime.utcnow().timestamp()
+    
+
+    user_requests = ip_request_counts.get(client_ip, [])
+    user_requests = [t for t in user_requests if now - t < 60]
+    
+    if len(user_requests) >= 5:
+        raise HTTPException(status_code=429, detail="Muitas requisições. Tente novamente mais tarde.")
+    
+    user_requests.append(now)
+    ip_request_counts[client_ip] = user_requests
+
+    if payload.user_correction_id is not None:
+        val = str(payload.user_correction_id).lower()
+        if val not in ["none", "unknown_pokemon"]:
+            try:
+                cid = int(payload.user_correction_id)
+                if cid < 1 or cid > 1025:
+                    raise ValueError()
+            except ValueError:
+                raise HTTPException(status_code=400, detail="Invalid user_correction_id")
+
+    background_tasks.add_task(save_feedback, payload, client_ip)
+    
+    return {"status": "success", "message": "Feedback computado de forma segura"}

backend/model.py

@@ -2,6 +2,8 @@ import torch.nn as nn
 import torchvision.models as models
 
 class PokedexNet(nn.Module):
+    """Modified ResNet-18 model architecture for fine-grained binary silhouette classification."""
+    
     def __init__(self, num_classes=1025):
         super(PokedexNet, self).__init__()
         self.backbone = models.resnet18(weights=None)

backend/pokemon_service.py

@@ -15,7 +15,7 @@ class PokemonService:
         self.database_path = database_path
         self.pokemon_data: List[Dict[str, Any]] = []
         self.id_to_name: Dict[int, str] = {}
-        self.cache_lock = asyncio.Lock()  # Asymmetric async lock to prevent race conditions on writes
+        self.cache_lock = asyncio.Lock()
         self._load_database()
 
     def _load_database(self) -> None:
@@ -25,8 +25,6 @@ class PokemonService:
                 self.pokemon_data = json.load(f)
                 
             for index, item in enumerate(self.pokemon_data):
-                # The model outputs zero-indexed classes (0 to 1024)
-                # The DB has IDs 1 to 1025. We map the zero-index to the name.
                 self.id_to_name[index] = item["name"]
         except Exception as e:
             print(f"Failed to load database at {self.database_path}: {e}")
@@ -82,29 +80,23 @@ class PokemonService:
         """Fetches and caches types and stats from PokeAPI with thread-safe lock and TTL validation."""
         str_id = str(pokemon_id)
         
-        # Acquire asyncio Lock to prevent multiple concurrent requests from triggering race conditions
         async with self.cache_lock:
             cache = self._load_cache()
             
-            # Check cache with TTL and handle migration/backward compatibility
             if str_id in cache:
                 entry = cache[str_id]
                 if isinstance(entry, dict) and "cached_at" in entry and "data" in entry:
-                    # Valid schema: check TTL (default 30 days)
                     if time.time() - entry["cached_at"] < settings.POKEAPI_CACHE_TTL:
                         return entry["data"]
                 elif not isinstance(entry, dict) or "cached_at" not in entry:
-                    # Backward compatibility / migration: old cache without timestamp.
-                    # Automatically migrate it to the new schema for future correctness
                     migrated_entry = {
                         "data": entry,
                         "cached_at": time.time()
                     }
                     cache[str_id] = migrated_entry
                     self._save_cache(cache)
-                    return entry  # Return the data as is
+                    return entry
                 
-            # Cache miss or expired: fetch fresh data from PokeAPI
             url = f"{settings.POKEAPI_BASE}/pokemon/{pokemon_id}/"
             try:
                 async with httpx.AsyncClient(timeout=5.0) as client:
@@ -129,7 +121,6 @@ class PokemonService:
                             "sprites": data.get("sprites", {})
                         }
                         
-                        # Store in cache with the new timestamp schema
                         cache[str_id] = {
                             "data": enriched_data,
                             "cached_at": time.time()

backend/predict.py

@@ -3,7 +3,7 @@ import cv2
 import numpy as np
 import torch
 import torch.nn.functional as F
-from torchvision import transforms # type: ignore
+from torchvision import transforms
 from PIL import Image
 from dataclasses import dataclass
 from typing import Tuple, List, Dict, Optional, Any
@@ -20,6 +20,11 @@ class PredictionResult:
     detected_source: str
     top_5: List[Dict[str, Any]]
     debug_silhouette_b64: Optional[str] = None
+    status: str = "CONFIDENT_POKEMON"
+    votes: List[int] = None
+    models_in_doubt_count: int = 0
+    image_hash: str = ""
+    ensemble_metrics: Dict[str, Any] = None
 
 
 def _center_and_pad(mask: np.ndarray) -> np.ndarray:
@@ -73,7 +78,6 @@ def _detect_anime_type(img_bgr: np.ndarray) -> str:
     hsv_crop = hsv[:, :work_w, :]
     gray = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2GRAY)
 
-    # 1. Geroid Detection
     geroid_blue = cv2.inRange(hsv, np.array([90, 100, 100]), np.array([130, 255, 255]))
     dark_pixels = cv2.inRange(gray, np.array([0]), np.array([50]))
     
@@ -83,19 +87,16 @@ def _detect_anime_type(img_bgr: np.ndarray) -> str:
     if blue_bg_ratio > 0.20 and dark_ratio > 0.05:
         return "geroid"
 
-    # 2. Monkepo Detection
     grey_mask = cv2.inRange(hsv_crop, np.array([0, 0, 60]), np.array([180, 60, 180]))
     grey_ratio = cv2.countNonZero(grey_mask) / (h * work_w)
     if grey_ratio > 0.05:
         return "monkepo"
 
-    # 3. Solid high saturation blue (modern)
     solid_blue = cv2.inRange(hsv_crop, np.array([88, 160, 60]), np.array([135, 255, 215]))
     blue_ratio = cv2.countNonZero(solid_blue) / (h * work_w)
     if blue_ratio > 0.08:
         return "new"
 
-    # 4. Vibrant red background (classic)
     red1 = cv2.inRange(hsv, np.array([0, 120, 120]), np.array([10, 255, 255]))
     red2 = cv2.inRange(hsv, np.array([165, 120, 120]), np.array([180, 255, 255]))
     red_ratio = cv2.countNonZero(cv2.bitwise_or(red1, red2)) / (h * w)
@@ -210,15 +211,20 @@ def _extract_geroid(img_bgr: np.ndarray) -> np.ndarray:
 
 def predict_from_bytes(
     file_bytes: bytes,
-    model: PokedexNet,
+    models: List[PokedexNet],
     device: torch.device,
     id_to_name: Dict[int, str],
-    include_debug: bool = False
+    include_debug: bool = False,
+    margin_threshold: float = 0.30,
+    logit_threshold: float = 5.0
 ) -> PredictionResult:
     """
     Main pipeline to process an image from bytes in memory and infer the Pokémon.
     Executes purely in-memory (Zero Disk Writes).
     """
+    import hashlib
+    image_hash = hashlib.sha256(file_bytes).hexdigest()
+    
     np_arr = np.frombuffer(file_bytes, np.uint8)
     img = cv2.imdecode(np_arr, cv2.IMREAD_UNCHANGED)
     
@@ -258,11 +264,42 @@ def predict_from_bytes(
 
     input_tensor = _mask_to_tensor(final_mask).to(device)
 
+    predictions = []
+    top_classes = []
+    models_in_doubt = 0
+    
+    ensemble_metrics = {
+        "max_raw_logits": [],
+        "margins": []
+    }
+    
     with torch.no_grad():
-        output = model(input_tensor)
-        probabilities = F.softmax(output, dim=1)
+        for i, model in enumerate(models):
+            output = model(input_tensor)
+            
+            max_raw_logit = torch.max(output, dim=1)[0].item()
+                
+            probs = F.softmax(output, dim=1)
+            
+            top_probs_model, top_indices_model = torch.topk(probs, k=3, dim=1)
+            
+            top1_prob = top_probs_model[0][0].item()
+            top2_prob = top_probs_model[0][1].item()
+            top1_class = top_indices_model[0][0].item()
+            
+            predictions.append(probs)
+            top_classes.append(top1_class)
+            
+            margin = top1_prob - top2_prob
+            if margin < margin_threshold:
+                models_in_doubt += 1
+                
+            ensemble_metrics["max_raw_logits"].append(round(max_raw_logit, 4))
+            ensemble_metrics["margins"].append(round(margin, 4))
+                
+        avg_probs = torch.mean(torch.stack(predictions), dim=0)
         
-        top_probs, top_indices = torch.topk(probabilities, 5, dim=1)
+        top_probs, top_indices = torch.topk(avg_probs, 5, dim=1)
         
         top_5_list = []
         for i in range(5):
@@ -277,13 +314,34 @@ def predict_from_bytes(
                 "confidence": prob
             })
 
+    unique_votes = set(top_classes)
+    
+    mean_max_logit = sum(ensemble_metrics["max_raw_logits"]) / len(ensemble_metrics["max_raw_logits"]) if ensemble_metrics["max_raw_logits"] else 0.0
+    
+    if mean_max_logit < logit_threshold:
+        status = "ABSTRACT_NOISE_DETECTED"
+    elif models_in_doubt >= 2:
+        status = "ANOMALY_DETECTED_DUE_TO_LOW_MARGIN"
+    else:
+        if len(unique_votes) == 1:
+            status = "CONFIDENT_POKEMON"
+        elif len(unique_votes) == 2:
+            status = "UNCERTAIN_POKEMON"
+        else:
+            status = "ANOMALY_DETECTED_DUE_TO_DISAGREEMENT"
+
     best_pred = top_5_list[0]
 
     return PredictionResult(
-        pokemon_id=int(best_pred["pokemon_id"]), # type: ignore
+        pokemon_id=int(best_pred["pokemon_id"]),
         name=str(best_pred["name"]),
-        confidence=float(best_pred["confidence"]), # type: ignore
+        confidence=float(best_pred["confidence"]),
         detected_source=detected_source,
         top_5=top_5_list,
-        debug_silhouette_b64=debug_b64
+        debug_silhouette_b64=debug_b64,
+        status=status,
+        votes=top_classes,
+        models_in_doubt_count=models_in_doubt,
+        image_hash=image_hash,
+        ensemble_metrics=ensemble_metrics
     )

backend/rate_limiter.py

@@ -16,22 +16,18 @@ class SimpleRateLimiter:
     def is_allowed(self, client_ip: str) -> bool:
         now = time.time()
         with self.lock:
-            # Filter timestamps to keep only those within the sliding window
             self.client_records[client_ip] = [
                 t for t in self.client_records[client_ip]
                 if now - t < self.window_seconds
             ]
             
-            # If request count exceeds the limit, deny request
             if len(self.client_records[client_ip]) >= self.requests_limit:
                 return False
                 
-            # Otherwise, record the current request and allow
             self.client_records[client_ip].append(now)
             return True
 
 
-# Helper dependency factory to apply rate limiting to endpoints using FastAPI's Depends()
 def get_rate_limiter(requests_limit: int, window_seconds: int):
     limiter = SimpleRateLimiter(requests_limit, window_seconds)
     

backend/requirements.txt

@@ -7,3 +7,4 @@ opencv-python-headless>=4.8.0
 numpy>=1.24.0
 Pillow>=10.0.0
 httpx>=0.27.0
+huggingface_hub>=0.22.0

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

frontend/src/app/globals.css

@@ -139,6 +139,33 @@ h1, h2, h3, h4, h5, h6 {
   box-shadow: none;
 }
 
+.danger-btn {
+  display: inline-block;
+  background: rgba(255, 77, 79, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 77, 79, 0.5);
+  color: #ff4d4f;
+  text-decoration: none;
+  border-radius: 30px;
+  padding: 12px 24px;
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 0.95rem;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(255, 77, 79, 0.2);
+  cursor: pointer;
+  text-transform: uppercase;
+}
+
+.danger-btn:hover {
+  background: rgba(255, 77, 79, 0.2);
+  color: #fff;
+  border-color: rgba(255, 77, 79, 0.8);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(255, 77, 79, 0.4);
+}
+
 /* Asymmetric Grid Layout */
 .main-layout {
   padding: 4rem 2rem;

frontend/src/app/page.js

@@ -6,9 +6,10 @@ import Hero from '../components/Hero';
 import UploadZone from '../components/UploadZone';
 import LoadingOverlay from '../components/LoadingOverlay';
 import ResultCard from '../components/ResultCard';
+import FeedbackWidget from '../components/FeedbackWidget';
 
 export default function Home() {
-  const [status, setStatus] = useState('idle'); // 'idle' | 'loading' | 'success' | 'error'
+  const [status, setStatus] = useState('idle');
   const [predictionData, setPredictionData] = useState(null);
   const [pokemonDetails, setPokemonDetails] = useState(null);
   const [selectedImage, setSelectedImage] = useState(null);
@@ -50,6 +51,10 @@ export default function Home() {
       const predictData = await predictRes.json();
       setPredictionData(predictData);
 
+      if (predictData.status && (predictData.status.includes('ANOMALY_DETECTED') || predictData.status === 'ABSTRACT_NOISE_DETECTED')) {
+        setStatus('anomaly');
+        return;
+      }
 
       const detailsRes = await fetch(`${API_BASE}/api/pokemon/${predictData.pokemon_id}`);
       let detailsData = null;
@@ -58,7 +63,6 @@ export default function Home() {
         setPokemonDetails(detailsData);
       }
 
-
       if (detailsData && detailsData.types && detailsData.types.length > 0) {
         const primaryType = detailsData.types[0];
         if (typeof window !== 'undefined') {
@@ -70,7 +74,6 @@ export default function Home() {
         }
       }
 
-      // Preload image with max 2.0s timeout (No minimum delay, as fast as possible)
       if (detailsData && detailsData.sprite_url && typeof window !== 'undefined') {
         await new Promise((resolve) => {
           const img = new Image();
@@ -94,7 +97,7 @@ export default function Home() {
       }
 
       setStatus('success');
-      if (predictData.confidence > 0.95 && typeof window !== 'undefined') {
+      if (predictData.status === 'CONFIDENT_POKEMON' && predictData.confidence > 0.95 && typeof window !== 'undefined') {
         import('canvas-confetti').then((confetti) => {
           confetti.default({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
         });
@@ -122,12 +125,68 @@ export default function Home() {
     <main className="main-layout">
       <ParticlesBg ref={particlesRef} />
 
-      {status === 'success' && predictionData ? (
+      {status === 'anomaly' && predictionData ? (
+        <div style={{ gridColumn: '1 / -1', width: '100%', display: 'flex', justifyContent: 'center' }}>
+          <div className="glass-panel" style={{ textAlign: 'center', padding: '3rem', maxWidth: '650px', animation: 'fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards', borderTop: '4px solid #ff4d4f' }}>
+            <h2 style={{ color: '#ff4d4f', fontSize: '2.2rem', marginBottom: '1.5rem', fontWeight: '700', letterSpacing: '-0.5px' }}>
+              Out-of-Distribution Detected
+            </h2>
+            <p style={{ color: 'rgba(255, 255, 255, 0.9)', fontSize: '1.2rem', marginBottom: predictionData.debug_silhouette ? '1.5rem' : '2.5rem', lineHeight: '1.6' }}>
+              Unfortunately, PokedexNet cannot classify this image as any of the 1,025 known Pokémon species. Our security ensemble intercepted the request to prevent false positives.
+            </p>
+            
+            {predictionData.debug_silhouette && (
+              <div style={{ backgroundColor: 'rgba(0,0,0,0.3)', padding: '1.5rem', borderRadius: '8px', marginBottom: '2.5rem', textAlign: 'left', borderLeft: '4px solid var(--accent)' }}>
+                <span style={{ display: 'block', color: 'var(--accent)', fontWeight: '600', marginBottom: '0.5rem', textTransform: 'uppercase', fontSize: '0.85rem', letterSpacing: '1px' }}>Ensemble Telemetry</span>
+                <span style={{ color: 'rgba(255, 255, 255, 0.7)', fontSize: '1rem', fontStyle: 'italic' }}>
+                  {predictionData.status === 'ABSTRACT_NOISE_DETECTED'
+                    ? 'Reason: Abstract Noise. The neural network failed to recognize any structural features or geometry. The image appears to be a blur, a basic geometric shape, or an abstract pattern.'
+                    : predictionData.status === 'ANOMALY_DETECTED_DUE_TO_LOW_MARGIN'
+                      ? `Reason: Predictive Entropy. The silhouette is excessively noisy or atypical, causing deep internal uncertainty (Low Confidence Margin detected in ${predictionData.models_in_doubt_count}/3 models).`
+                      : 'Reason: Epistemic Uncertainty. The silhouette caused an extreme contradiction where our three models completely disagreed with each other.'}
+                </span>
+              </div>
+            )}
+
+            <button className="danger-btn" onClick={handleReset} style={{ marginTop: '0.5rem', marginBottom: '1.5rem' }}>
+              Scan New Subject
+            </button>
+
+            <FeedbackWidget 
+              imageHash={predictionData.image_hash}
+              predictedId={null}
+              top5={null}
+              isOodScreen={true}
+              onFeedbackSuccess={(isCorrect) => {
+                if (isCorrect) {
+                  if (particlesRef.current) {
+                    particlesRef.current.setAccentColor('#38bdf8');
+                  }
+                } else {
+                  if (particlesRef.current) {
+                    particlesRef.current.setAccentColor('#ff4d4f');
+                  }
+                }
+              }}
+            />
+          </div>
+        </div>
+      ) : status === 'success' && predictionData ? (
         <div style={{ gridColumn: '1 / -1', width: '100%', display: 'flex', justifyContent: 'center' }}>
           <ResultCard
             predictionData={predictionData}
             pokemonDetails={pokemonDetails}
             onReset={handleReset}
+            onShinyActivated={() => {
+              if (particlesRef.current) {
+                particlesRef.current.setAccentColor('#FFD700');
+              }
+            }}
+            onDislikeActivated={() => {
+              if (particlesRef.current) {
+                particlesRef.current.setAccentColor('#ff4d4f');
+              }
+            }}
           />
         </div>
       ) : (

frontend/src/app/research/page.js

@@ -268,9 +268,9 @@ export default function ResearchPaper() {
         </section>
 
         <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>7. Discussion: Out-of-Distribution Behavior</h2>
+          <h2 className={styles.sectionTitle}>7. Discussion: Out-of-Distribution Behavior and Open-Set Recognition</h2>
           <p className={styles.paragraph}>
-            Strong in-distribution performance tells only part of the story. Like all closed-set softmax classifiers, PokedexNet has no native mechanism to abstain or flag uncertainty when presented with an input outside its training distribution. To probe how the learned representations respond to an entirely foreign geometry, a silhouette from a different franchise — referred to here as &quot;Rhamphomon&quot; (see Figure 6) — was submitted to the model and the resulting probability distributions were examined.
+            Strong in-distribution performance tells only part of the story. Like all closed-set softmax classifiers, PokedexNet has no native mechanism to abstain or flag uncertainty when presented with an input outside its training distribution. To probe how the learned representations respond to an entirely foreign geometry — and to establish the empirical basis for the open-set mitigation strategy described below — a silhouette drawn from the Digimon franchise — specifically, Rhamphomon (see Figure 6) — was submitted to the model and the resulting probability distributions examined across all five seeds.
           </p>
           
           <figure className={styles.figure} style={{ marginTop: '1rem', marginBottom: '2.5rem' }}>
@@ -278,17 +278,18 @@ export default function ResearchPaper() {
             <img src="/static/images/digimon.png" alt="Rhamphomon (Out-of-Distribution Input)" className={styles.image} style={{ maxWidth: '300px' }} />
             <figcaption className={styles.caption} style={{ marginTop: '1rem' }}>Figure 6: Rhamphomon, an Out-of-Distribution input used to test the model&apos;s structural abstraction capabilities.</figcaption>
           </figure>
+
           <p className={styles.paragraph}>
-            Since the model must assign probability to some class, it maps the unknown geometry onto the nearest regions of its learned latent space. What is interesting is <em>how</em> it does so. Rather than collapsing to a single arbitrary prediction, the model identifies anatomically coherent matches: the crouching posture and appendage structure of the intruding silhouette draw probability toward species that share those same structural features.
+            Since the model must assign probability to some class, it maps the unknown geometry onto the nearest regions of its learned latent space. What is revealing is <em>how</em> it does so. Rather than collapsing to a single arbitrary prediction, the model identifies anatomically coherent matches: the crouching posture and appendage structure of the intruding silhouette draw probability toward species that share those same structural features.
           </p>
           <p className={styles.paragraph}>
-            The pattern varies across seeds, as shown in Figure 7. Seeds 3 and 121 converge on Crobat as the top prediction, with confidence as high as 66.7%. Seeds 7, 25, and 255 shift the probability mass toward Purrloin, with flatter and more competitive distributions. The fact that the top predictions alternate between a crouching feline and a winged bat — structurally quite different species — reflects the ambiguity of the input: different random initializations emphasize different anatomical fragments of the same silhouette.
+            The pattern varies across seeds, as shown in Figure 7. Seeds 3 and 121 converge on Crobat as the top prediction, with confidence as high as 66.7%. Seeds 7, 25, and 255 shift the probability mass toward Purrloin, with flatter and more competitive distributions. The fact that the top prediction alternates between a crouching feline and a winged bat — structurally quite different species — reflects the geometric ambiguity inherent to the input: different random initializations emphasize different anatomical fragments of the same silhouette, producing structurally coherent but mutually inconsistent predictions.
           </p>
           <p className={styles.paragraph}>
-            Across all seeds, aerodynamically proportioned species such as Talonflame, Aerodactyl, and Kilowattrel appear consistently near the top of the confidence ranking. This is not coincidental: it suggests that the convolutional filters have internalized structural concepts like wingspan geometry and streamlined body ratios at a level of abstraction that transfers, at least partially, to novel organisms.
+            Across all seeds, aerodynamically proportioned species such as Talonflame, Aerodactyl, and Kilowattrel appear consistently near the top of the confidence ranking. This is not coincidental: it indicates that the convolutional filters have internalized structural abstractions — wingspan geometry, streamlined body ratios — that generalize, at least partially, to geometries outside the training distribution.
           </p>
           <p className={styles.paragraph}>
-            The seed-dependent instability of the top prediction is itself informative. A confident, seed-stable prediction is a sign of genuine recognition; an unstable one — where the winning class flips depending on initialization — is a natural indicator of out-of-distribution input. This emergent behavior suggests a potential path toward lightweight anomaly detection without adding any explicit rejection mechanism to the classifier.
+            The seed-dependent instability of the top prediction is itself the central diagnostic signal. A confident, seed-stable prediction is the fingerprint of genuine recognition; a prediction that flips between initializations is a natural indicator of out-of-distribution input. This emergent property directly motivates the two-stage open-set pipeline described in Section 8: the first stage intercepts inputs that fail to activate the network&apos;s geometric filters; the second quantifies the epistemic disagreement that characterizes inputs — like Rhamphomon — that pass the activation threshold yet remain outside the manifold of learned morphologies.
           </p>
 
           <figure className={styles.figure}>
@@ -324,7 +325,88 @@ export default function ResearchPaper() {
         </section>
 
         <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>8. Conclusion</h2>
+          <h2 className={styles.sectionTitle}>8. Open-Set Recognition and Production Telemetry</h2>
+          <p className={styles.paragraph}>
+            Transitioning a classifier from an isolated evaluation environment to open-domain inference exposes the fundamental limitation of the closed-world assumption. Standard softmax functions force the output probability distribution to sum to 1.0, often producing severe overconfidence when the network is confronted with OOD data, random noise, or geometrically degenerate inputs. The OOD experiments in Section 7 make this pathology concrete: Rhamphomon elicits strong activations and confident predictions, yet those predictions are unstable across seeds — a combination that is structurally impossible for any in-distribution input. Mitigating this without altering the underlying ResNet-18 architecture requires operating at two distinct levels of the inference stack.
+          </p>
+
+          <h3 className={styles.subsectionTitle}>8.1. Stage One — Mitigating Softmax Overconfidence via Logit Thresholding</h3>
+          <p className={styles.paragraph}>
+            When presented with abstract noise or real-world photographs lacking the topological structure of the training domain, the convolutional filters fail to activate strongly. The softmax function, however, artificially inflates these weak activations into high-confidence predictions — a well-documented failure mode of closed-set classifiers.
+          </p>
+          <p className={styles.paragraph}>
+            To intercept these inputs before normalization, the system bypasses the softmax layer and evaluates the raw pre-activation signal strength directly. A Soft Voting mechanism computes the mean of the maximum raw logits across the ensemble of <span className="mono">N</span> models:
+          </p>
+
+          <div className={styles.equationWrapper}>
+            <div className={styles.equation}>
+              μ<sub>logit</sub> &nbsp;=&nbsp;
+              <span className={styles.fraction}>
+                <span className={styles.numerator}>1</span>
+                <span className={styles.denominator}>N</span>
+              </span>
+              <span className={styles.mathSymbol}>∑</span>
+              <span className={styles.subSuper}>
+                <span className={styles.super}>N</span>
+                <span className={styles.sub}>i=1</span>
+              </span>
+              &nbsp;max(Z<sub>i</sub>)
+            </div>
+            <span className={styles.equationNumber}>(1)</span>
+          </div>
+
+          <p className={styles.paragraph}>
+            where <span className="mono">Z<sub>i</sub></span> represents the logit vector from the <span className="mono">i</span>-th model. Empirical calibration demonstrated that true in-distribution silhouettes consistently generate strong activations (<span className="mono">μ<sub>logit</sub> &gt; 9.0</span>), whereas abstract shapes and real-world photographs yield significantly weaker signals. Enforcing a threshold of <span className="mono">μ<sub>logit</sub> &lt; 6.5</span> effectively discards inputs that lack the minimal geometric complexity required for classification — before they reach the softmax normalization phase that would otherwise manufacture false confidence.
+          </p>
+          <p className={styles.paragraph}>
+            The production ensemble was composed of three models selected from the five trained seeds — specifically, seeds 3, 7, and 25 — chosen for their balanced performance profile and representational diversity. The distinction between hard and soft voting is consequential under this configuration. Under a hard voting rule, a single underperforming model is sufficient to suppress an otherwise valid prediction; under mean aggregation, a model with strong activation can compensate for a weaker one, provided the overall signal is genuine. Calibration exposed a concrete instance of this asymmetry: a dorsal silhouette of Kricketune — an atypical orthographic projection underrepresented in the training corpus — produced individual logits of 5.49, 6.42, and 9.63 across the three models. Hard voting would have blocked it — two of three models fall below the 6.5 threshold. Mean aggregation yields <span className="mono">μ<sub>logit</sub> = 7.18</span>, correctly identifying the ensemble&apos;s aggregate certainty as sufficient to pass Stage One. The third model, activating at 9.63, functions as a stabilizing vote: its strong geometric response pulls the mean above threshold and recovers the input that the two weaker models would have discarded. This behavior is precisely what the Soft Voting mechanism is designed to produce — minority confidence preserved, rather than overruled, by the ensemble. That the same input subsequently triggered an Uncertainty Warning at Stage Two — where the confidence margin of the weakest model collapsed to 0.2387, below the 0.30 threshold — and was correctly resolved only after telemetry-driven retraining, is a point returned to in Section 8.3.
+          </p>
+
+          <h3 className={styles.subsectionTitle}>8.2. Stage Two — Predictive Entropy and the Confidence Margin</h3>
+          <p className={styles.paragraph}>
+            Inputs that clear the logit threshold — complex OOD silhouettes, characters from other franchises, or severe geometric clones — require a secondary filter operating on a different signal: not activation strength, but epistemic agreement across the ensemble.
+          </p>
+          <p className={styles.paragraph}>
+            This uncertainty is quantified via the Confidence Margin (<span className="mono">M</span>) between the Top-1 and Top-2 softmax probabilities for each model <span className="mono">i</span>:
+          </p>
+
+          <div className={styles.equationWrapper}>
+            <div className={styles.equation}>
+              M<sub>i</sub> &nbsp;=&nbsp; P(y<sub>1, i</sub>) &nbsp;−&nbsp; P(y<sub>2, i</sub>)
+            </div>
+            <span className={styles.equationNumber}>(2)</span>
+          </div>
+
+          <p className={styles.paragraph}>
+            Unambiguous in-distribution silhouettes generate overwhelming margins (<span className="mono">M<sub>i</sub> &gt; 0.70</span>). When confronted with a complex anomaly or an ambiguous topological clone, the models distribute probability mass across multiple competing classes and the margin collapses (<span className="mono">M<sub>i</sub> &lt; 0.30</span>). The Rhamphomon experiments make this concrete: not only do margins fall below threshold across all five seeds, but the winning class itself changes between initializations — precisely the instability pattern identified in Section 7 as the diagnostic signature of OOD input.
+          </p>
+          <p className={styles.paragraph}>
+            When the majority of the ensemble exhibits a low margin, or when individual models disagree on the predicted class, the system intercepts the prediction and issues an <em>Uncertainty Warning</em> rather than a hard rejection — indicating that the silhouette is atypical, heavily occluded, or morphologically ambiguous.
+          </p>
+
+          <h3 className={styles.subsectionTitle}>8.3. Telemetry and the Active Learning Flywheel</h3>
+          <p className={styles.paragraph}>
+            The two-stage filter identifies edge cases; the telemetry pipeline resolves them. To systematically address failure modes such as pose bias — where dorsal or atypical orthographic projections map poorly to the dominant frontal features learned during training — a feedback loop was integrated into the inference pipeline.
+          </p>
+          <p className={styles.paragraph}>
+            Users are presented with the option to validate or correct uncertain predictions. Each telemetry payload records the original input hash, the ensemble thresholds active at the time of inference, and an MD5 cryptographic hash of the specific <span className="mono">.pth</span> weight files used — ensuring that every hard negative can be traced back to the exact model state that produced it.
+          </p>
+          <p className={styles.paragraph}>
+            The Kricketune dorsal case, introduced in Section 8.1, provides a concrete end-to-end demonstration of this cycle. The image — uniquely identified by the perceptual hash <span className="mono">2887cb6a...</span> — passed Stage One with <span className="mono">μ<sub>logit</sub> = 7.18</span> but triggered an Uncertainty Warning at Stage Two, where one model produced a confidence margin of 0.2387, below the 0.30 threshold. Unable to confirm the prediction, the user submitted a correction flagged as <span className="mono">unknown_pokemon</span>. The telemetry payload captured the full inference context: input hash, per-model logits and margins, active thresholds, and the MD5 hashes of the three <span className="mono">.pth</span> weight files comprising the ensemble at that moment. This record was ingested as a hard negative and queued for the subsequent retraining cycle.
+          </p>
+          <p className={styles.paragraph}>
+            We used this log to review the metric. The ensemble thresholds were examined against the per-model activation patterns, confirming that the Stage Two margin criterion had correctly isolated the uncertain model without penalizing the two confident ones. The review validated that the pipeline&apos;s decision to escalate rather than discard was appropriate.
+          </p>
+          <p className={styles.paragraph}>
+            When the identical image was resubmitted after retraining, the convolutional backbone — the three ResNet-18 feature extractors — remained unchanged, producing the same raw feature maps as before. The retraining targeted only the final classifier layers, which were fine-tuned on the augmented dataset that included the newly labeled dorsal pose. The log confirmed the outcome: <span className="mono">predicted_id: 402</span> (Kricketune), <span className="mono">is_correct: true</span>, <span className="mono">is_ood_screen: false</span>. The Uncertainty Warning was not triggered. A pose variant that the system had been unable to classify earlier was now handled silently and correctly.
+          </p>
+          <p className={styles.paragraph}>
+            This is not an illustrative scenario — it is a logged event, reproducible from the archived telemetry. It demonstrates that this continuous ingestion of ambiguous projections forms an active learning flywheel: subsequent iterations progressively resolve spatial collisions within the latent space, turning the edge cases that the current model cannot decide into the training signal that the next one learns from.
+          </p>
+        </section>
+
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>9. Conclusion</h2>
           <p className={styles.paragraph}>
             PokedexNet demonstrates that a modestly sized convolutional network, trained from scratch on binary silhouettes, can achieve over 80.8% Top-1 accuracy across 1,025 classes — relying entirely on geometric shape, without any color, texture, or contextual information. The stability of results across five independent seeds confirms that this is a robust outcome, not a product of favorable initialization. The consistent Macro F1 score shows the model generalizes equitably across rare and common body plans alike.
           </p>
@@ -332,7 +414,7 @@ export default function ResearchPaper() {
             The performance ceiling the model encounters is not a weakness of the architecture but a fundamental property of the problem: some species are geometrically indistinguishable under binary 2D projection, and no classifier can do better than chance on those pairs without additional visual information. The fact that errors cluster precisely on these degenerate cases validates both the preprocessing pipeline and the geometric focus of the learned representations.
           </p>
           <p className={styles.paragraph}>
-            Out-of-distribution experiments revealed that the model&apos;s anatomical abstractions are coherent enough to produce structured, morphologically grounded predictions even for unseen organisms. The cross-seed instability of OOD predictions offers a promising passive signal for anomaly detection — a direction worth exploring in future work alongside explicit open-set recognition mechanisms.
+            Finally, the deployment of dual-stage entropy filtering—utilizing both raw logit thresholds and softmax confidence margins—demonstrates that closed-set classifiers can be adapted for safe open-world inference. Coupled with a persistent active learning telemetry pipeline, PokedexNet transcends static evaluation, establishing a robust framework for continuous morphological learning in computer vision.
           </p>
         </section>
 
@@ -349,6 +431,31 @@ export default function ResearchPaper() {
           </ul>
         </section>
 
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>List of Equations</h2>
+          <ul className={styles.list}>
+            <li className={styles.listItem}>
+              <strong>Equation (1): Soft-Voting Ensemble Mean Maximum Logit</strong>
+              <ul style={{ marginTop: '0.5rem', marginLeft: '1.5rem', listStyleType: 'circle' }}>
+                <li style={{ marginBottom: '0.25rem' }}><strong>Meaning:</strong> Bypasses the softmax layer to evaluate raw activation strength directly before normalization, filtering out abstract shapes or out-of-distribution inputs that fail to stimulate the convolutional feature extractors.</li>
+                <li style={{ marginBottom: '0.25rem' }}><strong>μ<sub>logit</sub>:</strong> The calculated mean of the maximum raw logit outputs across all models in the ensemble, used as the first-stage activation filter.</li>
+                <li style={{ marginBottom: '0.25rem' }}><strong>N:</strong> The total number of model instances in the ensemble (in production, N = 3).</li>
+                <li style={{ marginBottom: '0.25rem' }}><strong>Z<sub>i</sub>:</strong> The vector of pre-activation logit outputs produced by the fully connected classification head of the <em>i</em>-th model instance.</li>
+                <li style={{ marginBottom: '0.25rem' }}><strong>max(Z<sub>i</sub>):</strong> The highest raw output value in the logit vector for the <em>i</em>-th model, indicating that model&apos;s strongest localized feature response.</li>
+              </ul>
+            </li>
+            <li className={styles.listItem} style={{ marginTop: '1.5rem' }}>
+              <strong>Equation (2): Single-Model Softmax Confidence Margin</strong>
+              <ul style={{ marginTop: '0.5rem', marginLeft: '1.5rem', listStyleType: 'circle' }}>
+                <li style={{ marginBottom: '0.25rem' }}><strong>Meaning:</strong> Measures epistemic certainty on in-distribution silhouettes by calculating the probability gap between the top two classifications. A low gap indicates class ambiguity, signaling high model uncertainty.</li>
+                <li style={{ marginBottom: '0.25rem' }}><strong>M<sub>i</sub>:</strong> The confidence margin score calculated for the <em>i</em>-th model instance, representing its predictive certainty.</li>
+                <li style={{ marginBottom: '0.25rem' }}><strong>P(y<sub>1, i</sub>):</strong> The highest softmax probability score assigned to the top predicted Pokémon class by the <em>i</em>-th model instance.</li>
+                <li style={{ marginBottom: '0.25rem' }}><strong>P(y<sub>2, i</sub>):</strong> The second-highest softmax probability score assigned to the runner-up predicted Pokémon class by the <em>i</em>-th model instance.</li>
+              </ul>
+            </li>
+          </ul>
+        </section>
+
       </article>
     </div>
   );

frontend/src/app/research/page.module.css

@@ -297,6 +297,83 @@
   transform: scale(1.02);
 }
 
+.equationWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin: 2rem 0;
+  position: relative;
+}
+
+.equation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 1.38rem;
+  color: var(--accent-primary);
+  padding: 1rem 2rem;
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 12px;
+  border: 1px solid var(--border-glass);
+  max-width: fit-content;
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
+  margin: 0;
+}
+
+.equationNumber {
+  position: absolute;
+  right: 1rem;
+  font-family: var(--font-mono);
+  font-size: 1.1rem;
+  color: var(--text-secondary);
+  font-weight: 700;
+}
+
+.fraction {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  vertical-align: middle;
+  margin: 0 0.5rem;
+  font-size: 1.08rem;
+  line-height: 1.1;
+}
+
+.numerator {
+  border-bottom: 1px solid var(--accent-primary);
+  padding: 0 0.2rem;
+  text-align: center;
+}
+
+.denominator {
+  padding: 0 0.2rem;
+  text-align: center;
+}
+
+.mathSymbol {
+  font-size: 1.56rem;
+  margin: 0 0.25rem;
+}
+
+.subSuper {
+  display: inline-flex;
+  flex-direction: column;
+  font-size: 0.78rem;
+  vertical-align: middle;
+  margin-left: 0.1rem;
+  line-height: 1;
+}
+
+.super {
+  margin-bottom: 2px;
+}
+
+.sub {
+  margin-top: 2px;
+}
+
 @media (max-width: 768px) {
   .oodContainer {
     flex-direction: column;

frontend/src/components/ConfidenceBar.js

@@ -7,7 +7,6 @@ export default function ConfidenceBar({ confidence }) {
   const percentage = (confidence * 100).toFixed(1);
   
   useEffect(() => {
-    // Reset and animate to width
     setWidth(0);
     const timer = setTimeout(() => setWidth(percentage), 100);
     return () => clearTimeout(timer);

frontend/src/components/FeedbackWidget.js

@@ -0,0 +1,112 @@
+'use client';
+import { useState } from 'react';
+import styles from './FeedbackWidget.module.css';
+
+export default function FeedbackWidget({ imageHash, predictedId, top5, isOodScreen, onFeedbackSuccess }) {
+  const [feedbackState, setFeedbackState] = useState('idle');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const sendFeedback = async (isCorrect, userCorrectionId = null) => {
+    setFeedbackState('submitting');
+    try {
+      const response = await fetch('/api/feedback', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          image_hash: imageHash,
+          predicted_id: predictedId,
+          is_correct: isCorrect,
+          user_correction_id: userCorrectionId,
+          is_ood_screen: isOodScreen || false
+        })
+      });
+
+      if (!response.ok) {
+        if (response.status === 429) {
+          throw new Error("Muitas requisições. Tente novamente mais tarde.");
+        }
+        throw new Error("Erro ao salvar feedback");
+      }
+      setFeedbackState('success');
+      if (onFeedbackSuccess) {
+          onFeedbackSuccess(isCorrect);
+      }
+      setTimeout(() => {
+        setFeedbackState('hidden');
+      }, 3000);
+    } catch (error) {
+      setFeedbackState('error');
+      setErrorMessage(error.message);
+      setTimeout(() => setFeedbackState('idle'), 4000);
+    }
+  };
+
+  if (feedbackState === 'hidden') {
+    return null;
+  }
+
+  if (feedbackState === 'success') {
+    return (
+      <div className={styles.successMessage}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" style={{marginRight: '8px', color: '#4caf50'}}><polyline points="20 6 9 17 4 12"></polyline></svg>
+        Feedback sent, thank you!
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.feedbackContainer}>
+      {feedbackState === 'idle' || feedbackState === 'error' ? (
+        <div className={styles.voteButtons}>
+          <span className={styles.prompt}>
+            {isOodScreen ? "Did PokedexNet get this right?" : "Was this prediction accurate?"}
+          </span>
+          <button 
+            className={`${styles.voteBtn} ${styles.likeBtn}`} 
+            onClick={() => sendFeedback(true, isOodScreen ? 'none' : null)}
+            title={isOodScreen ? "Yes, it is NOT a Pokémon" : "Yes, it's correct"}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
+          </button>
+          <button 
+            className={`${styles.voteBtn} ${styles.dislikeBtn}`} 
+            onClick={() => isOodScreen ? sendFeedback(false, 'unknown_pokemon') : setFeedbackState('dislike_menu')}
+            title={isOodScreen ? "No, it actually IS a Pokémon" : "No, it's wrong"}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>
+          </button>
+          {feedbackState === 'error' && <span className={styles.errorText}>{errorMessage}</span>}
+        </div>
+      ) : feedbackState === 'submitting' ? (
+        <div className={styles.loadingMessage}>Sending feedback...</div>
+      ) : feedbackState === 'dislike_menu' ? (
+        <div className={styles.dislikeMenu}>
+          <span className={styles.prompt}>What Pokémon is it really?</span>
+          <div className={styles.optionsGrid}>
+            {top5 && top5.slice(1).map(pred => (
+              <button 
+                key={pred.pokemon_id} 
+                className={styles.optionBtn}
+                onClick={() => sendFeedback(false, pred.pokemon_id)}
+              >
+                {pred.name}
+              </button>
+            ))}
+            <button 
+              className={`${styles.optionBtn} ${styles.noneBtn}`}
+              onClick={() => sendFeedback(false, 'none')}
+            >
+              None of these
+            </button>
+          </div>
+          <button 
+            className={styles.cancelBtn} 
+            onClick={() => setFeedbackState('idle')}
+          >
+            Cancel
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

frontend/src/components/FeedbackWidget.module.css

@@ -0,0 +1,158 @@
+.feedbackContainer {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.voteButtons {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.prompt {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+.voteBtn {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.9); /* Símbolo branco por padrão (não preto) */
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.voteBtn svg {
+  stroke: currentColor;
+}
+
+.likeBtn:hover {
+  background: var(--accent-primary); /* Azul idêntico ao do botão de exit */
+  border-color: var(--accent-primary);
+  color: #fff; /* Símbolo branco sólido no hover */
+  transform: scale(1.1);
+}
+
+.dislikeBtn:hover {
+  background: #ff4d4f; /* Vermelho idêntico ao retry do OOD */
+  border-color: #ff4d4f;
+  color: #fff; /* Símbolo branco sólido no hover */
+  transform: scale(1.1);
+}
+
+.voteBtn:active {
+  transform: scale(0.95);
+}
+
+.successMessage {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #52E028;
+  font-weight: 600;
+  animation: fadeIn 0.4s ease;
+  padding: 1rem;
+}
+
+.checkIcon {
+  background: rgba(82, 224, 40, 0.2);
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loadingMessage {
+  color: rgba(255, 255, 255, 0.6);
+  font-style: italic;
+  font-size: 0.9rem;
+}
+
+.errorText {
+  color: #ff4d4f;
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.dislikeMenu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  animation: slideDown 0.3s ease forwards;
+}
+
+.optionsGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+  margin: 1rem 0;
+  width: 100%;
+}
+
+.optionBtn {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: #fff;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.optionBtn:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.noneBtn {
+  border-color: rgba(255, 77, 79, 0.3);
+  color: #ff4d4f;
+}
+
+.noneBtn:hover {
+  background: rgba(255, 77, 79, 0.1);
+  border-color: rgba(255, 77, 79, 0.5);
+}
+
+.cancelBtn {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.85rem;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.cancelBtn:hover {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}

frontend/src/components/FontScaler.js

@@ -4,7 +4,6 @@ import { useState, useEffect } from 'react';
 import styles from './FontScaler.module.css';
 
 export default function FontScaler() {
-  // Start with 1.2 since the user requested a 20% base increase
   const [scale, setScale] = useState(1.2);
 
   useEffect(() => {

frontend/src/components/ParticlesBg.js

@@ -5,9 +5,8 @@ import { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 const ParticlesBg = forwardRef((props, ref) => {
   const canvasRef = useRef(null);
   
-  // Base color matches --accent-primary from globals.css
-  let targetColor = { r: 255, g: 61, b: 61 };
-  let currentColor = { r: 255, g: 61, b: 61 };
+  const targetColorRef = useRef({ r: 56, g: 189, b: 248 });
+  const currentColorRef = useRef({ r: 56, g: 189, b: 248 });
 
   const hexToRgb = (hex) => {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -15,15 +14,15 @@ const ParticlesBg = forwardRef((props, ref) => {
       r: parseInt(result[1], 16),
       g: parseInt(result[2], 16),
       b: parseInt(result[3], 16)
-    } : { r: 255, g: 61, b: 61 };
+    } : { r: 56, g: 189, b: 248 };
   };
 
   useImperativeHandle(ref, () => ({
     setAccentColor: (hex) => {
       if (hex) {
-        targetColor = hexToRgb(hex);
+        targetColorRef.current = hexToRgb(hex);
       } else {
-        targetColor = { r: 255, g: 61, b: 61 };
+        targetColorRef.current = { r: 56, g: 189, b: 248 };
       }
     }
   }));
@@ -37,7 +36,6 @@ const ParticlesBg = forwardRef((props, ref) => {
     let particles = [];
     let connectionDist = 120;
 
-    // Desktop baseline: 1920*1080 = ~2M pixels → 70 particles
     const BASELINE_AREA = 1920 * 1080;
     const BASELINE_PARTICLES = 70;
     const BASELINE_DIAGONAL = Math.sqrt(1920 * 1920 + 1080 * 1080);
@@ -51,11 +49,9 @@ const ParticlesBg = forwardRef((props, ref) => {
       const area = canvas.width * canvas.height;
       const diagonal = Math.sqrt(canvas.width ** 2 + canvas.height ** 2);
 
-      // Scale particles proportionally to the screen area ratio
       const areaRatio = area / BASELINE_AREA;
       const targetCount = Math.max(MIN_PARTICLES, Math.round(BASELINE_PARTICLES * areaRatio));
 
-      // Scale connection distance proportionally to the diagonal ratio
       connectionDist = Math.round(BASELINE_CONN_DIST * (diagonal / BASELINE_DIAGONAL));
 
       if (particles.length > targetCount) {
@@ -94,16 +90,15 @@ const ParticlesBg = forwardRef((props, ref) => {
     resize();
 
     const animate = () => {
-      // Smooth color transition (linear interpolation)
-      currentColor.r += (targetColor.r - currentColor.r) * 0.05;
-      currentColor.g += (targetColor.g - currentColor.g) * 0.05;
-      currentColor.b += (targetColor.b - currentColor.b) * 0.05;
+      currentColorRef.current.r += (targetColorRef.current.r - currentColorRef.current.r) * 0.05;
+      currentColorRef.current.g += (targetColorRef.current.g - currentColorRef.current.g) * 0.05;
+      currentColorRef.current.b += (targetColorRef.current.b - currentColorRef.current.b) * 0.05;
 
       ctx.clearRect(0, 0, canvas.width, canvas.height);
 
       particles.forEach(p => {
         p.update();
-        p.draw(ctx, currentColor);
+        p.draw(ctx, currentColorRef.current);
       });
 
       for (let i = 0; i < particles.length; i++) {
@@ -116,7 +111,7 @@ const ParticlesBg = forwardRef((props, ref) => {
             ctx.beginPath();
             ctx.moveTo(particles[i].x, particles[i].y);
             ctx.lineTo(particles[j].x, particles[j].y);
-            ctx.strokeStyle = `rgba(${Math.floor(currentColor.r)}, ${Math.floor(currentColor.g)}, ${Math.floor(currentColor.b)}, ${(1 - dist / connectionDist) * 0.4})`;
+            ctx.strokeStyle = `rgba(${Math.floor(currentColorRef.current.r)}, ${Math.floor(currentColorRef.current.g)}, ${Math.floor(currentColorRef.current.b)}, ${(1 - dist / connectionDist) * 0.4})`;
             ctx.lineWidth = 1;
             ctx.stroke();
           }

frontend/src/components/PokedexNetDiagram.js

@@ -16,7 +16,6 @@ export default function PokedexNetDiagram() {
 
       <div className={styles.pipeline}>
 
-        {/* INPUT */}
         <div className={`${styles.layer} ${styles.lInput}`} style={{ animationDelay: '0.04s' }}>
           <div className={styles.layerName}>Input Tensor</div>
           <div className={styles.layerDim}>128 × 128 × 1 &mdash; grayscale</div>
@@ -26,7 +25,6 @@ export default function PokedexNetDiagram() {
           <div className={styles.connLine}></div>
         </div>
 
-        {/* CONV1 (adapted: in_channels=1) */}
         <div className={`${styles.layer} ${styles.lStruct}`} style={{ animationDelay: '0.08s' }}>
           <div className={styles.layerName}>Conv1 &mdash; adaptado</div>
           <div className={styles.layerDim}>in=1 &nbsp;|&nbsp; 64 filtros &nbsp;|&nbsp; 7×7 kernel &nbsp;|&nbsp; stride 2 &nbsp;|&nbsp; pad 3 &nbsp;|&nbsp; bias=False</div>
@@ -36,7 +34,6 @@ export default function PokedexNetDiagram() {
           <div className={styles.connLine}></div>
         </div>
 
-        {/* BN + ReLU + MaxPool */}
         <div className={`${styles.layer} ${styles.lStruct}`} style={{ animationDelay: '0.12s' }}>
           <div className={styles.layerName}>BN → ReLU → MaxPool</div>
           <div className={styles.layerDim}>BatchNorm2d(64) &nbsp;|&nbsp; ReLU &nbsp;|&nbsp; MaxPool 3×3 stride 2 pad 1</div>
@@ -46,7 +43,6 @@ export default function PokedexNetDiagram() {
           <div className={styles.connLine}></div>
         </div>
 
-        {/* LAYER 1: 2× BasicBlock(64, 64) — no downsampling */}
         <div className={styles.resnetLayer} style={{ animationDelay: '0.17s' }}>
           <div className={styles.lGroupLabel} style={{ animationDelay: '0.16s' }}>layer1 &mdash; 2× basicblock</div>
           <div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.17s' }}>
@@ -60,15 +56,12 @@ export default function PokedexNetDiagram() {
             <div className={styles.layerName}>BasicBlock [2/2]</div>
             <div className={styles.layerDim}>Conv3×3(64→64) → BN → ReLU → Conv3×3(64→64) → BN &nbsp;|&nbsp; stride 1</div>
           </div>
-          {/* skip arrows: one per block */}
           <div className={styles.skipSvg}>
             <svg viewBox="0 0 36 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
-              {/* block 1 skip: top 0%..48% */}
               <path d="M4,4 Q28,4 28,25 Q28,46 4,46"
                 fill="none" stroke="#c084fc" strokeWidth="1.4"
                 strokeDasharray="4 3" opacity="0.75"/>
               <polygon points="4,41 0,47 8,47" fill="#c084fc" opacity="0.8"/>
-              {/* block 2 skip: 52%..100% */}
               <path d="M4,54 Q28,54 28,75 Q28,96 4,96"
                 fill="none" stroke="#c084fc" strokeWidth="1.4"
                 strokeDasharray="4 3" opacity="0.75"/>
@@ -81,7 +74,6 @@ export default function PokedexNetDiagram() {
           <div className={styles.connLine}></div>
         </div>
 
-        {/* LAYER 2: 2× BasicBlock(64→128) — downsample stride 2 */}
         <div className={styles.resnetLayer} style={{ animationDelay: '0.23s' }}>
           <div className={styles.lGroupLabel} style={{ animationDelay: '0.22s' }}>layer2 &mdash; 2× basicblock &nbsp;(downsample)</div>
           <div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.23s' }}>
@@ -113,7 +105,6 @@ export default function PokedexNetDiagram() {
           <div className={styles.connLine}></div>
         </div>
 
-        {/* LAYER 3: 2× BasicBlock(128→256) — downsample */}
         <div className={styles.resnetLayer} style={{ animationDelay: '0.29s' }}>
           <div className={styles.lGroupLabel} style={{ animationDelay: '0.28s' }}>layer3 &mdash; 2× basicblock &nbsp;(downsample)</div>
           <div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.29s' }}>
@@ -145,7 +136,6 @@ export default function PokedexNetDiagram() {
           <div className={styles.connLine}></div>
         </div>
 
-        {/* LAYER 4: 2× BasicBlock(256→512) — downsample */}
         <div className={styles.resnetLayer} style={{ animationDelay: '0.35s' }}>
           <div className={styles.lGroupLabel} style={{ animationDelay: '0.34s' }}>layer4 &mdash; 2× basicblock &nbsp;(downsample)</div>
           <div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.35s' }}>
@@ -177,7 +167,6 @@ export default function PokedexNetDiagram() {
           <div className={styles.connLine}></div>
         </div>
 
-        {/* GLOBAL AVG POOL */}
         <div className={`${styles.layer} ${styles.lStruct}`} style={{ animationDelay: '0.40s' }}>
           <div className={styles.layerName}>Global Average Pool</div>
           <div className={styles.layerDim}>AdaptiveAvgPool2d(1×1) &nbsp;→&nbsp; 1 × 1 × 512</div>
@@ -187,7 +176,6 @@ export default function PokedexNetDiagram() {
           <div className={styles.connLine}></div>
         </div>
 
-        {/* FLATTEN */}
         <div className={`${styles.layer} ${styles.lFlatten}`} style={{ animationDelay: '0.43s' }}>
           <div className={styles.layerName}>Flatten</div>
           <div className={styles.layerDim}>512-dim feature vector</div>
@@ -197,13 +185,12 @@ export default function PokedexNetDiagram() {
           <div className={styles.connLine}></div>
         </div>
 
-        {/* FC OUTPUT */}
         <div className={`${styles.layer} ${styles.lOutput}`} style={{ animationDelay: '0.46s' }}>
           <div className={styles.layerName}>FC — backbone.fc</div>
           <div className={styles.layerDim}>Linear(512 → 1025) &nbsp;|&nbsp; Softmax</div>
         </div>
 
-      </div>{/* /pipeline */}
+      </div>
 
       <div className={styles.legend}>
         <div className={styles.legendItem}>

frontend/src/components/ResultCard.js

@@ -1,17 +1,25 @@
 'use client';
+import { useState } from 'react';
+import confetti from 'canvas-confetti';
 import styles from './ResultCard.module.css';
 import TypeBadge from './TypeBadge';
 import ConfidenceBar from './ConfidenceBar';
 import StatsRadar from './StatsRadar';
 import TopPredictions from './TopPredictions';
+import FeedbackWidget from './FeedbackWidget';
+
+export default function ResultCard({ predictionData, pokemonDetails, onReset, onShinyActivated, onDislikeActivated }) {
+  const [showShiny, setShowShiny] = useState(false);
 
-export default function ResultCard({ predictionData, pokemonDetails, onReset }) {
   if (!predictionData) return null;
 
   const { pokemon_id, name, confidence, top_5 } = predictionData;
   const types = pokemonDetails?.types || [];
   const stats = pokemonDetails?.stats || {};
-  const spriteUrl = pokemonDetails?.sprite_url;
+  
+  const spriteUrl = showShiny 
+    ? `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/shiny/${pokemon_id}.png`
+    : pokemonDetails?.sprite_url;
 
   return (
     <div className={`glass-panel ${styles.card}`}>
@@ -23,12 +31,25 @@ export default function ResultCard({ predictionData, pokemonDetails, onReset })
         <button className={styles.closeBtn} onClick={onReset} aria-label="Try another">✕</button>
       </div>
 
+      {predictionData.status === 'UNCERTAIN_POKEMON' && (
+        <div style={{ backgroundColor: 'rgba(255, 165, 0, 0.1)', border: '1px solid rgba(255, 165, 0, 0.3)', borderLeft: '4px solid orange', padding: '1rem', margin: '0 2rem 1.5rem 2rem', borderRadius: '8px', display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
+          <span style={{ fontSize: '1.5rem', lineHeight: '1' }}>⚠️</span>
+          <span style={{ color: 'rgba(255, 255, 255, 0.9)', fontSize: '0.95rem', lineHeight: '1.4' }}>
+            <strong style={{ color: 'orange', display: 'block', marginBottom: '0.25rem' }}>Uncertainty Warning</strong> 
+            Unfortunately, PokedexNet cannot guarantee this prediction. While this is our best guess, the silhouette is heavily occluded, noisy, or atypical, triggering an epistemic disagreement in our ensemble.
+          </span>
+        </div>
+      )}
+
       <div className={styles.content}>
         <div className={styles.visualColumn}>
           <div className={`${styles.spriteContainer} ${styles.stagger1}`}>
             {spriteUrl ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img src={spriteUrl} alt={name} className={styles.sprite} />
+              <img 
+                src={spriteUrl} 
+                alt={name} 
+                className={styles.sprite} 
+              />
             ) : (
               <div className={styles.noSprite}>?</div>
             )}
@@ -40,6 +61,24 @@ export default function ResultCard({ predictionData, pokemonDetails, onReset })
             {types.map(type => (
               <TypeBadge key={type} type={type} />
             ))}
+            {showShiny && (
+              <span style={{
+                display: 'inline-block',
+                padding: '4px 16px',
+                borderRadius: '20px',
+                fontSize: '0.85rem',
+                fontWeight: '700',
+                letterSpacing: '1px',
+                marginRight: '8px',
+                marginBottom: '8px',
+                backdropFilter: 'blur(4px)',
+                backgroundColor: 'color-mix(in srgb, #FFD700 20%, transparent)',
+                color: '#FFD700',
+                border: '1px solid color-mix(in srgb, #FFD700 50%, transparent)'
+              }}>
+                SHINY
+              </span>
+            )}
           </div>
 
           <div className={styles.stagger2}>
@@ -54,6 +93,56 @@ export default function ResultCard({ predictionData, pokemonDetails, onReset })
           <div className={styles.stagger4}>
             <TopPredictions predictions={top_5} />
           </div>
+          
+          <div className={styles.stagger4}>
+            <FeedbackWidget 
+              imageHash={predictionData.image_hash}
+              predictedId={pokemon_id}
+              top5={top_5}
+              onFeedbackSuccess={(isCorrect) => {
+                if (isCorrect) {
+                  setShowShiny(true);
+                  if (onShinyActivated) {
+                    onShinyActivated();
+                  }
+                  
+                  const defaults = {
+                    spread: 360,
+                    ticks: 50,
+                    gravity: 0,
+                    decay: 0.94,
+                    startVelocity: 24,
+                    shapes: ['star'],
+                    colors: ['FFE400', 'FFBD00', 'E89400', 'FFCA6C', 'FDFFB8']
+                  };
+
+                  function shoot() {
+                    confetti({
+                      ...defaults,
+                      particleCount: 30,
+                      scalar: 1.1,
+                      shapes: ['star']
+                    });
+
+                    confetti({
+                      ...defaults,
+                      particleCount: 8,
+                      scalar: 0.6,
+                      shapes: ['circle']
+                    });
+                  }
+
+                  setTimeout(shoot, 0);
+                  setTimeout(shoot, 100);
+                  setTimeout(shoot, 200);
+                } else {
+                  if (onDislikeActivated) {
+                    onDislikeActivated();
+                  }
+                }
+              }}
+            />
+          </div>
         </div>
       </div>
     </div>

frontend/src/components/StatsRadar.js

@@ -21,7 +21,6 @@ export default function StatsRadar({ stats }) {
     
     ctx.clearRect(0, 0, width, height);
 
-    // Draw background grid
     ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
     ctx.lineWidth = 1;
     for (let level = 1; level <= 3; level++) {
@@ -38,7 +37,6 @@ export default function StatsRadar({ stats }) {
       ctx.stroke();
     }
 
-    // Draw axes and labels
     ctx.font = '10px monospace';
     ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
     ctx.textAlign = 'center';
@@ -59,7 +57,6 @@ export default function StatsRadar({ stats }) {
       ctx.fillText(labels[i], labelX, labelY);
     }
 
-    // Draw data polygon
     ctx.beginPath();
     for (let i = 0; i < 6; i++) {
       const statVal = stats[statKeys[i]] || 0;

frontend/src/components/TopPredictions.js

@@ -4,7 +4,6 @@ import styles from './TopPredictions.module.css';
 export default function TopPredictions({ predictions }) {
   if (!predictions || predictions.length <= 1) return null;
 
-  // Skip the top 1 because it is displayed as the primary result
   const runnersUp = predictions.slice(1, 5);
 
   return (

frontend/src/components/TypeBadge.js

@@ -2,7 +2,6 @@
 import styles from './TypeBadge.module.css';
 
 export default function TypeBadge({ type }) {
-  // Use CSS custom properties defined in globals.css
   const colorVar = `var(--type-${type.toLowerCase()})`;
   
   return (

frontend/src/components/UploadZone.js

@@ -3,7 +3,6 @@
 import { useState, useRef } from 'react';
 import styles from './UploadZone.module.css';
 
-// Client-side image resizer
 const resizeImage = (file, maxSize = 512) => {
   return new Promise((resolve) => {
     const img = new Image();
@@ -55,7 +54,6 @@ export default function UploadZone({ status, selectedImage, onImageSelect, onSub
   const handleDragLeave = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    // Only set dragging to false if we actually leave the container (not to child elements)
     if (!e.currentTarget.contains(e.relatedTarget)) {
       setIsDragging(false);
     }
@@ -64,14 +62,12 @@ export default function UploadZone({ status, selectedImage, onImageSelect, onSub
   const processFile = async (file) => {
     if (!file) return;
     
-    // Validate MIME
     const allowed = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
     if (!allowed.includes(file.type)) {
       onImageSelect(null, "Invalid file type. Use PNG, JPEG, WebP, or GIF.");
       return;
     }
     
-    // Validate raw size
     if (file.size > 10 * 1024 * 1024) {
       onImageSelect(null, "File is too large. Max 10MB allowed.");
       return;
@@ -112,7 +108,7 @@ export default function UploadZone({ status, selectedImage, onImageSelect, onSub
   };
 
   if (status === 'loading' || status === 'success') {
-    return null; // Hide upload zone when loading or viewing result
+    return null;
   }
 
   return (