coder/vision-record
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 视觉记录系统 v1.0.0 - 摄像头定时拍照+智能分析+Web界面

Browse Source
This commit is contained in:
hubian
2026-04-16 09:42:53 +08:00
commit 49785191c3
14 changed files with 1997 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
web/static/index.html Normal file
View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视觉记录系统</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="container">
<!-- 头部 -->
<header class="header">
<h1>📷 视觉记录系统</h1>
<div class="status-bar">
<span id="scheduler-status">状态: 加载中...</span>
<span id="capture-count">拍照次数: 0</span>
</div>
</header>
<!-- 控制面板 -->
<section class="control-panel">
<div class="panel-section">
<h3>📹 摄像头控制</h3>
<div class="control-row">
<label>拍照间隔 (秒):</label>
<input type="number" id="interval-input" value="60" min="10" max="3600">
<button onclick="setInterval()">设置</button>
</div>
<div class="control-row">
<label>自动分析:</label>
<input type="checkbox" id="auto-analyze" checked>
</div>
<div class="control-buttons">
<button onclick="startScheduler()" id="start-btn" class="btn-primary">▶ 启动</button>
<button onclick="stopScheduler()" id="stop-btn" class="btn-danger">⏹ 停止</button>
<button onclick="captureNow()" class="btn-secondary">📸 立即拍照</button>
</div>
</div>
<div class="panel-section">
<h3>📊 系统统计</h3>
<div class="stats-grid" id="stats-display">
<div class="stat-item">
<span class="stat-label">总图片数</span>
<span class="stat-value" id="total-images">0</span>
</div>
<div class="stat-item">
<span class="stat-label">已分析</span>
<span class="stat-value" id="analyzed-images">0</span>
</div>
<div class="stat-item">
<span class="stat-label">总事件数</span>
<span class="stat-value" id="total-events">0</span>
</div>
</div>
</div>
</section>
<!-- 主内容区 -->
<div class="main-content">
<!-- 图片时间线 -->
<section class="images-section">
<h2>📷 图片时间线</h2>
<div class="filter-bar">
<select id="image-filter">
<option value="all">全部</option>
<option value="analyzed">已分析</option>
<option value="unanalyzed">未分析</option>
</select>
<button onclick="analyzeUnanalyzed()" class="btn-small">分析未分析图片</button>
</div>
<div class="images-grid" id="images-grid">
<!-- 图片卡片将通过 JS 动态加载 -->
</div>
</section>
<!-- 事件列表 -->
<section class="events-section">
<h2>📋 事件列表</h2>
<div class="filter-bar">
<select id="event-filter">
<option value="all">全部类型</option>
<!-- 动态加载事件类型 -->
</select>
</div>
<div class="events-list" id="events-list">
<!-- 事件卡片将通过 JS 动态加载 -->
</div>
</section>
</div>
<!-- 图片详情模态框 -->
<div class="modal" id="image-modal">
<div class="modal-content">
<span class="modal-close" onclick="closeModal()">×</span>
<img id="modal-image" src="" alt="图片详情">
<div class="modal-info">
<h3 id="modal-title">图片详情</h3>
<p id="modal-time">时间: </p>
<div id="modal-events" class="modal-events">
<!-- 事件详情 -->
</div>
<div class="modal-actions">
<button onclick="analyzeCurrentImage()" class="btn-secondary">🔍 分析</button>
<button onclick="deleteCurrentImage()" class="btn-danger">🗑 删除</button>
</div>
</div>
</div>
</div>
</div>
<script src="/static/app.js"></script>
</body>
</html>