274 lines
13 KiB
HTML
274 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>多任务YOLO检测系统</title>
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.13.1/font/bootstrap-icons.css">
|
||
<link href="css/style.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||
<div class="container-fluid">
|
||
<a class="navbar-brand" href="#">
|
||
<i class="bi bi-cpu-fill me-2"></i>多任务YOLO检测系统
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav ms-auto">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="index.html">
|
||
<i class="bi bi-house-door me-1"></i>首页
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="task-management.html">
|
||
<i class="bi bi-list-task me-1"></i>任务管理
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="monitoring.html">
|
||
<i class="bi bi-graph-up me-1"></i>系统监控
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="video-player.html">
|
||
<i class="bi bi-camera-video me-1"></i>视频播放
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="container-fluid mt-4">
|
||
<div class="row">
|
||
<div class="col-md-8 mx-auto">
|
||
<!-- 欢迎卡片 -->
|
||
<div class="card shadow-lg border-0 mb-4">
|
||
<div class="card-body text-center p-5">
|
||
<h1 class="display-4 text-primary mb-3">
|
||
<i class="bi bi-cpu-fill"></i> 多任务YOLO检测系统
|
||
</h1>
|
||
<p class="lead text-muted mb-4">
|
||
基于YOLOv8/YOLOv5的多模型并行检测系统，支持加密模型、实时推流和任务管理
|
||
</p>
|
||
<div class="d-grid gap-2 d-md-flex justify-content-md-center">
|
||
<a href="task-management.html" class="btn btn-primary btn-lg px-4 me-md-2">
|
||
<i class="bi bi-play-circle me-2"></i>开始管理任务
|
||
</a>
|
||
<a href="monitoring.html" class="btn btn-outline-primary btn-lg px-4">
|
||
<i class="bi bi-speedometer2 me-2"></i>查看系统状态
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能特性 -->
|
||
<div class="row mt-5">
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card h-100 border-0 shadow-sm">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon mb-3">
|
||
<i class="bi bi-shield-lock text-primary" style="font-size: 2.5rem;"></i>
|
||
</div>
|
||
<h5 class="card-title">加密模型保护</h5>
|
||
<p class="card-text text-muted">
|
||
所有模型文件强制加密存储，确保AI模型安全，防止未经授权的使用。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card h-100 border-0 shadow-sm">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon mb-3">
|
||
<i class="bi bi-layers text-primary" style="font-size: 2.5rem;"></i>
|
||
</div>
|
||
<h5 class="card-title">多模型并行推理</h5>
|
||
<p class="card-text text-muted">
|
||
支持多个YOLO模型同时运行，每个模型独立配置标签、置信度阈值和绘制颜色。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-4">
|
||
<div class="card h-100 border-0 shadow-sm">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon mb-3">
|
||
<i class="bi bi-broadcast text-primary" style="font-size: 2.5rem;"></i>
|
||
</div>
|
||
<h5 class="card-title">实时推流与监控</h5>
|
||
<p class="card-text text-muted">
|
||
支持RTMP/RTSP流输入，实时检测结果推流输出，提供全面的系统监控。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快速统计 -->
|
||
<div class="card border-0 shadow-sm mt-4">
|
||
<div class="card-header bg-white">
|
||
<h5 class="mb-0"><i class="bi bi-bar-chart me-2"></i>系统概览</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row text-center">
|
||
<div class="col-md-3 mb-3">
|
||
<div class="stat-card p-3 rounded bg-light">
|
||
<h2 class="text-primary" id="activeTasks">3</h2>
|
||
<p class="text-muted mb-0">运行中任务</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<div class="stat-card p-3 rounded bg-light">
|
||
<h2 class="text-success" id="totalModels">8</h2>
|
||
<p class="text-muted mb-0">已加载模型</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<div class="stat-card p-3 rounded bg-light">
|
||
<h2 class="text-warning" id="avgFPS">24.5</h2>
|
||
<p class="text-muted mb-0">平均FPS</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<div class="stat-card p-3 rounded bg-light">
|
||
<h2 class="text-info" id="cpuUsage">42%</h2>
|
||
<p class="text-muted mb-0">CPU使用率</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快速操作 -->
|
||
<div class="row mt-5">
|
||
<div class="col-12">
|
||
<h4 class="mb-3">快速操作</h4>
|
||
<div class="d-flex flex-wrap gap-2">
|
||
<button class="btn btn-outline-primary" id="simulateCreateTask">
|
||
<i class="bi bi-plus-circle me-1"></i>模拟创建任务
|
||
</button>
|
||
<button class="btn btn-outline-success" id="simulateStartAll">
|
||
<i class="bi bi-play me-1"></i>模拟启动所有任务
|
||
</button>
|
||
<button class="btn btn-outline-danger" id="simulateStopAll">
|
||
<i class="bi bi-stop-circle me-1"></i>模拟停止所有任务
|
||
</button>
|
||
<button class="btn btn-outline-info" id="refreshStats">
|
||
<i class="bi bi-arrow-clockwise me-1"></i>刷新统计数据
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-dark text-white mt-5 py-4">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h5>多任务YOLO检测系统</h5>
|
||
<p class="text-light">基于YOLOv8/YOLOv5的实时多模型检测平台</p>
|
||
</div>
|
||
<div class="col-md-6 text-md-end">
|
||
<p class="mb-0">© 2023 多任务YOLO检测系统 | 演示版本 v1.0.0</p>
|
||
<p class="text-light small">此页面为演示版本，使用模拟数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
// 模拟数据
|
||
let stats = {
|
||
activeTasks: 3,
|
||
totalModels: 8,
|
||
avgFPS: 24.5,
|
||
cpuUsage: 42
|
||
};
|
||
|
||
// 更新统计数据
|
||
function updateStats() {
|
||
document.getElementById('activeTasks').textContent = stats.activeTasks;
|
||
document.getElementById('totalModels').textContent = stats.totalModels;
|
||
document.getElementById('avgFPS').textContent = stats.avgFPS;
|
||
document.getElementById('cpuUsage').textContent = stats.cpuUsage + '%';
|
||
}
|
||
|
||
// 模拟创建任务
|
||
document.getElementById('simulateCreateTask').addEventListener('click', function() {
|
||
stats.activeTasks++;
|
||
stats.totalModels += 2;
|
||
updateStats();
|
||
|
||
// 显示成功消息
|
||
showNotification('任务创建成功', '成功创建了一个新的检测任务，添加了2个模型', 'success');
|
||
});
|
||
|
||
// 模拟启动所有任务
|
||
document.getElementById('simulateStartAll').addEventListener('click', function() {
|
||
if (stats.activeTasks < 5) {
|
||
stats.activeTasks = 5;
|
||
updateStats();
|
||
showNotification('任务启动成功', '所有任务已成功启动', 'success');
|
||
} else {
|
||
showNotification('任务已在运行', '所有任务已经在运行中', 'info');
|
||
}
|
||
});
|
||
|
||
// 模拟停止所有任务
|
||
document.getElementById('simulateStopAll').addEventListener('click', function() {
|
||
if (stats.activeTasks > 0) {
|
||
stats.activeTasks = 0;
|
||
updateStats();
|
||
showNotification('任务停止成功', '所有任务已停止', 'warning');
|
||
} else {
|
||
showNotification('没有运行中的任务', '当前没有运行中的任务', 'info');
|
||
}
|
||
});
|
||
|
||
// 刷新统计数据
|
||
document.getElementById('refreshStats').addEventListener('click', function() {
|
||
// 模拟数据变化
|
||
stats.cpuUsage = Math.floor(Math.random() * 30) + 30;
|
||
stats.avgFPS = (Math.random() * 10 + 20).toFixed(1);
|
||
updateStats();
|
||
showNotification('数据已刷新', '系统统计数据已更新', 'info');
|
||
});
|
||
|
||
// 显示通知
|
||
function showNotification(title, message, type) {
|
||
// 创建通知元素
|
||
const notification = document.createElement('div');
|
||
notification.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
|
||
notification.style.cssText = 'top: 20px; right: 20px; z-index: 1050; min-width: 300px;';
|
||
notification.innerHTML = `
|
||
<strong>${title}</strong> ${message}
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||
`;
|
||
|
||
document.body.appendChild(notification);
|
||
|
||
// 3秒后自动移除
|
||
setTimeout(() => {
|
||
if (notification.parentNode) {
|
||
notification.remove();
|
||
}
|
||
}, 3000);
|
||
}
|
||
|
||
// 初始化
|
||
updateStats();
|
||
</script>
|
||
</body>
|
||
</html> |