add yolo trainer and inference

.gitignore

@@ -208,5 +208,13 @@ __marimo__/
 temp_dir
 input.jpg
 comic_panel_extractor/api_outputs/
+comic_panel_extractor/dataset/
+comic_panel_extractor/images/
+comic_panel_extractor/image_labels/
+comic_panel_extractor/runs/
+comic_panel_extractor/temp_dir/
 temp.py
-test*.jpg
+test*.jpg
+yolo_output/
+*:Zone.Identifier
+comic_panel_extractor/best.pt

comic_panel_extractor/annorator_server.py

@@ -0,0 +1,200 @@
+from fastapi import APIRouter, HTTPException, UploadFile, File
+from fastapi.responses import FileResponse
+from pydantic import BaseModel, field_validator
+from typing import List
+from PIL import Image
+import os
+import base64
+from io import BytesIO
+import shutil
+
+current_path = os.path.abspath(os.path.join(os.path.dirname(__file__)))
+
+app = APIRouter()
+
+# === Configuration ===
+IMAGE_ROOT = os.path.join(current_path, "dataset/images")
+LABEL_ROOT = os.path.join(current_path, "dataset/labels")
+IMAGE_LABEL_ROOT = os.path.join(current_path, "image_labels")
+
+CLASS_ID = 0
+
+# === Pydantic Models ===
+class Box(BaseModel):
+    left: int
+    top: int
+    width: int
+    height: int
+    type: str = "rect"
+    stroke: str = "#00ff00"
+    strokeWidth: int = 3
+    fill: str = "rgba(0, 255, 0, 0.2)"
+    saved: bool = True
+
+    @field_validator("left", "top", "width", "height", mode="before")
+    def round_floats(cls, v):
+        return round(v)
+
+class SaveAnnotationsRequest(BaseModel):
+    boxes: List[Box]
+    image_name: str  # Relative path like train/image1.jpg
+    original_width: int
+    original_height: int
+
+class ImageInfo(BaseModel):
+    name: str  # Relative path like train/image1.jpg
+    width: int
+    height: int
+    has_annotations: bool
+
+# === Helpers ===
+def get_image_path(image_name: str) -> str:
+    return os.path.join(IMAGE_ROOT, image_name)
+
+def get_label_path(image_name: str) -> str:
+    return os.path.join(LABEL_ROOT, os.path.splitext(image_name)[0] + ".txt")
+
+# === Core Functions ===
+def load_yolo_boxes(image_path: str, label_path: str):
+    try:
+        img = Image.open(image_path)
+        w, h = img.size
+        boxes = []
+        if os.path.exists(label_path):
+            with open(label_path, "r") as f:
+                for line in f:
+                    parts = list(map(float, line.strip().split()))
+                    if len(parts) != 5:
+                        continue
+                    _, xc, yc, bw, bh = parts
+                    left = int((xc - bw / 2) * w)
+                    top = int((yc - bh / 2) * h)
+                    width = int(bw * w)
+                    height = int(bh * h)
+                    boxes.append({
+                        "type": "rect",
+                        "left": left,
+                        "top": top,
+                        "width": width,
+                        "height": height,
+                        "stroke": "#00ff00",
+                        "strokeWidth": 3,
+                        "fill": "rgba(0, 255, 0, 0.2)",
+                        "saved": True
+                    })
+        return boxes, (w, h)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error loading data: {str(e)}")
+
+def save_yolo_annotations(boxes: List[Box], original_size: tuple, label_path: str):
+    os.makedirs(os.path.dirname(label_path), exist_ok=True)
+    w, h = original_size
+    try:
+        with open(label_path, "w") as f:
+            for box in boxes:
+                left, top, width, height = box.left, box.top, box.width, box.height
+                xc = (left + width / 2) / w
+                yc = (top + height / 2) / h
+                bw = width / w
+                bh = height / h
+                f.write(f"{CLASS_ID} {xc:.6f} {yc:.6f} {bw:.6f} {bh:.6f}\n")
+
+        shutil.copy2(label_path, f"{IMAGE_LABEL_ROOT}/{os.path.basename(label_path)}")
+        return True
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error saving annotations: {str(e)}")
+
+# === API Routes ===
+
+@app.get("/api/annotate/images", response_model=List[ImageInfo])
+async def list_all_images():
+    image_info_list = []
+    for root, _, files in os.walk(IMAGE_ROOT):
+        for file in files:
+            if file.lower().endswith((".jpg", ".jpeg", ".png")):
+                image_path = os.path.join(root, file)
+                rel_path = os.path.relpath(image_path, IMAGE_ROOT)
+                label_path = get_label_path(rel_path)
+
+                img = Image.open(image_path)
+                width, height = img.size
+
+                image_info_list.append(ImageInfo(
+                    name=rel_path.replace("\\", "/"),
+                    width=width,
+                    height=height,
+                    has_annotations=os.path.exists(label_path)
+                ))
+    return image_info_list
+
+@app.get("/api/annotate/image/{image_name:path}")
+async def get_image(image_name: str):
+    image_path = get_image_path(image_name)
+    if not os.path.exists(image_path):
+        raise HTTPException(status_code=404, detail="Image not found")
+
+    with Image.open(image_path) as img:
+        if img.mode != "RGB":
+            img = img.convert("RGB")
+        buffer = BytesIO()
+        img.save(buffer, format="JPEG")
+        img_data = base64.b64encode(buffer.getvalue()).decode()
+        return {
+            "image_data": f"data:image/jpeg;base64,{img_data}",
+            "width": img.width,
+            "height": img.height
+        }
+
+@app.get("/api/annotate/annotations/{image_name:path}")
+async def get_annotations(image_name: str):
+    image_path = get_image_path(image_name)
+    label_path = get_label_path(image_name)
+
+    if not os.path.exists(image_path):
+        raise HTTPException(status_code=404, detail="Image not found")
+
+    boxes, (width, height) = load_yolo_boxes(image_path, label_path)
+    return {
+        "boxes": boxes,
+        "original_width": width,
+        "original_height": height
+    }
+
+@app.post("/api/annotate/annotations")
+async def save_annotations(request: SaveAnnotationsRequest):
+    label_path = get_label_path(request.image_name)
+    success = save_yolo_annotations(
+        request.boxes,
+        (request.original_width, request.original_height),
+        label_path
+    )
+    return {"message": f"Saved {len(request.boxes)} annotations successfully"}
+
+@app.delete("/api/annotate/annotations/{image_name:path}")
+async def delete_annotations(image_name: str):
+    label_path = get_label_path(image_name)
+    if os.path.exists(label_path):
+        os.remove(label_path)
+        return {"message": "Annotations deleted"}
+    return {"message": "No annotations to delete"}
+
+@app.get("/api/annotate/annotations/{image_name:path}/download")
+async def download_annotations(image_name: str):
+    label_path = get_label_path(image_name)
+    if not os.path.exists(label_path):
+        raise HTTPException(status_code=404, detail="Annotations not found")
+    return FileResponse(
+        label_path,
+        media_type="text/plain",
+        filename=os.path.basename(label_path)
+    )
+
+@app.post("/api/annotate/upload")
+async def upload_image(file: UploadFile = File(...)):
+    if not file.content_type.startswith("image/"):
+        raise HTTPException(status_code=400, detail="File must be an image")
+
+    file_path = os.path.join(IMAGE_ROOT, "train", file.filename)
+    with open(file_path, "wb") as f:
+        f.write(await file.read())
+    return {"message": f"Uploaded {file.filename} to train set"}

comic_panel_extractor/comic.yaml

@@ -0,0 +1,5 @@
+path: /home/jebineinstein/git/comic-panel-extractor/comic_panel_extractor/dataset
+train: /home/jebineinstein/git/comic-panel-extractor/comic_panel_extractor/dataset/images/train
+val: /home/jebineinstein/git/comic-panel-extractor/comic_panel_extractor/dataset/images/val
+nc: 1
+names: ['panel']

comic_panel_extractor/create_dataset.py

@@ -0,0 +1,98 @@
+import os
+import shutil
+import random
+from pathlib import Path
+from dotenv import load_dotenv
+from tqdm import tqdm  # <-- import tqdm
+
+load_dotenv()
+SOURCE_PATHS = os.getenv('SOURCE_PATH')
+
+if not SOURCE_PATHS:
+    raise ValueError("SOURCE_PATH not set")
+
+# Split by comma and strip whitespace
+source_paths = [Path(p.strip()) for p in SOURCE_PATHS.split(',')]
+
+images_dir = Path('images')
+dataset_dir = Path('dataset')
+
+image_exts = {'.jpg', '.jpeg', '.png', '.bmp', '.gif', '.tiff', '.webp'}
+label_exts = {'.txt'}
+
+# Clear images_dir
+if images_dir.exists():
+    shutil.rmtree(images_dir)
+images_dir.mkdir(parents=True)
+
+# Copy images from all source paths with tqdm progress
+for source_path in source_paths:
+    if not source_path.exists():
+        print(f"Warning: source path {source_path} does not exist, skipping.")
+        continue
+    
+    # Count total image files first for progress bar
+    total_files = 0
+    for root, dirs, files in os.walk(source_path):
+        total_files += sum(1 for f in files if Path(f).suffix.lower() in image_exts)
+    
+    with tqdm(total=total_files, desc=f"Copying images from {source_path}", unit="img") as pbar:
+        for root, dirs, files in os.walk(source_path):
+            root_path = Path(root)
+            if root_path == source_path:
+                prefix = 'root'
+            else:
+                rel_path = root_path.relative_to(source_path)
+                prefix = '_'.join(rel_path.parts)
+            for file in files:
+                if Path(file).suffix.lower() in image_exts:
+                    src_file = root_path / file
+                    dst_file = images_dir / f"{prefix}_{file}"
+                    shutil.copy2(src_file, dst_file)
+                    pbar.update(1)
+
+# Delete old dataset if exists
+if dataset_dir.exists():
+    shutil.rmtree(dataset_dir)
+
+# Create dataset folders for images and labels splits
+for split in ['train', 'val', 'test']:
+    (dataset_dir / 'images' / split).mkdir(parents=True, exist_ok=True)
+    (dataset_dir / 'labels' / split).mkdir(parents=True, exist_ok=True)
+
+# List all images in images_dir
+all_images = [f for f in images_dir.iterdir() if f.suffix.lower() in image_exts]
+
+# Shuffle and split (80% train, 10% val, 10% test)
+random.seed(42)
+random.shuffle(all_images)
+n = len(all_images)
+train_end = int(0.8 * n)
+val_end = train_end + int(0.1 * n)
+
+splits = {
+    'train': all_images[:train_end],
+    'val': all_images[train_end:val_end],
+    'test': all_images[val_end:]
+}
+
+label_src_dir = Path('image_labels')
+
+# Move/copy images and labels to their split folders with tqdm
+for split, files in splits.items():
+    print(f"Processing split '{split}' with {len(files)} images...")
+    for img_path in tqdm(files, desc=f"Copying {split}", unit="img"):
+        # Copy image
+        dst_img_path = dataset_dir / 'images' / split / img_path.name
+        shutil.copy2(img_path, dst_img_path)
+
+        # Copy label if exists
+        stem = img_path.stem
+        for ext in label_exts:
+            label_file = label_src_dir / f"{stem}{ext}"
+            if label_file.exists():
+                dst_label_path = dataset_dir / 'labels' / split / label_file.name
+                shutil.copy2(label_file, dst_label_path)
+                break
+
+print("Done!")

comic_panel_extractor/extractor_server.py

@@ -0,0 +1,106 @@
+from fastapi import APIRouter, File, UploadFile, HTTPException
+from fastapi.responses import FileResponse
+import os
+from .config import Config
+from .main import ComicPanelExtractor
+import traceback
+from pathlib import Path
+import shutil
+import time
+import mimetypes
+
+current_path = os.path.abspath(os.path.join(os.path.dirname(__file__)))
+
+base_output_folder = "api_outputs"
+output_folder = os.path.join(current_path, base_output_folder)
+
+app = APIRouter()
+
+def delete_folder_if_old_or_empty(parent_folder, age_days=1):
+    """
+    Delete subfolders inside `parent_folder` if they are empty
+    or older than `age_days`.
+
+    Args:
+        parent_folder (str): Path to the parent directory.
+        age_days (int): Number of days before a folder is considered old.
+    """
+    try:
+        current_time = time.time()
+        age_seconds = age_days * 24 * 60 * 60
+
+        # Loop through all items in the parent folder
+        for entry in os.scandir(parent_folder):
+            if entry.is_dir():
+                folder_path = entry.path
+                # Check if folder is empty
+                if not os.listdir(folder_path):
+                    shutil.rmtree(folder_path)
+                    print(f"Deleted empty folder: {folder_path}")
+                    continue
+
+                # Check if folder is older than age_days
+                folder_mtime = os.path.getmtime(folder_path)
+                if current_time - folder_mtime > age_seconds:
+                    shutil.rmtree(folder_path)
+                    print(f"Deleted old folder (>{age_days} day): {folder_path}")
+
+    except Exception as e:
+        print(f"Error cleaning subfolders in {parent_folder}: {e}")
+
+@app.post("/api/extract/convert")
+async def convert_comic(file: UploadFile = File(...)):
+    """
+    Upload a comic page and extract panels
+    """
+    # Generate unique filename
+    file_id = os.path.splitext(file.filename)[0]
+    specific_output_folder = f'{output_folder}/{file_id}'
+
+    shutil.rmtree(specific_output_folder, ignore_errors=True)
+    Path(specific_output_folder).mkdir(exist_ok=True)
+    file_path = f'{specific_output_folder}/{file.filename}'
+    
+    # Save uploaded file
+    try:
+        content = await file.read()
+        with open(file_path, "wb") as f:
+            f.write(content)
+
+        # 🔍 DEBUG: Log file info
+        print("======== DEBUG: Upload Info ========")
+        print(f"Working Dir: {os.getcwd()}")
+        print(f"Saved file path: {file_path}")
+        print(f"Output folder: {specific_output_folder}")
+        print(f"List of files in output folder: {os.listdir(specific_output_folder)}")
+        print("====================================")
+
+        # Extract panels
+        config = Config()
+        config.input_path = file_path
+        config.output_folder = specific_output_folder
+
+        print(f"[DEBUG] Setting config.input_path to: {config.input_path}")
+        print(f"[DEBUG] Setting config.output_folder to: {config.output_folder}")
+
+        _, _, all_panel_path = ComicPanelExtractor(config, reset=False).extract_panels_from_comic()
+        all_panel_path = [f'/api/extract/{base_output_folder}/{file_id}/{os.path.basename(path)}' for path in all_panel_path]
+
+        return {
+            "success": True,
+            "message": f"Extracted {len(all_panel_path)} panels",
+            "panels": all_panel_path
+        }
+        
+    except Exception as e:
+        print(f"Error processing image: {str(e)} {traceback.format_exc()}")
+        raise HTTPException(status_code=500, detail=f"Error processing image: {str(e)} {traceback.format_exc()}")
+
+@app.get("/api/extract/api_outputs/{folder}/{filename}")
+async def get_output_file(folder: str, filename: str):
+    file_path = f'{output_folder}/{folder}/{filename}'
+    if not os.path.exists(file_path):
+        raise HTTPException(status_code=404, detail="File not found")
+
+    mime_type, _ = mimetypes.guess_type(file_path)
+    return FileResponse(file_path, media_type=mime_type, filename=filename)

comic_panel_extractor/inference.py

@@ -0,0 +1,53 @@
+# inference.py
+from yolo_manager import YOLOManager
+from utils import Config, get_abs_path, get_image_paths
+import os
+
+def run_inference(weights_path: str, images_dirs, output_dir: str = 'temp_dir') -> None:
+    """
+    Run inference on images using trained model.
+    
+    Args:
+        weights_path: Path to model weights
+        images_dirs: Directory or list of directories containing images
+        output_dir: Directory to save annotated results
+    """
+    try:
+        # Validate weights file
+        weights_path = get_abs_path(weights_path)
+        if not os.path.isfile(weights_path):
+            raise FileNotFoundError(f"❌ Weights file not found: {weights_path}")
+        
+        # Get image paths
+        image_paths = get_image_paths(images_dirs)
+        if not image_paths:
+            raise ValueError("❌ No images found in the provided directories.")
+        
+        print(f"🔍 Found {len(image_paths)} images for inference")
+        
+        # Initialize YOLO manager and load model
+        yolo_manager = YOLOManager()
+        yolo_manager.load_model(weights_path)
+        
+        # Run inference
+        yolo_manager.annotate_images(image_paths, output_dir)
+        
+        print("🎉 Inference completed successfully!")
+        
+    except Exception as e:
+        print(f"❌ Inference failed: {str(e)}")
+        raise
+
+def main():
+    """Main inference function."""
+    weights_path = f'{Config.YOLO_MODEL_NAME}.pt'
+    images_dirs = [
+        './dataset/images/train',
+        './dataset/images/val', 
+        './dataset/images/test'
+    ]
+    
+    run_inference(weights_path, images_dirs, './temp_dir')
+
+if __name__ == "__main__":
+    main()

comic_panel_extractor/server.py

@@ -1,33 +1,24 @@
-from fastapi import FastAPI, Request, File, UploadFile, HTTPException, Form, Query
-from fastapi.responses import HTMLResponse, FileResponse
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from .extractor_server import app as extractor_app, delete_folder_if_old_or_empty, output_folder
+from .annorator_server import app as annotator_app
+import os
+
+from fastapi import Request
+from fastapi.responses import HTMLResponse
 from fastapi.staticfiles import StaticFiles
-import cv2
-import numpy as np
-from PIL import Image
-import io
-import base64
 import os
-from typing import List
-import uuid
-from .config import Config
-from .main import ComicPanelExtractor
 from jinja2 import Environment, FileSystemLoader, select_autoescape
-import traceback
-from pathlib import Path
-import shutil
-import time
-import mimetypes
 
-current_path = os.path.abspath(os.path.join(os.path.dirname(__file__)))
+fast_api = FastAPI()
 
-base_output_folder = "api_outputs"
-static_folder = "./static"
-output_folder = os.path.join(current_path, base_output_folder)
-static_folder = os.path.join(current_path, static_folder)
+# Mount static files ONCE
+current_path = os.path.abspath(os.path.dirname(__file__))
+static_folder = os.path.join(current_path, "static")
+fast_api.mount("/static", StaticFiles(directory=static_folder), name="static")
 
-# Create directories for uploads and outputs
-os.makedirs(output_folder, exist_ok=True)
-os.makedirs(static_folder, exist_ok=True)
+fast_api.include_router(extractor_app)
+fast_api.include_router(annotator_app)
 
 # Templates
 template_dirs = [static_folder]
@@ -36,112 +27,28 @@ env = Environment(
     autoescape=select_autoescape(['html', 'xml'])
 )
 
-app = FastAPI(title="Comic Panel Extractor", version="1.0.0")
-
-# Mount static files
-app.mount(static_folder, StaticFiles(directory=static_folder), name="static")
-# app.mount(output_folder, StaticFiles(directory=output_folder), name="api_outputs")
-
-def delete_folder_if_old_or_empty(parent_folder, age_days=1):
-    """
-    Delete subfolders inside `parent_folder` if they are empty
-    or older than `age_days`.
-
-    Args:
-        parent_folder (str): Path to the parent directory.
-        age_days (int): Number of days before a folder is considered old.
-    """
-    try:
-        current_time = time.time()
-        age_seconds = age_days * 24 * 60 * 60
-
-        # Loop through all items in the parent folder
-        for entry in os.scandir(parent_folder):
-            if entry.is_dir():
-                folder_path = entry.path
-                # Check if folder is empty
-                if not os.listdir(folder_path):
-                    shutil.rmtree(folder_path)
-                    print(f"Deleted empty folder: {folder_path}")
-                    continue
-
-                # Check if folder is older than age_days
-                folder_mtime = os.path.getmtime(folder_path)
-                if current_time - folder_mtime > age_seconds:
-                    shutil.rmtree(folder_path)
-                    print(f"Deleted old folder (>{age_days} day): {folder_path}")
-
-    except Exception as e:
-        print(f"Error cleaning subfolders in {parent_folder}: {e}")
-
 # Routes
-@app.get("/", response_class=HTMLResponse)
+@fast_api.get("/", response_class=HTMLResponse)
 async def index(request: Request):
     delete_folder_if_old_or_empty(output_folder)
     template = env.get_template("index.html")  # From tool/
     html_content = template.render(request=request)
     return HTMLResponse(content=html_content)
 
-@app.post("/convert")
-async def convert_comic(file: UploadFile = File(...)):
-    """
-    Upload a comic page and extract panels
-    """
-    # Generate unique filename
-    file_id = os.path.splitext(file.filename)[0]
-    specific_output_folder = f'{output_folder}/{file_id}'
-
-    shutil.rmtree(specific_output_folder, ignore_errors=True)
-    Path(specific_output_folder).mkdir(exist_ok=True)
-    file_path = f'{specific_output_folder}/{file.filename}'
-    
-    # Save uploaded file
-    try:
-        content = await file.read()
-        with open(file_path, "wb") as f:
-            f.write(content)
-
-        # 🔍 DEBUG: Log file info
-        print("======== DEBUG: Upload Info ========")
-        print(f"Working Dir: {os.getcwd()}")
-        print(f"Saved file path: {file_path}")
-        print(f"Output folder: {specific_output_folder}")
-        print(f"List of files in output folder: {os.listdir(specific_output_folder)}")
-        print("====================================")
-
-        # Extract panels
-        config = Config()
-        config.input_path = file_path
-        config.output_folder = specific_output_folder
-
-        print(f"[DEBUG] Setting config.input_path to: {config.input_path}")
-        print(f"[DEBUG] Setting config.output_folder to: {config.output_folder}")
-
-        _, _, all_panel_path = ComicPanelExtractor(config, reset=False).extract_panels_from_comic()
-        all_panel_path = [f'/{base_output_folder}/{file_id}/{os.path.basename(path)}' for path in all_panel_path]
-
-        return {
-            "success": True,
-            "message": f"Extracted {len(all_panel_path)} panels",
-            "panels": all_panel_path
-        }
-        
-    except Exception as e:
-        print(f"Error processing image: {str(e)} {traceback.format_exc()}")
-        raise HTTPException(status_code=500, detail=f"Error processing image: {str(e)} {traceback.format_exc()}")
-
-@app.get("/api_outputs/{folder}/{filename}")
-async def get_output_file(folder: str, filename: str):
-    file_path = f'{output_folder}/{folder}/{filename}'
-    if not os.path.exists(file_path):
-        raise HTTPException(status_code=404, detail="File not found")
-
-    mime_type, _ = mimetypes.guess_type(file_path)
-    return FileResponse(file_path, media_type=mime_type, filename=filename)
+@fast_api.get("/annotate", response_class=HTMLResponse)
+async def index(request: Request):
+    template = env.get_template("annotator.html")  # From tool/
+    html_content = template.render(request=request)
+    return HTMLResponse(content=html_content)
 
 def main():
     import uvicorn
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+    uvicorn.run(
+        fast_api,
+        host="0.0.0.0",  # Or "0.0.0.0" to allow access from other machines
+        port=7860,         # Change to any available port, e.g., 8080
+        # reload=True        # Enables auto-reload for development (like --reload in CLI)
+    )
 
 if __name__ == "__main__":
-    main()
+    main

comic_panel_extractor/static/annotator.html

@@ -0,0 +1,1388 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>📸 Comic Panel Annotator</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #f8fafc;
+            min-height: 100vh;
+            color: #1a202c;
+        }
+
+        /* Top Navigation Bar */
+        .top-nav {
+            background: white;
+            border-bottom: 1px solid #e2e8f0;
+            padding: 16px 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+
+        .logo {
+            font-size: 20px;
+            font-weight: 700;
+            color: #2d3748;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .nav-actions {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
+
+        /* Main Layout */
+        .main-container {
+            display: flex;
+            height: calc(100vh - 72px);
+            overflow: hidden;
+        }
+
+        /* Left Sidebar */
+        .sidebar {
+            width: 320px;
+            background: white;
+            border-right: 1px solid #e2e8f0;
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+        }
+
+        .sidebar-section {
+            padding: 20px;
+            border-bottom: 1px solid #f1f5f9;
+        }
+
+        .sidebar-section:last-child {
+            border-bottom: none;
+        }
+
+        .section-title {
+            font-size: 14px;
+            font-weight: 600;
+            color: #4a5568;
+            margin-bottom: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        /* Canvas Area */
+        .canvas-area {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background: #f8fafc;
+            position: relative;
+        }
+
+        .canvas-toolbar {
+            background: white;
+            border-bottom: 1px solid #e2e8f0;
+            padding: 12px 20px;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .canvas-container {
+            flex: 1;
+            overflow: auto;
+            display: flex;
+            /* justify-content: center; */
+            align-items: flex-start;
+            padding: 20px;
+            width: fit-content;
+        }
+
+        canvas {
+            border: 2px solid #e2e8f0;
+            border-radius: 8px;
+            cursor: crosshair;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            background: white;
+            width: 100%;
+        }
+
+        canvas:hover {
+            border-color: #4299e1;
+        }
+
+        .canvas-placeholder {
+            text-align: center;
+            padding: 60px 40px;
+            color: #a0aec0;
+            background: white;
+            border-radius: 12px;
+            border: 2px dashed #e2e8f0;
+        }
+
+        /* Form Elements */
+        /* .form-field {
+            margin-bottom: 16px;
+        } */
+
+        .form-label {
+            display: block;
+            font-size: 13px;
+            font-weight: 500;
+            color: #4a5568;
+            margin-bottom: 6px;
+        }
+
+        .form-select, .form-input {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid #d1d5db;
+            border-radius: 6px;
+            font-size: 14px;
+            background: white;
+            transition: all 0.2s;
+        }
+
+        .form-select:focus, .form-input:focus {
+            outline: none;
+            border-color: #4299e1;
+            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
+        }
+
+        /* Buttons */
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 8px 16px;
+            border: none;
+            border-radius: 6px;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            text-decoration: none;
+            justify-content: center;
+        }
+
+        .btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .btn-primary {
+            background: #4299e1;
+            color: white;
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            background: #3182ce;
+        }
+
+        .btn-secondary {
+            background: #718096;
+            color: white;
+        }
+
+        .btn-secondary:hover:not(:disabled) {
+            background: #4a5568;
+        }
+
+        .btn-success {
+            background: #48bb78;
+            color: white;
+        }
+
+        .btn-success:hover:not(:disabled) {
+            background: #38a169;
+        }
+
+        .btn-danger {
+            background: #f56565;
+            color: white;
+        }
+
+        .btn-danger:hover:not(:disabled) {
+            background: #e53e3e;
+        }
+
+        .btn-ghost {
+            background: transparent;
+            color: #4a5568;
+            border: 1px solid #e2e8f0;
+        }
+
+        .btn-ghost:hover:not(:disabled) {
+            background: #f7fafc;
+            border-color: #cbd5e0;
+        }
+
+        .btn-sm {
+            padding: 6px 12px;
+            font-size: 12px;
+        }
+
+        .btn-block {
+            width: 100%;
+        }
+
+        /* Navigation Controls */
+        .image-nav {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: #f7fafc;
+            padding: 12px;
+            border-radius: 8px;
+        }
+
+        .nav-counter {
+            font-size: 13px;
+            font-weight: 500;
+            color: #4a5568;
+            min-width: 80px;
+            text-align: center;
+            word-break: break-word;
+        }
+
+        /* Progress Indicator */
+        .progress-section {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+        }
+
+        .progress-stat {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            font-size: 14px;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 6px;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-top: 12px;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: #48bb78;
+            transition: width 0.3s ease;
+        }
+
+        /* Info Cards */
+        .info-card {
+            background: #f7fafc;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            padding: 16px;
+        }
+
+        .info-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 0;
+            border-bottom: 1px solid #e2e8f0;
+        }
+
+        .info-row:last-child {
+            border-bottom: none;
+        }
+
+        .info-label {
+            font-size: 13px;
+            color: #4a5568;
+            font-weight: 500;
+        }
+
+        .info-value {
+            font-size: 13px;
+            color: #1a202c;
+            font-weight: 600;
+        }
+
+        /* File Upload */
+        .file-upload {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .file-upload input[type=file] {
+            position: absolute;
+            opacity: 0;
+            left: -9999px;
+        }
+
+        .file-upload-label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 32px 20px;
+            border: 2px dashed #cbd5e0;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.2s;
+            color: #4a5568;
+        }
+
+        .file-upload-label:hover {
+            border-color: #4299e1;
+            background: #f7fafc;
+        }
+
+        /* Alerts */
+        .alerts {
+            position: fixed;
+            top: 80px;
+            right: 20px;
+            z-index: 1000;
+        }
+
+        .alert {
+            padding: 12px 16px;
+            border-radius: 6px;
+            margin-bottom: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            animation: slideIn 0.3s ease;
+        }
+
+        .alert-success {
+            background: #c6f6d5;
+            color: #22543d;
+            border: 1px solid #9ae6b4;
+        }
+
+        .alert-error {
+            background: #fed7d7;
+            color: #742a2a;
+            border: 1px solid #fc8181;
+        }
+
+        .alert-info {
+            background: #bee3f8;
+            color: #2a4365;
+            border: 1px solid #90cdf4;
+        }
+
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+
+        /* Quick Help */
+        .help-section {
+            background: #fffbf0;
+            border: 1px solid #fbd38d;
+            border-radius: 8px;
+            padding: 16px;
+        }
+
+        .help-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+            font-size: 12px;
+            color: #744210;
+        }
+
+        .help-item:last-child {
+            margin-bottom: 0;
+        }
+
+        .kbd {
+            background: #2d3748;
+            color: white;
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-family: monospace;
+            font-size: 11px;
+        }
+
+        /* Responsive */
+        @media (max-width: 1024px) {
+            .sidebar {
+                width: 280px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .main-container {
+                flex-direction: column;
+            }
+            
+            .sidebar {
+                width: 100%;
+                height: auto;
+                max-height: 300px;
+            }
+            
+            .canvas-area {
+                height: calc(100vh - 372px);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Top Navigation -->
+    <div class="top-nav">
+        <div class="logo">
+            📸 Comic Panel Annotator
+        </div>
+        <div class="nav-actions">
+            <button class="btn btn-success btn-sm" id="saveBtn">
+                💾 Save
+            </button>
+            <button class="btn btn-secondary btn-sm" id="undoBtn">
+                ↩️ Undo
+            </button>
+            <button class="btn btn-danger btn-sm" id="clearBtn">
+                🗑️ Clear All
+            </button>
+        </div>
+    </div>
+
+    <div class="main-container">
+        <!-- Left Sidebar -->
+        <div class="sidebar">
+            <!-- Image Selection -->
+            <div class="sidebar-section">
+                <div class="section-title">Image Selection</div>
+                
+                <div class="image-nav">
+                    <button class="btn btn-ghost btn-sm" id="prevBtn" disabled>
+                        ← Prev
+                    </button>
+                    <!-- <div class="nav-counter" id="currentImageDisplay">
+                        No image
+                    </div> -->
+
+                    <div class="form-field">
+                        <select class="form-select" id="imageSelect">
+                            <option value="">Choose an image...</option>
+                        </select>
+                    </div>
+                    <button class="btn btn-ghost btn-sm" id="nextBtn" disabled>
+                        Next →
+                    </button>
+                </div>
+
+                <div class="file-upload">
+                    <input type="file" id="uploadFile" accept="image/*">
+                    <label for="uploadFile" class="file-upload-label">
+                        📤 Drop or click to upload
+                    </label>
+                </div>
+            </div>
+
+            <!-- Progress -->
+            <div class="sidebar-section">
+                <div class="progress-section">
+                    <h3 style="margin-bottom: 12px; font-size: 16px;">Progress</h3>
+                    <div class="progress-stat">
+                        <span>Annotated</span>
+                        <span><span id="annotatedImages">0</span>/<span id="totalImages">0</span></span>
+                    </div>
+                    <div class="progress-bar">
+                        <div class="progress-fill" id="progressFill" style="width: 0%"></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Current Image Info -->
+            <div class="sidebar-section" id="currentImageInfo" style="display: none;">
+                <div class="section-title">Current Image</div>
+                <div class="info-card">
+                    <div class="info-row">
+                        <span class="info-label">Boxes</span>
+                        <span class="info-value" id="boxCount">0</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Size</span>
+                        <span class="info-value" id="imageSize">-</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Selected</span>
+                        <span class="info-value" id="selectedBoxInfo">None</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Quick Actions -->
+            <div class="sidebar-section">
+                <div class="section-title">Actions</div>
+                <button class="btn btn-primary btn-block" id="reloadBtn">
+                    🔄 Reload Annotations
+                </button>
+                <button class="btn btn-secondary btn-block" id="downloadBtn" style="display: none; margin-top: 8px;">
+                    📥 Download
+                </button>
+            </div>
+
+            <!-- Quick Help -->
+            <div class="sidebar-section">
+                <div class="section-title">Quick Help</div>
+                <div class="help-section">
+                    <div class="help-item">
+                        <strong>Draw:</strong> Click & drag on image
+                    </div>
+                    <div class="help-item">
+                        <strong>Move:</strong> <span class="kbd">↑↓←→</span> keys
+                    </div>
+                    <div class="help-item">
+                        <strong>Resize:</strong> <span class="kbd">Shift</span> + arrows
+                    </div>
+                    <div class="help-item">
+                        <strong>Delete:</strong> <span class="kbd">Del</span> key
+                    </div>
+                    <div class="help-item">
+                        <strong>Colors:</strong> 🟢 Saved, 🔴 New, 🔵 Selected
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Canvas Area -->
+        <div class="canvas-area">
+            <div class="canvas-toolbar">
+                <span id="file_name" style="font-size: 13px; color: #4a5568;">
+                    Click and drag to create annotation boxes • Select boxes to move or resize
+                </span>
+            </div>
+            
+            <div class="canvas-container">
+                <canvas id="annotationCanvas" style="display: none;"></canvas>
+                <div id="canvasPlaceholder" class="canvas-placeholder">
+                    <h3 style="margin-bottom: 8px;">Select an image to start annotating</h3>
+                    <p>Choose from the dropdown or upload a new image</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Alerts Container -->
+    <div class="alerts" id="alerts"></div>
+
+    <script>
+        class ComicAnnotator {
+            constructor() {
+                this.canvas = document.getElementById('annotationCanvas');
+                this.ctx = this.canvas.getContext('2d');
+                this.boxes = [];
+                this.images = [];
+                this.currentImageIndex = -1;
+                this.currentImage = null;
+                this.backgroundImage = null;
+                this.originalWidth = 0;
+                this.originalHeight = 0;
+
+                // Drawing state
+                this.isDrawing = false;
+                this.startX = 0;
+                this.startY = 0;
+                this.currentBox = null;
+
+                // Box editing state
+                this.selectedBoxIndex = -1;
+                this.isDragging = false;
+                this.isResizing = false;
+                this.dragStartX = 0;
+                this.dragStartY = 0;
+                this.resizeHandle = null;
+                this.lastMouseX = 0;
+                this.lastMouseY = 0;
+
+                this.init();
+            }
+
+            init() {
+                this.setupEventListeners();
+                this.loadImages();
+            }
+
+            setupEventListeners() {
+                // Image selection
+                document.getElementById('imageSelect').addEventListener('change', (e) => {
+                    if (e.target.value) {
+                        const index = this.images.findIndex(img => img.name === e.target.value);
+                        if (index >= 0) {
+                            this.currentImageIndex = index;
+                            this.loadImage(e.target.value);
+                        }
+                    }
+                });
+
+                // Navigation buttons
+                document.getElementById('prevBtn').addEventListener('click', () => this.navigatePrevious());
+                document.getElementById('nextBtn').addEventListener('click', () => this.navigateNext());
+
+                // File upload
+                document.getElementById('uploadFile').addEventListener('change', (e) => {
+                    if (e.target.files[0]) {
+                        this.uploadImage(e.target.files[0]);
+                    }
+                });
+
+                // Action buttons
+                document.getElementById('saveBtn').addEventListener('click', () => this.saveAnnotations());
+                document.getElementById('undoBtn').addEventListener('click', () => this.undoLastBox());
+                document.getElementById('clearBtn').addEventListener('click', () => this.clearAllBoxes());
+                document.getElementById('reloadBtn').addEventListener('click', () => this.reloadAnnotations());
+                document.getElementById('downloadBtn').addEventListener('click', () => this.downloadAnnotations());
+
+                // Canvas events
+                this.canvas.addEventListener('mousedown', (e) => this.onMouseDown(e));
+                this.canvas.addEventListener('mousemove', (e) => this.onMouseMove(e));
+                this.canvas.addEventListener('mouseup', () => this.onMouseUp());
+                this.canvas.addEventListener('mouseleave', () => this.onMouseUp());
+
+                // Keyboard events
+                document.addEventListener('keydown', (e) => this.onKeyDown(e));
+
+                // Make canvas focusable for keyboard events
+                this.canvas.tabIndex = 0;
+            }
+
+            async loadImages() {
+                try {
+                    const response = await fetch('/api/annotate/images');
+                    this.images = await response.json();
+
+                    const select = document.getElementById('imageSelect');
+                    select.innerHTML = '<option value="">Choose an image...</option>';
+
+                    this.images.forEach(img => {
+                        const option = document.createElement('option');
+                        option.value = img.name;
+                        option.textContent = `${img.name} ${img.has_annotations ? '✓' : ''}`;
+                        select.appendChild(option);
+                    });
+
+                    // Update progress
+                    const annotated = this.images.filter(img => img.has_annotations).length;
+                    document.getElementById('totalImages').textContent = this.images.length;
+                    document.getElementById('annotatedImages').textContent = annotated;
+                    const progress = this.images.length > 0 ? (annotated / this.images.length) * 100 : 0;
+                    document.getElementById('progressFill').style.width = progress + '%';
+
+                    this.updateNavigationButtons();
+
+                } catch (error) {
+                    this.showAlert('Error loading images: ' + error.message, 'error');
+                }
+            }
+
+            updateNavigationButtons() {
+                const prevBtn = document.getElementById('prevBtn');
+                const nextBtn = document.getElementById('nextBtn');
+
+                prevBtn.disabled = this.currentImageIndex <= 0;
+                nextBtn.disabled = this.currentImageIndex >= this.images.length - 1;
+
+                // if (this.currentImageIndex >= 0) {
+                //     const currentImageName = this.images[this.currentImageIndex].name;
+                //     document.getElementById('currentImageDisplay').textContent = `${this.currentImageIndex + 1}/${this.images.length}: ${currentImageName}`;
+                // } else {
+                //     document.getElementById('currentImageDisplay').textContent = 'No image selected';
+                // }
+            }
+
+            navigatePrevious() {
+                if (this.currentImageIndex > 0) {
+                    this.currentImageIndex--;
+                    const imageName = this.images[this.currentImageIndex].name;
+                    document.getElementById('imageSelect').value = imageName;
+                    document.getElementById('file_name').innerText = imageName;
+                    this.loadImage(imageName);
+                }
+            }
+
+            navigateNext() {
+                if (this.currentImageIndex < this.images.length - 1) {
+                    this.currentImageIndex++;
+                    const imageName = this.images[this.currentImageIndex].name;
+                    document.getElementById('imageSelect').value = imageName;
+                    document.getElementById('file_name').innerText = imageName;
+                    this.loadImage(imageName);
+                }
+            }
+
+            async loadImage(imageName) {
+                try {
+                    // Load image data
+                    const imageResponse = await fetch(`/api/annotate/image/${encodeURIComponent(imageName)}`);
+                    const imageData = await imageResponse.json();
+
+                    // Load annotations
+                    const annotationsResponse = await fetch(`/api/annotate/annotations/${encodeURIComponent(imageName)}`);
+                    const annotationsData = await annotationsResponse.json();
+
+                    this.currentImage = imageName;
+                    this.originalWidth = imageData.width;
+                    this.originalHeight = imageData.height;
+                    this.boxes = annotationsData.boxes || [];
+                    this.selectedBoxIndex = -1;
+
+                    // Load and draw image
+                    const img = new Image();
+                    img.onload = () => {
+                        this.backgroundImage = img;
+
+                        // Set canvas size to match image
+                        this.canvas.width = img.width;
+                        this.canvas.height = img.height;
+
+                        this.drawCanvas();
+                        document.getElementById('canvasPlaceholder').style.display = 'none';
+                        this.canvas.style.display = 'block';
+                        document.getElementById('downloadBtn').style.display = 'block';
+                    };
+                    img.src = imageData.image_data;
+
+                    // Update info panel
+                    document.getElementById('currentImageInfo').style.display = 'block';
+                    document.getElementById('boxCount').textContent = this.boxes.length;
+                    document.getElementById('imageSize').textContent = `${imageData.width}×${imageData.height}`;
+                    document.getElementById('selectedBoxInfo').textContent = 'None';
+
+                    this.updateNavigationButtons();
+
+                } catch (error) {
+                    this.showAlert('Error loading image: ' + error.message, 'error');
+                }
+            }
+
+            drawCanvas() {
+                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+                // Draw background image
+                if (this.backgroundImage) {
+                    this.ctx.drawImage(this.backgroundImage, 0, 0);
+                }
+
+                // Draw existing boxes
+                this.boxes.forEach((box, index) => {
+                    let strokeColor = '#00ff00';
+                    let fillColor = 'rgba(0, 255, 0, 0.2)';
+
+                    if (index === this.selectedBoxIndex) {
+                        strokeColor = '#0066ff';
+                        fillColor = 'rgba(0, 102, 255, 0.3)';
+                    } else if (!box.saved) {
+                        strokeColor = '#ff0000';
+                        fillColor = 'rgba(255, 0, 0, 0.2)';
+                    }
+
+                    this.drawBox(box.left, box.top, box.width, box.height, strokeColor, fillColor);
+
+                    // Draw resize handles for selected box
+                    if (index === this.selectedBoxIndex) {
+                        this.drawResizeHandles(box);
+                    }
+                });
+
+                // Draw current box being drawn
+                if (this.currentBox) {
+                    this.drawBox(this.currentBox.left, this.currentBox.top,
+                        this.currentBox.width, this.currentBox.height, '#ff0000', 'rgba(255, 0, 0, 0.3)');
+                }
+            }
+
+            drawBox(x, y, width, height, strokeColor, fillColor) {
+                this.ctx.strokeStyle = strokeColor;
+                this.ctx.fillStyle = fillColor;
+                this.ctx.lineWidth = 3;
+                this.ctx.fillRect(x, y, width, height);
+                this.ctx.strokeRect(x, y, width, height);
+            }
+
+            drawResizeHandles(box) {
+                const handleSize = 10;
+                const handles = [
+                    { x: box.left - handleSize / 2, y: box.top - handleSize / 2, cursor: 'nw-resize' },
+                    { x: box.left + box.width - handleSize / 2, y: box.top - handleSize / 2, cursor: 'ne-resize' },
+                    { x: box.left - handleSize / 2, y: box.top + box.height - handleSize / 2, cursor: 'sw-resize' },
+                    { x: box.left + box.width - handleSize / 2, y: box.top + box.height - handleSize / 2, cursor: 'se-resize' },
+                    { x: box.left + box.width / 2 - handleSize / 2, y: box.top - handleSize / 2, cursor: 'n-resize' },
+                    { x: box.left + box.width / 2 - handleSize / 2, y: box.top + box.height - handleSize / 2, cursor: 's-resize' },
+                    { x: box.left - handleSize / 2, y: box.top + box.height / 2 - handleSize / 2, cursor: 'w-resize' },
+                    { x: box.left + box.width - handleSize / 2, y: box.top + box.height / 2 - handleSize / 2, cursor: 'e-resize' }
+                ];
+
+                this.ctx.fillStyle = '#0066ff';
+                this.ctx.strokeStyle = '#ffffff';
+                this.ctx.lineWidth = 4;
+
+                handles.forEach(handle => {
+                    this.ctx.fillRect(handle.x, handle.y, handleSize, handleSize);
+                    this.ctx.strokeRect(handle.x, handle.y, handleSize, handleSize);
+                });
+            }
+
+            onMouseDown(e) {
+                if (!this.currentImage) return;
+
+                const pos = this.getMousePos(e);
+                this.lastMouseX = pos.x;
+                this.lastMouseY = pos.y;
+
+                // Check if clicking on a resize handle
+                if (this.selectedBoxIndex >= 0) {
+                    const handle = this.getResizeHandle(pos.x, pos.y);
+                    if (handle) {
+                        this.isResizing = true;
+                        this.resizeHandle = handle;
+                        this.canvas.style.cursor = handle.cursor;
+                        return;
+                    }
+                }
+
+                // Check if clicking on an existing box
+                const clickedBoxIndex = this.getBoxAtPosition(pos.x, pos.y);
+                if (clickedBoxIndex >= 0) {
+                    this.selectedBoxIndex = clickedBoxIndex;
+                    this.isDragging = true;
+                    this.dragStartX = pos.x;
+                    this.dragStartY = pos.y;
+                    this.canvas.style.cursor = 'move';
+                    this.updateSelectedBoxInfo();
+                    this.drawCanvas();
+                    return;
+                }
+
+                // Start drawing new box
+                this.selectedBoxIndex = -1;
+                this.startX = pos.x;
+                this.startY = pos.y;
+                this.isDrawing = true;
+                this.currentBox = { left: this.startX, top: this.startY, width: 0, height: 0 };
+                this.updateSelectedBoxInfo();
+            }
+
+            onMouseMove(e) {
+                if (!this.currentImage) return;
+
+                const pos = this.getMousePos(e);
+
+                if (this.isResizing && this.selectedBoxIndex >= 0) {
+                    this.resizeBox(pos.x, pos.y);
+                    this.drawCanvas();
+                } else if (this.isDragging && this.selectedBoxIndex >= 0) {
+                    const deltaX = pos.x - this.lastMouseX;
+                    const deltaY = pos.y - this.lastMouseY;
+                    this.moveBox(this.selectedBoxIndex, deltaX, deltaY);
+                    this.lastMouseX = pos.x;
+                    this.lastMouseY = pos.y;
+                    this.drawCanvas();
+                } else if (this.isDrawing) {
+                    this.currentBox.width = pos.x - this.startX;
+                    this.currentBox.height = pos.y - this.startY;
+                    this.drawCanvas();
+                } else {
+                    // Update cursor based on what's under mouse
+                    this.updateCursor(pos.x, pos.y);
+                }
+            }
+
+            onMouseUp() {
+                if (this.isDrawing && this.currentBox) {
+                    // Only add box if it has meaningful size
+                    if (Math.abs(this.currentBox.width) > 10 && Math.abs(this.currentBox.height) > 10) {
+                        const box = {
+                            left: Math.min(this.startX, this.startX + this.currentBox.width),
+                            top: Math.min(this.startY, this.startY + this.currentBox.height),
+                            width: Math.abs(this.currentBox.width),
+                            height: Math.abs(this.currentBox.height),
+                            type: 'rect',
+                            stroke: '#ff0000',
+                            strokeWidth: 3,
+                            fill: 'rgba(255, 0, 0, 0.3)',
+                            saved: false
+                        };
+
+                        this.boxes.push(box);
+                        this.selectedBoxIndex = this.boxes.length - 1;
+                        document.getElementById('boxCount').textContent = this.boxes.length;
+                        this.updateSelectedBoxInfo();
+                    }
+                    this.currentBox = null;
+                }
+
+                this.isDrawing = false;
+                this.isDragging = false;
+                this.isResizing = false;
+                this.resizeHandle = null;
+                this.canvas.style.cursor = 'crosshair';
+                this.drawCanvas();
+            }
+
+            updateCursor(x, y) {
+                if (this.selectedBoxIndex >= 0) {
+                    const handle = this.getResizeHandle(x, y);
+                    if (handle) {
+                        this.canvas.style.cursor = handle.cursor;
+                        return;
+                    }
+                }
+
+                const boxIndex = this.getBoxAtPosition(x, y);
+                if (boxIndex >= 0) {
+                    this.canvas.style.cursor = 'pointer';
+                } else {
+                    this.canvas.style.cursor = 'crosshair';
+                }
+            }
+
+            getResizeHandle(x, y) {
+                if (this.selectedBoxIndex < 0) return null;
+
+                const box = this.boxes[this.selectedBoxIndex];
+                const handleSize = 8;
+                const tolerance = 5;
+
+                const handles = [
+                    { x: box.left, y: box.top, cursor: 'nw-resize', type: 'nw' },
+                    { x: box.left + box.width, y: box.top, cursor: 'ne-resize', type: 'ne' },
+                    { x: box.left, y: box.top + box.height, cursor: 'sw-resize', type: 'sw' },
+                    { x: box.left + box.width, y: box.top + box.height, cursor: 'se-resize', type: 'se' },
+                    { x: box.left + box.width / 2, y: box.top, cursor: 'n-resize', type: 'n' },
+                    { x: box.left + box.width / 2, y: box.top + box.height, cursor: 's-resize', type: 's' },
+                    { x: box.left, y: box.top + box.height / 2, cursor: 'w-resize', type: 'w' },
+                    { x: box.left + box.width, y: box.top + box.height / 2, cursor: 'e-resize', type: 'e' }
+                ];
+
+                for (let handle of handles) {
+                    if (Math.abs(x - handle.x) <= tolerance && Math.abs(y - handle.y) <= tolerance) {
+                        return handle;
+                    }
+                }
+                return null;
+            }
+
+            getBoxAtPosition(x, y) {
+                for (let i = this.boxes.length - 1; i >= 0; i--) {
+                    const box = this.boxes[i];
+                    if (x >= box.left && x <= box.left + box.width &&
+                        y >= box.top && y <= box.top + box.height) {
+                        return i;
+                    }
+                }
+                return -1;
+            }
+
+            resizeBox(x, y) {
+                if (this.selectedBoxIndex < 0 || !this.resizeHandle) return;
+
+                const box = this.boxes[this.selectedBoxIndex];
+                const handle = this.resizeHandle;
+
+                switch (handle.type) {
+                    case 'nw':
+                        const newWidth = box.width + (box.left - x);
+                        const newHeight = box.height + (box.top - y);
+                        if (newWidth > 10 && newHeight > 10) {
+                            box.width = newWidth;
+                            box.height = newHeight;
+                            box.left = x;
+                            box.top = y;
+                        }
+                        break;
+                    case 'ne':
+                        const neWidth = x - box.left;
+                        const neHeight = box.height + (box.top - y);
+                        if (neWidth > 10 && neHeight > 10) {
+                            box.width = neWidth;
+                            box.height = neHeight;
+                            box.top = y;
+                        }
+                        break;
+                    case 'sw':
+                        const swWidth = box.width + (box.left - x);
+                        const swHeight = y - box.top;
+                        if (swWidth > 10 && swHeight > 10) {
+                            box.width = swWidth;
+                            box.height = swHeight;
+                            box.left = x;
+                        }
+                        break;
+                    case 'se':
+                        const seWidth = x - box.left;
+                        const seHeight = y - box.top;
+                        if (seWidth > 10 && seHeight > 10) {
+                            box.width = seWidth;
+                            box.height = seHeight;
+                        }
+                        break;
+                    case 'n':
+                        const nHeight = box.height + (box.top - y);
+                        if (nHeight > 10) {
+                            box.height = nHeight;
+                            box.top = y;
+                        }
+                        break;
+                    case 's':
+                        const sHeight = y - box.top;
+                        if (sHeight > 10) {
+                            box.height = sHeight;
+                        }
+                        break;
+                    case 'w':
+                        const wWidth = box.width + (box.left - x);
+                        if (wWidth > 10) {
+                            box.width = wWidth;
+                            box.left = x;
+                        }
+                        break;
+                    case 'e':
+                        const eWidth = x - box.left;
+                        if (eWidth > 10) {
+                            box.width = eWidth;
+                        }
+                        break;
+                }
+
+                box.saved = false;
+                this.updateSelectedBoxInfo();
+            }
+
+            moveBox(boxIndex, deltaX, deltaY) {
+                if (boxIndex < 0 || boxIndex >= this.boxes.length) return;
+
+                const box = this.boxes[boxIndex];
+                box.left += deltaX;
+                box.top += deltaY;
+
+                // Keep box within canvas bounds
+                box.left = Math.max(0, Math.min(this.canvas.width - box.width, box.left));
+                box.top = Math.max(0, Math.min(this.canvas.height - box.height, box.top));
+
+                box.saved = false;
+                this.updateSelectedBoxInfo();
+            }
+
+            // Modified onKeyDown method with new resize functionality
+            onKeyDown(e) {
+                if (!this.currentImage || this.selectedBoxIndex < 0) return;
+
+                const resizeDistance = 5; // Fixed resize distance
+                const moveDistance = e.shiftKey ? 10 : 1;
+
+                if (e.shiftKey) {
+                    // Shift + arrow keys for resizing
+                    switch (e.key) {
+                        case 'ArrowLeft':
+                            e.preventDefault();
+                            this.resizeSelectedBox(-resizeDistance, 0);
+                            break;
+                        case 'ArrowRight':
+                            e.preventDefault();
+                            this.resizeSelectedBox(resizeDistance, 0);
+                            break;
+                        case 'ArrowUp':
+                            e.preventDefault();
+                            this.resizeSelectedBox(0, -resizeDistance);
+                            break;
+                        case 'ArrowDown':
+                            e.preventDefault();
+                            this.resizeSelectedBox(0, resizeDistance);
+                            break;
+                    }
+                } else {
+                    // Regular arrow keys for moving
+                switch (e.key) {
+                    case 'ArrowLeft':
+                        e.preventDefault();
+                        this.moveBox(this.selectedBoxIndex, -moveDistance, 0);
+                        this.drawCanvas();
+                        break;
+                    case 'ArrowRight':
+                        e.preventDefault();
+                        this.moveBox(this.selectedBoxIndex, moveDistance, 0);
+                        this.drawCanvas();
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        this.moveBox(this.selectedBoxIndex, 0, -moveDistance);
+                        this.drawCanvas();
+                        break;
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        this.moveBox(this.selectedBoxIndex, 0, moveDistance);
+                        this.drawCanvas();
+                        break;
+                    }
+                }
+
+                // Other key handlers
+                switch (e.key) {
+                    case 'Delete':
+                    case 'Backspace':
+                        e.preventDefault();
+                        this.deleteSelectedBox();
+                        break;
+                    case 'Escape':
+                        e.preventDefault();
+                        this.selectedBoxIndex = -1;
+                        this.updateSelectedBoxInfo();
+                        this.drawCanvas();
+                        break;
+                }
+            }
+
+            // New method to resize selected box
+            resizeSelectedBox(deltaWidth, deltaHeight) {
+                if (this.selectedBoxIndex < 0) return;
+
+                const box = this.boxes[this.selectedBoxIndex];
+                
+                // Calculate new dimensions
+                const newWidth = box.width + deltaWidth;
+                const newHeight = box.height + deltaHeight;
+
+                // Only resize if the new dimensions are reasonable (minimum 10px)
+                if (newWidth >= 10) {
+                    box.width = newWidth;
+                    // Keep box within canvas bounds
+                    if (box.left + box.width > this.canvas.width) {
+                        box.left = this.canvas.width - box.width;
+                    }
+                }
+
+                if (newHeight >= 10) {
+                    box.height = newHeight;
+                    // Keep box within canvas bounds
+                    if (box.top + box.height > this.canvas.height) {
+                        box.top = this.canvas.height - box.height;
+                    }
+                }
+
+                box.saved = false;
+                this.updateSelectedBoxInfo();
+                this.drawCanvas();
+            }
+
+            deleteSelectedBox() {
+                if (this.selectedBoxIndex >= 0) {
+                    this.boxes.splice(this.selectedBoxIndex, 1);
+                    this.selectedBoxIndex = -1;
+                    document.getElementById('boxCount').textContent = this.boxes.length;
+                    this.updateSelectedBoxInfo();
+                    this.drawCanvas();
+                    // this.showAlert('Box deleted', 'info');
+                }
+            }
+
+            updateSelectedBoxInfo() {
+                const selectedBoxInfo = document.getElementById('selectedBoxInfo');
+                if (this.selectedBoxIndex >= 0) {
+                    const box = this.boxes[this.selectedBoxIndex];
+                    selectedBoxInfo.textContent = `#${this.selectedBoxIndex + 1} (${Math.round(box.left)}, ${Math.round(box.top)}, ${Math.round(box.width)}×${Math.round(box.height)})`;
+                } else {
+                    selectedBoxInfo.textContent = 'None';
+                }
+            }
+
+            getMousePos(e) {
+                const rect = this.canvas.getBoundingClientRect();
+                const scaleX = this.canvas.width / rect.width;
+                const scaleY = this.canvas.height / rect.height;
+
+                return {
+                    x: (e.clientX - rect.left) * scaleX,
+                    y: (e.clientY - rect.top) * scaleY
+                };
+            }
+
+            async saveAnnotations() {
+                if (!this.currentImage || this.boxes.length === 0) {
+                    this.showAlert('No annotations to save', 'info');
+                    return;
+                }
+
+                try {
+                    const response = await fetch('/api/annotate/annotations', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            boxes: this.boxes.map(box => ({
+                                ...box,
+                                saved: true
+                            })),
+                            image_name: this.currentImage,
+                            original_width: this.originalWidth,
+                            original_height: this.originalHeight
+                        })
+                    });
+
+                    if (response.ok) {
+                        const result = await response.json();
+                        this.boxes.forEach(box => box.saved = true);
+                        this.drawCanvas();
+                        this.showAlert(result.message, 'success');
+                        this.loadImages(); // Refresh image list to update progress
+                    } else {
+                        throw new Error('Failed to save annotations');
+                    }
+                } catch (error) {
+                    this.showAlert('Error saving annotations: ' + error.message, 'error');
+                }
+            }
+
+            undoLastBox() {
+                if (this.boxes.length > 0) {
+                    this.boxes.pop();
+                    this.selectedBoxIndex = -1;
+                    document.getElementById('boxCount').textContent = this.boxes.length;
+                    this.updateSelectedBoxInfo();
+                    this.drawCanvas();
+                    this.showAlert('Last box removed', 'info');
+                } else {
+                    this.showAlert('No boxes to undo', 'info');
+                }
+            }
+
+            async clearAllBoxes() {
+                if (!this.currentImage) return;
+
+                if (confirm('Are you sure you want to clear all boxes and delete the annotation file?')) {
+                    try {
+                        // Delete annotations from server
+                        await fetch(`/api/annotate/annotations/${encodeURIComponent(this.currentImage)}`, {
+                            method: 'DELETE'
+                        });
+
+                        this.boxes = [];
+                        this.selectedBoxIndex = -1;
+                        document.getElementById('boxCount').textContent = '0';
+                        this.updateSelectedBoxInfo();
+                        this.drawCanvas();
+                        this.showAlert('All boxes cleared', 'success');
+                        this.loadImages(); // Refresh progress
+                    } catch (error) {
+                        this.showAlert('Error clearing annotations: ' + error.message, 'error');
+                    }
+                }
+            }
+
+            async reloadAnnotations() {
+                if (!this.currentImage) return;
+
+                try {
+                    const response = await fetch(`/api/annotate/annotations/${encodeURIComponent(this.currentImage)}`);
+                    const data = await response.json();
+
+                    this.boxes = (data.boxes || []).map(box => ({
+                        ...box,
+                        saved: true
+                    }));
+                    this.selectedBoxIndex = -1;
+                    document.getElementById('boxCount').textContent = this.boxes.length;
+                    this.updateSelectedBoxInfo();
+                    this.drawCanvas();
+                    this.showAlert('Annotations reloaded from file', 'success');
+                } catch (error) {
+                    this.showAlert('Error reloading annotations: ' + error.message, 'error');
+                }
+            }
+
+            downloadAnnotations() {
+                if (!this.currentImage) return;
+
+                const link = document.createElement('a');
+                link.href = `//annotate/annotations/${encodeURIComponent(this.currentImage)}/download`;
+                link.download = `${this.currentImage.split('.')[0]}.txt`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
+
+            async uploadImage(file) {
+                const formData = new FormData();
+                formData.append('file', file);
+
+                try {
+                    const response = await fetch('/api/annotate/upload', {
+                        method: 'POST',
+                        body: formData
+                    });
+
+                    if (response.ok) {
+                        const result = await response.json();
+                        this.showAlert(result.message, 'success');
+                        await this.loadImages();
+
+                        // Auto-select the uploaded image
+                        const index = this.images.findIndex(img => img.name === file.name);
+                        if (index >= 0) {
+                            this.currentImageIndex = index;
+                            document.getElementById('imageSelect').value = file.name;
+                            this.loadImage(file.name);
+                        }
+                    } else {
+                        throw new Error('Upload failed');
+                    }
+                } catch (error) {
+                    this.showAlert('Error uploading image: ' + error.message, 'error');
+                }
+
+                // Reset file input
+                document.getElementById('uploadFile').value = '';
+            }
+
+            showAlert(message, type) {
+                const alertsContainer = document.getElementById('alerts');
+                const alert = document.createElement('div');
+                alert.className = `alert alert-${type}`;
+                alert.textContent = message;
+
+                alertsContainer.appendChild(alert);
+
+                // Auto-remove alert after 5 seconds
+                setTimeout(() => {
+                    if (alert.parentNode) {
+                        alert.parentNode.removeChild(alert);
+                    }
+                }, 5000);
+            }
+        }
+
+        // Initialize the application when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new ComicAnnotator();
+        });
+    </script>
+</body>
+
+</html>

comic_panel_extractor/static/index.html

@@ -418,7 +418,7 @@
             loading.style.display = 'block';
             results.style.display = 'none';
 
-            fetch('/convert', {
+            fetch('/api/extract/convert', {
                 method: 'POST',
                 body: formData
             })

comic_panel_extractor/train.py

@@ -0,0 +1,41 @@
+# train.py
+from yolo_manager import YOLOManager
+from utils import Config, get_abs_path, backup_file
+import os
+
+def main():
+    """Main training function."""
+    try:
+        # Initialize YOLO manager
+        yolo_manager = YOLOManager()
+        
+        # Configuration
+        data_yaml_path = get_abs_path('./comic.yaml')
+        
+        if not os.path.isfile(data_yaml_path):
+            raise FileNotFoundError(f"❌ Dataset YAML not found: {data_yaml_path}")
+        
+        print(f"🎯 Training model: {Config.YOLO_MODEL_NAME}")
+        
+        # Train model
+        model = yolo_manager.train(
+            data_yaml_path=data_yaml_path,
+            run_name=Config.YOLO_MODEL_NAME
+        )
+        
+        # Validate model
+        metrics = yolo_manager.validate()
+        
+        # Backup best weights
+        weights_path = yolo_manager.get_best_weights_path()
+        backup_path = f'{Config.YOLO_MODEL_NAME}.pt'
+        backup_file(weights_path, backup_path)
+        
+        print("🎉 Training completed successfully!")
+        
+    except Exception as e:
+        print(f"❌ Training failed: {str(e)}")
+        raise
+
+if __name__ == "__main__":
+    main()

comic_panel_extractor/utils.py

@@ -3,6 +3,12 @@ import imageio.v2 as imageio
 import cv2
 import numpy as np
 from sklearn.cluster import KMeans
+import os
+import shutil
+from glob import glob
+from typing import List, Union
+from dotenv import load_dotenv
+load_dotenv()
 
 def remove_duplicate_boxes(boxes, compare_single=None, iou_threshold=0.7):
 	"""
@@ -475,4 +481,59 @@ def is_valid_panel(
 		if is_valid:
 			validity.append((x1, y1, x2, y2))
 
-	return validity
+	return validity
+
+
+class Config:
+    """Configuration class to manage environment variables and paths."""
+    YOLO_MODEL_NAME = os.getenv('YOLO_MODEL_NAME', 'default_model')
+    DEFAULT_IMAGE_SIZE = 640
+    SUPPORTED_EXTENSIONS = ['jpg', 'jpeg', 'png', 'JPG', 'JPEG', 'PNG']
+
+def get_abs_path(relative_path: str) -> str:
+    """Convert relative path to absolute path."""
+    return os.path.abspath(relative_path)
+
+def get_image_paths(directories: Union[str, List[str]]) -> List[str]:
+    """
+    Get all image paths from given directories.
+    
+    Args:
+        directories: Single directory path or list of directory paths
+        
+    Returns:
+        List of image file paths
+    """
+    if isinstance(directories, str):
+        directories = [directories]
+    
+    all_images = []
+    for directory in directories:
+        abs_dir = get_abs_path(directory)
+        if not os.path.isdir(abs_dir):
+            print(f"⚠️ Warning: Skipping non-directory {abs_dir}")
+            continue
+            
+        # Support multiple image extensions
+        for ext in Config.SUPPORTED_EXTENSIONS:
+            pattern = os.path.join(abs_dir, f'*.{ext}')
+            images = sorted(glob(pattern))
+            all_images.extend(images)
+    
+    return list(set(all_images))  # Remove duplicates
+
+def clean_directory(directory: str, create_if_not_exists: bool = True) -> None:
+    """Clean directory contents or create if it doesn't exist."""
+    if os.path.exists(directory):
+        shutil.rmtree(directory)
+    
+    if create_if_not_exists:
+        os.makedirs(directory, exist_ok=True)
+
+def backup_file(source_path: str, backup_path: str) -> str:
+    """Backup a file to specified location."""
+    backup_path = get_abs_path(backup_path)
+    os.makedirs(os.path.dirname(backup_path), exist_ok=True)
+    shutil.copy(source_path, backup_path)
+    print(f"✅ File backed up to: {backup_path}")
+    return backup_path

comic_panel_extractor/yolo_manager.py

@@ -0,0 +1,198 @@
+# utils.py
+import os
+import shutil
+from glob import glob
+from typing import List, Union
+from dotenv import load_dotenv
+
+load_dotenv()
+
+class Config:
+    """Configuration class to manage environment variables and paths."""
+    YOLO_MODEL_NAME = os.getenv('YOLO_MODEL_NAME', 'default_model')
+    DEFAULT_IMAGE_SIZE = 640
+    SUPPORTED_EXTENSIONS = ['jpg', 'jpeg', 'png', 'JPG', 'JPEG', 'PNG']
+
+def get_abs_path(relative_path: str) -> str:
+    """Convert relative path to absolute path."""
+    return os.path.abspath(relative_path)
+
+def get_image_paths(directories: Union[str, List[str]]) -> List[str]:
+    """
+    Get all image paths from given directories.
+    
+    Args:
+        directories: Single directory path or list of directory paths
+        
+    Returns:
+        List of image file paths
+    """
+    if isinstance(directories, str):
+        directories = [directories]
+    
+    all_images = []
+    for directory in directories:
+        abs_dir = get_abs_path(directory)
+        if not os.path.isdir(abs_dir):
+            print(f"⚠️ Warning: Skipping non-directory {abs_dir}")
+            continue
+            
+        # Support multiple image extensions
+        for ext in Config.SUPPORTED_EXTENSIONS:
+            pattern = os.path.join(abs_dir, f'*.{ext}')
+            images = sorted(glob(pattern))
+            all_images.extend(images)
+    
+    return list(set(all_images))  # Remove duplicates
+
+def clean_directory(directory: str, create_if_not_exists: bool = True) -> None:
+    """Clean directory contents or create if it doesn't exist."""
+    if os.path.exists(directory):
+        shutil.rmtree(directory)
+    
+    if create_if_not_exists:
+        os.makedirs(directory, exist_ok=True)
+
+def backup_file(source_path: str, backup_path: str) -> str:
+    """Backup a file to specified location."""
+    backup_path = get_abs_path(backup_path)
+    os.makedirs(os.path.dirname(backup_path), exist_ok=True)
+    shutil.copy(source_path, backup_path)
+    print(f"✅ File backed up to: {backup_path}")
+    return backup_path
+
+# yolo_manager.py
+import os
+import cv2
+from ultralytics import YOLO
+from typing import List, Optional, Dict, Any
+from utils import Config, get_abs_path, clean_directory
+
+class YOLOManager:
+    """Manages YOLO model training and inference operations."""
+    
+    def __init__(self, model_name: Optional[str] = None):
+        self.model_name = model_name or Config.YOLO_MODEL_NAME
+        self.model = None
+    
+    def load_model(self, weights_path: Optional[str] = None) -> YOLO:
+        """Load YOLO model from weights or pretrained model."""
+        if weights_path and os.path.isfile(weights_path):
+            print(f"📦 Loading model from: {weights_path}")
+            self.model = YOLO(weights_path)
+        else:
+            print("✨ Loading pretrained model 'yolo11s.pt'")
+            self.model = YOLO("yolo11s.pt")
+        return self.model
+    
+    def train(self, 
+              data_yaml_path: str,
+              run_name: Optional[str] = None,
+              device: int = 0,
+              resume: bool = True,
+              **kwargs) -> YOLO:
+        """
+        Train YOLO model with given parameters.
+        
+        Args:
+            data_yaml_path: Path to dataset YAML file
+            run_name: Name for the training run
+            device: Device to use for training
+            resume: Whether to resume from checkpoint if available
+            **kwargs: Additional training parameters
+        """
+        run_name = run_name or self.model_name
+        checkpoint_path = f"runs/detect/{run_name}/weights/last.pt"
+        
+        # Check for existing checkpoint
+        if resume and os.path.isfile(checkpoint_path):
+            print(f"🔄 Resuming training from checkpoint: {checkpoint_path}")
+            self.model = YOLO(checkpoint_path)
+            resume_flag = True
+        else:
+            self.load_model()
+            resume_flag = False
+        
+        # Default training parameters
+        train_params = {
+            'data': data_yaml_path,
+            'imgsz': Config.DEFAULT_IMAGE_SIZE,
+            'epochs': 200,
+            'batch': 10,
+            'name': run_name,
+            'device': device,
+            'cache': True,
+            'project': 'runs/detect',
+            'exist_ok': True,
+            'resume': resume_flag
+        }
+        
+        # Update with custom parameters
+        train_params.update(kwargs)
+        
+        print(f"🚀 Starting training with parameters: {train_params}")
+        self.model.train(**train_params)
+        return self.model
+    
+    def validate(self) -> Dict[str, Any]:
+        """Validate the model and return metrics."""
+        if not self.model:
+            raise ValueError("❌ No model loaded. Please train or load a model first.")
+        
+        metrics = self.model.val()
+        print("📊 Validation Metrics:", metrics)
+        return metrics
+    
+    def get_best_weights_path(self, run_name: Optional[str] = None) -> str:
+        """Get path to best trained weights."""
+        run_name = run_name or self.model_name
+        weights_path = os.path.join('runs', 'detect', run_name, 'weights', 'best.pt')
+        
+        if not os.path.isfile(weights_path):
+            raise FileNotFoundError(f"❌ Trained weights not found at: {weights_path}")
+        
+        return weights_path
+    
+    def annotate_images(self, image_paths: List[str], output_dir: str = 'temp_dir', image_size: int = None) -> None:
+        """
+        Annotate images with model predictions.
+        
+        Args:
+            image_paths: List of image file paths
+            output_dir: Directory to save annotated images
+            image_size: Size for inference
+        """
+        if not self.model:
+            raise ValueError("❌ No model loaded. Please load a model first.")
+        
+        if not image_paths:
+            raise ValueError("❌ No images provided for annotation.")
+        
+        image_size = image_size or Config.DEFAULT_IMAGE_SIZE
+        clean_directory(output_dir)
+        
+        print(f"🎨 Annotating {len(image_paths)} images...")
+        
+        for idx, image_path in enumerate(image_paths):
+            if not os.path.isfile(image_path):
+                print(f"⚠️ Warning: Skipping non-existent file {image_path}")
+                continue
+                
+            print(f'🔍 Processing ({idx+1}/{len(image_paths)}): {os.path.basename(image_path)}')
+            
+            try:
+                results = self.model(image_path, imgsz=image_size)
+                annotated_frame = results[0].plot()
+                
+                # Use original filename with prefix
+                original_name = os.path.basename(image_path)
+                name, ext = os.path.splitext(original_name)
+                save_path = os.path.join(output_dir, f'annotated_{name}{ext}')
+                
+                cv2.imwrite(save_path, annotated_frame)
+                print(f'✅ Saved: {save_path}')
+                
+            except Exception as e:
+                print(f"❌ Error processing {image_path}: {str(e)}")
+        
+        print(f"🎉 Annotation complete! Results saved to: {output_dir}")

requirements.txt

@@ -11,4 +11,6 @@ imagehash
 scikit-learn
 ultralytics
 Pillow
-opencv-contrib-python
+opencv-contrib-python
+dotenv
+tqdm