79 lines
3.2 KiB
HTML
79 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 和 MediaPipe Hands 实现的实时手势训练与推理工具</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 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>
|
||
|
||
<!-- 引入所有依赖库 -->
|
||
<!-- TensorFlow.js 核心库 (包含了tfjs-core, tfjs-converter, tfjs-backend-webgl) -->
|
||
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.20.0/dist/tf.min.js"></script>
|
||
|
||
<!-- KNN 分类器 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier@1.2.2/dist/knn-classifier.min.js"></script>
|
||
|
||
<!-- !!! 重点：MediaPipe Hands 解决方案文件 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands"></script>
|
||
|
||
<!-- TensorFlow Models - Hand Pose Detection 库 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection"></script>
|
||
|
||
<!-- 引入我们自己的逻辑脚本 -->
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|