clean working UI

.gitignore

@@ -0,0 +1,2 @@
+# local env
+.env

Dockerfile

@@ -0,0 +1,23 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set the working directory in the container
+WORKDIR /code
+
+# Copy the requirements file into the container at /code
+COPY ./requirements.txt /code/requirements.txt
+
+# Install any needed packages specified in requirements.txt
+# Use --no-cache-dir to reduce image size
+# Install libgl1 for OpenCV headless dependencies
+RUN apt-get update && apt-get install -y libgl1 \
+    && pip install --no-cache-dir --upgrade pip \
+    && pip install --no-cache-dir -r /code/requirements.txt
+
+# Copy the rest of the application code into the container at /code
+COPY ./app /code/app
+
+# Command to run the application when the container launches
+# Binds to 0.0.0.0 to be accessible from outside the container
+# The port 7860 is the standard port for Hugging Face Spaces
+CMD ["uvicorn", "app.backend.main:app", "--host", "0.0.0.0", "--port", "7860"]

app/backend/hub.py

@@ -0,0 +1,63 @@
+# /app/backend/hub.py
+import os
+import logging
+from typing import Optional, Dict
+from pathlib import Path
+
+from huggingface_hub import HfApi, upload_folder, Repository, create_repo
+
+logger = logging.getLogger(__name__)
+logger.addHandler(logging.NullHandler())
+
+def get_hf_api(token: Optional[str] = None) -> Optional[HfApi]:
+    """Initializes HfApi using a provided token or the environment secret."""
+    token_to_use = token or os.getenv("HF_TOKEN")
+    if token_to_use:
+        return HfApi(token=token_to_use)
+    return None
+
+def get_user_info(token: Optional[str] = None) -> Optional[Dict]:
+    """Fetches user info from the Hub (returns None if unauthenticated)."""
+    api = get_hf_api(token)
+    if api:
+        try:
+            return api.whoami()
+        except Exception as e:
+            # print(f"Failed to authenticate with Hugging Face Hub: {e}")
+            logger.warning("Failed to authenticate with Hugging Face Hub: %s", e)
+            return None
+    return None
+
+
+def push_dataset_to_hub(folder_path: str, repo_name: str, namespace: str, private: bool, commit_message: str, token: Optional[str] = None):
+    """
+    Push the contents of folder_path to the Hugging Face datasets repo `namespace/repo_name`.
+    Uses token param if provided, otherwise falls back to HF_TOKEN from environment/.env.
+    """
+    api = get_hf_api(token)
+    if not api:
+        raise ConnectionError("Hugging Face token not found. Provide token or set HF_TOKEN in environment or .env file.")
+
+    repo_id = f"{namespace}/{repo_name}"
+
+    # create repo if not exists
+    try:
+        api.create_repo(name=repo_name, token=token or os.getenv("HF_TOKEN"), repo_type="dataset", private=private, namespace=namespace)
+        logger.info(f"Created repo {repo_id} (or it already exists)")
+    except Exception as e:
+        logger.info(f"Repo create warning (may already exist): {e}")
+
+    # upload entire folder (recursively) using upload_folder helper
+    try:
+        upload_folder(
+            folder_path=folder_path,
+            path_in_repo="",
+            repo_id=repo_id,
+            token=token or os.getenv("HF_TOKEN"),
+            repo_type="dataset",
+            commit_message=commit_message,
+        )
+        logger.info(f"Uploaded folder to {repo_id} from {folder_path}")
+    except Exception as e:
+        logger.exception(f"upload_folder failed for {folder_path} -> {repo_id}: {e}")
+        raise

app/backend/main.py

@@ -0,0 +1,854 @@
+# /app/backend/main.py
+import os
+import cv2
+import base64
+from pathlib import Path
+import aiofiles
+import shutil
+import logging
+import tempfile
+import json
+import csv
+from pydantic import BaseModel   # especially for DeleteImageRequest
+
+from fastapi import FastAPI, File, UploadFile, HTTPException, Request
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+from starlette.staticfiles import StaticFiles
+from fastapi.exceptions import RequestValidationError
+
+from .schemas import *
+from .storage import (
+    create_new_session, get_session_path, save_session_config,
+    load_session_config, extract_zip, move_labeled_file,
+    create_dataset_readme, create_dataset_zip
+)
+from .processing import crop_image #segment_with_grabcut
+from .hub import get_user_info, push_dataset_to_hub
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = FastAPI(
+    title="Tulasi Data Curator",
+    description="Interactive tool for curating and labeling Tulasi leaf disease datasets",
+    version="1.0.0"
+)
+
+# Add CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Default labeling schema
+DEFAULT_SCHEMA = {
+    "Sri/Green Tulasi": [
+        "Healthy", "Leaf Spot", "Powdery Mildew", "Downy Mildew", 
+        "Bacterial Blight", "Nutrient Deficiency", "Insect Damage", 
+        "Drought/Scorch", "Mechanical Damage", "Unknown"
+    ],
+    "Krishna/Black Tulasi": [
+        "Healthy", "Leaf Spot", "Powdery Mildew", "Downy Mildew", 
+        "Bacterial Blight", "Nutrient Deficiency", "Insect Damage", 
+        "Drought/Scorch", "Mechanical Damage", "Unknown"
+    ],
+    "Unknown/Other": [
+        "Healthy", "Leaf Spot", "Powdery Mildew", "Downy Mildew", 
+        "Bacterial Blight", "Nutrient Deficiency", "Insect Damage", 
+        "Drought/Scorch", "Mechanical Damage", "Unknown"
+    ],
+}
+
+# Exception handlers
+@app.exception_handler(RequestValidationError)
+async def validation_exception_handler(request: Request, exc: RequestValidationError):
+    logger.error(f"Validation error: {exc}")
+    return JSONResponse(
+        status_code=422,
+        content={"detail": f"Validation error: {str(exc)}"}
+    )
+
+@app.exception_handler(Exception)
+async def general_exception_handler(request: Request, exc: Exception):
+    logger.error(f"Unexpected error: {exc}")
+    return JSONResponse(
+        status_code=500,
+        content={"detail": f"Internal server error: {str(exc)}"}
+    )
+
+@app.post("/api/upload_zip")
+async def upload_zip(file: UploadFile = File(...)):
+    """Upload and extract a ZIP file containing images."""
+    logger.info(f"Uploading ZIP file: {file.filename}")
+    
+    # Validate file
+    if not file.filename.lower().endswith('.zip'):
+        raise HTTPException(status_code=400, detail="File must be a ZIP archive")
+    
+    # Check file size (10GB limit)
+    max_size = 10 * 1024 * 1024 * 1024  # 10GB
+    if hasattr(file, 'size') and file.size > max_size:
+        raise HTTPException(status_code=413, detail="File too large. Maximum size is 10GB.")
+    
+    session_id, session_path = create_new_session()
+    zip_path = session_path / file.filename
+    
+    try:
+        # Save uploaded file
+        async with aiofiles.open(zip_path, 'wb') as out_file:
+            content = await file.read()
+            await out_file.write(content)
+        
+        logger.info(f"Saved ZIP file to: {zip_path}")
+        
+        # Extract images
+        originals_path = session_path / "originals"
+        image_ids = extract_zip(zip_path, originals_path)
+        
+        if not image_ids:
+            raise HTTPException(status_code=400, detail="No valid images found in ZIP file.")
+        
+        logger.info(f"Extracted {len(image_ids)} images")
+        
+        # Create session configuration
+        config = SessionConfig(
+            varieties=DEFAULT_SCHEMA.copy(),
+            unlabeled_images=image_ids,
+            image_metadata={
+                img_id: ImageMetadata(
+                    original_path=str(originals_path / img_id)
+                ) for img_id in image_ids
+            }
+        )
+        
+        save_session_config(session_id, config)
+        
+        return {
+            "session_id": session_id,
+            "image_count": len(image_ids),
+            "image_ids": image_ids,
+            "config": config.model_dump()
+        }
+        
+    except Exception as e:
+        logger.error(f"Error processing ZIP file: {e}")
+        # Cleanup on error
+        if session_path.exists():
+            shutil.rmtree(session_path, ignore_errors=True)
+        raise HTTPException(status_code=500, detail=f"Failed to process ZIP file: {str(e)}")
+    finally:
+        # Clean up uploaded ZIP file
+        if zip_path.exists():
+            os.remove(zip_path)
+
+@app.get("/api/image/{session_id}/{image_id}")
+async def get_image(session_id: str, image_id: str):
+    """Serve an image file (resolved relative to session if necessary)."""
+    try:
+        config = load_session_config(session_id)
+        metadata = config.image_metadata.get(image_id)
+        
+        if not metadata:
+            raise HTTPException(status_code=404, detail="Image not found")
+        
+        image_path = Path(metadata.processed_path or metadata.original_path)
+
+        # If path is not absolute, resolve it relative to session directory
+        if not image_path.is_absolute():
+            image_path = get_session_path(session_id) / image_path
+        
+        if not image_path.exists():
+            raise HTTPException(status_code=404, detail="Image file not found on disk")
+        
+        # set media type based on file extension
+        ext = image_path.suffix.lower()
+        if ext == ".png":
+            media_type = "image/png"
+        elif ext in (".jpg", ".jpeg"):
+            media_type = "image/jpeg"
+        else:
+            media_type = "application/octet-stream"
+
+        return FileResponse(
+            path=image_path,
+            media_type=media_type,
+            headers={"Cache-Control": "max-age=3600"}
+        )
+
+        
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail="Session not found")
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Error serving image: {e}")
+        raise HTTPException(status_code=500, detail="Failed to serve image")
+    
+# from pydantic import BaseModel
+
+class DeleteImageRequest(BaseModel):
+    session_id: str
+    image_id: str
+
+@app.post("/api/delete_image")
+async def delete_image(req: DeleteImageRequest):
+    """Delete a single image from the session (original, processed, mask) and update session config."""
+    try:
+        config = load_session_config(req.session_id)
+        metadata = config.image_metadata.get(req.image_id)
+        if not metadata:
+            raise HTTPException(status_code=404, detail="Image not found in session")
+
+        session_path = get_session_path(req.session_id)
+
+        # remove original
+        try:
+            orig = Path(metadata.original_path)
+            if not orig.is_absolute():
+                orig = session_path / orig
+            if orig.exists():
+                orig.unlink()
+        except Exception:
+            pass
+
+        # remove processed
+        try:
+            proc = Path(metadata.processed_path) if metadata.processed_path else None
+            if proc:
+                if not proc.is_absolute():
+                    proc = session_path / proc
+                if proc.exists():
+                    proc.unlink()
+        except Exception:
+            pass
+
+        # remove mask if any
+        try:
+            mask = Path(metadata.mask_path) if metadata.mask_path else None
+            if mask:
+                if not mask.is_absolute():
+                    mask = session_path / mask
+                if mask.exists():
+                    mask.unlink()
+        except Exception:
+            pass
+
+        # remove from lists
+        if req.image_id in config.unlabeled_images:
+            config.unlabeled_images.remove(req.image_id)
+        if req.image_id in config.image_metadata:
+            del config.image_metadata[req.image_id]
+
+        save_session_config(req.session_id, config)
+
+        return {"status": "success", "session_id": req.session_id, "removed": req.image_id}
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail="Session not found")
+    except Exception as e:
+        logger.error(f"Error deleting image: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to delete image: {str(e)}")
+
+
+@app.post("/api/apply_changes")
+async def apply_changes(request: ApplyChangesRequest):
+    """Apply cropping and/or mask changes to an image, Supports optionally creating a new sample from a crop."""
+    try:
+        config = load_session_config(request.session_id)
+        session_path = get_session_path(request.session_id)   # <--- ensure we have session path early
+        metadata = config.image_metadata.get(request.image_id)
+        
+        if not metadata:
+            raise HTTPException(status_code=404, detail="Image not found")
+        
+        returned = {"status": "success"}
+        
+        # Apply cropping if specified
+        if request.crop_details:
+            # Resolve original path (it may be absolute or relative)
+            original_path = Path(metadata.original_path)
+            if not original_path.is_absolute():
+                original_path = session_path / original_path
+
+            img = cv2.imread(str(original_path))
+            if img is None:
+                raise HTTPException(status_code=500, detail="Could not read original image")
+            
+            # Validate crop bounds
+            h, w = img.shape[:2]
+            crop = request.crop_details
+            if (crop.x < 0 or crop.y < 0 or 
+                crop.x + crop.width > w or crop.y + crop.height > h or
+                crop.width <= 0 or crop.height <= 0):
+                raise HTTPException(status_code=400, detail="Invalid crop bounds")
+            
+            # Crop image
+            # cropped_img = crop_image(img, **crop.model_dump())
+            cropped_img = crop_image(img, int(crop.x), int(crop.y), int(crop.width), int(crop.height))
+
+            # Save processed image(s)
+            processed_dir = session_path / "processed"
+            processed_dir.mkdir(exist_ok=True, parents=True)
+
+            # If caller requested a new sample from this crop, generate a unique filename and metadata
+            if getattr(request, "create_new_sample", False):
+                base_stem = Path(request.image_id).stem
+                suffix = Path(request.image_id).suffix or ".jpg"
+                # find unique name
+                idx = 1
+                while True:
+                    new_name = f"{base_stem}__crop{idx}{suffix}"
+                    new_path = processed_dir / new_name
+                    if not new_path.exists():
+                        break
+                    idx += 1
+
+                success = cv2.imwrite(str(new_path), cropped_img)
+                if not success:
+                    raise HTTPException(status_code=500, detail="Failed to save cropped image (new sample)")
+
+                # Prepare new metadata object (use same schema as ImageMetadata)
+                new_meta = ImageMetadata(
+                    original_path=str(original_path),
+                    processed_path=str(new_path),
+                    crop_details=request.crop_details,
+                    status="unlabeled",
+                    mask_path=None,
+                    variety=None,
+                    disease=None
+                )
+
+                # Add new image id into config
+                config.image_metadata[new_name] = new_meta
+                config.unlabeled_images.append(new_name)
+
+                # Persist
+                save_session_config(request.session_id, config)
+
+                returned["new_image_id"] = new_name
+                returned["metadata"] = new_meta.model_dump()
+                return returned
+            
+            else:
+                # Overwrite (or create) processed image for this image id
+                processed_path = processed_dir / request.image_id
+                success = cv2.imwrite(str(processed_path), cropped_img)
+                if not success:
+                    raise HTTPException(status_code=500, detail="Failed to save cropped image")
+                
+                # Update metadata for same image id
+                metadata.processed_path = str(processed_path)
+                metadata.crop_details = request.crop_details
+                # leave status unchanged here (label step will set status to 'labeled')
+                save_session_config(request.session_id, config)
+                returned["metadata"] = metadata.model_dump()
+                return returned
+
+        return returned
+        
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail="Session not found")
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Error applying changes: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to apply changes: {str(e)}")
+
+@app.post("/api/label")
+async def label_image(request: LabelRequest):
+    """Label an image with variety and disease information."""
+    try:
+        config = load_session_config(request.session_id)
+        
+        if request.image_id not in config.image_metadata:
+            raise HTTPException(status_code=404, detail="Image not found")
+        
+        # Validate variety and disease
+        if request.variety not in config.varieties:
+            raise HTTPException(status_code=400, detail="Invalid variety")
+        
+        if request.disease not in config.varieties[request.variety]:
+            raise HTTPException(status_code=400, detail="Invalid disease for selected variety")
+        
+        # Update metadata
+        metadata = config.image_metadata[request.image_id]
+        metadata.variety = request.variety
+        metadata.disease = request.disease
+        metadata.status = "labeled"
+        
+        # Move to final dataset structure
+        try:
+            final_base_path, _ = move_labeled_file(
+                request.session_id, request.image_id, 
+                request.variety, request.disease
+            )
+            
+            # Generate/update README
+            create_dataset_readme(final_base_path, config)
+            
+        except Exception as e:
+            logger.error(f"Error moving labeled file: {e}")
+            # Continue even if file move fails, just log the error
+        
+        # Remove from unlabeled list
+        if request.image_id in config.unlabeled_images:
+            config.unlabeled_images.remove(request.image_id)
+        
+        # Save configuration
+        save_session_config(request.session_id, config)
+        
+        return {
+            "status": "success",
+            "config": config.model_dump()
+        }
+        
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail="Session not found")
+    except Exception as e:
+        logger.error(f"Error labeling image: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to label image: {str(e)}")
+
+@app.get("/api/summary/{session_id}")
+async def get_summary(session_id: str):
+    """Get a summary of the current labeling progress."""
+    try:
+        config = load_session_config(session_id)
+        
+        counts = {}
+        total_labeled = 0
+        
+        for metadata in config.image_metadata.values():
+            if metadata.status == "labeled":
+                total_labeled += 1
+                key = f"{metadata.variety} -> {metadata.disease}"
+                counts[key] = counts.get(key, 0) + 1
+        
+        return {
+            "unlabeled_count": len(config.unlabeled_images),
+            "labeled_count": total_labeled,
+            "class_counts": counts
+        }
+        
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail="Session not found")
+    except Exception as e:
+        logger.error(f"Error getting summary: {e}")
+        raise HTTPException(status_code=500, detail="Failed to get summary")
+    
+    
+@app.get("/api/export_zip/{session_id}")
+async def export_dataset_as_zip(session_id: str):
+    """Create and download a ZIP of the curated dataset (labeled images only)."""
+    try:
+        config = load_session_config(session_id)
+
+        # Build a temporary dataset folder that contains only labeled items
+        with tempfile.TemporaryDirectory() as tmpdir:
+            tmp_base = Path(tmpdir)
+            final_images_dir = tmp_base / "images"
+            final_annotations_dir = tmp_base / "annotations"
+            final_images_dir.mkdir(parents=True, exist_ok=True)
+            final_annotations_dir.mkdir(parents=True, exist_ok=True)
+
+            labeled_any = False
+
+            def _meta_to_dict(meta):
+                if hasattr(meta, "model_dump"):
+                    d = meta.model_dump()
+                elif hasattr(meta, "dict"):
+                    d = meta.dict()
+                else:
+                    d = dict(meta)
+                # take processed_path (or fallback to original), rename to "image"
+                proc = d.pop("processed_path", None) or d.pop("original_path", None)
+                d["image"] = str(Path(proc)) if proc else ""
+                # drop unwanted keys
+                d.pop("original_path", None)
+                d.pop("mask_path", None)
+                d.pop("status", None)
+                return d
+
+            for image_id, metadata in config.image_metadata.items():
+                if getattr(metadata, "status", None) != "labeled":
+                    continue
+
+                source_path_str = metadata.processed_path or metadata.original_path
+                source_path = Path(source_path_str)
+                if not source_path.is_absolute():
+                    source_path = get_session_path(session_id) / source_path
+
+                dest_var = metadata.variety or "Unknown"
+                dest_dis = metadata.disease or "Unknown"
+                dest_dir = final_images_dir / dest_var / dest_dis
+                dest_dir.mkdir(parents=True, exist_ok=True)
+                dest_img_path = dest_dir / image_id
+
+                if source_path.exists():
+                    try:
+                        shutil.copy2(source_path, dest_img_path)
+                        metadata.processed_path = str(Path("images") / dest_var / dest_dis / image_id)
+                    except Exception as e:
+                        logger.warning(f"Failed to copy {source_path} -> {dest_img_path}: {e}")
+                        continue
+                else:
+                    logger.warning(f"Source image missing for export: {image_id} -> {source_path}")
+                    continue
+
+                # write cleaned annotation JSON (image key + others)
+                try:
+                    ann_path = final_annotations_dir / f"{Path(image_id).stem}.json"
+                    with open(ann_path, "w", encoding="utf-8") as f:
+                        json.dump(_meta_to_dict(metadata), f, indent=2, ensure_ascii=False)
+                except Exception as e:
+                    logger.warning(f"Failed to write annotation for {image_id}: {e}")
+
+                labeled_any = True
+
+            if not labeled_any:
+                raise HTTPException(status_code=400, detail="No images have been labeled yet. Please label at least one image before exporting.")
+
+            # generate README at dataset root
+            try:
+                create_dataset_readme(tmp_base, config)
+            except Exception as e:
+                logger.warning(f"Failed to create README in export staging: {e}")
+
+            # Create a small CSV manifest for easier viewing; first column named "image"
+            manifest_path = tmp_base / "manifest.csv"
+            with open(manifest_path, "w", newline="", encoding="utf-8") as mf:
+                writer = csv.writer(mf)
+                writer.writerow(["image", "variety", "disease", "annotation_path"])
+                for image_id, metadata in config.image_metadata.items():
+                    if getattr(metadata, "status", None) != "labeled":
+                        continue
+                    img_rel = metadata.processed_path or str(Path("images") / (metadata.variety or "Unknown") / (metadata.disease or "Unknown") / image_id)
+                    ann_rel = str(Path("annotations") / f"{Path(image_id).stem}.json")
+                    writer.writerow([img_rel, metadata.variety, metadata.disease, ann_rel])
+
+            # create zip from tmp_base
+            zip_name = f"tulasi_curated_{session_id}"
+            zip_path = Path("/tmp") / f"{zip_name}.zip"
+            if zip_path.exists():
+                zip_path.unlink()
+            shutil.make_archive(str(zip_path.with_suffix('')), 'zip', str(tmp_base))
+
+            return FileResponse(
+                path=zip_path,
+                media_type='application/zip',
+                filename=f"{zip_name}.zip",
+                headers={"Content-Disposition": f"attachment; filename={zip_name}.zip"}
+            )
+
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail="Session not found")
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Error creating ZIP: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to create ZIP file: {str(e)}")
+
+
+
+
+@app.post("/api/push_to_hub")
+async def push_to_hub_endpoint(request: HubPushRequest):
+    """
+    Push the curated dataset to Hugging Face Hub (only labeled images).
+    This implementation:
+      - copies only labeled images into a staging folder images/<variety>/<disease>/
+      - writes cleaned annotations under annotations/ where each JSON contains:
+          { "image": "images/variety/disease/imagename.jpg", "variety": "...", "disease": "...", "crop_details": "..." }
+        (no original_path, mask_path, status)
+      - creates manifest.csv with first column 'image'
+      - creates a README.md at dataset root (create_dataset_readme)
+      - builds a datasets.Dataset with features:
+          image (Image), variety (string), disease (string), crop_details (string)
+        and pushes it via Dataset.push_to_hub so HF shows thumbnails and preserves column typing & order.
+    """
+    try:
+        # validate HF auth / inputs
+        user_info = get_user_info(request.token)
+        if not user_info:
+            raise HTTPException(status_code=401, detail="Hugging Face authentication required. Please set HF_TOKEN in Space settings.")
+        if not request.repo_name or not request.repo_name.strip():
+            raise HTTPException(status_code=400, detail="Repository name is required")
+
+        # staging directories
+        tmpdir = tempfile.mkdtemp(prefix="tulasi_push_")
+        tmp_base = Path(tmpdir)
+        logger.info(f"Created staging folder: {tmp_base}")
+        archive_base = None
+        archive_path = None
+
+        try:
+            final_images_dir = tmp_base / "images"
+            final_annotations_dir = tmp_base / "annotations"
+            final_images_dir.mkdir(parents=True, exist_ok=True)
+            final_annotations_dir.mkdir(parents=True, exist_ok=True)
+
+            config = load_session_config(request.session_id)
+            logger.info(
+                f"Preparing staging for push: session={request.session_id} metadata_entries={len(config.image_metadata)} "
+                f"labeled_count={sum(1 for m in config.image_metadata.values() if getattr(m, 'status', None)=='labeled')}"
+            )
+
+            # collect dataset records (image path, variety, disease, crop_details)
+            records = []
+            labeled_any = False
+
+            for image_id, metadata in config.image_metadata.items():
+                # include only labeled images
+                if getattr(metadata, "status", None) != "labeled":
+                    continue
+
+                # resolve source (processed preferred)
+                source_path = Path(metadata.processed_path or metadata.original_path)
+                if not source_path.is_absolute():
+                    source_path = get_session_path(request.session_id) / source_path
+
+                if not source_path.exists():
+                    logger.warning(f"Source image missing, skipping: {source_path}")
+                    continue
+
+                dest_var = metadata.variety or "Unknown"
+                dest_dis = metadata.disease or "Unknown"
+                dest_dir = final_images_dir / dest_var / dest_dis
+                dest_dir.mkdir(parents=True, exist_ok=True)
+                dest_img_path = dest_dir / image_id
+
+                try:
+                    shutil.copy2(source_path, dest_img_path)
+                except Exception as e:
+                    logger.warning(f"Failed to copy {source_path} -> {dest_img_path}: {e}")
+                    continue
+
+                # relative path in dataset for annotation + manifest
+                rel_img_path = str(Path("images") / dest_var / dest_dis / image_id)
+                metadata.processed_path = rel_img_path  # update config snapshot for manifest/annotations
+
+                 # normalize crop_details to something JSON-serializable
+                cd_raw = getattr(metadata, "crop_details", None)
+
+                if cd_raw is None:
+                    cd_serialized = ""
+                else:
+                    # if it's a Pydantic model (v2 -> model_dump), convert to dict
+                    if hasattr(cd_raw, "model_dump"):
+                        try:
+                            cd_obj = cd_raw.model_dump()
+                        except Exception:
+                            # fallback to dict()
+                            try:
+                                cd_obj = dict(cd_raw)
+                            except Exception:
+                                cd_obj = str(cd_raw)
+                    elif isinstance(cd_raw, dict):
+                        cd_obj = cd_raw
+                    else:
+                        # try __dict__ or str fallback
+                        cd_obj = getattr(cd_raw, "__dict__", str(cd_raw))
+
+                    try:
+                        cd_serialized = json.dumps(cd_obj, ensure_ascii=False)
+                    except Exception:
+                        # final fallback to string
+                        cd_serialized = str(cd_obj)
+
+                # build cleaned annotation dict and write it
+                ann = {
+                    "image": rel_img_path,
+                    "variety": metadata.variety,
+                    "disease": metadata.disease,
+                    # keep crop_details as JSON string (so viewer stores it as a string column)
+                    # "crop_details": json.dumps(metadata.crop_details) if getattr(metadata, "crop_details", None) is not None else ""
+                     "crop_details": cd_serialized
+                }
+                try:
+                    ann_path = final_annotations_dir / f"{Path(image_id).stem}.json"
+                    with open(ann_path, "w", encoding="utf-8") as f:
+                        json.dump(ann, f, indent=2, ensure_ascii=False)
+                except Exception as e:
+                    logger.warning(f"Failed to write annotation for {image_id} at {final_annotations_dir}: {e}")
+
+                # add record for the Dataset
+                # NOTE: use the actual file path on disk so Dataset/Image can load it before push_to_hub
+                records.append({
+                    "image": str(dest_img_path),
+                    "variety": metadata.variety,
+                    "disease": metadata.disease,
+                    # "crop_details": ann["crop_details"]
+                     "crop_details": cd_serialized
+                })
+
+                labeled_any = True
+
+            if not labeled_any:
+                raise HTTPException(status_code=400, detail="No labeled images to push. Label at least one image before pushing.")
+
+            # create manifest.csv with first column named "image"
+            manifest_path = tmp_base / "manifest.csv"
+            with open(manifest_path, "w", newline="", encoding="utf-8") as mf:
+                writer = csv.writer(mf)
+                writer.writerow(["image", "variety", "disease", "annotation_path"])
+                for image_id, metadata in config.image_metadata.items():
+                    if getattr(metadata, "status", None) != "labeled":
+                        continue
+                    img_rel = metadata.processed_path or str(Path("images") / (metadata.variety or "Unknown") / (metadata.disease or "Unknown") / image_id)
+                    ann_rel = str(Path("annotations") / f"{Path(image_id).stem}.json")
+                    writer.writerow([img_rel, metadata.variety, metadata.disease, ann_rel])
+
+            # generate README in staging (ensure it exists at tmp_base/README.md)
+            readme_path = tmp_base / "README.md"
+            try:
+                create_dataset_readme(tmp_base, config)
+                # double-check and log existence
+                if not readme_path.exists():
+                    logger.warning(f"create_dataset_readme ran but README missing at {readme_path}; creating fallback README.")
+                    raise RuntimeError("README missing after create_dataset_readme")
+                logger.info(f"README created at staging: {readme_path}")
+            except Exception as e:
+                # fallback: write a minimal README so Hub has something to display
+                logger.warning(f"Failed to create README in push staging with helper: {e}. Writing fallback README.md.")
+                try:
+                    fallback = f"# Tulasi Curated Dataset\n\nThis dataset was created by Tulasi Data Curator.\n\nGenerated files: images/, annotations/, manifest.csv\n\nVarieties: {', '.join(config.varieties.keys())}\n"
+                    readme_path.write_text(fallback, encoding="utf-8")
+                    logger.info(f"Wrote fallback README.md at {readme_path}")
+                except Exception as e2:
+                    logger.warning(f"Failed to write fallback README.md at {readme_path}: {e2}")
+
+
+            # Build datasets.Dataset with typed Image column and push to hub
+            try:
+                from datasets import Dataset, Features, Image, Value
+            except Exception:
+                logger.exception("The 'datasets' library is required for pushing with typed 'image' column.")
+                raise HTTPException(status_code=500, detail="Server missing 'datasets' dependency. Install 'datasets' and 'pyarrow'.")
+
+            # transpose records into columns in developer-defined order: image, variety, disease, crop_details
+            col_image = [r["image"] for r in records]
+            col_variety = [r["variety"] for r in records]
+            col_disease = [r["disease"] for r in records]
+            col_crop = [r["crop_details"] for r in records]
+
+            data_dict = {
+                "image": col_image,
+                "variety": col_variety,
+                "disease": col_disease,
+                "crop_details": col_crop
+            }
+
+            features = Features({
+                "image": Image(),
+                "variety": Value("string"),
+                "disease": Value("string"),
+                "crop_details": Value("string")
+            })
+
+            ds = Dataset.from_dict(data_dict)
+            ds = ds.cast(features)
+
+            repo_id = f"{request.namespace}/{request.repo_name}"
+            try:
+                ds.push_to_hub(repo_id, private=request.private, token=request.token)
+                # --- ensure READMe + annotations + manifest are uploaded so Hub displays them ---
+                try:
+                    # make a small upload folder that contains only README, manifest.csv and annotations/
+                    upload_extra = tmp_base / "hub_upload_extra"
+                    if upload_extra.exists():
+                        shutil.rmtree(upload_extra)
+                    upload_extra.mkdir(parents=True, exist_ok=True)
+    
+                    # copy README (already ensured earlier)
+                    if readme_path.exists():
+                        shutil.copy2(readme_path, upload_extra / "README.md")
+                    # copy manifest.csv
+                    if manifest_path.exists():
+                        shutil.copy2(manifest_path, upload_extra / "manifest.csv")
+    
+                    # copy annotations/ directory (if present) preserving filenames
+                    if final_annotations_dir.exists():
+                        (upload_extra / "annotations").mkdir(parents=True, exist_ok=True)
+                        for ann_file in final_annotations_dir.iterdir():
+                            if ann_file.is_file():
+                                shutil.copy2(ann_file, upload_extra / "annotations" / ann_file.name)
+    
+                    # call helper to upload just these files (this will add README & annotation files into the dataset repo)
+                    try:
+                        push_dataset_to_hub(
+                            folder_path=str(upload_extra),
+                            repo_name=request.repo_name,
+                            namespace=request.namespace,
+                            private=request.private,
+                            commit_message=(request.commit_message or "Add README + annotations"),
+                            token=request.token
+                        )
+                        logger.info("Uploaded README/annotations to Hub via push_dataset_to_hub")
+                    except Exception as e:
+                        logger.warning("Failed to upload README/annotations via push_dataset_to_hub: %s", e)
+    
+                except Exception as e:
+                    logger.warning("Error while preparing/uploading extra hub files (README/annotations): %s", e)
+
+            except Exception as e:
+                logger.exception(f"Failed to push dataset via datasets.push_to_hub: {e}")
+                raise HTTPException(status_code=500, detail=f"Failed to push to Hub: {str(e)}")
+
+            repo_url = f"https://huggingface.co/datasets/{request.namespace}/{request.repo_name}"
+            return {"status": "success", "repo_url": repo_url}
+
+        finally:
+            # cleanup staging + archive
+            try:
+                if tmp_base.exists():
+                    shutil.rmtree(tmp_base)
+                    logger.info(f"Removed staging folder: {tmp_base}")
+            except Exception as e:
+                logger.warning(f"Failed to remove staging folder {tmp_base}: {e}")
+            try:
+                if archive_path is not None and archive_path.exists():
+                    archive_path.unlink()
+                if archive_base and archive_base.exists():
+                    shutil.rmtree(archive_base, ignore_errors=True)
+            except Exception:
+                pass
+
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail="Session not found")
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.exception(f"Error pushing to hub: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to push to Hub: {str(e)}")
+
+
+@app.get("/api/whoami")
+async def whoami():
+    """Get current user information from Hugging Face."""
+    try:
+        user_info = get_user_info()
+        return {
+            "namespace": user_info.get("name") if user_info else None,
+            "authenticated": user_info is not None
+        }
+    except Exception as e:
+        logger.error(f"Error getting user info: {e}")
+        return {
+            "namespace": None,
+            "authenticated": False
+        }
+
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint."""
+    return {"status": "healthy", "service": "Tulasi Data Curator"}
+
+# Serve static files (frontend)
+app.mount("/", StaticFiles(directory="app/frontend", html=True), name="static")
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

app/backend/processing.py

@@ -0,0 +1,35 @@
+# /app/backend/processing.py
+# Simplified and fast image processing logic.
+
+import cv2
+import numpy as np
+
+def crop_image(img: np.ndarray, x: int, y: int, w: int, h: int) -> np.ndarray:
+    """Crops an image using the given coordinates (safe)."""
+    # return img[y:y+h, x:x+w]
+    h_img, w_img = img.shape[:2]
+    # clamp bounds (defensive)
+    x0 = max(0, int(x))
+    y0 = max(0, int(y))
+    x1 = min(w_img, x0 + max(0, int(w)))
+    y1 = min(h_img, y0 + max(0, int(h)))
+    if x1 <= x0 or y1 <= y0:
+        raise ValueError("Invalid crop area")
+    return img[y0:y1, x0:x1].copy()
+
+def segment_with_grabcut(img: np.ndarray, rect: tuple) -> np.ndarray:
+    """
+    Performs GrabCut segmentation using a user-provided rectangle.
+    Returns a binary mask.
+    """
+    mask = np.zeros(img.shape[:2], np.uint8)
+    bgdModel = np.zeros((1, 65), np.float64)
+    fgdModel = np.zeros((1, 65), np.float64)
+    
+    # The user's rectangle is a strong hint for the foreground
+    cv2.grabCut(img, mask, rect, bgdModel, fgdModel, 5, cv2.GC_INIT_WITH_RECT)
+    
+    # The mask will have values 0,1,2,3. We want definite and probable foreground.
+    final_mask = np.where((mask == 2) | (mask == 0), 0, 1).astype('uint8')
+    
+    return final_mask * 255 # Return as a black and white image

app/backend/schemas.py

@@ -0,0 +1,49 @@
+# /app/backend/schemas.py
+from pydantic import BaseModel, Field
+from typing import List, Dict, Any, Optional
+
+class CropDetails(BaseModel):
+    x: int
+    y: int
+    width: int
+    height: int
+
+class SegmentationRequest(BaseModel):
+    session_id: str
+    image_id: str
+    rect: CropDetails
+
+class ApplyChangesRequest(BaseModel):
+    session_id: str
+    image_id: str
+    crop_details: Optional[CropDetails] = None
+    mask_path: Optional[str] = None # Path to the generated mask
+    create_new_sample: Optional[bool] = False   # <-- add this
+
+class LabelRequest(BaseModel):
+    session_id: str
+    image_id: str
+    variety: str
+    disease: str
+
+class HubPushRequest(BaseModel):
+    session_id: str
+    repo_name: str
+    namespace: str
+    private: bool = True
+    commit_message: str = "Publish curated dataset"
+    token: Optional[str] = None # For fallback if secret is not set
+
+class ImageMetadata(BaseModel):
+    original_path: str
+    processed_path: Optional[str] = None
+    mask_path: Optional[str] = None
+    variety: Optional[str] = None
+    disease: Optional[str] = None
+    crop_details: Optional[CropDetails] = None
+    status: str = "unlabeled"
+
+class SessionConfig(BaseModel):
+    varieties: Dict[str, List[str]]
+    unlabeled_images: List[str]
+    image_metadata: Dict[str, ImageMetadata] = Field(default_factory=dict)

app/backend/storage.py

@@ -0,0 +1,268 @@
+# /app/backend/storage.py
+# Handles file system operations, ZIP extraction, and session management.
+
+import os
+import uuid
+import zipfile
+import json
+from pathlib import Path
+import shutil
+from typing import Dict, List, Tuple
+
+from .schemas import SessionConfig, ImageMetadata
+
+TEMP_DIR = Path("/tmp/dataset_session")
+OUTPUT_DIR = Path("/tmp/clean_dataset")
+
+# ensure these base dirs exist
+TEMP_DIR.mkdir(parents=True, exist_ok=True)
+OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
+ALLOWED_EXTENSIONS = {".jpg", ".jpeg", ".png"}
+
+def create_new_session() -> Tuple[str, Path]:
+    """Creates a new session directory and returns its ID and path."""
+    session_id = str(uuid.uuid4())
+    session_path = TEMP_DIR / session_id
+    session_path.mkdir(parents=True, exist_ok=True)
+    (session_path / "originals").mkdir(parents=True, exist_ok=True)
+    # initialize an empty session_config.json (optional)
+    # This helps other code that expects a config file to exist after extraction/save
+    # but main.py will save a config after extraction so this is optional.
+    return session_id, session_path
+
+def get_session_path(session_id: str) -> Path:
+    """Gets the path for a given session ID, ensuring it exists."""
+    path = TEMP_DIR / session_id
+    if not path.is_dir():
+        # use FileNotFoundError so callers that catch FileNotFoundError behave correctly
+        raise FileNotFoundError("Session not found")
+    return path
+
+def save_session_config(session_id: str, config: SessionConfig):
+    """Saves the session's configuration to a JSON file."""
+    session_path = get_session_path(session_id)
+    with open(session_path / "session_config.json", "w") as f:
+        f.write(config.model_dump_json(indent=2))
+
+def load_session_config(session_id: str) -> SessionConfig:
+    """Loads the session's configuration from a JSON file."""
+    session_path = get_session_path(session_id)
+    config_path = session_path / "session_config.json"
+    if not config_path.exists():
+        raise FileNotFoundError("Session config not found")
+    with open(config_path, "r") as f:
+        data = json.load(f)
+        return SessionConfig(**data)
+
+def extract_zip(zip_file_path: Path, extract_to: Path) -> List[str]:
+    """Extracts images from a ZIP file, sanitizing filenames."""
+    image_filenames = []
+    #  make sure extract_to exists
+    extract_to.mkdir(parents=True, exist_ok=True)
+
+    with zipfile.ZipFile(zip_file_path, 'r') as zip_ref:
+        for member in zip_ref.infolist():
+            # skip directories and non-image files
+            if member.is_dir() or not any(member.filename.lower().endswith(ext) for ext in ALLOWED_EXTENSIONS):
+                continue
+            
+            # sanitize the name (strip directories)
+            original_filename = Path(member.filename).name
+            sanitized_id = f"{uuid.uuid4().hex[:8]}_{original_filename}"
+            
+            target_path = extract_to / sanitized_id
+            # ensure parent dir exists (should already)
+            target_path.parent.mkdir(parents=True, exist_ok=True)
+
+            with zip_ref.open(member) as source, open(target_path, "wb") as target:
+                shutil.copyfileobj(source, target)
+            image_filenames.append(sanitized_id)
+    return image_filenames
+
+# def move_labeled_file(session_id: str, image_id: str, variety: str, disease: str) -> Tuple[Path, Path]:
+    # """Moves a labeled image to its final structured directory and returns the new paths.
+# 
+    #  NOTE: this function updates metadata.processed_path to a RELATIVE path inside the final dataset
+    # (images/<variety>/<disease>/<image_id>) and writes a per-image annotation JSON that excludes
+    # original_path, mask_path and status (as requested).
+    # """
+    # config = load_session_config(session_id)
+    # if image_id not in config.image_metadata:
+        # raise FileNotFoundError(f"Image id {image_id} not found in session config")
+    # metadata = config.image_metadata[image_id]
+# 
+    # final_dataset_slug = "tulasi-curated-dataset"
+    # final_base_path = OUTPUT_DIR / final_dataset_slug
+    # final_image_dir = final_base_path / "images" / variety / disease
+    # final_mask_dir = final_base_path / "masks"
+    # final_annotations_dir = final_base_path / "annotations"
+# 
+    # final_image_dir.mkdir(parents=True, exist_ok=True)
+    # final_annotations_dir.mkdir(parents=True, exist_ok=True)
+# 
+    # Prefer processed image if present, otherwise fall back to original
+    # source_path_str = metadata.processed_path or metadata.original_path
+    # source_path = Path(source_path_str)
+    # 
+    # Resolve relative paths (relative to session)
+    # if not source_path.is_absolute():
+        # source_path = get_session_path(session_id) / source_path
+# 
+    # if not source_path.exists():
+        # raise FileNotFoundError(f"Source image file not found: {source_path}")
+# 
+    # final_image_path = final_image_dir / image_id
+    # use copy2 to preserve timestamps/metadata
+    # shutil.copy2(source_path, final_image_path)
+# 
+    # Update metadata to point to relative paths inside final dataset
+    # metadata.processed_path =  str(final_image_path)
+    # Update metadata to point to relative path inside final dataset (so HF can resolve it)
+    # metadata.processed_path = str(Path("images") / variety / disease / image_id)
+# 
+    # save_session_config(session_id, config)
+# 
+    # Write a per-image annotation sidecar in final dataset WITHOUT original_path/mask_path/status
+    # try:
+        # produce a plain dict (compat for pydantic v2 / v1)
+        # if hasattr(metadata, "model_dump"):
+            # meta_dict = metadata.model_dump()
+        # elif hasattr(metadata, "dict"):
+            # meta_dict = metadata.dict()
+        # else:
+            # meta_dict = dict(metadata)
+# 
+        # remove unwanted fields
+        # meta_dict.pop("original_path", None)
+        # meta_dict.pop("mask_path", None)
+        # meta_dict.pop("status", None)
+    # 
+        # write a per-image annotation sidecar in final dataset
+        # with open(final_annotations_dir / f"{Path(image_id).stem}.json", "w", encoding="utf-8") as f:
+            # f.write(metadata.model_dump_json(indent=2))
+            # json.dump(meta_dict, f, indent=2, ensure_ascii=False)
+    # except Exception:
+        # best-effort writing annotation — don't fail the labeling step if this fails
+        # pass
+        # 
+    # return final_base_path, final_image_path
+
+
+def move_labeled_file(session_id: str, image_id: str, variety: str, disease: str) -> Tuple[Path, Path]:
+    """Moves a labeled image to its final structured directory and returns the new paths.
+
+    The annotation sidecar will include:
+      - image: relative path inside dataset (images/<variety>/<disease>/<image_id>)
+      - variety, disease, crop_details (if present)
+    and will NOT include original_path, mask_path or status.
+    """
+    config = load_session_config(session_id)
+    if image_id not in config.image_metadata:
+        raise FileNotFoundError(f"Image id {image_id} not found in session config")
+    metadata = config.image_metadata[image_id]
+
+    final_dataset_slug = "tulasi-curated-dataset"
+    final_base_path = OUTPUT_DIR / final_dataset_slug
+    final_image_dir = final_base_path / "images" / variety / disease
+    final_annotations_dir = final_base_path / "annotations"
+
+    final_image_dir.mkdir(parents=True, exist_ok=True)
+    final_annotations_dir.mkdir(parents=True, exist_ok=True)
+
+    # Prefer processed image if present, otherwise fall back to original
+    source_path_str = metadata.processed_path or metadata.original_path
+    source_path = Path(source_path_str)
+
+    # Resolve relative paths (relative to session)
+    if not source_path.is_absolute():
+        source_path = get_session_path(session_id) / source_path
+
+    if not source_path.exists():
+        raise FileNotFoundError(f"Source image file not found: {source_path}")
+
+    final_image_path = final_image_dir / image_id
+    shutil.copy2(source_path, final_image_path)
+
+    # Set processed_path in session config to RELATIVE dataset path so UI sees it
+    metadata.processed_path = str(Path("images") / variety / disease / image_id)
+    save_session_config(session_id, config)
+
+    # Build cleaned annotation dict (rename processed_path -> image, drop unwanted fields)
+    try:
+        if hasattr(metadata, "model_dump"):
+            meta_dict = metadata.model_dump()
+        elif hasattr(metadata, "dict"):
+            meta_dict = metadata.dict()
+        else:
+            meta_dict = dict(metadata)
+
+        # rename processed_path -> image
+        proc = meta_dict.pop("processed_path", None)
+        if proc is None:
+            proc = meta_dict.pop("original_path", None)
+        meta_dict["image"] = str(Path(proc) if proc is not None else Path(""))
+
+        # drop fields we don't want
+        meta_dict.pop("original_path", None)
+        meta_dict.pop("mask_path", None)
+        meta_dict.pop("status", None)
+
+        # write annotation JSON
+        ann_path = final_annotations_dir / f"{Path(image_id).stem}.json"
+        with open(ann_path, "w", encoding="utf-8") as f:
+            json.dump(meta_dict, f, indent=2, ensure_ascii=False)
+    except Exception:
+        # annotation writing is best-effort — don't break labeling on failure
+        pass
+
+    return final_base_path, final_image_path
+
+
+def create_dataset_readme(output_path: Path, config: SessionConfig):
+    """Generates a README.md for the dataset card in output_path (writes README.md)."""
+    output_path.mkdir(parents=True, exist_ok=True)
+    readme_content = f"""
+---
+license: apache-2.0
+tags:
+- image-classification
+- image-segmentation
+- agriculture
+- tulasi
+task_categories:
+- image-classification
+language:
+- en
+---
+# Tulasi Leaf Health Dataset 🌿
+This dataset was curated using the Interactive **Tulasi Data Curator** application.
+
+## Label Schema
+
+### Varieties
+- {', '.join(config.varieties.keys())}
+
+### Diseases
+"""
+    for variety, diseases in config.varieties.items():
+        readme_content += f"\n#### {variety}\n- {', '.join(diseases)}\n"
+
+    # write README.md at root of output_path
+    readme_file = output_path / "README.md"
+    with open(readme_file, "w", encoding="utf-8") as f:
+        f.write(readme_content)
+
+# --- THIS IS THE MISSING FUNCTION ---
+def create_dataset_zip(session_id: str, dataset_slug: str) -> Path:
+    """Creates a ZIP archive of the final curated dataset."""
+    final_base_path = OUTPUT_DIR / dataset_slug
+    if not final_base_path.exists() or not final_base_path.is_dir():
+        raise FileNotFoundError(f"Dataset folder does not exist: {final_base_path}")
+    
+    zip_output_path = OUTPUT_DIR / f"{dataset_slug}" # Path without extension for make_archive
+    
+    # shutil.make_archive returns the full path to the created archive
+    archive_path_str = shutil.make_archive(str(zip_output_path), 'zip', str(final_base_path))
+    
+    return Path(archive_path_str)
+

app/frontend/app.js

@@ -0,0 +1,748 @@
+// /app/frontend/app.js
+document.addEventListener('DOMContentLoaded', () => {
+    // --- State Management ---
+    const state = {
+        sessionId: null,
+        imageIds: [],
+        currentIndex: -1,
+        config: null,
+        cropper: null,
+        // currentMask: { path: null, data: null },
+        applyCropToAll: false,
+        lastCropData: null,
+        activeTab: 'tools',
+
+        // --- NEW: persist last used labels across images ---
+        lastSelectedVariety: null,
+        lastSelectedDisease: null,
+    };
+
+    // --- DOM Element Cache ---
+    const dom = {
+        uploadScreen: document.getElementById('upload-screen'),
+        workspaceScreen: document.getElementById('workspace-screen'),
+        uploadBtn: document.getElementById('upload-btn'),
+        zipUploadInput: document.getElementById('zip-upload-input'),
+        uploadProgress: document.getElementById('upload-progress'),
+        thumbnailGrid: document.getElementById('thumbnail-grid'),
+        imageViewer: document.getElementById('image-viewer'),
+        currentImageName: document.getElementById('current-image-name'),
+        prevBtn: document.getElementById('prev-btn'),
+        nextBtn: document.getElementById('next-btn'),
+        progressText: document.getElementById('progress-text'),
+        varietySelect: document.getElementById('variety-select'),
+        diseaseSelect: document.getElementById('disease-select'),
+        saveLabelBtn: document.getElementById('save-label-btn'),
+        aspectRatioLock: document.getElementById('aspect-ratio-lock'),
+        applyCropAllToggle: document.getElementById('apply-crop-all-toggle'),
+        applyChangesBtn: document.getElementById('apply-changes-btn'),
+        resetImageBtn: document.getElementById('reset-image-btn'),
+        saveCropAsSampleBtn: document.getElementById('save-crop-as-sample-btn'),
+        deleteImageBtn: document.getElementById('delete-image-btn'),
+        exportBtn: document.getElementById('export-btn'),
+        exportModal: document.getElementById('export-modal'),
+        exportSummary: document.getElementById('export-summary'),
+        downloadZipBtn: document.getElementById('download-zip-btn'),
+        hubRepoName: document.getElementById('hub-repo-name'),
+        hubPrivateRepo: document.getElementById('hub-private-repo'),
+        pushToHubBtn: document.getElementById('push-to-hub-btn'),
+        pushStatus: document.getElementById('push-status'),
+        toast: document.getElementById('toast'),
+        helpBtn: document.getElementById('help-btn'),
+        helpModal: document.getElementById('help-modal'),
+        toolsTab: document.getElementById('tools-tab'),
+        labelTab: document.getElementById('label-tab'),
+        toolsContent: document.getElementById('tools-content'),
+        labelContent: document.getElementById('label-content'),
+        maskPreviewContainer: document.getElementById('mask-preview-container')
+    };
+
+    // --- API Helper (improved) ---
+    const api = {
+        async _readResponse(response) {
+            // debug helpful info
+            console.debug(`[api] ${response.url} -> status=${response.status}`, {
+                headers: Object.fromEntries(response.headers.entries())
+            });
+        
+            const ct = (response.headers.get('content-type') || '').toLowerCase();
+            try {
+                if (ct.includes('application/json')) {
+                    return await response.json();
+                } else {
+                    // fallback: return text for non-json content (e.g. file downloads, empty bodies)
+                    const txt = await response.text();
+                    return txt;
+                }
+            } catch (err) {
+                // parsing error
+                console.warn('[api] failed to parse response body as JSON/text', err);
+                // attempt text fallback
+                try {
+                    return await response.text();
+                } catch (_) {
+                    return null;
+                }
+            }
+        },
+    
+        async post(endpoint, body) {
+            const url = `/api${endpoint}`;
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+            const payload = await this._readResponse(response);
+        
+            if (!response.ok) {
+                // If backend returned JSON error with { detail }, propagate meaningful message
+                const msg = (payload && payload.detail) ? payload.detail : `HTTP ${response.status}`;
+                console.error(`[api.post] ${url} failed:`, msg);
+                throw new Error(msg);
+            }
+            return payload;
+        },
+    
+        async get(endpoint) {
+            const url = `/api${endpoint}`;
+            const response = await fetch(url);
+            const payload = await this._readResponse(response);
+        
+            if (!response.ok) {
+                const msg = (payload && payload.detail) ? payload.detail : `HTTP ${response.status}`;
+                console.error(`[api.get] ${url} failed:`, msg);
+                throw new Error(msg);
+            }
+            return payload;
+        },
+    
+        async postForm(endpoint, formData) {
+            const url = `/api${endpoint}`;
+            const response = await fetch(url, {
+                method: 'POST',
+                body: formData,
+            });
+        
+            const payload = await this._readResponse(response);
+        
+            if (!response.ok) {
+                const msg = (payload && payload.detail) ? payload.detail : `HTTP ${response.status}`;
+                console.error(`[api.postForm] ${url} failed:`, msg);
+                throw new Error(msg);
+            }
+            return payload;
+        }
+    };
+
+    // --- UI Helper Functions ---
+    function showToast(message, type = 'info') {
+        dom.toast.textContent = message;
+        dom.toast.className = `show ${type}`;
+        setTimeout(() => {
+            dom.toast.className = 'hidden';
+        }, 3000);
+    }
+
+    function updateProgress() {
+        if (!state.config) return;
+        const total = state.imageIds.length;
+        const labeled = total - state.config.unlabeled_images.length;
+        dom.progressText.textContent = `${labeled}/${total} images labeled`;
+        
+        // Enable export button if at least one image is labeled
+        dom.exportBtn.disabled = labeled === 0;
+    }
+
+    function populateThumbnails() {
+        if (!state.config) return;
+        
+        dom.thumbnailGrid.innerHTML = '';
+        state.imageIds.forEach((imageId, index) => {
+            const img = document.createElement('img');
+            img.src = `/api/image/${state.sessionId}/${imageId}`;
+            img.className = 'thumbnail';
+            img.alt = imageId;
+            
+            const metadata = state.config.image_metadata[imageId];
+            if (metadata && metadata.status === 'labeled') {
+                img.classList.add('labeled');
+            }
+            
+            if (index === state.currentIndex) {
+                img.classList.add('active');
+            }
+            
+            img.addEventListener('click', () => loadImage(index));
+            dom.thumbnailGrid.appendChild(img);
+        });
+    }
+
+    function updateLabelingUI() {
+        if (!state.config || state.currentIndex < 0) return;
+        
+        const imageId = state.imageIds[state.currentIndex];
+        const metadata = state.config.image_metadata[imageId] || {};
+        
+        // Populate variety options
+        dom.varietySelect.innerHTML = '<option value="">Select Variety</option>';
+        Object.keys(state.config.varieties).forEach(variety => {
+            const option = document.createElement('option');
+            option.value = variety;
+            option.textContent = variety;
+            dom.varietySelect.appendChild(option);
+        });
+
+        // Decide which variety to select:
+        // 1. image metadata (already labeled)
+        // 2. last selected variety (from previous image)
+        // 3. none
+        let toSelectVariety = metadata.variety || state.lastSelectedVariety || '';
+        if (toSelectVariety && !state.config.varieties.hasOwnProperty(toSelectVariety)) {
+            // invalid (e.g. schema changed) -> clear it
+            toSelectVariety = '';
+        }
+        dom.varietySelect.value = toSelectVariety;
+      
+        
+        // Update disease options based on selected variety
+        updateDiseaseOptions();
+
+
+        // Decide which disease to select:
+        // 1. image metadata
+        // 2. last selected disease (only if it exists in the current variety)
+        // 3. none
+        let toSelectDisease = metadata.disease || state.lastSelectedDisease || '';
+        // ensure the disease exists in the currently-selected variety list
+        const currentVar = dom.varietySelect.value;
+        if (currentVar && state.config.varieties[currentVar]) {
+            const diseases = state.config.varieties[currentVar];
+            if (!diseases.includes(toSelectDisease)) {
+                // If metadata.disease is valid use it, otherwise clear
+                toSelectDisease = metadata.disease && diseases.includes(metadata.disease) ? metadata.disease : '';
+            //     if (toSelectDisease && !diseases.includes(toSelectDisease)) toSelectDisease = '';
+            }
+        } else {
+            // no variety selected -> clear disease
+            toSelectDisease = '';
+        }
+
+        dom.diseaseSelect.value = toSelectDisease;
+    }
+
+    function updateDiseaseOptions() {
+        const selectedVariety = dom.varietySelect.value;
+        dom.diseaseSelect.innerHTML = '<option value="">Select Disease</option>';
+        
+        if (selectedVariety && state.config.varieties[selectedVariety]) {
+            state.config.varieties[selectedVariety].forEach(disease => {
+                const option = document.createElement('option');
+                option.value = disease;
+                option.textContent = disease;
+                dom.diseaseSelect.appendChild(option);
+            });
+
+            // If lastSelectedDisease exists and is valid for this variety, select it
+            if (state.lastSelectedDisease && state.config.varieties[selectedVariety].includes(state.lastSelectedDisease)) {
+                dom.diseaseSelect.value = state.lastSelectedDisease;
+            }
+        }
+    }
+
+    function switchTab(tabName) {
+        state.activeTab = tabName;
+        
+        // Update tab buttons
+        dom.toolsTab.classList.toggle('active', tabName === 'tools');
+        dom.labelTab.classList.toggle('active', tabName === 'label');
+        
+        // Update tab content
+        dom.toolsContent.classList.toggle('hidden', tabName !== 'tools');
+        dom.labelContent.classList.toggle('hidden', tabName !== 'label');
+    }
+
+    function initCropper(imageUrl) {
+        const imageElement = document.createElement('img');
+        imageElement.src = imageUrl;
+        imageElement.style.maxWidth = '100%';
+        imageElement.style.height = 'auto';
+        
+        dom.imageViewer.innerHTML = '';
+        dom.imageViewer.appendChild(imageElement);
+        
+        // Initialize Cropper.js
+        if (state.cropper) {
+            state.cropper.destroy();
+        }
+        
+        state.cropper = new Cropper(imageElement, {
+            viewMode: 1,
+            dragMode: 'move',
+            aspectRatio: NaN,
+            autoCropArea: 0.8,
+            restore: false,
+            guides: false,
+            center: false,
+            highlight: false,
+            cropBoxMovable: true,
+            cropBoxResizable: true,
+            toggleDragModeOnDblclick: false,
+            ready: function () {
+                // Apply last crop data if available and toggle is on
+                if (state.applyCropToAll && state.lastCropData) {
+                    this.cropper.setData(state.lastCropData);
+                }
+            }
+        });
+    }
+
+    async function loadImage(index) {
+        if (index < 0 || index >= state.imageIds.length) return;
+        
+        state.currentIndex = index;
+        const imageId = state.imageIds[index];
+        
+        // Update current image name
+        dom.currentImageName.textContent = imageId;
+        
+        // Update navigation buttons
+        dom.prevBtn.disabled = index === 0;
+        dom.nextBtn.disabled = index === state.imageIds.length - 1;
+        
+        // Load image in cropper
+        const imageUrl = `/api/image/${state.sessionId}/${imageId}`;
+        initCropper(imageUrl);
+        
+        // Update thumbnails
+        populateThumbnails();
+        
+        // Update labeling UI
+        updateLabelingUI();
+        
+        // Clear mask preview
+        // dom.maskPreviewContainer.innerHTML = '';
+        if (dom.maskPreviewContainer) dom.maskPreviewContainer.innerHTML = '';
+        state.currentMask = { path: null, data: null };
+    }
+
+    // --- Event Handlers ---
+    async function handleZipUpload(file) {
+        const maxSize = 10 * 1024 * 1024 * 1024; // 10GB
+        if (file.size > maxSize) {
+            showToast('File too large. Maximum size is 10GB.', 'error');
+            return;
+        }
+
+        // Show upload progress
+        dom.uploadProgress.innerHTML = '<div class="spinner"></div><p>Uploading and extracting...</p>';
+        dom.uploadProgress.classList.remove('hidden');
+
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            const result = await api.postForm('/upload_zip', formData);
+
+            // Some backends might return a plain string on success (rare), so guard:
+            if (!result || !result.session_id) {
+                console.warn('upload_zip result unexpected:', result);
+                showToast('Upload succeeded but server returned unexpected response', 'warning');
+                // You can still attempt to parse what you got. If it's text maybe the server printed logs.
+                return;
+            }
+            
+            state.sessionId = result.session_id;
+            state.imageIds = result.image_ids || [];
+            state.config = result.config || {};
+
+            // Switch to workspace
+            dom.uploadScreen.classList.add('hidden');
+            dom.workspaceScreen.classList.remove('hidden');
+
+            // Load first image
+            if (state.imageIds.length > 0) {
+                await loadImage(0);
+            }
+
+            updateProgress();
+            showToast(`Successfully loaded ${result.image_count} images!`, 'success');
+        } catch (error) {
+            showToast('Failed to upload ZIP file', 'error');
+        } finally {
+            dom.uploadProgress.classList.add('hidden');
+        }
+    }
+
+    async function handleSaveLabel() {
+        if (!state.sessionId || state.currentIndex < 0) return;
+        
+        const variety = dom.varietySelect.value;
+        const disease = dom.diseaseSelect.value;
+
+        console.log('Saving label', { session_id: state.sessionId, image_index: state.currentIndex, variety, disease });
+        
+        if (!variety || !disease) {
+            showToast('Please select both variety and disease', 'error');
+            return;
+        }
+        
+        try {
+            const imageId = state.imageIds[state.currentIndex];
+
+            // If no processed image exists for this image and we have a crop, apply crop first
+            const metadata = (state.config.image_metadata && state.config.image_metadata[imageId]) || {};
+            const hasProcessedPath = metadata.processed_path && metadata.processed_path.length > 0;
+
+            // If no processed image but user drew a crop, auto apply changes
+            if (!hasProcessedPath && state.cropper) {
+                const cropData = state.cropper.getData();
+                if (cropData && cropData.width > 0 && cropData.height > 0) {
+                    // apply changes first and update local metadata
+                    await handleApplyChanges();
+                }
+            }
+
+            // now call label
+            const result = await api.post('/label', {
+                session_id: state.sessionId,
+                image_id: imageId,
+                variety: variety,
+                disease: disease
+            });
+
+            // persist last-used labels for next image prefills
+            state.lastSelectedVariety = variety;
+            state.lastSelectedDisease = disease;
+
+            // update config from server response
+            if (result && result.config) {
+                state.config = result.config;
+            }
+            
+            updateProgress();
+            populateThumbnails();
+            
+            showToast('Label saved successfully!', 'success');
+            
+            // Move to next unlabeled image
+            const nextUnlabeledIndex = state.imageIds.findIndex((id, idx) => 
+                idx > state.currentIndex && state.config.unlabeled_images.includes(id)
+            );
+            
+            if (nextUnlabeledIndex !== -1) {
+                await loadImage(nextUnlabeledIndex);
+            } else {
+                // If no more unlabeled images after current, find first unlabeled
+                const firstUnlabeledIndex = state.imageIds.findIndex(id => 
+                    state.config.unlabeled_images.includes(id)
+                );
+                if (firstUnlabeledIndex !== -1) {
+                    await loadImage(firstUnlabeledIndex);
+                }
+            }
+        } catch (error) {
+            showToast('Failed to save label', 'error');
+            console.error('SaveLabel error:', error);
+        }
+    }
+
+    async function handleApplyChanges() {
+        if (!state.cropper || !state.sessionId || state.currentIndex < 0) return;
+        
+        const cropData = state.cropper.getData();
+        const cropDetails = {
+            x: Math.round(cropData.x),
+            y: Math.round(cropData.y),
+            width: Math.round(cropData.width),
+            height: Math.round(cropData.height)
+        };
+        
+        try {
+            const imageId = state.imageIds[state.currentIndex];
+            const result = await api.post('/apply_changes', {
+                session_id: state.sessionId,
+                image_id: imageId,
+                crop_details: cropDetails,
+                // mask_path: state.currentMask.path
+            });
+
+            // result.metadata contains updated ImageMetadata from server
+            // Update state.config with new metadata for this image
+            if (result && result.metadata && state.config && state.config.image_metadata) {
+                state.config.image_metadata[imageId] = result.metadata;
+                // If it was previously unlabeled, keep it as unlabeled until label step
+                // Persist last crop so we can reapply for "apply to all" if needed
+                state.lastCropData = cropData;
+            }
+            
+            showToast('Changes applied successfully!', 'success');
+        } catch (error) {
+            showToast('Failed to apply changes', 'error');
+        }
+    }
+
+    async function handleResetImage() {
+        if (!state.sessionId || state.currentIndex < 0) return;
+        
+        // Reset cropper to full image
+        if (state.cropper) {
+            state.cropper.reset();
+        }
+        
+        // Clear mask
+        // dom.maskPreviewContainer.innerHTML = '';
+        if (dom.maskPreviewContainer) dom.maskPreviewContainer.innerHTML = '';
+        state.currentMask = { path: null, data: null };
+        
+        showToast('Image reset to original', 'success');
+    }
+
+    async function handleDownloadZip() {
+        if (!state.sessionId) return;
+        
+        try {
+            showToast('Preparing dataset ZIP...', 'info');
+            
+            // Create a download link
+            const link = document.createElement('a');
+            link.href = `/api/export_zip/${state.sessionId}`;
+            link.download = 'tulasi-curated-dataset.zip';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            
+            showToast('Download started!', 'success');
+        } catch (error) {
+            showToast('Failed to download dataset', 'error');
+        }
+    }
+
+    async function handlePushToHub() {
+        const repoName = dom.hubRepoName.value.trim();
+        if (!repoName) {
+            showToast('Repository Name is required.', 'error');
+            return;
+        }
+
+        dom.pushStatus.classList.remove('hidden');
+        dom.pushStatus.textContent = 'Connecting to Hugging Face...';
+
+        try {
+            // Get current user namespace
+            const userInfo = await api.get('/whoami');
+            if (!userInfo.namespace) {
+                throw new Error("Hugging Face authentication not available. Please check HF_TOKEN.");
+            }
+            
+            const namespace = userInfo.namespace;
+            dom.pushStatus.textContent = `Pushing dataset to ${namespace}/${repoName}...`;
+
+            // Push to hub
+            const response = await api.post('/push_to_hub', {
+                session_id: state.sessionId,
+                repo_name: repoName,
+                namespace: namespace,
+                private: dom.hubPrivateRepo.checked,
+                commit_message: "Curated Tulasi leaf dataset"
+            });
+            
+            dom.pushStatus.innerHTML = `
+                <p style="color: var(--primary-color);">✅ Dataset published successfully!</p>
+                <p><a href="${response.repo_url}" target="_blank" rel="noopener noreferrer">${response.repo_url}</a></p>
+            `;
+
+        } catch (error) {
+            dom.pushStatus.innerHTML = `<p style="color: #ff6b6b;">❌ Error: ${error.message}</p>`;
+            showToast(error.message, 'error');
+        }
+    }
+
+    // --- Initialize Application ---
+    function init() {
+        // Upload handlers
+        dom.uploadBtn.addEventListener('click', () => dom.zipUploadInput.click());
+        dom.zipUploadInput.addEventListener('change', (e) => {
+            if (e.target.files.length) {
+                handleZipUpload(e.target.files[0]);
+            }
+        });
+
+        // Navigation handlers
+        dom.prevBtn.addEventListener('click', () => {
+            if (state.currentIndex > 0) {
+                loadImage(state.currentIndex - 1);
+            }
+        });
+        
+        dom.nextBtn.addEventListener('click', () => {
+            if (state.currentIndex < state.imageIds.length - 1) {
+                loadImage(state.currentIndex + 1);
+            }
+        });
+
+        // Tab switching
+        dom.toolsTab.addEventListener('click', () => switchTab('tools'));
+        dom.labelTab.addEventListener('click', () => switchTab('label'));
+
+        // Tool handlers
+        // dom.segmentBtn.addEventListener('click', handleGenerateMask);
+        dom.applyChangesBtn.addEventListener('click', handleApplyChanges);
+        dom.resetImageBtn.addEventListener('click', handleResetImage);
+
+        // Delete image handler
+        if (dom.deleteImageBtn) {
+            dom.deleteImageBtn.addEventListener('click', async () => {
+                if (!state.sessionId || state.currentIndex < 0) return;
+                const imageId = state.imageIds[state.currentIndex];
+                if (!confirm('Delete this image from session? This cannot be undone.')) return;
+            
+                try {
+                    const res = await api.post('/delete_image', {
+                        session_id: state.sessionId,
+                        image_id: imageId
+                    });
+                    // remove from local state
+                    state.imageIds.splice(state.currentIndex, 1);
+                    if (state.config && state.config.image_metadata) {
+                        delete state.config.image_metadata[imageId];
+                        const uiIndex = state.config.unlabeled_images.indexOf(imageId);
+                        if (uiIndex !== -1) state.config.unlabeled_images.splice(uiIndex, 1);
+                    }
+                
+                    // load next or previous
+                    const nextIndex = Math.min(state.currentIndex, state.imageIds.length - 1);
+                    if (state.imageIds.length > 0 && nextIndex >= 0) {
+                        await loadImage(nextIndex);
+                    } else {
+                        // no images left -> show upload screen
+                        dom.workspaceScreen.classList.add('hidden');
+                        dom.uploadScreen.classList.remove('hidden');
+                    }
+                    populateThumbnails();
+                    updateProgress();
+                    showToast('Image deleted from session', 'success');
+                } catch (error) {
+                    console.error('Delete image error', error);
+                    showToast('Failed to delete image', 'error');
+                }
+            });
+        }
+
+        dom.saveCropAsSampleBtn.addEventListener('click', async () => {
+            if (!state.cropper || !state.sessionId || state.currentIndex < 0) return;
+            const cropData = state.cropper.getData(true);
+            try {
+                const imageId = state.imageIds[state.currentIndex];
+                const result = await api.post('/apply_changes', {
+                    session_id: state.sessionId,
+                    image_id: imageId,
+                    crop_details: cropData,
+                    create_new_sample: true
+                });
+                if (result && result.new_image_id) {
+                    // Add new sample to local state + UI
+                    state.imageIds.push(result.new_image_id);
+                    state.config.image_metadata[result.new_image_id] = result.metadata;
+                    state.config.unlabeled_images = state.config.unlabeled_images || [];
+                    state.config.unlabeled_images.push(result.new_image_id);
+                    populateThumbnails();
+                    updateProgress();
+                    showToast('Saved cropped sample', 'success');
+                }
+            } catch (err) {
+                showToast('Failed to save crop as new sample', 'error');
+            }
+        });
+
+
+
+
+        // Aspect ratio lock toggle
+        dom.aspectRatioLock.addEventListener('change', (e) => {
+            if (state.cropper) {
+                state.cropper.setAspectRatio(e.target.checked ? 1 : NaN);
+            }
+        });
+
+        // Apply crop to all toggle
+        dom.applyCropAllToggle.addEventListener('change', (e) => {
+            state.applyCropToAll = e.target.checked;
+        });
+
+        // Labeling handlers
+        dom.varietySelect.addEventListener('change', updateDiseaseOptions);
+        dom.saveLabelBtn.addEventListener('click', handleSaveLabel);
+
+        // Export handlers
+        dom.exportBtn.addEventListener('click', async () => {
+            try {
+                const summary = await api.get(`/summary/${state.sessionId}`);
+                dom.exportSummary.innerHTML = `
+                    <h4>Dataset Summary</h4>
+                    <p><strong>Total Images:</strong> ${summary.labeled_count + summary.unlabeled_count}</p>
+                    <p><strong>Labeled:</strong> ${summary.labeled_count}</p>
+                    <p><strong>Unlabeled:</strong> ${summary.unlabeled_count}</p>
+                    ${Object.keys(summary.class_counts).length > 0 ? 
+                        '<h5>Class Distribution:</h5><ul>' + 
+                        Object.entries(summary.class_counts).map(([key, count]) => 
+                            `<li>${key}: ${count}</li>`).join('') + 
+                        '</ul>' : ''}
+                `;
+                dom.exportModal.classList.remove('hidden');
+            } catch (error) {
+                showToast('Failed to load summary', 'error');
+            }
+        });
+
+        dom.downloadZipBtn.addEventListener('click', handleDownloadZip);
+        dom.pushToHubBtn.addEventListener('click', handlePushToHub);
+
+        // Modal handlers
+        dom.exportModal.querySelector('.close-btn').addEventListener('click', () => {
+            dom.exportModal.classList.add('hidden');
+        });
+
+        // Help modal (if exists)
+        if (dom.helpBtn && dom.helpModal) {
+            dom.helpBtn.addEventListener('click', () => dom.helpModal.classList.remove('hidden'));
+            dom.helpModal.querySelector('.close-btn')?.addEventListener('click', () => {
+                dom.helpModal.classList.add('hidden');
+            });
+        }
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (dom.workspaceScreen && !dom.workspaceScreen.classList.contains('hidden')) {
+                switch(e.key) {
+                    case 'ArrowLeft':
+                        if (state.currentIndex > 0) {
+                            e.preventDefault();
+                            loadImage(state.currentIndex - 1);
+                        }
+                        break;
+                    case 'ArrowRight':
+                        if (state.currentIndex < state.imageIds.length - 1) {
+                            e.preventDefault();
+                            loadImage(state.currentIndex + 1);
+                        }
+                        break;
+                    case 'Enter':
+                        if (state.activeTab === 'label') {
+                            e.preventDefault();
+                            handleSaveLabel();
+                        }
+                        break;
+                }
+            }
+        });
+
+        // Initialize with tools tab
+        switchTab('tools');
+        
+        console.log('Tulasi Data Curator initialized successfully');
+    }
+
+    // Start the application
+    init();
+});

app/frontend/index.html

@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tulasi Data Curator</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>
+</head>
+<body>
+    <div id="app-container">
+        <!-- Header -->
+        <header id="app-header">
+            <h1>🌿 Tulasi Data Curator</h1>
+            <div id="progress-indicator">
+                <span id="progress-text">Upload a ZIP to begin</span>
+            </div>
+            <div class="header-actions">
+                <button id="help-btn">Disease Guide</button>
+                <button id="export-btn" class="primary-btn" disabled>Export & Push</button>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main id="main-content">
+            <!-- Upload Screen -->
+            <div id="upload-screen" class="screen">
+                <div class="upload-box">
+                    <h2>Upload Your Image Dataset</h2>
+                    <p>Select a ZIP file containing your Tulasi leaf images (up to 10GB)</p>
+                    <button id="upload-btn" class="primary-btn">Choose ZIP File</button>
+                    <input type="file" id="zip-upload-input" accept=".zip" hidden>
+                    <div id="upload-progress" class="hidden">
+                        <div class="spinner"></div>
+                        <p>Processing your images...</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Workspace Screen -->
+            <div id="workspace-screen" class="screen hidden">
+                <!-- Left Panel - Thumbnails -->
+                <div id="left-panel" class="panel">
+                    <h3>Images</h3>
+                    <div id="thumbnail-grid"></div>
+                </div>
+
+                <!-- Center Panel - Image Viewer -->
+                <div id="center-panel" class="panel">
+                    <div id="image-viewer"></div>
+                    <div id="image-toolbar">
+                        <div id="current-image-name">No image selected</div>
+                        <div class="toolbar-buttons">
+                            <button id="prev-btn" disabled>◀ Previous</button>
+                            <button id="next-btn" disabled>Next ▶</button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Right Panel - Tools & Labels -->
+                <div id="right-panel" class="panel">
+                    <div id="tools-label-tabs">
+                        <button id="tools-tab" class="tab-btn active">Tools</button>
+                        <button id="label-tab" class="tab-btn">Label</button>
+                    </div>
+
+                    <!-- Tools Tab Content -->
+                    <div id="tools-content" class="tab-content">
+                        <div class="tool-group">
+                            <h3>Cropping & resizing</h3>
+                            <p>Draw a bounding box around the leaf area to make the image more clear.</p>
+                            
+                            <div class="checkbox-group">
+                                <input type="checkbox" id="aspect-ratio-lock">
+                                <label for="aspect-ratio-lock">Lock aspect ratio (1:1)</label>
+                            </div>
+                            
+                            <div class="checkbox-group">
+                                <input type="checkbox" id="apply-crop-all-toggle">
+                                <label for="apply-crop-all-toggle">Apply crop to all images</label>
+                            </div>
+                            
+                            <div class="button-group">
+                                <!-- <button id="segment-btn" class="primary-btn">Generate Mask</button> -->
+                                <button id="apply-changes-btn">Apply Changes</button>
+                                <button id="reset-image-btn">Reset Image</button>
+                                <button id="save-crop-as-sample-btn" class="primary-btn">Save Crop as New Sample</button>
+                                <button id="delete-image-btn" class="secondary-btn" style="background: #a94442; border-color:#a94442;">Delete Image</button>
+
+                            </div>
+                            
+                            <div id="mask-preview-container"></div>
+                        </div>
+                    </div>
+
+                    <!-- Label Tab Content -->
+                    <div id="label-content" class="tab-content hidden">
+                        <h3>Label Current Image</h3>
+                        
+                        <div class="form-group">
+                            <label for="variety-select">Variety:</label>
+                            <select id="variety-select">
+                                <option value="">Select Variety</option>
+                            </select>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="disease-select">Disease/Condition:</label>
+                            <select id="disease-select">
+                                <option value="">Select Disease</option>
+                            </select>
+                        </div>
+                        
+                        <button id="save-label-btn" class="primary-btn">Save Label</button>
+                        
+                        <div class="label-info">
+                            <h4>Quick Reference</h4>
+                            <p><strong>Healthy:</strong> Green, vibrant leaves</p>
+                            <p><strong>Leaf Spot:</strong> Dark spots or patches</p>
+                            <p><strong>Powdery Mildew:</strong> White powdery coating</p>
+                            <p><strong>Bacterial Blight:</strong> Water-soaked lesions</p>
+                            <p><strong>Nutrient Deficiency:</strong> Yellowing or discoloration</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Export & Push Modal -->
+    <div id="export-modal" class="modal hidden">
+        <div class="modal-content">
+            <span class="close-btn">&times;</span>
+            <h2>Export & Push to Hub</h2>
+            <div id="export-summary"></div>
+            
+            <hr>
+            
+            <div class="export-section">
+                <h3>1. Download Your Dataset</h3>
+                <p>Download the prepared dataset as a ZIP file to your local machine.</p>
+                <button id="download-zip-btn" class="secondary-btn">Download Dataset ZIP</button>
+            </div>
+            
+            <hr>
+            
+            <div class="export-section">
+                <h3>2. Publish to Hugging Face Hub</h3>
+                <div class="warning-banner">
+                    <strong>Note:</strong> This requires HF_TOKEN to be set in the Space settings.
+                </div>
+                
+                <div class="form-group">
+                    <label for="hub-repo-name">Repository Name</label>
+                    <input type="text" id="hub-repo-name" placeholder="e.g., tulasi-leaf-dataset">
+                </div>
+                
+                <div class="checkbox-group">
+                    <input type="checkbox" id="hub-private-repo" checked>
+                    <label for="hub-private-repo">Make repository private</label>
+                </div>
+                
+                <button id="push-to-hub-btn" class="primary-btn">Push to Hub</button>
+                <div id="push-status" class="hidden"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Help Modal -->
+    <div id="help-modal" class="modal hidden">
+        <div class="modal-content">
+            <span class="close-btn">&times;</span>
+            <h2>Disease Guide</h2>
+            
+            <div class="disease-guide">
+                <h3>Common Tulasi Leaf Diseases</h3>
+                
+                <div class="disease-item">
+                    <h4>Healthy</h4>
+                    <p>Vibrant green leaves with no visible damage or discoloration.</p>
+                </div>
+                
+                <div class="disease-item">
+                    <h4>Leaf Spot</h4>
+                    <p>Dark brown or black circular spots on leaves, often with yellow halos.</p>
+                </div>
+                
+                <div class="disease-item">
+                    <h4>Powdery Mildew</h4>
+                    <p>White powdery coating on leaf surfaces, usually on upper side.</p>
+                </div>
+                
+                <div class="disease-item">
+                    <h4>Downy Mildew</h4>
+                    <p>Yellow patches on upper leaf surface with fuzzy growth underneath.</p>
+                </div>
+                
+                <div class="disease-item">
+                    <h4>Bacterial Blight</h4>
+                    <p>Water-soaked lesions that turn brown/black, often with yellow margins.</p>
+                </div>
+                
+                <div class="disease-item">
+                    <h4>Nutrient Deficiency</h4>
+                    <p>Yellowing leaves, stunted growth, or unusual discoloration patterns.</p>
+                </div>
+                
+                <div class="disease-item">
+                    <h4>Insect Damage</h4>
+                    <p>Holes, chewed edges, or visible insect feeding marks on leaves.</p>
+                </div>
+                
+                <div class="disease-item">
+                    <h4>Drought/Scorch</h4>
+                    <p>Brown, crispy edges or wilted appearance due to water stress.</p>
+                </div>
+                
+                <div class="disease-item">
+                    <h4>Mechanical Damage</h4>
+                    <p>Physical tears, cuts, or bruising from handling or environmental factors.</p>
+                </div>
+                
+                <div class="disease-item">
+                    <h4>Unknown</h4>
+                    <p>Symptoms that don't clearly match other categories or unclear conditions.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast Notification -->
+    <div id="toast" class="hidden"></div>
+
+    <script src="app.js"></script>
+</body>
+</html>

app/frontend/styles.css

@@ -0,0 +1,820 @@
+/* /app/frontend/styles.css - Dark Mode Theme */
+:root {
+    --primary-color: #4CAF50;
+    --primary-hover: #66bb6a;
+    --secondary-color: #2196F3;
+    --secondary-hover: #42A5F5;
+    --bg-color: #121212;
+    --surface-color: #1e1e1e;
+    --panel-color: #2a2a2a;
+    --border-color: #444;
+    --text-color: #e0e0e0;
+    --text-muted: #888;
+    --success-color: #4CAF50;
+    --warning-color: #FF9800;
+    --error-color: #F44336;
+    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+/* Utility: hide/show toggled by JS */
+.hidden {
+    display: none !important;
+}
+
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+canvas, .cropper-container {
+    max-width: 100%;
+}
+
+body {
+    font-family: var(--font-family);
+    margin: 0;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    font-size: 14px;
+}
+
+#app-container {
+    width: 100%;
+    max-width: 1600px;
+    height: 95vh;
+    background: var(--surface-color);
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Header */
+#app-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--surface-color);
+    min-height: 60px;
+}
+
+#app-header h1 {
+    font-size: 1.4em;
+    margin: 0;
+    color: var(--text-color);
+    font-weight: 600;
+}
+
+#progress-indicator {
+    font-weight: 500;
+    background: var(--panel-color);
+    padding: 8px 20px;
+    border-radius: 20px;
+    color: var(--text-muted);
+    border: 1px solid var(--border-color);
+}
+
+.header-actions {
+    display: flex;
+    gap: 10px;
+}
+
+/* Main Content & Panels */
+#main-content {
+    flex-grow: 1;
+    display: flex;
+    overflow: hidden;
+}
+
+.screen {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+
+.screen.hidden {
+    display: none;
+}
+
+#workspace-screen {
+    padding: 10px;
+    gap: 10px;
+}
+
+.panel {
+    background: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+#left-panel {
+    flex: 0 0 280px;
+}
+
+#center-panel {
+    flex: 1 1 auto;
+    background: var(--bg-color);
+    min-width: 400px;
+}
+
+#right-panel {
+    flex: 0 0 380px;
+}
+
+/* Upload Screen */
+#upload-screen {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: var(--bg-color);
+}
+
+.upload-box {
+    text-align: center;
+    border: 2px dashed var(--border-color);
+    padding: 60px 40px;
+    border-radius: 12px;
+    background: var(--surface-color);
+    max-width: 600px;
+    transition: border-color 0.3s ease;
+}
+
+.upload-box:hover {
+    border-color: var(--primary-color);
+}
+
+.upload-box h2 {
+    margin: 0 0 15px 0;
+    color: var(--text-color);
+    font-size: 1.8em;
+}
+
+.upload-box p {
+    margin: 0 0 25px 0;
+    color: var(--text-muted);
+    font-size: 1.1em;
+}
+
+/* Left Panel - Thumbnails */
+#left-panel h3 {
+    margin: 0;
+    padding: 15px 20px;
+    font-size: 1.1em;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--panel-color);
+    font-weight: 600;
+}
+
+#thumbnail-grid {
+    padding: 15px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 12px;
+    overflow-y: auto;
+    flex-grow: 1;
+}
+
+.thumbnail {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    border-radius: 6px;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: all 0.2s ease;
+}
+
+.thumbnail:hover {
+    border-color: var(--text-muted);
+    transform: scale(1.02);
+}
+
+.thumbnail.active {
+    border-color: var(--primary-color);
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
+}
+
+.thumbnail.labeled {
+    opacity: 0.5;
+    position: relative;
+}
+
+.thumbnail.labeled::after {
+    content: "✓";
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background: var(--success-color);
+    color: white;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+/* Center Panel - Image Viewer */
+#image-viewer {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    padding: 10px;
+    background: var(--bg-color);
+}
+
+#image-viewer img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 4px;
+}
+
+#image-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 15px;
+    border-top: 1px solid var(--border-color);
+    background: var(--panel-color);
+}
+
+#current-image-name {
+    font-size: 0.95em;
+    color: var(--text-color);
+    font-weight: 500;
+}
+
+.toolbar-buttons {
+    display: flex;
+    gap: 10px;
+}
+
+/* Right Panel - Tabs */
+#tools-label-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.tab-btn {
+    flex: 1;
+    padding: 15px 12px;
+    background: var(--surface-color);
+    border: none;
+    cursor: pointer;
+    font-size: 1em;
+    color: var(--text-muted);
+    border-bottom: 3px solid transparent;
+    transition: all 0.2s ease;
+    font-weight: 500;
+}
+
+.tab-btn:hover {
+    background: var(--panel-color);
+    color: var(--text-color);
+}
+
+.tab-btn.active {
+    color: var(--primary-color);
+    font-weight: 600;
+    border-bottom-color: var(--primary-color);
+    background: var(--panel-color);
+}
+
+.tab-content {
+    padding: 20px;
+    overflow-y: auto;
+    flex-grow: 1;
+}
+
+.tab-content.hidden {
+    display: none;
+}
+
+.tab-content h3 {
+    margin-top: 0;
+    font-size: 1.2em;
+    color: var(--text-color);
+    margin-bottom: 20px;
+    font-weight: 600;
+}
+
+/* Form Elements */
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+select, input[type="text"] {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--panel-color);
+    color: var(--text-color);
+    font-size: 14px;
+    transition: border-color 0.2s ease;
+}
+
+select:focus, input[type="text"]:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
+}
+
+.checkbox-group {
+    display: flex;
+    align-items: center;
+    margin: 15px 0;
+}
+
+.checkbox-group input[type="checkbox"] {
+    width: auto;
+    margin-right: 10px;
+    accent-color: var(--primary-color);
+}
+
+.checkbox-group label {
+    margin-bottom: 0;
+    font-weight: normal;
+    cursor: pointer;
+}
+
+/* Tool Groups */
+.tool-group {
+    margin-bottom: 25px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 20px;
+    background: var(--bg-color);
+}
+
+.tool-group h3 {
+    margin-top: 0;
+    margin-bottom: 15px;
+    color: var(--primary-color);
+    font-size: 1.1em;
+}
+
+.tool-group p {
+    color: var(--text-muted);
+    margin-bottom: 20px;
+    line-height: 1.5;
+}
+
+.button-group {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 15px;
+}
+
+#mask-preview-container {
+    margin-top: 20px;
+    padding: 15px;
+    background: var(--surface-color);
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+}
+
+#mask-preview-container h4 {
+    margin: 0 0 10px 0;
+    color: var(--text-color);
+}
+
+#mask-preview-container img {
+    max-width: 100%;
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+}
+
+/* Label Info */
+.label-info {
+    background: var(--bg-color);
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    margin-top: 25px;
+}
+
+.label-info h4 {
+    margin: 0 0 15px 0;
+    color: var(--primary-color);
+}
+
+.label-info p {
+    margin: 8px 0;
+    font-size: 13px;
+    line-height: 1.4;
+}
+
+.label-info strong {
+    color: var(--text-color);
+}
+
+/* Buttons */
+button {
+    padding: 12px 18px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--panel-color);
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--text-color);
+    transition: all 0.2s ease;
+    font-weight: 500;
+    font-family: inherit;
+}
+
+button:hover {
+    background-color: #3a3a3a;
+    border-color: var(--text-muted);
+    transform: translateY(-1px);
+}
+
+button:active {
+    transform: translateY(0);
+}
+
+button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    transform: none;
+}
+
+.primary-btn {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+    color: white;
+    font-weight: 600;
+}
+
+.primary-btn:hover:not(:disabled) {
+    background: var(--primary-hover);
+    border-color: var(--primary-hover);
+}
+
+.secondary-btn {
+    background: var(--secondary-color);
+    border-color: var(--secondary-color);
+    color: white;
+    font-weight: 600;
+}
+
+.secondary-btn:hover:not(:disabled) {
+    background: var(--secondary-hover);
+    border-color: var(--secondary-hover);
+}
+
+/* Modals */
+.modal {
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal.hidden {
+    display: none;
+}
+
+.modal-content {
+    background-color: var(--surface-color);
+    padding: 30px;
+    border-radius: 12px;
+    width: 90%;
+    max-width: 600px;
+    max-height: 80vh;
+    overflow-y: auto;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+}
+
+.close-btn {
+    color: var(--text-muted);
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    line-height: 1;
+    margin-top: -10px;
+    margin-right: -10px;
+    transition: color 0.2s ease;
+}
+
+.close-btn:hover {
+    color: var(--text-color);
+}
+
+.modal h2 {
+    margin: 0 0 25px 0;
+    color: var(--text-color);
+    font-size: 1.5em;
+    font-weight: 600;
+}
+
+.modal hr {
+    border: none;
+    border-top: 1px solid var(--border-color);
+    margin: 25px 0;
+}
+
+/* Export Modal */
+.export-section {
+    margin: 20px 0;
+}
+
+.export-section h3 {
+    color: var(--primary-color);
+    margin-bottom: 10px;
+    font-size: 1.2em;
+}
+
+.export-section p {
+    color: var(--text-muted);
+    margin-bottom: 15px;
+    line-height: 1.5;
+}
+
+.warning-banner {
+    background-color: rgba(255, 152, 0, 0.1);
+    border: 1px solid var(--warning-color);
+    padding: 15px;
+    border-radius: 6px;
+    margin-bottom: 20px;
+    font-size: 14px;
+}
+
+.warning-banner strong {
+    color: var(--warning-color);
+}
+
+#export-summary {
+    background: var(--bg-color);
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    margin-bottom: 20px;
+}
+
+#export-summary h4 {
+    margin: 0 0 15px 0;
+    color: var(--primary-color);
+}
+
+#export-summary p {
+    margin: 8px 0;
+    color: var(--text-color);
+}
+
+#export-summary h5 {
+    margin: 15px 0 10px 0;
+    color: var(--text-color);
+}
+
+#export-summary ul {
+    margin: 0;
+    padding-left: 20px;
+}
+
+#export-summary li {
+    color: var(--text-muted);
+    margin: 5px 0;
+}
+
+#push-status {
+    margin-top: 15px;
+    padding: 15px;
+    background: var(--bg-color);
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    font-size: 14px;
+}
+
+#push-status.hidden {
+    display: none;
+}
+
+#push-status a {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+#push-status a:hover {
+    text-decoration: underline;
+}
+
+/* Disease Guide */
+.disease-guide {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.disease-item {
+    margin-bottom: 20px;
+    padding: 15px;
+    background: var(--bg-color);
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+}
+
+.disease-item h4 {
+    margin: 0 0 8px 0;
+    color: var(--primary-color);
+    font-size: 1.1em;
+}
+
+.disease-item p {
+    margin: 0;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+/* Toast Notification */
+#toast {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 15px 25px;
+    border-radius: 25px;
+    background-color: var(--panel-color);
+    color: var(--text-color);
+    z-index: 2000;
+    opacity: 0;
+    transition: all 0.3s ease;
+    border: 1px solid var(--border-color);
+    font-weight: 500;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+}
+
+#toast.show {
+    opacity: 1;
+    bottom: 30px;
+}
+
+#toast.success {
+    background-color: var(--success-color);
+    color: white;
+    border-color: var(--success-color);
+}
+
+#toast.error {
+    background-color: var(--error-color);
+    color: white;
+    border-color: var(--error-color);
+}
+
+/* Spinner */
+.spinner {
+    border: 4px solid var(--border-color);
+    border-top: 4px solid var(--primary-color);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 15px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Cropper.js Customizations */
+.cropper-view-box {
+    outline: 2px solid var(--primary-color) !important;
+}
+
+.cropper-face {
+    background-color: rgba(76, 175, 80, 0.1) !important;
+}
+
+.cropper-line,
+.cropper-point {
+    background-color: var(--primary-color) !important;
+}
+
+.cropper-point.point-se {
+    width: 8px !important;
+    height: 8px !important;
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+    #left-panel {
+        flex: 0 0 220px;
+    }
+    
+    #right-panel {
+        flex: 0 0 320px;
+    }
+}
+
+@media (max-width: 900px) {
+    #workspace-screen {
+        flex-direction: column;
+    }
+    
+    #left-panel,
+    #right-panel {
+        flex: 0 0 200px;
+    }
+    
+    #center-panel {
+        flex: 1 1 300px;
+    }
+    
+    #thumbnail-grid {
+        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+        gap: 8px;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 600px) {
+    #app-container {
+        height: 100vh;
+        border-radius: 0;
+    }
+    
+    #app-header {
+        flex-direction: column;
+        gap: 10px;
+        padding: 15px;
+    }
+    
+    #app-header h1 {
+        font-size: 1.2em;
+    }
+    
+    .upload-box {
+        padding: 40px 20px;
+        margin: 20px;
+    }
+    
+    .modal-content {
+        padding: 20px;
+        margin: 20px;
+        width: calc(100% - 40px);
+    }
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-color);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}
+
+/* Focus States */
+button:focus,
+select:focus,
+input:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}

requirements.txt

@@ -0,0 +1,13 @@
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+python-multipart==0.0.6
+aiofiles==23.2.1
+opencv-python-headless==4.8.1.78
+numpy==1.24.3
+Pillow==10.1.0
+pydantic==2.5.0
+huggingface-hub==0.19.4
+pathlib==1.0.1
+datasets
+pyarrow
+python-dotenv