+
+
+
+
+
+
+ 检测报告详情
+ 返回 +
+
+{% endblock %}
+
+{% block scripts %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ee0bf1b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,361 @@
+/* 基础样式 */
+body {
+ font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background-color: #f8f9fa;
+ color: #333;
+ line-height: 1.6;
+ margin: 0;
+ padding: 0;
+}
+
+.container {
+ max-width: 1400px;
+ padding: 20px;
+ margin: 0 auto;
+}
+
+/* 导航栏样式 */
+.navbar {
+ background-color: #343a40 !important;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.navbar-brand {
+ font-weight: bold;
+ font-size: 1.5rem;
+ color: #fff !important;
+}
+
+/* 卡片样式 */
+.card {
+ background-color: #fff;
+ border: 1px solid #dee2e6;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.card-header {
+ background-color: #343a40;
+ color: #fff;
+ border-bottom: 1px solid #dee2e6;
+ padding: 15px 20px;
+ border-radius: 8px 8px 0 0;
+}
+
+.card-body {
+ padding: 20px;
+}
+
+.card-title {
+ margin: 0;
+ font-size: 1.1rem;
+ font-weight: 600;
+}
+
+/* 按钮样式 */
+.btn {
+ border-radius: 4px;
+ font-weight: 500;
+ padding: 8px 16px;
+ border: 1px solid transparent;
+ transition: all 0.2s ease;
+}
+
+.btn-primary {
+ background-color: #007bff;
+ border-color: #007bff;
+ color: #fff;
+}
+
+.btn-primary:hover {
+ background-color: #0056b3;
+ border-color: #0056b3;
+ color: #fff;
+}
+
+.btn-success {
+ background-color: #28a745;
+ border-color: #28a745;
+ color: #fff;
+}
+
+.btn-success:hover {
+ background-color: #1e7e34;
+ border-color: #1e7e34;
+ color: #fff;
+}
+
+.btn-danger {
+ background-color: #dc3545;
+ border-color: #dc3545;
+ color: #fff;
+}
+
+.btn-danger:hover {
+ background-color: #c82333;
+ border-color: #bd2130;
+ color: #fff;
+}
+
+.btn-outline-danger {
+ color: #dc3545;
+ border-color: #dc3545;
+ background-color: transparent;
+}
+
+.btn-outline-danger:hover {
+ background-color: #dc3545;
+ border-color: #dc3545;
+ color: #fff;
+}
+
+.btn-sm {
+ padding: 4px 8px;
+ font-size: 0.875rem;
+}
+
+/* 上传区域样式 */
+.upload-area {
+ border: 2px dashed #dee2e6;
+ border-radius: 8px;
+ padding: 40px 20px;
+ text-align: center;
+ cursor: pointer;
+ background-color: #f8f9fa;
+ transition: border-color 0.2s ease;
+}
+
+.upload-area:hover {
+ border-color: #007bff;
+ background-color: #e9ecef;
+}
+
+.upload-icon {
+ font-size: 2.5rem;
+ color: #6c757d;
+ margin-bottom: 10px;
+}
+
+.upload-area:hover .upload-icon {
+ color: #007bff;
+}
+
+/* 表格样式 */
+.table {
+ margin-bottom: 0;
+ background-color: #fff;
+}
+
+.table th {
+ background-color: #343a40;
+ color: #fff;
+ border-color: #454d55;
+ font-weight: 600;
+ padding: 12px;
+}
+
+.table td {
+ padding: 12px;
+ vertical-align: middle;
+ border-color: #dee2e6;
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+ background-color: #f8f9fa;
+}
+
+.table-hover tbody tr:hover {
+ background-color: #e9ecef;
+}
+
+.table-bordered {
+ border: 1px solid #dee2e6;
+}
+
+.table-responsive {
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+/* 列表组样式 */
+.list-group-item {
+ background-color: #fff;
+ border: 1px solid #dee2e6;
+ padding: 12px 16px;
+ margin-bottom: 2px;
+}
+
+.list-group-item:first-child {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+}
+
+.list-group-item:last-child {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ margin-bottom: 0;
+}
+
+.list-group-item:hover {
+ background-color: #f8f9fa;
+}
+
+/* 表单控件样式 */
+.form-control, .form-select {
+ border: 1px solid #ced4da;
+ border-radius: 4px;
+ padding: 8px 12px;
+ background-color: #fff;
+ transition: border-color 0.2s ease;
+}
+
+.form-control:focus, .form-select:focus {
+ border-color: #007bff;
+ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+ outline: 0;
+}
+
+.form-label {
+ font-weight: 500;
+ margin-bottom: 8px;
+ color: #495057;
+}
+
+/* 滑块样式 */
+.form-range {
+ height: 6px;
+ background-color: #dee2e6;
+ border-radius: 3px;
+ outline: none;
+}
+
+.form-range::-webkit-slider-thumb {
+ appearance: none;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: #007bff;
+ cursor: pointer;
+ border: 2px solid #fff;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.form-range::-moz-range-thumb {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: #007bff;
+ cursor: pointer;
+ border: 2px solid #fff;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+/* 进度条样式 */
+.progress {
+ height: 20px;
+ background-color: #e9ecef;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.progress-bar {
+ background-color: #28a745;
+ transition: width 0.3s ease;
+}
+
+.progress-bar-striped {
+ background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ background-size: 1rem 1rem;
+}
+
+.progress-bar-animated {
+ animation: progress-bar-stripes 1s linear infinite;
+}
+
+@keyframes progress-bar-stripes {
+ 0% { background-position: 1rem 0; }
+ 100% { background-position: 0 0; }
+}
+
+/* 警告框样式 */
+.alert {
+ padding: 15px;
+ margin-bottom: 20px;
+ border: 1px solid transparent;
+ border-radius: 4px;
+}
+
+.alert-info {
+ color: #0c5460;
+ background-color: #d1ecf1;
+ border-color: #bee5eb;
+}
+
+.alert-success {
+ color: #155724;
+ background-color: #d4edda;
+ border-color: #c3e6cb;
+}
+
+.alert-danger {
+ color: #721c24;
+ background-color: #f8d7da;
+ border-color: #f5c6cb;
+}
+
+.alert-warning {
+ color: #856404;
+ background-color: #fff3cd;
+ border-color: #ffeaa7;
+}
+
+/* 工具类 */
+.text-center { text-align: center; }
+.text-muted { color: #6c757d; }
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 1rem; }
+.mb-4 { margin-bottom: 1.5rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 1rem; }
+.me-2 { margin-right: 0.5rem; }
+.w-100 { width: 100%; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.d-flex { display: flex; }
+.d-inline { display: inline; }
+.d-none { display: none; }
+.justify-content-between { justify-content: space-between; }
+.justify-content-center { justify-content: center; }
+.align-items-center { align-items: center; }
+.gap-2 { gap: 0.5rem; }
+.small { font-size: 0.875rem; }
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+ .container {
+ padding: 10px;
+ }
+
+ .card-body {
+ padding: 15px;
+ }
+
+ .upload-area {
+ padding: 30px 15px;
+ }
+
+ .upload-icon {
+ font-size: 2rem;
+ }
+
+ .btn {
+ padding: 6px 12px;
+ font-size: 0.9rem;
+ }
+
+ .table-responsive {
+ font-size: 0.875rem;
+ }
+}
\ No newline at end of file
diff --git a/video_results.html b/video_results.html
new file mode 100644
index 0000000..392081e
--- /dev/null
+++ b/video_results.html
@@ -0,0 +1,389 @@
+{% extends "layout.html" %}
+
+{% block content %}
+
+
+
+
+
+
+
+ 基本信息
+
+
+
+
+
+ 检测时间:
+ {{ report.timestamp }}
+
+
+
+
+ 使用模型:
+ {{ report.model_path }}
+
+
+
+
+
+
+ 置信度阈值:
+ {{ report.confidence_threshold }}
+
+
+
+
+ 处理视频数量:
+ {{ report.statistics.total_videos }}
+
+
+
+
+
+
+ 总帧数:
+ {{ report.statistics.total_frames }}
+
+
+
+
+ 检测帧数:
+ {{ report.statistics.detected_frames }}
+
+
+
+
+
+ 检测统计
+
+
+
+ 检测统计
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 视频检测结果
+
+
+
+
+
+
+
+ | 视频名称 | +总帧数 | +检测帧数 | +检测率 | +操作 | +
|---|---|---|---|---|
| {{ video.video_name }} | +{{ video.total_frames }} | +{{ video.detections|length }} | +
+ {% if video.total_frames %}
+ {% set detection_rate = (video.detections|length / video.total_frames * 100)|round(2) %}
+
+
+
+ {% else %}
+ -
+ {% endif %}
+ |
+ + + 查看详情 + + | +
+
+
+
+
+{% endblock %}
+
+{% block scripts %}
+
+
+{% endblock %}
+
+{% block scripts %}
+
+{% endblock %}
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+ 视频检测结果: {{ video_name }}
+ 返回报告 +
+
+
+
+
+
+
+
+ 视频信息
+
+
+
+
+
+ 视频名称:
+ {{ video_name }}
+
+
+
+
+ 总帧数:
+ {{ total_frames }}
+
+
+
+
+
+
+ 检测帧数:
+ {{ frames|length }}
+
+
+
+
+ 检测率:
+
+ {% if total_frames and frames %}
+ {{ ((frames|length / total_frames) * 100)|round(2) }}%
+ {% else %}
+ -
+ {% endif %}
+
+
+
+
+
+
+ 检测时间线
+
+
+
+
+
+
+
+
+
+
+
+ 检测到的帧 ({{ frames|length }})
+
+
+
+
+
+ {% if frames %}
+
+
+
+
+
+
+
+
+
+ {% else %}
+
+
+
+
+
+ | 帧号 | +时间戳 | +检测类别 | +预览 | +操作 | +
|---|---|---|---|---|
| {{ frame.frame_number }} | +{{ frame.timestamp }} | ++ {% for class in frame.classes %} + {{ class }} + {% endfor %} + | +
+ |
+ + + | +
+ 此视频中没有检测到任何帧。
+
+ {% endif %}
+