refactor: 项目目录结构重组
- 中文目录名改为英文：cDNA图像处理实例→examples，参考资料→references - web→app（Flask应用标准命名） - 输出目录平移到 data/output/simple/ 和 data/output/full/ - 输入图像统一到 data/input/ - 构建脚本移到 scripts/ - 源码文件改用 snake_case 命名 - 更新所有文件路径引用和文档
This commit is contained in:
@@ -0,0 +1,22 @@
|
||||
"""cDNA Analyzer 启动器 — 供 PyInstaller 打包"""
|
||||
import os, sys, threading
|
||||
|
||||
# PyInstaller 打包后资源路径
|
||||
if getattr(sys, 'frozen', False):
|
||||
base = sys._MEIPASS
|
||||
else:
|
||||
base = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
|
||||
|
||||
# 设置模板和静态文件目录
|
||||
os.environ['TEMPLATE_DIR'] = os.path.join(base, 'templates')
|
||||
os.environ['STATIC_DIR'] = os.path.join(base, 'static')
|
||||
|
||||
# 导入 Flask app
|
||||
from main import app
|
||||
|
||||
def open_browser():
|
||||
os.startfile('http://localhost:5000')
|
||||
|
||||
if __name__ == '__main__':
|
||||
threading.Timer(1.5, open_browser).start()
|
||||
app.run(debug=False, port=5000)
|
||||
+232
@@ -0,0 +1,232 @@
|
||||
"""
|
||||
cDNA微阵列图像处理 - Web UI (Flask)
|
||||
=====================================
|
||||
启动：python app/main.py
|
||||
打包：python scripts/build.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'))
|
||||
|
||||
# PyInstaller 打包后资源路径
|
||||
if getattr(sys, 'frozen', False):
|
||||
bundle_dir = sys._MEIPASS
|
||||
template_dir = os.path.join(bundle_dir, 'templates')
|
||||
static_dir = os.path.join(bundle_dir, 'static')
|
||||
else:
|
||||
template_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'templates')
|
||||
static_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static')
|
||||
|
||||
app = Flask(__name__, template_folder=template_dir, static_folder=static_dir)
|
||||
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 = np.array([int(np.sum(L==i)) for i in range(1,n+1)])
|
||||
if len(areas) < 2: return binary
|
||||
best_T, best_cost, n_total = 0, float('inf'), len(areas)
|
||||
for T in np.unique(areas):
|
||||
s, l = areas[areas<=T], areas[areas>T]
|
||||
w_s, w_l = len(s)/n_total, len(l)/n_total
|
||||
if w_s==0 or w_l==0: continue
|
||||
cost = w_s*np.var(s) + w_l*np.var(l)
|
||||
if cost < best_cost: best_cost, best_T = cost, T
|
||||
r = binary.copy()
|
||||
for i in range(1, n+1):
|
||||
if int(np.sum(L==i)) < best_T: 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__':
|
||||
import threading
|
||||
def open_browser():
|
||||
os.startfile('http://localhost:5000')
|
||||
threading.Timer(1.5, open_browser).start()
|
||||
app.run(debug=True, port=5000)
|
||||
@@ -0,0 +1,202 @@
|
||||
/* ============================================================
|
||||
cDNA Lab Console — Clean Academic Theme
|
||||
Deep navy + white panels + subtle blue accents
|
||||
============================================================ */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #0c1524;
|
||||
--bg-panel: #14233a;
|
||||
--bg-card: #1a2d4a;
|
||||
--border: #1e3354;
|
||||
--border-light: #2a4570;
|
||||
--accent: #4d8ef7;
|
||||
--accent-dim: #2b5db8;
|
||||
--accent-soft: rgba(77, 142, 247, 0.12);
|
||||
--text: #8899b4;
|
||||
--text-dim: #4e6280;
|
||||
--text-bright: #d0ddf0;
|
||||
--white: #f0f4fc;
|
||||
--red: #f55050;
|
||||
--red-soft: rgba(245, 80, 80, 0.12);
|
||||
--green: #52c97d;
|
||||
--font-mono: 'IBM Plex Mono', 'Courier New', monospace;
|
||||
--font-ui: 'Inter', '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;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ---- Header ---- */
|
||||
.header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 20px 36px; border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-panel);
|
||||
}
|
||||
.header-left { display: flex; align-items: center; gap: 10px; }
|
||||
.logo-bracket { color: var(--text-dim); font-size: 1.3rem; font-family: var(--font-mono); }
|
||||
.logo-text {
|
||||
font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500;
|
||||
color: var(--white); letter-spacing: 0.12em;
|
||||
}
|
||||
.logo-accent { color: var(--accent); font-weight: 600; }
|
||||
.header-right { display: flex; align-items: center; gap: 10px; }
|
||||
.status-dot {
|
||||
width: 7px; height: 7px; border-radius: 50%; background: var(--green);
|
||||
box-shadow: 0 0 0 3px rgba(82, 201, 125, 0.2);
|
||||
}
|
||||
.status-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); letter-spacing: 0.15em; }
|
||||
|
||||
/* ---- Container ---- */
|
||||
.container { max-width: 1120px; margin: 0 auto; padding: 36px 28px; }
|
||||
|
||||
/* ---- Upload Zone ---- */
|
||||
.upload-section { margin-bottom: 32px; }
|
||||
.upload-zone-wrapper { display: flex; flex-direction: column; gap: 16px; }
|
||||
.upload-zone {
|
||||
border: 2px dashed var(--border); border-radius: 10px;
|
||||
padding: 52px 24px; text-align: center; cursor: pointer;
|
||||
transition: all 0.25s ease; background: var(--bg-panel);
|
||||
}
|
||||
.upload-zone:hover {
|
||||
border-color: var(--accent); background: var(--accent-soft);
|
||||
}
|
||||
.upload-zone.dragover { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }
|
||||
.upload-svg { color: var(--text-dim); margin-bottom: 14px; transition: color 0.25s; }
|
||||
.upload-zone:hover .upload-svg { color: var(--accent); }
|
||||
.upload-text {
|
||||
font-family: var(--font-mono); font-size: 1.05rem; color: var(--white);
|
||||
letter-spacing: 0.08em; margin-bottom: 6px;
|
||||
}
|
||||
.upload-cursor { display: inline-block; color: var(--accent); animation: blink 1s step-end infinite; }
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
.upload-sub { font-size: 0.85rem; color: var(--text-dim); }
|
||||
|
||||
.upload-preview { display: flex; flex-direction: column; align-items: center; gap: 16px; }
|
||||
.upload-preview img {
|
||||
max-width: 100%; max-height: 320px; border-radius: 8px;
|
||||
border: 1px solid var(--border); object-fit: contain; background: #000;
|
||||
}
|
||||
.btn-process {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 12px 36px; border: none; border-radius: 6px;
|
||||
background: var(--accent); color: #fff;
|
||||
font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.1em;
|
||||
cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.btn-process:hover { background: var(--accent-dim); transform: translateY(-1px); }
|
||||
|
||||
/* ---- Status Bar ---- */
|
||||
.status-bar {
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
padding: 10px 18px; background: var(--bg-panel); border: 1px solid var(--border);
|
||||
border-radius: 6px; margin-bottom: 28px;
|
||||
}
|
||||
.status-track { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
|
||||
.status-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.1s; }
|
||||
.status-text { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); letter-spacing: 0.12em; }
|
||||
|
||||
/* ---- Error ---- */
|
||||
.error-msg {
|
||||
background: var(--red-soft); border: 1px solid var(--red); color: var(--red);
|
||||
padding: 14px 20px; border-radius: 6px; margin-bottom: 24px;
|
||||
font-family: var(--font-mono); font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* ---- Stats Panel ---- */
|
||||
.stats-panel { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
|
||||
.stat-card {
|
||||
flex: 1; min-width: 150px; padding: 20px 24px;
|
||||
background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
|
||||
text-align: center; transition: border-color 0.25s;
|
||||
}
|
||||
.stat-card:hover { border-color: var(--border-light); }
|
||||
.stat-card.spot { border-color: var(--accent-dim); background: var(--accent-soft); }
|
||||
.stat-label {
|
||||
display: block; font-family: var(--font-mono); font-size: 0.68rem;
|
||||
color: var(--text-dim); letter-spacing: 0.18em; margin-bottom: 8px; font-weight: 500;
|
||||
}
|
||||
.stat-value {
|
||||
display: block; font-family: var(--font-mono); font-size: 1.5rem;
|
||||
color: var(--white); font-weight: 500;
|
||||
}
|
||||
.stat-card.spot .stat-value { color: var(--accent); font-size: 2rem; font-weight: 600; }
|
||||
|
||||
/* ---- Gallery ---- */
|
||||
.gallery { margin-bottom: 48px; }
|
||||
.gallery-header {
|
||||
display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px;
|
||||
}
|
||||
.gallery-title {
|
||||
font-family: var(--font-mono); font-size: 1rem; font-weight: 500;
|
||||
color: var(--white); letter-spacing: 0.16em;
|
||||
}
|
||||
.btn-dl-all {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 9px 22px; border: 1px solid var(--border-light); border-radius: 6px;
|
||||
background: transparent; color: var(--text);
|
||||
font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em;
|
||||
cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.btn-dl-all:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
|
||||
.btn-dl-all span { font-size: 1rem; }
|
||||
|
||||
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
@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: 8px; overflow: hidden; background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
transition: border-color 0.25s, transform 0.2s;
|
||||
}
|
||||
.gallery-card:hover { border-color: var(--border-light); transform: translateY(-2px); }
|
||||
.gallery-card-inner {
|
||||
aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
|
||||
background: #060c18; cursor: pointer;
|
||||
}
|
||||
.gallery-card-inner img {
|
||||
width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s;
|
||||
}
|
||||
.gallery-card-inner:hover img { transform: scale(1.04); }
|
||||
.gallery-card-label {
|
||||
padding: 10px 14px; 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); font-weight: 500;
|
||||
}
|
||||
|
||||
/* ---- Lightbox ---- */
|
||||
.lightbox {
|
||||
display: none; position: fixed; inset: 0; z-index: 1000;
|
||||
background: rgba(4, 10, 20, 0.95); flex-direction: column; align-items: center; justify-content: center;
|
||||
}
|
||||
.lightbox img {
|
||||
max-width: 92vw; max-height: 88vh; object-fit: contain;
|
||||
border-radius: 4px; border: 1px solid var(--border-light); background: #000;
|
||||
}
|
||||
.lightbox-close {
|
||||
position: absolute; top: 24px; right: 36px;
|
||||
font-size: 2rem; color: var(--text-dim); cursor: pointer; transition: color 0.2s;
|
||||
line-height: 1;
|
||||
}
|
||||
.lightbox-close:hover { color: var(--white); }
|
||||
.lightbox-dl {
|
||||
margin-top: 18px; padding: 10px 28px; border: 1px solid var(--accent); border-radius: 6px;
|
||||
color: var(--accent); text-decoration: none; font-family: var(--font-mono); font-size: 0.85rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.lightbox-dl:hover { background: var(--accent); color: #fff; }
|
||||
|
||||
/* ---- Scrollbar ---- */
|
||||
::-webkit-scrollbar { width: 5px; }
|
||||
::-webkit-scrollbar-track { background: var(--bg); }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
|
||||
@@ -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 · 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>↓</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">×</span>
|
||||
<img id="lightboxImg" src="" alt="Full size">
|
||||
<a id="lightboxDownload" class="lightbox-dl" download>↓</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>
|
||||
Reference in New Issue
Block a user