File size: 5,710 Bytes
b4f2238 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | {% load i18n %}
<!-- 聊天记录梳理流程演示 - 紧凑版 -->
<section class="chat-record-section" id="chat-record-flow">
<div class="chat-record-container">
<div class="section-header reveal">
<span class="section-tag">💬 {% trans "证据整理" %}</span>
<h2 class="section-title">{% trans "聊天记录智能梳理" %}</h2>
<p class="section-desc">{% trans "从视频录制到证据材料，AI 驱动的聊天记录取证全流程" %}</p>
</div>
<div class="chat-flow-compact" id="chatFlowDemo">
<!-- 左侧：视频上传 -->
<div class="chat-col chat-col-upload" id="chatColUpload">
<div class="chat-col-header">
<span class="chat-col-num">1</span>
<span class="chat-col-title">{% trans "上传录屏" %}</span>
</div>
<div class="chat-upload-box" id="chatUploadBox">
<div class="chat-upload-icon">📹</div>
<div class="chat-upload-text">{% trans "微信/QQ 录屏" %}</div>
<div class="chat-upload-progress" id="chatUploadProgress">
<div class="chat-progress-bar"></div>
</div>
</div>
<div class="chat-video-done" id="chatVideoDone">
<div class="chat-video-thumb">▶</div>
<div class="chat-video-info">
<div class="chat-video-name">聊天记录.mp4</div>
<div class="chat-video-meta">03:24 · 128MB</div>
</div>
<div class="chat-video-check">✓</div>
</div>
</div>
<!-- 箭头 -->
<div class="chat-arrow" id="chatArrow1">→</div>
<!-- 中间：AI 处理 -->
<div class="chat-col chat-col-ai" id="chatColAi">
<div class="chat-col-header">
<span class="chat-col-num">2</span>
<span class="chat-col-title">AI {% trans "解析" %}</span>
<span class="chat-ai-badge">{% trans "本地" %}</span>
</div>
<div class="chat-ai-tasks">
<div class="chat-ai-task" id="chatAiTask1"><span>🎬</span> {% trans "视频解码" %}</div>
<div class="chat-ai-task" id="chatAiTask2"><span>🔍</span> {% trans "场景检测" %}</div>
<div class="chat-ai-task" id="chatAiTask3"><span>🧹</span> {% trans "去重过滤" %}</div>
<div class="chat-ai-task" id="chatAiTask4"><span>📝</span> OCR {% trans "识别" %}</div>
</div>
</div>
<!-- 箭头 -->
<div class="chat-arrow" id="chatArrow2">→</div>
<!-- 中间：截帧预览 -->
<div class="chat-col chat-col-frames" id="chatColFrames">
<div class="chat-col-header">
<span class="chat-col-num">3</span>
<span class="chat-col-title">{% trans "智能截帧" %}</span>
</div>
<div class="chat-frames-mini">
<div class="chat-frame-mini" data-frame="1"></div>
<div class="chat-frame-mini" data-frame="2"></div>
<div class="chat-frame-mini" data-frame="3"></div>
<div class="chat-frame-mini" data-frame="4"></div>
<div class="chat-frame-mini dup" data-frame="5">
<span class="dup-x">✕</span>
</div>
<div class="chat-frame-mini" data-frame="6"></div>
</div>
<div class="chat-frames-stat">
<span id="chatFrameCount">0</span> {% trans "帧" %} · <span id="chatDupCount">0</span> {% trans "去重" %}
</div>
</div>
<!-- 箭头 -->
<div class="chat-arrow" id="chatArrow3">→</div>
<!-- 右侧：导出 -->
<div class="chat-col chat-col-export" id="chatColExport">
<div class="chat-col-header">
<span class="chat-col-num">4</span>
<span class="chat-col-title">{% trans "导出 PDF" %}</span>
</div>
<div class="chat-export-file" id="chatExportFile">
<div class="chat-export-icon">📄</div>
<div class="chat-export-info">
<div class="chat-export-name">{% trans "证据材料.pdf" %}</div>
<div class="chat-export-meta">12{% trans "页" %} · {% trans "含OCR" %}</div>
</div>
</div>
</div>
</div>
<!-- 控制按钮 -->
<div class="chat-flow-controls">
<button class="flow-btn flow-btn-play" id="chatFlowPlayBtn" onclick="startChatFlowAnimation()">
<span>▶</span> {% trans "播放演示" %}
</button>
<button class="flow-btn flow-btn-reset" id="chatFlowResetBtn" onclick="resetChatFlowAnimation()">
<span>↺</span> {% trans "重置" %}
</button>
</div>
</div>
</section>
|