Add cover bg, scene mode selector, single image upload, demo hides upload, about page format

app.py

@@ -263,7 +263,8 @@ async def delete_image(username: str = Form(...), filename: str = Form(...)):
 # ==================== 检测 API ====================
 
 def _run_detect_pipeline(uploaded_paths, uname, ocr_engine, bge_tokenizer,
-                         bge_model, dinov2_extractor, matcher, history_before):
+                         bge_model, dinov2_extractor, matcher, history_before,
+                         scene_mode='auto'):
     scene_type_q = 'complex'
     ocr_result_q = None
     precomputed_text = None
@@ -271,7 +272,22 @@ def _run_detect_pipeline(uploaded_paths, uname, ocr_engine, bge_tokenizer,
     precomputed_dinov2 = None
 
     _t0 = time.perf_counter()
-    if ocr_engine is not None and uploaded_paths:
+    if scene_mode in ('text', 'complex'):
+        # 用户手动指定场景，跳过 classify_scene
+        scene_type_q = scene_mode
+        print(f'  [SKIP] classify_scene (用户指定场景: {scene_mode})')
+        if scene_mode == 'text' and ocr_engine is not None and uploaded_paths:
+            # 文本场景仍需 OCR 提取文本
+            from module.text_classifier import classify_scene
+            _, detail = classify_scene(uploaded_paths[0], ocr_engine)
+            ocr_result_q = detail.get('ocr_result')
+            precomputed_text = detail.get('full_text', '')
+            if precomputed_text and precomputed_text.strip():
+                from module.qdrant_manager import _bge_encode
+                precomputed_bge = _bge_encode(precomputed_text, bge_tokenizer, bge_model)
+                _t1 = time.perf_counter()
+                print(f'  [TIME] ocr+bge (skip classify): {_t1-_t0:.3f}s')
+    elif ocr_engine is not None and uploaded_paths:
         scene_type_q, _, _, ocr_result_q = classify_scene(uploaded_paths[0], ocr_engine)
         _t1 = time.perf_counter()
         print(f'  [TIME] classify_scene: {_t1-_t0:.3f}s')
@@ -366,6 +382,7 @@ def _run_detect_pipeline(uploaded_paths, uname, ocr_engine, bge_tokenizer,
 @app.post("/api/detect")
 async def detect(
     username: str = Form(...),
+    scene_mode: str = Form(default='auto'),
     images: list[UploadFile] = File(default=[]),
 ):
     global session_data, _qd_caches
@@ -430,6 +447,7 @@ async def detect(
             executor, _run_detect_pipeline,
             uploaded_paths, uname, ocr_engine, bge_tokenizer,
             bge_model, dinov2_extractor, matcher, history_before,
+            scene_mode,
         )
 
     peak = resource_monitor.stop_monitoring()

index.html

@@ -29,10 +29,18 @@ body{
   background:#0a0e27;
 }
 
+/* === 背景图 cover.png === */
+.bg-cover{
+  position:fixed;inset:0;z-index:-3;
+  background-image:url('/cover.png');
+  background-size:cover;background-position:center;
+  opacity:0.35;
+}
+
 /* === 动态弥散光背景 === */
 .bg-lights{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
 .bg-lights::before,.bg-lights::after{
-  content:'';position:absolute;border-radius:50%;filter:blur(80px);opacity:0.6;
+  content:'';position:absolute;border-radius:50%;filter:blur(80px);opacity:0.5;
 }
 .bg-lights::before{
   width:600px;height:600px;
@@ -65,19 +73,14 @@ body{
 
 /* === Parallax 背景层（滚动速度为前景50%） === */
 .parallax-bg{
-  position:fixed;inset:0;z-index:-1;pointer-events:none;
-  transform:translateY(0);
-  will-change:transform;
+  position:fixed;inset:0;z-index:-3;pointer-events:none;
+  transform:translateY(0);will-change:transform;
 }
-
-/* === 玻璃拟态卡片 === */
-.glass{
-  background:var(--glass-bg);
-  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
-  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
-  border:1px solid var(--glass-border);
-  border-radius:16px;
-  box-shadow:0 8px 32px rgba(0,0,0,0.2);
+.parallax-bg .bg-cover-inner{
+  position:absolute;inset:0;
+  background-image:url('/cover.png');
+  background-size:cover;background-position:center;
+  opacity:0.3;
 }
 
 .container{max-width:960px;margin:0 auto;padding:20px;position:relative;z-index:1}
@@ -123,6 +126,13 @@ body{
 .btn-warning{background:linear-gradient(135deg,#ffa726,#f57c00);border:none;color:#fff}
 .btn-sm{padding:6px 12px;font-size:12px}
 
+/* === Scene Mode Selector === */
+.scene-selector{display:flex;gap:8px;align-items:center;margin-top:12px}
+.scene-selector label{font-size:13px;color:var(--text-secondary);margin-right:4px}
+.scene-option{padding:8px 16px;border-radius:8px;cursor:pointer;font-size:13px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.05);transition:all .2s;color:var(--text-secondary)}
+.scene-option:hover{border-color:var(--accent-light);color:#fff}
+.scene-option.active{background:linear-gradient(135deg,#7c4dff,#536dfe);color:#fff;border-color:transparent}
+
 /* === Cards === */
 .card{
   padding:20px;margin-bottom:16px;
@@ -233,7 +243,7 @@ tr.row-fail td{color:#ef9a9a}
 .about-page{display:none;padding:20px;max-width:900px;margin:0 auto}
 .about-page.active{display:block}
 .about-section{margin-bottom:24px}
-.about-section h2{font-size:20px;margin-bottom:12px;color:var(--accent-light)}
+.about-section h2{font-size:22px;margin-bottom:12px;color:var(--accent-light)}
 .about-section h3{font-size:16px;margin:12px 0 8px;color:#fff}
 .about-section p{font-size:14px;line-height:1.7;color:var(--text-secondary);margin-bottom:8px}
 .about-section ul{margin-left:20px;color:var(--text-secondary);font-size:14px;line-height:1.8}
@@ -242,16 +252,24 @@ tr.row-fail td{color:#ef9a9a}
 .compare-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.08)}
 .compare-table tr:hover{background:rgba(255,255,255,0.03)}
 .tech-badge{display:inline-block;padding:4px 12px;margin:4px;border-radius:20px;font-size:12px;background:rgba(124,77,255,0.2);border:1px solid rgba(124,77,255,0.4);color:#b388ff}
+.about-header-card{
+  padding:28px;margin-bottom:20px;text-align:center;
+  background:linear-gradient(135deg,rgba(124,77,255,0.2),rgba(13,71,161,0.2));
+  border:1px solid var(--glass-border);border-radius:16px;
+}
+.about-header-card .track{font-size:13px;color:var(--accent-light);margin-bottom:6px;letter-spacing:1px}
+.about-header-card h1{font-size:28px;margin-bottom:8px;background:linear-gradient(90deg,#b388ff,#7c4dff,#536dfe);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+.about-header-card .tagline{font-size:14px;color:var(--text-secondary)}
 
 .hidden{display:none!important}
 </style>
 </head>
 <body>
 
-<!-- 动态弥散光背景 -->
+<!-- 背景层 -->
+<div class="parallax-bg" id="parallaxBg"><div class="bg-cover-inner"></div></div>
 <div class="bg-lights"></div>
 <div class="noise-overlay"></div>
-<div class="parallax-bg" id="parallaxBg"></div>
 
 <!-- ========== 主应用视图 ========== -->
 <div id="appView" class="container">
@@ -298,14 +316,23 @@ tr.row-fail td{color:#ef9a9a}
       </div>
     </div>
 
-    <div class="card">
-      <h3>📷 上传待检测图片 <span style="color:var(--text-muted)">(支持多选)</span></h3>
+    <!-- 上传区域（示例场景时隐藏） -->
+    <div id="uploadSection" class="card">
+      <h3>📷 上传待检测图片</h3>
       <div class="upload-zone" id="queryZone">
-        <input type="file" accept="image/*" multiple id="queryInput" onchange="onQueryChange()">
+        <input type="file" accept="image/*" id="queryInput" onchange="onQueryChange()">
         <div class="icon">🖼️</div>
-        <div class="hint">点击选择待检测图片（可多选）</div>
+        <div class="hint">点击选择待检测图片（仅支持单张）</div>
       </div>
       <div id="queryFileList" class="file-list"></div>
+
+      <!-- 场景选择 -->
+      <div class="scene-selector">
+        <label>场景模式：</label>
+        <div class="scene-option active" data-mode="auto" onclick="selectSceneMode('auto')">默认</div>
+        <div class="scene-option" data-mode="text" onclick="selectSceneMode('text')">文本</div>
+        <div class="scene-option" data-mode="complex" onclick="selectSceneMode('complex')">复杂</div>
+      </div>
     </div>
 
     <div style="text-align:center;margin:20px 0">
@@ -323,13 +350,39 @@ tr.row-fail td{color:#ef9a9a}
     <button class="btn btn-sm" onclick="hideAbout()">← 返回</button>
   </div>
 
+  <!-- 报名信息头 -->
+  <div class="about-header-card">
+    <div class="track">报名赛道：造个新解法 — 聚焦新一代学习与工作方式</div>
+    <h1>慧眼同源</h1>
+    <div class="tagline">多模态文档去重与版本溯源系统</div>
+  </div>
+
   <div class="card">
-    <h2 style="color:var(--accent-light);margin-bottom:12px">项目概述</h2>
-    <p>慧眼同源是一个多模态文档去重与版本溯源系统，能够检测两张或多张不同角度拍摄的图片是否为同一场景或同一文档。</p>
-    <p>系统自动识别图片类型并路由至专用检测管线：文本场景（合同、证书等文档）使用 PaddleOCR + BGE 语义向量匹配；复杂场景（实景照片）使用 DINOv2 视觉特征匹配。</p>
+    <h2 style="color:var(--accent-light);margin-bottom:12px">1. Demo 简介</h2>
+    <p><strong style="color:#fff">是什么：</strong>一个基于 Web 浏览器访问的多模态文档去重与版本溯源系统，用户上传图片即可自动检测是否与历史库中的图片为同一场景或同一文档。</p>
+    <p><strong style="color:#fff">面向谁：</strong>企业法务审核人员、财务报销审核岗、知识库运营人员、高校教师与教务人员、自媒体创作者、个人云盘用户。</p>
+    <p><strong style="color:#fff">主要功能：</strong></p>
+    <ul>
+      <li>📄 <strong>文本场景检测</strong>：合同、证书等文档通过 OCR + BGE 语义匹配，穿透措辞差异识别同源文档</li>
+      <li>🏞️ <strong>复杂场景检测</strong>：实景照片通过 DINOv2 视觉特征匹配，识别不同角度拍摄的同一场景</li>
+      <li>📊 <strong>可视化证据</strong>：检测结果附带 patch 匹配连线 / OCR 文本对比，提供可解释的判定依据</li>
+    </ul>
     <p style="margin-top:10px"><strong style="color:#fff">🏆 本项目全程由 TRAE AI 制作</strong></p>
   </div>
 
+  <div class="card">
+    <h2 style="color:var(--accent-light);margin-bottom:12px">2. Demo 创作思路</h2>
+
+    <h3>💡 灵感来源</h3>
+    <p>最初做多角度场景一致性检测时发现，DINOv2 的视觉特征匹配能力天然能识别"同一张纸不同角度拍的照片"，BGE 的语义匹配能穿透表述差异找到内容本质。这两个能力组合起来，恰好是文档去重场景一直缺失的那块拼图——从视觉和语义两个维度理解文档的"同源性"。</p>
+
+    <h3>🎯 想解决的问题</h3>
+    <p>法务审核合同时，同一份合同被不同部门换了个标题重新提交审批，审核人靠肉眼和记忆根本发现不了；财务报销时，同一张发票手机拍一次、扫描仪扫一次，两次都能通过系统；学生作业抄袭只需改几个字就能绕过传统查重。这些"同源不同形"的重复问题，传统查重工具完全失效。</p>
+
+    <h3>🤔 为什么做这个方向</h3>
+    <p>现有查重工具只比对文字是否一样，换几个词就查不出来，更别说识别不同角度拍的同一张纸。我们判断，文档去重需要从"字面比对"升级到"语义+视觉"的多模态理解。DINOv2 reg4 的 register tokens 消除了 CLS token 中的 artifact，特征质量更高；BGE-small-zh 针对中文语义优化。两者结合，恰好能覆盖"换皮文档"和"多角度同场景"两大查重盲区。这是传统工具做不到的突破性解法。</p>
+  </div>
+
   <div class="card">
     <h2 style="color:var(--accent-light);margin-bottom:12px">核心技术栈</h2>
     <div>
@@ -355,7 +408,7 @@ tr.row-fail td{color:#ef9a9a}
     <p>DINOv2 的 reg4 版本通过 register tokens 消除了 CLS token 中的 artifact，特征质量更高，能更准确地识别不同角度拍摄的同一场景。</p>
 
     <h3>🔀 场景自动分类</h3>
-    <p>系统通过 4 个加权信号自动判断图片类型：文本面积占比（0.15）、背景白度（0.50）、颜色方差倒数（0.25）、文本行密度（0.10）。综合得分 ≥ 0.45 判为文本场景，否则为复杂场景。</p>
+    <p>系统通过 4 个加权信号自动判断图片类型：文本面积占比（0.15）、背景白度（0.50）、颜色方差倒数（0.25）、文本行密度（0.10）。综合得分 ≥ 0.45 判为文本场景，否则为复杂场景。用户也可手动指定场景模式以跳过分类步骤。</p>
 
     <h3>⚡ Qdrant 向量检索</h3>
     <p>历史图片特征预存储到 Qdrant 向量数据库，使用 HNSW 算法实现近似最近邻（ANN）搜索，将 O(N) 暴力比对优化为 O(log N)，配合内存缓存实现毫秒级候选筛选。</p>
@@ -468,6 +521,8 @@ tr.row-fail td{color:#ef9a9a}
 <script>
 let currentUser = '';
 let historyUsers = [];
+let selectedSceneMode = 'auto';
+let isDemoMode = false;
 
 document.getElementById('usernameInput').addEventListener('keydown', e => {
   if (e.key === 'Enter') doLogin();
@@ -479,6 +534,13 @@ window.addEventListener('scroll', () => {
   document.getElementById('parallaxBg').style.transform = `translateY(${scrolled * 0.5}px)`;
 });
 
+// === Scene Mode Selector ===
+function selectSceneMode(mode) {
+  selectedSceneMode = mode;
+  document.querySelectorAll('.scene-option').forEach(el => el.classList.remove('active'));
+  document.querySelector(`.scene-option[data-mode="${mode}"]`).classList.add('active');
+}
+
 // === About Page ===
 function showAbout() {
   document.getElementById('appView').classList.add('hidden');
@@ -502,6 +564,7 @@ async function doLogin() {
     if (!res.ok) { const d = await res.json(); errEl.textContent = d.detail || '登录失败'; return; }
     const data = await res.json();
     currentUser = data.username;
+    isDemoMode = false;
     showMain(data);
   } catch (e) { errEl.textContent = '网络错误: ' + e.message; }
 }
@@ -509,8 +572,10 @@ async function doLogin() {
 function showMain(data) {
   document.getElementById('loginView').classList.add('hidden');
   document.getElementById('mainView').classList.remove('hidden');
+  document.getElementById('uploadSection').classList.remove('hidden');
   document.getElementById('dispUser').textContent = data.username;
   document.getElementById('dispCount').textContent = data.history_count;
+  isDemoMode = false;
 }
 
 function switchUser() {
@@ -518,6 +583,7 @@ function switchUser() {
   document.getElementById('loginView').classList.remove('hidden');
   document.getElementById('usernameInput').value = '';
   document.getElementById('resultArea').innerHTML = '';
+  document.getElementById('uploadSection').classList.remove('hidden');
 }
 
 // === Upload ===
@@ -525,8 +591,16 @@ function onQueryChange() {
   const input = document.getElementById('queryInput');
   const list = document.getElementById('queryFileList');
   list.innerHTML = '';
-  for (const f of input.files) {
-    list.innerHTML += `<div>📎 ${f.name} (${(f.size/1024).toFixed(1)} KB)</div>`;
+  if (input.files.length > 1) {
+    alert('仅支持上传单张图片，已自动选择第一张');
+    const file = input.files[0];
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    input.files = dt.files;
+  }
+  if (input.files.length === 1) {
+    const f = input.files[0];
+    list.innerHTML = `<div>📎 ${f.name} (${(f.size/1024).toFixed(1)} KB)</div>`;
   }
 }
 
@@ -544,7 +618,8 @@ async function doDetect() {
   try {
     const fd = new FormData();
     fd.append('username', currentUser);
-    for (const f of input.files) fd.append('files', f);
+    fd.append('scene_mode', selectedSceneMode);
+    fd.append('files', input.files[0]);
     const res = await fetch('/api/detect', { method: 'POST', body: fd });
     const data = await res.json();
     if (data.error) { alert(data.error); return; }
@@ -580,7 +655,7 @@ function renderResult(data) {
     html += `</tbody></table></div>`;
   }
 
-  // 可视化
+  // 可视化（点击展开）
   if (data.visualizations && data.visualizations.length) {
     for (const vis of data.visualizations) {
       const visType = vis.scene_type === 'text' ? '文本场景' : '复杂场景';
@@ -598,7 +673,7 @@ function renderResult(data) {
   }
 
   // 再测一张按钮
-  html += `<div style="text-align:center;margin:20px 0"><button class="btn btn-primary" onclick="document.getElementById('resultArea').innerHTML='';document.getElementById('queryInput').value='';document.getElementById('queryFileList').innerHTML=''">🔄 再测一张</button></div>`;
+  html += `<div style="text-align:center;margin:20px 0"><button class="btn btn-primary" onclick="document.getElementById('resultArea').innerHTML='';document.getElementById('queryInput').value='';document.getElementById('queryFileList').innerHTML='';document.getElementById('uploadSection').classList.remove('hidden');isDemoMode=false;">🔄 再测一张</button></div>`;
 
   resultArea.innerHTML = html;
 }
@@ -606,6 +681,7 @@ function renderResult(data) {
 // === Demo ===
 async function runDemo(sceneType) {
   showLoading('正在运行示例场景...');
+  isDemoMode = true;
   const resultArea = document.getElementById('resultArea');
   if (resultArea) resultArea.innerHTML = '';
 
@@ -626,6 +702,8 @@ async function runDemo(sceneType) {
 function renderDemoResult(data) {
   document.getElementById('loginView').classList.add('hidden');
   document.getElementById('mainView').classList.remove('hidden');
+  // 示例模式下隐藏上传区域
+  document.getElementById('uploadSection').classList.add('hidden');
   document.getElementById('dispUser').textContent = '示例演示';
   document.getElementById('dispCount').textContent = '0';
 
@@ -639,11 +717,7 @@ function renderDemoResult(data) {
   html += `<h2>${isSame ? '✅ 同一场景' : '❌ 不同场景'}</h2>`;
   html += `<p>相似度: ${simPercent}% | 场景类型: ${sceneLabel}</p></div>`;
 
-  html += `<div style="display:flex;gap:12px;margin:12px 0">`;
-  html += `<div style="flex:1;text-align:center"><p style="font-size:12px;color:var(--text-muted);margin-bottom:4px">Query 图</p>${data.query_image_b64 ? `<img src="${data.query_image_b64}" style="max-width:100%;border-radius:8px;border:1px solid rgba(255,255,255,0.1)">` : '<span style="color:var(--text-muted)">无</span>'}</div>`;
-  html += `<div style="flex:1;text-align:center"><p style="font-size:12px;color:var(--text-muted);margin-bottom:4px">History 图</p>${data.history_image_b64 ? `<img src="${data.history_image_b64}" style="max-width:100%;border-radius:8px;border:1px solid rgba(255,255,255,0.1)">` : '<span style="color:var(--text-muted)">无</span>'}</div>`;
-  html += `</div>`;
-
+  // 不显示原图，直接展示可视化
   if (data.visualizations && data.visualizations.length) {
     for (const vis of data.visualizations) {
       const visType = vis.scene_type === 'text' ? '文本场景' : '复杂场景';
@@ -748,9 +822,6 @@ function hideLoading() {
 document.getElementById('historyPanel').addEventListener('click', function(e) {
   if (e.target === this) closeHistory();
 });
-
-// ========== 示例场景演示 ==========
-// （已合并到上面的 runDemo / renderDemoResult 函数中）
 </script>
 </body>
 </html>

module/demo_images.py

@@ -95,17 +95,24 @@ def ensure_demo_images(base_dir):
                 return None
         complex_imgs = [c1, c2]
 
-    # === 文本场景：合成生成 ===
-    t1 = os.path.join(demo_dir, 'demo_text_1.jpg')
-    t2 = os.path.join(demo_dir, 'demo_text_2.jpg')
-    if not os.path.exists(t1):
-        try:
-            _generate_text_scene(t1, t2)
-            print("[示例] 已生成文本场景图片")
-        except Exception as e:
-            print(f"[示例] 文本场景生成失败: {e}")
-            return None
-    text_imgs = [t1, t2]
+    # === 文本场景：优先使用真实图片 ===
+    text_dir = os.path.join(demo_dir, 'text')
+    real_text = _scan_real_images(text_dir)
+
+    if len(real_text) >= 2:
+        text_imgs = real_text[:2]
+    else:
+        # Fallback：生成合成图片
+        t1 = os.path.join(demo_dir, 'demo_text_1.jpg')
+        t2 = os.path.join(demo_dir, 'demo_text_2.jpg')
+        if not os.path.exists(t1):
+            try:
+                _generate_text_scene(t1, t2)
+                print("[示例] 已生成合成文本场景图片")
+            except Exception as e:
+                print(f"[示例] 合成文本场景生成失败: {e}")
+                return None
+        text_imgs = [t1, t2]
 
     return {
         'text': text_imgs,