297 lines
13 KiB
HTML
297 lines
13 KiB
HTML
<!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>
|
||
<span id="refresh-info">刷新间隔: 5秒</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 控制面板 -->
|
||
<section class="control-panel">
|
||
<div class="panel-section">
|
||
<h3>📹 摄像头控制</h3>
|
||
<div class="control-buttons">
|
||
<button onclick="toggleScheduler()" id="toggle-btn" class="btn-toggle stopped">⏹ 已停止</button>
|
||
<button onclick="captureNow()" class="btn-secondary">📸 立即拍照</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-section">
|
||
<h3>👥 人员库</h3>
|
||
<button onclick="openPersonsModal()" class="btn-settings">查看人员库</button>
|
||
</div>
|
||
|
||
<div class="panel-section">
|
||
<h3>📊 统计图表</h3>
|
||
<button onclick="openStatsModal()" class="btn-settings">查看统计</button>
|
||
</div>
|
||
|
||
<div class="panel-section">
|
||
<h3>⚙️ 系统设置</h3>
|
||
<button onclick="openSettingsModal()" class="btn-settings">🔧 设置参数</button>
|
||
</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="date-filter">
|
||
<option value="all">全部日期</option>
|
||
</select>
|
||
<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-list" id="images-list">
|
||
<!-- 图片列表将显示序号+分析信息 -->
|
||
</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">
|
||
<!-- 事件卡片 -->
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 设置模态框 -->
|
||
<div class="modal" id="settings-modal" onclick="closeModalOnBackground(event, 'settings-modal')">
|
||
<div class="modal-content settings-modal-content" onclick="event.stopPropagation()">
|
||
<span class="modal-close" onclick="closeSettingsModal()">×</span>
|
||
<h2>⚙️ 参数设置</h2>
|
||
|
||
<div class="settings-section">
|
||
<h4>💾 保存设置</h4>
|
||
<div class="setting-item">
|
||
<label>保存目录:</label>
|
||
<input type="text" id="setting-images-dir">
|
||
</div>
|
||
<div class="setting-item">
|
||
<label>拍照间隔 (秒):</label>
|
||
<input type="number" id="setting-interval" value="60" min="10" max="3600">
|
||
</div>
|
||
<div class="setting-item">
|
||
<label>显示数量:</label>
|
||
<input type="number" id="setting-display-limit" value="20" min="5" max="100">
|
||
</div>
|
||
<div class="setting-item">
|
||
<label>刷新间隔 (秒):</label>
|
||
<input type="number" id="setting-refresh-interval" value="5" min="1" max="60">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-section">
|
||
<h4>👤 人体检测 (YOLO)</h4>
|
||
<div class="setting-item">
|
||
<label>启用 YOLO:</label>
|
||
<input type="checkbox" id="setting-use-yolo" checked>
|
||
</div>
|
||
<div class="setting-item">
|
||
<label>最小置信度:</label>
|
||
<input type="number" id="setting-yolo-confidence" value="0.3" min="0.1" max="1" step="0.1">
|
||
<span class="setting-desc">越小越敏感</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-section">
|
||
<h4>🔍 人员识别</h4>
|
||
<div class="setting-item">
|
||
<label>人脸识别:</label>
|
||
<input type="checkbox" id="setting-use-face-rec" checked>
|
||
<span class="setting-desc">最准确</span>
|
||
</div>
|
||
<div class="setting-item">
|
||
<label>MediaPipe:</label>
|
||
<input type="checkbox" id="setting-use-mediapipe" checked>
|
||
<span class="setting-desc">人脸关键点</span>
|
||
</div>
|
||
<div class="setting-item">
|
||
<label>颜色直方图:</label>
|
||
<input type="checkbox" id="setting-use-color-hist" checked>
|
||
<span class="setting-desc">备用方法</span>
|
||
</div>
|
||
<div class="setting-item">
|
||
<label>匹配阈值:</label>
|
||
<input type="number" id="setting-match-threshold" value="0.6" min="0.1" max="1" step="0.1">
|
||
<span class="setting-desc">越小越严格</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-section">
|
||
<h4>✅ 连续性判断</h4>
|
||
<div class="setting-item">
|
||
<label>确认帧数:</label>
|
||
<input type="number" id="setting-confirm-frames" value="3" min="1" max="10">
|
||
<span class="setting-desc">连续几帧确认变化</span>
|
||
</div>
|
||
<div class="setting-item">
|
||
<label>离开帧数:</label>
|
||
<input type="number" id="setting-leave-frames" value="2" min="1" max="10">
|
||
<span class="setting-desc">连续几帧确认离开</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-section">
|
||
<h4>🤖 AI 大模型分析</h4>
|
||
<div class="setting-item">
|
||
<label>启用大模型:</label>
|
||
<input type="checkbox" id="setting-use-vision-api">
|
||
<span class="setting-desc">调用 Vision API</span>
|
||
</div>
|
||
<div class="setting-item">
|
||
<label>触发条件:</label>
|
||
<select id="setting-vision-trigger">
|
||
<option value="person_change">人员变化时</option>
|
||
<option value="motion">运动检测时</option>
|
||
<option value="brightness">亮度变化时</option>
|
||
<option value="always">总是分析</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-section">
|
||
<h4>🔑 API 配置</h4>
|
||
<div class="setting-item">
|
||
<label>API 地址:</label>
|
||
<input type="text" id="setting-api-url">
|
||
</div>
|
||
<div class="setting-item">
|
||
<label>API Key:</label>
|
||
<input type="password" id="setting-api-key">
|
||
</div>
|
||
<div class="setting-item">
|
||
<label>模型名称:</label>
|
||
<input type="text" id="setting-model">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-actions">
|
||
<button onclick="saveSettings()" class="btn-primary">保存设置</button>
|
||
<button onclick="closeSettingsModal()" class="btn-secondary">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计图表模态框 -->
|
||
|
||
<!-- 统计图表模态框 -->
|
||
<div class="modal" id="stats-modal" onclick="closeModalOnBackground(event, 'stats-modal')">
|
||
<div class="modal-content stats-modal-content" onclick="event.stopPropagation()">
|
||
<span class="modal-close" onclick="closeStatsModal()">×</span>
|
||
<h2>📊 统计图表</h2>
|
||
|
||
<div class="stats-controls">
|
||
<select id="stats-date-select">
|
||
<option value="yesterday">Yesterday</option>
|
||
<option value="today">Today</option>
|
||
</select>
|
||
<button onclick="loadDailyStats()" class="btn-small">Refresh</button>
|
||
</div>
|
||
|
||
<div class="stats-summary-box" id="stats-summary">
|
||
<!-- 统计摘要 -->
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<h4>👥 Person Count Timeline</h4>
|
||
<canvas id="person-chart"></canvas>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<h4>📋 Event Types Distribution</h4>
|
||
<div id="event-types-chart">
|
||
<!-- 事件类型图表 -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<h4>📈 History (Last 7 Days)</h4>
|
||
<div id="history-chart">
|
||
<!-- 历史趋势 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 人员库模态框 -->
|
||
<div class="modal" id="persons-modal" onclick="closeModalOnBackground(event, 'persons-modal')">
|
||
<div class="modal-content settings-modal-content" onclick="event.stopPropagation()">
|
||
<span class="modal-close" onclick="closePersonsModal()">×</span>
|
||
<h2>👥 人员库管理</h2>
|
||
|
||
<div class="persons-stats" id="persons-stats">
|
||
<!-- 统计信息 -->
|
||
</div>
|
||
|
||
<div class="persons-list" id="persons-list">
|
||
<!-- 人员列表 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片详情模态框 -->
|
||
<div class="modal" id="image-modal" onclick="closeModalOnBackground(event, 'image-modal')">
|
||
<div class="modal-content" onclick="event.stopPropagation()">
|
||
<span class="modal-close" onclick="closeImageModal()">×</span>
|
||
<img id="modal-image" src="" alt="图片详情">
|
||
<div class="modal-info">
|
||
<h3 id="modal-title">图片详情</h3>
|
||
<p id="modal-time">时间: </p>
|
||
<p id="modal-folder">日期文件夹: </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>ml> |