Upload the api endpoint and app.

Dockerfile

@@ -0,0 +1,29 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set environment variables
+ENV PYTHONUNBUFFERED 1
+# Set the port Uvicorn will listen on
+ENV PORT 8000
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Install system dependencies needed by some Python packages (e.g., OpenCV)
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+    build-essential \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt /app/requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . /app
+
+RUN python -c "import depth_texture_mask; depth_texture_mask.init_midas()"
+
+# Expose the port
+EXPOSE ${PORT}
+
+# Run using uvicorn
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8000", "--workers", "1"]

README.md

@@ -1,12 +1,149 @@
----
-title: Structura AI
-emoji: 🚀
-colorFrom: gray
-colorTo: purple
-sdk: docker
-pinned: false
-license: mit
-short_description: 'Structura AI: Depth & Structural Masking '
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Structura AI: Depth & Structural Masking Web Application
+
+Structura AI is a web-based image analysis tool that generates a structural mask by combining monocular depth estimation and texture-based feature detection.
+The system integrates MiDaS (DPT-Hybrid) for depth prediction with OpenCV-based edge, corner, and texture fusion to produce a detailed, high-frequency structural representation of any input image.
+
+This mask is useful for segmentation workflows, diffusion model conditioning, preprocessing for generative AI, architectural analysis, and general computer vision pipelines.
+
+---
+
+## Features
+
+* MiDaS Depth Estimation: High-quality depth prediction using the DPT-Hybrid model.
+* Combined Structural Masking: Fusion of depth gradients, edges (Canny), Laplacian detail, and Harris corner responses.
+* FastAPI Backend: Clean API endpoint (`POST /mask/`) returning PNG masks with inference time metadata.
+* Web UI: A simple and modern interface built with HTML, CSS, and JavaScript allowing image upload, preview, overlay visualization, and mask download.
+* Docker Support: Fully dockerized and ready for deployment on services such as Hugging Face Spaces.
+
+---
+
+## Demo
+
+This section is reserved for demo images and demo videos.
+Add examples such as:
+
+* Original input image
+* Generated structural mask
+* Overlay visualization
+* A short screen recording demonstrating the UI
+
+---
+
+## Technology Stack
+
+Backend: FastAPI, Uvicorn
+AI / Computer Vision: PyTorch, MiDaS, OpenCV (headless), NumPy
+Frontend: HTML, CSS, JavaScript
+Deployment: Docker, Hugging Face Spaces
+
+---
+
+## Repository Structure
+
+```
+structura-ai/
+├── app.py
+├── depth_texture_mask.py
+├── requirements.txt
+├── Dockerfile
+├── templates/
+│   └── index.html
+└── static/
+    ├── styles.css
+    ├── app.js
+    └── logo.svg
+```
+
+---
+
+## Local Installation and Usage
+
+### 1. Clone the Repository
+
+```
+git clone https://github.com/PritamTheCoder/midas-depth-texture-mask-api.git
+cd midas-depth-texture-mask-api
+```
+
+### 2. Create and Activate a Virtual Environment
+
+```
+python -m venv venv
+
+# Windows
+venv\Scripts\activate
+
+# macOS / Linux
+source venv/bin/activate
+```
+
+### 3. Install Dependencies
+
+```
+pip install -r requirements.txt
+```
+
+### 4. Start the Application
+
+```
+uvicorn app:app --reload --host 0.0.0.0 --port 8000
+```
+
+### 5. Access the Web UI
+
+Open the browser and navigate to:
+[http://127.0.0.1:8000/](http://127.0.0.1:8000/)
+
+The MiDaS model weights will automatically download on the first startup.
+
+---
+
+## Deployment on Hugging Face Spaces (Docker)
+
+The project includes a Dockerfile configured for seamless deployment on Hugging Face Spaces.
+
+### Required File Structure
+
+Ensure the following files are present at the repository root:
+
+```
+Dockerfile
+app.py
+depth_texture_mask.py
+requirements.txt
+templates/
+static/
+```
+
+### Deployment Steps
+
+1. Create a new Hugging Face Space.
+2. Select "Docker" as the runtime.
+3. Upload or commit all repository files.
+4. Hugging Face will automatically:
+
+   * Build the Docker image
+   * Install dependencies
+   * Expose the correct port
+   * Start the FastAPI server
+
+The application will then be available as a hosted interactive web demo.
+
+---
+
+## License
+
+This project is licensed under the MIT License.
+See the LICENSE file for details.
+
+---
+
+## Acknowledgements
+
+MiDaS by Intel-ISL
+FastAPI for backend framework
+OpenCV for feature detection and image processing
+PyTorch for deep learning inference support
+Hugging Face for deployment infrastructure
+
+---

app.py

@@ -0,0 +1,98 @@
+# app.py
+import io
+import logging
+import traceback
+import time
+
+from fastapi import FastAPI, UploadFile, File, HTTPException, Request
+from fastapi.responses import StreamingResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from starlette.responses import RedirectResponse
+from PIL import Image
+import numpy as np
+
+import depth_texture_mask  # make sure depth_texture_mask.py is at repo root
+
+logger = logging.getLogger("uvicorn.error")
+app = FastAPI(title="Depth & Structural Masking API with UI")
+
+# Mount static folder for CSS/JS/images
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+@app.on_event("startup")
+async def startup_event():
+    try:
+        logger.info("Initializing MiDaS model...")
+        # This will initialize the heavy model once
+        depth_texture_mask.init_midas()
+        logger.info("MiDaS initialized.")
+    except Exception as e:
+        logger.exception("Error initializing MiDaS: %s", e)
+
+@app.get("/", response_class=HTMLResponse)
+async def index(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+def pil_image_from_uploadfile(upload_file: UploadFile) -> Image.Image:
+    contents = upload_file.file.read()
+    img = Image.open(io.BytesIO(contents)).convert("RGB")
+    upload_file.file.close()
+    return img
+
+def numpy_from_pil(pil_img: Image.Image) -> np.ndarray:
+    return np.asarray(pil_img)
+
+def pil_from_mask_array(mask: np.ndarray) -> Image.Image:
+    arr = mask.copy()
+    if np.issubdtype(arr.dtype, np.floating):
+        if arr.max() <= 1.0:
+            arr = (arr * 255.0).astype("uint8")
+        else:
+            arr = np.clip(arr, 0, 255).astype("uint8")
+    else:
+        arr = np.clip(arr, 0, 255).astype("uint8")
+    if arr.ndim == 3 and arr.shape[2] == 3:
+        arr = (0.2989 * arr[...,0] + 0.5870 * arr[...,1] + 0.1140 * arr[...,2]).astype("uint8")
+    return Image.fromarray(arr, mode="L")
+
+@app.post("/mask/", response_class=StreamingResponse)
+async def generate_mask_endpoint(file: UploadFile = File(...)):
+    """
+    Accept an image file and return a PNG mask.
+    Adds a response header 'X-Inference-Time-ms' with inference time in milliseconds.
+    """
+    try:
+        if not file.content_type.startswith("image/"):
+            raise HTTPException(status_code=415, detail="Unsupported file type.")
+        # read + convert
+        pil_img = pil_image_from_uploadfile(file)
+        input_np = numpy_from_pil(pil_img)
+
+        # Call model & measure time
+        start = time.perf_counter()
+        mask = depth_texture_mask.generate_texture_depth_mask(input_np, mask_only=True)
+        end = time.perf_counter()
+        infer_ms = int((end - start) * 1000)
+
+        if mask is None:
+            raise HTTPException(status_code=500, detail="Mask generation failed.")
+
+        mask_pil = pil_from_mask_array(mask)
+        buf = io.BytesIO()
+        mask_pil.save(buf, format="PNG")
+        buf.seek(0)
+
+        headers = {"X-Inference-Time-ms": str(infer_ms)}
+        return StreamingResponse(buf, media_type="image/png", headers=headers)
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error("Error in /mask/: %s", e)
+        logger.debug(traceback.format_exc())
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/ui")
+async def redirect_ui():
+    return RedirectResponse("/")

depth_texture_mask.py

@@ -0,0 +1,163 @@
+# depth_texture_mask.py
+# Modified: lazy MiDaS init and safe for server use.
+
+import os
+import cv2
+import torch
+import numpy as np
+import matplotlib.pyplot as plt
+
+# Globals (initialized by init_midas)
+midas = None
+midas_transforms = None
+transform = None
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+_midas_initialized = False
+
+def init_midas(model_name="DPT_Hybrid", device_override=None, force_reload=False):
+    """
+    Initialize/load the MiDaS model and transforms into global variables.
+    Call this once (e.g., at FastAPI startup).
+    """
+    global midas, midas_transforms, transform, device, _midas_initialized
+
+    if device_override is not None:
+        device = device_override
+    else:
+        device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+    if _midas_initialized and not force_reload:
+        return
+
+    # Use torch.hub to load MiDaS transforms & model
+    # NOTE: this will download if not cached
+    midas = torch.hub.load("intel-isl/MiDaS", model_name, pretrained=True)
+    midas_transforms = torch.hub.load("intel-isl/MiDaS", "transforms")
+    # choose the appropriate transform (DPT / midas small has different names)
+    if hasattr(midas_transforms, "dpt_transform"):
+        transform = midas_transforms.dpt_transform
+    elif hasattr(midas_transforms, "small_transform"):
+        transform = midas_transforms.small_transform
+    else:
+        # fallback: try a generic 'transform'
+        transform = getattr(midas_transforms, "transform", None)
+
+    midas.to(device).eval()
+    _midas_initialized = True
+    return
+
+def _ensure_initialized():
+    if not _midas_initialized:
+        init_midas()
+
+def generate_texture_depth_mask(input_data, mask_only=False):
+    """
+    Generate a texture + depth structural mask.
+
+    Supports:
+        - File paths (.jpg, .png)
+        - NumPy arrays (H,W,C) RGB or RGBA
+        - List of inputs (batch mode)
+
+    Returns:
+        mask_only=False:
+            - Single: (fig, mask)
+            - Batch: list of (fig, mask)
+
+        mask_only=True:
+            - Single: mask
+            - Batch: list of masks
+    """
+    _ensure_initialized()
+
+    def _process_single(image_source):
+        # Load image (array or file path)
+        if isinstance(image_source, np.ndarray):
+            img_rgb = image_source
+            if img_rgb.shape[-1] == 4:
+                img_rgb = img_rgb[:, :, :3]
+            img_bgr = cv2.cvtColor(img_rgb, cv2.COLOR_RGB2BGR)
+        elif isinstance(image_source, str) and os.path.isfile(image_source):
+            img_bgr = cv2.imread(image_source)
+            if img_bgr is None:
+                raise ValueError(f"Could not read {image_source}")
+            img_rgb = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)
+        else:
+            raise TypeError("Input must be a file path or NumPy image array.")
+
+        gray = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2GRAY)
+        blurred = cv2.GaussianBlur(gray, (3, 3), 0)
+
+        # Depth (MiDaS)
+        t = transform(img_rgb).to(device)
+        if t.ndim == 3:
+            t = t.unsqueeze(0)
+
+        with torch.no_grad():
+            depth = midas(t)
+            depth = torch.nn.functional.interpolate(
+                depth.unsqueeze(1),
+                size=gray.shape,
+                mode="bicubic",
+                align_corners=False
+            ).squeeze()
+
+        depth = depth.cpu().numpy()
+        depth = cv2.normalize(depth, None, 0, 255, cv2.NORM_MINMAX)
+        depth_mask = cv2.convertScaleAbs(255 - depth)
+
+        # Texture features
+        canny = cv2.Canny(blurred, 40, 120)
+        lap = cv2.convertScaleAbs(cv2.Laplacian(blurred, cv2.CV_64F))
+
+        corners = cv2.cornerHarris(np.float32(blurred), 2, 3, 0.04)
+        corners = cv2.dilate(corners, None)
+        corner_mask = np.zeros_like(gray)
+        corner_mask[corners > 0.01 * corners.max()] = 255
+
+        edges_all = cv2.addWeighted(canny, 0.6, lap, 0.4, 0)
+        mask = cv2.bitwise_or(edges_all, corner_mask)
+        mask = cv2.addWeighted(mask, 0.8, depth_mask, 0.2, 0)
+
+        noise = np.random.randint(0, 60, gray.shape, dtype=np.uint8)
+        mask = cv2.addWeighted(mask, 1.0, noise, 0.2, 0)
+        mask = cv2.convertScaleAbs(mask)
+
+        if mask_only:
+            return mask
+
+        # Visualization mode
+        fig, ax = plt.subplots(1, 2, figsize=(14, 6))
+        ax[0].imshow(img_rgb)
+        ax[0].set_title("Original Image")
+        ax[0].axis("off")
+
+        ax[1].imshow(mask, cmap="gray")
+        ax[1].set_title("Texture + Depth Structural Mask")
+        ax[1].axis("off")
+
+        plt.tight_layout()
+        return fig, mask
+
+    # Batch support
+    if isinstance(input_data, list):
+        return [_process_single(item) for item in input_data]
+
+    return _process_single(input_data)
+
+# CLI entrypoint preserved for local use
+if __name__ == "__main__":
+    import argparse
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--input", type=str, required=True)
+    parser.add_argument("--save", type=str, default="./mask_img.png")
+    parser.add_argument("--mask_only", action="store_true")
+    args = parser.parse_args()
+    output = generate_texture_depth_mask(args.input, mask_only=args.mask_only)
+    if args.mask_only:
+        mask = output
+    else:
+        fig, mask = output
+    cv2.imwrite(args.save, mask)
+    
+    print(f"[OK] Saved mask to {args.save}")

requirements.txt

@@ -0,0 +1,11 @@
+fastapi==0.95.2
+uvicorn[standard]==0.22.0
+jinja2==3.1.2
+Pillow==10.0.1
+numpy==1.26.4
+torch==2.3.1
+torchvision==0.18.1
+opencv-python-headless==4.8.1.78
+timm==0.9.2
+matplotlib==3.8.1
+python-multipart==0.0.6

static/app.js

@@ -0,0 +1,229 @@
+// static/app.js
+(() => {
+  // DOM Elements
+  const els = {
+    fileInput: document.getElementById('fileInput'),
+    dropZone: document.getElementById('dropZone'),
+    settingsGroup: document.getElementById('settingsGroup'),
+    processBtn: document.getElementById('processBtn'),
+    downloadBtn: document.getElementById('downloadBtn'),
+    canvasContainer: document.getElementById('canvasContainer'),
+    mainCanvas: document.getElementById('mainCanvas'),
+    emptyState: document.getElementById('emptyState'),
+    opacityInput: document.getElementById('opacity'),
+    opacityVal: document.getElementById('opacityVal'),
+    colorInput: document.getElementById('color'),
+    loader: document.getElementById('loader'),
+    loadingStep: document.getElementById('loadingStep'),
+    timeInfo: document.getElementById('timeInfo'),
+    resInfo: document.getElementById('resInfo'),
+    statusIndicator: document.getElementById('statusIndicator'),
+    tabs: document.querySelectorAll('.tab')
+  };
+
+  // State
+  let state = {
+    originalImg: null,
+    maskImg: null,
+    currentView: 'original',
+    isProcessing: false
+  };
+
+  // --- Logic ---
+
+  // Switch between Empty State and Canvas State (Fixes the UI Bug)
+  function toggleView(hasImage) {
+    if (hasImage) {
+      els.emptyState.classList.add('hidden');
+      els.canvasContainer.classList.remove('hidden');
+      els.settingsGroup.classList.remove('disabled');
+      els.settingsGroup.classList.add('active');
+    } else {
+      els.emptyState.classList.remove('hidden');
+      els.canvasContainer.classList.add('hidden');
+      els.settingsGroup.classList.add('disabled');
+      els.settingsGroup.classList.remove('active');
+    }
+  }
+
+  // Improved Rendering Engine
+  function renderCanvas() {
+    if (!state.originalImg) return;
+
+    const ctx = els.mainCanvas.getContext('2d');
+    const w = state.originalImg.width;
+    const h = state.originalImg.height;
+
+    // Resize canvas to match image resolution
+    if (els.mainCanvas.width !== w || els.mainCanvas.height !== h) {
+      els.mainCanvas.width = w;
+      els.mainCanvas.height = h;
+    }
+
+    ctx.clearRect(0, 0, w, h);
+
+    // 1. Draw Background (Original Image)
+    if (state.currentView === 'original' || state.currentView === 'overlay') {
+      ctx.drawImage(state.originalImg, 0, 0);
+    }
+
+    // 2. Draw Mask/Overlay
+    if (state.maskImg) {
+      if (state.currentView === 'mask') {
+        // Plain mask view
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1.0;
+        ctx.drawImage(state.maskImg, 0, 0);
+      } 
+      else if (state.currentView === 'overlay') {
+        // Sophisticated Overlay
+        // Prepare offscreen buffer for tinted mask
+        const offscreen = document.createElement('canvas');
+        offscreen.width = w; offscreen.height = h;
+        const oCtx = offscreen.getContext('2d');
+        
+        // A. Draw mask (White=Structure, Black=Empty)
+        oCtx.drawImage(state.maskImg, 0, 0);
+        
+        // B. Tint: Fill with color only where mask exists (Source-In)
+        oCtx.globalCompositeOperation = 'source-in';
+        oCtx.fillStyle = els.colorInput.value;
+        oCtx.fillRect(0, 0, w, h);
+
+        // C. Draw onto main canvas with opacity
+        // 'source-over' blends normally on top of the original image
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = parseInt(els.opacityInput.value) / 100;
+        ctx.drawImage(offscreen, 0, 0);
+        
+        // Reset context
+        ctx.globalAlpha = 1.0;
+      }
+    }
+  }
+
+  async function handleFile(file) {
+    if (!file || !file.type.startsWith('image/')) return alert("Invalid image.");
+
+    setLoading(true, "Loading...");
+    try {
+      const url = URL.createObjectURL(file);
+      state.originalImg = await loadImage(url);
+      state.maskImg = null; 
+      state.currentView = 'original';
+
+      els.resInfo.textContent = `${state.originalImg.width} × ${state.originalImg.height} px`;
+      els.timeInfo.textContent = "—";
+      
+      toggleView(true);
+      updateTabs();
+      renderCanvas();
+      
+      els.processBtn.disabled = false;
+      els.downloadBtn.disabled = true;
+    } catch (e) {
+      console.error(e);
+      alert("Error loading image.");
+      toggleView(false);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function generateMask() {
+    if (!state.originalImg) return;
+    setLoading(true, "Analyzing Structure...");
+    
+    try {
+      const formData = new FormData();
+      formData.append('file', els.fileInput.files[0]);
+      
+      const resp = await fetch('/mask/', { method: 'POST', body: formData });
+      if (!resp.ok) throw new Error("Server Error");
+
+      els.timeInfo.textContent = (resp.headers.get('X-Inference-Time-ms') || '—') + ' ms';
+      
+      const blob = await resp.blob();
+      state.maskImg = await loadImage(URL.createObjectURL(blob));
+
+      state.currentView = 'overlay';
+      updateTabs();
+      renderCanvas();
+      
+      els.downloadBtn.disabled = false;
+    } catch (e) {
+      console.error(e);
+      alert("Analysis failed.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // --- Helpers ---
+  function loadImage(src) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => resolve(img);
+      img.onerror = reject;
+      img.src = src;
+    });
+  }
+
+  function setLoading(active, text) {
+    state.isProcessing = active;
+    if (active) {
+      els.loader.classList.remove('hidden');
+      els.loadingStep.textContent = text;
+      els.statusIndicator.textContent = "Busy";
+      els.statusIndicator.className = "status-indicator working";
+    } else {
+      els.loader.classList.add('hidden');
+      els.statusIndicator.textContent = "Ready";
+      els.statusIndicator.className = "status-indicator";
+    }
+  }
+
+  function updateTabs() {
+    els.tabs.forEach(t => {
+      if(t.dataset.view === state.currentView) t.classList.add('active');
+      else t.classList.remove('active');
+    });
+  }
+
+  // --- Listeners ---
+  els.fileInput.addEventListener('change', e => handleFile(e.target.files[0]));
+  
+  els.dropZone.addEventListener('dragover', e => { e.preventDefault(); els.dropZone.style.borderColor = 'var(--primary)'; });
+  els.dropZone.addEventListener('dragleave', e => { e.preventDefault(); els.dropZone.style.borderColor = 'var(--border)'; });
+  els.dropZone.addEventListener('drop', e => {
+    e.preventDefault();
+    els.dropZone.style.borderColor = 'var(--border)';
+    const f = e.dataTransfer.files[0];
+    els.fileInput.files = e.dataTransfer.files;
+    handleFile(f);
+  });
+
+  els.processBtn.addEventListener('click', generateMask);
+  els.opacityInput.addEventListener('input', e => {
+    els.opacityVal.textContent = e.target.value + '%';
+    renderCanvas();
+  });
+  els.colorInput.addEventListener('input', renderCanvas);
+  
+  els.tabs.forEach(t => t.addEventListener('click', () => {
+    if(t.dataset.view !== 'original' && !state.maskImg) return;
+    state.currentView = t.dataset.view;
+    updateTabs();
+    renderCanvas();
+  }));
+
+  els.downloadBtn.addEventListener('click', () => {
+    const link = document.createElement('a');
+    link.download = `structura_result_${Date.now()}.png`;
+    link.href = els.mainCanvas.toDataURL('image/png');
+    link.click();
+  });
+
+  // Init state
+  toggleView(false);
+})();

static/styles.css

@@ -0,0 +1,145 @@
+/* static/styles.css */
+:root {
+  --bg-body: #0b0f19;      /* Darker, cleaner background */
+  --bg-sidebar: #111827;   /* Rich dark gray */
+  --bg-card: #1f2937;
+  --border: #374151;
+  --text-main: #f9fafb;
+  --text-muted: #9ca3af;
+  --primary: #3b82f6;      /* Intel Blue */
+  --primary-hover: #2563eb;
+  --radius: 6px;           /* Tighter radius for 'Pro' look */
+  --sidebar-w: 300px;
+  --font-sans: 'Inter', sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  height: 100vh;
+  font-family: var(--font-sans);
+  background-color: var(--bg-body);
+  color: var(--text-main);
+  overflow: hidden;
+}
+
+/* === UTILITY TO FIX BUG === */
+.hidden { display: none !important; }
+
+/* Layout Shell */
+.app-shell { display: flex; height: 100%; width: 100%; }
+
+/* Sidebar */
+.sidebar {
+  width: var(--sidebar-w);
+  background-color: var(--bg-sidebar);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  flex-shrink: 0;
+  z-index: 20;
+  box-shadow: 4px 0 24px rgba(0,0,0,0.2);
+}
+
+.logo-area {
+  font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
+  margin-bottom: 40px; display: flex; align-items: center; gap: 12px;
+}
+
+.section-label {
+  display: block; font-size: 11px; text-transform: uppercase;
+  letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px; font-weight: 600;
+}
+
+.control-group { margin-bottom: 24px; }
+.control-group.disabled { opacity: 0.5; pointer-events: none; }
+.control-group.active { opacity: 1; pointer-events: auto; }
+
+/* Upload Box */
+.upload-box {
+  border: 1px dashed var(--border);
+  border-radius: var(--radius);
+  padding: 24px; text-align: center; cursor: pointer; position: relative;
+  background: rgba(255,255,255,0.02); transition: all 0.2s;
+}
+.upload-box:hover { border-color: var(--primary); background: rgba(59, 130, 246, 0.05); }
+.upload-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+.upload-icon { font-size: 24px; display: block; margin-bottom: 8px; color: var(--text-muted); }
+.upload-box p { margin: 0; font-size: 13px; color: var(--text-muted); }
+
+/* Settings */
+.setting-item { margin-bottom: 16px; }
+.setting-item label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; color: var(--text-muted); }
+input[type="range"] { width: 100%; accent-color: var(--primary); }
+input[type="color"] { width: 100%; height: 36px; border: none; padding: 0; background: none; cursor: pointer; }
+
+.divider { height: 1px; background: var(--border); margin: 20px 0; }
+
+/* Buttons */
+.btn {
+  width: 100%; padding: 10px 16px; border-radius: var(--radius);
+  border: none; font-family: var(--font-sans); font-size: 13px; font-weight: 500;
+  cursor: pointer; margin-bottom: 10px; transition: background 0.2s;
+}
+.btn-primary { background: var(--primary); color: white; }
+.btn-primary:hover { background: var(--primary-hover); }
+.btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
+.btn-secondary:hover { border-color: var(--text-main); color: var(--text-main); }
+.btn:disabled { opacity: 0.6; cursor: not-allowed; }
+
+.sidebar-footer { margin-top: auto; font-size: 12px; color: var(--text-muted); }
+.stat-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
+.mono { font-family: monospace; color: var(--text-main); }
+
+/* Workspace */
+.workspace { flex: 1; display: flex; flex-direction: column; background-color: #000; position: relative; }
+
+.toolbar {
+  height: 56px; border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0 24px; background: var(--bg-body);
+}
+
+.tabs { display: flex; gap: 4px; background: var(--bg-sidebar); padding: 4px; border-radius: 6px; }
+.tab {
+  background: transparent; border: none; color: var(--text-muted);
+  padding: 6px 12px; font-size: 13px; border-radius: 4px; cursor: pointer;
+}
+.tab.active { background: var(--bg-card); color: var(--text-main); font-weight: 500; }
+
+.status-indicator { font-size: 12px; color: var(--text-muted); }
+.status-indicator.working { color: var(--primary); }
+
+.viewport {
+  flex: 1; display: flex; align-items: center; justify-content: center;
+  position: relative; overflow: hidden; padding: 20px;
+}
+
+.empty-state { 
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  text-align: center; color: var(--text-muted); width: 100%; height: 100%;
+}
+.empty-icon { font-size: 48px; opacity: 0.3; margin-bottom: 16px; }
+
+.canvas-container {
+  box-shadow: 0 0 0 1px #222, 0 20px 50px rgba(0,0,0,0.5);
+  max-width: 95%; max-height: 95%; display: flex;
+}
+canvas { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
+
+/* Loader */
+.loader-overlay {
+  position: absolute; inset: 0; background: rgba(11, 15, 25, 0.8);
+  backdrop-filter: blur(4px); display: flex; flex-direction: column;
+  align-items: center; justify-content: center; z-index: 50;
+}
+.spinner {
+  width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.1);
+  border-radius: 50%; border-top-color: var(--primary);
+  animation: spin 1s linear infinite; margin-bottom: 16px;
+}
+.loading-text { font-weight: 500; font-size: 14px; }
+
+@keyframes spin { to { transform: rotate(360deg); } }

templates/index.html

@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Structura AI | Professional Analysis</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+
+  <div class="app-shell">
+    <aside class="sidebar">
+      <div class="logo-area">
+        <div class="logo-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+          </svg>
+        </div>
+        <span>Structura</span>
+      </div>
+
+      <div class="control-group">
+        <label class="section-label">Input Source</label>
+        <div id="dropZone" class="upload-box">
+          <input id="fileInput" type="file" accept="image/*" />
+          <span class="upload-icon">↑</span>
+          <p>Click or Drop Image</p>
+        </div>
+      </div>
+
+      <div class="control-group disabled" id="settingsGroup">
+        <label class="section-label">Visualization</label>
+        
+        <div class="setting-item">
+          <label>Mask Tint</label>
+          <input id="color" type="color" value="#3b82f6" />
+        </div>
+
+        <div class="setting-item">
+          <label>Overlay Opacity <span id="opacityVal">60%</span></label>
+          <input id="opacity" type="range" min="0" max="100" value="60" />
+        </div>
+
+        <div class="divider"></div>
+
+        <button id="processBtn" class="btn btn-primary full-width">
+          <span>Generate Structure</span>
+        </button>
+        
+        <button id="downloadBtn" class="btn btn-secondary full-width" disabled>
+          Download Result
+        </button>
+      </div>
+
+      <div class="sidebar-footer">
+        <div class="stat-row">
+          <span>Inference</span>
+          <span id="timeInfo" class="mono">—</span>
+        </div>
+        <div class="stat-row">
+          <span>Resolution</span>
+          <span id="resInfo" class="mono">—</span>
+        </div>
+      </div>
+    </aside>
+
+    <main class="workspace">
+      <header class="toolbar">
+        <div class="tabs">
+          <button class="tab active" data-view="overlay">Composite</button>
+          <button class="tab" data-view="mask">Mask Only</button>
+          <button class="tab" data-view="original">Original</button>
+        </div>
+        <div class="status-indicator" id="statusIndicator">Ready</div>
+      </header>
+
+      <div class="viewport">
+        <div id="emptyState" class="empty-state">
+          <div class="empty-icon">⬚</div>
+          <h3>No Image Loaded</h3>
+          <p>Upload an image to begin analysis.</p>
+        </div>
+
+        <div id="canvasContainer" class="canvas-container hidden">
+          <canvas id="mainCanvas"></canvas>
+        </div>
+
+        <div id="loader" class="loader-overlay hidden">
+          <div class="spinner"></div>
+          <div class="loading-text">
+            <span id="loadingStep">Processing...</span>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>