76 lines
3.2 KiB
HTML
76 lines
3.2 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="style.css">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>动态姿态分类器</h1>
|
||
<p>一个使用 TensorFlow.js 和 MoveNet 实现的实时姿态训练与推理工具</p>
|
||
</header>
|
||
|
||
<main id="main-container">
|
||
<div id="video-wrapper">
|
||
<div id="status">正在加载模型，请稍候...</div>
|
||
<div id="video-container">
|
||
<video id="video" width="640" height="480" autoplay muted playsinline></video>
|
||
<canvas id="canvas" width="640" height="480"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="controls-panel">
|
||
<h2>控制面板</h2>
|
||
|
||
<!-- ==================== 训练区域重大更新 ==================== -->
|
||
<div class="control-section" id="training-section">
|
||
<h3>第一步: 训练模型</h3>
|
||
<p>点击下方按钮添加姿态分类，为每个姿态采集足够样本。</p>
|
||
|
||
<!-- 📌 新增: 这是动态添加的姿态类别的容器 -->
|
||
<div id="pose-classes-container">
|
||
<!-- JavaScript 将在此处动态生成类别UI -->
|
||
</div>
|
||
|
||
<!-- 📌 新增: 添加新类别的按钮 -->
|
||
<div class="add-class-wrapper">
|
||
<button id="btn-add-class" class="btn-add-class" disabled>+ 增加分类</button>
|
||
</div>
|
||
</div>
|
||
<!-- ========================================================= -->
|
||
|
||
<div class="control-section">
|
||
<h3>模型管理</h3>
|
||
<div class="model-controls">
|
||
<button id="btn-export" class="btn-sample" disabled>导出模型</button>
|
||
<button id="btn-import" class="btn-sample" disabled>导入模型</button>
|
||
<!-- 这个input是隐藏的，由上面的“导入模型”按钮触发 -->
|
||
<input type="file" id="file-importer" accept=".json" style="display: none;">
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="control-section" id="inference-section">
|
||
<h3>第二步: 开始推理</h3>
|
||
<p>训练完成后，点击下方按钮开始实时预测。</p>
|
||
<button id="btn-predict" class="btn-predict" disabled>开始预测</button>
|
||
<div id="result-container">
|
||
<strong>预测结果:</strong>
|
||
<div id="result-text">尚未开始</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 引入所有依赖库 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.20.0/dist/tf.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection@2.1.3/dist/pose-detection.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier@1.2.2/dist/knn-classifier.min.js"></script>
|
||
|
||
<!-- 引入我们自己的逻辑脚本 -->
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|