diff --git a/web/app.py b/web/app.py
new file mode 100644
index 0000000..282ec2b
--- /dev/null
+++ b/web/app.py
@@ -0,0 +1,211 @@
+"""
+cDNA微阵列图像处理 - Web UI (Flask)
+=====================================
+启动：python web/app.py
+打开：http://localhost:5000
+"""
+
+import os, sys, io, base64
+from flask import Flask, render_template, request, jsonify
+import matplotlib
+matplotlib.use('Agg')
+import matplotlib.pyplot as plt
+import numpy as np
+from PIL import Image
+from skimage import color
+from scipy import ndimage
+
+# 项目根目录加到 sys.path
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+sys.path.insert(0, os.path.join(BASE_DIR, 'src'))
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 50 * 1024 * 1024  # 50MB
+UPLOAD_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'uploads')
+os.makedirs(UPLOAD_DIR, exist_ok=True)
+
+plt.rcParams['font.sans-serif'] = ['SimHei', 'Microsoft YaHei']
+plt.rcParams['axes.unicode_minus'] = False
+
+
+# ================================================================
+# 图像处理函数（同简化版逻辑）
+# ================================================================
+def otsu_threshold_pixels(gray):
+    best_T, best_cost, total = 0, float('inf'), gray.size
+    for T in range(1, 255):
+        bg, fg = gray[gray <= T], gray[gray > T]
+        if len(bg) == 0 or len(fg) == 0:
+            continue
+        cost = len(bg)/total*np.var(bg) + len(fg)/total*np.var(fg)
+        if cost < best_cost:
+            best_cost, best_T = cost, T
+    return best_T
+
+def draw_grid_lines(gray):
+    T = otsu_threshold_pixels(gray)
+    pct = T / 255.0
+    H, W = gray.shape
+    col_prof = np.sum(gray, axis=0).astype(float)
+    row_prof = np.sum(gray, axis=1).astype(float)
+    col_T = (np.max(col_prof)-np.min(col_prof))*pct
+    row_T = (np.max(row_prof)-np.min(row_prof))*pct
+    col_s, row_s = col_prof-col_T, row_prof-row_T
+
+    def find_gap_lines(prof):
+        is_pos = prof > 0
+        crossings = [i for i in range(1, len(is_pos)) if is_pos[i] != is_pos[i-1]]
+        if len(crossings) < 2:
+            return np.array([])
+        start = 1 if not is_pos[0] else 0
+        return np.array([int((crossings[k]+crossings[k+1])/2) for k in range(start, len(crossings)-1, 2)])
+
+    xl = find_gap_lines(col_s)
+    yl = find_gap_lines(row_s)
+    return xl, yl, T, pct, col_prof, row_prof, col_s, row_s, col_T, row_T
+
+def keep_largest_object(binary):
+    L, n = ndimage.label(binary)
+    if n == 0: return np.zeros_like(binary)
+    return (L == (np.argmax([int(np.sum(L==i)) for i in range(1,n+1)])+1)).astype(np.uint8)
+
+def remove_small_objects(binary):
+    L, n = ndimage.label(binary)
+    if n == 0: return binary
+    areas = [int(np.sum(L==i)) for i in range(1,n+1)]
+    minsz = max(1, int(np.median(areas)*0.25))
+    r = binary.copy()
+    for i in range(1, n+1):
+        if areas[i-1] < minsz: r[L==i] = 0
+    return r
+
+
+def fig_to_base64(fig):
+    """matplotlib figure → base64 PNG"""
+    buf = io.BytesIO()
+    fig.savefig(buf, format='png', dpi=120, bbox_inches='tight')
+    buf.seek(0)
+    b64 = base64.b64encode(buf.read()).decode()
+    plt.close(fig)
+    return f'data:image/png;base64,{b64}'
+
+
+def process_image(img_array):
+    """对上传的图像运行完整处理流程，返回 dict"""
+    # 转灰度
+    if img_array.ndim == 3 and img_array.shape[2] >= 3:
+        gray = (color.rgb2gray(img_array[:,:,:3])*255).astype(np.uint8)
+    else:
+        gray = img_array.astype(np.uint8)
+
+    # 网格划线
+    xl, yl, T, pct, cp, rp, cs, rs, cT, rT = draw_grid_lines(gray)
+
+    # 逐格分割
+    bw = np.zeros_like(gray)
+    for i in range(len(yl)-1):
+        for j in range(len(xl)-1):
+            r1, r2 = yl[i], yl[i+1]
+            c1, c2 = xl[j], xl[j+1]
+            blk = gray[r1:r2, c1:c2]
+            if blk.size == 0: continue
+            bt = otsu_threshold_pixels(blk)
+            bb = keep_largest_object((blk > bt).astype(np.uint8))
+            bw[r1:r2, c1:c2] = bb
+    bw_clean = remove_small_objects(bw)
+
+    # 统计
+    L, n = ndimage.label(bw_clean)
+    spots = [int(np.sum(L==i)) for i in range(1,n+1)]
+    valid = [s for s in spots if s >= 10]
+
+    # ---- 生成6张图 ----
+    images = {}
+
+    # 1: grid overlay
+    fig, ax = plt.subplots(figsize=(6,6))
+    ax.imshow(gray, cmap='gray')
+    for x in xl: ax.axvline(x=x, color='lime', linewidth=0.5)
+    for y in yl: ax.axhline(y=y, color='lime', linewidth=0.5)
+    ax.set_title(f'Grid ({len(xl)}x{len(yl)})', fontsize=12); ax.axis('off')
+    images['grid_overlay'] = fig_to_base64(fig)
+
+    # 2: col projection
+    fig, ax = plt.subplots(figsize=(10,4))
+    xs = np.arange(len(cp)); ax.plot(xs,cp,'b-',lw=0.6); ax.axhline(y=cT,color='orange',ls='--',lw=1)
+    ax.plot(xs,cs,'g-',lw=0.6,alpha=0.5)
+    ax.fill_between(xs,0,cs,where=(cs>0),color='green',alpha=0.1)
+    ax.fill_between(xs,0,cs,where=(cs<0),color='red',alpha=0.1)
+    for x in xl: ax.axvline(x=x,color='red',lw=0.5,alpha=0.5)
+    ax.set_title('Column Projection', fontsize=12); ax.set_xlabel('column')
+    images['col_projection'] = fig_to_base64(fig)
+
+    # 3: row projection
+    fig, ax = plt.subplots(figsize=(10,4))
+    ys = np.arange(len(rp)); ax.plot(rp,ys,'b-',lw=0.6); ax.axvline(x=rT,color='orange',ls='--',lw=1)
+    ax.plot(rs,ys,'g-',lw=0.6,alpha=0.5)
+    for y in yl: ax.axhline(y=y,color='red',lw=0.5,alpha=0.5)
+    ax.set_title('Row Projection', fontsize=12); ax.set_ylabel('row')
+    images['row_projection'] = fig_to_base64(fig)
+
+    # 4: histogram
+    fig, ax = plt.subplots(figsize=(7,4))
+    ax.hist(gray.ravel(),bins=50,color='#2d8a4e',edgecolor='white',linewidth=0.3)
+    ax.axvline(x=T,color='#ff4444',ls='--',lw=2,label=f'Otsu T={T} ({pct*100:.1f}%)')
+    ax.set_title('Histogram + Otsu', fontsize=12); ax.legend()
+    images['histogram'] = fig_to_base64(fig)
+
+    # 5: segmentation raw
+    fig, ax = plt.subplots(figsize=(6,6))
+    ax.imshow(bw, cmap='gray'); ax.set_title('Segmentation (raw)', fontsize=12); ax.axis('off')
+    images['segmentation_raw'] = fig_to_base64(fig)
+
+    # 6: post processed
+    fig, ax = plt.subplots(figsize=(6,6))
+    ax.imshow(bw_clean, cmap='gray')
+    ax.set_title(f'Post-processed ({len(valid)} spots)', fontsize=12); ax.axis('off')
+    images['post_processed'] = fig_to_base64(fig)
+
+    stats = {
+        'spots': len(valid),
+        'T_otsu': int(T),
+        'pct': round(pct*100, 1),
+        'lines_x': int(len(xl)),
+        'lines_y': int(len(yl)),
+        'width': int(gray.shape[1]),
+        'height': int(gray.shape[0])
+    }
+
+    return {'images': images, 'stats': stats}
+
+
+# ================================================================
+# Flask 路由
+# ================================================================
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/process', methods=['POST'])
+def process():
+    if 'file' not in request.files:
+        return jsonify({'error': '未找到文件'}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': '文件名为空'}), 400
+
+    # 读取图像
+    img_bytes = file.read()
+    img = Image.open(io.BytesIO(img_bytes))
+    img_array = np.array(img)
+
+    # 处理
+    try:
+        result = process_image(img_array)
+        return jsonify(result)
+    except Exception as e:
+        return jsonify({'error': f'处理失败: {str(e)}'}), 500
+
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)
diff --git a/web/static/style.css b/web/static/style.css
new file mode 100644
index 0000000..73918d6
--- /dev/null
+++ b/web/static/style.css
@@ -0,0 +1,214 @@
+/* ============================================================
+   cDNA Lab Console — Bio-laboratory Instrument Display Theme
+   Dark background + fluorescent green accents + monospace data
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=DM+Sans:wght@400;500;700&display=swap');
+
+:root {
+  --bg: #080e08;
+  --bg-panel: #0d160d;
+  --border: #1a2e1a;
+  --green: #00e676;
+  --green-dim: #1b5e20;
+  --green-glow: rgba(0, 230, 118, 0.25);
+  --text: #b8c7b8;
+  --text-dim: #5a6e5a;
+  --text-bright: #e0f0e0;
+  --red: #ff3d3d;
+  --yellow: #ffc107;
+  --font-mono: 'Share Tech Mono', 'Courier New', monospace;
+  --font-ui: 'DM Sans', 'Segoe UI', sans-serif;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-ui);
+  min-height: 100vh;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* ---- Grain overlay ---- */
+.noise-overlay {
+  position: fixed; inset: 0; pointer-events: none; z-index: 999;
+  opacity: 0.04;
+  background: repeating-conic-gradient(#000 0%, transparent .0002%, #000 .0004%, transparent .0008%);
+}
+
+/* ---- Header ---- */
+.header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 16px 32px; border-bottom: 1px solid var(--border);
+  background: var(--bg-panel);
+}
+.header-left { display: flex; align-items: center; gap: 10px; }
+.logo-bracket { color: var(--green); font-size: 1.5rem; font-family: var(--font-mono); opacity: 0.6; }
+.logo-text {
+  font-family: var(--font-mono); font-size: 1.4rem; font-weight: 400;
+  color: var(--text-bright); letter-spacing: 0.15em;
+}
+.logo-accent { color: var(--green); font-weight: 700; }
+.header-right { display: flex; align-items: center; gap: 8px; }
+.status-dot {
+  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
+  box-shadow: 0 0 8px var(--green-glow); animation: pulse 2s infinite;
+}
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+.status-label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); letter-spacing: 0.2em; }
+
+/* ---- Container ---- */
+.container { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
+
+/* ---- Upload Zone ---- */
+.upload-section { margin-bottom: 28px; }
+.upload-zone-wrapper { display: flex; flex-direction: column; gap: 16px; }
+.upload-zone {
+  border: 2px dashed var(--border); border-radius: 8px;
+  padding: 48px 24px; text-align: center; cursor: pointer;
+  transition: all 0.3s ease; background: var(--bg-panel);
+  position: relative;
+}
+.upload-zone:hover, .upload-zone.dragover {
+  border-color: var(--green); background: rgba(0,230,118,0.04);
+  box-shadow: inset 0 0 40px rgba(0,230,118,0.03);
+}
+.upload-zone.dragover { border-style: solid; }
+.upload-svg { color: var(--green-dim); margin-bottom: 12px; transition: color 0.3s; }
+.upload-zone:hover .upload-svg { color: var(--green); }
+.upload-text {
+  font-family: var(--font-mono); font-size: 1.1rem; color: var(--text-bright);
+  letter-spacing: 0.1em; margin-bottom: 6px;
+}
+.upload-cursor {
+  display: inline-block; color: var(--green); animation: blink 1s step-end infinite;
+}
+@keyframes blink { 50% { opacity: 0; } }
+.upload-sub { font-size: 0.85rem; color: var(--text-dim); }
+
+/* ---- Preview + Button ---- */
+.upload-preview { display: flex; flex-direction: column; align-items: center; gap: 16px; }
+.upload-preview img {
+  max-width: 100%; max-height: 300px; border-radius: 6px;
+  border: 1px solid var(--border); object-fit: contain; background: #000;
+}
+.btn-process {
+  display: flex; align-items: center; gap: 8px;
+  padding: 12px 32px; border: none; border-radius: 4px;
+  background: var(--green-dim); color: var(--green);
+  font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.15em;
+  cursor: pointer; transition: all 0.25s;
+}
+.btn-process:hover { background: var(--green); color: #000; }
+
+/* ---- Status Bar ---- */
+.status-bar {
+  display: flex; align-items: center; gap: 14px;
+  padding: 10px 16px; background: var(--bg-panel); border: 1px solid var(--border);
+  border-radius: 4px; margin-bottom: 24px;
+}
+.status-track {
+  flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden;
+}
+.status-fill {
+  height: 100%; width: 0%; background: var(--green);
+  transition: width 0.1s linear;
+  box-shadow: 0 0 6px var(--green-glow);
+}
+.status-text { font-family: var(--font-mono); font-size: 0.8rem; color: var(--green); letter-spacing: 0.15em; }
+
+/* ---- Error ---- */
+.error-msg {
+  background: rgba(255,61,61,0.1); border: 1px solid var(--red); color: var(--red);
+  padding: 12px 18px; border-radius: 4px; margin-bottom: 20px;
+  font-family: var(--font-mono); font-size: 0.85rem;
+}
+
+/* ---- Stats Panel ---- */
+.stats-panel {
+  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px;
+}
+.stat-card {
+  flex: 1; min-width: 140px; padding: 16px 20px;
+  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px;
+  text-align: center; transition: border-color 0.3s;
+}
+.stat-card:hover { border-color: var(--green-dim); }
+.stat-card.spot { border-color: var(--green-dim); background: rgba(0,230,118,0.04); }
+.stat-label {
+  display: block; font-family: var(--font-mono); font-size: 0.7rem;
+  color: var(--text-dim); letter-spacing: 0.2em; margin-bottom: 6px;
+}
+.stat-value {
+  display: block; font-family: var(--font-mono); font-size: 1.5rem;
+  color: var(--green); font-weight: 400;
+}
+.stat-card.spot .stat-value { font-size: 2rem; }
+
+/* ---- Gallery ---- */
+.gallery { margin-bottom: 40px; }
+.gallery-header {
+  display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
+}
+.gallery-title {
+  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 400;
+  color: var(--text-bright); letter-spacing: 0.2em;
+}
+.btn-dl-all {
+  display: flex; align-items: center; gap: 6px;
+  padding: 8px 20px; border: 1px solid var(--green-dim); border-radius: 4px;
+  background: transparent; color: var(--green);
+  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em;
+  cursor: pointer; transition: all 0.25s;
+}
+.btn-dl-all:hover { background: var(--green-dim); }
+.btn-dl-all span { font-size: 1rem; }
+
+.gallery-grid {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
+}
+@media (max-width: 800px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 500px) { .gallery-grid { grid-template-columns: 1fr; } }
+
+.gallery-card { border-radius: 4px; overflow: hidden; background: var(--bg-panel); border: 1px solid var(--border); }
+.gallery-card-inner {
+  aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
+  background: #000; cursor: pointer;
+}
+.gallery-card-inner img {
+  width: 100%; height: 100%; object-fit: contain;
+  transition: transform 0.3s ease;
+}
+.gallery-card-inner:hover img { transform: scale(1.05); }
+.gallery-card-label {
+  padding: 8px 12px; font-family: var(--font-mono); font-size: 0.65rem;
+  color: var(--text-dim); letter-spacing: 0.1em; text-align: center;
+  border-top: 1px solid var(--border);
+}
+
+/* ---- Lightbox ---- */
+.lightbox {
+  display: none; position: fixed; inset: 0; z-index: 1000;
+  background: rgba(0,0,0,0.92); flex-direction: column; align-items: center; justify-content: center;
+}
+.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border: 1px solid var(--border); background: #000; }
+.lightbox-close {
+  position: absolute; top: 20px; right: 30px;
+  font-size: 2rem; color: var(--text-dim); cursor: pointer; transition: color 0.2s;
+}
+.lightbox-close:hover { color: var(--text-bright); }
+.lightbox-dl {
+  margin-top: 16px; padding: 10px 24px; border: 1px solid var(--green); border-radius: 4px;
+  color: var(--green); text-decoration: none; font-family: var(--font-mono); font-size: 0.9rem;
+  transition: all 0.25s;
+}
+.lightbox-dl:hover { background: var(--green); color: #000; }
+
+/* ---- Scrollbar ---- */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--green-dim); }
diff --git a/web/templates/index.html b/web/templates/index.html
new file mode 100644
index 0000000..3dd5ef0
--- /dev/null
+++ b/web/templates/index.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>cDNA Microarray Processing - Lab Console</title>
+<link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+
+<div class="noise-overlay"></div>
+
+<header class="header">
+  <div class="header-left">
+    <span class="logo-bracket">[</span>
+    <h1 class="logo-text">cDNA<span class="logo-accent">//</span>PROCESS</h1>
+    <span class="logo-bracket">]</span>
+  </div>
+  <div class="header-right">
+    <span class="status-dot"></span>
+    <span class="status-label">SYSTEM READY</span>
+  </div>
+</header>
+
+<main class="container">
+  <section class="upload-section" id="uploadSection">
+    <div class="upload-zone-wrapper">
+      <div class="upload-zone" id="dropZone">
+        <svg class="upload-svg" width="52" height="52" viewBox="0 0 52 52">
+          <circle cx="26" cy="20" r="8" stroke="currentColor" stroke-width="1.5" fill="none"/>
+          <path d="M13 42c-5 0-8-1.5-8-6s3.5-9 8-9c0-6 6-10 13-10s13 4 13 10c4.5 0 8 4.5 8 9s-3.5 6-8 6H13z" stroke="currentColor" stroke-width="1.5" fill="none"/>
+          <circle cx="22" cy="16" r="2.2" fill="currentColor"/>
+          <circle cx="26" cy="11" r="2.8" fill="currentColor"/>
+        </svg>
+        <p class="upload-text">Drop image here<span class="upload-cursor">_</span></p>
+        <p class="upload-sub">click to browse &middot; TIFF / PNG / JPEG</p>
+        <input type="file" id="fileInput" accept="image/*" hidden>
+      </div>
+      <div class="upload-preview" id="uploadPreview" style="display:none">
+        <img id="previewImg" alt="Preview">
+        <button class="btn-process" id="btnProcess">
+          <svg width="16" height="16" viewBox="0 0 16 16"><polygon points="3,1 16,8 3,15" fill="currentColor"/></svg>
+          START ANALYSIS
+        </button>
+      </div>
+    </div>
+  </section>
+
+  <div class="status-bar" id="statusBar" style="display:none">
+    <div class="status-track">
+      <div class="status-fill" id="statusFill"></div>
+    </div>
+    <span class="status-text" id="statusText">PROCESSING...</span>
+  </div>
+
+  <div class="error-msg" id="errorMsg" style="display:none"></div>
+
+  <section class="stats-panel" id="statsPanel" style="display:none">
+    <div class="stat-card"><span class="stat-label">THRESHOLD</span><span class="stat-value" id="statT">--</span></div>
+    <div class="stat-card"><span class="stat-label">ADAPTIVE %</span><span class="stat-value" id="statPct">--</span></div>
+    <div class="stat-card"><span class="stat-label">GRID</span><span class="stat-value" id="statGrid">--</span></div>
+    <div class="stat-card spot"><span class="stat-label">SPOTS FOUND</span><span class="stat-value" id="statSpots">--</span></div>
+    <div class="stat-card"><span class="stat-label">DIMENSIONS</span><span class="stat-value" id="statSize">--</span></div>
+  </section>
+
+  <section class="gallery" id="gallery" style="display:none">
+    <div class="gallery-header">
+      <h2 class="gallery-title">RESULTS</h2>
+      <button class="btn-dl-all" id="btnDownloadAll"><span>&#8595;</span> DOWNLOAD ALL</button>
+    </div>
+    <div class="gallery-grid" id="galleryGrid"></div>
+  </section>
+</main>
+
+<div class="lightbox" id="lightbox">
+  <span class="lightbox-close" id="lightboxClose">&times;</span>
+  <img id="lightboxImg" src="" alt="Full size">
+  <a id="lightboxDownload" class="lightbox-dl" download>&#8595;</a>
+</div>
+
+<script>
+(function(){
+var dz=document.getElementById('dropZone');
+var fi=document.getElementById('fileInput');
+var up=document.getElementById('uploadPreview');
+var pi=document.getElementById('previewImg');
+var bp=document.getElementById('btnProcess');
+var sb=document.getElementById('statusBar');
+var sf=document.getElementById('statusFill');
+var st=document.getElementById('statusText');
+var er=document.getElementById('errorMsg');
+var sp=document.getElementById('statsPanel');
+var ga=document.getElementById('gallery');
+var gg=document.getElementById('galleryGrid');
+var lb=document.getElementById('lightbox');
+var li=document.getElementById('lightboxImg');
+var lc=document.getElementById('lightboxClose');
+var ld=document.getElementById('lightboxDownload');
+var file=null;
+
+dz.addEventListener('dragover',function(e){e.preventDefault();dz.classList.add('dragover')});
+dz.addEventListener('dragleave',function(){dz.classList.remove('dragover')});
+dz.addEventListener('drop',function(e){e.preventDefault();dz.classList.remove('dragover');if(e.dataTransfer.files.length)h(e.dataTransfer.files[0])});
+dz.addEventListener('click',function(){fi.click()});
+fi.addEventListener('change',function(e){if(e.target.files.length)h(e.target.files[0])});
+
+function h(f){
+  file=f;
+  var r=new FileReader();
+  r.onload=function(e){
+    pi.src=e.target.result;
+    up.style.display='flex';
+    er.style.display='none';
+    sp.style.display='none';
+    ga.style.display='none';
+  };
+  r.readAsDataURL(f);
+}
+
+bp.addEventListener('click',function(){
+  if(!file) return;
+  var fd=new FormData(); fd.append('file',file);
+  sb.style.display='block'; sf.style.width='0%'; st.textContent='UPLOADING...'; er.style.display='none';
+  var w=0; var iv=setInterval(function(){w=Math.min(w+2,85);sf.style.width=w+'%'},50);
+  fetch('/process',{method:'POST',body:fd}).then(function(r){
+    clearInterval(iv); sf.style.width='100%'; st.textContent='COMPLETE';
+    if(!r.ok) throw new Error('Server error');
+    return r.json();
+  }).then(function(d){
+    if(d.error) throw new Error(d.error);
+    render(d);
+    setTimeout(function(){sb.style.display='none'},1500);
+  }).catch(function(e){
+    clearInterval(iv); sb.style.display='none';
+    er.textContent='ERROR: '+e.message; er.style.display='block';
+  });
+});
+
+function render(d){
+  var s=d.stats;
+  document.getElementById('statT').textContent=s.T_otsu;
+  document.getElementById('statPct').textContent=s.pct+'%';
+  document.getElementById('statGrid').textContent=s.lines_x+' x '+s.lines_y;
+  document.getElementById('statSpots').textContent=s.spots;
+  document.getElementById('statSize').textContent=s.width+' x '+s.height;
+  sp.style.display='flex';
+  var names=['grid_overlay','col_projection','row_projection','histogram','segmentation_raw','post_processed'];
+  var labels=['GRID OVERLAY','COLUMN PROJECTION','ROW PROJECTION','HISTOGRAM + OTSU','SEGMENTATION','POST-PROCESSED'];
+  gg.innerHTML='';
+  names.forEach(function(n,i){
+    var c=document.createElement('div'); c.className='gallery-card';
+    c.innerHTML='<div class="gallery-card-inner"><img src="'+d.images[n]+'" onclick="zoom(\''+n+'.png\',\''+d.images[n]+'\')"></div><div class="gallery-card-label">'+labels[i]+'</div>';
+    gg.appendChild(c);
+  });
+  ga.style.display='block';
+  document.getElementById('btnDownloadAll').onclick=function(){
+    names.forEach(function(n,i){
+      setTimeout(function(){
+        var a=document.createElement('a'); a.href=d.images[n]; a.download=n+'.png';
+        document.body.appendChild(a); a.click(); document.body.removeChild(a);
+      },i*200);
+    });
+  };
+}
+
+window.zoom=function(name,src){
+  lb.style.display='flex'; li.src=src; ld.href=src; ld.download=name;
+};
+
+lc.addEventListener('click',function(){lb.style.display='none'});
+lb.addEventListener('click',function(e){if(e.target===lb) lb.style.display='none'});
+document.addEventListener('keydown',function(e){if(e.key==='Escape') lb.style.display='none'});
+})();
+</script>
+</body>
+</html>