Initial commit: AI-powered Oil Spill Detection and Monitoring System

.gitignore

@@ -0,0 +1,29 @@
+# Node / Frontend
+node_modules/
+dist/
+build/
+.env
+.env.*
+!.env.example
+
+# Python / Backend
+__pycache__/
+*.py[cod]
+*$py.class
+.venv/
+env/
+venv/
+ENV/
+.env
+
+# Models / Large Files
+*.keras
+*.h5
+*.pkl
+model/saved_models/*.keras
+data/images/
+data/masks/
+
+# OS
+.DS_Store
+Thumbs.db

Colab_Training_Notebook.ipynb

@@ -0,0 +1,68 @@
+{
+  "nbformat": 4,
+  "nbformat_minor": 4,
+  "metadata": {},
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "# DeepOceans - Satellite Semantic Segmentation Training\nMake sure to go to **Runtime > Change runtime type > T4 GPU** before running."
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "# 1. Mount Google Drive\nfrom google.colab import drive\ndrive.mount('/content/drive')\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "# 2. Imports and Setup\nimport os\nimport glob\nimport tensorflow as tf\nfrom tensorflow.keras import layers, models, backend as K\nfrom tensorflow.keras.callbacks import ModelCheckpoint, EarlyStopping, ReduceLROnPlateau\nfrom sklearn.model_selection import train_test_split\n\nprint(\"TensorFlow Version:\", tf.__version__)\nprint(\"GPU Available:\", tf.config.list_physical_devices('GPU'))\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "# 3. U-Net Architecture Construction\ndef conv_block(input_tensor, num_filters):\n    x = layers.Conv2D(num_filters, (3, 3), padding=\"same\")(input_tensor)\n    x = layers.BatchNormalization()(x)\n    x = layers.Activation(\"relu\")(x)\n    x = layers.Conv2D(num_filters, (3, 3), padding=\"same\")(x)\n    x = layers.BatchNormalization()(x)\n    x = layers.Activation(\"relu\")(x)\n    return x\n\ndef encoder_block(input_tensor, num_filters):\n    x = conv_block(input_tensor, num_filters)\n    p = layers.MaxPooling2D((2, 2))(x)\n    return x, p\n\ndef decoder_block(input_tensor, concat_tensor, num_filters):\n    x = layers.Conv2DTranspose(num_filters, (2, 2), strides=(2, 2), padding=\"same\")(input_tensor)\n    x = layers.concatenate([x, concat_tensor])\n    x = conv_block(x, num_filters)\n    return x\n\ndef build_unet(input_shape=(256, 256, 3)):\n    inputs = layers.Input(shape=input_shape)\n    e1, p1 = encoder_block(inputs, 64)\n    e2, p2 = encoder_block(p1, 128)\n    e3, p3 = encoder_block(p2, 256)\n    e4, p4 = encoder_block(p3, 512)\n    b = conv_block(p4, 1024)\n    d1 = decoder_block(b, e4, 512)\n    d2 = decoder_block(d1, e3, 256)\n    d3 = decoder_block(d2, e2, 128)\n    d4 = decoder_block(d3, e1, 64)\n    outputs = layers.Conv2D(1, (1, 1), padding=\"same\", activation=\"sigmoid\")(d4)\n    model = models.Model(inputs, outputs, name=\"U-Net\")\n    return model\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "# 4. Custom Loss Functions & Metrics (Dice + BCE)\ndef dice_coef(y_true, y_pred, smooth=1e-6):\n    y_true_f = K.flatten(y_true)\n    y_pred_f = K.flatten(y_pred)\n    intersection = K.sum(y_true_f * y_pred_f)\n    return (2. * intersection + smooth) / (K.sum(y_true_f) + K.sum(y_pred_f) + smooth)\n\ndef dice_loss(y_true, y_pred):\n    return 1 - dice_coef(y_true, y_pred)\n\ndef bce_dice_loss(y_true, y_pred):\n    bce = tf.keras.losses.binary_crossentropy(y_true, y_pred)\n    bce = K.mean(bce) \n    return bce + dice_loss(y_true, y_pred)\n\ndef iou_metric(y_true, y_pred, smooth=1e-6):\n    y_true_f = K.flatten(y_true)\n    y_pred_f = K.flatten(y_pred)\n    intersection = K.sum(y_true_f * y_pred_f)\n    union = K.sum(y_true_f) + K.sum(y_pred_f) - intersection\n    return (intersection + smooth) / (union + smooth)\n\ndef get_metrics():\n    return [\n        dice_coef,\n        iou_metric,\n        tf.keras.metrics.Precision(name='precision'),\n        tf.keras.metrics.Recall(name='recall')\n    ]\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "# 5. Data Pipeline & Augmentation\nIMG_SIZE = (256, 256)\n\ndef decode_image(image_file):\n    image = tf.io.read_file(image_file)\n    image = tf.image.decode_image(image, channels=3, expand_animations=False)\n    image = tf.image.resize(image, IMG_SIZE)\n    image = tf.cast(image, tf.float32) / 255.0\n    return image\n\ndef decode_mask(mask_file):\n    mask = tf.io.read_file(mask_file)\n    mask = tf.image.decode_image(mask, channels=1, expand_animations=False)\n    mask = tf.image.resize(mask, IMG_SIZE)\n    mask = tf.cast(mask, tf.float32) / 255.0\n    mask = tf.math.round(mask) \n    return mask\n\ndef process_path(image_path, mask_path):\n    image = decode_image(image_path)\n    mask = decode_mask(mask_path)\n    return image, mask\n\ndef augment(image, mask):\n    if tf.random.uniform(()) > 0.5:\n        image = tf.image.flip_left_right(image)\n        mask = tf.image.flip_left_right(mask)\n    if tf.random.uniform(()) > 0.5:\n        image = tf.image.flip_up_down(image)\n        mask = tf.image.flip_up_down(mask)\n    image = tf.image.random_brightness(image, max_delta=0.2)\n    image = tf.clip_by_value(image, 0.0, 1.0)\n    return image, mask\n\ndef get_dataset(image_paths, mask_paths, batch_size=16, is_train=True):\n    dataset = tf.data.Dataset.from_tensor_slices((image_paths, mask_paths))\n    if is_train:\n        dataset = dataset.shuffle(buffer_size=1000)\n    dataset = dataset.map(process_path, num_parallel_calls=tf.data.AUTOTUNE)\n    if is_train:\n        dataset = dataset.map(augment, num_parallel_calls=tf.data.AUTOTUNE)\n    dataset = dataset.batch(batch_size)\n    dataset = dataset.prefetch(tf.data.AUTOTUNE)\n    return dataset\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "# 6. Execute Training\n\n# ==============================================================================\n# \u26a0\ufe0f ACTION REQUIRED: Verify this points to the folder containing your dataset\n# (Ensure there is an 'images/' and 'masks/' folder inside this directory)\n# ==============================================================================\nDATA_DIR = '/content/drive/MyDrive/1j35RM-5uZbTOfDv0mBTeRRmOUPvvg28t'\n# ==============================================================================\n\nEPOCHS = 50\nBATCH_SIZE = 16\nLEARNING_RATE = 1e-4\n\ndef get_file_paths(data_dir):\n    image_dir = os.path.join(data_dir, 'images')\n    mask_dir = os.path.join(data_dir, 'masks')\n    \n    image_paths = glob.glob(os.path.join(image_dir, '*.*'))\n    image_paths.sort()\n    \n    final_img_paths = []\n    final_mask_paths = []\n    for img in image_paths:\n        base = os.path.splitext(os.path.basename(img))[0]\n        masks = glob.glob(os.path.join(mask_dir, f\"{base}.*\"))\n        if len(masks) > 0:\n            final_img_paths.append(img)\n            final_mask_paths.append(masks[0])\n\n    return final_img_paths, final_mask_paths\n\nprint(\"Hunting for dataset at folder:\", DATA_DIR)\nimg_paths, mask_paths = get_file_paths(DATA_DIR)\nprint(f\"Found {len(img_paths)} valid image/mask pairs.\\n\")\n\nif len(img_paths) == 0:\n    print(\"\u274c ERROR: No images found. Check that DATA_DIR contains your 'images' and 'masks' folders.\")\nelse:\n    # 80/20 train/validation split\n    train_x, val_x, train_y, val_y = train_test_split(img_paths, mask_paths, test_size=0.2, random_state=42)\n    \n    train_dataset = get_dataset(train_x, train_y, batch_size=BATCH_SIZE, is_train=True)\n    val_dataset = get_dataset(val_x, val_y, batch_size=BATCH_SIZE, is_train=False)\n    \n    model = build_unet(input_shape=(256, 256, 3))\n    optimizer = tf.keras.optimizers.Adam(learning_rate=LEARNING_RATE)\n    \n    model.compile(optimizer=optimizer, loss=bce_dice_loss, metrics=get_metrics())\n    \n    # Save directly to the root of your Google Drive so it's easy to download\n    model_save_path = '/content/drive/MyDrive/oil_spill_unet_best.keras'\n    \n    callbacks = [\n        ModelCheckpoint(model_save_path, verbose=1, save_best_only=True, monitor='val_loss'),\n        EarlyStopping(monitor='val_loss', patience=15, restore_best_weights=True),\n        ReduceLROnPlateau(monitor='val_loss', factor=0.1, patience=5, verbose=1, min_lr=1e-6)\n    ]\n    \n    print(\"\ud83d\ude80 Initializing Training Pipeline...\")\n    history = model.fit(\n        train_dataset,\n        validation_data=val_dataset,\n        epochs=EPOCHS,\n        callbacks=callbacks\n    )\n    \n    print(\"\\n\u2705 Training Complete!\")\n    print(f\"Your trained model file has been successfully saved to: {model_save_path}\")\n    print(\"\u2b07\ufe0f You can now download this file and move it to your local 'model/saved_models/' folder.\")\n"
+      ]
+    }
+  ]
+}

README.md

@@ -0,0 +1,62 @@
+# Oil Spill Detection & Monitoring System
+
+This is a full-stack AI-driven application that detects oil spills from satellite imagery using a deep learning segmentation model (U-Net).
+
+## System Architecture
+*   **AI/ML**: TensorFlow / Keras (U-Net)
+*   **Backend**: FastAPI (REST API with Python)
+*   **Frontend**: React + Vite + TypeScript (Modern UI)
+*   **Containerization**: Docker & Docker Compose
+
+## Repository Directory Structure
+*   `backend/` - FastAPI predict/health endpoints and Inference Engine
+*   `frontend/` - React Vite App for the UI
+*   `model/` - U-Net architecture, Custom losses, and Training logic
+*   `utils/` - Data loading and augmentation pipelines utilizing `tf.data.Dataset`
+*   `data/` - Holds your images and masks
+*   `notebooks/` - Place to run exploratory code
+
+## Getting Data (Google Drive)
+Download the dataset using the following Google Drive link provided:
+`https://drive.google.com/drive/folders/1j35RM-5uZbTOfDv0mBTeRRmOUPvvg28t?usp=sharing`
+
+1. Download the images and masks folders inside it.
+2. Place them inside the `./data/` folder in the root directory like so:
+   ```
+   d:/Oill_SPLIT/data/images/
+   d:/Oill_SPLIT/data/masks/
+   ```
+
+## Local Setup (Without Docker)
+
+### Backend
+1. `cd backend`
+2. `pip install -r requirements.txt`
+3. `uvicorn main:app --reload`
+The API will be available at `http://localhost:8000`
+
+### Frontend
+1. `cd frontend`
+2. `npm install`
+3. `npm run dev`
+The React UI will be available at `http://localhost:5173`
+
+## Setup (With Docker)
+To run the entire suite using Docker:
+```bash
+docker-compose up --build
+```
+
+## Model Training Instructions (Google Colab / Kaggle)
+You can train the model on Google Colab leveraging the free T4 GPU. 
+
+1. Zip the `model/`, `utils/`, and `data/` directories and upload them to Google Drive or directly to Colab/Kaggle.
+2. Open a Colab Notebook.
+3. Install dependencies: `!pip install tensorflow scikit-learn pillow numpy`
+4. Run the training script:
+   ```bash
+   !python model/train.py --data_dir ./data --save_dir ./model/saved_models --epochs 50 --batch_size 16
+   ```
+5. Once trained, download `oil_spill_unet_best.keras` from `./model/saved_models` and place it in your local folder structure.
+
+*(Note: During initial development, if `oil_spill_unet_best.keras` isn't found, the backend will auto-initialize an untrained "stub" model so you can immediately test the UI and API offline).*

backend/Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Install system dependencies required for OpenCV/Pillow if needed
+RUN apt-get update && apt-get install -y libglib2.0-0 libsm6 libxext6 libxrender-dev && rm -rf /var/lib/apt/lists/*
+
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the entire project for path resolution, or correctly scope it
+COPY backend/ ./backend/
+COPY model/ ./model/
+COPY utils/ ./utils/
+
+EXPOSE 8000
+
+CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "8000"]

backend/inference.py

@@ -0,0 +1,75 @@
+import os
+import tensorflow as tf
+import numpy as np
+from PIL import Image
+import io
+import sys
+
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+from model.unet import build_unet
+from model.loss_metrics import get_metrics, bce_dice_loss
+
+# Path to the saved model weights
+MODEL_PATH = os.path.join(os.path.dirname(__file__), "../model/saved_models/oil_spill_unet_best.keras")
+IMG_SIZE = (256, 256)
+
+class OilSpillModel:
+    def __init__(self):
+        self.model = None
+        self.load_model()
+
+    def load_model(self):
+        print(f"Attempting to load model from: {os.path.abspath(MODEL_PATH)}")
+        if os.path.exists(MODEL_PATH):
+            try:
+                # Provide custom objects if model was saved with custom metrics/loss
+                custom_objects = {
+                    'bce_dice_loss': bce_dice_loss,
+                    'dice_coef': get_metrics()[0],
+                    'iou_metric': get_metrics()[1]
+                }
+                self.model = tf.keras.models.load_model(MODEL_PATH, custom_objects=custom_objects)
+                print("Model loaded successfully.")
+            except Exception as e:
+                print(f"Failed to load model from file: {e}")
+                self._build_stub_model()
+        else:
+            print("Trained model weights not found. Building an untrained stub model for development.")
+            self._build_stub_model()
+
+    def _build_stub_model(self):
+        """Used for development when trained weights aren't available yet."""
+        # Builds architecture with random weights
+        self.model = build_unet(input_shape=(256, 256, 3))
+        
+    def predict(self, image_bytes):
+        """
+        Takes raw image bytes, preprocesses, predicts, and returns the binary mask array and confidence score.
+        """
+        # Load image
+        img = Image.open(io.BytesIO(image_bytes)).convert("RGB")
+        
+        # Resize to network input shape
+        img = img.resize(IMG_SIZE)
+        
+        # Convert to numpy array and normalize to [0, 1]
+        img_array = np.array(img, dtype=np.float32) / 255.0
+        
+        # Expand dimension to create a batch size of 1
+        img_array = np.expand_dims(img_array, axis=0)
+        
+        # Inference
+        pred_mask = self.model.predict(img_array)[0] # Shape is (256, 256, 1)
+        
+        # Calculate confidence metric:
+        # We average the probability of pixels that the network thinks are part of the spill (>0.5 probability)
+        oil_pixels = pred_mask[pred_mask > 0.5]
+        confidence = float(np.mean(oil_pixels)) if len(oil_pixels) > 0 else 0.0
+        
+        # Threshold to create binary mask (255 for oil, 0 for background)
+        binary_mask = (pred_mask > 0.5).astype(np.uint8) * 255
+        
+        return binary_mask, confidence
+
+# Singleton prediction engine
+prediction_engine = OilSpillModel()

backend/main.py

@@ -0,0 +1,72 @@
+from fastapi import FastAPI, UploadFile, File, HTTPException
+from fastapi.responses import Response, JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+from PIL import Image
+import io
+import numpy as np
+import time
+
+import sys
+import os
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+from backend.inference import prediction_engine
+
+app = FastAPI(title="Oil Spill Detection API", version="1.0.0", description="API to detect oil spills from satellite images using U-Net")
+
+# Setup CORS for the React frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"], # Allow all for local dev
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+@app.get("/health")
+def health_check():
+    """Health check endpoint to ensure API and Model are ready."""
+    return {"status": "healthy", "model_loaded": prediction_engine.model is not None}
+
+@app.post("/predict")
+async def predict_spill(file: UploadFile = File(...)):
+    """Receives an image, performs inference, and returns a PNG mask segmenting the oil spill."""
+    if not file.content_type.startswith("image/"):
+        raise HTTPException(status_code=400, detail="Invalid file format. Upload an image.")
+    
+    try:
+        start_time = time.time()
+        
+        contents = await file.read()
+        
+        # Perform inference
+        mask_array, confidence = prediction_engine.predict(contents)
+        
+        # Convert mask array (256, 256, 1) -> (256, 256) for Pillow
+        if len(mask_array.shape) == 3 and mask_array.shape[-1] == 1:
+            mask_array = np.squeeze(mask_array, axis=-1)
+            
+        mask_image = Image.fromarray(mask_array.astype(np.uint8), mode="L")
+        
+        # Save Image to bytes
+        img_byte_arr = io.BytesIO()
+        mask_image.save(img_byte_arr, format='PNG')
+        img_byte_arr = img_byte_arr.getvalue()
+        
+        latency_ms = int((time.time() - start_time) * 1000)
+        
+        # Include metadata in headers so frontend can read confidence and latency
+        headers = {
+            "Access-Control-Expose-Headers": "X-Confidence-Score, X-Inference-Latency-Ms",
+            "X-Confidence-Score": str(round(confidence * 100, 2)),
+            "X-Inference-Latency-Ms": str(latency_ms)
+        }
+        
+        return Response(content=img_byte_arr, media_type="image/png", headers=headers)
+        
+    except Exception as e:
+        print(f"Error during prediction: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

backend/requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn
+python-multipart
+tensorflow
+numpy
+Pillow
+scikit-learn

docker-compose.yml

@@ -0,0 +1,26 @@
+version: '3.8'
+
+services:
+  backend:
+    build:
+      context: .
+      dockerfile: backend/Dockerfile
+    ports:
+      - "8000:8000"
+    volumes:
+      - ./backend:/app/backend
+      - ./model:/app/model
+    environment:
+      - PYTHONUNBUFFERED=1
+
+  frontend:
+    build:
+      context: .
+      dockerfile: frontend/Dockerfile
+    ports:
+      - "5173:5173"
+    volumes:
+      - ./frontend:/app/frontend
+      - /app/frontend/node_modules
+    depends_on:
+      - backend

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/Dockerfile

@@ -0,0 +1,14 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY frontend/package.json ./
+# If package-lock.json exists, copy it (using wildcard prevents failure if missing initially)
+COPY frontend/package-lock.json* ./
+RUN npm install
+
+COPY frontend/ .
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev", "--", "--host"]

frontend/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

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

frontend/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^1.8.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.0.4"
+  }
+}

frontend/src/App.css

@@ -0,0 +1,327 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+:root {
+  /* Color Palette */
+  --bg-app: #F8FAFC;
+  --bg-surface: #FFFFFF;
+  --bg-surface-hover: #F1F5F9;
+  
+  --text-primary: #0F172A;
+  --text-secondary: #475569;
+  --text-tertiary: #94A3B8;
+  
+  --accent: #0F766E;
+  --accent-hover: #0D9488;
+  --accent-light: #F0FDFA;
+  
+  --alert: #D97706;
+  --alert-light: #FEF3C7;
+  
+  --border-light: #E2E8F0;
+  --border-medium: #CBD5E1;
+
+  /* Shadows - Premium Soft */
+  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
+  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
+  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
+  --shadow-hover: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
+
+  /* Geometry */
+  --radius-sm: 6px;
+  --radius-md: 12px;
+  --radius-lg: 20px;
+  --radius-full: 9999px;
+  
+  /* Fonts */
+  --font-ui: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-ui);
+  background-color: var(--bg-app);
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* { box-sizing: border-box; }
+h1, h2, h3, h4, p { margin: 0; }
+
+/* SHARED ANIMATIONS & UTILS */
+@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+.fade-in { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+
+@keyframes spin { 100% { transform: rotate(360deg); } }
+.loader { width: 18px; height: 18px; border: 2px solid #FFF; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: spin 1s linear infinite; }
+
+.badge-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  background: var(--bg-app);
+  color: var(--text-secondary);
+  border-radius: var(--radius-full);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+
+/* ========================================================================= */
+/* LANDING PAGE                                                              */
+/* ========================================================================= */
+
+.landing-container { background: #FFFFFF; display: flex; flex-direction: column; }
+
+/* Nav */
+.nav-bar { display: flex; justify-content: space-between; align-items: center; padding: 20px 6%; position: absolute; width: 100%; top: 0; z-index: 100; }
+.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.25rem; color: var(--text-primary); letter-spacing: -0.02em; }
+.logo-icon { width: 32px; height: 32px; background: var(--text-primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
+
+.nav-actions { display: flex; align-items: center; gap: 24px; }
+.btn-text { background: none; border: none; font-family: var(--font-ui); font-weight: 500; font-size: 0.95rem; color: var(--text-secondary); cursor: pointer; transition: color 0.2s; }
+.btn-text:hover { color: var(--text-primary); }
+
+.btn-primary { background: var(--text-primary); color: #FFF; border: none; padding: 10px 20px; border-radius: var(--radius-md); font-weight: 500; font-family: var(--font-ui); cursor: pointer; transition: all 0.2s; }
+.btn-primary:hover { background: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
+
+/* Hero */
+.hero-section { padding: 160px 6% 120px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 32px; position: relative; overflow: hidden; }
+.hero-badge { display: inline-block; padding: 6px 16px; background: var(--accent-light); color: var(--accent); border-radius: var(--radius-full); font-weight: 600; font-size: 0.85rem; border: 1px solid rgba(15,118,110,0.1); }
+.hero-title { font-size: 4.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; max-width: 900px; color: var(--text-primary); z-index: 10; }
+.hero-description { font-size: 1.25rem; line-height: 1.6; color: var(--text-secondary); max-width: 650px; z-index: 10; }
+
+.hero-buttons { display: flex; gap: 16px; z-index: 10; }
+.btn-primary-lg { background: var(--accent); color: #FFF; border: none; padding: 16px 32px; border-radius: var(--radius-full); font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
+.btn-primary-lg:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 12px 24px -4px rgba(15,118,110,0.2); }
+.btn-secondary-lg { background: #FFF; color: var(--text-primary); border: 1px solid var(--border-medium); padding: 16px 32px; border-radius: var(--radius-full); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
+.btn-secondary-lg:hover { background: var(--bg-app); border-color: var(--text-primary); }
+
+.hero-background-glow {
+  position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 80%; height: 800px;
+  background: radial-gradient(circle, rgba(15,118,110,0.06) 0%, rgba(255,255,255,0) 70%); z-index: 0; pointer-events: none;
+}
+
+/* Features */
+.features-section { padding: 80px 6%; background: var(--bg-surface); }
+.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; max-width: 1400px; margin: 0 auto; }
+.feature-card { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
+.feature-icon-wrapper { width: 56px; height: 56px; background: var(--accent-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--accent); }
+.feature-card h3 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); }
+.feature-card p { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; }
+
+/* How it Works */
+.how-it-works-section { padding: 120px 6%; background: var(--bg-app); }
+.section-header { text-align: center; margin-bottom: 80px; }
+.section-header h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
+.section-header p { font-size: 1.1rem; color: var(--text-secondary); }
+
+.steps-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; max-width: 1400px; margin: 0 auto; }
+.step-card { background: var(--bg-surface); padding: 48px 32px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border-light); transition: all 0.3s ease; position: relative; overflow: hidden; }
+.step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
+.step-numeral { position: absolute; top: 16px; right: 24px; font-size: 5rem; font-weight: 800; color: var(--bg-app); opacity: 0.5; font-family: var(--font-mono); }
+.step-card h4 { font-size: 1.25rem; font-weight: 600; margin-bottom: 16px; position: relative; z-index: 10; }
+.step-card p { color: var(--text-secondary); line-height: 1.6; position: relative; z-index: 10; }
+
+/* Preview & CTA */
+.preview-section { padding: 120px 6% 40px; background: var(--bg-surface); display: flex; justify-content: center; }
+.preview-app-window { max-width: 1000px; width: 100%; box-shadow: var(--shadow-lg); border-radius: 12px; border: 1px solid var(--border-medium); overflow: hidden; background: #fff; }
+.app-window-header { height: 38px; background: #F1F5F9; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; padding: 0 16px; position: relative; }
+.mac-dots { display: flex; gap: 8px; }
+.mac-dot { width: 12px; height: 12px; border-radius: 50%; }
+.mac-dot.red { background: #FF5F56; } .mac-dot.yellow { background: #FFBD2E; } .mac-dot.green { background: #27C93F; }
+.app-title { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--font-ui); font-size: 0.75rem; color: var(--text-tertiary); font-weight: 500; letter-spacing: 0.05em; }
+.app-window-body { height: 500px; padding: 16px; background: var(--bg-app); }
+.app-mockup-skeleton { width: 100%; height: 100%; display: flex; gap: 16px; }
+.mock-nav { width: 200px; background: #FFF; border-radius: 8px; border: 1px solid var(--border-light); }
+.mock-layout { flex: 1; display: flex; flex-direction: column; gap: 16px; }
+.mock-top { display: flex; gap: 16px; height: 100px; }
+.mock-stat { flex: 1; background: #FFF; border-radius: 8px; border: 1px solid var(--border-light); }
+.mock-main { flex: 1; display: flex; gap: 16px; }
+.mock-side { width: 250px; background: #FFF; border-radius: 8px; border: 1px solid var(--border-light); }
+.mock-center { flex: 1; background: #FFF; border-radius: 8px; border: 1px solid var(--border-light); }
+
+.cta-section { padding: 120px 6%; text-align: center; background: var(--bg-surface); display: flex; flex-direction: column; align-items: center; gap: 24px; }
+.cta-section h2 { font-size: 3rem; font-weight: 800; letter-spacing: -0.02em; }
+.cta-section p { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 24px; }
+
+.landing-footer { background: var(--bg-app); padding: 40px 6%; text-align: center; border-top: 1px solid var(--border-light); }
+.footer-content { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; color: var(--text-tertiary); font-size: 0.9rem; }
+@media (max-width: 600px) { .footer-content { flex-direction: column; gap: 16px; } }
+
+
+/* ========================================================================= */
+/* DASHBOARD APPLICATION                                                     */
+/* ========================================================================= */
+
+.app-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-header {
+  height: 64px;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border-light);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 32px;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.app-logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1rem; color: var(--text-primary); }
+.app-badge { font-weight: 500; color: var(--text-tertiary); background: var(--bg-app); padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
+
+.header-actions { display: flex; align-items: center; gap: 24px; }
+.connection-status { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
+.status-orb { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); }
+
+.icon-btn, .profile-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
+.icon-btn:hover { background: var(--bg-app); color: var(--text-primary); }
+.profile-btn { background: var(--text-primary); color: #FFF; }
+.profile-btn:hover { background: var(--accent); }
+
+.dashboard-content {
+  flex: 1;
+  padding: 32px;
+  width: 100%;
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+.dashboard-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+/* Base Panel Styles */
+.panel {
+  background: var(--bg-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-light);
+  box-shadow: var(--shadow-sm);
+  padding: 24px;
+}
+
+.panel-header { display: flex; justify-content: space-between; align-items: center; }
+.panel-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
+
+/* Metrics Row (Top) */
+.metrics-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+}
+@media (max-width: 1200px) { .metrics-row { grid-template-columns: repeat(2, 1fr); } }
+
+.stat-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  transition: all 0.25s ease;
+  box-shadow: var(--shadow-sm);
+}
+.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-medium); }
+.stat-icon-wrapper { width: 48px; height: 48px; background: var(--bg-app); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
+.stat-content { display: flex; flex-direction: column; gap: 4px; flex: 1; }
+.stat-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
+.stat-value { font-size: 1.5rem; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); }
+
+.stat-control { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
+.stat-control input[type="range"] { flex: 1; accent-color: var(--accent); }
+.range-val { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; }
+
+/* Main Section: Upload + Log */
+.main-interaction-row {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 32px;
+}
+@media (max-width: 1024px) { .main-interaction-row { grid-template-columns: 1fr; } }
+
+/* Upload Component */
+.upload-container { display: flex; flex-direction: column; gap: 24px; }
+.dropzone {
+  flex: 1;
+  border: 2px dashed var(--border-medium);
+  border-radius: var(--radius-md);
+  background: var(--bg-app);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 24px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+}
+.dropzone input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
+.dropzone:hover, .dropzone.drag-active { border-color: var(--accent); background: var(--accent-light); }
+.dropzone-icon { color: var(--text-tertiary); margin-bottom: 16px; transition: transform 0.2s; }
+.dropzone:hover .dropzone-icon { transform: translateY(-4px); color: var(--accent); }
+.dropzone-text { font-size: 1rem; color: var(--text-primary); margin-bottom: 8px; font-weight: 500; }
+.dropzone-primary { color: var(--accent); font-weight: 600; }
+.dropzone-secondary { font-size: 0.85rem; color: var(--text-secondary); }
+
+.selected-file-chip { margin-top: 16px; font-family: var(--font-mono); font-size: 0.85rem; background: #FFF; padding: 6px 16px; border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); z-index: 10; font-weight: 500; }
+
+.btn-action-lg {
+  width: 100%;
+  padding: 16px;
+  border-radius: var(--radius-md);
+  background: var(--text-primary);
+  color: #FFF;
+  font-weight: 600;
+  font-size: 1rem;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+.btn-action-lg:not(:disabled):hover { background: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
+.btn-action-lg:disabled { opacity: 0.6; cursor: not-allowed; }
+
+/* History Component */
+.history-container { display: flex; flex-direction: column; gap: 16px; min-height: 400px; }
+.record-count { background: var(--bg-app); padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
+.history-list { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: 340px; padding-right: 8px; }
+.history-row { display: flex; align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); transition: all 0.2s; cursor: default; }
+.history-row:hover { background: var(--bg-app); border-color: var(--border-medium); }
+.history-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--border-light); }
+.history-details { flex: 1; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
+.history-filename { font-size: 0.95rem; font-weight: 600; font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
+.history-time { font-size: 0.8rem; color: var(--text-secondary); }
+.history-status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
+.status-badge { padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
+.status-badge.alert { background: var(--alert-light); color: var(--alert); }
+.status-badge.clear { background: var(--bg-app); color: var(--text-secondary); }
+.history-score { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--text-primary); }
+.empty-state { padding: 48px; text-align: center; color: var(--text-tertiary); font-weight: 500; border: 2px dashed var(--border-light); border-radius: var(--radius-md); margin-top: 24px; }
+
+
+/* Bottom Component: Visualizations */
+.visualization-container { padding: 32px; }
+.frames-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
+@media (max-width: 900px) { .frames-grid { grid-template-columns: 1fr; } }
+.frame-card { display: flex; flex-direction: column; gap: 12px; }
+.frame-header { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }
+.frame-content { aspect-ratio: 1; background: var(--bg-app); border-radius: var(--radius-md); border: 1px solid var(--border-light); box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
+.frame-content.dark-mode { background: #0F172A; border-color: #1E293B; }
+.frame-content img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
+.invert-render { filter: invert(1); }
+.feature-overlay { mix-blend-mode: multiply; opacity: 0.8; filter: sepia(1) hue-rotate(130deg) saturate(500%); }

frontend/src/App.tsx

@@ -0,0 +1,392 @@
+import React, { useState } from 'react';
+import { UploadCloud, Activity, CheckCircle, Layers, BarChart2, ArrowRight, ShieldCheck, Zap, Globe, Cpu, Settings, User } from 'lucide-react';
+import './App.css';
+
+interface HistoryRecord {
+  id: number;
+  timestamp: string;
+  filename: string;
+  confidence: number;
+  thumbnail: string;
+}
+
+function LandingPage({ onEnter }: { onEnter: () => void }) {
+  return (
+    <div className="landing-container">
+      <nav className="nav-bar">
+        <div className="logo">
+          <div className="logo-icon"><Activity size={20} color="#fff" /></div>
+          DeepOceans
+        </div>
+        <div className="nav-actions">
+          <button className="btn-text">Documentation</button>
+          <button className="btn-text">API Features</button>
+          <button className="btn-primary" onClick={onEnter}>View Dashboard</button>
+        </div>
+      </nav>
+
+      <main>
+        <section className="hero-section">
+          <div className="hero-badge">DeepOceans v1.2 Engine Live</div>
+          <h1 className="hero-title">Protecting Marine Life with Precision AI.</h1>
+          <p className="hero-description">
+            Enterprise-grade anomaly detection for satellite telemetry. Monitor coastal regions and detect oceanic oil spills automatically using our state-of-the-art segmentation network.
+          </p>
+          <div className="hero-buttons">
+            <button className="btn-primary-lg" onClick={onEnter}>Start Monitoring <ArrowRight size={20} /></button>
+            <button className="btn-secondary-lg">Talk to Sales</button>
+          </div>
+          <div className="hero-background-glow"></div>
+        </section>
+
+        <section className="features-section">
+          <div className="feature-grid">
+            <div className="feature-card">
+              <div className="feature-icon-wrapper"><Zap size={24} className="feature-icon" /></div>
+              <h3>Real-Time Inference</h3>
+              <p>Achieve sub-200ms latency on 256x256 image segmentation masks utilizing optimized T4 compute instances.</p>
+            </div>
+            <div className="feature-card">
+              <div className="feature-icon-wrapper"><Globe size={24} className="feature-icon" /></div>
+              <h3>Satellite Agnostic</h3>
+              <p>Process telemetry from SAR, Sentinel-1, or multi-spectral sources effortlessly through our robust API.</p>
+            </div>
+            <div className="feature-card">
+              <div className="feature-icon-wrapper"><ShieldCheck size={24} className="feature-icon" /></div>
+              <h3>Validated Accuracy</h3>
+              <p>Averaging 0.84 IoU against validation datasets, ensuring you capture maximum spill events with minimal noise.</p>
+            </div>
+            <div className="feature-card">
+              <div className="feature-icon-wrapper"><Cpu size={24} className="feature-icon" /></div>
+              <h3>Seamless Integration</h3>
+              <p>Plug predictions directly into your existing command center via standard REST protocols.</p>
+            </div>
+          </div>
+        </section>
+
+        <section className="how-it-works-section">
+          <div className="section-header">
+            <h2>Streamlined Operations</h2>
+            <p>From raw signal to actionable intelligence in three steps.</p>
+          </div>
+          <div className="steps-container">
+            <div className="step-card">
+              <span className="step-numeral">01</span>
+              <h4>Data Ingestion</h4>
+              <p>Upload your optical or synthetic aperture radar imagery directly into our secure pipeline.</p>
+            </div>
+            <div className="step-card">
+              <span className="step-numeral">02</span>
+              <h4>Neural Processing</h4>
+              <p>Our proprietary U-Net architecture isolates hydrocarbon signatures instantly.</p>
+            </div>
+            <div className="step-card">
+              <span className="step-numeral">03</span>
+              <h4>Spatial Analytics</h4>
+              <p>Generate highly accurate masks and probability scores to dispatch cleanup crews faster.</p>
+            </div>
+          </div>
+        </section>
+
+        <section className="preview-section">
+          <div className="preview-app-window">
+             <div className="app-window-header">
+               <div className="mac-dots"><div className="mac-dot red"></div><div className="mac-dot yellow"></div><div className="mac-dot green"></div></div>
+               <div className="app-title">app.deepoceans.ai/workspace</div>
+             </div>
+             <div className="app-window-body">
+                <div className="app-mockup-skeleton">
+                   <div className="mock-nav"></div>
+                   <div className="mock-layout">
+                     <div className="mock-top">
+                       <div className="mock-stat"></div>
+                       <div className="mock-stat"></div>
+                       <div className="mock-stat"></div>
+                       <div className="mock-stat"></div>
+                     </div>
+                     <div className="mock-main">
+                        <div className="mock-side"></div>
+                        <div className="mock-center"></div>
+                     </div>
+                   </div>
+                </div>
+             </div>
+          </div>
+        </section>
+
+        <section className="cta-section">
+          <h2>Ready to revolutionize your monitoring?</h2>
+          <p>Join the marine conservation operations running on DeepOceans.</p>
+          <button className="btn-primary-lg" onClick={onEnter}>Launch Product <ArrowRight size={20} /></button>
+        </section>
+      </main>
+
+      <footer className="landing-footer">
+        <div className="footer-content">
+          <div className="logo"><Activity size={20} color="var(--accent)" /> DeepOceans</div>
+          <p>© 2026 DeepOceans AI. Securing marine futures.</p>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function Dashboard() {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [maskSrc, setMaskSrc] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [confidence, setConfidence] = useState<number | null>(null);
+  const [latency, setLatency] = useState<number | null>(null);
+  const [threshold, setThreshold] = useState<number>(0.5);
+  
+  const [history, setHistory] = useState<HistoryRecord[]>([
+    {
+      id: 1,
+      timestamp: new Date(Date.now() - 14400000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}),
+      filename: 'sentinel_scan_alpha.png',
+      confidence: 84.2,
+      thumbnail: 'https://images.unsplash.com/photo-1621213038477-9dfaf942dcde?auto=format&fit=crop&w=48&h=48'
+    }
+  ]);
+
+  const [isDragActive, setIsDragActive] = useState(false);
+
+  const handleFile = (file: File) => {
+    setSelectedFile(file);
+    const url = URL.createObjectURL(file);
+    setPreview(url);
+    setMaskSrc(null);
+    setConfidence(null);
+    setLatency(null);
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) handleFile(e.target.files[0]);
+  };
+
+  const onDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragActive(true); };
+  const onDragLeave = () => { setIsDragActive(false); };
+  const onDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragActive(false);
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) handleFile(e.dataTransfer.files[0]);
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile || !preview) return;
+
+    setIsLoading(true);
+    const formData = new FormData();
+    formData.append("file", selectedFile);
+
+    try {
+      const response = await fetch("http://localhost:8000/predict", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (response.ok) {
+        const confHeader = response.headers.get("X-Confidence-Score");
+        const latHeader = response.headers.get("X-Inference-Latency-Ms");
+        
+        let confValue = 0;
+        if (confHeader) {
+          confValue = parseFloat(confHeader);
+          setConfidence(confValue);
+        }
+        if (latHeader) setLatency(parseInt(latHeader));
+
+        const blob = await response.blob();
+        const maskUrl = URL.createObjectURL(blob);
+        setMaskSrc(maskUrl);
+
+        const newRecord: HistoryRecord = {
+          id: Date.now(),
+          timestamp: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}),
+          filename: selectedFile.name,
+          confidence: confValue,
+          thumbnail: preview
+        };
+        setHistory(prev => [newRecord, ...prev].slice(0, 10));
+      } else {
+        alert("Inference server returned an error. Ensure backend is running.");
+      }
+    } catch (error) {
+      console.error(error);
+      alert("Connection failure to inference node.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="app-layout">
+      {/* SaaS App Header */}
+      <header className="app-header">
+        <div className="app-logo">
+          <div className="logo-icon"><Activity size={18} color="#fff" /></div>
+          DeepOceans <span className="app-badge">Workspace</span>
+        </div>
+        <div className="header-actions">
+          <div className="connection-status">
+            <div className="status-orb"></div> Node Operational
+          </div>
+          <button className="icon-btn"><Settings size={18} /></button>
+          <button className="profile-btn"><User size={18} /></button>
+        </div>
+      </header>
+
+      <main className="dashboard-content">
+        <div className="dashboard-grid">
+          
+          {/* Top Row: Metrics Grid */}
+          <div className="metrics-row">
+            <div className="stat-card">
+               <div className="stat-icon-wrapper"><BarChart2 size={20} className="stat-icon" /></div>
+               <div className="stat-content">
+                 <div className="stat-label">Spill Probability</div>
+                 <div className="stat-value" style={{ color: confidence && confidence > 50 ? 'var(--alert)' : 'var(--text-primary)' }}>
+                   {confidence !== null ? `${confidence.toFixed(1)}%` : '--'}
+                 </div>
+               </div>
+            </div>
+            <div className="stat-card">
+               <div className="stat-icon-wrapper"><Activity size={20} className="stat-icon" /></div>
+               <div className="stat-content">
+                 <div className="stat-label">Inference Latency</div>
+                 <div className="stat-value">{latency !== null ? `${latency}ms` : '--'}</div>
+               </div>
+            </div>
+            <div className="stat-card">
+               <div className="stat-icon-wrapper"><CheckCircle size={20} className="stat-icon" /></div>
+               <div className="stat-content">
+                 <div className="stat-label">Model IoU (Validation)</div>
+                 <div className="stat-value">0.842</div>
+               </div>
+            </div>
+            <div className="stat-card">
+               <div className="stat-icon-wrapper"><Layers size={20} className="stat-icon" /></div>
+               <div className="stat-content">
+                 <div className="stat-label">Detection Threshold</div>
+                 <div className="stat-control">
+                   <input type="range" min="0.1" max="0.9" step="0.1" value={threshold} onChange={(e) => setThreshold(parseFloat(e.target.value))} />
+                   <span className="range-val">{threshold.toFixed(2)}</span>
+                 </div>
+               </div>
+            </div>
+          </div>
+
+          <div className="main-interaction-row">
+            {/* Left: Uploader */}
+            <div className="upload-container panel">
+              <h3 className="panel-title">Data Ingestion</h3>
+              
+              <div 
+                className={`dropzone ${isDragActive ? 'drag-active' : ''} ${selectedFile ? 'has-file' : ''}`}
+                onDragOver={onDragOver}
+                onDragLeave={onDragLeave}
+                onDrop={onDrop}
+              >
+                <input type="file" id="file-upload" accept="image/*" onChange={handleFileChange} />
+                <UploadCloud size={48} className="dropzone-icon" />
+                <div className="dropzone-text">
+                  <span className="dropzone-primary">Click to upload</span> or drag and drop
+                </div>
+                <div className="dropzone-secondary">JPG or PNG (Optimal size: 256x256)</div>
+                {selectedFile && <div className="selected-file-chip">{selectedFile.name}</div>}
+              </div>
+
+              <button 
+                className="btn-action-lg" 
+                onClick={handleUpload} 
+                disabled={!selectedFile || isLoading}
+              >
+                {isLoading ? <span className="loader" style={{marginRight: '8px'}}></span> : null}
+                {isLoading ? "Running Prediction Pipeline..." : "Execute Detection"}
+              </button>
+            </div>
+
+            {/* Right: History Log */}
+            <div className="history-container panel">
+              <div className="panel-header">
+                <h3 className="panel-title">Analysis History</h3>
+                <span className="record-count">{history.length} Records</span>
+              </div>
+              <div className="history-list">
+                {history.length === 0 ? (
+                  <div className="empty-state">No telemetry analyzed yet.</div>
+                ) : (
+                  history.map(record => (
+                    <div key={record.id} className="history-row fade-in">
+                      <img src={record.thumbnail} alt="snapshot" className="history-thumb" />
+                      <div className="history-details">
+                        <div className="history-filename" title={record.filename}>{record.filename}</div>
+                        <div className="history-time">{record.timestamp}</div>
+                      </div>
+                      <div className="history-status">
+                        <div className={`status-badge ${record.confidence > 50 ? 'alert' : 'clear'}`}>
+                          {record.confidence > 50 ? 'Anomaly Detected' : 'All Clear'}
+                        </div>
+                        <div className="history-score">{record.confidence.toFixed(1)}%</div>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom Row: Visualizations */}
+          <div className="visualization-container panel">
+             <div className="panel-header" style={{ marginBottom: '24px' }}>
+                <h3 className="panel-title">Spatial Rendering Analysis</h3>
+                <span className="badge-pill">U-Net Feature Map</span>
+             </div>
+             
+             <div className="frames-grid">
+               <div className="frame-card">
+                 <div className="frame-header">Source Imagery</div>
+                 <div className="frame-content">
+                    {preview ? <img src={preview} alt="Raw" className="fade-in" /> : <div className="empty-state">Awaiting Feed</div>}
+                 </div>
+               </div>
+               
+               <div className="frame-card">
+                 <div className="frame-header">Segmentation Mask</div>
+                 <div className="frame-content dark-mode">
+                    {maskSrc ? <img src={maskSrc} alt="Mask" className="fade-in invert-render" /> : <div className="empty-state">No Output</div>}
+                 </div>
+               </div>
+               
+               <div className="frame-card">
+                 <div className="frame-header">Anomaly Overlay</div>
+                 <div className="frame-content">
+                    {preview && maskSrc ? (
+                      <>
+                        <img src={preview} alt="Base" />
+                        <img src={maskSrc} alt="Overlay" className="fade-in feature-overlay" />
+                      </>
+                    ) : <div className="empty-state">No Output</div>}
+                 </div>
+               </div>
+             </div>
+          </div>
+
+        </div>
+      </main>
+    </div>
+  );
+}
+
+function App() {
+  const [view, setView] = useState<'landing' | 'dashboard'>('landing');
+
+  return (
+    <>
+      {view === 'landing' ? <LandingPage onEnter={() => setView('dashboard')} /> : <Dashboard />}
+    </>
+  );
+}
+
+export default App;

frontend/src/index.css

@@ -0,0 +1,111 @@
+:root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:
+    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow:
+      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+#root {
+  width: 1126px;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+h1,
+h2 {
+  font-family: var(--heading);
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  font-family: var(--mono);
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

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

model/loss_metrics.py

@@ -0,0 +1,37 @@
+import tensorflow as tf
+from tensorflow.keras import backend as K
+
+def dice_coef(y_true, y_pred, smooth=1e-6):
+    """Computes the Dice Coefficient."""
+    y_true_f = K.flatten(y_true)
+    y_pred_f = K.flatten(y_pred)
+    intersection = K.sum(y_true_f * y_pred_f)
+    return (2. * intersection + smooth) / (K.sum(y_true_f) + K.sum(y_pred_f) + smooth)
+
+def dice_loss(y_true, y_pred):
+    """Computes the Dice Loss."""
+    return 1 - dice_coef(y_true, y_pred)
+
+def bce_dice_loss(y_true, y_pred):
+    """Computes the Combined BCE + Dice Loss."""
+    bce = tf.keras.losses.binary_crossentropy(y_true, y_pred)
+    # Ensure dimensions match before adding
+    bce = K.mean(bce) 
+    return bce + dice_loss(y_true, y_pred)
+
+def iou_metric(y_true, y_pred, smooth=1e-6):
+    """Computes Intersection over Union (IoU)."""
+    y_true_f = K.flatten(y_true)
+    y_pred_f = K.flatten(y_pred)
+    intersection = K.sum(y_true_f * y_pred_f)
+    union = K.sum(y_true_f) + K.sum(y_pred_f) - intersection
+    return (intersection + smooth) / (union + smooth)
+
+def get_metrics():
+    """Returns a list of metrics for model compilation."""
+    return [
+        dice_coef,
+        iou_metric,
+        tf.keras.metrics.Precision(name='precision'),
+        tf.keras.metrics.Recall(name='recall')
+    ]

model/train.py

@@ -0,0 +1,103 @@
+import os
+import argparse
+import tensorflow as tf
+from tensorflow.keras.callbacks import ModelCheckpoint, EarlyStopping, ReduceLROnPlateau
+import glob
+from sklearn.model_selection import train_test_split
+
+from unet import build_unet
+from loss_metrics import bce_dice_loss, get_metrics
+import sys
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+from utils.data_loader import get_dataset
+
+def get_file_paths(data_dir):
+    """Retrieves image and mask paths."""
+    image_dir = os.path.join(data_dir, 'images')
+    mask_dir = os.path.join(data_dir, 'masks')
+    
+    # Supported formats
+    image_paths = glob.glob(os.path.join(image_dir, '*.*'))
+    # Sorting ensures that image and mask align if they have identical names
+    image_paths.sort()
+    
+    # Map image paths to corresponding mask paths 
+    # Assumes masks have the exact same base name
+    mask_paths = []
+    for img_path in image_paths:
+        base_name = os.path.basename(img_path)
+        name, _ = os.path.splitext(base_name)
+        # Search for corresponding mask (usually png)
+        mask_search = glob.glob(os.path.join(mask_dir, f"{name}.*"))
+        if mask_search:
+            mask_paths.append(mask_search[0])
+        else:
+            print(f"Warning: No mask found for {img_path}")
+            # If no mask, we should ideally remove the image too, but for now just skip adding
+    
+    # Filter image paths to only those with masks
+    valid_image_paths = [p for p in image_paths if glob.glob(os.path.join(mask_dir, f"{os.path.splitext(os.path.basename(p))[0]}.*"))]
+    valid_mask_paths = valid_image_paths.copy() # Placeholder - actually they match 1:1 if sorted and filtered
+    
+    # Let's do it safely
+    final_img_paths = []
+    final_mask_paths = []
+    for img in image_paths:
+        base = os.path.splitext(os.path.basename(img))[0]
+        masks = glob.glob(os.path.join(mask_dir, f"{base}.*"))
+        if len(masks) > 0:
+            final_img_paths.append(img)
+            final_mask_paths.append(masks[0])
+
+    return final_img_paths, final_mask_paths
+
+def train(args):
+    print(f"Starting training process. Using data dir: {args.data_dir}")
+    
+    img_paths, mask_paths = get_file_paths(args.data_dir)
+    print(f"Found {len(img_paths)} image/mask pairs.")
+    
+    if len(img_paths) == 0:
+        print("Error: No data found. Please check data_dir structure.")
+        return
+
+    # Split: 80% Train, 20% Val
+    train_x, val_x, train_y, val_y = train_test_split(img_paths, mask_paths, test_size=0.2, random_state=42)
+    
+    train_dataset = get_dataset(train_x, train_y, batch_size=args.batch_size, is_train=True)
+    val_dataset = get_dataset(val_x, val_y, batch_size=args.batch_size, is_train=False)
+    
+    model = build_unet(input_shape=(256, 256, 3))
+    
+    optimizer = tf.keras.optimizers.Adam(learning_rate=args.learning_rate)
+    
+    model.compile(optimizer=optimizer, loss=bce_dice_loss, metrics=get_metrics())
+    
+    os.makedirs(args.save_dir, exist_ok=True)
+    model_path = os.path.join(args.save_dir, "oil_spill_unet_best.keras")
+    
+    callbacks = [
+        ModelCheckpoint(model_path, verbose=1, save_best_only=True, monitor='val_loss'),
+        EarlyStopping(monitor='val_loss', patience=15, restore_best_weights=True),
+        ReduceLROnPlateau(monitor='val_loss', factor=0.1, patience=5, verbose=1, min_lr=1e-6)
+    ]
+    
+    history = model.fit(
+        train_dataset,
+        validation_data=val_dataset,
+        epochs=args.epochs,
+        callbacks=callbacks
+    )
+    
+    print("Training complete. Best model saved at:", model_path)
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser("Train Oil Spill U-Net")
+    parser.add_argument("--data_dir", type=str, default="../data", help="Directory containing images/ and masks/ folders.")
+    parser.add_argument("--save_dir", type=str, default="../model/saved_models", help="Directory to save the trained model.")
+    parser.add_argument("--epochs", type=int, default=50, help="Number of training epochs.")
+    parser.add_argument("--batch_size", type=int, default=16, help="Batch size.")
+    parser.add_argument("--learning_rate", type=float, default=1e-4, help="Learning rate.")
+    
+    args = parser.parse_args()
+    train(args)

model/unet.py

@@ -0,0 +1,52 @@
+import tensorflow as tf
+from tensorflow.keras import layers, models
+
+def conv_block(input_tensor, num_filters):
+    x = layers.Conv2D(num_filters, (3, 3), padding="same")(input_tensor)
+    x = layers.BatchNormalization()(x)
+    x = layers.Activation("relu")(x)
+
+    x = layers.Conv2D(num_filters, (3, 3), padding="same")(x)
+    x = layers.BatchNormalization()(x)
+    x = layers.Activation("relu")(x)
+    return x
+
+def encoder_block(input_tensor, num_filters):
+    x = conv_block(input_tensor, num_filters)
+    p = layers.MaxPooling2D((2, 2))(x)
+    return x, p
+
+def decoder_block(input_tensor, concat_tensor, num_filters):
+    x = layers.Conv2DTranspose(num_filters, (2, 2), strides=(2, 2), padding="same")(input_tensor)
+    x = layers.concatenate([x, concat_tensor])
+    x = conv_block(x, num_filters)
+    return x
+
+def build_unet(input_shape=(256, 256, 3)):
+    """Builds a U-Net architecture for image segmentation."""
+    inputs = layers.Input(shape=input_shape)
+
+    # Encoder
+    e1, p1 = encoder_block(inputs, 64)
+    e2, p2 = encoder_block(p1, 128)
+    e3, p3 = encoder_block(p2, 256)
+    e4, p4 = encoder_block(p3, 512)
+
+    # Bridge
+    b = conv_block(p4, 1024)
+
+    # Decoder
+    d1 = decoder_block(b, e4, 512)
+    d2 = decoder_block(d1, e3, 256)
+    d3 = decoder_block(d2, e2, 128)
+    d4 = decoder_block(d3, e1, 64)
+
+    # Output (1 class for Oil Spill vs Background)
+    outputs = layers.Conv2D(1, (1, 1), padding="same", activation="sigmoid")(d4)
+
+    model = models.Model(inputs, outputs, name="U-Net")
+    return model
+
+if __name__ == "__main__":
+    model = build_unet()
+    model.summary()

utils/data_loader.py

@@ -0,0 +1,80 @@
+import tensorflow as tf
+import os
+
+IMG_SIZE = (256, 256)
+
+def decode_image(image_file):
+    """Reads and decode an image to float32 [0, 1]."""
+    image = tf.io.read_file(image_file)
+    # Most general images dataset will be JPEG, but you can change to png if needed.
+    image = tf.image.decode_image(image, channels=3, expand_animations=False)
+    image = tf.image.resize(image, IMG_SIZE)
+    # Normalize between 0 and 1
+    image = tf.cast(image, tf.float32) / 255.0
+    return image
+
+def decode_mask(mask_file):
+    """Reads and decode a segmentation mask to binary [0, 1]."""
+    mask = tf.io.read_file(mask_file)
+    # Masks are typically PNG format
+    mask = tf.image.decode_image(mask, channels=1, expand_animations=False)
+    mask = tf.image.resize(mask, IMG_SIZE)
+    
+    # Normalize and convert mask to binary (0 and 1)
+    mask = tf.cast(mask, tf.float32) / 255.0
+    mask = tf.math.round(mask) 
+    return mask
+
+def process_path(image_path, mask_path):
+    """Loads image and mask from paths."""
+    image = decode_image(image_path)
+    mask = decode_mask(mask_path)
+    return image, mask
+
+def augment(image, mask):
+    """Applies random transformations for data augmentation."""
+    # Random flip left-right
+    if tf.random.uniform(()) > 0.5:
+        image = tf.image.flip_left_right(image)
+        mask = tf.image.flip_left_right(mask)
+        
+    # Random flip up-down
+    if tf.random.uniform(()) > 0.5:
+        image = tf.image.flip_up_down(image)
+        mask = tf.image.flip_up_down(mask)
+        
+    # Random brightness (only to the image, not the mask)
+    image = tf.image.random_brightness(image, max_delta=0.2)
+    
+    # Clip values to be in [0, 1] after brightness modifications
+    image = tf.clip_by_value(image, 0.0, 1.0)
+    
+    return image, mask
+
+def get_dataset(image_paths, mask_paths, batch_size=16, is_train=True):
+    """
+    Creates a tf.data.Dataset pipeline.
+    
+    Args:
+        image_paths (list): List of file paths to images.
+        mask_paths (list): List of file paths to corresponding masks.
+        batch_size (int): Size of batches.
+        is_train (bool): If true, applies shuffling and augmentations.
+    """
+    dataset = tf.data.Dataset.from_tensor_slices((image_paths, mask_paths))
+    
+    if is_train:
+        # Shuffle heavily for training
+        dataset = dataset.shuffle(buffer_size=1000)
+    
+    # Map the image reading function across the dataset
+    dataset = dataset.map(process_path, num_parallel_calls=tf.data.AUTOTUNE)
+    
+    if is_train:
+        # Apply data augmentations
+        dataset = dataset.map(augment, num_parallel_calls=tf.data.AUTOTUNE)
+        
+    # Batch and prefetch for performance
+    dataset = dataset.batch(batch_size)
+    dataset = dataset.prefetch(tf.data.AUTOTUNE)
+    return dataset