diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 3ea75cc..eeceffa 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -22,8 +22,14 @@ jobs:
     - name: Install dependencies
       run: |
         python -m pip install --upgrade pip
-        if [ -f app/requirements_simplified.txt ]; then pip install -r app/requirements_simplified.txt; fi
+        # Install PyTorch CPU version first with the correct index
+        pip install torch==2.5.1+cpu torchvision==0.20.1+cpu --index-url https://download.pytorch.org/whl/cpu
+        # Install CI-specific requirements (CPU versions)
+        if [ -f app/requirements-ci.txt ]; then pip install -r app/requirements-ci.txt; fi
+        # Install test requirements
         if [ -f app/tests/test_requirements.txt ]; then pip install -r app/tests/test_requirements.txt; fi
+        # Install SAM model (may be needed for imports, even though tests use mocks)
+        pip install git+https://github.com/facebookresearch/segment-anything.git
     
     - name: Set test mode environment variable
       run: |
@@ -34,34 +40,40 @@ jobs:
         cd app/tests
         python run_unittests.py
 
-  web-build:
+  web-validation:
     runs-on: ubuntu-latest
     
     steps:
     - uses: actions/checkout@v3
     
-    - name: Set up Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: '18'
-        cache: 'npm'
-        cache-dependency-path: 'web/package.json'
-    
-    - name: Install dependencies
-      working-directory: ./web
-      run: npm ci
-    
-    - name: Build
-      working-directory: ./web
-      run: npm run build
+    - name: Validate HTML files
+      run: |
+        echo "Validating web static files..."
+        # Check if main HTML files exist
+        test -f web/index.html || (echo "Missing index.html" && exit 1)
+        test -f web/styles.css || (echo "Missing styles.css" && exit 1)
+        test -d web/js || (echo "Missing js directory" && exit 1)
+        echo "Web files validation passed"
     
-    - name: Run linting
-      working-directory: ./web
-      run: npm run lint || true
+    - name: Check JavaScript syntax
+      run: |
+        echo "Checking JavaScript syntax..."
+        # Use Python to check basic JavaScript syntax if Node.js is available
+        if command -v node >/dev/null 2>&1; then
+          for js_file in web/js/*.js; do
+            if [ -f "$js_file" ]; then
+              echo "Checking $js_file..."
+              node -c "$js_file" || (echo "Syntax error in $js_file" && exit 1)
+            fi
+          done
+        else
+          echo "Node.js not available, skipping JS syntax check..."
+        fi
+        echo "JavaScript validation completed"
 
   docker-build:
     runs-on: ubuntu-latest
-    needs: [app-tests, web-build]
+    needs: [app-tests, web-validation]
     if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master')
     
     steps:
@@ -70,9 +82,11 @@ jobs:
     - name: Set up Docker Buildx
       uses: docker/setup-buildx-action@v2
     
-    - name: Build and tag Docker images
+    - name: Build and test Docker images
       run: |
+        echo "Building Docker images..."
         docker compose build
+        echo "Docker build completed successfully"
       
     # Uncomment and configure the following if you want to push to Docker Hub or another registry
     # - name: Login to Docker Hub
@@ -83,4 +97,4 @@ jobs:
     # 
     # - name: Push Docker images
     #   run: |
-    #     docker compose push
+    #     docker compose push
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 90ee09e..d7b91ec 100644
--- a/.gitignore
+++ b/.gitignore
@@ -172,3 +172,9 @@ cython_debug/
 
 # PyPI configuration file
 .pypirc
+
+# SAT-Annotator specific directories
+annotations/
+uploads/
+logs/
+app/logs/
diff --git a/Dockerfile.app b/Dockerfile.app
index 8e394d9..ad3cb1e 100644
--- a/Dockerfile.app
+++ b/Dockerfile.app
@@ -1,13 +1,14 @@
 # Build stage
-FROM python:3.11-slim as builder
+FROM python:3.12-slim as builder
 
 WORKDIR /app
 
 # Install build dependencies
-RUN apt-get update && apt-get install -y \
+RUN apt-get update && apt-get install -y --no-install-recommends \
     build-essential \
     wget \
     git \
+    && apt-get upgrade -y \
     && apt-get clean \
     && rm -rf /var/lib/apt/lists/*
 
@@ -18,23 +19,23 @@ ENV PATH="/opt/venv/bin:$PATH"
 # Copy and install requirements
 COPY app/requirements.txt .
 
-# Install specific PyTorch CPU-only version to save space
+# Install PyTorch (CPU version for smaller Docker image) and other dependencies
 RUN pip install --no-cache-dir --upgrade pip setuptools wheel && \
-    pip install --no-cache-dir torch==2.2.0+cpu torchvision==0.17.0+cpu -f https://download.pytorch.org/whl/torch_stable.html && \
-    pip install --no-cache-dir opencv-python-headless pillow fastapi uvicorn python-multipart && \
-    pip install --no-cache-dir supervision python-jose[cryptography] && \
+    pip install --no-cache-dir torch==2.5.1+cpu torchvision==0.20.1+cpu --index-url https://download.pytorch.org/whl/cpu && \
+    pip install --no-cache-dir -r requirements.txt && \
     pip install --no-cache-dir 'git+https://github.com/facebookresearch/segment-anything.git'
 
 # Final stage
-FROM python:3.11-slim
+FROM python:3.12-slim
 
 WORKDIR /app
 
 # Install runtime dependencies only
-RUN apt-get update && apt-get install -y \
+RUN apt-get update && apt-get install -y --no-install-recommends \
     libgl1-mesa-glx \
     libglib2.0-0 \
     wget \
+    && apt-get upgrade -y \
     && apt-get clean \
     && rm -rf /var/lib/apt/lists/*
 
@@ -45,11 +46,20 @@ ENV PATH="/opt/venv/bin:$PATH"
 # Create necessary directories
 RUN mkdir -p /app/models /app/annotations /app/uploads
 
+# Create a non-root user for security
+RUN groupadd -r appuser && useradd -r -g appuser appuser
+
 # Download the SAM model checkpoint (only in the final stage)
-RUN wget --no-verbose https://dl.fbaipublicfiles.com/segment_anything/sam_vit_h_4b8939.pth -P /app/models/
+RUN wget --no-verbose https://dl.fbaipublicfiles.com/segment-anything/sam_vit_h_4b8939.pth -P /app/models/
 
 # Copy the application
 COPY . .
 
+# Change ownership to the non-root user
+RUN chown -R appuser:appuser /app
+
+# Switch to the non-root user
+USER appuser
+
 # Command to run the application
 CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]
\ No newline at end of file
diff --git a/Dockerfile.web b/Dockerfile.web
index 37d5eff..57108ab 100644
--- a/Dockerfile.web
+++ b/Dockerfile.web
@@ -1,20 +1,27 @@
-FROM node:22-alpine
+FROM python:3.12-slim
 
 WORKDIR /web
 
-# Install netcat for health checking
-RUN apk add --no-cache netcat-openbsd
-
-COPY web/package.json web/package-lock.json ./
-RUN npm install
+# Install basic tools and security updates
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    curl \
+    && apt-get upgrade -y \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
 
+# Copy static files
 COPY web .
 
-# Make the wait script executable
-COPY web/wait-for-backend.sh /wait-for-backend.sh
-RUN chmod +x /wait-for-backend.sh
+# Create a non-root user for security
+RUN groupadd -r webuser && useradd -r -g webuser webuser
+
+# Change ownership to the non-root user
+RUN chown -R webuser:webuser /web
+
+# Switch to the non-root user
+USER webuser
 
-EXPOSE 5173
+EXPOSE 8080
 
-# Use the wait script before starting the app
-CMD ["/wait-for-backend.sh", "npm", "run", "dev"]
+# Serve static files using Python's built-in server
+CMD ["python", "-m", "http.server", "8080"]
diff --git a/README.md b/README.md
index 65ed17b..a1a9d35 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@ This project is sponsored by the Egyptian Space Agency (EgSA).
 - Point-prompt based segmentation
 - Automatic polygon generation from segmentation masks
 - JSON export format support
+- Smart caching system for repeated segmentation operations
 
 **Planned:**
 - Multiple prompt types (box, points, text)
@@ -41,25 +42,26 @@ This project is sponsored by the Egyptian Space Agency (EgSA).
 - **Storage**: Session-based in-memory storage
 - **AI Models**: 
   - Segment Anything Model (SAM)
-  - PyTorch
+  - PyTorch with CUDA support
 - **Image Processing**: 
   - OpenCV
-  - Pillow
+  - Pillow (PIL)
 - **Containerization**: Docker (optional)
 - **Data Processing**: NumPy
-- **Frontend**: React, TypeScript, Tailwind CSS
+- **Frontend**: Vanilla HTML5/CSS3/JavaScript (no frameworks)
+- **API**: Pure RESTful API architecture for efficient data handling
+- **Optimization**: Smart caching and instant preprocessing for maximum performance
 
 ## Installation & Setup
 
 ### Prerequisites
 
 - Git
-- Python 3.10+ (Python 3.12 recommended for local development)
-- Node.js and npm (for frontend)
+- Python 3.10+ (Python 3.11+ recommended)
 - Docker and Docker Compose (optional, for containerized deployment)
-- CUDA-capable GPU (optional, for faster segmentation)
+- CUDA-capable GPU (optional, for faster AI segmentation)
 
-### Quick Start with Docker
+### Quick Start with Docker (Recommended)
 
 1. Clone the repository:
 ```bash
@@ -71,8 +73,9 @@ cd sat-annotator
 ```bash
 docker-compose up --build
 ```
+   *Note: The SAM model will be automatically downloaded during the Docker build process.*
 
-3. Access the API at `http://localhost:8000` and the frontend at `http://localhost:5173`
+3. Access the application at `http://localhost:8000`
 
 ### Local Development Setup
 
@@ -82,9 +85,10 @@ git clone https://github.com/yourusername/sat-annotator.git
 cd sat-annotator
 ```
 
-2. Download the SAM model:
-   - Download the SAM model checkpoint from [https://dl.fbaipublicfiles.com/segment_anything/sam_vit_h_4b8939.pth](https://dl.fbaipublicfiles.com/segment_anything/sam_vit_h_4b8939.pth)
-   - Place it in the `models/` directory
+2. Download the SAM model (required for local development):
+   - Download the SAM model checkpoint: [sam_vit_h_4b8939.pth](https://dl.fbaipublicfiles.com/segment_anything/sam_vit_h_4b8939.pth)
+   - Create a `models/` directory in the project root if it doesn't exist
+   - Place the downloaded file in the `models/` directory
 
 3. Set up Python environment:
 ```bash
@@ -93,45 +97,153 @@ python -m venv venv
 source venv/bin/activate  # On Windows: venv\Scripts\activate
 
 # Install backend dependencies
-pip install -r app/requirements_simplified.txt
+pip install -r app/requirements.txt
 pip install git+https://github.com/facebookresearch/segment-anything.git
 ```
 
-4. Run the backend:
+   **Note on PyTorch versions:**
+   - `requirements.txt`: Contains CUDA version of PyTorch for local development with GPU acceleration
+   - `requirements-ci.txt`: Contains CPU version of PyTorch for CI/testing environments
+   - If you don't have CUDA support, install PyTorch CPU version first:
+     ```bash
+     pip install torch==2.5.1+cpu torchvision==0.20.1+cpu --index-url https://download.pytorch.org/whl/cpu
+     ```
+
+4. Run the application:
 ```bash
 uvicorn app.main:app --reload
 ```
 
-5. Set up and run the frontend (in a separate terminal):
-```bash
-cd web
-npm install
-npm run dev
+5. Access the application at `http://localhost:8000`
+
+### Note: Frontend is Integrated
+
+The frontend is served directly by the FastAPI backend as static files. No separate Node.js setup is required.
+
+**Docker vs Local Development:**
+- **Docker**: SAM model downloads automatically during build process
+- **Local Development**: Manual model download required (as shown above)
+
+## Project Structure
+
+```
+sat-annotator/
+├── .github/                      # CI/CD workflows
+│   └── ci.yml                    # GitHub Actions pipeline
+├── app/                          # Backend application
+│   ├── main.py                   # FastAPI application entry point
+│   ├── requirements.txt          # Python dependencies (CUDA version for local dev)
+│   ├── requirements-ci.txt       # Python dependencies (CPU version for CI/testing)
+│   ├── routers/                  # API route handlers
+│   │   ├── session_images.py     # Image upload, retrieval, management
+│   │   └── session_segmentation.py # AI segmentation and annotations
+│   ├── storage/                  # Session management
+│   │   ├── session_store.py      # In-memory session storage
+│   │   └── session_manager.py    # Session cookie management
+│   ├── utils/                    # Utility modules
+│   │   ├── image_processing.py   # Image handling and validation
+│   │   └── sam_model.py          # SAM model integration
+│   ├── schemas/                  # Pydantic data models
+│   │   └── session_schemas.py    # Request/response models
+│   ├── tests/                    # Unit tests
+│   │   ├── README.md             # Testing documentation
+│   │   ├── run_unittests.py      # Test runner
+│   │   ├── mocks.py              # Mock objects for testing
+│   │   ├── test_requirements.txt # Testing dependencies
+│   │   ├── generate_test_requirements.py # Dependency generator
+│   │   └── unittest_*.py         # Individual test files
+│   └── logs/                     # Application logs (created at runtime)
+├── web/                          # Frontend application
+│   ├── index.html                # Main application interface
+│   ├── styles.css                # Application styling
+│   └── js/                       # JavaScript modules
+│       ├── app.js                # Main application logic
+│       ├── api.js                # API communication
+│       ├── canvas.js             # Canvas drawing and interaction
+│       ├── annotations.js        # Annotation management
+│       └── utils.js              # Utility functions
+├── models/                       # AI model files
+│   └── sam_vit_h_4b8939.pth     # SAM model (downloaded/mounted)
+├── uploads/                      # User uploaded images (created at runtime)
+├── annotations/                  # Generated annotation files (created at runtime)
+├── logs/                         # Application logs (created at runtime)
+├── data/                         # Sample/test data (optional)
+├── docs/                         # Project documentation
+├── venv/                         # Python virtual environment (optional)
+├── .gitignore                    # Git ignore rules
+├── docker-compose.yml            # Docker orchestration
+├── Dockerfile.app                # Backend container definition
+├── Dockerfile.web                # Frontend container definition
+├── LICENSE                       # MIT License
+└── README.md                     # This file
 ```
 
-6. Access the API at `http://localhost:8000` and the frontend at `http://localhost:5173`
+### Runtime Directories
+
+These directories are created automatically by the application:
+
+- **`uploads/`**: Stores user-uploaded satellite images
+- **`annotations/`**: Stores AI-generated and manual annotation JSON files  
+- **`logs/`** & **`app/logs/`**: Application log files for debugging
+- **`models/`**: Contains the SAM AI model (auto-downloaded in Docker)
+
+### Development Notes
+
+- Runtime directories are ignored by Git (see `.gitignore`)
+- The application creates necessary directories on startup
+- Session data is stored in memory and cleared on restart
+- Console logs (for debugging) are embedded in JavaScript source files
 
 ## Usage
 
-### Testing the API
+### Web Interface
 
-#### Root Endpoint
+1. Start the application (Docker or local)
+2. Open `http://localhost:8000` in your browser
+3. Upload satellite images via drag & drop or file picker
+4. Use AI segmentation tools or manual annotation
+5. Export annotations in JSON format
+
+### API Reference
+
+The application provides a comprehensive REST API for programmatic access:
+
+#### Health Check
 ```bash
-curl http://localhost:8000/
+curl http://localhost:8000/health
 ```
 
 Expected response:
 ```json
 {
-  "message": "Welcome to the Satellite Image Annotation Tool"
+  "status": "healthy"
 }
 ```
 
-#### Upload an Image
+#### Session Management
+
+##### Get Session Information
+```bash
+curl http://localhost:8000/api/session-info/
+```
+
+##### Clear Session Data
+```bash
+curl -X DELETE http://localhost:8000/api/session/
+```
+
+##### Export Session Data
+```bash
+curl -X POST http://localhost:8000/api/export-session/
+```
+
+#### Image Management
+
+##### Upload an Image
 ```bash
 curl -X POST http://localhost:8000/api/upload-image/ \
   -H "Content-Type: multipart/form-data" \
-  -F "file=@./data/test_image.jpg"
+  -F "file=@./data/satellite-image.tif"
 ```
 
 Expected response:
@@ -140,54 +252,50 @@ Expected response:
   "success": true,
   "message": "File uploaded successfully",
   "image": {
-    "file_name": "test_image.jpg",
-    "file_path": "uploads/b1030d37-9fa8-4823-b5ad-43ee4cd22e5c.jpg",
-    "resolution": "540x360",
+    "image_id": "uuid-string",
+    "file_name": "satellite-image.tif",
+    "file_path": "uploads/uuid-filename.tif",
+    "resolution": "1024x768",
     "source": "user_upload",
-    "image_id": 1,
-    "capture_date": "2025-02-26T19:43:14.121927",
-    "created_at": "2025-02-26T19:43:14.121927"
+    "capture_date": "2025-06-11T10:30:00.000Z",
+    "created_at": "2025-06-11T10:30:00.000Z"
   }
 }
 ```
 
-#### Retrieve All Images
+##### Retrieve All Images
 ```bash
 curl http://localhost:8000/api/images/
 ```
 
-Expected response:
-```json
-[
-  {
-    "file_name": "test_image.jpg",
-    "file_path": "uploads/b1030d37-9fa8-4823-b5ad-43ee4cd22e5c.jpg",
-    "resolution": "540x360",
-    "source": "user_upload",
-    "image_id": 1,
-    "capture_date": "2025-02-26T19:43:14.121927",
-    "created_at": "2025-02-26T19:43:14.121927"
-  },
-  {
-    "file_name": "test_image.jpg",
-    "file_path": "uploads/d8defaa1-f5c9-400f-86e7-f2ffc4ce0d3c.jpg",
-    "resolution": "540x360", 
-    "source": "user_upload",
-    "image_id": 2,
-    "capture_date": "2025-02-26T20:42:35.066164",
-    "created_at": "2025-02-26T20:42:35.066164"
-  }
-]
+##### Get Specific Image
+```bash
+curl http://localhost:8000/api/images/{image_id}/
 ```
 
-#### Generate Segmentation
+##### Delete Image and Annotations
+```bash
+curl -X DELETE http://localhost:8000/api/images/{image_id}
+```
+
+#### AI Segmentation
+
+##### Preprocess Image for Segmentation
+```bash
+curl -X POST http://localhost:8000/api/preprocess/ \
+  -H "Content-Type: application/json" \
+  -d '{"image_id": "your-image-id"}'
+```
+
+##### Generate Point-Based Segmentation
 ```bash
 curl -X POST http://localhost:8000/api/segment/ \
   -H "Content-Type: application/json" \
   -d '{
-    "image_id": 1,
+    "image_id": "your-image-id",
     "x": 0.5,
-    "y": 0.5
+    "y": 0.3,
+    "label": "Building"
   }'
 ```
 
@@ -195,53 +303,116 @@ Expected response:
 ```json
 {
   "success": true,
-  "polygon": [[x1,y1], [x2,y2], ...],
-  "annotation_id": 1
+  "polygon": [[0.1, 0.2], [0.3, 0.2], [0.3, 0.4], [0.1, 0.4]],
+  "annotation_id": "annotation-uuid",
+  "label": "Building",
+  "confidence": 0.92
 }
 ```
 
-#### API Documentation
-- Interactive API docs: http://localhost:8000/docs
-- Alternative API docs: http://localhost:8000/redoc
+#### Annotation Management
 
-## API Documentation
+##### Create Manual Annotation
+```bash
+curl -X POST http://localhost:8000/api/annotations/ \
+  -H "Content-Type: application/json" \
+  -d '{
+    "image_id": "your-image-id",
+    "polygon": [[0.1, 0.2], [0.3, 0.2], [0.3, 0.4], [0.1, 0.4]],
+    "label": "Water",
+    "annotation_type": "manual"
+  }'
+```
 
-| Endpoint | Method | Description |
-|----------|--------|-------------|
-| `/` | GET | Health check, returns welcome message |
-| `/api/upload-image/` | POST | Upload satellite imagery |
-| `/api/images/` | GET | Retrieve list of all uploaded images |
-| `/api/segment/` | POST | Generate segmentation from point prompt |
+##### Update Annotation
+```bash
+curl -X PUT http://localhost:8000/api/annotations/{annotation_id} \
+  -H "Content-Type: application/json" \
+  -d '{
+    "label": "Updated Label",
+    "polygon": [[0.1, 0.2], [0.3, 0.2], [0.3, 0.4], [0.1, 0.4]]
+  }'
+```
 
-## Database Schema
+##### Delete Annotation
+```bash
+curl -X DELETE http://localhost:8000/api/annotations/{annotation_id}
+```
 
-The application uses PostgreSQL with the following structure:
+##### Get Image Annotations
+```bash
+curl http://localhost:8000/api/annotations/{image_id}
+```
+
+### Testing the API
 
-- **images**: Stores metadata about uploaded satellite images
-- **labels**: Contains annotation categories (building, road, etc.)
-- **ai_models**: Tracks machine learning models used for annotation
-- **annotation_files**: Records annotation data associated with images
-  - New: Supports auto-generated annotations from SAM
+#### Root Endpoint
+```bash
+curl http://localhost:8000/
+```
 
-Relationships:
-- An image can have multiple annotation files
-- Annotation files can be linked to AI models that generated them
-- Annotations store JSON formatted polygons
+Expected response:
+```json
+{
+  "message": "Welcome to the Satellite Image Annotation Tool"
+}
+```
+
+For comprehensive API examples, see the **API Reference** section above.
+
+## API Documentation
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/health` | GET | Health check for container orchestration |
+| `/api/upload-image/` | POST | Upload satellite imagery (TIFF, PNG, JPG) |
+| `/api/images/` | GET | Retrieve all uploaded images |
+| `/api/images/{id}/` | GET | Get specific image by ID |
+| `/api/images/{id}` | DELETE | Delete image and associated annotations |
+| `/api/preprocess/` | POST | Prepare image for AI segmentation |
+| `/api/segment/` | POST | Generate AI segmentation from point |
+| `/api/annotations/` | POST | Create manual annotation |
+| `/api/annotations/{id}` | PUT | Update existing annotation |
+| `/api/annotations/{id}` | DELETE | Delete annotation |
+| `/api/annotations/{image_id}` | GET | Get all annotations for image |
+| `/api/session-info/` | GET | Get current session information |
+| `/api/session/` | DELETE | Clear all session data |
+| `/api/export-session/` | POST | Export session data as JSON |
+
+**Interactive Documentation:**
+- Swagger UI: `http://localhost:8000/docs`
+- ReDoc: `http://localhost:8000/redoc`
+
+## Session Management
+
+The application uses session-based in-memory storage for temporary data management:
+
+- **Image Storage**: Uploaded images are stored in the uploads directory
+- **Session Data**: Image metadata and annotations are kept in memory during the session
+- **Annotations**: Generated polygons from SAM segmentation are stored as JSON
+- **Temporary Files**: Session data is cleared when the application restarts
+
+Benefits:
+- No database setup required for quick deployment
+- Simplified development and testing
+- Stateless application design
+- Easy horizontal scaling
 
 ## Development Roadmap
 
 - [x] Project setup with FastAPI
 - [x] Docker containerization
-- [x] Database integration with PostgreSQL
+- [x] Session-based storage architecture
 - [x] Image upload functionality
 - [x] Image metadata extraction
 - [x] SAM model integration
 - [x] Point-prompt segmentation
 - [x] JSON export
+- [x] Vanilla HTML/CSS/JavaScript frontend
+- [x] Professional codebase cleanup and optimization
 - [ ] Multiple prompt types support
 - [ ] Manual annotation interface
 - [ ] Additional export formats
-- [ ] User authentication
 
 ## License
 
diff --git a/app/db/database.py b/app/db/database.py
deleted file mode 100644
index a865ff3..0000000
--- a/app/db/database.py
+++ /dev/null
@@ -1,17 +0,0 @@
-from sqlalchemy import create_engine
-from sqlalchemy.orm import declarative_base, sessionmaker
-import os
-
-DATABASE_URL = os.getenv("DATABASE_URL", "postgresql://postgres:postgres@db:5432/sat_annotator")
-
-engine = create_engine(DATABASE_URL)
-SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
-Base = declarative_base()
-
-# Dependency to get DB session
-def get_db():
-    db = SessionLocal()
-    try:
-        yield db
-    finally:
-        db.close()
\ No newline at end of file
diff --git a/app/db/models.py b/app/db/models.py
deleted file mode 100644
index 9e8506a..0000000
--- a/app/db/models.py
+++ /dev/null
@@ -1,49 +0,0 @@
-from sqlalchemy import Column, Integer, String, Text, Float, DateTime, Boolean, ForeignKey
-from sqlalchemy.sql import func
-from sqlalchemy.orm import relationship
-from app.db.database import Base
-
-class Image(Base):
-    __tablename__ = "images"
-    
-    image_id = Column(Integer, primary_key=True, index=True)
-    file_name = Column(String(255), nullable=False)
-    file_path = Column(Text, nullable=False)
-    resolution = Column(String(50))
-    capture_date = Column(DateTime, server_default=func.now())
-    source = Column(String(100))
-    created_at = Column(DateTime, server_default=func.now())
-    
-    annotations = relationship("AnnotationFile", back_populates="image")
-
-class AIModel(Base):
-    __tablename__ = "ai_models"
-    
-    model_id = Column(Integer, primary_key=True, index=True)
-    model_name = Column(String(255), nullable=False)
-    version = Column(String(50))
-    trained_on = Column(Text)
-    accuracy = Column(Float)
-    created_at = Column(DateTime, server_default=func.now())
-    
-    annotations = relationship("AnnotationFile", back_populates="model")
-
-class AnnotationFile(Base):
-    __tablename__ = "annotation_files"
-    
-    annotation_id = Column(Integer, primary_key=True, index=True)
-    image_id = Column(Integer, ForeignKey("images.image_id", ondelete="CASCADE"))
-    file_path = Column(Text, nullable=False)
-    created_at = Column(DateTime, server_default=func.now())
-    auto_generated = Column(Boolean, default=False)
-    model_id = Column(Integer, ForeignKey("ai_models.model_id", ondelete="SET NULL"), nullable=True)
-    
-    image = relationship("Image", back_populates="annotations")
-    model = relationship("AIModel", back_populates="annotations")
-
-class Label(Base):
-    __tablename__ = "labels"
-    
-    label_id = Column(Integer, primary_key=True, index=True)
-    name = Column(String(100), unique=True, nullable=False)
-    description = Column(Text)
\ No newline at end of file
diff --git a/app/main.py b/app/main.py
index e503382..41d25c6 100644
--- a/app/main.py
+++ b/app/main.py
@@ -19,31 +19,21 @@
 try:
     # For uvicorn from root directory
     from app.routers import session_images, session_segmentation
-    print("Using app.routers imports")
+    logger.info("Using app.routers imports")
 except ImportError:
     try:
         # For running directly from app directory
         from routers import session_images, session_segmentation
-        print("Using direct routers imports")
+        logger.info("Using direct routers imports")
     except ImportError as e:
-        print(f"Import error: {e}")
+        logger.error(f"Import error: {e}")
         # Final fallback - try with explicit path manipulation
         sys.path.insert(0, os.path.dirname(app_dir))
         from app.routers import session_images, session_segmentation
-        print("Using fallback app.routers imports")
-
-try:
-    from app.utils.test_utils import is_test_mode
-    test_mode = is_test_mode()
-except ImportError:
-    try:
-        from utils.test_utils import is_test_mode
-        test_mode = is_test_mode()
-    except ImportError:
-        test_mode = False
+        logger.info("Using fallback app.routers imports")
 
 # Determine if we're running in Docker or locally
-in_docker = os.path.exists('/.dockerenv') and not test_mode
+in_docker = os.path.exists('/.dockerenv')
 
 # Set paths based on environment
 base_path = Path("/app") if in_docker else Path(".")
@@ -79,13 +69,6 @@ def health_check():
 app.include_router(session_images.router, prefix="/api", tags=["images"])
 app.include_router(session_segmentation.router, prefix="/api", tags=["segmentation"])
 
-try:
-    from app.websocket_notify import router as websocket_notify_router
-except ImportError:
-    from websocket_notify import router as websocket_notify_router
-
-app.include_router(websocket_notify_router, prefix="/api", tags=["websocket"])
-
 # Mount the uploads directory for static file serving
 app.mount("/uploads", StaticFiles(directory=str(uploads_dir)), name="uploads")
 
diff --git a/app/requirements-ci.txt b/app/requirements-ci.txt
new file mode 100644
index 0000000..895fd9c
--- /dev/null
+++ b/app/requirements-ci.txt
@@ -0,0 +1,48 @@
+# Core FastAPI web framework
+fastapi==0.115.8
+uvicorn==0.34.3
+pydantic==2.10.6
+pydantic-core==2.27.2
+annotated-types==0.7.0
+python-multipart==0.0.20
+starlette==0.45.3
+
+# Image processing and AI - PyTorch CPU version for CI/testing
+# Note: torch and torchvision are installed separately in CI workflow with correct index
+opencv-python==4.11.0.86
+pillow==11.2.1
+numpy==2.0.2
+
+# PyTorch dependencies
+filelock==3.18.0
+fsspec==2025.5.1
+jinja2==3.1.6
+networkx==3.5
+sympy==1.13.1
+mpmath==1.3.0
+MarkupSafe==3.0.2
+
+# HTTP client and utilities
+requests==2.32.3
+urllib3==2.4.0
+httpcore==1.0.9
+
+# Security for session management
+python-jose==3.5.0
+cryptography==45.0.4
+cffi==1.17.1
+pycparser==2.22
+ecdsa==0.19.1
+pyasn1==0.6.1
+rsa==4.9.1
+
+# Core Python web dependencies
+click==8.1.8
+h11==0.16.0
+anyio==4.8.0
+sniffio==1.3.1
+idna==3.10
+charset-normalizer==3.4.1
+typing_extensions==4.14.0
+packaging==24.2
+certifi==2025.1.31
diff --git a/app/requirements.txt b/app/requirements.txt
index 7a49c0d..adde4da 100644
Binary files a/app/requirements.txt and b/app/requirements.txt differ
diff --git a/app/requirements_simplified.txt b/app/requirements_simplified.txt
deleted file mode 100644
index 7a182e0..0000000
--- a/app/requirements_simplified.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-fastapi>=0.95.0
-pydantic>=2.0.0
-uvicorn>=0.17.0
-python-multipart
-numpy>=1.22.0
-pillow
-opencv-python>=4.6.0
-torch
-torchvision
-supervision
-python-jose[cryptography]
diff --git a/app/routers/images.py b/app/routers/images.py
deleted file mode 100644
index a172dff..0000000
--- a/app/routers/images.py
+++ /dev/null
@@ -1,90 +0,0 @@
-from fastapi import APIRouter, UploadFile, File, HTTPException, Depends, status
-from sqlalchemy.orm import Session
-from app.db.database import get_db
-from app.db.models import Image as ImageModel
-from app.utils.image_processing import save_upload_file, validate_image_file
-from app.schemas.images import UploadResponse, Image, ImageCreate
-from typing import List
-
-router = APIRouter()
-
-@router.post("/upload-image/", response_model=UploadResponse)
-async def upload_image(
-    file: UploadFile = File(...),
-    db: Session = Depends(get_db)
-):
-    """
-    Upload a satellite image file for annotation.
-    
-    Supports JPG, PNG, TIFF and GeoTIFF formats.
-    """
-    # Validate file type
-    if not file:
-        raise HTTPException(
-            status_code=status.HTTP_400_BAD_REQUEST,
-            detail="No file provided"
-        )
-        
-    if not validate_image_file(file):
-        raise HTTPException(
-            status_code=status.HTTP_415_UNSUPPORTED_MEDIA_TYPE,
-            detail="File type not supported. Please upload JPG, PNG, TIFF or GeoTIFF"
-        )
-    
-    # Process and save the file
-    try:
-        file_info = await save_upload_file(file)
-        
-        # Save to database
-        db_image = ImageModel(
-            file_name=file_info["original_filename"],
-            file_path=file_info["path"],
-            resolution=file_info["resolution"],
-            source="user_upload"
-        )
-        
-        db.add(db_image)
-        db.commit()
-        db.refresh(db_image)
-        
-        return UploadResponse(
-            success=True,
-            message="File uploaded successfully",
-            image=Image.from_orm(db_image)
-        )
-        
-    except Exception as e:
-        db.rollback()
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail=f"Error uploading file: {str(e)}"
-        )
-
-@router.get("/images/", response_model=List[Image])
-def get_images(
-    skip: int = 0, 
-    limit: int = 100,
-    db: Session = Depends(get_db)
-):
-    """Get list of uploaded images"""
-    images = db.query(ImageModel).offset(skip).limit(limit).all()
-    return images
-
-
-
-@router.get("/images/{image_id}/", response_model=Image)
-def get_image(image_id: int, db: Session = Depends(get_db)):
-    """
-    Retrieve a specific image by its ID.
-    """
-    # Fetch image from the database
-    image = db.query(ImageModel).filter(ImageModel.image_id == image_id).first()
-
-    # Handle case where image doesn't exist
-    if not image:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail=f"Image with ID {image_id} not found"
-        )
-
-    return image
diff --git a/app/routers/segmentation.py b/app/routers/segmentation.py
deleted file mode 100644
index 4bbc5cf..0000000
--- a/app/routers/segmentation.py
+++ /dev/null
@@ -1,93 +0,0 @@
-from fastapi import APIRouter, HTTPException, Depends, status
-from sqlalchemy.orm import Session
-from app.db.database import get_db
-from app.db.models import Image as ImageModel, AnnotationFile
-from app.utils.sam_model import SAMSegmenter
-from pydantic import BaseModel
-from typing import List, Optional
-import json
-from pathlib import Path
-import os
-
-router = APIRouter()
-segmenter = SAMSegmenter()
-
-class PointPrompt(BaseModel):
-    image_id: int
-    x: float  # Normalized coordinate (0-1)
-    y: float  # Normalized coordinate (0-1)
-
-class SegmentationResponse(BaseModel):
-    success: bool
-    polygon: List[List[float]]  # List of [x,y] coordinates
-    annotation_id: Optional[int] = None
-
-@router.post("/segment/", response_model=SegmentationResponse)
-async def segment_from_point(
-    prompt: PointPrompt,
-    db: Session = Depends(get_db)
-):
-    """Generate segmentation from a point click"""
-    image = db.query(ImageModel).filter(ImageModel.image_id == prompt.image_id).first()
-    if not image:
-        raise HTTPException(status_code=404, detail="Image not found")
-    
-    try:
-        # Handle both absolute and relative paths for image_path
-        image_path = image.file_path
-        if not os.path.isabs(image_path):
-            # If it's a relative path, convert to absolute path within the container
-            if image_path.startswith("uploads/"):
-                image_path = "/app/" + image_path
-            else:
-                image_path = "/app/uploads/" + os.path.basename(image_path)
-        
-        # Check if file exists
-        if not os.path.exists(image_path):
-            raise FileNotFoundError(f"Image file not found at {image_path}")
-            
-        height, width = segmenter.set_image(image_path)
-        
-        pixel_x = int(prompt.x * width)
-        pixel_y = int(prompt.y * height)
-        
-        mask = segmenter.predict_from_point([pixel_x, pixel_y])
-        
-        polygon = segmenter.mask_to_polygon(mask)
-        if not polygon:
-            raise HTTPException(status_code=400, detail="Could not generate polygon from mask")
-        
-        annotation_dir = Path("/app/annotations")  # Fixed path in container
-        annotation_dir.mkdir(exist_ok=True)
-        
-        annotation_path = annotation_dir / f"annotation_{image.image_id}_{len(polygon)}.json"
-        with open(annotation_path, "w") as f:
-            json.dump({
-                "type": "Feature",
-                "geometry": {
-                    "type": "Polygon",
-                    "coordinates": [polygon]
-                }
-            }, f)
-        
-        annotation = AnnotationFile(
-            image_id=image.image_id,
-            file_path=str(annotation_path),
-            auto_generated=True
-        )
-        db.add(annotation)
-        db.commit()
-        db.refresh(annotation)
-        
-        return SegmentationResponse(
-            success=True,
-            polygon=polygon,
-            annotation_id=annotation.annotation_id
-        )
-        
-    except Exception as e:
-        db.rollback()
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-            detail=f"Error generating segmentation: {str(e)}"
-        )
\ No newline at end of file
diff --git a/app/routers/session_images.py b/app/routers/session_images.py
index e1d0273..add1bb1 100644
--- a/app/routers/session_images.py
+++ b/app/routers/session_images.py
@@ -1,93 +1,17 @@
-from fastapi import APIRouter, UploadFile, File, HTTPException, Depends, Response, Request, status, BackgroundTasks
+from fastapi import APIRouter, UploadFile, File, HTTPException, Depends, status
 from app.utils.image_processing import save_upload_file, validate_image_file
-from app.schemas.session_schemas import UploadResponse, Image, ImageCreate
+from app.schemas.session_schemas import UploadResponse, Image
 from app.storage.session_manager import get_session_manager, SessionManager
 from app.storage.session_store import session_store
-from typing import List, Optional
-from app.websocket_notify import manager as ws_manager
-from app.routers.session_segmentation import segmenter
+from typing import List
 import os
 import logging
-import asyncio
-import threading
-import time
 
 router = APIRouter()
 
-def run_background_segmentation(session_id: str, image_id: str):
-    """
-    Run segmentation for the uploaded image in a background thread, save mask/polygon, and notify frontend.
-    """
-    from app.routers.session_segmentation import segmenter
-    from app.storage.session_store import session_store
-    import numpy as np
-    import logging
-    import asyncio
-    import os
-    from pathlib import Path
-    import cv2
-    try:
-        image = session_store.get_image(session_id, image_id)
-        if not image:
-            logging.error(f"No image found for segmentation: {image_id}")
-            return
-        # Get image path logic (copied from segmentation endpoint)
-        in_docker = os.path.exists('/.dockerenv')
-        if in_docker:
-            base_dir = "/app"
-        else:
-            base_dir = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
-        stored_path = image.file_path
-        if in_docker:
-            if stored_path.startswith("uploads/"):
-                image_path = f"/app/{stored_path}"
-            else:
-                image_path = f"/app/uploads/{os.path.basename(stored_path)}"
-        else:
-            if stored_path.startswith("uploads/"):
-                image_path = os.path.join(base_dir, stored_path)
-            else:
-                image_path = stored_path
-        if not os.path.exists(image_path):
-            logging.error(f"Image file not found at {image_path}")
-            return
-        # Set image and get dimensions
-        height, width = segmenter.set_image(image_path)
-        # Use center point for auto-segmentation
-        pixel_x = width // 2
-        pixel_y = height // 2
-        mask = segmenter.predict_from_point([pixel_x, pixel_y])
-        # Save mask and overlay (copied from segmentation endpoint)
-        annotation_dir = Path(base_dir) / "annotations"
-        annotation_dir.mkdir(exist_ok=True)
-        mask_image_path = annotation_dir / f"mask_{session_id}_{image_id}.png"
-        cv2.imwrite(str(mask_image_path), mask)
-        original_image = cv2.imread(image_path)
-        mask_colored = cv2.applyColorMap(mask, cv2.COLORMAP_JET)
-        overlay = cv2.addWeighted(original_image, 0.7, mask_colored, 0.3, 0)
-        overlay_path = annotation_dir / f"overlay_{session_id}_{image_id}.png"
-        cv2.imwrite(str(overlay_path), overlay)
-        polygon = segmenter.mask_to_polygon(mask)
-        # Save annotation in session store (auto_generated=True)
-        session_store.add_annotation(session_id, image_id, str(mask_image_path), auto_generated=True)
-        # Notify frontend via WebSocket
-        loop = asyncio.new_event_loop()
-        asyncio.set_event_loop(loop)
-        loop.run_until_complete(ws_manager.send_message(session_id, "Image ready for annotation"))
-        loop.close()
-        logging.info(f"Background segmentation notification sent for session {session_id}")
-    except Exception as e:
-        logging.error(f"Background segmentation failed for session {session_id}: {e}")
-
-def notify_segmentation_ready(session_id: str, image_id: str):
-    thread = threading.Thread(target=run_background_segmentation, args=(session_id, image_id))
-    thread.daemon = True
-    thread.start()
-
 @router.post("/upload-image/", response_model=UploadResponse)
 async def upload_image(
     file: UploadFile = File(...),
-    background_tasks: BackgroundTasks = None,
     session_manager: SessionManager = Depends(get_session_manager)
 ):
     """
@@ -120,8 +44,7 @@ async def upload_image(
             resolution=file_info["resolution"],
             source="user_upload"
         )
-        
-        # Convert SessionImage to the expected Image pydantic model format
+          # Convert SessionImage to the expected Image pydantic model format
         # Create an Image Pydantic model directly from the SessionImage attributes
         image = Image(
             image_id=session_image.image_id,
@@ -131,13 +54,12 @@ async def upload_image(
             source=session_image.source,
             capture_date=session_image.capture_date,
             created_at=session_image.created_at
-        )
-        # Trigger segmentation in the background (center point)
-        notify_segmentation_ready(session_id, image.image_id)
+        )        # Image uploaded successfully - ready for immediate preprocessing
+        logging.info(f"✓ Image uploaded successfully: {file_info['original_filename']}")
 
         return UploadResponse(
             success=True,
-            message="File uploaded successfully. Segmentation will be performed in the background.",
+            message="File uploaded successfully. Ready for annotation.",
             image=image
         )
         
@@ -284,5 +206,18 @@ def export_session(
 def get_session_id_endpoint(
     session_manager: SessionManager = Depends(get_session_manager)
 ):
-    """Get the current session ID for WebSocket connections"""
-    return {"session_id": session_manager.session_id}
+    """Get the current session ID for API calls"""
+    session_id = session_manager.session_id
+    # Ensure the session exists in the store
+    session_store.create_session(session_id)
+    return {"session_id": session_id}
+
+
+@router.get("/validate-session/{session_id}/")
+def validate_session(session_id: str):
+    """Validate if a session exists in the store"""
+    session_data = session_store.get_session(session_id)
+    if session_data:
+        return {"valid": True, "session_id": session_id}
+    else:
+        return {"valid": False, "session_id": None}
diff --git a/app/routers/session_segmentation.py b/app/routers/session_segmentation.py
index 744cb88..c26a7b3 100644
--- a/app/routers/session_segmentation.py
+++ b/app/routers/session_segmentation.py
@@ -18,7 +18,7 @@
 log_dir.mkdir(exist_ok=True)
 log_filename = f"debug_{datetime.now().strftime('%Y%m%d_%H%M%S')}.log"
 logging.basicConfig(
-    level=logging.DEBUG,
+    level=logging.INFO,  # Changed from DEBUG to INFO
     format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
     handlers=[
         logging.FileHandler(log_dir / log_filename),
@@ -30,6 +30,30 @@
 router = APIRouter()
 segmenter = SAMSegmenter()
 
+def construct_image_path(stored_path):
+    """Construct consistent image path for both preprocessing and segmentation"""
+    # Determine if running in Docker
+    in_docker = os.path.exists('/.dockerenv')
+    
+    if not os.path.isabs(stored_path):
+        if in_docker:
+            # Docker environment
+            if stored_path.startswith("uploads/"):
+                image_path = "/app/" + stored_path
+            else:
+                image_path = "/app/uploads/" + os.path.basename(stored_path)
+        else:
+            # Local environment
+            if stored_path.startswith("uploads/"):
+                base_dir = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+                image_path = os.path.join(base_dir, stored_path)
+            else:
+                image_path = stored_path
+    else:
+        image_path = stored_path
+    
+    return image_path
+
 class PointPrompt(BaseModel):
     image_id: str
     x: float
@@ -40,13 +64,24 @@ class SegmentationResponse(BaseModel):
     polygon: List[List[float]]
     annotation_id: Optional[str] = None
     cached: bool = False
+    processing_time: Optional[float] = None
+
+class PreprocessRequest(BaseModel):
+    image_id: str
+
+class PreprocessResponse(BaseModel):
+    success: bool
+    message: str
 
 @router.post("/segment/", response_model=SegmentationResponse)
 async def segment_from_point(
     prompt: PointPrompt,
     session_manager: SessionManager = Depends(get_session_manager)
 ):
-    """Generate segmentation from a point click, with caching for subsequent clicks on the same image."""
+    """Generate segmentation from a point click with timeout handling"""
+    import asyncio
+    import concurrent.futures
+    
     session_id = session_manager.session_id
     
     # Debug: log the received coordinates
@@ -57,6 +92,9 @@ async def segment_from_point(
         raise HTTPException(status_code=404, detail="Image not found")
     
     try:
+        import time
+        start_time = time.time()
+        
         # Determine if running in Docker
         in_docker = os.path.exists('/.dockerenv')
         
@@ -66,58 +104,67 @@ async def segment_from_point(
         else:
             base_dir = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
             annotation_dir = Path(os.path.join(base_dir, "annotations"))
-        annotation_dir.mkdir(exist_ok=True)
-        
-        # Get the image path from the session store
-        stored_path = image.file_path
-        
-        # Construct image path
-        if in_docker:
-            if stored_path.startswith("uploads/"):
-                image_path = "/app/" + stored_path
-            else:
-                image_path = "/app/uploads/" + os.path.basename(stored_path)
-        else:
-            if stored_path.startswith("uploads/"):
-                image_path = os.path.join(base_dir, stored_path)
-            else:
-                image_path = stored_path
+        annotation_dir.mkdir(exist_ok=True)        # Get the image path from the session store
+        stored_path = image.file_path        # Construct image path using unified function
+        image_path = construct_image_path(stored_path)
         
         # Check if file exists
         if not os.path.exists(image_path):
             raise FileNotFoundError(f"Image file not found at {image_path}")
+            # Check if this is a new image or one we've already processed
+        is_cached = (image_path == segmenter.current_image_path and 
+                    image_path in segmenter.cache)
         
-        # Check if this is a new image or one we've already processed
-        is_cached = image_path == segmenter.current_image_path and image_path in segmenter.cache
-        
-        logger.debug(f"Processing image: {image_path}, cached: {is_cached}")
-        
-        # Set the image in the segmenter
-        height, width = segmenter.set_image(image_path)
-        pixel_x = int(prompt.x * width)
-        pixel_y = int(prompt.y * height)
-        
-        logger.debug(f"Click at coordinates: ({pixel_x}, {pixel_y}) for image size: {width}x{height}")
-        
-        # Get mask from point
-        mask = segmenter.predict_from_point([pixel_x, pixel_y])
-        
-        # Save the mask
-        mask_image_path = annotation_dir / f"mask_{session_id}_{image.image_id}.png"
-        cv2.imwrite(str(mask_image_path), mask)
-        logger.debug(f"Mask saved at {mask_image_path}")
-        
-        # Create and save overlay
-        original_image = cv2.imread(image_path)
-        mask_colored = cv2.applyColorMap(mask, cv2.COLORMAP_JET)
-        overlay = cv2.addWeighted(original_image, 0.7, mask_colored, 0.3, 0)
-        overlay_path = annotation_dir / f"overlay_{session_id}_{image.image_id}.png"
-        cv2.imwrite(str(overlay_path), overlay)
-        logger.debug(f"Overlay saved at {overlay_path}")
+        logger.debug(f"Processing image: {image_path}, cached: {is_cached}, current: {segmenter.current_image_path}")
+          # Run segmentation in a thread pool with timeout
+        def run_segmentation():
+            # OPTIMIZED: Only set image if it's not already the current image
+            # This preserves the instant segmentation after preprocessing
+            if segmenter.current_image_path != image_path:
+                logger.debug(f"Setting new image in SAM: {image_path}")
+                height, width = segmenter.set_image(image_path)
+            else:
+                logger.debug(f"Using already-set image (instant segmentation!)")
+                # Get dimensions from cache instead of re-setting
+                if image_path in segmenter.cache:
+                    height, width = segmenter.cache[image_path]['image_size']
+                else:
+                    # Fallback - this shouldn't happen if preprocessing worked
+                    logger.warning(f"Image not in cache, falling back to set_image")
+                    height, width = segmenter.set_image(image_path)
+            
+            pixel_x = int(prompt.x * width)
+            pixel_y = int(prompt.y * height)
+            
+            logger.debug(f"Click at coordinates: ({pixel_x}, {pixel_y}) for image size: {width}x{height}")
+            
+            # Get mask from point (GPU accelerated)
+            mask_start = time.time()
+            mask = segmenter.predict_from_point([pixel_x, pixel_y])
+            mask_time = time.time() - mask_start
+            logger.debug(f"Mask generation time: {mask_time:.3f}s")
+            
+            # Convert mask to polygon immediately
+            polygon = segmenter.mask_to_polygon(mask)
+            
+            if not polygon:
+                raise ValueError("Could not generate polygon from mask")
+                
+            return polygon, is_cached
         
-        polygon = segmenter.mask_to_polygon(mask)
-        if not polygon:
-            raise HTTPException(status_code=400, detail="Could not generate polygon from mask")
+        # Execute with timeout (30 seconds)
+        with concurrent.futures.ThreadPoolExecutor(max_workers=1) as executor:
+            future = executor.submit(run_segmentation)
+            try:
+                polygon, is_cached = await asyncio.wait_for(
+                    asyncio.wrap_future(future), 
+                    timeout=30.0
+                )
+            except asyncio.TimeoutError:
+                raise HTTPException(
+                    status_code=408, 
+                    detail="Segmentation timeout - image may still be processing..."
+                )
         
         # Save JSON
         annotation_path = annotation_dir / f"annotation_{session_id}_{image.image_id}_{len(polygon)}.json"
@@ -142,14 +189,21 @@ async def segment_from_point(
         )
         
         logger.debug(f"Generated segmentation with {len(polygon)} points, cached: {is_cached}")
+          # Calculate total processing time
+        total_processing_time = time.time() - start_time
+        logger.debug(f"Total segmentation processing time: {total_processing_time:.3f}s")
         
         return SegmentationResponse(
             success=True,
             polygon=polygon,
             annotation_id=annotation.annotation_id if annotation else None,
-            cached=is_cached
+            cached=is_cached,
+            processing_time=total_processing_time
         )
         
+    except HTTPException:
+        # Re-raise HTTP exceptions (like timeout)
+        raise
     except Exception as e:
         logger.error(f"Error in segmentation: {str(e)}", exc_info=True)
         raise HTTPException(
@@ -186,7 +240,11 @@ async def get_image_annotations(
             file_path = ann.file_path
             if os.path.exists(file_path):
                 with open(file_path, 'r') as f:
-                    json_data = json.load(f)
+                    json_data = json.load(f)                # DEBUG: Log what we're loading
+                if json_data.get('features') and len(json_data['features']) > 0:
+                    feature = json_data['features'][0]
+                    if feature.get('geometry', {}).get('coordinates'):
+                        coords = feature['geometry']['coordinates']
                 
                 result.append({
                     "annotation_id": ann.annotation_id,
@@ -195,6 +253,7 @@ async def get_image_annotations(
                     "data": json_data
                 })
         except Exception as e:
+            logger.error(f"Error loading annotation {ann.annotation_id}: {e}")
             continue
     
     return result
@@ -211,20 +270,8 @@ async def clear_image_cache(
     if not image:
         raise HTTPException(status_code=404, detail="Image not found")
     
-    stored_path = image.file_path
-    in_docker = os.path.exists('/.dockerenv')
-    
-    if in_docker:
-        if stored_path.startswith("uploads/"):
-            image_path = "/app/" + stored_path
-        else:
-            image_path = "/app/uploads/" + os.path.basename(stored_path)
-    else:
-        if stored_path.startswith("uploads/"):
-            base_dir = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
-            image_path = os.path.join(base_dir, stored_path)
-        else:
-            image_path = stored_path
+    # Use unified path construction
+    image_path = construct_image_path(image.file_path)
     
     segmenter.clear_cache(image_path)
     
@@ -237,7 +284,8 @@ async def save_manual_annotation(
 ):
     """Save a manual annotation"""
     session_id = session_manager.session_id
-      # Verify the image exists
+    
+    # Verify the image exists
     image = session_store.get_image(session_id, annotation_data.image_id)
     if not image:
         raise HTTPException(status_code=404, detail="Image not found")
@@ -263,10 +311,9 @@ async def save_manual_annotation(
                         "type": annotation_data.type,
                         "source": annotation_data.source,
                         "created": datetime.now().isoformat()
-                    },
-                    "geometry": {
+                    },                    "geometry": {
                         "type": "Polygon",
-                        "coordinates": [[[point[0], point[1]] for point in annotation_data.polygon]]
+                        "coordinates": [annotation_data.polygon]  # Fix: Direct polygon array, not nested
                     }
                 }
             ]
@@ -391,4 +438,54 @@ async def delete_annotation(
         raise HTTPException(
             status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
             detail=f"Error deleting annotation: {str(e)}"
+        )
+
+@router.post("/preprocess/", response_model=PreprocessResponse)
+async def preprocess_image(
+    request: PreprocessRequest,
+    session_manager: SessionManager = Depends(get_session_manager)
+):
+    """Pre-generate embeddings for faster segmentation"""
+    try:
+        # Check if session exists
+        session_data = session_store.get_session(session_manager.session_id)
+        if not session_data:
+            raise HTTPException(
+                status_code=404, 
+                detail=f"Session {session_manager.session_id} not found. Please refresh the page to create a new session."
+            )
+        
+        # Get image from session
+        image = session_store.get_image(session_manager.session_id, request.image_id)
+        if not image:
+            raise HTTPException(
+                status_code=404, 
+                detail=f"Image {request.image_id} not found in session {session_manager.session_id}"
+            )        # Handle both absolute and relative paths for image_path
+        image_path = construct_image_path(image.file_path)
+        
+        # Check if file exists
+        if not os.path.exists(image_path):
+            logger.error(f"File does not exist at: {image_path}")
+            raise FileNotFoundError(f"Image file not found at {image_path}")
+            
+        success = segmenter.preprocess_image(image_path)
+        
+        if success:
+            logger.info(f"Successfully preprocessed image {request.image_id}")
+            return PreprocessResponse(
+                success=True,
+                message="Image preprocessed successfully"
+            )
+        else:
+            raise HTTPException(
+                status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+                detail="Failed to preprocess image"
+            )
+        
+    except Exception as e:
+        logger.error(f"Error preprocessing image {request.image_id}: {e}")
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail=f"Error preprocessing image: {str(e)}"
         )
\ No newline at end of file
diff --git a/app/schemas/images.py b/app/schemas/images.py
deleted file mode 100644
index 530164b..0000000
--- a/app/schemas/images.py
+++ /dev/null
@@ -1,25 +0,0 @@
-from pydantic import BaseModel
-from typing import Optional
-from datetime import datetime
-
-class ImageBase(BaseModel):
-    file_name: str
-    file_path: str
-    resolution: Optional[str] = None
-    source: Optional[str] = None
-
-class ImageCreate(ImageBase):
-    pass
-
-class Image(ImageBase):
-    image_id: int
-    capture_date: datetime
-    created_at: datetime
-    
-    class Config:
-        from_attributes = True  # For SQLAlchemy models (formerly orm_mode)
-
-class UploadResponse(BaseModel):
-    success: bool
-    message: str
-    image: Optional[Image] = None
\ No newline at end of file
diff --git a/app/storage/session_manager.py b/app/storage/session_manager.py
index 2c2524f..cd35ac1 100644
--- a/app/storage/session_manager.py
+++ b/app/storage/session_manager.py
@@ -33,7 +33,7 @@ def set_session_cookie(response: Response, session_id: str) -> None:
     response.set_cookie(
         key=SESSION_COOKIE_NAME,
         value=session_id,
-        httponly=False,  # Allow JavaScript access for WebSocket connections
+        httponly=True,  # Prevent JavaScript access for enhanced security against XSS
         samesite="lax",
         path="/"
         # No expires parameter = session cookie (cleared on browser close/reload)
@@ -58,14 +58,13 @@ def session_id(self) -> str:
             if not self._session_id:
                 self._session_id = generate_session_id()
                 set_session_cookie(self.response, self._session_id)
-                
         return self._session_id
     
     def clear_session(self) -> None:
         """Remove the session cookie"""
         self.response.delete_cookie(
             key=SESSION_COOKIE_NAME,
-            httponly=False,  # Match the httponly setting from set_session_cookie
+            httponly=True,  # Match the httponly setting from set_session_cookie
             path="/"
         )
 
diff --git a/app/storage/session_manager_backup.py b/app/storage/session_manager_backup.py
deleted file mode 100644
index 0dd078a..0000000
--- a/app/storage/session_manager_backup.py
+++ /dev/null
@@ -1,77 +0,0 @@
-from fastapi import Request, Response, Depends
-import uuid
-from typing import Optional
-from datetime import datetime, timedelta
-
-# Session cookie name
-SESSION_COOKIE_NAME = "sat_annotator_session"
-# Session timeout (7 days)
-SESSION_TIMEOUT_DAYS = 7
-
-def generate_session_id() -> str:
-    """Generate a unique session ID"""
-    return str(uuid.uuid4())
-
-async def get_session_id(request: Request) -> str:
-    """
-    Get the session ID from the request cookie or create a new one.
-    This function should be used as a dependency in FastAPI routes.
-    """
-    session_id = request.cookies.get(SESSION_COOKIE_NAME)
-    
-    if not session_id:
-        session_id = generate_session_id()
-    
-    return session_id
-
-def set_session_cookie(response: Response, session_id: str) -> None:
-    """
-    Set the session cookie in the response.
-    Call this function when responding to a request if a new session was created.
-    This creates a session cookie that expires when the browser is closed.
-    """
-    response.set_cookie(
-        key=SESSION_COOKIE_NAME,
-        value=session_id,
-        httponly=False,  # Allow JavaScript access for WebSocket connections
-        samesite="lax",
-        path="/"
-        # No expires parameter = session cookie (cleared on browser close/reload)
-    )
-
-class SessionManager:
-    """
-    A manager for handling session-related operations in route handlers.
-    Simplifies session management in API endpoints.
-    """
-    
-    def __init__(self, request: Request, response: Response):
-        self.request = request
-        self.response = response
-        self._session_id: Optional[str] = None
-      @property
-    def session_id(self) -> str:
-        """Get or initialize the session ID"""
-        if self._session_id is None:
-            self._session_id = self.request.cookies.get(SESSION_COOKIE_NAME)
-            if not self._session_id:
-                self._session_id = generate_session_id()
-                set_session_cookie(self.response, self._session_id)
-                
-        return self._session_id
-    
-    def clear_session(self) -> None:
-        """Remove the session cookie"""
-        self.response.delete_cookie(
-            key=SESSION_COOKIE_NAME,
-            httponly=False,  # Match the httponly setting from set_session_cookie
-            path="/"
-        )
-
-
-def get_session_manager(request: Request, response: Response) -> SessionManager:
-    """
-    FastAPI dependency to get the session manager.
-    Usage: session_manager: SessionManager = Depends(get_session_manager)
-    """
-    return SessionManager(request, response)
diff --git a/app/storage/session_manager_fixed.py b/app/storage/session_manager_fixed.py
deleted file mode 100644
index 2c2524f..0000000
--- a/app/storage/session_manager_fixed.py
+++ /dev/null
@@ -1,78 +0,0 @@
-from fastapi import Request, Response, Depends
-import uuid
-from typing import Optional
-from datetime import datetime, timedelta
-
-# Session cookie name
-SESSION_COOKIE_NAME = "sat_annotator_session"
-# Session timeout (7 days)
-SESSION_TIMEOUT_DAYS = 7
-
-def generate_session_id() -> str:
-    """Generate a unique session ID"""
-    return str(uuid.uuid4())
-
-async def get_session_id(request: Request) -> str:
-    """
-    Get the session ID from the request cookie or create a new one.
-    This function should be used as a dependency in FastAPI routes.
-    """
-    session_id = request.cookies.get(SESSION_COOKIE_NAME)
-    
-    if not session_id:
-        session_id = generate_session_id()
-    
-    return session_id
-
-def set_session_cookie(response: Response, session_id: str) -> None:
-    """
-    Set the session cookie in the response.
-    Call this function when responding to a request if a new session was created.
-    This creates a session cookie that expires when the browser is closed.
-    """
-    response.set_cookie(
-        key=SESSION_COOKIE_NAME,
-        value=session_id,
-        httponly=False,  # Allow JavaScript access for WebSocket connections
-        samesite="lax",
-        path="/"
-        # No expires parameter = session cookie (cleared on browser close/reload)
-    )
-
-class SessionManager:
-    """
-    A manager for handling session-related operations in route handlers.
-    Simplifies session management in API endpoints.
-    """
-    
-    def __init__(self, request: Request, response: Response):
-        self.request = request
-        self.response = response
-        self._session_id: Optional[str] = None
-    
-    @property
-    def session_id(self) -> str:
-        """Get or initialize the session ID"""
-        if self._session_id is None:
-            self._session_id = self.request.cookies.get(SESSION_COOKIE_NAME)
-            if not self._session_id:
-                self._session_id = generate_session_id()
-                set_session_cookie(self.response, self._session_id)
-                
-        return self._session_id
-    
-    def clear_session(self) -> None:
-        """Remove the session cookie"""
-        self.response.delete_cookie(
-            key=SESSION_COOKIE_NAME,
-            httponly=False,  # Match the httponly setting from set_session_cookie
-            path="/"
-        )
-
-
-def get_session_manager(request: Request, response: Response) -> SessionManager:
-    """
-    FastAPI dependency to get the session manager.
-    Usage: session_manager: SessionManager = Depends(get_session_manager)
-    """
-    return SessionManager(request, response)
diff --git a/app/tests/README.md b/app/tests/README.md
index 3ef1cee..49baf56 100644
--- a/app/tests/README.md
+++ b/app/tests/README.md
@@ -62,4 +62,4 @@ The tests use mock objects to avoid loading heavy dependencies:
 
 ## Testing in CI/CD
 
-For CI/CD, a GitHub Actions workflow is set up in `.github/workflows/tests.yml` that will run all unittest tests on each push to the main branch.
+For CI/CD, a GitHub Actions workflow is set up in `.github/workflows/ci.yml` that will run all unittest tests on each push to the main branch.
diff --git a/app/tests/run_unittests.py b/app/tests/run_unittests.py
index 157c29a..e8a79d6 100644
--- a/app/tests/run_unittests.py
+++ b/app/tests/run_unittests.py
@@ -58,7 +58,6 @@ def main():
                 text=True,
                 timeout=30  # Add timeout to catch hanging tests
             )
-            
             # Print output
             if result.stdout:
                 print(result.stdout)
@@ -70,58 +69,66 @@ def main():
                 print(result.stderr)
             
             # Determine test status
-            if "OK" in result.stdout:
-                status = "✅ PASS"
-            elif "FAILED" in result.stdout:
-                status = "❌ FAIL"
+            stdout_content = result.stdout or ""
+            stderr_content = result.stderr or ""
+            
+            if "OK" in stdout_content:
+                status = "PASS"
+            elif "FAILED" in stdout_content or "ERROR" in stdout_content:
+                status = "FAIL"
             else:
-                status = "⚠️ UNKNOWN"
+                status = "UNKNOWN"
                 
         except subprocess.TimeoutExpired:
             print("ERROR: Test timed out after 30 seconds")
-            status = "❌ TIMEOUT"
+            status = "TIMEOUT"
             errors += 1
             result = None
-            
-        # Extract test counts if we have results
+              # Extract test counts if we have results
         if result:
             try:
                 test_count = 0
                 fail_count = 0
-                error_count = 0                # Process test counts with multiple approaches for reliability
+                error_count = 0
+                
+                # Get safe content to work with
+                stdout_content = result.stdout or ""
+                stderr_content = result.stderr or ""
+                
+                # Process test counts with multiple approaches for reliability
                 
                 # First check for explicit "Ran X tests" in stdout (standard unittest output)
-                ran_match = re.search(r'Ran (\d+) test', result.stdout)
+                ran_match = re.search(r'Ran (\d+) test', stdout_content)
                 if ran_match:
                     test_count = int(ran_match.group(1))
                 # Also check output for "Tests run: X" (our custom output)
                 else:
-                    tests_run_match = re.search(r'Tests run: (\d+)', result.stdout)
+                    tests_run_match = re.search(r'Tests run: (\d+)', stdout_content)
                     if tests_run_match:
                         test_count = int(tests_run_match.group(1))
                     else:
                         # Count lines ending with "... ok" which typically appear for each test
-                        ok_matches = re.findall(r'\.+ ok$', result.stdout, re.MULTILINE)
+                        ok_matches = re.findall(r'\.+ ok$', stdout_content, re.MULTILINE)
                         if ok_matches:
                             test_count = len(ok_matches)
                         else:
                             # Look for pattern "test_name (...) ... ok"
-                            test_ok_matches = re.findall(r'test_\w+\s+\([^)]+\).*ok', result.stdout)
+                            test_ok_matches = re.findall(r'test_\w+\s+\([^)]+\).*ok', stdout_content)
                             if test_ok_matches:
                                 test_count = len(test_ok_matches)
                             else:
                                 # Look for test_* methods in output as last resort
-                                method_matches = re.findall(r'test_\w+', result.stdout)
+                                method_matches = re.findall(r'test_\w+', stdout_content)
                                 if method_matches:
                                     test_count = len(set(method_matches))  # Use set to remove duplicates
                 
                 # Check for failures
-                fail_matches = re.search(r'[Ff]ailures[=:]?\s*(\d+)', result.stdout)
+                fail_matches = re.search(r'[Ff]ailures[=:]?\s*(\d+)', stdout_content)
                 if fail_matches:
                     fail_count = int(fail_matches.group(1))
                 
                 # Check for errors
-                error_matches = re.search(r'[Ee]rrors[=:]?\s*(\d+)', result.stdout)
+                error_matches = re.search(r'[Ee]rrors[=:]?\s*(\d+)', stdout_content)
                 if error_matches:
                     error_count = int(error_matches.group(1))
                 
@@ -138,10 +145,10 @@ def main():
             except Exception as e:
                 print(f"Error parsing test results: {e}")
                 # Still add the file to results with unknown status
-                results.append((test_file, "⚠️ ERROR", 0))
+                results.append((test_file, "ERROR", 0))
         else:
             # Add the timed out file
-            results.append((test_file, "❌ TIMEOUT", 0))
+            results.append((test_file, "TIMEOUT", 0))
     
     # Print summary
     print("\n\n===== TEST SUMMARY =====")
@@ -156,11 +163,11 @@ def main():
     
     # Overall status
     if all_tests == 0:
-        print("\n⚠️ WARNING: No test results were detected!")
+        print("\nWARNING: No test results were detected!")
     elif failures == 0 and errors == 0:
-        print(f"\n✅ ALL {all_tests} TESTS PASSED!")
+        print(f"\nALL {all_tests} TESTS PASSED!")
     else:
-        print(f"\n❌ TESTS FAILED: {failures + errors} issues found in {all_tests} tests.")
+        print(f"\nTESTS FAILED: {failures + errors} issues found in {all_tests} tests.")
     
     # Return success if all tests passed
     return 0 if failures == 0 and errors == 0 else 1
diff --git a/app/tests/unittest_main_api.py b/app/tests/unittest_main_api.py
index 5b8e196..e882713 100644
--- a/app/tests/unittest_main_api.py
+++ b/app/tests/unittest_main_api.py
@@ -39,7 +39,6 @@ def setUp(self):
         @self.app.get("/health")
         def health_check():
             return {"status": "healthy"}
-        
         # Add root endpoint (when frontend is not mounted)
         @self.app.get("/")
         def read_root():
@@ -50,7 +49,7 @@ def read_root():
         def frontend_status():
             return {
                 "status": "not_mounted", 
-                "message": "Frontend build not found. Run 'npm run build' in the web directory."
+                "message": "Frontend not mounted. Static files should be served from the web directory."
             }
         
         # Create a test client
@@ -85,7 +84,7 @@ def test_frontend_status_endpoint(self):
             response.json(),
             {
                 "status": "not_mounted", 
-                "message": "Frontend build not found. Run 'npm run build' in the web directory."
+                "message": "Frontend not mounted. Static files should be served from the web directory."
             }
         )
 
diff --git a/app/tests/unittest_session_manager.py b/app/tests/unittest_session_manager.py
index 9f91555..342a9cc 100644
--- a/app/tests/unittest_session_manager.py
+++ b/app/tests/unittest_session_manager.py
@@ -95,11 +95,10 @@ def test_set_session_cookie(self):
         
         # Call the function
         set_session_cookie(response, test_session_id)
-        
         # Verify cookie was set
         self.assertIn(SESSION_COOKIE_NAME, response.cookies)
         self.assertEqual(response.cookies[SESSION_COOKIE_NAME]["value"], test_session_id)
-        self.assertTrue(response.cookies[SESSION_COOKIE_NAME]["httponly"])
+        self.assertTrue(response.cookies[SESSION_COOKIE_NAME]["httponly"])  # True to prevent JavaScript access for enhanced security against XSS
         self.assertEqual(response.cookies[SESSION_COOKIE_NAME]["samesite"], "lax")
         self.assertEqual(response.cookies[SESSION_COOKIE_NAME]["path"], "/")
     
@@ -141,7 +140,7 @@ def test_session_manager_clear_session(self):
         
         # Verify cookie was deleted
         self.assertIn(SESSION_COOKIE_NAME, response._deleted_cookies)
-        self.assertTrue(response._deleted_cookies[SESSION_COOKIE_NAME]["httponly"])
+        self.assertTrue(response._deleted_cookies[SESSION_COOKIE_NAME]["httponly"])  # True to match set_session_cookie
         self.assertEqual(response._deleted_cookies[SESSION_COOKIE_NAME]["path"], "/")
 
 if __name__ == "__main__":
diff --git a/app/utils/db_migrate.py b/app/utils/db_migrate.py
deleted file mode 100644
index 5aacb5a..0000000
--- a/app/utils/db_migrate.py
+++ /dev/null
@@ -1,54 +0,0 @@
-#!/usr/bin/env python3
-# A utility script to update image paths in the database to use absolute paths
-
-import os
-from pathlib import Path
-from sqlalchemy.orm import Session
-from app.db.database import get_db, engine
-from app.db.models import Base, Image
-import sys
-
-def migrate_image_paths():
-    """Update relative image paths to absolute paths in the database."""
-    print("Starting database image path migration...")
-    
-    # Initialize the database session
-    db = next(get_db())
-    try:
-        # Get all images from the database
-        images = db.query(Image).all()
-        updated_count = 0
-        
-        for image in images:
-            # Check if path is already absolute
-            if os.path.isabs(image.file_path):
-                print(f"Image {image.image_id}: Path already absolute: {image.file_path}")
-                continue
-            
-            # Convert relative path to absolute
-            old_path = image.file_path
-            if old_path.startswith("uploads/"):
-                new_path = "/app/" + old_path
-            else:
-                new_path = "/app/uploads/" + os.path.basename(old_path)
-            
-            # Update the database record
-            image.file_path = new_path
-            updated_count += 1
-            print(f"Image {image.image_id}: Updated path from {old_path} to {new_path}")
-        
-        # Commit changes if any updates were made
-        if updated_count > 0:
-            db.commit()
-            print(f"Migration completed successfully: {updated_count} image paths updated.")
-        else:
-            print("No image paths needed updating.")
-    
-    except Exception as e:
-        db.rollback()
-        print(f"Error during migration: {str(e)}")
-    finally:
-        db.close()
-
-if __name__ == "__main__":
-    migrate_image_paths()
\ No newline at end of file
diff --git a/app/utils/image_processing.py b/app/utils/image_processing.py
index 7faf20f..96e378a 100644
--- a/app/utils/image_processing.py
+++ b/app/utils/image_processing.py
@@ -1,9 +1,13 @@
 import os
 import uuid
+import logging
 from pathlib import Path
 from fastapi import UploadFile
 from PIL import Image
 
+# Set up logging
+logger = logging.getLogger(__name__)
+
 # Determine if we're running in Docker or locally
 in_docker = os.path.exists('/.dockerenv')
 
@@ -49,13 +53,12 @@ async def save_upload_file(file: UploadFile) -> dict:
                 
                 # Remove the temporary TIFF file
                 os.remove(temp_file_path)
-                
-                # Use the PNG file as the final file
+                  # Use the PNG file as the final file
                 final_file_path = png_file_path
                 final_filename = png_filename
         except Exception as e:
             # If conversion fails, keep the original TIFF file
-            print(f"Warning: Failed to convert TIFF to PNG: {e}")
+            logger.warning(f"Failed to convert TIFF to PNG: {e}")
     
     # Get image dimensions and resolution
     resolution = None
diff --git a/app/utils/sam_model.py b/app/utils/sam_model.py
index bd69f79..201003e 100644
--- a/app/utils/sam_model.py
+++ b/app/utils/sam_model.py
@@ -4,79 +4,204 @@
 import cv2
 from pathlib import Path
 import os
+import threading
+import logging
 from typing import Dict, Tuple, List, Optional
 
+# Set up logging for SAM model
+logger = logging.getLogger(__name__)
+
 class SAMSegmenter:
-    def __init__(self):
-        self.device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')        # Check if running in Docker or locally
+    def __init__(self):        # Enhanced GPU detection and setup
+        if torch.cuda.is_available():
+            self.device = torch.device('cuda')
+            logger.info(f"CUDA available! Using GPU: {torch.cuda.get_device_name(0)}")
+            logger.info(f"CUDA memory: {torch.cuda.get_device_properties(0).total_memory / 1024**3:.1f} GB")
+            # Set optimal GPU settings for SAM real-time performance
+            torch.backends.cudnn.benchmark = True
+            torch.backends.cuda.matmul.allow_tf32 = True
+            torch.backends.cudnn.deterministic = False  # For better performance
+            # Enable memory optimization
+            torch.cuda.empty_cache()
+        else:
+            self.device = torch.device('cpu')
+            logger.warning("CUDA not available, using CPU (will be slower)")
+            # CPU optimizations
+            torch.set_num_threads(4)  # Limit CPU threads for better responsiveness
+            
+        logger.info(f"SAM Model will run on: {self.device}")
+        # Check if running in Docker or locally
         in_docker = os.path.exists('/.dockerenv')
         base_path = Path("/app") if in_docker else Path(".")
         
         self.sam_checkpoint = str(base_path / "models/sam_vit_h_4b8939.pth")
-        self.model_type = "vit_h"
-        
+        self.model_type = "vit_h"        
         if not Path(self.sam_checkpoint).exists():
             raise FileNotFoundError(f"SAM checkpoint not found at {self.sam_checkpoint}. Please download it from https://dl.fbaipublicfiles.com/segment_anything/sam_vit_h_4b8939.pth")
         
+        logger.info(f"Loading SAM model from: {self.sam_checkpoint}")
         self.sam = sam_model_registry[self.model_type](checkpoint=self.sam_checkpoint)
+        
+        # Move to device and optimize for inference
         self.sam.to(device=self.device)
+        # Note: Removed half-precision to avoid dtype mismatch issues        # if self.device.type == 'cuda':
+        #     self.sam = self.sam.half()
+        #     logger.info("Using half-precision (FP16) for faster GPU inference")
+        
         self.predictor = SamPredictor(self.sam)
+        logger.info("SAM model loaded successfully")
         
         # Cache for storing image embeddings and masks
         self.cache: Dict[str, Dict] = {}
-        self.current_image_path = None
+        self.current_image_path = None        # Add thread lock to prevent concurrent access issues
+        self._lock = threading.Lock()
+        logger.info("Thread synchronization enabled for multi-image processing")
 
     def set_image(self, image_path):
-        """Set the image for segmentation and cache its embedding"""
-        # Check if we've already processed this image
-        if image_path in self.cache:
+        """Set the image for segmentation and cache its embedding with thread safety"""
+        with self._lock:
+            # Always load the image from disk to ensure we have the correct data
+            image = cv2.imread(image_path)
+            if image is None:
+                raise ValueError(f"Could not load image from {image_path}")
+            image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)            # Check if we have cached embeddings for this image
+            if image_path in self.cache:
+                logger.debug(f"Found cached embeddings for {Path(image_path).name}")
+                
+                # Only re-set the image if it's different from the current one
+                if self.current_image_path != image_path:
+                    logger.debug(f"Re-setting predictor to cached image: {Path(image_path).name}")
+                    with torch.no_grad():
+                        self.predictor.set_image(image)
+                    self.current_image_path = image_path
+                    self._last_set_image = image_path
+                else:
+                    logger.debug(f"Image already loaded - instant segmentation ready!")
+                
+                return self.cache[image_path]['image_size']
+            
+            logger.info(f"Loading and processing new image: {Path(image_path).name}")
+            logger.debug(f"Image size: {image.shape[1]}x{image.shape[0]} pixels")
+              # Generate embeddings on GPU (this is the heavy computation)
+            with torch.no_grad():  # Disable gradients for faster inference
+                self.predictor.set_image(image)
+            
+            logger.debug(f"Image embeddings generated on {self.device}")
+            
+            # Store in cache
+            self.cache[image_path] = {
+                'image_size': image.shape[:2],  # (height, width)
+                'masks': {},  # Will store generated masks
+                'embeddings': None  # This is implicitly stored in the predictor
+            }
             self.current_image_path = image_path
-            return self.cache[image_path]['image_size']
-        
-        # Load and process the new image
-        image = cv2.imread(image_path)
-        image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
-        self.predictor.set_image(image)
-        
-        # Store in cache
-        self.cache[image_path] = {
-            'image_size': image.shape[:2],  # (height, width)
-            'masks': {},  # Will store generated masks
-            'embeddings': None  # This is implicitly stored in the predictor
-        }
-        self.current_image_path = image_path
-        
-        return image.shape[:2]  # Return height, width
+            self._last_set_image = image_path
+            
+            return image.shape[:2]  # Return height, width
+
+    def preprocess_image(self, image_path):
+        """Pre-generate embeddings for an image without requiring immediate segmentation"""
+        with self._lock:
+            # Check if we've already processed this image
+            if image_path in self.cache:
+                logger.debug(f"Image {Path(image_path).name} already has cached embeddings")
+                return True
+            
+            try:
+                logger.info(f"Pre-processing image for faster segmentation: {Path(image_path).name}")
+                
+                # Load and process the image
+                image = cv2.imread(image_path)
+                if image is None:
+                    raise ValueError(f"Could not load image from {image_path}")
+                    
+                image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+                
+                # Generate embeddings on GPU using the main predictor
+                with torch.no_grad():
+                    self.predictor.set_image(image)                # Store in cache and set as current image
+                self.cache[image_path] = {
+                    'image_size': image.shape[:2],  # (height, width)
+                    'masks': {},  # Will store generated masks
+                    'embeddings': None  # This is implicitly stored in the predictor
+                }
+                self.current_image_path = image_path
+                self._last_set_image = image_path                
+                logger.info(f"Pre-processing complete for {Path(image_path).name}")
+                return True
+                
+            except Exception as e:
+                logger.error(f"Error pre-processing image {Path(image_path).name}: {e}")
+                return False
 
     def predict_from_point(self, point_coords, point_labels=None):
-        """Generate mask from a point prompt, using cache if available"""
-        if self.current_image_path is None:
-            raise ValueError("No image set for segmentation. Call set_image() first.")
-        
-        # Convert to tuple for cache key
+        """Generate mask from a point prompt, using cache if available with thread safety"""
+        # First check cache without lock for performance
         point_key = tuple(point_coords)
-        
-        # Check if we already have a mask for this point
-        if point_key in self.cache[self.current_image_path]['masks']:
+        if (self.current_image_path and 
+            self.current_image_path in self.cache and 
+            point_key in self.cache[self.current_image_path]['masks']):
             return self.cache[self.current_image_path]['masks'][point_key]
         
-        # Generate new mask
-        point_coords_array = np.array([point_coords])
-        if point_labels is None:
-            point_labels = np.array([1])  # 1 indicates a foreground point
-        
-        masks, scores, _ = self.predictor.predict(
-            point_coords=point_coords_array,
-            point_labels=point_labels,
-            multimask_output=True
-        )        
-        best_mask_idx = np.argmax(scores)
-        mask = masks[best_mask_idx].astype(np.uint8) * 255  # Convert to 8-bit mask
-        
-        # Cache the result
-        self.cache[self.current_image_path]['masks'][point_key] = mask
-        
-        return mask
+        with self._lock:
+            if self.current_image_path is None:
+                raise ValueError("No image set for segmentation. Call set_image() first.")
+            
+            # Ensure we have the correct image set in the predictor
+            if self.current_image_path not in self.cache:
+                raise ValueError(f"Image {self.current_image_path} not found in cache. Call set_image() first.")
+            
+            # Re-set the image if it's not the current one (safety check)
+            # This ensures the predictor has the correct embeddings
+            if hasattr(self, '_last_set_image') and self._last_set_image != self.current_image_path:
+                logger.debug(f"Re-setting image in predictor for thread safety: {Path(self.current_image_path).name}")
+                image = cv2.imread(self.current_image_path)
+                image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+                with torch.no_grad():
+                    self.predictor.set_image(image)
+            
+            self._last_set_image = self.current_image_path
+              # Double-check cache (in case another thread added it)
+            if point_key in self.cache[self.current_image_path]['masks']:
+                logger.debug(f"Using cached mask for point {point_coords} (added by another thread)")
+                return self.cache[self.current_image_path]['masks'][point_key]
+            
+            logger.debug(f"Generating new mask for point {point_coords} on {self.device}")
+            
+            try:
+                # Generate new mask with performance optimizations
+                point_coords_array = np.array([point_coords])
+                if point_labels is None:
+                    point_labels = np.array([1])  # 1 indicates a foreground point
+                
+                # Ensure inputs are the right data type for GPU
+                point_coords_array = point_coords_array.astype(np.float32)
+                point_labels = point_labels.astype(np.int32)
+                
+                # Use GPU optimization if available
+                with torch.no_grad():  # Disable gradient computation for faster inference
+                    masks, scores, _ = self.predictor.predict(
+                        point_coords=point_coords_array,
+                        point_labels=point_labels,
+                        multimask_output=True
+                    )
+                
+                best_mask_idx = np.argmax(scores)
+                mask = masks[best_mask_idx].astype(np.uint8) * 255  # Convert to 8-bit mask
+                
+                logger.debug(f"Mask generated successfully (confidence: {scores[best_mask_idx]:.3f})")
+                
+                # Cache the result
+                self.cache[self.current_image_path]['masks'][point_key] = mask
+                
+                return mask
+                
+            except Exception as e:
+                logger.error(f"Error generating mask: {e}")
+                # Clear CUDA cache if error occurs
+                if torch.cuda.is_available():
+                    torch.cuda.empty_cache()
+                raise
 
     def mask_to_polygon(self, mask):
         """Convert binary mask to polygon coordinates (normalized 0-1)"""
diff --git a/app/utils/test_utils.py b/app/utils/test_utils.py
deleted file mode 100644
index e69de29..0000000
diff --git a/app/websocket_notify.py b/app/websocket_notify.py
deleted file mode 100644
index edad9d0..0000000
--- a/app/websocket_notify.py
+++ /dev/null
@@ -1,61 +0,0 @@
-from fastapi import WebSocket, WebSocketDisconnect, APIRouter
-from typing import Dict, List
-import asyncio
-import logging
-
-router = APIRouter()
-logger = logging.getLogger("websocket_notify")
-
-class ConnectionManager:
-    def __init__(self):
-        self.active_connections: Dict[str, WebSocket] = {}
-        self.pending_messages: Dict[str, List[str]] = {}
-
-    async def connect(self, session_id: str, websocket: WebSocket):
-        await websocket.accept()
-        self.active_connections[session_id] = websocket
-        logger.info(f"WebSocket connected for session {session_id}")
-        
-        # Send any pending messages for this session
-        if session_id in self.pending_messages:
-            for message in self.pending_messages[session_id]:
-                try:
-                    await websocket.send_text(message)
-                    logger.info(f"Sent pending message to {session_id}: {message}")
-                except Exception as e:
-                    logger.error(f"Failed to send pending message: {e}")
-            # Clear pending messages after sending
-            del self.pending_messages[session_id]
-
-    def disconnect(self, session_id: str):
-        if session_id in self.active_connections:
-            del self.active_connections[session_id]
-            logger.info(f"WebSocket disconnected for session {session_id}")
-
-    async def send_message(self, session_id: str, message: str):
-        websocket = self.active_connections.get(session_id)
-        if websocket:
-            try:
-                await websocket.send_text(message)
-                logger.info(f"Sent message to {session_id}: {message}")
-            except Exception as e:
-                logger.error(f"Failed to send message to {session_id}: {e}")
-                # Remove connection if it's broken
-                self.disconnect(session_id)
-        else:
-            # Store message for when WebSocket connects
-            if session_id not in self.pending_messages:
-                self.pending_messages[session_id] = []
-            self.pending_messages[session_id].append(message)
-            logger.info(f"Stored pending message for {session_id}: {message}")
-
-manager = ConnectionManager()
-
-@router.websocket("/ws/notify/{session_id}")
-async def websocket_endpoint(websocket: WebSocket, session_id: str):
-    await manager.connect(session_id, websocket)
-    try:
-        while True:
-            await websocket.receive_text()  # Keep connection alive
-    except WebSocketDisconnect:
-        manager.disconnect(session_id)
diff --git a/build.bat b/build.bat
deleted file mode 100644
index b04e882..0000000
--- a/build.bat
+++ /dev/null
@@ -1,23 +0,0 @@
-@echo off
-echo Building SAT Annotator Frontend...
-echo.
-
-echo Checking for web directory...
-if not exist "web" (
-    echo Error: web directory not found!
-    pause
-    exit /b 1
-)
-
-cd web
-
-echo Frontend files are ready!
-echo.
-echo To run the application:
-echo 1. Start the backend: uvicorn app.main:app --reload
-echo 2. Visit: http://localhost:8000
-echo.
-echo The frontend will be served automatically by FastAPI.
-echo.
-
-pause
diff --git a/build.sh b/build.sh
deleted file mode 100644
index bdfab74..0000000
--- a/build.sh
+++ /dev/null
@@ -1,21 +0,0 @@
-#!/bin/bash
-
-echo "Building SAT Annotator Frontend..."
-echo
-
-echo "Checking for web directory..."
-if [ ! -d "web" ]; then
-    echo "Error: web directory not found!"
-    exit 1
-fi
-
-cd web
-
-echo "Frontend files are ready!"
-echo
-echo "To run the application:"
-echo "1. Start the backend: uvicorn app.main:app --reload"
-echo "2. Visit: http://localhost:8000"
-echo
-echo "The frontend will be served automatically by FastAPI."
-echo
diff --git a/docker-compose.yml b/docker-compose.yml
index 2615494..766f04a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,20 +13,15 @@ services:
       - ENVIRONMENT=development
       - SESSION_SECRET=your_session_secret_key_here
     command: ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]
-
   frontend:
     build:
       context: .
       dockerfile: Dockerfile.web
     ports:
-      - "5173:5173"
+      - "8080:8080"
     volumes:
       - ./web:/web
-      - /web/node_modules
     working_dir: /web
-    environment:
-      - VITE_API_PROXY_TARGET=http://backend:8000
-      - VITE_API_URL=/api
     depends_on:
       - backend
 
diff --git a/docs/ERD.png b/docs/ERD.png
deleted file mode 100644
index b9bcce5..0000000
Binary files a/docs/ERD.png and /dev/null differ
diff --git a/scripts/db/01-init-schema.sql b/scripts/db/01-init-schema.sql
deleted file mode 100644
index 7348e37..0000000
--- a/scripts/db/01-init-schema.sql
+++ /dev/null
@@ -1,40 +0,0 @@
-CREATE TABLE images (
-    image_id SERIAL PRIMARY KEY,
-    file_name VARCHAR(255) NOT NULL,
-    file_path TEXT NOT NULL,
-    resolution VARCHAR(50),  -- e.g., "1920x1080"
-    capture_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-    source VARCHAR(100), -- e.g., "Sentinel-2, Landsat-8"
-    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
-CREATE TABLE labels (
-    label_id SERIAL PRIMARY KEY,
-    name VARCHAR(100) UNIQUE NOT NULL,
-    description TEXT
-);
-
-CREATE TABLE ai_models (
-    model_id SERIAL PRIMARY KEY,
-    model_name VARCHAR(255) NOT NULL,
-    version VARCHAR(50),
-    trained_on TEXT,
-    accuracy FLOAT CHECK (accuracy BETWEEN 0 AND 1),
-    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
-CREATE TABLE annotation_files (
-    annotation_id SERIAL PRIMARY KEY,
-    image_id INT REFERENCES images(image_id) ON DELETE CASCADE,
-    file_path TEXT NOT NULL,  -- Path to the CSV file
-    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-    auto_generated BOOLEAN DEFAULT FALSE,
-    model_id INT REFERENCES ai_models(model_id) ON DELETE SET NULL
-);
-
--- Insert some default labels
-INSERT INTO labels (name, description) VALUES 
-('building', 'Man-made structures'),
-('road', 'Transportation routes'),
-('vegetation', 'Trees, grass, and other plant life'),
-('water', 'Lakes, rivers, ponds, and oceans');
\ No newline at end of file
diff --git a/web/README.md b/web/README.md
deleted file mode 100644
index 40965d1..0000000
--- a/web/README.md
+++ /dev/null
@@ -1,147 +0,0 @@
-# SAT Annotator Frontend
-
-A responsive web frontend for the Satellite Image Annotation Tool built with vanilla HTML, CSS, and JavaScript.
-
-## Features
-
-- **Responsive Design**: Works on desktop, tablet, and mobile devices
-- **Image Upload**: Drag & drop or click to upload satellite images (JPG, PNG, TIFF, GeoTIFF)
-- **AI-Powered Segmentation**: Click on image to generate AI segmentation using SAM model
-- **Manual Annotation**: Draw polygons manually for precise annotation
-- **Smart Label System**: Select from predefined labels or add custom labels
-- **Annotation Management**: Edit labels, delete annotations, view annotation list
-- **Export Functionality**: Export annotations in JSON format
-- **Zoom and Pan**: Interactive canvas with zoom and pan controls
-- **Keyboard Shortcuts**: Efficient workflow with keyboard shortcuts
-- **Session Management**: Manages uploaded images and annotations in session
-
-## Tools
-
-1. **Select Tool (1)**: Select and manipulate existing annotations
-2. **AI Point Tool (2)**: Click to generate AI segmentation at point
-3. **Polygon Tool (3)**: Draw manual polygon annotations
-4. **Pan Tool (4)**: Pan around the image
-
-## Label System
-
-The application includes a smart label system with:
-- **Predefined Labels**: Building, Road, Vegetation, Water, Parking
-- **Current Label Display**: Shows which label will be applied to new annotations
-- **Custom Labels**: Add your own labels and remove them when not needed
-- **Automatic Assignment**: New annotations automatically get the currently selected label
-- **Easy Editing**: Click edit on any annotation to change its label
-
-## Keyboard Shortcuts
-
-- `1` - Select tool
-- `2` - AI Point tool  
-- `3` - Polygon tool
-- `4` - Pan tool
-- `ESC` - Cancel drawing / Clear selection
-- `DELETE` - Delete selected annotation
-- `+` - Zoom in
-- `-` - Zoom out  
-- `0` - Fit to screen
-
-## Usage
-
-1. **Upload Image**: Drag and drop or click the upload area to add satellite images
-2. **Select Label**: Choose the label you want to apply to new annotations from the Labels section
-3. **Select Tool**: Choose appropriate tool from the toolbar
-4. **Annotate**: 
-   - For AI segmentation: Select AI Point tool and click on features
-   - For manual annotation: Select Polygon tool and click to draw points
-   - All new annotations will automatically use the currently selected label
-5. **Manage Labels**: 
-   - Click any label button to make it active
-   - Add custom labels using the input field
-   - Remove custom labels by clicking the X button (default labels cannot be removed)
-6. **Edit Existing**: Right-click any annotation to edit its label or delete it
-7. **Export**: Click Export JSON to download annotations in JSON format
-
-## File Structure
-
-```
-web/
-├── index.html          # Main HTML file
-├── styles.css          # All CSS styles
-├── js/
-│   ├── app.js          # Main application controller
-│   ├── api.js          # API communication layer
-│   ├── canvas.js       # Canvas management
-│   ├── annotations.js  # Annotation management
-│   └── utils.js        # Utility functions
-└── package.json        # Project metadata
-```
-
-## Browser Compatibility
-
-- Chrome 90+
-- Firefox 88+
-- Safari 14+
-- Edge 90+
-
-## Development
-
-To run locally:
-
-```bash
-cd web
-python -m http.server 8080
-```
-
-Then visit `http://localhost:8080`
-
-## JSON Export Format
-
-Annotations are exported in the following JSON structure:
-
-```json
-{
-  "image": {
-    "id": "image_id",
-    "filename": "image.tif",
-    "resolution": "1024x768",
-    "width": 1024,
-    "height": 768
-  },
-  "annotations": [
-    {
-      "id": "annotation_id",
-      "type": "ai_segment|manual_polygon",
-      "label": "building",
-      "polygon": [[x1,y1], [x2,y2], ...],
-      "source": "ai|manual",
-      "created": "2025-06-02T...",
-      "points_count": 5
-    }
-  ],
-  "export_info": {
-    "format": "json",
-    "exported_at": "2025-06-02T...",
-    "tool": "SAT Annotator",
-    "version": "1.0.0"
-  },
-  "statistics": {
-    "total_annotations": 10,
-    "ai_generated": 7,
-    "manual": 3,
-    "unique_labels": 4
-  }
-}
-```
-
-## Responsive Design
-
-The interface adapts to different screen sizes:
-
-- **Desktop**: Full sidebar and canvas layout
-- **Tablet**: Optimized for touch interaction
-- **Mobile**: Collapsible sidebar, touch-friendly controls
-
-## Performance
-
-- Optimized canvas rendering with device pixel ratio support
-- Efficient polygon hit testing for annotation selection
-- Debounced resize and scroll events
-- Progressive image loading
diff --git a/web/canvas-debug.html b/web/canvas-debug.html
deleted file mode 100644
index a06e9f1..0000000
--- a/web/canvas-debug.html
+++ /dev/null
@@ -1,155 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Canvas Debug</title>
-    <style>
-        body { margin: 20px; font-family: Arial, sans-serif; }
-        .debug-canvas { border: 2px solid red; width: 400px; height: 300px; }
-        button { margin: 5px; padding: 10px; }
-        .log { background: #f0f0f0; padding: 10px; margin: 10px 0; font-family: monospace; white-space: pre-wrap; }
-    </style>
-</head>
-<body>
-    <h1>Canvas Debug Test</h1>
-    
-    <button onclick="testBasicDrawing()">Test Basic Drawing</button>
-    <button onclick="testImageDrawing()">Test Image Drawing</button>
-    <button onclick="testWithDPR()">Test with DPR</button>
-    <button onclick="clearLog()">Clear Log</button>
-    
-    <canvas id="debugCanvas" class="debug-canvas"></canvas>
-    
-    <div id="log" class="log"></div>
-
-    <script>
-        const canvas = document.getElementById('debugCanvas');
-        const ctx = canvas.getContext('2d');
-        const logDiv = document.getElementById('log');
-        
-        function log(message) {
-            logDiv.textContent += new Date().toLocaleTimeString() + ': ' + message + '\n';
-            console.log(message);
-        }
-        
-        function clearLog() {
-            logDiv.textContent = '';
-        }
-        
-        function setupCanvas() {
-            const rect = canvas.getBoundingClientRect();
-            const dpr = window.devicePixelRatio || 1;
-            
-            log(`Canvas rect: ${rect.width} x ${rect.height}`);
-            log(`Device pixel ratio: ${dpr}`);
-            
-            canvas.width = rect.width * dpr;
-            canvas.height = rect.height * dpr;
-            canvas.style.width = rect.width + 'px';
-            canvas.style.height = rect.height + 'px';
-            
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.scale(dpr, dpr);
-            
-            log(`Canvas actual size: ${canvas.width} x ${canvas.height}`);
-            log(`Canvas style size: ${canvas.style.width} x ${canvas.style.height}`);
-        }
-        
-        function testBasicDrawing() {
-            log('=== Testing Basic Drawing ===');
-            setupCanvas();
-            
-            // Clear canvas
-            const rect = canvas.getBoundingClientRect();
-            ctx.clearRect(0, 0, rect.width, rect.height);
-            log('Canvas cleared');
-            
-            // Draw rectangle
-            ctx.fillStyle = 'blue';
-            ctx.fillRect(10, 10, 100, 50);
-            log('Blue rectangle drawn at (10,10) size 100x50');
-            
-            // Draw circle
-            ctx.beginPath();
-            ctx.arc(200, 100, 30, 0, 2 * Math.PI);
-            ctx.fillStyle = 'red';
-            ctx.fill();
-            log('Red circle drawn at (200,100) radius 30');
-        }
-        
-        function testImageDrawing() {
-            log('=== Testing Image Drawing ===');
-            setupCanvas();
-            
-            const img = new Image();
-            img.onload = function() {
-                log(`Image loaded: ${img.naturalWidth} x ${img.naturalHeight}`);
-                
-                const rect = canvas.getBoundingClientRect();
-                ctx.clearRect(0, 0, rect.width, rect.height);
-                
-                // Draw at original size
-                ctx.drawImage(img, 50, 50);
-                log(`Image drawn at (50,50) original size`);
-                
-                // Draw scaled
-                ctx.drawImage(img, 150, 50, img.naturalWidth * 0.5, img.naturalHeight * 0.5);
-                log(`Image drawn at (150,50) 50% scale`);
-            };
-            
-            img.onerror = function() {
-                log('Failed to load image, creating test pattern instead');
-                const rect = canvas.getBoundingClientRect();
-                ctx.clearRect(0, 0, rect.width, rect.height);
-                
-                // Create a test pattern
-                for(let i = 0; i < 10; i++) {
-                    ctx.fillStyle = `hsl(${i * 36}, 70%, 50%)`;
-                    ctx.fillRect(i * 30, 50, 25, 25);
-                }
-                log('Test pattern drawn');
-            };
-            
-            // Create a simple test image
-            img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFYSURBVBiVY/z//z8DJQAggJiQOQACCJkNEEDAQHEgAAiAYOIgABBAxIA8AAEELvj//38GBgYGBoAAAmcoKSlhYGdnZ2BgYGBgAAggZoAAAgaKAQFAAIED/P//HwwACCBkgQABBAwUAwKAAAIGioEAIIAYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGP5TAARAtf//fwYMAAggcCKOjo4ZAgwMDAwMDAwM/19AHT9++ACAAGJ89+4dAy4AEEDA5Pnz5wNCAy4AEEDA5AEIIGAw/gYQQMDk+Q8ggID5DyCA/v/794eBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgQHkDyCAXn//DkwAbz//rkRAHQgBhAwEEEDA5Pnz5//hgJD5B1QNigEBBAz+/9//T2CBAKC6AAgcB34QRDA5Pnz5++oABRQzUB1AAAEDxYAAIICA+Q8ggIDJEySAkIkDCCBkQAE/gR6CACIAAAABBH4AQQABv8AAv8DEQABBAAn8A8AAAv8An0AAv8AnEEAAAAABJRU5ErkJggg==';
-        }
-        
-        function testWithDPR() {
-            log('=== Testing Different DPR Scenarios ===');
-            
-            // Test different DPR values
-            [1, 1.25, 1.5, 2].forEach(testDPR => {
-                log(`\nTesting with simulated DPR: ${testDPR}`);
-                
-                const rect = canvas.getBoundingClientRect();
-                log(`Canvas rect: ${rect.width} x ${rect.height}`);
-                
-                canvas.width = rect.width * testDPR;
-                canvas.height = rect.height * testDPR;
-                canvas.style.width = rect.width + 'px';
-                canvas.style.height = rect.height + 'px';
-                
-                ctx.setTransform(1, 0, 0, 1, 0, 0);
-                ctx.scale(testDPR, testDPR);
-                
-                // Clear and draw
-                ctx.clearRect(0, 0, rect.width, rect.height);
-                
-                ctx.fillStyle = `hsl(${testDPR * 120}, 70%, 50%)`;
-                ctx.fillRect(10, 10, 50, 30);
-                ctx.fillText(`DPR: ${testDPR}`, 70, 30);
-                
-                log(`Drew test rectangle with DPR ${testDPR}`);
-                
-                // Small delay to see the effect
-                setTimeout(() => {}, 500);
-            });
-        }
-        
-        // Initial setup
-        log('Canvas debug test initialized');
-        setupCanvas();
-    </script>
-</body>
-</html>
diff --git a/web/canvas-test.html b/web/canvas-test.html
deleted file mode 100644
index fa559c8..0000000
--- a/web/canvas-test.html
+++ /dev/null
@@ -1,151 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Canvas Test</title>
-    <style>
-        body {
-            margin: 0;
-            padding: 20px;
-            font-family: Arial, sans-serif;
-        }
-        .canvas-container {
-            width: 800px;
-            height: 600px;
-            border: 2px solid #ccc;
-            position: relative;
-        }
-        canvas {
-            display: block;
-            width: 100%;
-            height: 100%;
-        }
-        .controls {
-            margin: 20px 0;
-        }
-        button {
-            margin: 5px;
-            padding: 10px 20px;
-        }
-    </style>
-</head>
-<body>
-    <h1>Canvas Drawing Test</h1>
-    
-    <div class="controls">
-        <button onclick="drawRectangle()">Draw Rectangle</button>
-        <button onclick="drawCircle()">Draw Circle</button>
-        <button onclick="loadTestImage()">Load Test Image</button>
-        <button onclick="clearCanvas()">Clear Canvas</button>
-    </div>
-    
-    <div class="canvas-container">
-        <canvas id="testCanvas"></canvas>
-    </div>
-    
-    <div id="info"></div>
-
-    <script>
-        const canvas = document.getElementById('testCanvas');
-        const ctx = canvas.getContext('2d');
-        const container = canvas.parentElement;
-        
-        function setupCanvas() {
-            const rect = container.getBoundingClientRect();
-            const dpr = window.devicePixelRatio || 1;
-            
-            console.log('Setting up canvas:');
-            console.log('- Container dimensions:', rect.width, 'x', rect.height);
-            console.log('- Device pixel ratio:', dpr);
-            
-            canvas.width = rect.width * dpr;
-            canvas.height = rect.height * dpr;
-            canvas.style.width = rect.width + 'px';
-            canvas.style.height = rect.height + 'px';
-            
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.scale(dpr, dpr);
-            
-            console.log('- Canvas actual size:', canvas.width, 'x', canvas.height);
-            console.log('- Canvas style size:', canvas.style.width, 'x', canvas.style.height);
-            
-            updateInfo();
-        }
-        
-        function updateInfo() {
-            const rect = container.getBoundingClientRect();
-            document.getElementById('info').innerHTML = `
-                <strong>Canvas Info:</strong><br>
-                Container: ${rect.width} x ${rect.height}<br>
-                Canvas actual: ${canvas.width} x ${canvas.height}<br>
-                Canvas style: ${canvas.style.width} x ${canvas.style.height}<br>
-                Device Pixel Ratio: ${window.devicePixelRatio || 1}
-            `;
-        }
-        
-        function clearCanvas() {
-            const rect = container.getBoundingClientRect();
-            ctx.clearRect(0, 0, rect.width, rect.height);
-            console.log('Canvas cleared with dimensions:', rect.width, 'x', rect.height);
-        }
-        
-        function drawRectangle() {
-            ctx.fillStyle = 'blue';
-            ctx.fillRect(50, 50, 200, 100);
-            console.log('Blue rectangle drawn');
-        }
-        
-        function drawCircle() {
-            ctx.beginPath();
-            ctx.arc(400, 200, 50, 0, 2 * Math.PI);
-            ctx.fillStyle = 'red';
-            ctx.fill();
-            console.log('Red circle drawn');
-        }
-          function loadTestImage() {
-            const img = new Image();
-            img.onload = function() {
-                console.log('Test image loaded:', img.naturalWidth, 'x', img.naturalHeight);
-                clearCanvas();
-                
-                // Draw image at 50% scale
-                const scale = 0.5;
-                const x = 50;
-                const y = 50;
-                const width = img.naturalWidth * scale;
-                const height = img.naturalHeight * scale;
-                
-                console.log('Drawing image at:', x, y, width, height);
-                ctx.drawImage(img, x, y, width, height);
-                console.log('Test image drawn successfully');
-            };
-            
-            img.onerror = function() {
-                console.error('Failed to load test image');
-                // Draw a colored rectangle instead
-                ctx.fillStyle = 'green';
-                ctx.fillRect(50, 50, 300, 200);
-                console.log('Drew green rectangle as fallback');
-            };
-            
-            // Use a simple base64 test image (small red square)
-            img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==';
-        }
-        
-        // Initialize
-        setupCanvas();
-        
-        // Handle resize
-        window.addEventListener('resize', function() {
-            setupCanvas();
-        });
-        
-        // Initial test
-        setTimeout(() => {
-            drawRectangle();
-            drawCircle();
-        }, 100);
-    </script>
-</body>
-</html>
diff --git a/web/debug-minimal.html b/web/debug-minimal.html
deleted file mode 100644
index 234ff29..0000000
--- a/web/debug-minimal.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Minimal Debug</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <div id="loadingOverlay" class="loading-overlay">
-        <div class="loading-content">
-            <div class="spinner"></div>
-            <p id="loadingText">Loading images...</p>
-        </div>
-    </div>
-    
-    <div style="padding: 20px; position: relative; z-index: 10000;">
-        <h1>Debug Console</h1>
-        <button onclick="testSequence()">Test Full Sequence</button>
-        <pre id="console" style="background: #f0f0f0; padding: 10px; margin-top: 10px; height: 400px; overflow-y: auto;"></pre>
-    </div>
-
-    <script src="js/utils.js"></script>
-    <script src="js/api.js"></script>
-    <script>
-        // Capture all console output
-        const consoleDiv = document.getElementById('console');
-        const originalLog = console.log;
-        const originalError = console.error;
-        
-        function logToDiv(message, type = 'log') {
-            const timestamp = new Date().toLocaleTimeString();
-            consoleDiv.textContent += `[${timestamp}] ${type.toUpperCase()}: ${message}\n`;
-            consoleDiv.scrollTop = consoleDiv.scrollHeight;
-        }
-        
-        console.log = function(...args) {
-            originalLog.apply(console, args);
-            logToDiv(args.join(' '), 'log');
-        };
-        
-        console.error = function(...args) {
-            originalError.apply(console, args);
-            logToDiv(args.join(' '), 'error');
-        };
-
-        async function testSequence() {
-            try {
-                console.log('=== Starting test sequence ===');
-                
-                // Test 1: Check DOM elements
-                console.log('1. Checking DOM elements...');
-                const overlay = document.getElementById('loadingOverlay');
-                const text = document.getElementById('loadingText');
-                console.log('Loading overlay found:', !!overlay);
-                console.log('Loading text found:', !!text);
-                
-                // Test 2: Test Utils functions
-                console.log('2. Testing Utils.showLoading...');
-                Utils.showLoading('Test loading...');
-                console.log('Loading shown, overlay hidden status:', overlay.hidden);
-                
-                await new Promise(resolve => setTimeout(resolve, 1000));
-                
-                // Test 3: Test API call
-                console.log('3. Testing API call...');
-                const images = await api.getImages();
-                console.log('API response:', images);
-                
-                // Test 4: Test Utils.hideLoading
-                console.log('4. Testing Utils.hideLoading...');
-                Utils.hideLoading();
-                console.log('Loading hidden, overlay hidden status:', overlay.hidden);
-                
-                console.log('=== Test sequence complete ===');
-                
-            } catch (error) {
-                console.error('Test sequence failed:', error);
-                console.error('Error stack:', error.stack);
-            }
-        }
-        
-        // Auto-run when page loads
-        window.addEventListener('load', () => {
-            console.log('Page loaded');
-            setTimeout(testSequence, 1000);
-        });
-    </script>
-</body>
-</html>
diff --git a/web/debug.html b/web/debug.html
deleted file mode 100644
index e20060f..0000000
--- a/web/debug.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Debug - SAT Annotator</title>
-    <style>
-        body { font-family: Arial, sans-serif; padding: 20px; }
-        .debug-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; border-radius: 5px; }
-        .success { background-color: #d4edda; border-color: #c3e6cb; }
-        .error { background-color: #f8d7da; border-color: #f5c6cb; }
-        button { margin: 5px; padding: 10px 15px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
-        button:hover { background: #0056b3; }
-        pre { background: #f8f9fa; padding: 10px; border-radius: 3px; overflow-x: auto; }
-    </style>
-</head>
-<body>
-    <h1>SAT Annotator Debug Tool</h1>
-    
-    <div class="debug-section">
-        <h3>API Connection Test</h3>
-        <button onclick="testAPI()">Test API Connection</button>
-        <button onclick="testImages()">Test Images Endpoint</button>
-        <div id="apiResults"></div>
-    </div>
-
-    <div class="debug-section">
-        <h3>JavaScript Module Loading</h3>
-        <button onclick="testModules()">Test Module Loading</button>
-        <div id="moduleResults"></div>
-    </div>
-
-    <div class="debug-section">
-        <h3>Console Output</h3>
-        <div id="consoleOutput"><pre>Check browser console for real-time logs...</pre></div>
-    </div>
-
-    <script>
-        // Redirect console.log to also show in the page
-        const originalLog = console.log;
-        const originalError = console.error;
-        
-        function addToOutput(message, type = 'log') {
-            const output = document.getElementById('consoleOutput');
-            const div = document.createElement('div');
-            div.style.color = type === 'error' ? 'red' : 'black';
-            div.style.marginBottom = '5px';
-            div.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
-            output.appendChild(div);
-            output.scrollTop = output.scrollHeight;
-        }
-
-        console.log = function(...args) {
-            originalLog.apply(console, args);
-            addToOutput(args.join(' '), 'log');
-        };
-
-        console.error = function(...args) {
-            originalError.apply(console, args);
-            addToOutput(args.join(' '), 'error');
-        };
-
-        async function testAPI() {
-            const results = document.getElementById('apiResults');
-            results.innerHTML = '<p>Testing API connection...</p>';
-            
-            try {
-                const response = await fetch('/');
-                if (response.ok) {
-                    results.innerHTML = '<div class="success">✅ API connection successful</div>';
-                } else {
-                    results.innerHTML = '<div class="error">❌ API connection failed: ' + response.status + '</div>';
-                }
-            } catch (error) {
-                results.innerHTML = '<div class="error">❌ API connection error: ' + error.message + '</div>';
-            }
-        }
-
-        async function testImages() {
-            const results = document.getElementById('apiResults');
-            results.innerHTML = '<p>Testing images endpoint...</p>';
-            
-            try {
-                const response = await fetch('/api/images/');
-                if (response.ok) {
-                    const data = await response.json();
-                    results.innerHTML = '<div class="success">✅ Images endpoint working. Response: <pre>' + JSON.stringify(data, null, 2) + '</pre></div>';
-                } else {
-                    results.innerHTML = '<div class="error">❌ Images endpoint failed: ' + response.status + '</div>';
-                }
-            } catch (error) {
-                results.innerHTML = '<div class="error">❌ Images endpoint error: ' + error.message + '</div>';
-            }
-        }
-
-        function testModules() {
-            const results = document.getElementById('moduleResults');
-            const modules = [
-                'js/utils.js',
-                'js/api.js', 
-                'js/canvas.js',
-                'js/annotations.js',
-                'js/app.js'
-            ];
-            
-            results.innerHTML = '<p>Loading modules...</p>';
-            
-            let moduleResults = '';
-            modules.forEach(module => {
-                const script = document.createElement('script');
-                script.src = module;
-                script.onload = () => {
-                    moduleResults += `✅ ${module} loaded successfully\n`;
-                    results.innerHTML = '<pre>' + moduleResults + '</pre>';
-                };
-                script.onerror = () => {
-                    moduleResults += `❌ ${module} failed to load\n`;
-                    results.innerHTML = '<pre>' + moduleResults + '</pre>';
-                };
-                document.head.appendChild(script);
-            });
-        }
-        
-        // Auto-start basic tests
-        window.addEventListener('load', () => {
-            console.log('Debug page loaded');
-            testAPI();
-        });
-    </script>
-</body>
-</html>
diff --git a/web/demo-new.html b/web/demo-new.html
deleted file mode 100644
index fda6cdf..0000000
--- a/web/demo-new.html
+++ /dev/null
@@ -1,204 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SAT Annotator - Updated Features</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <style>
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            line-height: 1.6;
-            color: #333;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-            background: #f8fafc;
-        }
-        .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 2rem;
-            border-radius: 0.5rem;
-            margin-bottom: 2rem;
-            text-align: center;
-        }
-        .section {
-            background: white;
-            padding: 2rem;
-            border-radius: 0.5rem;
-            margin-bottom: 2rem;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        .feature-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 1.5rem;
-            margin: 2rem 0;
-        }
-        .feature-card {
-            background: #f8fafc;
-            padding: 1.5rem;
-            border-radius: 0.5rem;
-            border-left: 4px solid #3b82f6;
-        }
-        .feature-card h3 {
-            color: #1e40af;
-            margin-bottom: 0.5rem;
-        }
-        .btn {
-            display: inline-block;
-            padding: 0.75rem 1.5rem;
-            background: #3b82f6;
-            color: white;
-            text-decoration: none;
-            border-radius: 0.5rem;
-            transition: background 0.2s;
-            margin: 0.5rem 0.5rem 0.5rem 0;
-        }
-        .btn:hover {
-            background: #2563eb;
-        }
-        .btn-secondary {
-            background: #6b7280;
-        }
-        .btn-secondary:hover {
-            background: #4b5563;
-        }
-        .label-demo {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.5rem;
-            margin: 1rem 0;
-        }
-        .label-tag {
-            padding: 0.25rem 0.75rem;
-            background: #dbeafe;
-            color: #1d4ed8;
-            border-radius: 1rem;
-            font-size: 0.875rem;
-            display: flex;
-            align-items: center;
-            gap: 0.25rem;
-        }
-        .steps {
-            counter-reset: step-counter;
-        }
-        .step {
-            counter-increment: step-counter;
-            position: relative;
-            padding-left: 3rem;
-            margin-bottom: 1.5rem;
-        }
-        .step::before {
-            content: counter(step-counter);
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 2rem;
-            height: 2rem;
-            background: #3b82f6;
-            color: white;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-        }
-        .update-highlight {
-            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-            color: white;
-            padding: 1rem;
-            border-radius: 0.5rem;
-            margin-bottom: 1rem;
-        }
-    </style>
-</head>
-<body>
-    <div class="header">
-        <h1><i class="fas fa-satellite-dish"></i> SAT Annotator</h1>
-        <p>New & Improved Label System!</p>
-    </div>
-
-    <div class="update-highlight">
-        <h2><i class="fas fa-sparkles"></i> What's New</h2>
-        <p><strong>No more popup dialogs!</strong> The label system has been completely redesigned for a seamless annotation experience. Choose your labels before annotating and watch the magic happen!</p>
-    </div>
-
-    <div class="section">
-        <h2><i class="fas fa-tags"></i> New Smart Label System</h2>
-        
-        <div class="feature-grid">
-            <div class="feature-card">
-                <h3><i class="fas fa-mouse-pointer"></i> Select Before You Annotate</h3>
-                <p>Choose your label first, then create annotations. No interruptions, no popups - just smooth workflow.</p>
-                <div class="label-demo">
-                    <span class="label-tag"><i class="fas fa-building"></i> Building</span>
-                    <span class="label-tag"><i class="fas fa-road"></i> Road</span>
-                    <span class="label-tag"><i class="fas fa-tree"></i> Vegetation</span>
-                </div>
-            </div>
-            
-            <div class="feature-card">
-                <h3><i class="fas fa-plus"></i> Custom Labels Made Easy</h3>
-                <p>Add your own labels instantly with the input field. Remove them just as easily when you're done.</p>
-            </div>
-            
-            <div class="feature-card">
-                <h3><i class="fas fa-eye"></i> Always Know Your Current Label</h3>
-                <p>The prominent current label display shows exactly which label will be applied to new annotations.</p>
-            </div>
-            
-            <div class="feature-card">
-                <h3><i class="fas fa-edit"></i> Quick Editing</h3>
-                <p>Right-click any annotation to edit its label or delete it. Simple prompts replace confusing dialogs.</p>
-            </div>
-        </div>
-    </div>
-
-    <div class="section">
-        <h2><i class="fas fa-play"></i> How It Works Now</h2>
-        <div class="steps">
-            <div class="step">
-                <h3>Upload Your Image</h3>
-                <p>Same as before - drag & drop or click to upload satellite images</p>
-            </div>
-            <div class="step">
-                <h3>Choose Your Label First</h3>
-                <p><strong>NEW:</strong> Select the label you want from the Labels section in the sidebar</p>
-            </div>
-            <div class="step">
-                <h3>Annotate Away</h3>
-                <p>Use AI Point tool or Polygon tool - your chosen label is automatically applied!</p>
-            </div>
-            <div class="step">
-                <h3>Add Custom Labels As Needed</h3>
-                <p>Type in the custom label input and click + to add project-specific labels</p>
-            </div>
-            <div class="step">
-                <h3>Edit If Needed</h3>
-                <p>Right-click any annotation to quickly change its label or delete it</p>
-            </div>
-        </div>
-    </div>
-
-    <div class="section">
-        <h2><i class="fas fa-check-circle"></i> Benefits of the New System</h2>
-        <ul>
-            <li>✅ <strong>No more popup interruptions</strong> - smooth annotation workflow</li>
-            <li>✅ <strong>Faster labeling</strong> - set once, annotate many</li>
-            <li>✅ <strong>Clear visual feedback</strong> - always know your current label</li>
-            <li>✅ <strong>Custom labels made simple</strong> - add and remove easily</li>
-            <li>✅ <strong>Quick editing</strong> - right-click to modify existing annotations</li>
-            <li>✅ <strong>Mobile friendly</strong> - works great on all devices</li>
-        </ul>
-    </div>
-
-    <div class="section" style="text-align: center;">
-        <h2><i class="fas fa-rocket"></i> Try It Now!</h2>
-        <p>Experience the improved labeling system that makes satellite image annotation faster and more intuitive.</p>
-        <a href="/" class="btn"><i class="fas fa-play"></i> Launch SAT Annotator</a>
-        <a href="README.md" class="btn btn-secondary"><i class="fas fa-book"></i> Documentation</a>
-    </div>
-</body>
-</html>
diff --git a/web/demo.html b/web/demo.html
deleted file mode 100644
index 6396801..0000000
--- a/web/demo.html
+++ /dev/null
@@ -1,201 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SAT Annotator Demo</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            line-height: 1.6;
-        }
-        .demo-section {
-            background: #f5f5f5;
-            padding: 20px;
-            margin: 20px 0;
-            border-radius: 8px;
-        }
-        .feature {
-            margin: 15px 0;
-            padding: 10px;
-            background: white;
-            border-radius: 5px;
-        }
-        .keyboard-shortcuts {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 10px;
-            margin-top: 15px;
-        }
-        .shortcut {
-            background: #e9ecef;
-            padding: 8px;
-            border-radius: 4px;
-            font-family: monospace;
-        }
-        .btn {
-            display: inline-block;
-            background: #007bff;
-            color: white;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 5px;
-            margin: 10px 5px;
-        }
-        .btn:hover {
-            background: #0056b3;
-        }
-    </style>
-</head>
-<body>
-    <h1>🛰️ SAT Annotator Demo</h1>
-    <p>Welcome to the Satellite Image Annotation Tool frontend demo!</p>
-
-    <div class="demo-section">
-        <h2>🚀 Quick Start</h2>
-        <p>The frontend has been successfully built and is ready to use!</p>
-        <ol>
-            <li>Make sure the FastAPI backend is running: <code>uvicorn app.main:app --reload</code></li>
-            <li>Visit <a href="http://localhost:8000" target="_blank">http://localhost:8000</a></li>
-            <li>Upload a satellite image using drag & drop or the upload button</li>
-            <li>Start annotating with AI segmentation or manual polygon tools</li>
-        </ol>
-    </div>
-
-    <div class="demo-section">
-        <h2>✨ Key Features</h2>
-        
-        <div class="feature">
-            <h3>📤 Image Upload</h3>
-            <p>Supports JPG, PNG, TIFF, and GeoTIFF formats. Drag & drop or click to browse.</p>
-        </div>
-        
-        <div class="feature">
-            <h3>🤖 AI Segmentation</h3>
-            <p>Click the AI Point tool and click on image features to generate automatic segmentation using SAM model.</p>
-        </div>
-        
-        <div class="feature">
-            <h3>✏️ Manual Annotation</h3>
-            <p>Draw precise polygon annotations manually with the polygon tool.</p>
-        </div>
-        
-        <div class="feature">
-            <h3>📱 Responsive Design</h3>
-            <p>Works perfectly on desktop, tablet, and mobile devices with touch support.</p>
-        </div>
-        
-        <div class="feature">
-            <h3>💾 JSON Export</h3>
-            <p>Export all annotations in a comprehensive JSON format with metadata and statistics.</p>
-        </div>
-    </div>
-
-    <div class="demo-section">
-        <h2>⌨️ Keyboard Shortcuts</h2>
-        <div class="keyboard-shortcuts">
-            <div class="shortcut"><strong>1</strong> - Select tool</div>
-            <div class="shortcut"><strong>2</strong> - AI Point tool</div>
-            <div class="shortcut"><strong>3</strong> - Polygon tool</div>
-            <div class="shortcut"><strong>4</strong> - Pan tool</div>
-            <div class="shortcut"><strong>ESC</strong> - Cancel/Clear</div>
-            <div class="shortcut"><strong>DELETE</strong> - Delete annotation</div>
-            <div class="shortcut"><strong>+</strong> - Zoom in</div>
-            <div class="shortcut"><strong>-</strong> - Zoom out</div>
-            <div class="shortcut"><strong>0</strong> - Fit to screen</div>
-        </div>
-    </div>
-
-    <div class="demo-section">
-        <h2>🛠️ Annotation Workflow</h2>
-        <ol>
-            <li><strong>Upload Image:</strong> Drag satellite image to upload area</li>
-            <li><strong>Select Tool:</strong> Choose AI Point for automatic segmentation or Polygon for manual drawing</li>
-            <li><strong>Annotate:</strong> 
-                <ul>
-                    <li>AI Point: Click on features to generate segmentation</li>
-                    <li>Polygon: Click to place points, double-click or right-click to finish</li>
-                </ul>
-            </li>
-            <li><strong>Label:</strong> Add descriptive labels to your annotations</li>
-            <li><strong>Manage:</strong> Edit, delete, or select annotations from the sidebar</li>
-            <li><strong>Export:</strong> Download annotations as JSON file</li>
-        </ol>
-    </div>
-
-    <div class="demo-section">
-        <h2>📊 Sample JSON Export Structure</h2>
-        <pre style="background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto;">
-{
-  "image": {
-    "id": "1",
-    "filename": "satellite.tif",
-    "resolution": "1024x768",
-    "width": 1024,
-    "height": 768
-  },
-  "annotations": [
-    {
-      "id": "ann_1",
-      "type": "ai_segment",
-      "label": "building",
-      "polygon": [[0.1,0.1], [0.2,0.1], [0.2,0.2], [0.1,0.2]],
-      "source": "ai",
-      "created": "2025-06-02T...",
-      "points_count": 4
-    }
-  ],
-  "export_info": {
-    "format": "json",
-    "exported_at": "2025-06-02T...",
-    "tool": "SAT Annotator",
-    "version": "1.0.0"
-  },
-  "statistics": {
-    "total_annotations": 5,
-    "ai_generated": 3,
-    "manual": 2,
-    "unique_labels": 3
-  }
-}
-        </pre>
-    </div>
-
-    <div class="demo-section">
-        <h2>🔗 Next Steps</h2>
-        <a href="http://localhost:8000" class="btn" target="_blank">Open SAT Annotator</a>
-        <a href="http://localhost:8000/docs" class="btn" target="_blank">API Documentation</a>
-    </div>
-
-    <div class="demo-section">
-        <h2>📱 Mobile Features</h2>
-        <p>On mobile devices, the interface adapts with:</p>
-        <ul>
-            <li>Collapsible sidebar with menu button</li>
-            <li>Touch-optimized controls</li>
-            <li>Responsive layout and text sizes</li>
-            <li>Touch gestures for pan and zoom</li>
-        </ul>
-    </div>
-
-    <div class="demo-section">
-        <h2>🎯 Browser Compatibility</h2>
-        <p>Tested and optimized for:</p>
-        <ul>
-            <li>Chrome 90+</li>
-            <li>Firefox 88+</li>
-            <li>Safari 14+</li>
-            <li>Edge 90+</li>
-        </ul>
-    </div>
-
-    <script>
-        // Simple demo functionality
-        console.log('🛰️ SAT Annotator Frontend Demo Loaded!');
-        console.log('Visit http://localhost:8000 to try the full application');
-    </script>
-</body>
-</html>
diff --git a/web/js/annotations.js b/web/js/annotations.js
index eed8431..af580ec 100644
--- a/web/js/annotations.js
+++ b/web/js/annotations.js
@@ -2,32 +2,18 @@
 
 class AnnotationManager {
     constructor() {
-        console.log('AnnotationManager: Starting constructor...');
         this.annotations = [];
         this.selectedAnnotation = null;
         this.currentImageId = null;
         this.currentLabel = 'building'; // Default label
         this.customLabels = []; // Store custom labels added by user
         
-        console.log('AnnotationManager: Basic properties set');
-        
         try {
-            console.log('AnnotationManager: Setting up event listeners...');
             this.setupEventListeners();
-            console.log('AnnotationManager: Event listeners setup complete');
-        } catch (error) {
-            console.error('AnnotationManager: Event listeners setup failed:', error);
-        }
-        
-        try {
-            console.log('AnnotationManager: Updating UI...');
             this.updateUI();
-            console.log('AnnotationManager: UI update complete');
         } catch (error) {
-            console.error('AnnotationManager: UI update failed:', error);
+            console.error('AnnotationManager: Initialization failed:', error);
         }
-        
-        console.log('AnnotationManager: Constructor complete');
     }setupEventListeners() {
         // Set up label selection events with event delegation for dynamic buttons
         document.getElementById('labelList').addEventListener('click', (e) => {
@@ -52,25 +38,43 @@ class AnnotationManager {
         // Hide context menu when clicking elsewhere
         document.addEventListener('click', () => this.hideContextMenu());
     }    async setCurrentImage(imageId) {
+        console.log(`🔍 setCurrentImage called with: ${imageId}`);
+        console.log(`🔍 Previous currentImageId: ${this.currentImageId}`);
+        
         // Save any existing annotations for the current image before switching
         if (this.currentImageId && this.annotations.length > 0) {
-            console.log(`Saving ${this.annotations.length} annotations for image ${this.currentImageId} before switching`);
             try {
                 await Promise.all(
                     this.annotations.map(ann => this.saveAnnotation(ann.id))
                 );
-                console.log('All annotations saved successfully');
             } catch (error) {
                 console.error('Failed to save some annotations before switching images:', error);
             }
         }
         
         this.currentImageId = imageId;
+        console.log(`🔍 currentImageId set to: ${this.currentImageId}`);
         this.annotations = [];
         this.selectedAnnotation = null;
         this.updateUI();
           // Load existing annotations for this image
         await this.loadAnnotations(imageId);
+          // Clear any cached canvas polygons to force recalculation for new image
+        this.annotations.forEach(annotation => {
+            annotation.canvasPolygon = null;
+            annotation.lastScale = null;
+            annotation.lastOffsetX = null;
+            annotation.lastOffsetY = null;
+            annotation.lastImageId = null;
+        });
+        
+        // Force a redraw to ensure annotations are visible immediately
+        if (window.canvasManager && window.canvasManager.imageElement) {
+            // Multiple redraws with short delays to ensure annotations appear
+            setTimeout(() => window.canvasManager.redraw(), 10);
+            setTimeout(() => window.canvasManager.redraw(), 100);
+            setTimeout(() => window.canvasManager.redraw(), 200);
+        }
     }
 
     selectLabel(label) {
@@ -159,7 +163,6 @@ class AnnotationManager {
     }    async loadAnnotations(imageId) {
         try {
             const annotations = await api.getAnnotations(imageId);
-            console.log('Raw annotations from API:', annotations);
             
             this.annotations = annotations.map((ann, index) => {
                 // Parse polygon from backend format
@@ -167,12 +170,9 @@ class AnnotationManager {
                 let label = 'Unlabeled';
                 let type = 'unknown';
                 
-                console.log(`Processing annotation ${index}:`, ann);
-                
                 try {
                     if (ann.data && ann.data.features && ann.data.features.length > 0) {
                         const feature = ann.data.features[0];
-                        console.log(`  Feature found:`, feature);
                         
                         // Extract label from properties
                         if (feature.properties) {
@@ -183,12 +183,7 @@ class AnnotationManager {
                         if (feature.geometry && feature.geometry.type === 'Polygon') {
                             const coordinates = feature.geometry.coordinates[0]; // First ring of polygon
                             polygon = coordinates.map(coord => [coord[0], coord[1]]);
-                            console.log(`  Parsed polygon for annotation ${ann.annotation_id}: ${polygon.length} points, sample:`, polygon.slice(0, 3));
-                        } else {
-                            console.log(`  No valid geometry found for annotation ${ann.annotation_id}:`, feature.geometry);
                         }
-                    } else {
-                        console.log(`  No valid data structure for annotation ${ann.annotation_id}:`, ann.data);
                     }
                 } catch (parseError) {
                     console.error('Error parsing annotation data:', parseError, ann);
@@ -737,28 +732,38 @@ class AnnotationManager {
         document.body.removeChild(downloadLink);
         URL.revokeObjectURL(url);
     }
-    
-    drawAnnotations(ctx, scale, offsetX, offsetY) {
-        console.log(`drawAnnotations called with ${this.annotations.length} annotations, scale: ${scale.toFixed(3)}, offset: ${offsetX.toFixed(1)},${offsetY.toFixed(1)}`);
+      drawAnnotations(ctx, scale, offsetX, offsetY) {
+        // Removed excessive logging for performance
         
         // Note: Canvas context is already DPR-scaled by canvas manager
         // so we should NOT divide by DPR again
-        
-        this.annotations.forEach((annotation, index) => {
+          this.annotations.forEach((annotation, index) => {
             if (!annotation.polygon || annotation.polygon.length < 3) {
-                console.log(`Annotation ${index} skipped: invalid polygon`);
                 return;
             }
-              console.log(`Drawing annotation ${index}: ${annotation.polygon.length} points, source: ${annotation.source}`);
-            
-            // Quick validation that polygon coordinates are in normalized range (0-1)
-            const isNormalized = annotation.polygon.slice(0, 3).every(point => 
-                point[0] >= 0 && point[0] <= 1 && point[1] >= 0 && point[1] <= 1
-            );
             
-            if (!isNormalized) {
-                console.warn(`Annotation ${index} has non-normalized coordinates`);
-            }            // Convert image coordinates to canvas coordinates
+            // Safety check: ensure we have the correct image loaded
+            if (!window.canvasManager.imageElement || !window.canvasManager.currentImage) {
+                return;
+            }            // Critical fix: ensure annotations are only drawn for the current image
+            console.log(`🔍 Checking image match - currentImageId: ${this.currentImageId}, canvas image: ${window.canvasManager.currentImage?.image_id}`);
+            if (window.canvasManager.currentImage.image_id !== this.currentImageId) {
+                console.warn(`Canvas image mismatch: expected ${this.currentImageId}, got ${window.canvasManager.currentImage.image_id}. Synchronizing...`);
+                // CRITICAL FIX: Prevent infinite sync loops - only sync once
+                if (this.currentImageId !== null && !this._syncInProgress) {
+                    this._syncInProgress = true;
+                    setTimeout(() => {
+                        this.setCurrentImage(window.canvasManager.currentImage.image_id);
+                        this._syncInProgress = false;
+                    }, 0);
+                    return;
+                } else {
+                    // If currentImageId is null or sync in progress, just set it without reloading annotations
+                    console.log('🔧 Setting currentImageId without reloading annotations');
+                    this.currentImageId = window.canvasManager.currentImage.image_id;
+                }
+            }
+              // Convert image coordinates to canvas coordinates
             const canvasPolygon = annotation.polygon.map(point => 
                 Utils.imageToCanvasCoords(
                     point[0], point[1],
@@ -770,7 +775,7 @@ class AnnotationManager {
                 )
             );
             
-            // Quick bounds and visibility check
+            // Quick visibility check to skip offscreen annotations
             const bounds = {
                 minX: Math.min(...canvasPolygon.map(p => p.x)),
                 maxX: Math.max(...canvasPolygon.map(p => p.x)),
@@ -779,23 +784,33 @@ class AnnotationManager {
             };
             
             const canvasBounds = window.canvasManager.getDisplayDimensions();
-            const isVisible = bounds.maxX >= 0 && bounds.minX <= canvasBounds.width && 
-                             bounds.maxY >= 0 && bounds.minY <= canvasBounds.height;
+            const isVisible = bounds.maxX >= -50 && bounds.minX <= canvasBounds.width + 50 && 
+                             bounds.maxY >= -50 && bounds.minY <= canvasBounds.height + 50;
+            
+            if (!isVisible) return; // Skip offscreen annotations            // Only update canvas polygon if it has actually changed and we're not dragging
+            // Force recalculation if canvasPolygon is null (e.g., after image switch)
+            // Also recalculate if the current image has changed
+            const imageId = window.canvasManager.currentImage ? window.canvasManager.currentImage.image_id : null;
+            const imageChanged = annotation.lastImageId !== imageId;
             
-            console.log(`Annotation ${index}: ${isVisible ? 'VISIBLE' : 'OUTSIDE'} (${bounds.minX.toFixed(0)}-${bounds.maxX.toFixed(0)}, ${bounds.minY.toFixed(0)}-${bounds.maxY.toFixed(0)})`);
-              // Only update canvas polygon if it has actually changed and we're not dragging
             if (!annotation.isDragging && 
                 (!annotation.canvasPolygon || 
                 annotation.lastScale !== scale || 
                 annotation.lastOffsetX !== offsetX || 
-                annotation.lastOffsetY !== offsetY)) {
+                annotation.lastOffsetY !== offsetY ||
+                imageChanged)) {
                 annotation.canvasPolygon = canvasPolygon;
                 annotation.lastScale = scale;
                 annotation.lastOffsetX = offsetX;
                 annotation.lastOffsetY = offsetY;
+                annotation.lastImageId = imageId;
             } else if (!annotation.isDragging && !annotation.canvasPolygon) {
                 // Ensure we have a canvas polygon even if not dragging
                 annotation.canvasPolygon = canvasPolygon;
+                annotation.lastScale = scale;
+                annotation.lastOffsetX = offsetX;
+                annotation.lastOffsetY = offsetY;
+                annotation.lastImageId = imageId;
             }
               // Determine colors based on selection and source
             let strokeColor = annotation.source === 'ai' ? '#10b981' : '#3b82f6';
@@ -817,11 +832,10 @@ class AnnotationManager {
                     lineWidth = 3;
                     dashPattern = [5, 5]; // Dashed line for edit mode
                 }
-            }// Draw polygon fill (temporary fix - no DPR division)
+            }// Draw polygon fill (optimized - no excessive logging)
             ctx.save();
             ctx.fillStyle = fillColor;
             ctx.beginPath();
-            console.log(`Drawing annotation ${index}: fill at first point (${canvasPolygon[0].x}, ${canvasPolygon[0].y}) with color ${fillColor}`);
             canvasPolygon.forEach((point, index) => {
                 if (index === 0) {
                     ctx.moveTo(point.x, point.y);
@@ -832,8 +846,7 @@ class AnnotationManager {
             ctx.closePath();
             ctx.fill();
             ctx.restore();
-            console.log(`Fill completed for annotation ${index}`);
-              // Draw polygon outline (temporary fix - no DPR division)
+              // Draw polygon outline (optimized - no excessive logging)
             ctx.save();
             ctx.strokeStyle = strokeColor;
             ctx.lineWidth = lineWidth;
@@ -844,7 +857,6 @@ class AnnotationManager {
             }
             
             ctx.beginPath();
-            console.log(`Drawing annotation ${index}: stroke with color ${strokeColor}`);
             canvasPolygon.forEach((point, index) => {
                 if (index === 0) {
                     ctx.moveTo(point.x, point.y);
@@ -855,7 +867,6 @@ class AnnotationManager {
             ctx.closePath();
             ctx.stroke();
             ctx.restore();
-            console.log(`Stroke completed for annotation ${index}`);
               // Draw vertices
             canvasPolygon.forEach(point => {
                 ctx.save();
diff --git a/web/js/api.js b/web/js/api.js
index 33b216b..ef60b8d 100644
--- a/web/js/api.js
+++ b/web/js/api.js
@@ -6,9 +6,7 @@ class API {
         const isDevelopment = window.location.port === '8080' || window.location.port === '3000';
         this.baseURL = isDevelopment ? 'http://localhost:8000' : window.location.origin;
         this.sessionId = null;
-    }
-
-    // Generic request method
+    }    // Generic request method with timeout support
     async request(endpoint, options = {}) {
         const url = `${this.baseURL}${endpoint}`;
         const defaultOptions = {
@@ -26,8 +24,17 @@ class API {
             },
         };
 
+        // Add timeout for segmentation requests
+        const isSegmentationRequest = endpoint.includes('/segment/');
+        const timeoutMs = isSegmentationRequest ? 35000 : 10000; // 35s for segmentation, 10s for others
+
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+        requestOptions.signal = controller.signal;
+
         try {
             const response = await fetch(url, requestOptions);
+            clearTimeout(timeoutId);
             
             if (!response.ok) {
                 const errorData = await response.json().catch(() => ({}));
@@ -41,10 +48,14 @@ class API {
                 return response;
             }
         } catch (error) {
+            clearTimeout(timeoutId);
+            if (error.name === 'AbortError') {
+                throw new Error('Request timeout - please try again');
+            }
             console.error('API request failed:', error);
             throw error;
         }
-    }    
+    }
 
     // Clear current session and start fresh
     async clearSession() {
@@ -67,6 +78,53 @@ class API {
         }
     }
 
+    // Validate session exists on server
+    async validateSession(sessionId) {
+        try {
+            const response = await this.get(`/api/validate-session/${sessionId}/`);
+            return response.valid;
+        } catch (error) {
+            console.warn(`Failed to validate session ${sessionId}:`, error);
+            return false;
+        }
+    }
+
+    // Get or create a valid session ID
+    async getValidSessionId() {
+        // First try to get from cookies
+        const cookies = document.cookie.split(';');
+        for (const cookie of cookies) {
+            const [key, value] = cookie.trim().split('=');
+            if (key === 'sat_annotator_session') {
+                const sessionId = value;
+                // Validate this session still exists on server
+                const isValid = await this.validateSession(sessionId);
+                if (isValid) {
+                    console.log('Using existing valid session ID:', sessionId);
+                    return sessionId;
+                } else {
+                    console.log('Session ID in cookies is invalid, will create new one');
+                    // Clear the invalid cookie
+                    document.cookie = 'sat_annotator_session=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+                    break;
+                }
+            }
+        }
+        
+        // No valid session found, get new one from API
+        try {
+            const sessionResponse = await this.get('/api/session-id/');
+            const sessionId = sessionResponse.session_id;
+            console.log('Got new session ID from API:', sessionId);
+            // Store in cookie for future use
+            document.cookie = `sat_annotator_session=${sessionId}; path=/;`;
+            return sessionId;
+        } catch (e) {
+            console.error('Could not get session ID from API:', e);
+            return null;
+        }
+    }
+
     // GET request
     async get(endpoint) {
         return this.request(endpoint, { method: 'GET' });
@@ -206,21 +264,30 @@ class API {
             console.error('Failed to delete image:', error);
             throw error;
         }
-    }
-
-    // Perform AI segmentation
+    }    // Perform AI segmentation
     async segment(imageId, x, y) {
         try {
-            Utils.showLoading('Generating AI segmentation...');
+            // Show loading but allow it to be hidden quickly for cached results
+            const loadingTimeout = setTimeout(() => {
+                Utils.showLoading('Generating AI segmentation...');
+            }, 100); // Only show loading if it takes more than 100ms
+            
             const response = await this.post('/api/segment/', {
                 image_id: imageId,
                 x: x,
                 y: y
             });
+            
+            clearTimeout(loadingTimeout);
             Utils.hideLoading();
 
             if (response.success) {
-                Utils.showToast('AI segmentation generated!', 'success');
+                // Show different messages for cached vs new segmentation
+                const message = response.cached ? 
+                    'Instant segmentation!' : 
+                    'AI segmentation generated!';
+                Utils.showToast(message, 'success');
+                
                 return {
                     polygon: response.polygon,
                     annotationId: response.annotation_id,
@@ -231,11 +298,35 @@ class API {
             }
         } catch (error) {
             Utils.hideLoading();
-            Utils.showToast(`AI segmentation failed: ${error.message}`, 'error');
+            
+            // Handle specific timeout errors
+            if (error.message.includes('timeout') || error.message.includes('408')) {
+                Utils.showToast('Segmentation timeout - image may still be processing. Please try again in a moment.', 'warning');
+            } else {
+                Utils.showToast(`AI segmentation failed: ${error.message}`, 'error');
+            }
             throw error;
         }
     }
 
+    // Preprocess image for faster segmentation
+    async preprocessImage(imageId) {
+        try {
+            const response = await this.post('/api/preprocess/', {
+                image_id: imageId
+            });
+            
+            if (response.success) {
+                console.log(`Image ${imageId} preprocessed successfully`);
+                return true;
+            }
+            return false;
+        } catch (error) {
+            console.warn(`Failed to preprocess image ${imageId}:`, error);
+            return false;
+        }
+    }
+
     // Get image URL for display
     getImageUrl(imagePath) {
         if (imagePath.startsWith('http')) {
diff --git a/web/js/app.js b/web/js/app.js
index e966ee2..44771a7 100644
--- a/web/js/app.js
+++ b/web/js/app.js
@@ -23,46 +23,41 @@ window.addEventListener('unhandledrejection', (event) => {
     return false;
 });
 
-class SATAnnotator {
-    constructor() {
+class SATAnnotator {    constructor() {
         this.images = [];
         this.currentImageId = null;
         // Track if user has unsaved work for page protection
         this.hasUnsavedWork = false;
-    }    async initialize() {
-        console.log('=== SAT Annotator Initialization Started ===');
+    }async initialize() {        console.log('SAT Annotator Initialization Started');
         
         try {
             // Show loading immediately
             Utils.showLoading('Initializing...');
-            console.log('Step 1: Loading overlay shown');
+            console.log('Loading overlay shown');
             
             // Clear any existing session to ensure fresh start
-            console.log('Step 1.5: Clearing any existing session...');
             await api.clearSession();
-            console.log('Step 1.5: Session cleared, starting fresh');
-              // Reset application state
+            console.log('Session cleared, starting fresh');              // Reset application state
             this.images = [];
             this.currentImageId = null;
             this.hasUnsavedWork = false;
-            console.log('Step 1.6: Application state reset');
+            console.log('Application state reset');
             
             // Initialize managers with error handling
-            console.log('Step 2: Initializing Canvas Manager...');
+            console.log('Initializing Canvas Manager...');
             try {
                 window.canvasManager = new CanvasManager();
-                console.log('Step 2: Canvas Manager initialized successfully');
+                console.log('Canvas Manager initialized successfully');
             } catch (error) {
-                console.error('Step 2: Canvas Manager failed:', error);
+                console.error('Canvas Manager failed:', error);
                 throw new Error('Canvas Manager initialization failed: ' + error.message);
             }
-            
-            console.log('Step 3: Initializing Annotation Manager...');
+              console.log('Initializing Annotation Manager...');
             try {
                 window.annotationManager = new AnnotationManager();
-                console.log('Step 3: Annotation Manager initialized successfully');
+                console.log('Annotation Manager initialized successfully');
             } catch (error) {
-                console.error('Step 3: Annotation Manager failed:', error);
+                console.error('Annotation Manager failed:', error);
                 throw new Error('Annotation Manager initialization failed: ' + error.message);
             }
 
@@ -71,54 +66,51 @@ class SATAnnotator {
             this.resetUI();
             console.log('Step 3.5: UI reset complete');
             
-            // Setup event listeners
-            console.log('Step 4: Setting up event listeners...');
+            // Setup event listeners            console.log('Setting up event listeners...');
             try {
                 this.setupEventListeners();
-                console.log('Step 4: Event listeners setup complete');
+                console.log('Event listeners setup complete');
             } catch (error) {
-                console.error('Step 4: Event listeners setup failed:', error);
+                console.error('Event listeners setup failed:', error);
                 throw new Error('Event listeners setup failed: ' + error.message);
             }
-            
-            // Check server status
-            console.log('Step 5: Checking server status...');
+              // Check server status
+            console.log('Checking server status...');
             try {
                 await this.checkServerStatus();
-                console.log('Step 5: Server status check complete');
+                console.log('Server status check complete');
             } catch (error) {
-                console.error('Step 5: Server status check failed:', error);
+                console.error('Server status check failed:', error);
                 throw new Error('Server status check failed: ' + error.message);
             }
             
             // Load existing images
-            console.log('Step 6: Loading images...');
+            console.log('Loading images...');
             try {
                 await this.loadImages();
-                console.log('Step 6: Images loading complete');
+                console.log('Images loading complete');
             } catch (error) {
-                console.error('Step 6: Images loading failed:', error);
+                console.error('Images loading failed:', error);
                 throw new Error('Images loading failed: ' + error.message);
             }
               // Hide loading and show success
             Utils.hideLoading();
-            console.log('Step 7: Loading overlay hidden');
-            
-            // Force hide after a small delay to ensure it's really hidden
+            console.log('Loading overlay hidden');
+              // Force hide after a small delay to ensure it's really hidden
             setTimeout(() => {
                 const overlay = document.getElementById('loadingOverlay');
                 if (overlay) {
                     overlay.style.display = 'none';
                     overlay.hidden = true;
-                    console.log('Step 7b: Force hidden loading overlay');
+                    console.log('Force hidden loading overlay');
                 }
             }, 100);
             
             Utils.showToast('SAT Annotator ready!', 'success');
-            console.log('=== SAT Annotator Initialization Complete ===');
+            console.log('SAT Annotator Initialization Complete');
             
         } catch (error) {
-            console.error('!!! INITIALIZATION FAILED !!!');
+            console.error('INITIALIZATION FAILED');
             console.error('Error:', error);
             console.error('Error message:', error.message);
             console.error('Error stack:', error.stack);
@@ -423,16 +415,20 @@ class SATAnnotator {
         if (invalidFiles.length > 0) {
             Utils.showToast(`Invalid files: ${invalidFiles.join(', ')}. Please select valid image files (JPG, PNG, TIFF, GeoTIFF) smaller than 100MB.`, 'error');
         }
-        
-        if (validFiles.length === 0) {
+          if (validFiles.length === 0) {
             return;
         }
-          // Upload all valid files sequentially to preserve order
+
+        // Determine if this is single or multi-upload for different handling
+        const isSingleUpload = validFiles.length === 1;
+        console.log(`📁 ${isSingleUpload ? 'Single' : 'Multi'} upload detected: ${validFiles.length} file(s)`);
+          
+        // Upload all valid files sequentially to preserve order
         const successfulUploads = [];
         
         try {
             // Show loading for multiple uploads
-            Utils.showLoading(`Uploading ${validFiles.length} image${validFiles.length > 1 ? 's' : ''}...`);            // Upload files one by one to preserve selection order
+            Utils.showLoading(`Uploading ${validFiles.length} image${validFiles.length > 1 ? 's' : ''}...`);// Upload files one by one to preserve selection order
             for (let i = 0; i < validFiles.length; i++) {
                 const file = validFiles[i];
                 try {
@@ -451,107 +447,40 @@ class SATAnnotator {
                     console.log(`Upload ${i + 1}/${validFiles.length} completed:`, imageData);
                     
                     // Show upload completed
-                    Utils.showProgressBar(95, `Upload complete, preparing segmentation...`);
-                    
-                    // Add to images list
+                    Utils.showProgressBar(95, `Upload complete, segmenting image...`);                    // Add to images list
                     this.images.push(imageData);
                     // Mark as having unsaved work
                     this.hasUnsavedWork = true;
                     successfulUploads.push(imageData);
 
-                    // Transition to segmentation phase
-                    Utils.showProgressBar(100, `Preparing ${file.name} for annotation...`);
-
-                    // --- WebSocket for embedding progress ---
-                    // Get session id from cookie or API endpoint
-                    let sessionId = null;
-                    
-                    // First try to get from cookies
-                    const cookies = document.cookie.split(';');
-                    console.log('All cookies:', document.cookie);
-                    for (const cookie of cookies) {
-                        const [key, value] = cookie.trim().split('=');
-                        console.log(`Cookie: ${key} = ${value}`);
-                        if (key === 'sat_annotator_session') {
-                            sessionId = value;
-                            console.log('Found session ID in cookies:', sessionId);
-                            break;
-                        }
-                    }
-                    
-                    // If no session ID in cookies, get it from the API
-                    if (!sessionId) {
-                        console.log('No session ID in cookies, getting from API...');
-                        try {
-                            const sessionResponse = await api.get('/api/session-id/');
-                            sessionId = sessionResponse.session_id;
-                            console.log('Got session ID from API:', sessionId);
-                        } catch (e) {
-                            console.error('Could not get session ID from API:', e);
-                        }
-                    }
-                    
-                    if (sessionId) {
-                        const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
-                        const wsUrl = `${wsProtocol}://${window.location.host}/api/ws/notify/${sessionId}`;
+                    if (isSingleUpload) {
+                        // SINGLE UPLOAD: Immediate preprocessing for instant first-click segmentation
+                        Utils.showProgressBar(100, 'Upload complete - processing image...');
                         
                         try {
-                            const ws = new WebSocket(wsUrl);
-                            
-                            // Add timeout in case WebSocket never responds
-                            const segmentationTimeout = setTimeout(() => {
-                                Utils.showProgressBar(100, 'Segmentation timeout - continuing...');
-                                setTimeout(() => {
-                                    Utils.hideProgressBar();
-                                }, 2000);
-                                ws.close();
-                            }, 30000); // 30 second timeout
-                            
-                            ws.onopen = () => {
-                                console.log('WebSocket connected for segmentation progress');
-                            };                            ws.onmessage = (event) => {
-                                clearTimeout(segmentationTimeout);
-                                console.log('WebSocket message received:', event.data);
-                                if (event.data.includes('Image ready for annotation')) {
-                                    Utils.showProgressBar(100, 'Ready for annotation! ✓');
-                                    setTimeout(() => {
-                                        Utils.hideProgressBar();
-                                    }, 1500); // Show completion message for 1.5 seconds
-                                    Utils.showToast('Image ready for annotation!', 'success');
-                                    ws.close();
-                                }
-                            };
-                            
-                            ws.onerror = (event) => {
-                                clearTimeout(segmentationTimeout);
-                                console.error('WebSocket error:', event);
-                                Utils.showProgressBar(100, 'Connection error');
-                                setTimeout(() => {
-                                    Utils.hideProgressBar();
-                                }, 2000);
-                                Utils.showToast('WebSocket error during segmentation progress.', 'error');
-                            };
-                            
-                            ws.onclose = () => {
-                                console.log('WebSocket connection closed');
-                            };
-                            
-                        } catch (wsError) {
-                            console.error('WebSocket creation failed:', wsError);
-                            Utils.showProgressBar(100, 'WebSocket failed');
+                            // Call preprocessing immediately for instant segmentation
+                            await api.preprocessImage(imageData.image_id);
+                            Utils.showProgressBar(100, 'Ready for annotation! ✓');
+                            setTimeout(() => {
+                                Utils.hideProgressBar();
+                            }, 1000);
+                            Utils.showToast('Image ready for annotation', 'success');
+                        } catch (preprocessError) {
+                            console.warn('Preprocessing failed, but image is available for manual annotation:', preprocessError);
+                            Utils.showProgressBar(100, 'Upload complete');
                             setTimeout(() => {
                                 Utils.hideProgressBar();
                             }, 2000);
+                            Utils.showToast('Image uploaded successfully', 'info');
                         }
                     } else {
-                        // No session ID found, hide progress bar
-                        console.warn('No session ID found for WebSocket connection');
-                        Utils.showProgressBar(100, 'Session error');
+                        // MULTI-UPLOAD: Only show completion message, don't preprocess yet
+                        // We'll preprocess only the selected image after all uploads complete
+                        Utils.showProgressBar(100, 'Upload complete ✓');
                         setTimeout(() => {
                             Utils.hideProgressBar();
-                        }, 2000);
+                        }, 500);
                     }
-                    // --- End WebSocket ---
                     
                 } catch (error) {
                     console.error(`Upload failed for ${file.name}:`, error);
@@ -564,8 +493,7 @@ class SATAnnotator {
             }
             // Do not hide the progress bar here; it will be hidden after segmentation is complete.
             // Reload images from server to get updated list
-            await this.loadImages();
-            // Show success message
+            await this.loadImages();            // Show success message
             if (successfulUploads.length > 0) {
                 Utils.showToast(`Successfully uploaded ${successfulUploads.length} image${successfulUploads.length > 1 ? 's' : ''}`, 'success');
                 // Select the first image from the newly uploaded ones
@@ -576,9 +504,24 @@ class SATAnnotator {
                     if (firstUploadedImage) {
                         console.log('Selecting first uploaded image with ID:', firstUploadedImage.image_id);
                         await this.selectImage(firstUploadedImage.image_id);
+                        
+                        // CRITICAL: For multi-upload ONLY, preprocess the selected image for instant segmentation
+                        // Single uploads already have preprocessing done above
+                        if (!isSingleUpload) {                            // Multi-upload complete - preprocessing selected image for instant segmentation
+                            Utils.showLoading('Preparing image for annotation...');
+                            try {
+                                await api.preprocessImage(firstUploadedImage.image_id);
+                                Utils.showToast('Ready for instant annotation!', 'success');
+                                console.log('✅ Selected image preprocessed - first click will be instant');
+                            } catch (preprocessError) {
+                                console.warn('Preprocessing failed for selected image:', preprocessError);
+                                Utils.showToast('Image ready for manual annotation', 'info');
+                            } finally {
+                                Utils.hideLoading();
+                            }
+                        }
                     }
-                }
-            }
+                }            }
             
         } catch (error) {
             Utils.hideLoading();
@@ -587,29 +530,38 @@ class SATAnnotator {
         }
     }    async loadImages() {
         try {
-            console.log('loadImages: Starting to load images...');
-            // Don't show loading here since main initialization already shows it
+            console.log('Starting to load images...');
+            
+            // Validate session before trying to load images
+            const sessionId = await api.getValidSessionId();
+            if (!sessionId) {
+                console.warn('No valid session available');
+                this.images = [];
+                this.updateImagesList();
+                return;
+            }
             
+            // Don't show loading here since main initialization already shows it
             this.images = await api.getImages();
             
             // Sort images by creation time (oldest first) to maintain upload order
             this.images.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
             
-            console.log('loadImages: Images loaded and sorted:', this.images);
+            console.log('Images loaded and sorted:', this.images);
             
             this.updateImagesList();
-            console.log('loadImages: Images list updated');
+            console.log('Images list updated');
             
             if (this.images.length > 0) {
-                console.log(`loadImages: Found ${this.images.length} images`);
+                console.log(`Found ${this.images.length} images`);
             } else {
-                console.log('loadImages: No images found (fresh session)');
+                console.log('No images found (fresh session)');
             }
         } catch (error) {
-            console.error('loadImages: Error occurred:', error);
+            console.error('Error occurred:', error);
             throw error; // Re-throw so main initialization can handle it
         }
-    }    updateImagesList() {
+    }updateImagesList() {
         const container = document.getElementById('imagesList');
         const clearAllBtn = document.getElementById('clearAllImages');
         
@@ -671,7 +623,7 @@ class SATAnnotator {
         if (clearAllBtn) {
             clearAllBtn.disabled = false;
         }
-    }async selectImage(imageId) {
+    }    async selectImage(imageId) {
         // Find image data
         const imageData = this.images.find(img => img.image_id == imageId);
         if (!imageData) {
@@ -683,13 +635,21 @@ class SATAnnotator {
         
         // Update UI
         this.updateImagesList();
-        
-        // Load image in canvas
-        window.canvasManager.loadImage(imageData);
-        
-        // Load annotations for this image (now async)
+          // CRITICAL: Set annotation manager's current image BEFORE loading canvas image
+        // This prevents the canvas image mismatch warning during redraw
         await window.annotationManager.setCurrentImage(imageId);
         
+        // Load image in canvas (this will trigger redraw with correct annotation context)
+        // Always treat as single upload - no special multi-upload handling
+        window.canvasManager.loadImage(imageData, false);
+          // IMPORTANT: Ensure preprocessing is done for instant segmentation when switching images
+        try {
+            await api.preprocessImage(imageId);
+            console.log(`Image ${imageId} preprocessed for instant segmentation`);
+        } catch (preprocessError) {
+            console.warn(`Preprocessing failed for image ${imageId}:`, preprocessError);
+        }
+        
         Utils.showToast(`Loaded: ${imageData.file_name}`, 'success');
     }
 
@@ -891,7 +851,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 // Add some debug functions for development
 window.debugInfo = () => {
-    console.log('=== SAT Annotator Debug Info ===');
+    console.log('SAT Annotator Debug Info');
     console.log('Images:', window.satAnnotator?.images || []);
     console.log('Current Image:', window.satAnnotator?.currentImageId || null);
     console.log('Annotations:', window.annotationManager?.annotations || []);
@@ -911,7 +871,7 @@ window.clearSession = () => window.satAnnotator?.clearSession();
 
 // Show keyboard shortcuts in console
 console.log(`
-🛰️ SAT Annotator - Keyboard Shortcuts:
+SAT Annotator - Keyboard Shortcuts:
 • 1 - Select tool
 • 2 - AI Point tool  
 • 3 - Polygon tool
@@ -922,7 +882,7 @@ console.log(`
 • - - Zoom out  
 • 0 - Fit to screen
 
-💻 Debug commands:
+Debug commands:
 • debugInfo() - Show debug information
 • exportSession() - Export session data
 • clearSession() - Clear all data
diff --git a/web/js/canvas.js b/web/js/canvas.js
index 3e5ec32..54af2e2 100644
--- a/web/js/canvas.js
+++ b/web/js/canvas.js
@@ -2,22 +2,17 @@
 
 class CanvasManager {
     constructor() {
-        console.log('CanvasManager: Starting constructor...');
-        
         try {
-            console.log('CanvasManager: Getting DOM elements...');
             this.canvas = document.getElementById('mainCanvas');
             this.ctx = this.canvas.getContext('2d');
             this.canvasWrapper = document.getElementById('canvasWrapper');
             this.placeholder = this.canvasWrapper.querySelector('.canvas-placeholder');
-            console.log('CanvasManager: DOM elements obtained');
         } catch (error) {
             console.error('CanvasManager: Failed to get DOM elements:', error);
             throw error;
         }
         
         // Canvas state
-        console.log('CanvasManager: Setting up state variables...');
         this.currentImage = null;
         this.imageElement = null;
         this.scale = 1;
@@ -39,40 +34,19 @@ class CanvasManager {
         this.hoveredEdge = null;this.vertexSize = 10; // Size of vertex handles (increased for easier grabbing)
         this.edgeClickThreshold = 15; // Distance threshold for edge clicking (increased)
         
-        // Redraw control
+        // Redraw control - optimized for smooth performance
         this.redrawPending = false;
         this.lastRedrawTime = 0;
-        this.redrawThrottle = 16; // ~60fps max
-        
-        console.log('CanvasManager: State variables set');
+        this.lastCoordUpdate = 0;
         
         // Initialize
         try {
-            console.log('CanvasManager: Setting up canvas...');
-            this.setupCanvas();        console.log('CanvasManager: Canvas setup complete');
-        } catch (error) {
-            console.error('CanvasManager: Canvas setup failed:', error);
-            throw error;
-        }
-        
-        try {
-            console.log('CanvasManager: Binding events...');
+            this.setupCanvas();
             this.bindEvents();
-            console.log('CanvasManager: Events bound');
-        } catch (error) {
-            console.error('CanvasManager: Event binding failed:', error);
-            throw error;
-        }
-        
-        try {
-            console.log('CanvasManager: Updating zoom display...');
             this.updateZoomDisplay();
-            console.log('CanvasManager: Zoom display updated');
         } catch (error) {
-            console.error('CanvasManager: Zoom display update failed:', error);
-            throw error;
-        }        
-        console.log('CanvasManager: Constructor complete');
+            console.error('CanvasManager: Initialization failed:', error);
+            throw error;        }
     }
     
     // Polygon editing methods
@@ -98,13 +72,10 @@ class CanvasManager {
         if (window.annotationManager) {
             window.annotationManager.updateUI();
         }
-        
-        // Add a visual status message
+          // Add a visual status message
         Utils.showNotification('Edit mode active - Drag points to edit polygon');
-        
-        console.log('Started editing polygon:', annotationId);
     }
-
+    
     stopPolygonEditing() {
         this.isEditingPolygon = false;
         this.editingAnnotationId = null;
@@ -112,19 +83,14 @@ class CanvasManager {
         this.hoveredVertex = null;
         this.hoveredEdge = null;
         
-        // Only turn off edit mode if explicitly requested (not in persistent edit mode)
-        // The editModeActive flag should only be controlled by the toggle button
-        
         this.canvas.style.cursor = this.getCursor(this.currentTool);
         this.redraw();
           // Update annotation UI
         if (window.annotationManager) {
             window.annotationManager.updateUI();
         }
-        
-        // Update toggle button
+          // Update toggle button
         this.updateEditToggleButton();
-        console.log('Stopped editing polygon');
     }
 
     getVertexAtPoint(pos, annotation) {
@@ -137,8 +103,7 @@ class CanvasManager {
             const distance = Utils.distance(pos, vertex);
             if (distance <= hitRadius) {
                 return { annotationId: annotation.id, vertexIndex: i, position: vertex };
-            }
-        }
+            }        }
         return null;
     }
 
@@ -152,8 +117,7 @@ class CanvasManager {
             const distance = this.pointToLineDistance(pos, start, end);
             if (distance <= this.edgeClickThreshold) {
                 return { annotationId: annotation.id, edgeIndex: i, start, end };
-            }
-        }
+            }        }
         return null;
     }
 
@@ -177,22 +141,17 @@ class CanvasManager {
             xx = lineEnd.x;
             yy = lineEnd.y;
         } else {
-            xx = lineStart.x + param * C;
-            yy = lineStart.y + param * D;
-        }        return Utils.distance(point, { x: xx, y: yy });
-    }
-
-    startVertexDrag(vertexInfo) {
-        console.log('=== START VERTEX DRAG ===');
-        console.log('Vertex info:', vertexInfo);
+            xx = lineStart.x + param * C;            yy = lineStart.y + param * D;
+        }
         
+        return Utils.distance(point, { x: xx, y: yy });
+    }    startVertexDrag(vertexInfo) {
         const annotation = window.annotationManager.annotations.find(ann => ann.id === vertexInfo.annotationId);
         if (annotation) {
-            console.log('Found annotation for dragging');
             // Mark as dragging to prevent canvas polygon recalculation
             annotation.isDragging = true;
         } else {
-            console.log('ERROR: No annotation found for vertex drag!');
+            console.error('No annotation found for vertex drag!');
             return;
         }
           this.draggingVertex = vertexInfo;
@@ -204,14 +163,11 @@ class CanvasManager {
             imageHeight: this.imageElement.naturalHeight,
             canvasWidth: this.canvas.width,
             canvasHeight: this.canvas.height,
-            scale: this.scale,
-            offsetX: this.offsetX,
+            scale: this.scale,            offsetX: this.offsetX,
             offsetY: this.offsetY
         };
-          console.log('Started dragging vertex:', vertexInfo.vertexIndex);
-        console.log('draggingVertex set to:', this.draggingVertex);
     }
-
+    
     updateVertexPosition(pos) {
         if (!this.draggingVertex) return;
         
@@ -251,19 +207,10 @@ class CanvasManager {
         // Mark that we're in the middle of dragging to prevent canvas polygon recalculation
         annotation.isDragging = true;
         
-        // Use requestAnimationFrame for smooth dragging
-        if (!this.dragRedrawScheduled) {
-            this.dragRedrawScheduled = true;
-            requestAnimationFrame(() => {
-                this.redraw();
-                this.dragRedrawScheduled = false;            });
-        }
-    }
-
-    finishVertexDrag() {
+        // Use optimized redraw scheduling for smooth dragging
+        this.throttledRedraw();
+    }    finishVertexDrag() {
         if (this.draggingVertex) {
-            console.log('Finished dragging vertex:', this.draggingVertex.vertexIndex);
-            
             // Clear drag conversion cache
             this.dragConversionCache = null;
             
@@ -315,14 +262,11 @@ class CanvasManager {
             this.offsetX,
             this.offsetY
         );
-        
-        // Insert new vertex after the edge start
+          // Insert new vertex after the edge start
         const insertIndex = edgeInfo.edgeIndex + 1;
         annotation.polygon.splice(insertIndex, 0, [imageCoords.x, imageCoords.y]);
         annotation.canvasPolygon.splice(insertIndex, 0, { x: pos.x, y: pos.y });
         
-        console.log('Added vertex at edge', edgeInfo.edgeIndex, 'new vertex index:', insertIndex);
-        
         // Save changes
         window.annotationManager.saveAnnotation(annotation.id);
         window.annotationManager.updateUI();
@@ -332,17 +276,17 @@ class CanvasManager {
     removeVertex(vertexInfo) {
         const annotation = window.annotationManager.annotations.find(ann => ann.id === vertexInfo.annotationId);
         if (!annotation || annotation.polygon.length <= 3) return; // Keep at least 3 vertices
-        
-        // Remove vertex from both polygons
+          // Remove vertex from both polygons
         annotation.polygon.splice(vertexInfo.vertexIndex, 1);
         annotation.canvasPolygon.splice(vertexInfo.vertexIndex, 1);
         
-        console.log('Removed vertex', vertexInfo.vertexIndex);
-        
         // Save changes
         window.annotationManager.saveAnnotation(annotation.id);
         window.annotationManager.updateUI();
-        this.redraw();    }    updateEditingHover(pos) {
+        this.redraw();
+    }
+    
+    updateEditingHover(pos) {
         if (!this.isEditingPolygon) return;
         
         const annotation = window.annotationManager.annotations.find(ann => ann.id === this.editingAnnotationId);
@@ -374,10 +318,11 @@ class CanvasManager {
                     this.hoveredEdge = null;
                     this.canvas.style.cursor = 'pointer';
                     this.scheduleHoverRedraw();
-                }
-            }
+                }            }
         }
-    }    // Throttled redraw for hover effects to prevent lag
+    }
+    
+    // Throttled redraw for hover effects to prevent lag
     scheduleHoverRedraw() {
         if (this.hoverRedrawScheduled) return;
         
@@ -388,7 +333,7 @@ class CanvasManager {
         });
     }
 
-    // Throttled redraw for smooth dragging operations
+    // Optimized throttled redraw for smooth operations
     throttledRedraw() {
         if (this.redrawScheduled) return;
         
@@ -402,15 +347,14 @@ class CanvasManager {
     setupCanvas() {
         // Set canvas size to fill container
         this.resizeCanvas();
-        
-        // Add flag to prevent resize loops
+          // Add flag to prevent resize loops
         this.isResizing = false;
-          // Handle window resize
+        
+        // Handle window resize with optimized debouncing
         window.addEventListener('resize', Utils.debounce(() => {
             if (this.isResizing) return;
             this.isResizing = true;
             
-            console.log('Window resize event triggered');
             this.resizeCanvas();
             
             // Always redraw after resize, whether we have an image or not
@@ -419,14 +363,13 @@ class CanvasManager {
             setTimeout(() => {
                 this.isResizing = false;
             }, 100);
-        }, 250));
+        }, 100)); // Further reduced debounce time for more responsive resizing
 
         // Add ResizeObserver to handle container size changes (e.g., dev tools, inspect mode)
         if (window.ResizeObserver) {
             this.resizeObserver = new ResizeObserver(Utils.debounce((entries) => {
                 for (const entry of entries) {
                     if (entry.target === this.canvasWrapper) {
-                        console.log('Canvas wrapper resized via ResizeObserver');
                         if (!this.isResizing) {
                             this.isResizing = true;
                             this.resizeCanvas();
@@ -438,37 +381,29 @@ class CanvasManager {
                         break;
                     }
                 }
-            }, 100));
-            
-            this.resizeObserver.observe(this.canvasWrapper);
+            }, 50)); // Reduced debounce for container changes
+              this.resizeObserver.observe(this.canvasWrapper);
         }
-    }    resizeCanvas() {
+    }
+    
+    resizeCanvas() {
         const rect = this.canvasWrapper.getBoundingClientRect();
-        console.log('Resizing canvas - wrapper dimensions:', rect.width, 'x', rect.height);
         
         // Set high DPI support
         const dpr = window.devicePixelRatio || 1;
         const displayWidth = rect.width;
         const displayHeight = rect.height;
         
-        console.log('Device pixel ratio:', dpr);
-        console.log('Display dimensions:', displayWidth, 'x', displayHeight);
-        
         this.canvas.width = displayWidth * dpr;
         this.canvas.height = displayHeight * dpr;
         this.canvas.style.width = displayWidth + 'px';
         this.canvas.style.height = displayHeight + 'px';
         
-        console.log('Canvas actual dimensions:', this.canvas.width, 'x', this.canvas.height);
-        console.log('Canvas style dimensions:', this.canvas.style.width, 'x', this.canvas.style.height);
-        
         // Reset transform to avoid accumulation
         this.ctx.setTransform(1, 0, 0, 1, 0, 0);
         // Scale context for high DPI
         this.ctx.scale(dpr, dpr);
         
-        console.log('Context scaled by:', dpr);
-        
         // Force redraw after resize to restore image and annotations
         this.redraw();
     }
@@ -490,10 +425,11 @@ class CanvasManager {
         this.canvas.addEventListener('touchstart', this.handleTouchStart.bind(this));
         this.canvas.addEventListener('touchmove', this.handleTouchMove.bind(this));
         this.canvas.addEventListener('touchend', this.handleTouchEnd.bind(this));
-        
-        // Prevent default touch behaviors
+          // Prevent default touch behaviors
         this.canvas.addEventListener('touchstart', (e) => e.preventDefault());
-        this.canvas.addEventListener('touchmove', (e) => e.preventDefault());        // Tool buttons
+        this.canvas.addEventListener('touchmove', (e) => e.preventDefault());
+        
+        // Tool buttons
         document.querySelectorAll('.tool-btn').forEach(btn => {
             btn.addEventListener('click', () => {
                 const requestedTool = btn.dataset.tool;
@@ -513,10 +449,11 @@ class CanvasManager {
         document.getElementById('zoomIn').addEventListener('click', () => this.zoomIn());
         document.getElementById('zoomOut').addEventListener('click', () => this.zoomOut());
         document.getElementById('fitToScreen').addEventListener('click', () => this.fitToScreen());
-        
-        // Keyboard events for polygon editing
+          // Keyboard events for polygon editing
         document.addEventListener('keydown', this.handleKeyDown.bind(this));
-    }    setTool(tool) {
+    }
+    
+    setTool(tool) {
         // Track previous tool (but not if switching from pan)
         if (this.currentTool !== 'pan') {
             this.previousTool = this.currentTool;
@@ -546,21 +483,14 @@ class CanvasManager {
         }
     }
 
-    updateToolButtons() {
-        document.querySelectorAll('.tool-btn').forEach(btn => {
+    updateToolButtons() {        document.querySelectorAll('.tool-btn').forEach(btn => {
             btn.classList.toggle('active', btn.dataset.tool === this.currentTool);
         });
-    }    handleMouseDown(e) {
+    }
+      handleMouseDown(e) {
         const pos = Utils.getMousePos(this.canvas, e);
         this.lastMousePos = pos;
 
-        console.log('=== MOUSE DOWN EVENT ===');
-        console.log('Position:', pos);
-        console.log('Current tool:', this.currentTool);
-        console.log('Edit mode active:', this.editModeActive);
-        console.log('Is editing polygon:', this.isEditingPolygon);
-        console.log('Editing annotation ID:', this.editingAnnotationId);
-
         // --- FIX: Always check for vertex under mouse in edit mode ---
         if (
             e.button === 0 &&
@@ -579,35 +509,33 @@ class CanvasManager {
         }
 
         if (e.button === 0) { // Left click
-            this.handlePrimaryAction(pos, e);
-        } else if (e.button === 2) { // Right click
+            this.handlePrimaryAction(pos, e);        } else if (e.button === 2) { // Right click
             this.handleSecondaryAction(pos, e);
         }
-    }    handleMouseMove(e) {
+    }
+    
+    handleMouseMove(e) {
         const pos = Utils.getMousePos(this.canvas, e);
         this.updateMouseCoordinates(pos);
-        
-        if (this.isDragging && this.currentTool === 'pan') {
+          if (this.isDragging && this.currentTool === 'pan') {
             this.handlePan(pos);
         } else if (this.isDrawing && this.currentTool === 'polygon') {
-            this.updatePolygonPreview(pos);        } else if (this.draggingVertex) {
-            // Optimized: Remove frequent logging during dragging
+            this.updatePolygonPreview(pos);
+        } else if (this.draggingVertex) {
+            // Optimized vertex dragging - no logging during movement
             this.updateVertexPosition(pos);
         } else if (this.isEditingPolygon && this.currentTool === 'select') {
-            // Optimized hover updates - only check if we've moved significantly
-            if (!this.lastHoverPos || Utils.distance(pos, this.lastHoverPos) > 2) {
+            // Optimized hover updates - throttle to reduce computations
+            if (!this.lastHoverPos || Utils.distance(pos, this.lastHoverPos) > 3) {
                 this.updateEditingHover(pos);
                 this.lastHoverPos = { x: pos.x, y: pos.y };
             }
-        }
-        
+        }        
         this.lastMousePos = pos;
-    }handleMouseUp(e) {
-        console.log('=== MOUSE UP EVENT ===');
-        console.log('draggingVertex:', !!this.draggingVertex);
-        
+    }
+    
+    handleMouseUp(e) {
         if (this.draggingVertex) {
-            console.log('Finishing vertex drag');
             this.finishVertexDrag();
         }
         
@@ -658,6 +586,9 @@ class CanvasManager {
     }
 
     handlePrimaryAction(pos, e) {
+        // During multi-upload, the first click is handled differently
+        // to prevent simultaneous segmentation processes
+        // See handlePointClick for implementation
         switch (this.currentTool) {
             case 'select':
                 this.handleSelect(pos);
@@ -670,10 +601,11 @@ class CanvasManager {
                 break;
             case 'pan':
                 this.isDragging = true;
-                this.canvas.style.cursor = 'grabbing';
-                break;
+                this.canvas.style.cursor = 'grabbing';                break;
         }
-    }    handleSecondaryAction(pos, e) {
+    }
+    
+    handleSecondaryAction(pos, e) {
         if (this.currentTool === 'polygon' && this.isDrawing) {
             this.finishPolygon();
         } else if (this.isEditingPolygon) {
@@ -683,71 +615,48 @@ class CanvasManager {
                 const vertexInfo = this.getVertexAtPoint(pos, annotation);
                 if (vertexInfo && annotation.polygon.length > 3) { // Keep at least 3 vertices
                     this.removeVertex(vertexInfo);
-                }
-            }
+                }            }
         }
-    }    handleSelect(pos) {
-        console.log('=== HANDLE SELECT ===');
-        console.log('Position:', pos);
-        console.log('Edit mode active:', this.editModeActive);
-        console.log('Is editing polygon:', this.isEditingPolygon);
-        console.log('Editing annotation ID:', this.editingAnnotationId);
-        
+    }
+      handleSelect(pos) {
         // Check if clicking on an annotation
         const annotation = window.annotationManager.getAnnotationAtPoint(pos);
-        console.log('Found annotation:', annotation ? annotation.id : 'none');
         
         if (annotation) {
             // FIRST: If edit mode is active and we're editing this annotation, check for interactions BEFORE selection
             if (this.editModeActive && this.isEditingPolygon && this.editingAnnotationId === annotation.id) {
-                console.log('=== CHECKING FOR VERTEX INTERACTION ===');
-                console.log('Annotation canvasPolygon exists:', !!annotation.canvasPolygon);
-                
                 // Check for vertex interaction
                 const vertexInfo = this.getVertexAtPoint(pos, annotation);
-                console.log('Vertex detection result:', vertexInfo);
                 if (vertexInfo) {
-                    console.log('*** STARTING VERTEX DRAG for vertex:', vertexInfo.vertexIndex, '***');
                     this.startVertexDrag(vertexInfo);
                     return; // Don't proceed with selection
                 }
                 
                 // Check for edge interaction to add new vertex
                 const edgeInfo = this.getEdgeAtPoint(pos, annotation);
-                console.log('Edge detection result:', edgeInfo);
                 if (edgeInfo) {
-                    console.log('*** ADDING VERTEX AT EDGE ***');
                     this.addVertexAtEdge(edgeInfo, pos);
                     return; // Don't proceed with selection
                 }
-                console.log('No vertex or edge interaction detected');
             }
             
             // SECOND: Select the annotation (only if we didn't start dragging/editing)
-            console.log('Selecting annotation:', annotation.id);
             window.annotationManager.selectAnnotation(annotation.id);
             
             if (this.editModeActive && (!this.isEditingPolygon || this.editingAnnotationId !== annotation.id)) {
                 // Edit mode is active but we're selecting a different annotation
-                console.log('Starting polygon editing for annotation:', annotation.id);
                 this.startPolygonEditing(annotation.id);
             }
-            // If edit mode is not active, just select the annotation without editing        } else {
+            // If edit mode is not active, just select the annotation without editing} else {
             // Clear selection
             window.annotationManager.clearSelection();
             // In persistent edit mode, just stop editing current polygon but keep edit mode active
             if (this.isEditingPolygon) {
-                this.stopPolygonEditing();
-            }
+                this.stopPolygonEditing();            }
         }
-    }async handlePointClick(pos) {
+    }    async handlePointClick(pos) {
         if (!this.currentImage) return;
         
-        console.log('Click position (canvas coords):', pos);
-        console.log('Image dimensions:', this.imageElement.naturalWidth, 'x', this.imageElement.naturalHeight);
-        console.log('Canvas dimensions:', this.canvas.width, 'x', this.canvas.height);
-        console.log('Transform:', { scale: this.scale, offsetX: this.offsetX, offsetY: this.offsetY });
-        
         // Convert canvas coordinates to normalized image coordinates (0-1)
         const imageCoords = Utils.canvasToImageCoords(
             pos.x, pos.y,
@@ -760,14 +669,12 @@ class CanvasManager {
             this.offsetY
         );
         
-        console.log('Converted to normalized image coords:', imageCoords);
-        
         // Validate that coordinates are in 0-1 range
         if (imageCoords.x < 0 || imageCoords.x > 1 || imageCoords.y < 0 || imageCoords.y > 1) {
             console.warn('Click coordinates are outside image bounds:', imageCoords);
-            return;
-        }
-          try {
+            return;        }
+        
+        try {
             const result = await api.segment(this.currentImage.image_id, imageCoords.x, imageCoords.y);
             
             console.log('AI segmentation result:', result);              if (result.polygon && result.polygon.length > 0) {
@@ -781,8 +688,7 @@ class CanvasManager {
                 
                 if (!isNormalized) {
                     console.warn('AI polygon coordinates are not normalized (0-1 range):', result.polygon.slice(0, 3));
-                }
-                  // Simplify the polygon to make it easier to edit
+                }                  // Simplify the polygon to make it easier to edit
                 let simplifiedPolygon = result.polygon;
                 if (result.polygon.length > 10) { // Simplify if more than 10 points
                     console.log('Simplifying polygon from', result.polygon.length, 'points');
@@ -792,21 +698,22 @@ class CanvasManager {
                         minTolerance: 0.005,
                         maxTolerance: 0.02
                     };
-                    
-                    simplifiedPolygon = Utils.adaptiveSimplifyPolygon(
+                      console.log('Simplification settings:', settings);
+                    console.log('Original polygon sample:', result.polygon.slice(0, 3));
+                      simplifiedPolygon = Utils.adaptiveSimplifyPolygon(
                         result.polygon, 
                         settings.maxPoints,
                         settings.minTolerance,
                         settings.maxTolerance
                     );
-                    console.log('Simplified to', simplifiedPolygon.length, 'points');
+                      console.log('Simplified polygon length:', simplifiedPolygon.length);
+                    console.log('Simplified polygon sample:', simplifiedPolygon.slice(0, 3));
                     
                     // Show feedback to user
                     if (result.polygon.length !== simplifiedPolygon.length) {
                         Utils.showToast(`AI polygon simplified from ${result.polygon.length} to ${simplifiedPolygon.length} points for easier editing`, 'info', 3000);
-                    }
-                }
-                  // Create annotation - polygon should be in normalized coordinates (0-1)
+                    }                }                
+                // Create annotation - polygon should be in normalized coordinates (0-1)
                 // The drawAnnotations method will convert to canvas coordinates when needed
                 const annotation = {
                     id: result.annotationId || Utils.generateId(), // Use backend annotation ID if available
@@ -818,14 +725,12 @@ class CanvasManager {
                     source: 'ai',
                     simplified: result.polygon.length !== simplifiedPolygon.length
                 };
-                
-                console.log('AI annotation created with simplified polygon:', annotation);
+                  console.log('Creating annotation with polygon length:', annotation.polygon.length);
+                console.log('Annotation polygon sample:', annotation.polygon.slice(0, 3));
                 
                 window.annotationManager.addAnnotation(annotation);
                 this.redraw();
                 
-                console.log('AI annotation added and canvas redrawn');
-                
                 // The label is automatically applied from currentLabel, no modal needed
             } else {
                 console.warn('AI segmentation returned no polygon or empty polygon');
@@ -875,9 +780,9 @@ class CanvasManager {
                     this.offsetX,
                     this.offsetY
                 );
-                return [imageCoords.x, imageCoords.y];
-            });
-              // Create annotation
+                return [imageCoords.x, imageCoords.y];            });
+            
+            // Create annotation
             const annotation = {
                 id: Utils.generateId(),
                 type: 'manual_polygon',
@@ -896,66 +801,64 @@ class CanvasManager {
 
     cancelCurrentPolygon() {
         this.isDrawing = false;
-        this.currentPolygon = [];
-        this.tempPolygon = [];
+        this.currentPolygon = [];        this.tempPolygon = [];
         this.redraw();
     }
-
+    
     handlePan(pos) {
         const dx = pos.x - this.lastMousePos.x;
-        const dy = pos.y - this.lastMousePos.y;
-        
+        const dy = pos.y - this.lastMousePos.y;        
         this.offsetX += dx;
-        this.offsetY += dy;        
-        this.redraw();
+        this.offsetY += dy;
+        
+        // Use throttled redraw for smoother panning
+        this.throttledRedraw();
     }    loadImage(imageData) {
-        console.log('CanvasManager.loadImage called with:', imageData);
         this.currentImage = imageData;
         
-        const img = new Image();
-        img.onload = () => {
-            console.log('Image loaded successfully:', img.naturalWidth, 'x', img.naturalHeight);
-            
+        const img = new Image();        img.onload = () => {
             this.imageElement = img;
             
             // Ensure canvas is visible and placeholder is hidden
-            console.log('Showing canvas and hiding placeholder...');
             this.canvas.style.display = 'block';
             this.placeholder.style.display = 'none';
             this.placeholder.hidden = true;
             
-            console.log('Placeholder hidden, image ready');
-            console.log('Canvas context available:', !!this.ctx);
-            console.log('Canvas context properties:', {
-                fillStyle: this.ctx.fillStyle,
-                strokeStyle: this.ctx.strokeStyle,
-                globalAlpha: this.ctx.globalAlpha
-            });
             this.fitToScreen();
             this.redraw();
-            console.log('Image display complete');
+            
+            // Notify annotation manager that image is ready and force annotation redraw
+            if (window.annotationManager) {                // Clear cached annotation canvas polygons to force recalculation
+                window.annotationManager.annotations.forEach(annotation => {
+                    annotation.canvasPolygon = null;
+                    annotation.lastScale = null;
+                    annotation.lastOffsetX = null;
+                    annotation.lastOffsetY = null;
+                    annotation.lastImageId = null;
+                });
+                
+                // Force redraw after a small delay to ensure image is fully processed
+                setTimeout(() => {
+                    this.redraw();
+                }, 100);
+            }
         };
-        
         img.onerror = (error) => {
             console.error('Image load error:', error);
-            console.error('Failed to load image from URL:', img.src);
             Utils.showToast('Failed to load image', 'error');
         };
         
         const imageUrl = api.getImageUrl(imageData.file_path);
-        console.log('Loading image from URL:', imageUrl);
         img.crossOrigin = 'anonymous'; // Add CORS support for images
         img.src = imageUrl;
-    }    fitToScreen() {
+    }
+      fitToScreen() {
         if (!this.imageElement || this.isResizing) return;
         
         const { width: canvasWidth, height: canvasHeight } = this.getDisplayDimensions();
         const imageWidth = this.imageElement.naturalWidth;
         const imageHeight = this.imageElement.naturalHeight;
         
-        console.log('fitToScreen - Canvas display dimensions:', canvasWidth, 'x', canvasHeight);
-        console.log('fitToScreen - Image natural dimensions:', imageWidth, 'x', imageHeight);
-        
         // Calculate scale to fit image in canvas
         const scaleX = canvasWidth / imageWidth;
         const scaleY = canvasHeight / imageHeight;
@@ -972,15 +875,12 @@ class CanvasManager {
             this.offsetX = newOffsetX;
             this.offsetY = newOffsetY;
             
-            console.log('fitToScreen - Updated scale:', this.scale);
-            console.log('fitToScreen - Updated offsets:', this.offsetX, this.offsetY);
-            
             this.updateZoomDisplay();
             this.redraw();
-        } else {
-            console.log('fitToScreen - No significant changes, skipping redraw');
         }
-    }zoomIn() {
+    }
+    
+    zoomIn() {
         const { width, height } = this.getDisplayDimensions();
         this.zoomAt(width / 2, height / 2, 1.2);
     }
@@ -1008,7 +908,10 @@ class CanvasManager {
         const zoomPercent = Math.round(this.scale * 100);
         document.getElementById('zoomLevel').textContent = `${zoomPercent}%`;
     }    updateMouseCoordinates(pos) {
-        // Only update coordinates, don't log excessively
+        // Throttle coordinate updates to improve performance
+        if (this.lastCoordUpdate && Date.now() - this.lastCoordUpdate < 16) return; // ~60fps max
+        this.lastCoordUpdate = Date.now();
+        
         if (this.currentImage && this.imageElement) {
             const imageCoords = Utils.canvasToImageCoords(
                 pos.x, pos.y,
@@ -1021,43 +924,40 @@ class CanvasManager {
                 this.offsetY
             );
             
-            document.getElementById('mouseCoords').textContent = 
-                `x: ${Math.round(imageCoords.x * this.imageElement.naturalWidth)}, y: ${Math.round(imageCoords.y * this.imageElement.naturalHeight)}`;
-        } else {            document.getElementById('mouseCoords').textContent = `x: ${Math.round(pos.x)}, y: ${Math.round(pos.y)}`;
+            const coordElement = document.getElementById('mouseCoords');
+            if (coordElement) {
+                coordElement.textContent = 
+                    `x: ${Math.round(imageCoords.x * this.imageElement.naturalWidth)}, y: ${Math.round(imageCoords.y * this.imageElement.naturalHeight)}`;
+            }
+        } else {
+            const coordElement = document.getElementById('mouseCoords');
+            if (coordElement) {
+                coordElement.textContent = `x: ${Math.round(pos.x)}, y: ${Math.round(pos.y)}`;            }
         }
     }
-
+    
     redraw() {
-        const now = Date.now();
-        
-        // Throttle redraw calls to prevent excessive rendering
+        // Improved throttling with better frame rate control
         if (this.redrawPending) return;
         
-        if (now - this.lastRedrawTime < this.redrawThrottle) {
-            this.redrawPending = true;
-            requestAnimationFrame(() => {
-                this.redrawPending = false;
-                this._performRedraw();
-            });
-            return;
-        }
-        
-        this._performRedraw();
+        this.redrawPending = true;
+        requestAnimationFrame(() => {
+            this.redrawPending = false;            this._performRedraw();
+        });
     }
-      _performRedraw() {
+    
+    _performRedraw() {
         this.lastRedrawTime = Date.now();
-        console.log('_performRedraw() called - zoom:', Math.round(this.scale * 100) + '%', 'offset:', Math.round(this.offsetX), Math.round(this.offsetY));
+        // Removed excessive logging for performance
         
         // Clear canvas - use display dimensions since context is scaled by DPR
         const { width, height } = this.getDisplayDimensions();
         this.ctx.clearRect(0, 0, width, height);
-        
-        if (!this.imageElement) {
-            console.log('No image element, skipping draw');
+          if (!this.imageElement) {
             return;
         }
-          // Draw image - simplified approach
-        console.log('Drawing image...');
+        
+        // Draw image - simplified approach
         
         // Ensure we have a clean context state
         this.ctx.save();
@@ -1077,15 +977,10 @@ class CanvasManager {
         );
         
         // Don't restore context yet - keep DPR scaling for annotations
-        console.log('Image drawn successfully');
         
         // Draw annotations with DPR-scaled context
         if (window.annotationManager) {
-            console.log('About to draw annotations...');
             window.annotationManager.drawAnnotations(this.ctx, this.scale, this.offsetX, this.offsetY);
-            console.log('Annotations drawing complete');
-        } else {
-            console.log('No annotation manager available');
         }
         
         // Draw current polygon being drawn
@@ -1123,26 +1018,27 @@ class CanvasManager {
         if (!isDashed) {
             this.ctx.closePath();
         }
-        
-        this.ctx.stroke();
+          this.ctx.stroke();
         this.ctx.restore();
-          // Draw points
+        
+        // Draw points
         points.forEach((point, index) => {
             this.ctx.save();
             this.ctx.fillStyle = color;
             this.ctx.beginPath();
             this.ctx.arc(point.x, point.y, 3, 0, 2 * Math.PI);
-            this.ctx.fill();
-            this.ctx.restore();
+            this.ctx.fill();            this.ctx.restore();
         });
-    }    drawEditingFeedback() {
-        const annotation = window.annotationManager.annotations.find(ann => ann.id === this.editingAnnotationId);
-        if (!annotation || !annotation.canvasPolygon) return;
+    }
+    
+    drawEditingFeedback() {
+        const annotation = window.annotationManager.annotations.find(ann => ann.id === this.editingAnnotationId);        if (!annotation || !annotation.canvasPolygon) return;
         
         // Draw larger, more prominent vertices for editing
         annotation.canvasPolygon.forEach((vertex, index) => {
             this.ctx.save();
-              // Highlight hovered or dragged vertex with different styles
+            
+            // Highlight hovered or dragged vertex with different styles
             if (this.draggingVertex && this.draggingVertex.vertexIndex === index) {
                 // Dragged vertex - extra large and bright red
                 this.ctx.fillStyle = '#dc2626'; // Bright red for dragging
@@ -1176,10 +1072,11 @@ class CanvasManager {
                 this.ctx.arc(vertex.x, vertex.y, this.vertexSize, 0, 2 * Math.PI);
                 this.ctx.fill();
                 this.ctx.stroke();
-            }
-            
+            }            
             this.ctx.restore();
-        });        // Draw edge hover feedback with better visibility
+        });
+        
+        // Draw edge hover feedback with better visibility
         if (this.hoveredEdge) {
             const start = this.hoveredEdge.start;
             const end = this.hoveredEdge.end;
@@ -1224,9 +1121,9 @@ class CanvasManager {
             this.ctx.moveTo(midX - size/2 + 3, midY);
             this.ctx.lineTo(midX + size/2 - 3, midY);
             this.ctx.moveTo(midX, midY - size/2 + 3);
-            this.ctx.lineTo(midX, midY + size/2 - 3);
-            this.ctx.stroke();
-              this.ctx.restore();
+            this.ctx.lineTo(midX, midY + size/2 - 3);            this.ctx.stroke();
+            
+            this.ctx.restore();
             this.ctx.stroke();
             this.ctx.restore();
         }
@@ -1234,10 +1131,10 @@ class CanvasManager {
 
     // Efficient method to redraw just the editing handles without full canvas redraw
 
-    handleKeyDown(e) {
-        // Only handle keys when editing polygons
+    handleKeyDown(e) {        // Only handle keys when editing polygons
         if (!this.isEditingPolygon) return;
-          switch (e.key) {
+        
+        switch (e.key) {
             case 'Escape':
                 // In persistent edit mode, just clear selection but keep edit mode active
                 if (this.editModeActive) {
@@ -1257,10 +1154,10 @@ class CanvasManager {
                 if (this.hoveredVertex) {
                     const annotation = window.annotationManager.annotations.find(ann => ann.id === this.hoveredVertex.annotationId);
                     if (annotation && annotation.polygon.length > 3) {
-                        this.removeVertex(this.hoveredVertex);
-                    }
+                        this.removeVertex(this.hoveredVertex);                    }
                 }
-                break;            case 'Enter':
+                break;
+            case 'Enter':
                 // Finish editing current polygon
                 if (this.editModeActive) {
                     // In persistent edit mode, stop editing current polygon and give feedback
@@ -1285,10 +1182,11 @@ class CanvasManager {
                     // If not in edit mode, just stop editing
                     this.stopPolygonEditing();
                     Utils.showToast('Polygon editing complete', 'success');
-                }
-                break;
+                }                break;
         }
-    }    clear() {
+    }
+    
+    clear() {
         this.currentImage = null;
         this.imageElement = null;
         this.canvas.hidden = true;
@@ -1318,47 +1216,10 @@ class CanvasManager {
         // Hide canvas
         if (this.canvas) {
             this.canvas.style.display = 'none';
-        }
-        
+        }        
         console.log('CanvasManager: Image cleared');
     }
     
-    // Debug function to test coordinate transformations
-    debugCoordinateTransform() {
-        if (!this.imageElement) {
-            console.log('No image loaded for coordinate testing');
-            return;
-        }
-        
-        console.log('=== Coordinate Transform Debug ===');
-        console.log('Image natural dimensions:', this.imageElement.naturalWidth, 'x', this.imageElement.naturalHeight);
-        console.log('Current scale:', this.scale);
-        console.log('Current offset:', this.offsetX, this.offsetY);
-        console.log('Canvas display size:', this.getDisplayDimensions());
-        
-        // Test corner coordinates (normalized 0-1)
-        const testPoints = [
-            [0, 0],     // top-left
-            [1, 0],     // top-right
-            [1, 1],     // bottom-right
-            [0, 1],     // bottom-left
-            [0.5, 0.5], // center
-        ];
-        
-        console.log('Testing normalized coordinate transformations:');
-        testPoints.forEach((point, i) => {
-            const canvas = Utils.imageToCanvasCoords(
-                point[0], point[1],
-                this.imageElement.naturalWidth,
-                this.imageElement.naturalHeight,
-                this.scale,
-                this.offsetX,
-                this.offsetY
-            );
-            console.log(`Point ${i} [${point[0]}, ${point[1]}] -> Canvas [${canvas.x.toFixed(1)}, ${canvas.y.toFixed(1)}]`);        });
-        console.log('=== End Debug ===');
-    }
-
     refreshEditingState() {
         if (!this.isEditingPolygon || !this.editingAnnotationId) {
             return;
@@ -1372,12 +1233,12 @@ class CanvasManager {
         }
         
         // Ensure editing cursor is set
-        this.canvas.style.cursor = 'pointer';
-        
+        this.canvas.style.cursor = 'pointer';        
         // Force a redraw to show editing handles
         this.redraw();
-          console.log('Refreshed editing state for annotation:', this.editingAnnotationId);
-    }    toggleEditMode() {
+    }
+    
+    toggleEditMode() {
         this.editModeActive = !this.editModeActive;
         
         if (this.editModeActive) {
@@ -1399,21 +1260,19 @@ class CanvasManager {
             } else {
                 // No annotation selected, turn off edit mode
                 this.editModeActive = false;
-                this.updateEditToggleButton();
-                Utils.showNotification('Select an annotation first before entering edit mode', 3000);
+                this.updateEditToggleButton();                Utils.showNotification('Select an annotation first before entering edit mode', 3000);
                 return;
-            }        } else {
+            }
+        } else {
             // Exiting edit mode - clear any pending auto-exit timer
             if (this.autoExitEditTimer) {
                 clearTimeout(this.autoExitEditTimer);
                 this.autoExitEditTimer = null;
             }
             this.stopPolygonEditing();
-            Utils.showNotification('Edit Mode OFF', 2000);
-        }
+            Utils.showNotification('Edit Mode OFF', 2000);        }
         
         this.updateEditToggleButton();
-        console.log('Edit mode:', this.editModeActive ? 'ON' : 'OFF');
     }
     
     updateEditToggleButton() {
@@ -1438,12 +1297,3 @@ class CanvasManager {
 
 // Export for global use
 window.CanvasManager = CanvasManager;
-
-// Add debug function to global scope
-window.debugCoords = function() {
-    if (window.canvasManager) {
-        window.canvasManager.debugCoordinateTransform();
-    } else {
-        console.log('Canvas manager not available');
-    }
-};
diff --git a/web/js/utils.js b/web/js/utils.js
index 24a3037..b3cf81c 100644
--- a/web/js/utils.js
+++ b/web/js/utils.js
@@ -90,30 +90,19 @@ class Utils {
             console.warn('Invalid coordinates in imageToCanvasCoords:', { imageX, imageY, scale, offsetX, offsetY });
             return { x: 0, y: 0 };
         }
-        
-        // Convert normalized coordinates (0-1) to canvas coordinates
+          // Convert normalized coordinates (0-1) to canvas coordinates
         // imageX and imageY are already normalized (0-1), so we need to:
         // 1. Scale them by the displayed image size
         // 2. Add the image offset within the canvas
         const x = (imageX * imageWidth * scale) + offsetX;
         const y = (imageY * imageHeight * scale) + offsetY;
         
-        // Debug first few coordinate transformations
-        if (Math.random() < 0.01) { // Log 1% of transformations to avoid spam
-            console.log('Coordinate transform:', {
-                input: { imageX, imageY },
-                imageSize: { imageWidth, imageHeight },
-                transform: { scale, offsetX, offsetY },
-                output: { x, y }
-            });
-        }
-        
         return { x, y };
-    }
-
-    // Calculate distance between two points
+    }// Calculate distance between two points (optimized)
     static distance(p1, p2) {
-        return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+        const dx = p2.x - p1.x;
+        const dy = p2.y - p1.y;
+        return Math.sqrt(dx * dx + dy * dy);
     }
 
     // Check if point is inside polygon
@@ -349,31 +338,56 @@ class Utils {
         console.log('Overlay hidden attribute:', overlay.hidden);
         console.log('Computed display:', computedStyle.display);
         console.log('Computed visibility:', computedStyle.visibility);
-        console.log('Computed opacity:', computedStyle.opacity);
-    }
+        console.log('Computed opacity:', computedStyle.opacity);    }
 
     // Show toast notification
     static showToast(message, type = 'success', duration = 3000) {
-        const container = document.getElementById('toastContainer');
+        // Get or create container
+        let container = document.getElementById('toastContainer');
+        if (!container) {
+            container = document.createElement('div');
+            container.id = 'toastContainer';
+            container.className = 'toast-container';
+            document.body.appendChild(container);
+        }
+        
+        // Create toast element
         const toast = document.createElement('div');
         toast.className = `toast ${type}`;
+        
+        // Use template for better performance
+        const iconMap = {
+            'success': 'check-circle',
+            'error': 'exclamation-circle',
+            'warning': 'exclamation-triangle',
+            'info': 'info-circle'
+        };
+        
         toast.innerHTML = `
             <div style="display: flex; align-items: center; gap: 0.5rem;">
-                <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
+                <i class="fas fa-${iconMap[type] || 'info-circle'}"></i>
                 <span>${message}</span>
             </div>
         `;
         
+        // Force GPU acceleration
+        toast.style.transform = 'translateZ(0)';
+        
         container.appendChild(toast);
         
-        setTimeout(() => {
-            toast.style.animation = 'slideOut 0.3s ease forwards';
+        // Use requestAnimationFrame for smooth animations
+        requestAnimationFrame(() => {
             setTimeout(() => {
                 if (container.contains(toast)) {
-                    container.removeChild(toast);
+                    toast.style.animation = 'slideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards';
+                    toast.addEventListener('animationend', () => {
+                        if (container.contains(toast)) {
+                            container.removeChild(toast);
+                        }
+                    }, { once: true });
                 }
-            }, 300);
-        }, duration);
+            }, duration);
+        });
     }
 
     // Clamp value between min and max
@@ -432,9 +446,7 @@ class Utils {
             };
               check();
         });
-    }
-
-    // Show a temporary notification message
+    }    // Show a temporary notification message (optimized)
     static showNotification(message, duration = 3000) {
         // Create or reuse notification element
         let notification = document.getElementById('statusNotification');
@@ -442,17 +454,21 @@ class Utils {
         if (!notification) {
             notification = document.createElement('div');
             notification.id = 'statusNotification';
-            notification.style.position = 'fixed';
-            notification.style.bottom = '20px';
-            notification.style.left = '50%';
-            notification.style.transform = 'translateX(-50%)';
-            notification.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
-            notification.style.color = 'white';
-            notification.style.padding = '10px 20px';
-            notification.style.borderRadius = '4px';
-            notification.style.zIndex = '1000';
-            notification.style.transition = 'opacity 0.3s ease';
-            notification.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.2)';
+            notification.style.cssText = `
+                position: fixed;
+                bottom: 20px;
+                left: 50%;
+                transform: translate3d(-50%, 0, 0);
+                background-color: rgba(0, 0, 0, 0.8);
+                color: white;
+                padding: 10px 20px;
+                border-radius: 4px;
+                z-index: 1000;
+                transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+                will-change: opacity;
+                backface-visibility: hidden;
+            `;
             document.body.appendChild(notification);
         }
         
@@ -469,25 +485,31 @@ class Utils {
         notification.timeoutId = setTimeout(() => {
             notification.style.opacity = '0';
         }, duration);
-    }    // Show progress bar
+    }// Show progress bar with performance optimization
     static showProgressBar(percent, text = '') {
         const container = document.getElementById('progressBarContainer');
         const bar = document.getElementById('progressBar');
         const label = document.getElementById('progressBarText');
         
         if (container && bar) {
-            container.classList.add('show');
-            bar.style.width = Math.max(0, Math.min(100, percent)) + '%';
-            if (label) label.textContent = text;
+            // Use requestAnimationFrame for smoother updates
+            requestAnimationFrame(() => {
+                container.classList.add('show');
+                bar.style.width = Math.max(0, Math.min(100, percent)) + '%';
+                if (label) label.textContent = text;
+            });
             console.log(`Progress bar shown: ${percent}% - ${text}`);
         }
     }
     
-    // Hide progress bar
+    // Hide progress bar with immediate response
     static hideProgressBar() {
         const container = document.getElementById('progressBarContainer');
         if (container) {
-            container.classList.remove('show');
+            // Use requestAnimationFrame for immediate visual response
+            requestAnimationFrame(() => {
+                container.classList.remove('show');
+            });
             console.log('Progress bar hidden');
         }
     }
diff --git a/web/loading-test.html b/web/loading-test.html
deleted file mode 100644
index 5295567..0000000
--- a/web/loading-test.html
+++ /dev/null
@@ -1,151 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Loading Test - SAT Annotator</title>
-    <style>
-        .loading-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.8);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 9999;
-            color: white;
-        }
-        
-        .loading-content {
-            text-align: center;
-        }
-        
-        .spinner {
-            width: 40px;
-            height: 40px;
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #3498db;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 20px;
-        }
-        
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        
-        button {
-            margin: 10px;
-            padding: 10px 20px;
-            font-size: 16px;
-            cursor: pointer;
-        }
-        
-        #log {
-            margin-top: 20px;
-            padding: 20px;
-            background: #f0f0f0;
-            font-family: monospace;
-            white-space: pre-wrap;
-            max-height: 300px;
-            overflow-y: auto;
-        }
-    </style>
-</head>
-<body>
-    <h1>Loading Overlay Test</h1>
-    
-    <button onclick="testShow()">Show Loading</button>
-    <button onclick="testHide()">Hide Loading</button>
-    <button onclick="testAPI()">Test API Call</button>
-    <button onclick="clearLog()">Clear Log</button>
-    
-    <div id="log"></div>
-    
-    <!-- Loading Overlay -->
-    <div class="loading-overlay" id="loadingOverlay" hidden>
-        <div class="loading-content">
-            <div class="spinner"></div>
-            <p id="loadingText">Processing...</p>
-        </div>
-    </div>
-
-    <script>
-        function log(message) {
-            const logDiv = document.getElementById('log');
-            const timestamp = new Date().toLocaleTimeString();
-            logDiv.textContent += `[${timestamp}] ${message}\n`;
-            logDiv.scrollTop = logDiv.scrollHeight;
-            console.log(message);
-        }
-
-        function clearLog() {
-            document.getElementById('log').textContent = '';
-        }
-
-        function testShow() {
-            log('Testing showLoading...');
-            const overlay = document.getElementById('loadingOverlay');
-            const text = document.getElementById('loadingText');
-            
-            if (!overlay) {
-                log('ERROR: Loading overlay element not found!');
-                return;
-            }
-            if (!text) {
-                log('ERROR: Loading text element not found!');
-                return;
-            }
-            
-            text.textContent = 'Test Loading Message...';
-            overlay.hidden = false;
-            log('Loading overlay shown successfully');
-        }
-
-        function testHide() {
-            log('Testing hideLoading...');
-            const overlay = document.getElementById('loadingOverlay');
-            
-            if (!overlay) {
-                log('ERROR: Loading overlay element not found when trying to hide!');
-                return;
-            }
-            
-            overlay.hidden = true;
-            log('Loading overlay hidden successfully');
-        }
-
-        async function testAPI() {
-            log('Testing API call with loading...');
-            
-            try {
-                testShow();
-                
-                log('Making API call to /api/images/...');
-                const response = await fetch('/api/images/');
-                
-                if (response.ok) {
-                    const data = await response.json();
-                    log('API call successful: ' + JSON.stringify(data));
-                } else {
-                    log('API call failed with status: ' + response.status);
-                }
-            } catch (error) {
-                log('API call error: ' + error.message);
-            } finally {
-                log('Hiding loading overlay...');
-                testHide();
-            }
-        }
-
-        // Auto-start
-        window.addEventListener('load', () => {
-            log('Page loaded, DOM ready');
-        });
-    </script>
-</body>
-</html>
diff --git a/web/minimal-canvas-test.html b/web/minimal-canvas-test.html
deleted file mode 100644
index 31e82f8..0000000
--- a/web/minimal-canvas-test.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Minimal Canvas Test</title>
-    <style>
-        body { margin: 20px; font-family: Arial, sans-serif; }
-        #testCanvas { border: 2px solid #000; display: block; }
-        button { margin: 5px; padding: 10px; }
-        pre { background: #f0f0f0; padding: 10px; margin: 10px 0; }
-    </style>
-</head>
-<body>
-    <h1>Minimal Canvas Test</h1>
-    
-    <button onclick="drawBasic()">Draw Basic Shapes</button>
-    <button onclick="drawImage()">Draw Image</button>
-    <button onclick="clearCanvas()">Clear</button>
-    
-    <canvas id="testCanvas" width="600" height="400"></canvas>
-    
-    <pre id="log"></pre>
-
-    <script>
-        const canvas = document.getElementById('testCanvas');
-        const ctx = canvas.getContext('2d');
-        const log = document.getElementById('log');
-        
-        function addLog(msg) {
-            log.textContent += new Date().toLocaleTimeString() + ': ' + msg + '\n';
-            console.log(msg);
-        }
-        
-        function clearCanvas() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            addLog('Canvas cleared');
-        }
-        
-        function drawBasic() {
-            addLog('Drawing basic shapes...');
-            
-            // Red rectangle
-            ctx.fillStyle = 'red';
-            ctx.fillRect(50, 50, 100, 80);
-            addLog('Red rectangle at (50,50)');
-            
-            // Blue circle
-            ctx.beginPath();
-            ctx.arc(300, 150, 40, 0, 2 * Math.PI);
-            ctx.fillStyle = 'blue';
-            ctx.fill();
-            addLog('Blue circle at (300,150)');
-            
-            // Green text
-            ctx.fillStyle = 'green';
-            ctx.font = '20px Arial';
-            ctx.fillText('Test Text', 200, 300);
-            addLog('Green text at (200,300)');
-        }
-        
-        function drawImage() {
-            addLog('Creating and drawing image...');
-            
-            // Create a simple test image programmatically
-            const testCanvas = document.createElement('canvas');
-            testCanvas.width = 100;
-            testCanvas.height = 100;
-            const testCtx = testCanvas.getContext('2d');
-            
-            // Draw a pattern on the test canvas
-            testCtx.fillStyle = 'yellow';
-            testCtx.fillRect(0, 0, 100, 100);
-            testCtx.fillStyle = 'purple';
-            testCtx.fillRect(20, 20, 60, 60);
-            testCtx.fillStyle = 'orange';
-            testCtx.beginPath();
-            testCtx.arc(50, 50, 20, 0, 2 * Math.PI);
-            testCtx.fill();
-            
-            // Convert to image
-            const img = new Image();
-            img.onload = function() {
-                addLog('Test image created and loaded');
-                addLog('Image dimensions: ' + img.width + 'x' + img.height);
-                
-                // Draw the image at original size
-                ctx.drawImage(img, 400, 50);
-                addLog('Image drawn at (400,50) original size');
-                
-                // Draw the image scaled
-                ctx.drawImage(img, 100, 200, 50, 50);
-                addLog('Image drawn at (100,200) scaled to 50x50');
-                
-                // Also test with an actual image URL
-                testRealImage();
-            };
-            
-            img.src = testCanvas.toDataURL();
-        }
-        
-        function testRealImage() {
-            const realImg = new Image();
-            realImg.onload = function() {
-                addLog('Real image loaded: ' + realImg.naturalWidth + 'x' + realImg.naturalHeight);
-                
-                // Draw scaled down to fit
-                const scale = Math.min(150 / realImg.naturalWidth, 150 / realImg.naturalHeight);
-                const w = realImg.naturalWidth * scale;
-                const h = realImg.naturalHeight * scale;
-                
-                ctx.drawImage(realImg, 350, 200, w, h);
-                addLog('Real image drawn at (350,200) scaled to ' + w + 'x' + h);
-            };
-            
-            realImg.onerror = function() {
-                addLog('Failed to load real image - this is expected if no server');
-            };
-            
-            // Try to load from the SAT Annotator server
-            realImg.crossOrigin = 'anonymous';
-            realImg.src = 'http://localhost:8000/uploads/cfd5471f-7380-436d-8a50-aff35ce66dc8.jpg';
-        }
-        
-        // Initialize
-        addLog('Canvas test initialized');
-        addLog('Canvas size: ' + canvas.width + 'x' + canvas.height);
-        addLog('Context available: ' + !!ctx);
-    </script>
-</body>
-</html>
diff --git a/web/package.json b/web/package.json
deleted file mode 100644
index d29760f..0000000
--- a/web/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "sat-annotator-frontend",
-  "version": "1.0.0",
-  "description": "Frontend for SAT Annotator - Satellite Image Annotation Tool",
-  "main": "index.html",
-  "scripts": {
-    "dev": "python -m http.server 8080",
-    "build": "echo 'Build completed - files are ready for deployment'",
-    "serve": "python -m http.server 8080"
-  },
-  "keywords": ["satellite", "annotation", "gis", "remote-sensing"],
-  "author": "SAT Annotator Team",
-  "license": "MIT",
-  "devDependencies": {},
-  "dependencies": {}
-}
diff --git a/web/polygon-editing-demo.html b/web/polygon-editing-demo.html
deleted file mode 100644
index d20117b..0000000
--- a/web/polygon-editing-demo.html
+++ /dev/null
@@ -1,222 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SAT Annotator - Polygon Editing Test</title>
-    <link rel="stylesheet" href="styles.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-</head>
-<body>
-    <div class="app-container">
-        <!-- Header -->
-        <header class="header">
-            <div class="header-content">
-                <div class="logo">
-                    <i class="fas fa-satellite"></i>
-                    <h1>SAT Annotator - Polygon Editing Enabled</h1>
-                </div>
-                <div class="header-actions">
-                    <button id="mobileMenuBtn" class="btn btn-secondary mobile-only">
-                        <i class="fas fa-bars"></i>
-                        Menu
-                    </button>
-                    <button id="exportBtn" class="btn btn-secondary" disabled>
-                        <i class="fas fa-download"></i>
-                        Export JSON
-                    </button>
-                    <button id="clearAnnotations" class="btn btn-danger" disabled>
-                        <i class="fas fa-trash"></i>
-                        Clear All
-                    </button>
-                </div>
-            </div>
-        </header>
-
-        <!-- Main Content -->
-        <div class="main-content">
-            <!-- Sidebar Overlay for Mobile -->
-            <div class="sidebar-overlay" id="sidebarOverlay"></div>
-            
-            <!-- Sidebar -->
-            <aside class="sidebar" id="sidebar">
-                <div class="sidebar-section">
-                    <h3><i class="fas fa-upload"></i> Upload Image</h3>
-                    <div class="upload-area" id="uploadArea">
-                        <div class="upload-content">
-                            <i class="fas fa-cloud-upload-alt"></i>
-                            <p>Drop satellite image here or click to browse</p>
-                            <span class="file-types">Supports: JPG, PNG, TIFF, GeoTIFF</span>
-                        </div>
-                        <input type="file" id="fileInput" accept=".jpg,.jpeg,.png,.tiff,.tif,.geotiff" hidden>
-                    </div>
-                </div>
-
-                <div class="sidebar-section">
-                    <h3><i class="fas fa-images"></i> Images</h3>
-                    <div class="images-list" id="imagesList">
-                        <div class="no-images">
-                            <i class="fas fa-image"></i>
-                            <p>No images uploaded yet</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="sidebar-section">
-                    <h3><i class="fas fa-tools"></i> Annotation Tools</h3>
-                    <div class="tools-grid">
-                        <button class="tool-btn active" id="selectTool" data-tool="select">
-                            <i class="fas fa-mouse-pointer"></i>
-                            <span>Select</span>
-                        </button>
-                        <button class="tool-btn" id="pointTool" data-tool="point">
-                            <i class="fas fa-crosshairs"></i>
-                            <span>AI Segment</span>
-                        </button>
-                        <button class="tool-btn" id="polygonTool" data-tool="polygon">
-                            <i class="fas fa-draw-polygon"></i>
-                            <span>Draw Polygon</span>
-                        </button>
-                        <button class="tool-btn" id="panTool" data-tool="pan">
-                            <i class="fas fa-hand-paper"></i>
-                            <span>Pan</span>
-                        </button>
-                    </div>
-                    
-                    <!-- Polygon Editing Instructions -->
-                    <div class="editing-instructions" style="margin-top: 1rem; padding: 0.75rem; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 0.5rem; font-size: 0.75rem; color: #0369a1;">
-                        <strong>Polygon Editing:</strong><br>
-                        • Click polygon → Start editing<br>
-                        • Drag vertices → Move points<br>
-                        • Click edges → Add new vertex<br>
-                        • Right-click vertex → Delete<br>
-                        • Press ESC → Exit editing<br>
-                        • Press Enter → Finish editing
-                    </div>
-                </div>
-
-                <div class="sidebar-section">
-                    <h3><i class="fas fa-tags"></i> Labels</h3>
-                    <div class="labels-section">
-                        <div class="active-label">
-                            <label>Current Label:</label>
-                            <span id="currentLabel" class="current-label-display">building</span>
-                        </div>
-                        <div class="label-list" id="labelList">
-                            <button class="label-btn active default-label" data-label="building">
-                                <i class="fas fa-building"></i>
-                                <span>Building</span>
-                            </button>
-                            <button class="label-btn default-label" data-label="road">
-                                <i class="fas fa-road"></i>
-                                <span>Road</span>
-                            </button>
-                            <button class="label-btn default-label" data-label="vegetation">
-                                <i class="fas fa-tree"></i>
-                                <span>Vegetation</span>
-                            </button>
-                            <button class="label-btn default-label" data-label="water">
-                                <i class="fas fa-water"></i>
-                                <span>Water</span>
-                            </button>
-                            <button class="label-btn default-label" data-label="parking">
-                                <i class="fas fa-parking"></i>
-                                <span>Parking</span>
-                            </button>
-                        </div>
-                        <div class="custom-label-input">
-                            <input type="text" id="customLabelInput" placeholder="Add custom label..." maxlength="20">
-                            <button id="addCustomLabel" class="btn btn-small">
-                                <i class="fas fa-plus"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="sidebar-section">
-                    <h3><i class="fas fa-layer-group"></i> Annotations</h3>
-                    <div class="annotations-list" id="annotationsList">
-                        <div class="no-annotations">
-                            <i class="fas fa-shapes"></i>
-                            <p>No annotations yet</p>
-                        </div>
-                    </div>
-                </div>
-            </aside>
-
-            <!-- Main Canvas Area -->
-            <main class="canvas-container">
-                <div class="canvas-wrapper" id="canvasWrapper">
-                    <div class="canvas-placeholder">
-                        <i class="fas fa-satellite-dish"></i>
-                        <h2>Welcome to SAT Annotator</h2>
-                        <p>Upload a satellite image to start annotating</p>
-                        <p style="margin-top: 1rem; color: #10b981; font-weight: 600;">✨ Polygon editing now enabled! ✨</p>
-                    </div>
-                    <canvas id="mainCanvas"></canvas>
-                </div>
-
-                <!-- Canvas Controls -->
-                <div class="canvas-controls">
-                    <div class="zoom-controls">
-                        <button id="zoomIn" class="control-btn">
-                            <i class="fas fa-plus"></i>
-                        </button>
-                        <span id="zoomLevel">100%</span>
-                        <button id="zoomOut" class="control-btn">
-                            <i class="fas fa-minus"></i>
-                        </button>
-                        <button id="fitToScreen" class="control-btn">
-                            <i class="fas fa-expand-arrows-alt"></i>
-                        </button>
-                    </div>
-                    <div class="mouse-coords">
-                        <span id="mouseCoords">x: 0, y: 0</span>
-                    </div>
-                </div>
-            </main>
-        </div>
-    </div>
-
-    <!-- Loading Overlay -->
-    <div id="loadingOverlay" class="loading-overlay" hidden>
-        <div class="loading-spinner">
-            <div class="spinner"></div>
-            <p id="loadingText">Loading...</p>
-        </div>
-    </div>
-
-    <!-- Toast Notifications -->
-    <div id="toastContainer" class="toast-container"></div>
-
-    <!-- Context Menu -->
-    <div id="contextMenu" class="context-menu" hidden>
-        <button id="editAnnotation">
-            <i class="fas fa-edit"></i>
-            Edit Label
-        </button>
-        <button id="deleteAnnotation">
-            <i class="fas fa-trash"></i>
-            Delete
-        </button>
-    </div>
-
-    <!-- Scripts -->
-    <script src="js/utils.js"></script>
-    <script src="js/api.js"></script>
-    <script src="js/canvas.js"></script>
-    <script src="js/annotations.js"></script>
-    <script src="js/app.js"></script>
-    <script>
-        // Initialize application when DOM is loaded
-        document.addEventListener('DOMContentLoaded', async () => {
-            console.log('DOM loaded, initializing SAT Annotator...');
-            const app = new SATAnnotator();
-            await app.initialize();
-        });
-    </script>
-</body>
-</html>
diff --git a/web/styles.css b/web/styles.css
index 583414b..9f068b3 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -5,11 +5,21 @@
     box-sizing: border-box;
 }
 
+/* Global performance optimizations */
+*,
+*::before,
+*::after {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background-color: #f8fafc;
     color: #334155;
     overflow: hidden;
+    transform: translateZ(0); /* Force GPU acceleration */
+    will-change: scroll-position;
 }
 
 /* App Container */
@@ -65,8 +75,11 @@ body {
     font-size: 0.875rem;
     font-weight: 500;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
+                background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
     text-decoration: none;
+    will-change: transform, background-color;
+    transform: translateZ(0); /* Force GPU acceleration */
 }
 
 .btn:disabled {
@@ -81,6 +94,7 @@ body {
 
 .btn-primary:hover:not(:disabled) {
     background-color: #2563eb;
+    transform: translateY(-1px) translateZ(0);
 }
 
 .btn-secondary {
@@ -91,6 +105,7 @@ body {
 
 .btn-secondary:hover:not(:disabled) {
     background-color: rgba(255, 255, 255, 0.3);
+    transform: translateY(-1px) translateZ(0);
 }
 
 .btn-danger {
@@ -319,19 +334,25 @@ body {
     border-radius: 0.5rem;
     background: white;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
+                border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+                background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
     font-size: 0.75rem;
+    will-change: transform, border-color, background-color;
+    transform: translateZ(0);
 }
 
 .tool-btn:hover {
     border-color: #cbd5e1;
     background: #f8fafc;
+    transform: translateY(-1px) translateZ(0);
 }
 
 .tool-btn.active {
     border-color: #3b82f6;
     background: #dbeafe;
     color: #1d4ed8;
+    transform: translateZ(0);
 }
 
 .tool-btn i {
@@ -692,6 +713,8 @@ body {
     position: relative;
     background: #f1f5f9;
     overflow: hidden;
+    will-change: scroll-position;
+    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
 }
 
 .canvas-placeholder {
@@ -724,6 +747,9 @@ body {
     left: 0;
     width: 100%;
     height: 100%;
+    will-change: transform;
+    transform: translateZ(0); /* Force GPU acceleration */
+    image-rendering: crisp-edges; /* Better image quality for satellite data */
 }
 
 /* Canvas Controls */
@@ -830,6 +856,7 @@ body {
     top: 80px;
     right: 1rem;
     z-index: 10000;
+    pointer-events: none;
 }
 
 .toast {
@@ -839,8 +866,11 @@ body {
     padding: 1rem;
     margin-bottom: 0.5rem;
     border-left: 4px solid;
-    animation: slideIn 0.3s ease;
+    animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     max-width: 350px;
+    will-change: transform, opacity;
+    transform: translateZ(0); /* Force GPU acceleration */
+    pointer-events: auto;
 }
 
 .toast.success {
@@ -855,15 +885,30 @@ body {
     border-left-color: #f59e0b;
 }
 
+.toast.info {
+    border-left-color: #3b82f6;
+}
+
 @keyframes slideIn {
     from {
-        transform: translateX(100%);
+        transform: translate3d(100%, 0, 0);
         opacity: 0;
     }
     to {
-        transform: translateX(0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOut {
+    from {
+        transform: translate3d(0, 0, 0);
         opacity: 1;
     }
+    to {
+        transform: translate3d(100%, 0, 0);
+        opacity: 0;
+    }
 }
 
 /* Context Menu */
@@ -909,6 +954,9 @@ body {
     align-items: center;
     justify-content: center;
     z-index: 10000;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    will-change: opacity;
 }
 
 .modal-content {
@@ -917,6 +965,8 @@ body {
     width: 90%;
     max-width: 400px;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    will-change: transform;
+    transform: translateZ(0);
 }
 
 .modal-header {
@@ -1073,7 +1123,7 @@ body {
 
 .progress-bar-container.show {
   display: block;
-  animation: slideIn 0.3s ease-out;
+  animation: slideIn 0.2s ease-out;  /* Reduced from 0.3s for faster response */
 }
 
 @keyframes slideIn {
@@ -1099,7 +1149,7 @@ body {
 .progress-bar {
   height: 100%;
   background: linear-gradient(90deg, #4f8cff 0%, #38e6c5 100%);
-  transition: width 0.3s ease;
+  transition: width 0.15s ease;  /* Reduced from 0.3s for snappier response */
   border-radius: 4px;
   box-shadow: 0 0 10px rgba(79, 140, 255, 0.3);
 }
diff --git a/web/test-loading.html b/web/test-loading.html
deleted file mode 100644
index ed98ccf..0000000
--- a/web/test-loading.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Loading Test</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <h1>Loading Overlay Test</h1>
-    <button onclick="showTest()">Show Loading</button>
-    <button onclick="hideTest()">Hide Loading</button>
-    <button onclick="checkState()">Check State</button>
-    
-    <div id="status" style="margin: 20px 0; padding: 10px; background: #f0f0f0;"></div>
-
-    <!-- Loading Overlay -->
-    <div class="loading-overlay" id="loadingOverlay" hidden>
-        <div class="loading-content">
-            <div class="spinner"></div>
-            <p id="loadingText">Processing...</p>
-        </div>
-    </div>
-
-    <script src="js/utils.js"></script>
-    <script>
-        function showTest() {
-            console.log('Manual show test');
-            Utils.showLoading('Test loading...');
-            updateStatus();
-        }
-        
-        function hideTest() {
-            console.log('Manual hide test');
-            Utils.hideLoading();
-            updateStatus();
-        }
-        
-        function checkState() {
-            updateStatus();
-        }
-        
-        function updateStatus() {
-            const overlay = document.getElementById('loadingOverlay');
-            const status = document.getElementById('status');
-            const computedStyle = window.getComputedStyle(overlay);
-            
-            status.innerHTML = `
-                <strong>Overlay State:</strong><br>
-                Display style: ${overlay.style.display}<br>
-                Hidden attribute: ${overlay.hidden}<br>
-                Computed display: ${computedStyle.display}<br>
-                Visible: ${computedStyle.display !== 'none'}
-            `;
-        }
-        
-        // Initial state check
-        window.addEventListener('load', updateStatus);
-    </script>
-</body>
-</html>