Deploy Pathora Viewer: tile server, viewer components, and root app.py

.gitignore

@@ -1,18 +1,19 @@
-# Ignore generated outputs and binaries
-backend/outputs/
-
-# Node / frontend build artefacts (kept for safety alongside frontend/.gitignore)
-node_modules/
-dist/
-dist-ssr/
-
-# Python cache
-__pycache__/
-*.py[cod]
-
-# Jupyter
-.ipynb_checkpoints/
-
-# OS files
-.DS_Store
-Thumbs.db
+# Ignore generated outputs and binaries
+backend/outputs/
+backend/tile_server/data/uploads/
+
+# Node / frontend build artefacts (kept for safety alongside frontend/.gitignore)
+node_modules/
+dist/
+dist-ssr/
+
+# Python cache
+__pycache__/
+*.py[cod]
+
+# Jupyter
+.ipynb_checkpoints/
+
+# OS files
+.DS_Store
+Thumbs.db

Dockerfile

@@ -1,43 +1,43 @@
-# -----------------------------
-# 1️⃣ Build Frontend (cache-bust 2025-12-31)
-# -----------------------------
-FROM node:18-bullseye AS frontend-builder
-WORKDIR /app/frontend
-COPY frontend/package*.json ./
-RUN npm install
-COPY frontend/ .
-RUN npm run build
-
-# -----------------------------
-# 2️⃣ Build Backend
-# -----------------------------
-FROM python:3.10-slim-bullseye
-
-WORKDIR /app
-
-# Install essential system libraries for OpenCV, YOLO, and Ultralytics
-RUN apt-get update && apt-get install -y \
-    libgl1 \
-    libglib2.0-0 \
-    libgomp1 \
- && apt-get clean && rm -rf /var/lib/apt/lists/*
-
-# Copy backend source code
-COPY backend/ .
-
-# Copy built frontend into the right folder for FastAPI
-# ✅ this must match your app.mount() path in app.py
-COPY --from=frontend-builder /app/frontend/dist ./frontend/dist
-
-# Install Python dependencies
-RUN pip install --upgrade pip
-RUN pip install -r requirements.txt || pip install -r backend/requirements.txt || true
-
-# Install runtime dependencies explicitly
-RUN pip install --no-cache-dir fastapi uvicorn python-multipart ultralytics opencv-python-headless pillow numpy scikit-learn tensorflow keras
-
-# Hugging Face Spaces sets PORT (default 7860). Listen on $PORT for compatibility.
-EXPOSE 7860
-
-# Run FastAPI app (respect PORT env var if set by the platform)
-CMD ["sh", "-c", "uvicorn app:app --host 0.0.0.0 --port ${PORT:-7860}"]
+# -----------------------------
+# 1️⃣ Build Frontend (cache-bust 2025-12-31)
+# -----------------------------
+FROM node:18-bullseye AS frontend-builder
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+RUN npm install
+COPY frontend/ .
+RUN npm run build
+
+# -----------------------------
+# 2️⃣ Build Backend
+# -----------------------------
+FROM python:3.10-slim-bullseye
+
+WORKDIR /app
+
+# Install essential system libraries for OpenCV, YOLO, and Ultralytics
+RUN apt-get update && apt-get install -y \
+    libgl1 \
+    libglib2.0-0 \
+    libgomp1 \
+ && apt-get clean && rm -rf /var/lib/apt/lists/*
+
+# Copy backend source code
+COPY backend/ .
+
+# Copy built frontend into the right folder for FastAPI
+# ✅ this must match your app.mount() path in app.py
+COPY --from=frontend-builder /app/frontend/dist ./frontend/dist
+
+# Install Python dependencies
+RUN pip install --upgrade pip
+RUN pip install -r requirements.txt || pip install -r backend/requirements.txt || true
+
+# Install runtime dependencies explicitly
+RUN pip install --no-cache-dir fastapi uvicorn python-multipart ultralytics opencv-python-headless pillow numpy scikit-learn tensorflow keras
+
+# Hugging Face Spaces sets PORT (default 7860). Listen on $PORT for compatibility.
+EXPOSE 7860
+
+# Run FastAPI app (respect PORT env var if set by the platform)
+CMD ["sh", "-c", "uvicorn app:app --host 0.0.0.0 --port ${PORT:-7860}"]

HUGGINGFACE_DEPLOYMENT.md

@@ -1,216 +1,216 @@
-# Hugging Face Spaces Deployment Guide
-
-## ✅ Changes Made for Hugging Face Spaces Compatibility
-
-### 1. Port Configuration
-- **Updated `backend/app.py`**: Server now reads `PORT` from environment variable (default: 7860)
-  ```python
-  port = int(os.environ.get("PORT", 7860))
-  uvicorn.run(app, host="0.0.0.0", port=port)
-  ```
-- **Updated `Dockerfile`**: CMD uses `${PORT:-7860}` for dynamic port binding
-
-### 2. Filesystem Permissions
-- **Changed output directory**: `OUTPUT_DIR` now uses `/tmp/outputs` instead of `./outputs`
-  - Hugging Face Spaces containers have read-only `/app` directory
-  - `/tmp` is writable for temporary files
-  - **Note**: Files in `/tmp` are ephemeral and lost on restart
-
-### 3. Static File Serving
-- **Fixed sample image serving**: Mounted `/cyto`, `/colpo`, `/histo` directories from `frontend/dist`
-- **Added catch-all route**: Serves static files (logos, banners) from dist root
-- **Frontend dist path fallback**: Checks both `./frontend/dist` (Docker) and `../frontend/dist` (local dev)
-
-### 4. Frontend Configuration
-- **Frontend already configured**: Uses `window.location.origin` in production, so API calls work on any domain
-- **Vite build**: Copies `public/` contents to `dist/` automatically
-
----
-
-## 📋 Deployment Checklist
-
-### Step 1: Create Hugging Face Space
-1. Go to https://huggingface.co/spaces
-2. Click **"Create new Space"**
-3. Choose:
-   - **Space SDK**: Docker
-   - **Hardware**: CPU Basic (free) or GPU (for faster inference)
-   - **Visibility**: Public or Private
-
-### Step 2: Set Up Git LFS (for large model files)
-Your project has large model files (`.pt`, `.pth`, `.keras`). Track them with Git LFS:
-
-```bash
-# Install Git LFS if not already installed
-git lfs install
-
-# Track model files
-git lfs track "*.pt"
-git lfs track "*.pth"
-git lfs track "*.keras"
-git lfs track "*.pkl"
-
-# Commit .gitattributes
-git add .gitattributes
-git commit -m "Track model files with Git LFS"
-```
-
-### Step 3: Configure Secrets (Optional)
-If you want AI-generated summaries using Mistral, add a secret:
-
-1. Go to Space Settings → Variables and secrets
-2. Add new secret:
-   - Name: `HF_TOKEN`
-   - Value: Your Hugging Face token (from https://huggingface.co/settings/tokens)
-
-### Step 4: Push Code to Space
-```bash
-# Add Space as remote
-git remote add space https://huggingface.co/spaces/<YOUR_USERNAME>/<SPACE_NAME>
-
-# Push to Space
-git push space main
-```
-
-### Step 5: Monitor Build
-- Hugging Face will build the Docker image (this may take 10-20 minutes)
-- Watch logs in the Space's "Logs" tab
-- Once built, the Space will automatically start
-
----
-
-## 🔍 Troubleshooting
-
-### Build Issues
-
-**Problem**: Docker build times out or fails
-- **Solution**: Reduce image size by pinning lighter dependencies in `requirements.txt`
-- **Solution**: Consider using pre-built wheels for TensorFlow/PyTorch
-
-**Problem**: Model files not found
-- **Solution**: Ensure Git LFS is configured and model files are committed
-- **Solution**: Check that model paths in `backend/app.py` match actual filenames
-
-### Runtime Issues
-
-**Problem**: 404 errors for sample images
-- **Solution**: Rebuild frontend: `cd frontend && npm run build`
-- **Solution**: Verify `frontend/public/` contents are copied to `dist/`
-
-**Problem**: Permission denied errors
-- **Solution**: All writes should go to `/tmp/outputs` (already fixed)
-- **Solution**: Never write to `/app` directory
-
-**Problem**: Port binding errors
-- **Solution**: Use `$PORT` env var (already configured in Dockerfile and app.py)
-
-### Performance Issues
-
-**Problem**: Slow startup or inference
-- **Solution**: Models load at startup; consider lazy loading on first request
-- **Solution**: Upgrade to GPU hardware tier for faster inference
-- **Solution**: Add caching for model weights
-
----
-
-## 📁 File Structure Expected in Space
-
-```
-/app/
-├── app.py                              # Main FastAPI app
-├── model.py, model_histo.py, etc.     # Model definitions
-├── augmentations.py                    # Image preprocessing
-├── requirements.txt                    # Python dependencies
-├── best2.pt                           # YOLO cytology model
-├── MWTclass2.pth                      # MWT classifier
-├── yolo_colposcopy.pt                 # YOLO colposcopy model
-├── histopathology_trained_model.keras # Histopathology model
-├── logistic_regression_model.pkl      # CIN classifier (optional)
-└── frontend/
-    └── dist/                          # Built frontend
-        ├── index.html
-        ├── assets/                    # JS/CSS bundles
-        ├── cyto/                      # Sample cytology images
-        ├── colpo/                     # Sample colposcopy images
-        ├── histo/                     # Sample histopathology images
-        └── *.png, *.jpeg              # Logos, banners
-```
-
----
-
-## 🌐 Access Your Space
-
-Once deployed, your app will be available at:
-```
-https://huggingface.co/spaces/<YOUR_USERNAME>/<SPACE_NAME>
-```
-
-The frontend serves at `/` and the API is accessible at:
-- `POST /predict/` - Run model inference
-- `POST /reports/` - Generate medical reports
-- `GET /health` - Health check
-- `GET /models` - List available models
-
----
-
-## ⚠️ Important Notes
-
-### Ephemeral Storage
-- Files in `/tmp/outputs` are **lost on restart**
-- For persistent reports, consider:
-  - Downloading immediately after generation
-  - Uploading to external storage (S3, Hugging Face Datasets)
-  - Using Persistent Storage (requires paid tier)
-
-### Model Loading Time
-- All models load at startup (~30-60 seconds)
-- First request after restart may be slower
-- Consider implementing health check endpoint that waits for models
-
-### Resource Limits
-- Free CPU tier: Limited RAM and CPU
-- Models are memory-intensive (TensorFlow + PyTorch + YOLO)
-- May need **CPU Upgrade** or **GPU** tier for production use
-
-### CORS
-- Currently allows all origins (`allow_origins=["*"]`)
-- For production, restrict to your Space domain
-
----
-
-## 🚀 Next Steps After Deployment
-
-1. **Test all three models**:
-   - Upload cytology sample → Test YOLO detection
-   - Upload colposcopy sample → Test CIN classification
-   - Upload histopathology sample → Test breast cancer classification
-
-2. **Generate a test report**:
-   - Run an analysis
-   - Fill out patient metadata
-   - Generate HTML/PDF report
-   - Verify download links work
-
-3. **Monitor performance**:
-   - Check inference times
-   - Monitor memory usage in Space logs
-   - Consider upgrading hardware if needed
-
-4. **Share your Space**:
-   - Add a README with usage instructions
-   - Include sample images in the repo
-   - Add citations for model papers
-
----
-
-## 📞 Support
-
-If you encounter issues:
-1. Check Space logs: Settings → Logs
-2. Verify all model files are present: Settings → Files
-3. Test locally with Docker: `docker build -t pathora . && docker run -p 7860:7860 pathora`
-4. Open an issue on Hugging Face Discuss: https://discuss.huggingface.co/
-
----
-
-**Deployment ready! 🎉**
+# Hugging Face Spaces Deployment Guide
+
+## ✅ Changes Made for Hugging Face Spaces Compatibility
+
+### 1. Port Configuration
+- **Updated `backend/app.py`**: Server now reads `PORT` from environment variable (default: 7860)
+  ```python
+  port = int(os.environ.get("PORT", 7860))
+  uvicorn.run(app, host="0.0.0.0", port=port)
+  ```
+- **Updated `Dockerfile`**: CMD uses `${PORT:-7860}` for dynamic port binding
+
+### 2. Filesystem Permissions
+- **Changed output directory**: `OUTPUT_DIR` now uses `/tmp/outputs` instead of `./outputs`
+  - Hugging Face Spaces containers have read-only `/app` directory
+  - `/tmp` is writable for temporary files
+  - **Note**: Files in `/tmp` are ephemeral and lost on restart
+
+### 3. Static File Serving
+- **Fixed sample image serving**: Mounted `/cyto`, `/colpo`, `/histo` directories from `frontend/dist`
+- **Added catch-all route**: Serves static files (logos, banners) from dist root
+- **Frontend dist path fallback**: Checks both `./frontend/dist` (Docker) and `../frontend/dist` (local dev)
+
+### 4. Frontend Configuration
+- **Frontend already configured**: Uses `window.location.origin` in production, so API calls work on any domain
+- **Vite build**: Copies `public/` contents to `dist/` automatically
+
+---
+
+## 📋 Deployment Checklist
+
+### Step 1: Create Hugging Face Space
+1. Go to https://huggingface.co/spaces
+2. Click **"Create new Space"**
+3. Choose:
+   - **Space SDK**: Docker
+   - **Hardware**: CPU Basic (free) or GPU (for faster inference)
+   - **Visibility**: Public or Private
+
+### Step 2: Set Up Git LFS (for large model files)
+Your project has large model files (`.pt`, `.pth`, `.keras`). Track them with Git LFS:
+
+```bash
+# Install Git LFS if not already installed
+git lfs install
+
+# Track model files
+git lfs track "*.pt"
+git lfs track "*.pth"
+git lfs track "*.keras"
+git lfs track "*.pkl"
+
+# Commit .gitattributes
+git add .gitattributes
+git commit -m "Track model files with Git LFS"
+```
+
+### Step 3: Configure Secrets (Optional)
+If you want AI-generated summaries using Mistral, add a secret:
+
+1. Go to Space Settings → Variables and secrets
+2. Add new secret:
+   - Name: `HF_TOKEN`
+   - Value: Your Hugging Face token (from https://huggingface.co/settings/tokens)
+
+### Step 4: Push Code to Space
+```bash
+# Add Space as remote
+git remote add space https://huggingface.co/spaces/<YOUR_USERNAME>/<SPACE_NAME>
+
+# Push to Space
+git push space main
+```
+
+### Step 5: Monitor Build
+- Hugging Face will build the Docker image (this may take 10-20 minutes)
+- Watch logs in the Space's "Logs" tab
+- Once built, the Space will automatically start
+
+---
+
+## 🔍 Troubleshooting
+
+### Build Issues
+
+**Problem**: Docker build times out or fails
+- **Solution**: Reduce image size by pinning lighter dependencies in `requirements.txt`
+- **Solution**: Consider using pre-built wheels for TensorFlow/PyTorch
+
+**Problem**: Model files not found
+- **Solution**: Ensure Git LFS is configured and model files are committed
+- **Solution**: Check that model paths in `backend/app.py` match actual filenames
+
+### Runtime Issues
+
+**Problem**: 404 errors for sample images
+- **Solution**: Rebuild frontend: `cd frontend && npm run build`
+- **Solution**: Verify `frontend/public/` contents are copied to `dist/`
+
+**Problem**: Permission denied errors
+- **Solution**: All writes should go to `/tmp/outputs` (already fixed)
+- **Solution**: Never write to `/app` directory
+
+**Problem**: Port binding errors
+- **Solution**: Use `$PORT` env var (already configured in Dockerfile and app.py)
+
+### Performance Issues
+
+**Problem**: Slow startup or inference
+- **Solution**: Models load at startup; consider lazy loading on first request
+- **Solution**: Upgrade to GPU hardware tier for faster inference
+- **Solution**: Add caching for model weights
+
+---
+
+## 📁 File Structure Expected in Space
+
+```
+/app/
+├── app.py                              # Main FastAPI app
+├── model.py, model_histo.py, etc.     # Model definitions
+├── augmentations.py                    # Image preprocessing
+├── requirements.txt                    # Python dependencies
+├── best2.pt                           # YOLO cytology model
+├── MWTclass2.pth                      # MWT classifier
+├── yolo_colposcopy.pt                 # YOLO colposcopy model
+├── histopathology_trained_model.keras # Histopathology model
+├── logistic_regression_model.pkl      # CIN classifier (optional)
+└── frontend/
+    └── dist/                          # Built frontend
+        ├── index.html
+        ├── assets/                    # JS/CSS bundles
+        ├── cyto/                      # Sample cytology images
+        ├── colpo/                     # Sample colposcopy images
+        ├── histo/                     # Sample histopathology images
+        └── *.png, *.jpeg              # Logos, banners
+```
+
+---
+
+## 🌐 Access Your Space
+
+Once deployed, your app will be available at:
+```
+https://huggingface.co/spaces/<YOUR_USERNAME>/<SPACE_NAME>
+```
+
+The frontend serves at `/` and the API is accessible at:
+- `POST /predict/` - Run model inference
+- `POST /reports/` - Generate medical reports
+- `GET /health` - Health check
+- `GET /models` - List available models
+
+---
+
+## ⚠️ Important Notes
+
+### Ephemeral Storage
+- Files in `/tmp/outputs` are **lost on restart**
+- For persistent reports, consider:
+  - Downloading immediately after generation
+  - Uploading to external storage (S3, Hugging Face Datasets)
+  - Using Persistent Storage (requires paid tier)
+
+### Model Loading Time
+- All models load at startup (~30-60 seconds)
+- First request after restart may be slower
+- Consider implementing health check endpoint that waits for models
+
+### Resource Limits
+- Free CPU tier: Limited RAM and CPU
+- Models are memory-intensive (TensorFlow + PyTorch + YOLO)
+- May need **CPU Upgrade** or **GPU** tier for production use
+
+### CORS
+- Currently allows all origins (`allow_origins=["*"]`)
+- For production, restrict to your Space domain
+
+---
+
+## 🚀 Next Steps After Deployment
+
+1. **Test all three models**:
+   - Upload cytology sample → Test YOLO detection
+   - Upload colposcopy sample → Test CIN classification
+   - Upload histopathology sample → Test breast cancer classification
+
+2. **Generate a test report**:
+   - Run an analysis
+   - Fill out patient metadata
+   - Generate HTML/PDF report
+   - Verify download links work
+
+3. **Monitor performance**:
+   - Check inference times
+   - Monitor memory usage in Space logs
+   - Consider upgrading hardware if needed
+
+4. **Share your Space**:
+   - Add a README with usage instructions
+   - Include sample images in the repo
+   - Add citations for model papers
+
+---
+
+## 📞 Support
+
+If you encounter issues:
+1. Check Space logs: Settings → Logs
+2. Verify all model files are present: Settings → Files
+3. Test locally with Docker: `docker build -t pathora . && docker run -p 7860:7860 pathora`
+4. Open an issue on Hugging Face Discuss: https://discuss.huggingface.co/
+
+---
+
+**Deployment ready! 🎉**

PATHORA_VIEWER_README.md

@@ -0,0 +1,156 @@
+# Pathora Viewer - Whole Slide Image Viewer
+
+A QuPath-inspired web-based image viewer built with OpenSeadragon for viewing and annotating pathology slides.
+
+## Features
+
+### Layout
+- **Left Sidebar**: Tool palette with interactive buttons
+- **Central Viewer**: OpenSeadragon-powered image viewer with deep zoom capabilities
+- **Top Toolbar**: Slide information, zoom controls, and overlay toggles
+- **Navigator**: Minimap in bottom-right corner for quick navigation
+
+### Tools
+1. **Select Tool**: Click to select and interact with annotations
+2. **Pan Tool**: Navigate around the slide (default)
+3. **Rectangle Tool**: Draw rectangular regions of interest
+4. **Polygon Tool**: Draw freeform polygonal annotations
+
+### Toolbar Features
+- **Slide Name**: Displays the current slide being viewed
+- **Zoom Level**: Real-time zoom indicator (e.g., 1.50x)
+- **Reset View**: Return to the home/default view
+- **Zoom In/Out**: Buttons to control magnification
+- **Annotations Toggle**: Show/hide annotation overlays
+- **Heatmap Toggle**: Show/hide AI-generated heatmap overlays
+
+### Navigation
+- **Pan**: Click and drag with pan tool or middle mouse button
+- **Zoom**: Mouse wheel or zoom buttons
+- **Double-click**: Quick zoom to clicked area
+- **Navigator**: Click minimap to jump to location
+
+## Technical Details
+
+### Technologies Used
+- **React**: Component-based UI framework
+- **TypeScript**: Type-safe development
+- **OpenSeadragon**: Deep zoom image viewer
+- **Tailwind CSS**: Modern, responsive styling
+- **Lucide React**: Clean, consistent icons
+- **React Router**: Client-side routing
+
+### Component Structure
+```
+viewer/
+├── PathoraViewer.tsx      # Main viewer component
+├── ToolsSidebar.tsx       # Left tool palette
+├── TopToolbar.tsx         # Top control bar
+├── viewer.css             # Custom styles
+└── index.ts               # Exports
+```
+
+### OpenSeadragon Configuration
+- **Deep Zoom**: Supports multi-resolution tile pyramids
+- **Navigator**: Enabled with custom styling
+- **Constraints**: Prevents panning outside image bounds
+- **Gestures**: Customized mouse interactions
+
+## Usage
+
+### Accessing the Viewer
+1. From the main dashboard, click **"Pathora Viewer"** in the sidebar
+2. Or navigate directly to `/viewer` route
+
+### Basic Workflow
+1. **Open a slide**: Currently loads sample images (can be extended to file upload)
+2. **Select a tool**: Click a tool button in the left sidebar
+3. **Interact with the image**:
+   - Use pan tool to navigate
+   - Use drawing tools to annotate regions
+4. **Adjust overlays**: Toggle annotations and heatmap as needed
+5. **Reset view**: Click "Reset View" to return to starting position
+
+### Keyboard Shortcuts (Future Enhancement)
+- `Space + Drag`: Temporary pan
+- `+/-`: Zoom in/out
+- `H`: Toggle heatmap
+- `A`: Toggle annotations
+- `Esc`: Deselect tool
+
+## Customization
+
+### Loading Custom Images
+Edit the `PathoraViewer` component props:
+```tsx
+<PathoraViewer 
+  imageUrl="/path/to/your/image.jpg"
+  slideName="Your Slide Name.svs"
+/>
+```
+
+### Adding Deep Zoom Tiles
+For large whole slide images, use DZI (Deep Zoom Image) format:
+```tsx
+tileSources: {
+  type: "image",
+  url: "/path/to/image.dzi"
+}
+```
+
+### Styling
+Modify colors and appearance in:
+- `viewer.css`: OpenSeadragon-specific styles
+- Component files: Tailwind classes for UI elements
+
+## Future Enhancements
+
+### Planned Features
+- [ ] File upload for custom slides
+- [ ] Persistent annotation storage
+- [ ] Measurement tools (ruler, area)
+- [ ] Annotation export (JSON, GeoJSON)
+- [ ] Collaborative viewing/annotations
+- [ ] AI model integration for auto-annotation
+- [ ] Multi-channel fluorescence support
+- [ ] Z-stack navigation for 3D images
+- [ ] Annotation categories/classification
+- [ ] Export annotated regions as images
+
+### Advanced Features
+- [ ] Integration with DICOM WSI
+- [ ] Server-side tile generation
+- [ ] Real-time collaboration
+- [ ] Pathologist reporting tools
+- [ ] Machine learning overlay visualization
+- [ ] Comparison mode (side-by-side slides)
+
+## Medical Imaging Standards
+
+The viewer is designed with pathology workflows in mind:
+- Compatible with common WSI formats (SVS, NDPI, TIFF)
+- Optimized for high-resolution microscopy images
+- Follows QuPath-inspired UX patterns familiar to pathologists
+
+## Development
+
+### Running the Viewer
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+Navigate to `http://localhost:5173/viewer`
+
+### Building for Production
+```bash
+npm run build
+```
+
+## License
+Part of the Pathora medical imaging platform.
+
+---
+
+**Note**: This viewer is designed for research and educational purposes. For clinical diagnostic use, ensure compliance with relevant medical device regulations and standards.

app.py

@@ -0,0 +1,9 @@
+"""
+Root-level FastAPI app entry point for Hugging Face Spaces
+Imports and re-exports the tile server app from backend
+"""
+
+from backend.app import app
+
+# This ensures uvicorn can find and run the app
+__all__ = ["app"]

backend/requirements.txt

@@ -1,14 +1,15 @@
-fastapi
-uvicorn
-pillow
-ultralytics
-tensorflow
-numpy
-huggingface_hub
-joblib  
-scikit-learn
-scikit-image
-loguru
-thop
-seaborn
-python-multipart
+fastapi
+uvicorn
+pillow
+openslide-python
+ultralytics
+tensorflow
+numpy
+huggingface_hub
+joblib  
+scikit-learn
+scikit-image
+loguru
+thop
+seaborn
+python-multipart

backend//tile_server//README.md

@@ -0,0 +1,16 @@
+Tile Server (OpenSlide + FastAPI)
+
+Run:
+  pip install -r requirements.txt
+  uvicorn app.main:app --reload --port 8001
+
+Endpoints:
+  POST /slides/{slide_id}/load
+    Body: {"path": "C:/path/to/slide.svs"}
+
+  POST /slides/{slide_id}/upload
+    Form-data: file=<your slide.svs>
+
+  GET /slides/{slide_id}/metadata
+
+  GET /tiles/{slide_id}/{level}/{x}/{y}.jpg?tile_size=256

backend//tile_server//app//api//routes.py

@@ -0,0 +1,143 @@
+import os
+import shutil
+from pathlib import Path
+
+from fastapi import APIRouter, HTTPException, Query, UploadFile, File
+from fastapi.responses import Response
+import openslide
+
+from app.models.schemas import SlideLoadRequest, SlideMetadata
+from app.services.slide_cache import get_slide, load_slide
+from app.services.tile_service import get_tile_jpeg, get_thumbnail_jpeg
+
+router = APIRouter()
+
+UPLOAD_DIR = Path(
+    os.getenv(
+        "TILE_SERVER_UPLOAD_DIR",
+        Path(__file__).resolve().parents[2] / "data" / "uploads",
+    )
+)
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
+
+@router.post("/slides/{slide_id}/load")
+def load(slide_id: str, payload: SlideLoadRequest):
+    try:
+        load_slide(slide_id, payload.path)
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=str(exc))
+    return {"status": "loaded", "slide_id": slide_id}
+
+
+@router.post("/slides/{slide_id}/upload")
+def upload(slide_id: str, file: UploadFile = File(...)):
+    if not slide_id:
+        raise HTTPException(status_code=400, detail="Slide id is required")
+
+    filename = Path(file.filename or "")
+    suffix = filename.suffix.lower()
+    if suffix not in {".svs", ".tif", ".tiff"}:
+        suffix = ".svs"
+
+    dest_path = UPLOAD_DIR / f"{slide_id}{suffix}"
+
+    try:
+        with dest_path.open("wb") as buffer:
+            shutil.copyfileobj(file.file, buffer)
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=f"Upload failed: {exc}")
+    finally:
+        try:
+            file.file.close()
+        except Exception:
+            pass
+
+    try:
+        load_slide(slide_id, str(dest_path))
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=str(exc))
+
+    return {"status": "uploaded", "slide_id": slide_id}
+
+
+@router.post("/slides/{slide_id}/reload")
+def reload_uploaded(slide_id: str):
+    if not slide_id:
+        raise HTTPException(status_code=400, detail="Slide id is required")
+
+    matches = list(UPLOAD_DIR.glob(f"{slide_id}.*"))
+    if not matches:
+        raise HTTPException(status_code=404, detail="Uploaded slide not found")
+
+    try:
+        load_slide(slide_id, str(matches[0]))
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=str(exc))
+
+    return {"status": "reloaded", "slide_id": slide_id}
+
+
+@router.get("/slides/{slide_id}/metadata", response_model=SlideMetadata)
+def metadata(slide_id: str):
+    slide = get_slide(slide_id)
+    if slide is None:
+        raise HTTPException(status_code=404, detail="Slide not loaded")
+
+    mpp_x = slide.properties.get(openslide.PROPERTY_NAME_MPP_X)
+    mpp_y = slide.properties.get(openslide.PROPERTY_NAME_MPP_Y)
+
+    def _to_float(value):
+        try:
+            return float(value)
+        except (TypeError, ValueError):
+            return None
+
+    return SlideMetadata(
+        width=slide.dimensions[0],
+        height=slide.dimensions[1],
+        level_count=slide.level_count,
+        level_dimensions=[[int(w), int(h)] for w, h in slide.level_dimensions],
+        level_downsamples=[float(d) for d in slide.level_downsamples],
+        mpp_x=_to_float(mpp_x),
+        mpp_y=_to_float(mpp_y),
+    )
+
+
+@router.get("/tiles/{slide_id}/{level}/{x}/{y}.jpg")
+def tile(
+    slide_id: str,
+    level: int,
+    x: int,
+    y: int,
+    tile_size: int = Query(256, ge=64, le=2048),
+    channel: str = Query("original"),
+):
+    slide = get_slide(slide_id)
+    if slide is None:
+        raise HTTPException(status_code=404, detail="Slide not loaded")
+
+    try:
+        jpeg_bytes = get_tile_jpeg(slide, level, x, y, tile_size, channel)
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=str(exc))
+
+    return Response(content=jpeg_bytes, media_type="image/jpeg")
+
+
+@router.get("/slides/{slide_id}/thumbnail")
+def thumbnail(
+    slide_id: str,
+    size: int = Query(256, ge=64, le=1024),
+    channel: str = Query("original"),
+):
+    slide = get_slide(slide_id)
+    if slide is None:
+        raise HTTPException(status_code=404, detail="Slide not loaded")
+
+    try:
+        jpeg_bytes = get_thumbnail_jpeg(slide, size, channel)
+    except Exception as exc:
+        raise HTTPException(status_code=400, detail=str(exc))
+
+    return Response(content=jpeg_bytes, media_type="image/jpeg")

backend//tile_server//app//main.py

@@ -0,0 +1,16 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+
+from app.api.routes import router
+
+app = FastAPI(title="Pathora Tile Server")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.include_router(router)

backend//tile_server//app//models//schemas.py

@@ -0,0 +1,16 @@
+from typing import List, Optional
+from pydantic import BaseModel
+
+
+class SlideLoadRequest(BaseModel):
+    path: str
+
+
+class SlideMetadata(BaseModel):
+    width: int
+    height: int
+    level_count: int
+    level_dimensions: List[List[int]]
+    level_downsamples: List[float]
+    mpp_x: Optional[float] = None
+    mpp_y: Optional[float] = None

backend//tile_server//app//services//slide_cache.py

@@ -0,0 +1,50 @@
+from collections import OrderedDict
+from threading import Lock
+from typing import Dict, Optional
+
+import openslide
+
+
+class SlideCache:
+    def __init__(self, max_items: int = 8) -> None:
+        self._max_items = max_items
+        self._slides: Dict[str, openslide.OpenSlide] = OrderedDict()
+        self._lock = Lock()
+
+    def get(self, slide_id: str) -> Optional[openslide.OpenSlide]:
+        with self._lock:
+            slide = self._slides.get(slide_id)
+            if slide is None:
+                return None
+            self._slides.move_to_end(slide_id)
+            return slide
+
+    def put(self, slide_id: str, path: str) -> openslide.OpenSlide:
+        with self._lock:
+            if slide_id in self._slides:
+                self._slides.move_to_end(slide_id)
+                return self._slides[slide_id]
+
+            slide = openslide.OpenSlide(path)
+            self._slides[slide_id] = slide
+            self._slides.move_to_end(slide_id)
+
+            while len(self._slides) > self._max_items:
+                _, oldest = self._slides.popitem(last=False)
+                try:
+                    oldest.close()
+                except Exception:
+                    pass
+
+            return slide
+
+
+cache = SlideCache()
+
+
+def load_slide(slide_id: str, path: str) -> openslide.OpenSlide:
+    return cache.put(slide_id, path)
+
+
+def get_slide(slide_id: str) -> Optional[openslide.OpenSlide]:
+    return cache.get(slide_id)

backend//tile_server//app//services//tile_service.py

@@ -0,0 +1,112 @@
+from io import BytesIO
+from typing import Tuple
+
+import numpy as np
+from PIL import Image
+import openslide
+from skimage import color
+
+
+def _level_downsample(slide: openslide.OpenSlide, level: int) -> float:
+    return float(slide.level_downsamples[level])
+
+
+def _level_dims(slide: openslide.OpenSlide, level: int) -> Tuple[int, int]:
+    return slide.level_dimensions[level]
+
+
+def _blank_tile(tile_size: int) -> bytes:
+    img = Image.new("RGB", (tile_size, tile_size), (255, 255, 255))
+    buf = BytesIO()
+    img.save(buf, format="JPEG", quality=85)
+    return buf.getvalue()
+
+
+def _channel_from_rgb(rgb: Image.Image, channel: str) -> Image.Image:
+    if channel == "original":
+        return rgb
+
+    arr = np.asarray(rgb).astype(np.float32) / 255.0
+    hed = color.rgb2hed(arr)
+
+    if channel == "hematoxylin":
+        hed_only = np.zeros_like(hed)
+        hed_only[..., 0] = hed[..., 0]
+    elif channel == "eosin":
+        hed_only = np.zeros_like(hed)
+        hed_only[..., 1] = hed[..., 1]
+    else:
+        return rgb
+
+    rgb_stain = color.hed2rgb(hed_only)
+    rgb_stain = np.clip(rgb_stain, 0.0, 1.0)
+
+    # Normalize for better contrast
+    min_val = rgb_stain.min(axis=(0, 1), keepdims=True)
+    max_val = rgb_stain.max(axis=(0, 1), keepdims=True)
+    denom = np.maximum(max_val - min_val, 1e-6)
+    rgb_stain = (rgb_stain - min_val) / denom
+
+    out = (rgb_stain * 255.0).clip(0, 255).astype(np.uint8)
+    return Image.fromarray(out, mode="RGB")
+
+
+def get_tile_jpeg(
+    slide: openslide.OpenSlide,
+    level: int,
+    x: int,
+    y: int,
+    tile_size: int,
+    channel: str = "original",
+) -> bytes:
+    if level < 0 or level >= slide.level_count:
+        raise ValueError("Invalid level")
+
+    level_w, level_h = _level_dims(slide, level)
+
+    px = x * tile_size
+    py = y * tile_size
+
+    if px >= level_w or py >= level_h:
+        return _blank_tile(tile_size)
+
+    downsample = _level_downsample(slide, level)
+    x0 = int(px * downsample)
+    y0 = int(py * downsample)
+
+    region = slide.read_region((x0, y0), level, (tile_size, tile_size))
+    rgb = region.convert("RGB")
+    rgb = _channel_from_rgb(rgb, channel)
+
+    buf = BytesIO()
+    rgb.save(buf, format="JPEG", quality=85)
+    return buf.getvalue()
+
+
+def get_thumbnail_jpeg(
+    slide: openslide.OpenSlide,
+    size: int = 256,
+    channel: str = "original",
+) -> bytes:
+    level = max(slide.level_count - 1, 0)
+    level_w, level_h = _level_dims(slide, level)
+
+    # Read the full lowest-resolution level, then downscale to a fixed thumbnail.
+    region = slide.read_region((0, 0), level, (level_w, level_h))
+    rgb = region.convert("RGB")
+    rgb = _channel_from_rgb(rgb, channel)
+    # Preserve aspect ratio and pad to square so the whole slide is visible.
+    scale = min(size / max(level_w, 1), size / max(level_h, 1))
+    new_w = max(int(level_w * scale), 1)
+    new_h = max(int(level_h * scale), 1)
+    rgb = rgb.resize((new_w, new_h), resample=Image.BILINEAR)
+
+    canvas = Image.new("RGB", (size, size), (255, 255, 255))
+    offset_x = (size - new_w) // 2
+    offset_y = (size - new_h) // 2
+    canvas.paste(rgb, (offset_x, offset_y))
+    rgb = canvas
+
+    buf = BytesIO()
+    rgb.save(buf, format="JPEG", quality=85)
+    return buf.getvalue()

backend//tile_server//requirements.txt

@@ -0,0 +1,6 @@
+fastapi
+uvicorn
+openslide-python
+pillow
+numpy
+scikit-image

frontend/index.html

@@ -1,13 +1,13 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Manalife AI Pathology Assistant</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Manalife AI Pathology Assistant</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -1,35 +1,37 @@
-{
-  "name": "magic-patterns-vite-template",
-  "version": "0.0.1",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "npx vite",
-    "build": "npx vite build",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "preview": "npx vite preview"
-  },
-  "dependencies": {
-    "axios": "^1.13.2",
-    "lucide-react": "0.522.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.2"
-  },
-  "devDependencies": {
-    "@types/node": "^20.11.18",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.54.0",
-    "@typescript-eslint/parser": "^5.54.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "latest",
-    "eslint": "^8.50.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.1",
-    "postcss": "latest",
-    "tailwindcss": "3.4.17",
-    "typescript": "^5.5.4",
-    "vite": "^5.2.0"
-  }
-}
+{
+  "name": "magic-patterns-vite-template",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "npx vite",
+    "build": "npx vite build",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "preview": "npx vite preview"
+  },
+  "dependencies": {
+    "@types/openseadragon": "^5.0.2",
+    "axios": "^1.13.2",
+    "lucide-react": "0.522.0",
+    "openseadragon": "^5.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.18",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "latest",
+    "eslint": "^8.50.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.1",
+    "postcss": "latest",
+    "tailwindcss": "3.4.17",
+    "typescript": "^5.5.4",
+    "vite": "^5.2.0"
+  }
+}

frontend/src/App.tsx

@@ -1,143 +1,143 @@
-import { useState, useEffect } from "react";
-import axios from "axios";
-import { Header } from "./components/Header";
-import { Sidebar } from "./components/Sidebar";
-import { UploadSection } from "./components/UploadSection";
-import { ResultsPanel } from "./components/ResultsPanel";
-import { Footer } from "./components/Footer";
-import { ProgressBar } from "./components/progressbar";
-
-export function App() {
-const [selectedTest, setSelectedTest] = useState("cytology");
-const [uploadedImage, setUploadedImage] = useState<string | null>(null);
-const [selectedModel, setSelectedModel] = useState("");
-const [apiResult, setApiResult] = useState<any>(null);
-const [showResults, setShowResults] = useState(false);
-const [currentStep, setCurrentStep] = useState(0);
-const [loading, setLoading] = useState(false);
-
-// Progress bar logic
-useEffect(() => {
-if (showResults) setCurrentStep(2);
-else if (uploadedImage) setCurrentStep(1);
-else setCurrentStep(0);
-}, [uploadedImage, showResults]);
-
-// Reset logic
-useEffect(() => {
-setCurrentStep(0);
-setShowResults(false);
-setUploadedImage(null);
-setSelectedModel("");
-setApiResult(null);
-}, [selectedTest]);
-
-  const handleAnalyze = async () => {
-    console.log('Analyze button clicked', { uploadedImage, selectedModel });
-    if (!uploadedImage || !selectedModel) {
-      alert("Please select a model and upload an image first!");
-      return;
-    }
-
-    setLoading(true);
-    setShowResults(false);
-    setApiResult(null);
-
-    try {
-      // Extract file extension from data URL or use .jpg default
-      const extension = uploadedImage.startsWith('data:image/')
-        ? uploadedImage.split(';')[0].split('/')[1]
-        : 'jpg';
-      
-      // Create a more descriptive filename
-      const filename = `analysis_input.${extension}`;
-      
-      let blob: Blob;
-      if (uploadedImage.startsWith('data:')) {
-        // Handle data URLs (from file upload)
-        blob = await fetch(uploadedImage).then(r => r.blob());
-      } else {
-        // Handle sample images (relative URLs)
-        blob = await fetch(uploadedImage)
-          .then(r => r.blob())
-          .catch(() => {
-            // If fetch fails, try with base URL
-            const baseURL = import.meta.env.MODE === "development"
-              ? "http://127.0.0.1:5173"
-              : window.location.origin;
-            return fetch(`${baseURL}${uploadedImage}`).then(r => r.blob());
-          });
-      }
-
-      const file = new File([blob], filename, { type: blob.type || `image/${extension}` });
-      const formData = new FormData();
-      formData.append("file", file);
-      formData.append("model_name", selectedModel);
-
-      console.log('Sending request:', {
-        filename,
-        type: file.type,
-        size: file.size,
-        model: selectedModel
-      });
-
-      const baseURL = import.meta.env.MODE === "development"
-        ? "http://127.0.0.1:8000"
-        : window.location.origin;
-
-      const res = await axios.post(`${baseURL}/predict/`, formData, {
-        headers: { "Content-Type": "multipart/form-data" },
-      });
-
-      if (res.data.error) {
-        throw new Error(res.data.error);
-      }
-
-      console.log('Received response:', res.data);
-      setApiResult(res.data);
-      setShowResults(true);
-    } catch (err: any) {
-      console.error("❌ Error during inference:", err);
-      const errorMessage = err.response?.data?.error || err.message || "Unknown error occurred";
-      alert(`Error analyzing the image: ${errorMessage}`);
-    } finally {
-      setLoading(false);
-    }
-};
-
-return ( <div className="flex flex-col min-h-screen w-full bg-gray-50"> <Header /> <ProgressBar currentStep={currentStep} />
-
-
-  <div className="flex flex-1">
-    <Sidebar selectedTest={selectedTest} onTestChange={setSelectedTest} />
-
-    <main className="flex-1 p-6">
-      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <UploadSection
-          selectedTest={selectedTest}
-          uploadedImage={uploadedImage}
-          setUploadedImage={setUploadedImage}
-          selectedModel={selectedModel}
-          setSelectedModel={setSelectedModel}
-          onAnalyze={handleAnalyze}
-        />
-
-        {(showResults || loading) && (
-          <ResultsPanel
-            uploadedImage={
-              apiResult?.annotated_image_url || uploadedImage
-            }
-            result={apiResult}
-            loading={loading}
-          />
-        )}
-      </div>
-    </main>
-  </div>
-
-  <Footer />
-</div>
-
-
-);
-}
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { Header } from "./components/Header";
+import { Sidebar } from "./components/Sidebar";
+import { UploadSection } from "./components/UploadSection";
+import { ResultsPanel } from "./components/ResultsPanel";
+import { Footer } from "./components/Footer";
+import { ProgressBar } from "./components/progressbar";
+
+export function App() {
+const [selectedTest, setSelectedTest] = useState("cytology");
+const [uploadedImage, setUploadedImage] = useState<string | null>(null);
+const [selectedModel, setSelectedModel] = useState("");
+const [apiResult, setApiResult] = useState<any>(null);
+const [showResults, setShowResults] = useState(false);
+const [currentStep, setCurrentStep] = useState(0);
+const [loading, setLoading] = useState(false);
+
+// Progress bar logic
+useEffect(() => {
+if (showResults) setCurrentStep(2);
+else if (uploadedImage) setCurrentStep(1);
+else setCurrentStep(0);
+}, [uploadedImage, showResults]);
+
+// Reset logic
+useEffect(() => {
+setCurrentStep(0);
+setShowResults(false);
+setUploadedImage(null);
+setSelectedModel("");
+setApiResult(null);
+}, [selectedTest]);
+
+  const handleAnalyze = async () => {
+    console.log('Analyze button clicked', { uploadedImage, selectedModel });
+    if (!uploadedImage || !selectedModel) {
+      alert("Please select a model and upload an image first!");
+      return;
+    }
+
+    setLoading(true);
+    setShowResults(false);
+    setApiResult(null);
+
+    try {
+      // Extract file extension from data URL or use .jpg default
+      const extension = uploadedImage.startsWith('data:image/')
+        ? uploadedImage.split(';')[0].split('/')[1]
+        : 'jpg';
+      
+      // Create a more descriptive filename
+      const filename = `analysis_input.${extension}`;
+      
+      let blob: Blob;
+      if (uploadedImage.startsWith('data:')) {
+        // Handle data URLs (from file upload)
+        blob = await fetch(uploadedImage).then(r => r.blob());
+      } else {
+        // Handle sample images (relative URLs)
+        blob = await fetch(uploadedImage)
+          .then(r => r.blob())
+          .catch(() => {
+            // If fetch fails, try with base URL
+            const baseURL = import.meta.env.MODE === "development"
+              ? "http://127.0.0.1:5173"
+              : window.location.origin;
+            return fetch(`${baseURL}${uploadedImage}`).then(r => r.blob());
+          });
+      }
+
+      const file = new File([blob], filename, { type: blob.type || `image/${extension}` });
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("model_name", selectedModel);
+
+      console.log('Sending request:', {
+        filename,
+        type: file.type,
+        size: file.size,
+        model: selectedModel
+      });
+
+      const baseURL = import.meta.env.MODE === "development"
+        ? "http://127.0.0.1:8000"
+        : window.location.origin;
+
+      const res = await axios.post(`${baseURL}/predict/`, formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+
+      if (res.data.error) {
+        throw new Error(res.data.error);
+      }
+
+      console.log('Received response:', res.data);
+      setApiResult(res.data);
+      setShowResults(true);
+    } catch (err: any) {
+      console.error("❌ Error during inference:", err);
+      const errorMessage = err.response?.data?.error || err.message || "Unknown error occurred";
+      alert(`Error analyzing the image: ${errorMessage}`);
+    } finally {
+      setLoading(false);
+    }
+};
+
+return ( <div className="flex flex-col min-h-screen w-full bg-gray-50"> <Header /> <ProgressBar currentStep={currentStep} />
+
+
+  <div className="flex flex-1">
+    <Sidebar selectedTest={selectedTest} onTestChange={setSelectedTest} />
+
+    <main className="flex-1 p-6">
+      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <UploadSection
+          selectedTest={selectedTest}
+          uploadedImage={uploadedImage}
+          setUploadedImage={setUploadedImage}
+          selectedModel={selectedModel}
+          setSelectedModel={setSelectedModel}
+          onAnalyze={handleAnalyze}
+        />
+
+        {(showResults || loading) && (
+          <ResultsPanel
+            uploadedImage={
+              apiResult?.annotated_image_url || uploadedImage
+            }
+            result={apiResult}
+            loading={loading}
+          />
+        )}
+      </div>
+    </main>
+  </div>
+
+  <Footer />
+</div>
+
+
+);
+}

frontend/src/AppRouter.tsx

@@ -1,10 +1,13 @@
-import React from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { App } from "./App";
-export function AppRouter() {
-  return <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<App />} />
-        </Routes>
-    </BrowserRouter>;
+import React from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { App } from "./App";
+import { PathoraViewer } from "./components/viewer/PathoraViewer";
+
+export function AppRouter() {
+  return <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<App />} />
+          <Route path="/viewer" element={<PathoraViewer />} />
+        </Routes>
+    </BrowserRouter>;
 }

frontend/tailwind.config.js

@@ -1,4 +1,4 @@
-export default {content: [
-  './index.html',
-  './src/**/*.{js,ts,jsx,tsx}'
+export default {content: [
+  './index.html',
+  './src/**/*.{js,ts,jsx,tsx}'
 ],}

frontend/tsconfig.json

@@ -1,26 +1,26 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-      "module": "esnext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-      "moduleResolution": "node",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["src", "src/env.d.ts"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+      "module": "esnext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+      "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src", "src/env.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

frontend/vite.config.js

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

frontend//src//components//viewer//AnnotationCanvas.tsx

@@ -0,0 +1,676 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import OpenSeadragon from "openseadragon";
+
+export interface Annotation {
+  id: string;
+  type: "rectangle" | "polygon" | "ellipse" | "brush";
+  points: Array<{ x: number; y: number }>;
+  color: string;
+  label: string;
+  completed: boolean;
+}
+
+interface AnnotationCanvasProps {
+  viewer: OpenSeadragon.Viewer | null;
+  tool: "rectangle" | "polygon" | "ellipse" | "brush" | "select" | "none";
+  onAnnotationComplete: (annotation: Annotation) => void;
+  activeLabel: string;
+  onAnnotationSelected?: (annotationId: string | null) => void;
+  annotations: Annotation[];
+  selectedAnnotationId?: string | null;
+  showAnnotations: boolean;
+}
+
+export function AnnotationCanvas({
+  viewer,
+  tool,
+  onAnnotationComplete,
+  activeLabel,
+  onAnnotationSelected,
+  annotations,
+  selectedAnnotationId,
+  showAnnotations,
+}: AnnotationCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [currentPoints, setCurrentPoints] = useState<Array<{ x: number; y: number }>>([]);
+  const [hoveredAnnotationId, setHoveredAnnotationId] = useState<string | null>(null);
+  const [drawingTool, setDrawingTool] = useState<"rectangle" | "polygon" | "ellipse" | "brush" | null>(null);
+  const [isPanning, setIsPanning] = useState(false);
+  const [lastPanPoint, setLastPanPoint] = useState<{ x: number; y: number } | null>(null);
+
+  const labelColor = (label: string) => {
+    switch (label) {
+      case "Tumor":
+        return "#EF4444";
+      case "Benign":
+        return "#FACC15";
+      case "Stroma":
+        return "#EC4899";
+      case "Necrosis":
+        return "#22C55E";
+      case "DCIS":
+        return "#3B82F6";
+      case "Invasive":
+        return "#8B5CF6";
+      default:
+        return "#9CA3AF";
+    }
+  };
+
+  const toImagePoint = (point: { x: number; y: number }) => {
+    if (!viewer) return point;
+    const viewportPoint = viewer.viewport.pointFromPixel(
+      new OpenSeadragon.Point(point.x, point.y)
+    );
+    const imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint);
+    return { x: imagePoint.x, y: imagePoint.y };
+  };
+
+  const toScreenPoint = (point: { x: number; y: number }) => {
+    if (!viewer) return point;
+    const viewportPoint = viewer.viewport.imageToViewportCoordinates(
+      new OpenSeadragon.Point(point.x, point.y)
+    );
+    const pixelPoint = viewer.viewport.pixelFromPoint(viewportPoint, true);
+    return { x: pixelPoint.x, y: pixelPoint.y };
+  };
+
+  // Setup canvas
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !viewer) return;
+
+    const updateCanvasSize = () => {
+      canvas.width = viewer.container.clientWidth;
+      canvas.height = viewer.container.clientHeight;
+      redrawAnnotations();
+    };
+
+    updateCanvasSize();
+    
+    // Update canvas size when viewer resizes
+    const resizeObserver = new ResizeObserver(updateCanvasSize);
+    resizeObserver.observe(viewer.container);
+
+    return () => resizeObserver.disconnect();
+  }, [viewer]);
+
+  // Helper function to check if point is inside annotation
+  const isPointInAnnotation = (point: { x: number; y: number }, annotation: Annotation): boolean => {
+    const tolerance = 10; // pixels
+    const screenPoints = annotation.points.map(toScreenPoint);
+    
+    if (annotation.type === "rectangle" && screenPoints.length === 2) {
+      const [p1, p2] = screenPoints;
+      const minX = Math.min(p1.x, p2.x);
+      const maxX = Math.max(p1.x, p2.x);
+      const minY = Math.min(p1.y, p2.y);
+      const maxY = Math.max(p1.y, p2.y);
+      
+      return point.x >= minX - tolerance && point.x <= maxX + tolerance &&
+             point.y >= minY - tolerance && point.y <= maxY + tolerance;
+    } else if (annotation.type === "ellipse" && screenPoints.length === 2) {
+      const [p1, p2] = screenPoints;
+      const cx = (p1.x + p2.x) / 2;
+      const cy = (p1.y + p2.y) / 2;
+      const rx = Math.max(1, Math.abs(p2.x - p1.x) / 2);
+      const ry = Math.max(1, Math.abs(p2.y - p1.y) / 2);
+      const dx = (point.x - cx) / rx;
+      const dy = (point.y - cy) / ry;
+      const dist = Math.abs(dx * dx + dy * dy - 1);
+      const tol = tolerance / Math.max(rx, ry);
+      return dist <= tol;
+    } else if (annotation.type === "polygon" && screenPoints.length > 2) {
+      // Check if point is near any line segment of the polygon
+      const points = screenPoints;
+      for (let i = 0; i < points.length; i++) {
+        const p1 = points[i];
+        const p2 = points[(i + 1) % points.length];
+        
+        const dist = distanceToLineSegment(point, p1, p2);
+        if (dist < tolerance) return true;
+      }
+      // Also check if near any vertex
+      return screenPoints.some(p => 
+        Math.hypot(p.x - point.x, p.y - point.y) < tolerance
+      );
+    } else if (annotation.type === "brush" && screenPoints.length > 1) {
+      for (let i = 0; i < screenPoints.length - 1; i++) {
+        const dist = distanceToLineSegment(point, screenPoints[i], screenPoints[i + 1]);
+        if (dist < tolerance) return true;
+      }
+    }
+    return false;
+  };
+
+  // Helper function to calculate distance from point to line segment
+  const distanceToLineSegment = (
+    point: { x: number; y: number },
+    p1: { x: number; y: number },
+    p2: { x: number; y: number }
+  ): number => {
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    const t = Math.max(0, Math.min(1, ((point.x - p1.x) * dx + (point.y - p1.y) * dy) / (dx * dx + dy * dy)));
+    const closestX = p1.x + t * dx;
+    const closestY = p1.y + t * dy;
+    return Math.hypot(point.x - closestX, point.y - closestY);
+  };
+
+  // Handle mouse events for drawing
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !viewer) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const point = { x, y };
+
+      // Update hover state based on tool
+      if (tool === "select") {
+        const hoveredAnnotation = annotations.find(ann => isPointInAnnotation(point, ann));
+        setHoveredAnnotationId(hoveredAnnotation?.id || null);
+        
+        // Change cursor when hovering over annotation
+        if (hoveredAnnotation) {
+          canvas.style.cursor = "pointer";
+        } else {
+          canvas.style.cursor = "default";
+        }
+      } else {
+        setHoveredAnnotationId(null);
+      }
+
+      // Handle select tool panning
+      if (tool === "select" && isPanning && lastPanPoint && viewer) {
+        const dx = x - lastPanPoint.x;
+        const dy = y - lastPanPoint.y;
+        const delta = viewer.viewport.deltaPointsFromPixels(
+          new OpenSeadragon.Point(-dx, -dy),
+          true
+        );
+        viewer.viewport.panBy(delta);
+        viewer.viewport.applyConstraints();
+        setLastPanPoint({ x, y });
+        return;
+      }
+
+      // Handle drawing preview for rectangle/ellipse tool
+      if (isDrawing && (tool === "rectangle" || tool === "ellipse") && currentPoints.length > 0) {
+        const imagePoint = toImagePoint(point);
+        setCurrentPoints([currentPoints[0], imagePoint]);
+      }
+
+      if (isDrawing && tool === "brush" && currentPoints.length > 0) {
+        const imagePoint = toImagePoint(point);
+        const lastPoint = currentPoints[currentPoints.length - 1];
+        if (Math.hypot(imagePoint.x - lastPoint.x, imagePoint.y - lastPoint.y) > 0.5) {
+          setCurrentPoints([...currentPoints, imagePoint]);
+        }
+      }
+    };
+
+    const handleMouseDown = (e: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const point = { x, y };
+
+      // Allow selection with Ctrl+Click on any annotation (works with any tool)
+      if (e.ctrlKey || e.metaKey) {
+        const selectedAnnotation = annotations.find(ann => isPointInAnnotation(point, ann));
+        if (onAnnotationSelected) {
+          onAnnotationSelected(selectedAnnotation?.id || null);
+        }
+        return;
+      }
+
+      // Handle select tool - click to select annotation, drag to pan
+      if (tool === "select") {
+        const selectedAnnotation = annotations.find(ann => isPointInAnnotation(point, ann));
+        if (selectedAnnotation) {
+          if (onAnnotationSelected) {
+            onAnnotationSelected(selectedAnnotation.id);
+          }
+          return;
+        }
+
+        if (viewer) {
+          setIsPanning(true);
+          setLastPanPoint({ x, y });
+        }
+        return;
+      }
+
+      // Handle drawing tools
+      if (tool === "rectangle") {
+        setIsDrawing(true);
+        setDrawingTool("rectangle");
+        setCurrentPoints([toImagePoint(point)]);
+      } else if (tool === "ellipse") {
+        setIsDrawing(true);
+        setDrawingTool("ellipse");
+        setCurrentPoints([toImagePoint(point)]);
+      } else if (tool === "polygon") {
+        // For polygon, add point on click
+        const imagePoint = toImagePoint(point);
+        const newPoints = [...currentPoints, imagePoint];
+        setCurrentPoints(newPoints);
+        if (currentPoints.length === 0) {
+          setIsDrawing(true);
+          setDrawingTool("polygon");
+        }
+      } else if (tool === "brush") {
+        setIsDrawing(true);
+        setDrawingTool("brush");
+        setCurrentPoints([toImagePoint(point)]);
+      }
+    };
+
+    const handleMouseUp = (e: MouseEvent) => {
+      if (tool === "select" && isPanning) {
+        setIsPanning(false);
+        setLastPanPoint(null);
+        return;
+      }
+
+      if (!isDrawing || (tool !== "rectangle" && tool !== "ellipse" && tool !== "brush")) return;
+
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      const imagePoint = toImagePoint({ x, y });
+      if (tool === "brush") {
+        const newPoints = [...currentPoints, imagePoint];
+        setCurrentPoints(newPoints);
+        completeAnnotation(undefined, newPoints);
+        return;
+      }
+
+      setCurrentPoints([currentPoints[0], imagePoint]);
+      completeAnnotation();
+    };
+
+    const handleDblClick = () => {
+      if (tool === "polygon" && isDrawing && currentPoints.length >= 3) {
+        completeAnnotation();
+      }
+    };
+
+    const handleWheel = (e: WheelEvent) => {
+      if (!viewer) return;
+      e.preventDefault();
+
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const zoomPoint = viewer.viewport.pointFromPixel(
+        new OpenSeadragon.Point(x, y)
+      );
+
+      const zoomFactor = e.deltaY < 0 ? 1.1 : 0.9;
+      viewer.viewport.zoomBy(zoomFactor, zoomPoint);
+      viewer.viewport.applyConstraints();
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isDrawing) {
+        setIsDrawing(false);
+        setCurrentPoints([]);
+      }
+    };
+
+    canvas.addEventListener("mousemove", handleMouseMove);
+    canvas.addEventListener("mousedown", handleMouseDown);
+    canvas.addEventListener("mouseup", handleMouseUp);
+    canvas.addEventListener("dblclick", handleDblClick);
+    canvas.addEventListener("wheel", handleWheel, { passive: false });
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      canvas.removeEventListener("mousemove", handleMouseMove);
+      canvas.removeEventListener("mousedown", handleMouseDown);
+      canvas.removeEventListener("mouseup", handleMouseUp);
+      canvas.removeEventListener("dblclick", handleDblClick);
+      canvas.removeEventListener("wheel", handleWheel);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isDrawing, currentPoints, tool, viewer, annotations, selectedAnnotationId, onAnnotationSelected, hoveredAnnotationId, isPanning, lastPanPoint]);
+
+  const completeAnnotation = (
+    forcedTool?: "rectangle" | "polygon" | "ellipse" | "brush",
+    forcedPoints?: Array<{ x: number; y: number }>
+  ) => {
+    const points = forcedPoints ?? currentPoints;
+    if (points.length < 2) {
+      setCurrentPoints([]);
+      setIsDrawing(false);
+      setDrawingTool(null);
+      return;
+    }
+
+    const finalTool = forcedTool ?? drawingTool ?? (tool as "rectangle" | "polygon" | "ellipse" | "brush");
+    const annotation: Annotation = {
+      id: `annotation-${Date.now()}`,
+      type: finalTool,
+      points,
+      color: labelColor(activeLabel),
+      label: activeLabel,
+      completed: true,
+    };
+
+    onAnnotationComplete(annotation);
+    setCurrentPoints([]);
+    setIsDrawing(false);
+    setDrawingTool(null);
+    redrawAnnotations();
+  };
+
+  const redrawAnnotations = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (!showAnnotations) return;
+
+    // Draw completed annotations
+    annotations.forEach((annotation) => {
+      const isSelected = selectedAnnotationId === annotation.id;
+      const isHovered = hoveredAnnotationId === annotation.id;
+      const screenPoints = annotation.points.map(toScreenPoint);
+      
+      if (annotation.type === "rectangle" && screenPoints.length === 2) {
+        const [p1, p2] = screenPoints;
+        const x = Math.min(p1.x, p2.x);
+        const y = Math.min(p1.y, p2.y);
+        const width = Math.abs(p2.x - p1.x);
+        const height = Math.abs(p2.y - p1.y);
+
+        // Draw only outline, no fill
+        if (isSelected) {
+          ctx.strokeStyle = "#FCD34D";
+          ctx.lineWidth = 4;
+        } else if (isHovered) {
+          ctx.strokeStyle = "#60A5FA"; // Light blue for hover
+          ctx.lineWidth = 3;
+        } else {
+          ctx.strokeStyle = annotation.color;
+          ctx.lineWidth = 2;
+        }
+        ctx.strokeRect(x, y, width, height);
+        
+        // Add hover indicator
+        if (isHovered) {
+          // Add hover indicator
+          ctx.fillStyle = "#60A5FA";
+          ctx.fillRect(x, y - 22, 65, 18);
+          ctx.fillStyle = "#FFF";
+          ctx.font = "11px Arial";
+          ctx.textAlign = "left";
+          ctx.textBaseline = "top";
+          ctx.fillText("Click to select", x + 4, y - 18);
+        }
+      } else if (annotation.type === "ellipse" && screenPoints.length === 2) {
+        const [p1, p2] = screenPoints;
+        const cx = (p1.x + p2.x) / 2;
+        const cy = (p1.y + p2.y) / 2;
+        const rx = Math.abs(p2.x - p1.x) / 2;
+        const ry = Math.abs(p2.y - p1.y) / 2;
+
+        if (isSelected) {
+          ctx.strokeStyle = "#FCD34D";
+          ctx.lineWidth = 4;
+        } else if (isHovered) {
+          ctx.strokeStyle = "#60A5FA";
+          ctx.lineWidth = 3;
+        } else {
+          ctx.strokeStyle = annotation.color;
+          ctx.lineWidth = 2;
+        }
+
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, Math.max(1, rx), Math.max(1, ry), 0, 0, Math.PI * 2);
+        ctx.stroke();
+
+        if (isHovered) {
+          ctx.fillStyle = "#60A5FA";
+          ctx.fillRect(cx - 35, cy - ry - 26, 70, 18);
+          ctx.fillStyle = "#FFF";
+          ctx.font = "11px Arial";
+          ctx.textAlign = "center";
+          ctx.textBaseline = "top";
+          ctx.fillText("Click to select", cx, cy - ry - 22);
+        }
+      } else if (annotation.type === "polygon" && screenPoints.length > 1) {
+        // Determine colors based on state
+        let strokeColor, pointColor;
+        let lineWidth = 2;
+        
+        if (isSelected) {
+          strokeColor = "#FCD34D";
+          pointColor = "#FCD34D";
+          lineWidth = 4;
+        } else if (isHovered) {
+          strokeColor = "#60A5FA";
+          pointColor = "#60A5FA";
+          lineWidth = 3;
+        } else {
+          strokeColor = annotation.color;
+          pointColor = annotation.color;
+        }
+        
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = lineWidth;
+
+        // Draw main polygon
+        ctx.strokeStyle = strokeColor;
+        ctx.beginPath();
+        ctx.moveTo(screenPoints[0].x, screenPoints[0].y);
+        screenPoints.slice(1).forEach((p) => {
+          ctx.lineTo(p.x, p.y);
+        });
+        ctx.closePath();
+        ctx.stroke();
+
+        // Draw points as circles
+        ctx.fillStyle = pointColor;
+        screenPoints.forEach((p, index) => {
+          ctx.beginPath();
+          const radius = isSelected ? 7 : isHovered ? 6 : 5;
+          ctx.arc(p.x, p.y, radius, 0, Math.PI * 2);
+          ctx.fill();
+          
+          // Draw point numbers
+          ctx.fillStyle = "#FFFFFF";
+          ctx.font = "bold 11px Arial";
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.fillText((index + 1).toString(), p.x, p.y);
+          ctx.fillStyle = pointColor;
+        });
+        
+        // Add hover indicator
+        if (isHovered && screenPoints.length > 0) {
+          const firstPoint = screenPoints[0];
+          ctx.fillStyle = "#60A5FA";
+          ctx.fillRect(firstPoint.x + 10, firstPoint.y - 22, 65, 18);
+          ctx.fillStyle = "#FFF";
+          ctx.font = "11px Arial";
+          ctx.textAlign = "left";
+          ctx.textBaseline = "top";
+          ctx.fillText("Click to select", firstPoint.x + 14, firstPoint.y - 18);
+        }
+      } else if (annotation.type === "brush" && screenPoints.length > 1) {
+        if (isSelected) {
+          ctx.strokeStyle = "#FCD34D";
+          ctx.lineWidth = 4;
+        } else if (isHovered) {
+          ctx.strokeStyle = "#60A5FA";
+          ctx.lineWidth = 3;
+        } else {
+          ctx.strokeStyle = annotation.color;
+          ctx.lineWidth = 2;
+        }
+
+        ctx.beginPath();
+        ctx.moveTo(screenPoints[0].x, screenPoints[0].y);
+        screenPoints.slice(1).forEach((p) => {
+          ctx.lineTo(p.x, p.y);
+        });
+        ctx.stroke();
+
+        if (isHovered) {
+          const firstPoint = screenPoints[0];
+          ctx.fillStyle = "#60A5FA";
+          ctx.fillRect(firstPoint.x + 10, firstPoint.y - 22, 65, 18);
+          ctx.fillStyle = "#FFF";
+          ctx.font = "11px Arial";
+          ctx.textAlign = "left";
+          ctx.textBaseline = "top";
+          ctx.fillText("Click to select", firstPoint.x + 14, firstPoint.y - 18);
+        }
+      }
+    });
+
+    // Draw current drawing (preview)
+    if (isDrawing && currentPoints.length > 0) {
+      const color = tool === "rectangle" ? "#EF4444" : "#3B82F6";
+      const previewPoints = currentPoints.map(toScreenPoint);
+
+      if ((tool === "rectangle" || tool === "ellipse") && previewPoints.length === 2) {
+        const [p1, p2] = previewPoints;
+        const x = Math.min(p1.x, p2.x);
+        const y = Math.min(p1.y, p2.y);
+        const width = Math.abs(p2.x - p1.x);
+        const height = Math.abs(p2.y - p1.y);
+
+        // Draw only outline with dashed style, no fill
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.setLineDash([5, 5]);
+        if (tool === "rectangle") {
+          ctx.strokeRect(x, y, width, height);
+        } else {
+          const cx = x + width / 2;
+          const cy = y + height / 2;
+          ctx.beginPath();
+          ctx.ellipse(cx, cy, Math.max(1, width / 2), Math.max(1, height / 2), 0, 0, Math.PI * 2);
+          ctx.stroke();
+        }
+        ctx.setLineDash([]);
+      } else if (tool === "polygon" && previewPoints.length > 1) {
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.setLineDash([5, 5]);
+
+        ctx.beginPath();
+        ctx.moveTo(previewPoints[0].x, previewPoints[0].y);
+        previewPoints.slice(1).forEach((p) => {
+          ctx.lineTo(p.x, p.y);
+        });
+        
+        // Close the path only if we have 3+ points
+        if (previewPoints.length >= 3) {
+          ctx.closePath();
+        }
+        
+        ctx.stroke();
+        ctx.setLineDash([]);
+
+        // Draw points as solid circles with numbers
+        ctx.fillStyle = color;
+        previewPoints.forEach((p, index) => {
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
+          ctx.fill();
+          
+          // Draw point numbers
+          ctx.fillStyle = "#FFFFFF";
+          ctx.font = "bold 11px Arial";
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.fillText((index + 1).toString(), p.x, p.y);
+          ctx.fillStyle = color;
+        });
+      } else if (tool === "brush" && previewPoints.length > 1) {
+        ctx.strokeStyle = "#EF4444";
+        ctx.lineWidth = 2;
+        ctx.setLineDash([5, 5]);
+        ctx.beginPath();
+        ctx.moveTo(previewPoints[0].x, previewPoints[0].y);
+        previewPoints.slice(1).forEach((p) => {
+          ctx.lineTo(p.x, p.y);
+        });
+        ctx.stroke();
+        ctx.setLineDash([]);
+      }
+    }
+  }, [annotations, currentPoints, hoveredAnnotationId, isDrawing, selectedAnnotationId, showAnnotations, tool, viewer]);
+
+  useEffect(() => {
+    redrawAnnotations();
+  }, [redrawAnnotations]);
+
+  useEffect(() => {
+    if (!isDrawing || !drawingTool) return;
+    if (tool === drawingTool) return;
+
+    if (drawingTool === "polygon" && currentPoints.length >= 3) {
+      completeAnnotation(drawingTool);
+      return;
+    }
+
+    if ((drawingTool === "rectangle" || drawingTool === "ellipse") && currentPoints.length === 2) {
+      completeAnnotation(drawingTool);
+      return;
+    }
+
+    if (drawingTool === "brush" && currentPoints.length >= 2) {
+      completeAnnotation(drawingTool);
+      return;
+    }
+
+    setIsDrawing(false);
+    setCurrentPoints([]);
+    setDrawingTool(null);
+  }, [tool, drawingTool, currentPoints, isDrawing]);
+
+  useEffect(() => {
+    if (!viewer) return;
+    const handleViewportChange = () => redrawAnnotations();
+    viewer.addHandler("zoom", handleViewportChange);
+    viewer.addHandler("pan", handleViewportChange);
+    viewer.addHandler("animation", handleViewportChange);
+    viewer.addHandler("open", handleViewportChange);
+
+    return () => {
+      viewer.removeHandler("zoom", handleViewportChange);
+      viewer.removeHandler("pan", handleViewportChange);
+      viewer.removeHandler("animation", handleViewportChange);
+      viewer.removeHandler("open", handleViewportChange);
+    };
+  }, [redrawAnnotations, viewer]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={`absolute inset-0 z-40 ${
+        tool === "none" ? "pointer-events-none cursor-grab" : ""
+      } ${tool === "select" ? "cursor-default" : ""} ${
+        tool === "rectangle" || tool === "polygon" || tool === "ellipse" || tool === "brush"
+          ? "cursor-crosshair"
+          : ""
+      }`}
+      style={{ width: "100%", height: "100%" }}
+    />
+  );
+}

frontend//src//components//viewer//PathoraViewer.tsx

@@ -0,0 +1,570 @@
+import { useEffect, useRef, useState } from "react";
+import OpenSeadragon from "openseadragon";
+import { ToolsSidebar } from "./ToolsSidebar";
+import { TopToolbar } from "./TopToolbar";
+import { AnnotationCanvas, type Annotation } from "./AnnotationCanvas";
+import { ArrowLeft } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import "./viewer.css";
+
+interface PathoraViewerProps {
+  imageUrl?: string;
+  slideName?: string;
+}
+
+export type Tool = "none" | "select" | "rectangle" | "polygon" | "ellipse" | "brush";
+type UploadedSlide = {
+  id: string;
+  name: string;
+  uploadedAt: string;
+  levelCount: number;
+  levelDimensions: number[][];
+};
+
+export function PathoraViewer({ 
+  imageUrl = "", 
+  slideName = "Pathora Viewer" 
+}: PathoraViewerProps) {
+  console.log("PathoraViewer component rendering with:", { imageUrl, slideName });
+  
+  const viewerRef = useRef<HTMLDivElement>(null);
+  const osdViewerRef = useRef<OpenSeadragon.Viewer | null>(null);
+  const navigate = useNavigate();
+  const [selectedTool, setSelectedTool] = useState<Tool>("none");
+  const [zoomLevel, setZoomLevel] = useState<number>(1);
+  const [showAnnotations, setShowAnnotations] = useState(true);
+  const [showHeatmap, setShowHeatmap] = useState(false);
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const [selectedAnnotationId, setSelectedAnnotationId] = useState<string | null>(null);
+  const [activeLabel, setActiveLabel] = useState("Tumor");
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [uploadedSlides, setUploadedSlides] = useState<UploadedSlide[]>([]);
+  const [showOriginal, setShowOriginal] = useState(true);
+  const [showHematoxylin, setShowHematoxylin] = useState(false);
+  const [showEosin, setShowEosin] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [tileServerUrl, setTileServerUrl] = useState("http://localhost:8001");
+  const [slideId, setSlideId] = useState("slide-1");
+  const [tileSize, setTileSize] = useState(256);
+  const [tileMode, setTileMode] = useState<"none" | "image" | "tiles">("none");
+  const [slideFile, setSlideFile] = useState<File | null>(null);
+  const [autoSlideId, setAutoSlideId] = useState(true);
+  const [tileMeta, setTileMeta] = useState<{
+    width: number;
+    height: number;
+    level_count: number;
+    level_dimensions: number[][];
+    level_downsamples: number[];
+    mpp_x?: number | null;
+    mpp_y?: number | null;
+  } | null>(null);
+  const [tileLoadError, setTileLoadError] = useState<string | null>(null);
+  const [isTileLoading, setIsTileLoading] = useState(false);
+  const channelItemsRef = useRef<{
+    original?: OpenSeadragon.TiledImage;
+    hematoxylin?: OpenSeadragon.TiledImage;
+    eosin?: OpenSeadragon.TiledImage;
+  }>({});
+
+  const normalizeBaseUrl = (value: string) => {
+    return value.replace(/\/$/, "");
+  };
+
+  const autoSlideIdLabel = autoSlideId ? "Auto ID enabled" : "Manual ID";
+
+  const generateSlideId = () => {
+    const now = new Date();
+    const stamp = now
+      .toISOString()
+      .replace(/[-:]/g, "")
+      .replace("T", "-")
+      .slice(0, 15);
+    const rand = Math.random().toString(36).slice(2, 6);
+    return `slide-${stamp}-${rand}`;
+  };
+
+  const buildTileSource = (meta: {
+    width: number;
+    height: number;
+    level_count: number;
+    level_downsamples: number[];
+  }, channel: "original" | "hematoxylin" | "eosin" = "original") => {
+    const baseUrl = normalizeBaseUrl(tileServerUrl);
+    const maxLevel = Math.max(0, meta.level_count - 1);
+
+    const tileSource = new OpenSeadragon.TileSource({
+      width: meta.width,
+      height: meta.height,
+      tileSize,
+      minLevel: 0,
+      maxLevel,
+    });
+
+    tileSource.getLevelScale = (level: number) => {
+      const slideLevel = Math.max(0, meta.level_count - 1 - level);
+      const downsample = meta.level_downsamples[slideLevel] || 1;
+      return 1 / downsample;
+    };
+
+    tileSource.getTileUrl = (level: number, x: number, y: number) => {
+      const slideLevel = Math.max(0, meta.level_count - 1 - level);
+      return `${baseUrl}/tiles/${slideId}/${slideLevel}/${x}/${y}.jpg?tile_size=${tileSize}&channel=${channel}`;
+    };
+
+    return tileSource;
+  };
+
+  const addUploadedSlide = (
+    id: string,
+    name: string,
+    levelCount: number,
+    levelDimensions: number[][]
+  ) => {
+    const uploadedAt = new Date().toLocaleString();
+    setUploadedSlides((prev) => {
+      const filtered = prev.filter((slide) => slide.id !== id);
+      return [{ id, name, uploadedAt, levelCount, levelDimensions }, ...filtered].slice(0, 20);
+    });
+  };
+
+  const handleLoadSlide = async () => {
+    if (!slideId.trim()) {
+      setTileLoadError("Slide id is required.");
+      return;
+    }
+
+    if (!slideFile) {
+      setTileLoadError("Please choose a WSI file to upload.");
+      return;
+    }
+
+    const baseUrl = normalizeBaseUrl(tileServerUrl);
+    setIsTileLoading(true);
+    setTileLoadError(null);
+
+    try {
+      const formData = new FormData();
+      formData.append("file", slideFile);
+
+      const uploadRes = await fetch(`${baseUrl}/slides/${slideId}/upload`, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!uploadRes.ok) {
+        const text = await uploadRes.text();
+        throw new Error(text || "Failed to upload slide");
+      }
+
+      const metaRes = await fetch(`${baseUrl}/slides/${slideId}/metadata`);
+      if (!metaRes.ok) {
+        const text = await metaRes.text();
+        throw new Error(text || "Failed to read metadata");
+      }
+
+      const meta = await metaRes.json();
+      setTileMeta(meta);
+      setTileMode("tiles");
+      addUploadedSlide(
+        slideId,
+        slideFile?.name || "Untitled slide",
+        meta.level_count || 1,
+        meta.level_dimensions || []
+      );
+    } catch (error: any) {
+      setTileLoadError(error?.message || "Failed to upload slide");
+    } finally {
+      setIsTileLoading(false);
+    }
+  };
+
+  const handleSelectUploadedSlide = async (id: string) => {
+    const baseUrl = normalizeBaseUrl(tileServerUrl);
+    setSlideId(id);
+    setTileLoadError(null);
+    setIsTileLoading(true);
+
+    const fetchMeta = async () => {
+      const metaRes = await fetch(`${baseUrl}/slides/${id}/metadata`);
+      if (!metaRes.ok) {
+        const text = await metaRes.text();
+        const error = new Error(text || "Failed to read metadata") as Error & {
+          status?: number;
+        };
+        error.status = metaRes.status;
+        throw error;
+      }
+      return metaRes.json();
+    };
+
+    try {
+      let meta: any;
+      try {
+        meta = await fetchMeta();
+      } catch (error: any) {
+        if (error?.status === 404) {
+          const reloadRes = await fetch(`${baseUrl}/slides/${id}/reload`, { method: "POST" });
+          if (!reloadRes.ok) {
+            const text = await reloadRes.text();
+            throw new Error(text || "Failed to reload slide");
+          }
+          meta = await fetchMeta();
+        } else {
+          throw error;
+        }
+      }
+
+      setTileMeta(meta);
+      setTileMode("tiles");
+    } catch (error: any) {
+      setTileLoadError(error?.message || "Failed to load slide");
+    } finally {
+      setIsTileLoading(false);
+    }
+  };
+
+  // Initialize OpenSeadragon viewer
+  useEffect(() => {
+    if (!viewerRef.current || osdViewerRef.current) return;
+
+    console.log("Initializing OpenSeadragon with image:", imageUrl);
+    console.log("Viewer ref:", viewerRef.current);
+
+    try {
+      const viewer = OpenSeadragon({
+        element: viewerRef.current,
+        prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.0/images/",
+        crossOriginPolicy: "Anonymous",
+        showNavigator: true,
+        navigatorPosition: "BOTTOM_RIGHT",
+        navigatorSizeRatio: 0.15,
+        showNavigationControl: false,
+        minZoomImageRatio: 0.5,
+        maxZoomPixelRatio: 3,
+        visibilityRatio: 0.5,
+        constrainDuringPan: true,
+        animationTime: 0.5,
+        gestureSettingsMouse: {
+          clickToZoom: false,
+          dblClickToZoom: true,
+        },
+      });
+
+      console.log("OpenSeadragon viewer created:", viewer);
+
+      // Add error handler
+      viewer.addHandler("open-failed", (event: any) => {
+        console.error("Failed to open image:", event);
+        setLoadError("Failed to load image. Please check the image path.");
+        setIsLoading(false);
+      });
+
+      // Add success handler
+      viewer.addHandler("open", () => {
+        console.log("Image loaded successfully");
+        setIsLoading(false);
+        setLoadError(null);
+      });
+
+      // Update zoom level on zoom
+      viewer.addHandler("zoom", () => {
+        const zoom = viewer.viewport.getZoom();
+        setZoomLevel(zoom);
+      });
+
+      osdViewerRef.current = viewer;
+
+      return () => {
+        if (osdViewerRef.current) {
+          osdViewerRef.current.destroy();
+          osdViewerRef.current = null;
+        }
+      };
+    } catch (error) {
+      console.error("Error initializing OpenSeadragon:", error);
+    }
+  }, [imageUrl]);
+
+  useEffect(() => {
+    if (!osdViewerRef.current) return;
+
+    const viewer = osdViewerRef.current;
+
+    if (tileMode === "tiles" && tileMeta) {
+      setIsLoading(true);
+      setLoadError(null);
+      viewer.open(buildTileSource(tileMeta, "original"));
+      return;
+    }
+
+    if (tileMode === "image" && imageUrl) {
+      setIsLoading(true);
+      setLoadError(null);
+      viewer.open({
+        type: "image",
+        url: imageUrl,
+      });
+      return;
+    }
+
+    if (tileMode === "none") {
+      setIsLoading(false);
+      setLoadError(null);
+      viewer.close();
+    }
+  }, [imageUrl, tileMeta, tileMode, tileServerUrl, tileSize, slideId]);
+
+  useEffect(() => {
+    if (!osdViewerRef.current || !tileMeta || tileMode !== "tiles") return;
+    const viewer = osdViewerRef.current;
+
+    const originalItem = viewer.world.getItemAt(0);
+    if (originalItem) {
+      channelItemsRef.current.original = originalItem;
+      originalItem.setOpacity(showOriginal ? 1 : 0);
+    }
+
+    const ensureChannel = (
+      key: "hematoxylin" | "eosin",
+      enabled: boolean,
+      channel: "hematoxylin" | "eosin"
+    ) => {
+      const existing = channelItemsRef.current[key];
+      if (existing) {
+        existing.setOpacity(enabled ? 1 : 0);
+        return;
+      }
+      if (!enabled) return;
+
+      viewer.addTiledImage({
+        tileSource: buildTileSource(tileMeta, channel),
+        opacity: 1,
+        success: (event: any) => {
+          channelItemsRef.current[key] = event.item as OpenSeadragon.TiledImage;
+        },
+      });
+    };
+
+    ensureChannel("hematoxylin", showHematoxylin, "hematoxylin");
+    ensureChannel("eosin", showEosin, "eosin");
+  }, [tileMeta, tileMode, showOriginal, showHematoxylin, showEosin, tileServerUrl, tileSize, slideId]);
+
+  const handleAnnotationComplete = (annotation: Annotation) => {
+    console.log("Annotation completed:", annotation);
+    setAnnotations((prev) => [...prev, annotation]);
+    // Auto-select the newly created annotation
+    setSelectedAnnotationId(annotation.id);
+  };
+
+  const handleAnnotationSelected = (annotationId: string | null) => {
+    setSelectedAnnotationId(annotationId);
+  };
+
+  const handleUndo = () => {
+    if (annotations.length > 0) {
+      const newAnnotations = annotations.slice(0, -1);
+      setAnnotations(newAnnotations);
+      setSelectedAnnotationId(null);
+    }
+  };
+
+  const handleDelete = () => {
+    if (selectedAnnotationId) {
+      const newAnnotations = annotations.filter(
+        (ann) => ann.id !== selectedAnnotationId
+      );
+      setAnnotations(newAnnotations);
+      setSelectedAnnotationId(null);
+    }
+  };
+
+  const handleZoomIn = () => {
+    if (osdViewerRef.current) {
+      const currentZoom = osdViewerRef.current.viewport.getZoom();
+      osdViewerRef.current.viewport.zoomTo(currentZoom * 1.2);
+    }
+  };
+
+  const handleZoomOut = () => {
+    if (osdViewerRef.current) {
+      const currentZoom = osdViewerRef.current.viewport.getZoom();
+      osdViewerRef.current.viewport.zoomTo(currentZoom / 1.2);
+    }
+  };
+
+  const zoomPresets = [1, 5, 10, 20, 40];
+  const micronsPerPixel = tileMeta?.mpp_x ?? tileMeta?.mpp_y ?? null;
+  const imageMeta = {
+    stain: "H&E",
+    width: tileMeta?.width ?? null,
+    height: tileMeta?.height ?? null,
+    levelCount: tileMeta?.level_count ?? null,
+    mpp: micronsPerPixel,
+    slideId,
+  };
+  const isTileLoaded = tileMode === "tiles" && !!tileMeta;
+
+  const handleZoomPreset = (level: number) => {
+    if (osdViewerRef.current) {
+      osdViewerRef.current.viewport.zoomTo(level);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-screen bg-gray-100">
+      {/* Header with back button */}
+      <header className="h-16 bg-gradient-to-r from-teal-700 to-teal-600 text-white flex items-center px-6 shadow-md">
+        <button
+          onClick={() => navigate("/")}
+          className="flex items-center space-x-2 hover:bg-teal-800/50 px-3 py-2 rounded-lg transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          <span className="font-medium">Back to Analysis</span>
+        </button>
+        <div className="flex-1 text-center">
+          <h1 className="text-2xl font-bold">Pathora Viewer</h1>
+          <p className="text-xs text-teal-100">Advanced Whole Slide Imaging Platform</p>
+        </div>
+        <div className="w-40"></div> {/* Spacer for centering */}
+      </header>
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* Tools Sidebar */}
+        <ToolsSidebar
+          selectedTool={selectedTool}
+          onToolChange={setSelectedTool}
+          annotations={annotations}
+          selectedAnnotationId={selectedAnnotationId}
+          onSelectAnnotation={handleAnnotationSelected}
+          uploadedSlides={uploadedSlides}
+          tileServerUrl={tileServerUrl}
+          onTileServerUrlChange={setTileServerUrl}
+          onSlideFileChange={(file) => {
+            setSlideFile(file);
+            if (file && autoSlideId) {
+              setSlideId(generateSlideId());
+            }
+          }}
+          slideFileName={slideFile?.name ?? null}
+          onUploadSlide={handleLoadSlide}
+          isTileLoading={isTileLoading}
+          tileLoadError={tileLoadError}
+          onSelectUploadedSlide={handleSelectUploadedSlide}
+          activeLabel={activeLabel}
+          onLabelChange={setActiveLabel}
+          imageMeta={imageMeta}
+          channelVisibility={{
+            original: showOriginal,
+            hematoxylin: showHematoxylin,
+            eosin: showEosin,
+          }}
+          onChannelToggle={(channel, value) => {
+            if (channel === "original") setShowOriginal(value);
+            if (channel === "hematoxylin") setShowHematoxylin(value);
+            if (channel === "eosin") setShowEosin(value);
+          }}
+          isTileLoaded={isTileLoaded}
+          isCollapsed={isSidebarCollapsed}
+          onToggleCollapsed={() => setIsSidebarCollapsed((prev) => !prev)}
+        />
+
+        {/* Main Viewer Area */}
+        <div className="flex-1 flex flex-col">{/* Top Toolbar */}
+          <TopToolbar
+            slideName={slideName}
+            zoomLevel={zoomLevel}
+            zoomPresets={zoomPresets}
+            onZoomPreset={handleZoomPreset}
+            micronsPerPixel={micronsPerPixel}
+            showAnnotations={showAnnotations}
+            showHeatmap={showHeatmap}
+            onUndo={handleUndo}
+            onDelete={handleDelete}
+            onZoomIn={handleZoomIn}
+            onZoomOut={handleZoomOut}
+            onToggleAnnotations={() => setShowAnnotations(!showAnnotations)}
+            onToggleHeatmap={() => setShowHeatmap(!showHeatmap)}
+            canUndo={annotations.length > 0}
+            canDelete={selectedAnnotationId !== null}
+          />
+
+          <div className="flex-1 flex overflow-hidden">
+            {/* Viewer Container */}
+            <div className="flex-1 relative">
+              <div
+                ref={viewerRef}
+                className="absolute inset-0 bg-black"
+                style={{ width: "100%", height: "100%" }}
+              />
+
+              {/* Loading State */}
+              {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 z-50">
+                  <div className="text-center">
+                    <div className="inline-block animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-teal-500 mb-4"></div>
+                    <p className="text-white text-lg font-semibold">Loading slide viewer...</p>
+                    <p className="text-gray-300 text-sm mt-2">Initializing OpenSeadragon</p>
+                  </div>
+                </div>
+              )}
+
+              {/* Error State */}
+              {loadError && (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 z-50">
+                  <div className="bg-white rounded-lg p-6 max-w-md text-center">
+                    <div className="text-red-500 text-5xl mb-4">⚠️</div>
+                    <h3 className="text-xl font-bold text-gray-800 mb-2">Failed to Load Image</h3>
+                    <p className="text-gray-600 mb-4">{loadError}</p>
+                    <button
+                      onClick={() => window.location.reload()}
+                      className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
+                    >
+                      Retry
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* Annotation Canvas */}
+              <AnnotationCanvas
+                viewer={osdViewerRef.current}
+                tool={selectedTool}
+                onAnnotationComplete={handleAnnotationComplete}
+                activeLabel={activeLabel}
+                onAnnotationSelected={handleAnnotationSelected}
+                annotations={annotations}
+                selectedAnnotationId={selectedAnnotationId}
+                showAnnotations={showAnnotations}
+              />
+            
+
+            {/* Annotations count */}
+            {showAnnotations && annotations.length > 0 && (
+              <div className="absolute bottom-4 left-4 bg-white px-3 py-2 rounded shadow-md text-sm z-40">
+                <span className="font-semibold">Annotations:</span> {annotations.length}
+              </div>
+            )}
+
+            {/* Heatmap overlay placeholder */}
+            {showHeatmap && (
+              <div className="absolute inset-0 pointer-events-none bg-gradient-to-br from-red-500/20 via-yellow-500/20 to-green-500/20" />
+            )}
+
+              {tileMode === "none" && !isLoading && !loadError && (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-900/60 z-40">
+                  <div className="rounded-lg px-5 py-4 text-center">
+                    <div className="text-sm font-semibold text-white">Upload a WSI to start</div>
+                    <div className="text-xs text-white/80 mt-1">
+                      Use the uploader in the left Uploads tab to load a slide.
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend//src//components//viewer//ToolsSidebar.tsx

@@ -0,0 +1,464 @@
+import { useState } from "react";
+import { MousePointer, Square, Pentagon, Circle, Brush, ChevronLeft, ChevronRight } from "lucide-react";
+import { Tool } from "./PathoraViewer";
+import { type Annotation } from "./AnnotationCanvas";
+
+interface ToolsSidebarProps {
+  selectedTool: Tool;
+  onToolChange: (tool: Tool) => void;
+  annotations: Annotation[];
+  selectedAnnotationId: string | null;
+  onSelectAnnotation: (annotationId: string | null) => void;
+  uploadedSlides: Array<{
+    id: string;
+    name: string;
+    uploadedAt: string;
+    levelCount: number;
+    levelDimensions: number[][];
+  }>;
+  tileServerUrl: string;
+  onTileServerUrlChange: (value: string) => void;
+  onSlideFileChange: (file: File | null) => void;
+  slideFileName: string | null;
+  onUploadSlide: () => void;
+  isTileLoading: boolean;
+  tileLoadError: string | null;
+  onSelectUploadedSlide: (slideId: string) => void;
+  activeLabel: string;
+  onLabelChange: (label: string) => void;
+  imageMeta: {
+    stain: string;
+    width: number | null;
+    height: number | null;
+    levelCount: number | null;
+    mpp: number | null;
+    slideId: string;
+  };
+  channelVisibility: {
+    original: boolean;
+    hematoxylin: boolean;
+    eosin: boolean;
+  };
+  onChannelToggle: (channel: "original" | "hematoxylin" | "eosin", value: boolean) => void;
+  isTileLoaded: boolean;
+  isCollapsed: boolean;
+  onToggleCollapsed: () => void;
+}
+
+export function ToolsSidebar({
+  selectedTool,
+  onToolChange,
+  annotations,
+  selectedAnnotationId,
+  onSelectAnnotation,
+  uploadedSlides,
+  tileServerUrl,
+  onTileServerUrlChange,
+  onSlideFileChange,
+  slideFileName,
+  onUploadSlide,
+  isTileLoading,
+  tileLoadError,
+  onSelectUploadedSlide,
+  activeLabel,
+  onLabelChange,
+  imageMeta,
+  channelVisibility,
+  onChannelToggle,
+  isTileLoaded,
+  isCollapsed,
+  onToggleCollapsed,
+}: ToolsSidebarProps) {
+  const [activeTab, setActiveTab] = useState<"tools" | "image" | "images" | "annotations">("tools");
+
+  const tools = [
+    { id: "select" as Tool, label: "Select", icon: MousePointer },
+    { id: "rectangle" as Tool, label: "Rectangle", icon: Square },
+    { id: "polygon" as Tool, label: "Polygon", icon: Pentagon },
+    { id: "ellipse" as Tool, label: "Ellipse", icon: Circle },
+    { id: "brush" as Tool, label: "Brush", icon: Brush },
+  ];
+
+  const annotationLabel = (annotation: Annotation, index: number) => {
+    if (annotation.label && annotation.label.trim().length > 0) {
+      return annotation.label;
+    }
+
+    return annotation.type === "rectangle"
+      ? "Rectangle"
+      : annotation.type === "polygon"
+        ? "Polygon"
+        : annotation.type === "ellipse"
+          ? "Ellipse"
+          : "Brush";
+  };
+
+  const normalizePoints = (points: Array<{ x: number; y: number }>, size = 24) => {
+    if (points.length === 0) return [];
+    const xs = points.map((p) => p.x);
+    const ys = points.map((p) => p.y);
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+    const width = Math.max(maxX - minX, 1);
+    const height = Math.max(maxY - minY, 1);
+    const padding = 2;
+    const scale = Math.min((size - padding * 2) / width, (size - padding * 2) / height);
+
+    return points.map((p) => ({
+      x: (p.x - minX) * scale + padding,
+      y: (p.y - minY) * scale + padding,
+    }));
+  };
+
+  const normalizeBaseUrl = (value: string) => value.replace(/\/$/, "");
+  const baseTileUrl = normalizeBaseUrl(tileServerUrl);
+  const thumbnailSize = 192;
+
+  const renderAnnotationPreview = (annotation: Annotation) => {
+    const size = 24;
+    const stroke = annotation.color || "#9CA3AF";
+    const normalized = normalizePoints(annotation.points, size);
+
+    if (annotation.type === "rectangle" && normalized.length >= 2) {
+      const [p1, p2] = normalized;
+      const x = Math.min(p1.x, p2.x);
+      const y = Math.min(p1.y, p2.y);
+      const width = Math.abs(p2.x - p1.x);
+      const height = Math.abs(p2.y - p1.y);
+      return (
+        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <rect x={x} y={y} width={width} height={height} fill="none" stroke={stroke} strokeWidth="2" />
+        </svg>
+      );
+    }
+
+    if (annotation.type === "ellipse" && normalized.length >= 2) {
+      const [p1, p2] = normalized;
+      const cx = (p1.x + p2.x) / 2;
+      const cy = (p1.y + p2.y) / 2;
+      const rx = Math.abs(p2.x - p1.x) / 2;
+      const ry = Math.abs(p2.y - p1.y) / 2;
+      return (
+        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <ellipse cx={cx} cy={cy} rx={Math.max(1, rx)} ry={Math.max(1, ry)} fill="none" stroke={stroke} strokeWidth="2" />
+        </svg>
+      );
+    }
+
+    if ((annotation.type === "polygon" || annotation.type === "brush") && normalized.length >= 2) {
+      const path = normalized.map((p, idx) => `${idx === 0 ? "M" : "L"}${p.x} ${p.y}`).join(" ");
+      const closed = annotation.type === "polygon" ? " Z" : "";
+      return (
+        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <path d={`${path}${closed}`} fill="none" stroke={stroke} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
+        </svg>
+      );
+    }
+
+    return (
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <rect x="4" y="4" width="16" height="16" fill="none" stroke={stroke} strokeWidth="2" />
+      </svg>
+    );
+  };
+
+  return (
+    <aside
+      className={`bg-gray-800 border-r border-gray-700 flex flex-col py-4 transition-all duration-300 ${
+        isCollapsed ? "w-20" : "w-72"
+      }`}
+    >
+      <div className={`flex items-center justify-between px-3 ${isCollapsed ? "mb-2" : "mb-3"}`}>
+        <div className="text-white text-xs font-semibold">
+          {isCollapsed ? "" : "PANEL"}
+        </div>
+        <button
+          onClick={onToggleCollapsed}
+          className="p-1 rounded hover:bg-gray-700 text-gray-300"
+          title={isCollapsed ? "Expand panel" : "Collapse panel"}
+        >
+          {isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
+        </button>
+      </div>
+
+      <div className={`h-px ${isCollapsed ? "mx-3" : "mx-4"} bg-gray-600 mb-3`} />
+
+      {!isCollapsed && (
+        <div className="px-3 mb-3">
+          <div className="flex items-center bg-gray-700 rounded-lg p-1 text-[11px]">
+            {([
+              { id: "tools", label: "Tools" },
+              { id: "images", label: "Uploads" },
+              { id: "image", label: "Image" },
+              { id: "annotations", label: "Annotations" },
+            ] as const).map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex-1 px-2 py-1 rounded-md transition-colors ${
+                  activeTab === tab.id
+                    ? "bg-teal-600 text-white"
+                    : "text-gray-200 hover:bg-gray-600"
+                }`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {(isCollapsed || activeTab === "tools") && (
+        <div className="px-3">
+          {!isCollapsed && (
+            <div className="mb-3">
+              <label className="block text-[11px] text-gray-300 mb-1">Annotation label</label>
+              <select
+                value={activeLabel}
+                onChange={(e) => onLabelChange(e.target.value)}
+                className="w-full text-xs bg-gray-700 text-gray-200 border border-gray-600 rounded px-2 py-1"
+              >
+                <option value="Tumor">Tumor</option>
+                <option value="Benign">Benign</option>
+                <option value="Stroma">Stroma</option>
+                <option value="Necrosis">Necrosis</option>
+                <option value="DCIS">DCIS</option>
+                <option value="Invasive">Invasive</option>
+              </select>
+            </div>
+          )}
+
+          <div className={`grid ${isCollapsed ? "grid-cols-1" : "grid-cols-2"} gap-2`}>
+            {tools.map((tool) => {
+              const Icon = tool.icon;
+              const isSelected = selectedTool === tool.id;
+
+              return (
+                <button
+                  key={tool.id}
+                  onClick={() => onToolChange(isSelected ? "none" : tool.id)}
+                  className={`
+                    h-14 flex flex-col items-center justify-center rounded-lg
+                    transition-all duration-200
+                    ${
+                      isSelected
+                        ? "bg-teal-600 text-white shadow-lg"
+                        : "bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white"
+                    }
+                  `}
+                  title={tool.label}
+                >
+                  <Icon className="w-5 h-5" />
+                  {!isCollapsed && (
+                    <span className="text-[10px] mt-1 font-medium">{tool.label}</span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {!isCollapsed && activeTab === "image" && (
+        <div className="mt-2 px-3">
+          <div className="text-xs font-semibold text-gray-200 mb-2">Slide metadata</div>
+          <div className="space-y-2 text-[11px] text-gray-300">
+            <div className="flex items-center justify-between">
+              <span className="text-gray-400">Stain</span>
+              <span>{imageMeta.stain}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-gray-400">Size</span>
+              <span>
+                {imageMeta.width && imageMeta.height
+                  ? `${imageMeta.width} x ${imageMeta.height}`
+                  : "n/a"}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-gray-400">Levels</span>
+              <span>{imageMeta.levelCount ?? "n/a"}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-gray-400">MPP</span>
+              <span>{imageMeta.mpp ? `${imageMeta.mpp.toFixed(3)} µm/px` : "n/a"}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-gray-400">Case / Slide</span>
+              <span className="text-right max-w-[130px] truncate">{imageMeta.slideId}</span>
+            </div>
+          </div>
+
+          <div className="mt-4">
+            <div className="text-xs font-semibold text-gray-200 mb-2">Channels</div>
+            <div className="space-y-2 text-[11px] text-gray-300">
+              {([
+                { id: "original", label: "Original", color: "bg-gray-400" },
+                { id: "hematoxylin", label: "Hematoxylin", color: "bg-indigo-500" },
+                { id: "eosin", label: "Eosin", color: "bg-pink-500" },
+              ] as const).map((channel) => (
+                <label
+                  key={channel.id}
+                  className={`flex items-center justify-between rounded px-2 py-1 border border-gray-700 ${
+                    isTileLoaded ? "hover:bg-gray-700/50" : "opacity-50"
+                  }`}
+                >
+                  <span className="flex items-center gap-2">
+                    <span className={`w-3 h-3 rounded-sm ${channel.color}`} />
+                    {channel.label}
+                  </span>
+                  <input
+                    type="radio"
+                    name="channel"
+                    disabled={!isTileLoaded}
+                    checked={channelVisibility[channel.id]}
+                    onChange={() => {
+                      onChannelToggle("original", channel.id === "original");
+                      onChannelToggle("hematoxylin", channel.id === "hematoxylin");
+                      onChannelToggle("eosin", channel.id === "eosin");
+                    }}
+                    className="accent-teal-500"
+                  />
+                </label>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {!isCollapsed && activeTab === "images" && (
+        <div className="mt-2 px-3">
+          <div className="text-xs font-semibold text-gray-200 mb-2">Uploaded images</div>
+          <div className="space-y-2 mb-3">
+            <label className="block text-[11px] text-gray-300">Tile server URL</label>
+            <input
+              value={tileServerUrl}
+              onChange={(e) => onTileServerUrlChange(e.target.value)}
+              className="w-full text-xs bg-gray-700 text-gray-200 border border-gray-600 rounded px-2 py-1"
+              placeholder="http://localhost:8001"
+            />
+
+            <label className="block text-[11px] text-gray-300">WSI file (SVS/TIFF)</label>
+            <input
+              type="file"
+              accept=".svs,.tif,.tiff"
+              onChange={(e) => {
+                const file = e.target.files?.[0] ?? null;
+                onSlideFileChange(file);
+              }}
+              className="w-full text-xs bg-gray-700 text-gray-200 border border-gray-600 rounded px-2 py-1"
+            />
+            {slideFileName && (
+              <p className="text-[11px] text-gray-400">Selected: {slideFileName}</p>
+            )}
+
+            <button
+              onClick={onUploadSlide}
+              disabled={isTileLoading}
+              className="w-full bg-teal-600 text-white text-xs font-semibold py-1.5 rounded hover:bg-teal-700 disabled:opacity-60"
+            >
+              {isTileLoading ? "Uploading slide..." : "Load Image"}
+            </button>
+
+            {tileLoadError && (
+              <p className="text-[11px] text-red-400">{tileLoadError}</p>
+            )}
+          </div>
+          <div className="text-[11px] text-gray-400 mb-2">
+            {uploadedSlides.length} total
+          </div>
+          <div className="max-h-[50vh] overflow-y-auto pr-1 space-y-2">
+            {uploadedSlides.length === 0 && (
+              <div className="text-[11px] text-gray-500 bg-gray-700/40 rounded p-2">
+                No uploads yet
+              </div>
+            )}
+            {uploadedSlides.map((slide) => (
+              <button
+                key={slide.id}
+                type="button"
+                onClick={() => onSelectUploadedSlide(slide.id)}
+                className={`w-full rounded border px-2 py-2 text-[11px] transition-colors h-[88px] ${
+                  slide.id === imageMeta.slideId
+                    ? "bg-teal-600/20 border-teal-500 text-teal-100"
+                    : "bg-gray-700/40 border-gray-700 text-gray-200"
+                }`}
+              >
+                <div className="flex items-center gap-3 h-full">
+                  <div className="w-16 h-16 rounded bg-white border border-gray-700 overflow-hidden flex-shrink-0">
+                    <img
+                      src={`${baseTileUrl}/slides/${slide.id}/thumbnail?size=${thumbnailSize}&channel=original`}
+                      alt={`WSI preview ${slide.id}`}
+                      className="w-full h-full object-contain"
+                      loading="lazy"
+                    />
+                  </div>
+                  <div className="min-w-0 text-left">
+                    <div className="text-xs font-semibold truncate text-left">{slide.name}</div>
+                    <div className="text-[10px] text-gray-400 truncate text-left">{slide.uploadedAt}</div>
+                    <div className="text-[10px] text-gray-400 truncate text-left">{slide.id}</div>
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {!isCollapsed && activeTab === "annotations" && (
+        <div className="mt-4 px-3">
+          <div className="text-xs font-semibold text-gray-200 mb-2">Annotations</div>
+          <div className="text-[11px] text-gray-400 mb-2">
+            {annotations.length} total
+          </div>
+          <div className="max-h-[50vh] overflow-y-auto pr-1 space-y-1">
+            {annotations.length === 0 && (
+              <div className="text-[11px] text-gray-500 bg-gray-700/40 rounded p-2">
+                No annotations yet
+              </div>
+            )}
+            {annotations.map((annotation, index) => {
+              const isActive = annotation.id === selectedAnnotationId;
+              const label = annotationLabel(annotation, index);
+              return (
+                <button
+                  key={annotation.id}
+                  onClick={() => onSelectAnnotation(annotation.id)}
+                  className={`w-full text-left px-2 py-2 rounded border transition-colors ${
+                    isActive
+                      ? "bg-teal-600/20 border-teal-500 text-teal-100"
+                      : "bg-gray-700/40 border-gray-700 text-gray-200 hover:bg-gray-700"
+                  }`}
+                  title={annotation.id}
+                >
+                  <div className="flex items-center gap-2">
+                    <div className="w-7 h-7 flex items-center justify-center rounded bg-gray-800/60 border border-gray-700">
+                      {renderAnnotationPreview(annotation)}
+                    </div>
+                    <span className="text-xs font-semibold truncate text-left flex-1">{label}</span>
+                    <span className="text-[10px] text-gray-400">
+                      {annotation.type === "rectangle"
+                        ? "Rect"
+                        : annotation.type === "polygon"
+                          ? "Poly"
+                          : annotation.type === "ellipse"
+                            ? "Ell"
+                            : "Brush"}
+                    </span>
+                  </div>
+                  <div className="text-[10px] text-gray-400 truncate">
+                    {annotation.id}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <div className="flex-1" />
+    </aside>
+  );
+}

frontend//src//components//viewer//TopToolbar.tsx

@@ -0,0 +1,182 @@
+import { Undo2, Trash2, ZoomIn, ZoomOut, Eye, EyeOff, Layers } from "lucide-react";
+
+interface TopToolbarProps {
+  slideName: string;
+  zoomLevel: number;
+  zoomPresets: number[];
+  onZoomPreset: (level: number) => void;
+  micronsPerPixel?: number | null;
+  showAnnotations: boolean;
+  showHeatmap: boolean;
+  onUndo: () => void;
+  onDelete: () => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onToggleAnnotations: () => void;
+  onToggleHeatmap: () => void;
+  canUndo: boolean;
+  canDelete: boolean;
+}
+
+export function TopToolbar({
+  slideName,
+  zoomLevel,
+  zoomPresets,
+  onZoomPreset,
+  micronsPerPixel,
+  showAnnotations,
+  showHeatmap,
+  onUndo,
+  onDelete,
+  onZoomIn,
+  onZoomOut,
+  onToggleAnnotations,
+  onToggleHeatmap,
+  canUndo,
+  canDelete,
+}: TopToolbarProps) {
+  const scaleBarPixels = 90;
+  const safeZoom = Math.max(zoomLevel, 0.0001);
+  const microns = micronsPerPixel ? (micronsPerPixel * scaleBarPixels) / safeZoom : null;
+  const micronsLabel = microns
+    ? `${microns >= 100 ? Math.round(microns) : microns.toFixed(1)} µm`
+    : "";
+
+  const isActivePreset = (preset: number) => {
+    return Math.abs(zoomLevel - preset) < 0.5;
+  };
+
+  return (
+    <div className="min-h-14 bg-white border-b border-gray-200 flex flex-wrap items-center justify-between gap-3 px-4 py-2 shadow-sm">
+      {/* Left Section: Slide Info */}
+      <div className="flex items-center gap-3">
+        <div>
+          <h2 className="text-base font-semibold text-gray-800">{slideName}</h2>
+          <p className="text-[11px] text-gray-500">
+            Zoom: {zoomLevel.toFixed(2)}x
+          </p>
+        </div>
+      </div>
+
+      {/* Center-Left Section: Annotation Controls */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onUndo}
+          disabled={!canUndo}
+          className={`px-2 py-1 rounded-md flex items-center gap-1.5 transition-all ${
+            canUndo
+              ? "bg-blue-600 text-white hover:bg-blue-700"
+              : "bg-gray-300 text-gray-500 cursor-not-allowed"
+          }`}
+          title="Undo last annotation"
+        >
+          <Undo2 className="w-3.5 h-3.5" />
+          <span className="text-[11px] font-semibold">Undo</span>
+        </button>
+
+        <button
+          onClick={onDelete}
+          disabled={!canDelete}
+          className={`px-2 py-1 rounded-md flex items-center gap-1.5 transition-all ${
+            canDelete
+              ? "bg-red-600 text-white hover:bg-red-700"
+              : "bg-gray-300 text-gray-500 cursor-not-allowed"
+          }`}
+          title="Delete selected annotation"
+        >
+          <Trash2 className="w-3.5 h-3.5" />
+          <span className="text-[11px] font-semibold">Delete</span>
+        </button>
+      </div>
+
+      {/* Center Section: Zoom Controls */}
+      <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1">
+          {zoomPresets.map((preset) => (
+            <button
+              key={preset}
+              onClick={() => onZoomPreset(preset)}
+              className={`px-2 py-1 rounded-md text-[11px] font-semibold border transition-colors ${
+                isActivePreset(preset)
+                  ? "bg-teal-600 text-white border-teal-600"
+                  : "bg-white text-gray-700 border-gray-300 hover:bg-gray-100"
+              }`}
+              title={`Set zoom to ${preset}x`}
+            >
+              {preset}x
+            </button>
+          ))}
+        </div>
+        <button
+          onClick={onZoomOut}
+          className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+          title="Zoom Out"
+        >
+          <ZoomOut className="w-4.5 h-4.5 text-gray-700" />
+        </button>
+
+        <button
+          onClick={onZoomIn}
+          className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+          title="Zoom In"
+        >
+          <ZoomIn className="w-4.5 h-4.5 text-gray-700" />
+        </button>
+      </div>
+
+      {/* Right Section: Scale + Toggle Buttons */}
+      <div className="flex items-center gap-3">
+        {micronsPerPixel && (
+          <div className="flex items-center gap-2">
+            <div className="text-[11px] text-gray-500">Scale</div>
+            <div className="flex flex-col items-end">
+              <div
+                className="h-1 bg-gray-700 rounded"
+                style={{ width: scaleBarPixels }}
+              />
+              <div className="text-[11px] text-gray-600 mt-1">{micronsLabel}</div>
+            </div>
+          </div>
+        )}
+
+        <div className="flex items-center gap-2">
+        <button
+          onClick={onToggleAnnotations}
+          className={`
+            px-3 py-1.5 rounded-lg flex items-center gap-2 transition-all
+            ${
+              showAnnotations
+                ? "bg-teal-100 text-teal-700 border border-teal-300"
+                : "bg-gray-100 text-gray-600 border border-gray-300 hover:bg-gray-200"
+            }
+          `}
+          title="Toggle Annotations"
+        >
+          {showAnnotations ? (
+            <Eye className="w-4 h-4" />
+          ) : (
+            <EyeOff className="w-4 h-4" />
+          )}
+          <span className="text-[11px] font-medium">Annotations</span>
+        </button>
+
+        <button
+          onClick={onToggleHeatmap}
+          className={`
+            px-3 py-1.5 rounded-lg flex items-center gap-2 transition-all
+            ${
+              showHeatmap
+                ? "bg-orange-100 text-orange-700 border border-orange-300"
+                : "bg-gray-100 text-gray-600 border border-gray-300 hover:bg-gray-200"
+            }
+          `}
+          title="Toggle Heatmap"
+        >
+          <Layers className="w-4 h-4" />
+          <span className="text-[11px] font-medium">Heatmap</span>
+        </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend//src//components//viewer//index.ts

@@ -0,0 +1,5 @@
+export { PathoraViewer } from "./PathoraViewer";
+export { ToolsSidebar } from "./ToolsSidebar";
+export { TopToolbar } from "./TopToolbar";
+export { AnnotationCanvas, type Annotation } from "./AnnotationCanvas";
+export type { Tool } from "./PathoraViewer";

frontend//src//components//viewer//viewer.css

@@ -0,0 +1,58 @@
+/* OpenSeadragon Navigator Styling */
+.navigator {
+  border: 2px solid #14b8a6 !important;
+  background-color: rgba(0, 0, 0, 0.5) !important;
+}
+
+/* OpenSeadragon Display Region (current view indicator in minimap) */
+.displayregion {
+  border: 2px solid #0d9488 !important;
+  background-color: rgba(20, 184, 166, 0.2) !important;
+}
+
+/* Annotation Canvas Styling */
+canvas {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
+
+/* Crosshair cursor for drawing tools */
+.crosshair {
+  cursor: crosshair !important;
+}
+
+/* Default cursor */
+.viewer-container {
+  cursor: default;
+}
+
+/* Pan cursor */
+.pan-cursor {
+  cursor: grab !important;
+}
+
+.pan-cursor:active {
+  cursor: grabbing !important;
+}
+
+/* Smooth transitions */
+.openseadragon-canvas {
+  transition: opacity 0.3s ease-in-out;
+}
+
+/* Annotation overlay z-index stacking */
+.viewer-controls {
+  position: relative;
+  z-index: 30;
+}
+
+.annotation-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 40;
+}
+
+.osd-navigator {
+  z-index: 45;
+}