<!DOCTYPE html>
\n<html lang=”zh-CN”>
\n<head>
\n <meta charset=”UTF-8″>
\n <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”>
\n <title>\u591a\u6a21\u6001\u667a\u80fd\u6d4f\u89c8\u5668 \u00b7 \u624b\u52bf\u8bed\u97f3\u4ea4\u4e92\u6f14\u793a<\/title>
\n <!– TensorFlow.js + HandPose \u6a21\u578b (\u8f7b\u91cf\u624b\u52bf\u8bc6\u522b) –>
\n <script src=”https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs@3.18.0\/dist\/tf.min.js”><\/script>
\n <script src=”https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow-models\/handpose@0.0.7\/dist\/handpose.min.js”><\/script>
\n <style>
\n * {
\n box-sizing: border-box;
\n user-select: none; \/* \u907f\u514d\u62d6\u52a8\u5e72\u6270, \u4f46\u4fdd\u7559\u6587\u5b57\u590d\u5236 *\/
\n }
\n body {
\n margin: 0;
\n min-height: 100vh;
\n background: linear-gradient(145deg, #0a0f1e 0%, #0c1222 100%);
\n font-family: ‘Inter’, ‘Segoe UI’, system-ui, -apple-system, sans-serif;
\n display: flex;
\n justify-content: center;
\n align-items: center;
\n padding: 20px;
\n }
\n \/* \u4e3b\u9762\u677f – \u672a\u6765\u611f\u73bb\u7483\u98ce\u683c *\/
\n .demo-container {
\n max-width: 1400px;
\n width: 100%;
\n background: rgba(15, 25, 45, 0.65);
\n backdrop-filter: blur(12px);
\n border-radius: 48px;
\n border: 1px solid rgba(72, 187, 255, 0.25);
\n box-shadow: 0 25px 45px rgba(0,0,0,0.4), 0 0 0 1px rgba(0, 255, 255, 0.1) inset;
\n padding: 24px;
\n transition: all 0.3s ease;
\n }
\n h1 {
\n margin: 0 0 8px 0;
\n font-size: 1.9rem;
\n font-weight: 600;
\n background: linear-gradient(135deg, #A0E9FF, #6C63FF, #FF6B9D);
\n -webkit-background-clip: text;
\n background-clip: text;
\n color: transparent;
\n letter-spacing: -0.3px;
\n }
\n .sub {
\n color: #8e9bb5;
\n margin-bottom: 24px;
\n border-left: 3px solid #3b82f6;
\n padding-left: 16px;
\n font-weight: 400;
\n font-size: 0.9rem;
\n }
\n \/* \u53cc\u680f\u5e03\u5c40 *\/
\n .sensor-grid {
\n display: flex;
\n flex-wrap: wrap;
\n gap: 24px;
\n }
\n .camera-card {
\n flex: 2;
\n min-width: 280px;
\n background: rgba(0, 0, 0, 0.45);
\n border-radius: 32px;
\n backdrop-filter: blur(4px);
\n padding: 16px;
\n border: 1px solid rgba(59,130,246,0.3);
\n }
\n .voice-card {
\n flex: 1.2;
\n min-width: 260px;
\n background: rgba(0, 0, 0, 0.45);
\n border-radius: 32px;
\n padding: 16px;
\n border: 1px solid rgba(168,85,247,0.3);
\n }
\n .video-wrapper {
\n position: relative;
\n background: #000;
\n border-radius: 24px;
\n overflow: hidden;
\n aspect-ratio: 4 \/ 3;
\n margin-bottom: 12px;
\n box-shadow: 0 8px 20px rgba(0,0,0,0.5);
\n }
\n video, canvas {
\n position: absolute;
\n top: 0;
\n left: 0;
\n width: 100%;
\n height: 100%;
\n object-fit: cover;
\n border-radius: 20px;
\n }
\n canvas {
\n pointer-events: none;
\n z-index: 2;
\n }
\n video {
\n z-index: 1;
\n transform: scaleX(-1); \/* \u955c\u50cf\uff0c\u66f4\u81ea\u7136 *\/
\n }
\n .gesture-status {
\n background: #0f172ad9;
\n border-radius: 60px;
\n padding: 8px 16px;
\n margin: 12px 0 8px;
\n display: flex;
\n align-items: center;
\n justify-content: space-between;
\n border: 1px solid #38bdf8;
\n }
\n .gesture-label {
\n font-weight: 600;
\n background: #1e293b;
\n padding: 6px 14px;
\n border-radius: 40px;
\n font-size: 0.85rem;
\n color: #b9ffec;
\n }
\n .command-badge {
\n background: #2dd4bf20;
\n padding: 5px 12px;
\n border-radius: 24px;
\n font-family: monospace;
\n font-size: 0.8rem;
\n color: #7dd3fc;
\n }
\n .btn-group {
\n display: flex;
\n gap: 12px;
\n margin-top: 16px;
\n flex-wrap: wrap;
\n }
\n .btn {
\n background: #1e2a47;
\n border: none;
\n padding: 8px 18px;
\n border-radius: 60px;
\n color: white;
\n font-weight: 500;
\n backdrop-filter: blur(8px);
\n cursor: pointer;
\n transition: all 0.2s ease;
\n font-size: 0.8rem;
\n display: inline-flex;
\n align-items: center;
\n gap: 6px;
\n border: 1px solid rgba(255,255,255,0.1);
\n }
\n .btn-primary {
\n background: #3b82f6;
\n box-shadow: 0 2px 8px #3b82f680;
\n }
\n .btn-primary:hover {
\n background: #2563eb;
\n transform: scale(1.02);
\n }
\n .voice-log {
\n background: #010409aa;
\n border-radius: 24px;
\n padding: 14px;
\n margin-top: 18px;
\n max-height: 200px;
\n overflow-y: auto;
\n font-family: monospace;
\n font-size: 0.8rem;
\n }
\n .log-entry {
\n border-bottom: 1px solid #2d3a5e;
\n padding: 6px 0;
\n color: #cbd5e6;
\n }
\n .command-list {
\n margin-top: 12px;
\n background: #00000030;
\n border-radius: 20px;
\n padding: 10px;
\n font-size: 0.7rem;
\n }
\n .footer-note {
\n margin-top: 24px;
\n text-align: center;
\n font-size: 0.7rem;
\n color: #5f6c8c;
\n }
\n @keyframes pulse {
\n 0% { opacity: 0.6; }
\n 100% { opacity: 1; text-shadow: 0 0 3px cyan; }
\n }
\n .listening {
\n color: #22d3ee;
\n animation: pulse 0.8s infinite;
\n }
\n hr {
\n border-color: #2d3748;
\n margin: 12px 0;
\n }
\n <\/style>
\n<\/head>
\n<body>
\n<div class=”demo-container”>
\n <h1>\ud83c\udf99\ufe0f\u270b \u591a\u6a21\u6001\u795e\u7ecf\u6d4f\u89c8\u5668 \u00b7 \u6982\u5ff5\u6f14\u793a<\/h1>
\n <div class=”sub”>\u300c\u6444\u50cf\u5934\u624b\u52bf + \u8bed\u97f3\u6307\u4ee4\u300d\u81ea\u7136\u4ea4\u4e92 | \u65b0\u4e00\u4ee3\u667a\u80fd\u6d4f\u89c8\u8303\u578b<\/div><\/p>\n
<div class=”sensor-grid”>
\n <!– \u5de6\u4fa7: \u6444\u50cf\u5934\u624b\u52bf\u8bc6\u522b\u533a –>
\n <div class=”camera-card”>
\n <div style=”display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;”>
\n <span style=”font-weight: 500;”>\ud83d\udd90\ufe0f \u624b\u52bf\u8ffd\u8e2a & \u547d\u4ee4\u6620\u5c04<\/span>
\n <span class=”command-badge” id=”handModelStatus”>\u26a1 \u52a0\u8f7d\u6a21\u578b\u4e2d…<\/span>
\n <\/div>
\n <div class=”video-wrapper”>
\n <video id=”webcam” autoplay muted playsinline><\/video>
\n <canvas id=”handCanvas” width=”640″ height=”480″><\/canvas>
\n <\/div>
\n <div class=”gesture-status”>
\n <span>\ud83e\udd1f \u5f53\u524d\u624b\u52bf\u8bc6\u522b<\/span>
\n <span class=”gesture-label” id=”gestureResult”>\u2014\u2014<\/span>
\n <span>\ud83d\udc49 \u89e6\u53d1\u52a8\u4f5c: <span id=”lastAction”>\u65e0<\/span><\/span>
\n <\/div>
\n <div class=”btn-group”>
\n <button class=”btn” id=”enableCamBtn”>\ud83d\udcf7 \u5f00\u542f\u6444\u50cf\u5934<\/button>
\n <button class=”btn” id=”resetHandBtn”>\ud83d\udd04 \u91cd\u8f7d\u624b\u52bf\u6a21\u578b<\/button>
\n <\/div>
\n <div class=”command-list”>
\n \ud83c\udfaf <strong>\u624b\u52bf\u6307\u4ee4\u96c6<\/strong> (\u6f14\u793a\u7248) <br>
\n \ud83d\udc4d <strong>\u5927\u62c7\u6307\u7ad6\u8d77<\/strong> \u2192 \u6253\u5f00\u767e\u5ea6 \u00b7 \u270c\ufe0f <strong>V\u5b57\u624b\u52bf<\/strong> \u2192 \u6253\u5f00Google <br>
\n \u270a <strong>\u63e1\u62f3<\/strong> \u2192 \u9875\u9762\u6eda\u52a8\u5230\u5e95\u90e8 \u00b7 \ud83d\udd90\ufe0f <strong>\u624b\u638c\u5f20\u5f00<\/strong> \u2192 \u5237\u65b0\u5f53\u524d\u9875 <br>
\n \ud83d\udc46 <strong>\u98df\u6307\u6307\u5411 + \u7a33\u5b9a<\/strong> \u2192 \u8fd4\u56de\u4e0a\u4e00\u9875 (\u4f53\u9a8c\u672a\u6765\u611f)
\n <\/div>
\n <\/div><\/p>\n
<!– \u53f3\u4fa7: \u8bed\u97f3\u63a7\u5236\u533a\u57df –>
\n <div class=”voice-card”>
\n <div style=”display: flex; justify-content: space-between; align-items: center;”>
\n <span style=”font-weight: 500;”>\ud83c\udf99\ufe0f \u795e\u7ecf\u8bed\u97f3\u63a7\u5236<\/span>
\n <button id=”voiceBtn” class=”btn btn-primary” style=”padding: 6px 18px;”>\ud83c\udfa4 \u5f00\u59cb\u8046\u542c<\/button>
\n <\/div>
\n <div style=”margin-top: 12px;”>
\n <div style=”background: #00000055; border-radius: 40px; padding: 8px 12px;”>
\n <span>\u2728 \u6307\u4ee4\u72b6\u6001: <\/span><strong id=”voiceStatus”>\u5f85\u547d<\/strong>
\n <\/div>
\n <div style=”margin-top: 14px;”>
\n <span>\ud83d\udcdd \u8bc6\u522b\u6587\u672c: <\/span>
\n <div id=”speechText” style=”background:#0F172A; border-radius: 20px; padding: 12px; margin-top: 6px; min-height: 55px; color:#b9e6ff;”>\u2014<\/div>
\n <\/div>
\n <\/div>
\n <div class=”voice-log”>
\n <div>\ud83d\udccb \u4ea4\u4e92\u65e5\u5fd7 (\u624b\u52bf\/\u8bed\u97f3)<\/div>
\n <div id=”logContainer”>
\n <div class=”log-entry”>\u2728 \u7cfb\u7edf\u5c31\u7eea\uff0c\u8bf7\u5141\u8bb8\u6444\u50cf\u5934\u548c\u9ea6\u514b\u98ce\u6743\u9650<\/div>
\n <\/div>
\n <\/div>
\n <div class=”command-list” style=”margin-top: 12px;”>
\n \ud83d\udde3\ufe0f <strong>\u8bed\u97f3\u547d\u4ee4\u793a\u4f8b<\/strong> (\u4e2d\u82f1\u6587\u6df7\u5408)<br>
\n \u2022 \u201c\u6253\u5f00\u767e\u5ea6\u201d \/ \u201c\u641c\u7d22\u5929\u6c14\u201d (\u6f14\u793a\u8df3\u8f6c\u767e\u5ea6\u5e76\u641c\u7d22\u5173\u952e\u8bcd) <br>
\n \u2022 \u201c\u5237\u65b0\u9875\u9762\u201d \/ \u201c\u6eda\u52a8\u5230\u5e95\u90e8\u201d \/ \u201c\u8fd4\u56de\u4e0a\u4e00\u9875\u201d<br>
\n \u2022 \u201c\u6253\u5f00\u8c37\u6b4c\u201d \/ \u201c\u6253\u5f00GitHub\u201d<br>
\n \u2022 \u201c\u4f60\u597d\u6d4f\u89c8\u5668\u201d (\u95ee\u5019\u53cd\u9988)
\n <\/div>
\n <\/div>
\n <\/div>
\n <div class=”footer-note”>
\n \u26a1 \u65b0\u4e00\u4ee3\u591a\u6a21\u6001\u63a2\u7d22 | \u624b\u52bf\u57fa\u4e8e HandPose \u6a21\u578b (\u5b9e\u65f6) | \u8bed\u97f3\u4f7f\u7528 Web Speech API | \u6f14\u793a\u955c\u50cf\u6444\u50cf\u5934 | \u4ea4\u4e92\u5f0f\u8df3\u8f6c\/\u6eda\u52a8\/\u5237\u65b0
\n <\/div>
\n<\/div><\/p>\n
<script>
\n \/\/ ——– DOM \u5143\u7d20\u7ed1\u5b9a ———-
\n const video = document.getElementById(‘webcam’);
\n const canvas = document.getElementById(‘handCanvas’);
\n const ctx = canvas.getContext(‘2d’);
\n const gestureSpan = document.getElementById(‘gestureResult’);
\n const lastActionSpan = document.getElementById(‘lastAction’);
\n const logContainer = document.getElementById(‘logContainer’);
\n const handModelStatusSpan = document.getElementById(‘handModelStatus’);
\n const voiceStatusSpan = document.getElementById(‘voiceStatus’);
\n const speechTextDiv = document.getElementById(‘speechText’);
\n const voiceBtn = document.getElementById(‘voiceBtn’);
\n const enableCamBtn = document.getElementById(‘enableCamBtn’);
\n const resetHandBtn = document.getElementById(‘resetHandBtn’);<\/p>\n
\/\/ ———- \u5168\u5c40\u53d8\u91cf ———-
\n let handModel = null; \/\/ handpose \u6a21\u578b\u5b9e\u4f8b
\n let animationId = null;
\n let cameraActive = false;
\n let lastGestureExecuted = “”; \/\/ \u907f\u514d\u540c\u4e00\u624b\u52bf\u8fde\u7eed\u89e6\u53d1 (\u9632\u6296)
\n let lastExecTime = 0;
\n const GESTURE_COOLDOWN = 1200; \/\/ ms<\/p>\n
\/\/ \u8f85\u52a9\u51fd\u6570: \u6dfb\u52a0\u65e5\u5fd7
\n function addLog(message, type = “info”) {
\n const div = document.createElement(‘div’);
\n div.className = ‘log-entry’;
\n const time = new Date().toLocaleTimeString();
\n div.innerHTML = `[${time}] ${message}`;
\n logContainer.prepend(div);
\n if(logContainer.children.length > 18) logContainer.removeChild(logContainer.lastChild);
\n if(type === ‘action’) {
\n lastActionSpan.innerText = message.split(‘\u2192’)[1] || message;
\n }
\n }<\/p>\n
\/\/ \u6267\u884c\u6d4f\u89c8\u5668\u52a8\u4f5c (\u6838\u5fc3\u4ea4\u4e92)
\n async function executeAction(actionName, extra = null) {
\n const now = Date.now();
\n if(now – lastExecTime < 500) return; \/\/ \u9632\u6b62\u9ad8\u9891
\n lastExecTime = now;
\n addLog(`\ud83c\udfac \u6267\u884c\u52a8\u4f5c: ${actionName} ${extra ? ‘(‘+extra+’)’ : ”}`, ‘action’);
\n switch(actionName) {
\n case “open_baidu”:
\n window.open(‘https:\/\/www.baidu.com’, ‘_blank’);
\n addLog(`\ud83c\udf10 \u5df2\u5728\u65b0\u6807\u7b7e\u9875\u6253\u5f00\u767e\u5ea6`, ‘action’);
\n break;
\n case “open_google”:
\n window.open(‘https:\/\/www.google.com’, ‘_blank’);
\n addLog(`\ud83d\udd0d \u6253\u5f00 Google`, ‘action’);
\n break;
\n case “open_github”:
\n window.open(‘https:\/\/github.com’, ‘_blank’);
\n addLog(`\ud83d\udc19 \u6253\u5f00 GitHub`, ‘action’);
\n break;
\n case “refresh”:
\n location.reload();
\n break;
\n case “scroll_bottom”:
\n window.scrollTo({ top: document.body.scrollHeight, behavior: ‘smooth’ });
\n addLog(`\ud83d\udcdc \u6eda\u52a8\u81f3\u9875\u9762\u5e95\u90e8`, ‘action’);
\n break;
\n case “back”:
\n history.back();
\n addLog(`\u25c0\ufe0f \u6267\u884c\u8fd4\u56de\u4e0a\u4e00\u9875`, ‘action’);
\n break;
\n case “search_weather”:
\n let query = extra || “\u4eca\u65e5\u5929\u6c14”;
\n window.open(`https:\/\/www.baidu.com\/s?wd=${encodeURIComponent(query)}`, ‘_blank’);
\n addLog(`\u2601\ufe0f \u641c\u7d22: ${query}`, ‘action’);
\n break;
\n case “hello_browser”:
\n speak(“\u4f60\u597d\uff0c\u65b0\u4e00\u4ee3\u667a\u80fd\u6d4f\u89c8\u5668\u6b63\u5728\u4e3a\u60a8\u670d\u52a1”);
\n addLog(`\ud83d\udc4b \u8bed\u97f3\u95ee\u5019\u53cd\u9988`, ‘action’);
\n break;
\n default:
\n if(actionName.startsWith(“search_”)) {
\n let kw = extra || “AI\u6d4f\u89c8\u5668”;
\n window.open(`https:\/\/www.baidu.com\/s?wd=${encodeURIComponent(kw)}`, ‘_blank’);
\n addLog(`\ud83d\udd0e \u667a\u80fd\u641c\u7d22: ${kw}`, ‘action’);
\n }
\n }
\n }<\/p>\n
\/\/ \u8bed\u97f3\u5408\u6210\u53cd\u9988
\n function speak(text) {
\n if(!window.speechSynthesis) return;
\n const utterance = new SpeechSynthesisUtterance(text);
\n utterance.lang = ‘zh-CN’;
\n utterance.rate = 0.95;
\n window.speechSynthesis.cancel();
\n window.speechSynthesis.speak(utterance);
\n }<\/p>\n
\/\/ ———- \u624b\u52bf\u6838\u5fc3\u903b\u8f91: \u57fa\u4e8ehandpose\u5173\u952e\u70b9\u89c4\u5219\u8bc6\u522b\u4e94\u4e2a\u5e38\u7528\u624b\u52bf ———-
\n function recognizeGesture(landmarks) {
\n if (!landmarks || landmarks.length < 21) return “unknown”;
\n \/\/ \u5173\u952e\u70b9\u7d22\u5f15 (0: wrist, 4: thumb_tip, 8: index_tip, 12: middle_tip, 16: ring_tip, 20: pinky_tip)
\n const thumbTip = landmarks[4];
\n const thumbMcp = landmarks[2];
\n const indexTip = landmarks[8];
\n const indexMcp = landmarks[5];
\n const middleTip = landmarks[12];
\n const middleMcp = landmarks[9];
\n const ringTip = landmarks[16];
\n const pinkyTip = landmarks[20];
\n const wrist = landmarks[0];<\/p>\n
\/\/ \u8ba1\u7b97\u624b\u6307\u4f38\u76f4 \/ \u5f2f\u66f2: \u6bd4\u8f83\u6307\u5c16\u4e0e\u6307\u6839y\u5750\u6807 (\u6444\u50cf\u5934\u5750\u6807\u7cfb\u4e2dy\u4e0a\u5c0f\u4e0b\u5927)
\n const thumbUp = (thumbTip[1] < thumbMcp[1] – 15); \/\/ \u62c7\u6307\u7ad6\u76f4\u5411\u4e0a
\n const indexStraight = (indexTip[1] < indexMcp[1] – 20);
\n const middleStraight = (middleTip[1] < middleMcp[1] – 20);
\n const ringStraight = (ringTip[1] < landmarks[13][1] – 18);
\n const pinkyStraight = (pinkyTip[1] < landmarks[17][1] – 18);<\/p>\n
\/\/ \u63e1\u62f3\u68c0\u6d4b (\u56db\u4e2a\u6307\u5c16\u4f4e\u4e8e\u5bf9\u5e94\u5173\u8282)
\n const isFist = (!indexStraight && !middleStraight && !ringStraight && !pinkyStraight && !thumbUp);<\/p>\n
\/\/ \u624b\u638c\u5168\u5f00: 4\u6307\u4f38\u76f4 \u4e14 \u62c7\u6307\u5916\u5c55 (\u62c7\u6307\u6a2a\u5411\u8ddd\u79bb\u5927)
\n const palmOpen = (indexStraight && middleStraight && ringStraight && pinkyStraight && (thumbTip[0] – wrist[0] > 60 || thumbTip[0] – landmarks[5][0] > 30));<\/p>\n
\/\/ V\u5b57\u624b\u52bf: \u98df\u6307\u4e2d\u6307\u4f38\u76f4\uff0c\u65e0\u540d\u6307\u548c\u5c0f\u6307\u5f2f\u66f2
\n const vGesture = (indexStraight && middleStraight && !ringStraight && !pinkyStraight);<\/p>\n
\/\/ \u5927\u62c7\u6307\u7ad6\u8d77: \u4ec5\u5927\u62c7\u6307\u660e\u663e\u5411\u4e0a\uff0c\u5176\u4ed6\u56db\u6307\u5f2f\u66f2\u6216\u81f3\u5c11\u975e\u5168\u4f38
\n const thumbOnly = (thumbUp && !indexStraight && !middleStraight && !ringStraight && !pinkyStraight);<\/p>\n
\/\/ \u98df\u6307\u6307\u5411 (\u7c7b\u4f3c\u70b9\u51fb), \u53ea\u6709\u98df\u6307\u4f38\u76f4, \u5176\u4ed6\u5f2f\u66f2
\n const indexPoint = (indexStraight && !middleStraight && !ringStraight && !pinkyStraight && !thumbUp);<\/p>\n
if (thumbOnly) return “thumbs_up”;
\n if (vGesture) return “victory”;
\n if (palmOpen) return “palm_open”;
\n if (isFist) return “fist”;
\n if (indexPoint) return “index_point”;
\n return “none”;
\n }<\/p>\n
\/\/ \u6839\u636e\u624b\u52bf\u6620\u5c04\u547d\u4ee4
\n function mapGestureToAction(gesture) {
\n switch(gesture) {
\n case “thumbs_up”: return “open_baidu”;
\n case “victory”: return “open_google”;
\n case “fist”: return “scroll_bottom”;
\n case “palm_open”: return “refresh”;
\n case “index_point”: return “back”;
\n default: return null;
\n }
\n }<\/p>\n
\/\/ \u624b\u52bf\u89e6\u53d1\u5e26\u9632\u6296\u548c\u65e5\u5fd7
\n let lastGesture = “”;
\n function handleGesture(gesture) {
\n if(gesture === “none” || gesture === “unknown”) return;
\n const now = Date.now();
\n if(gesture === lastGesture && (now – lastExecTime) < GESTURE_COOLDOWN) return;
\n lastGesture = gesture;
\n const action = mapGestureToAction(gesture);
\n if(action) {
\n let gestureName = gesture === “thumbs_up” ? “\ud83d\udc4d \u5927\u62c7\u6307\u7ad6\u8d77” : (gesture === “victory” ? “\u270c\ufe0f V\u624b\u52bf” : (gesture === “fist” ? “\u270a \u63e1\u62f3” : (gesture === “palm_open” ? “\ud83d\udd90\ufe0f \u624b\u638c\u6253\u5f00” : “\ud83d\udc49 \u98df\u6307\u6307\u5411”)));
\n addLog(`\u270b \u624b\u52bf\u3010${gestureName}\u3011\u89e6\u53d1 \u2192 ${action}`, ‘action’);
\n executeAction(action);
\n }
\n }<\/p>\n
\/\/ ———- \u7ed8\u5236\u624b\u90e8\u5173\u952e\u70b9 & \u8c03\u7528\u8bc6\u522b ———-
\n function drawHand(landmarks, ctx, videoWidth, videoHeight) {
\n if(!ctx) return;
\n ctx.clearRect(0, 0, canvas.width, canvas.height);
\n if(!landmarks) return;
\n \/\/ \u7ed8\u5236\u5173\u952e\u70b9\u4e0e\u8fde\u7ebf(\u7b80\u5316\u9aa8\u67b6)
\n for(let i=0; i<landmarks.length; i++) {
\n const x = landmarks[i][0] * canvas.width;
\n const y = landmarks[i][1] * canvas.height;
\n ctx.beginPath();
\n ctx.arc(x, y, 4, 0, 2*Math.PI);
\n ctx.fillStyle = “#00ffff”;
\n ctx.fill();
\n ctx.shadowBlur = 0;
\n }
\n \/\/ \u7b80\u6613\u8fde\u7ebf (\u624b\u90e8\u8fde\u7ebf\u793a\u4f8b, \u63d0\u5347\u89c6\u89c9)
\n const connections = [[0,1],[1,2],[2,3],[3,4],[0,5],[5,6],[6,7],[7,8],[5,9],[9,10],[10,11],[11,12],[9,13],[13,14],[14,15],[15,16],[13,17],[17,18],[18,19],[19,20],[0,17]];
\n ctx.beginPath();
\n ctx.strokeStyle = “#a5f0ff”;
\n ctx.lineWidth = 2;
\n for(let conn of connections) {
\n const [a,b] = conn;
\n if(landmarks[a] && landmarks[b]) {
\n const x1 = landmarks[a][0]*canvas.width, y1 = landmarks[a][1]*canvas.height;
\n const x2 = landmarks[b][0]*canvas.width, y2 = landmarks[b][1]*canvas.height;
\n ctx.moveTo(x1,y1);
\n ctx.lineTo(x2,y2);
\n ctx.stroke();
\n }
\n }
\n }<\/p>\n
async function detectHand() {
\n if(!handModel || !cameraActive || !video.videoWidth) {
\n if(handModelStatusSpan) handModelStatusSpan.innerText = handModel ? “\u26a1 \u7b49\u5f85\u6444\u50cf\u5934” : “\u231b \u6a21\u578b\u672a\u52a0\u8f7d”;
\n requestAnimationFrame(detectHand);
\n return;
\n }
\n try {
\n const predictions = await handModel.estimateHands(video, false);
\n if(predictions.length > 0) {
\n const hand = predictions[0];
\n const landmarks = hand.landmarks; \/\/ 3D \u70b9\u5f52\u4e00\u5316\u5750\u6807 [x,y,z] 0-1\u8303\u56f4
\n if(landmarks) {
\n \/\/ \u8f6c\u6362\u5f52\u4e00\u5316\u5750\u6807\u5230canvas\u5750\u6807\u7cfb\u7ed8\u5236
\n drawHand(landmarks, ctx, video.videoWidth, video.videoHeight);
\n const gesture = recognizeGesture(landmarks);
\n gestureSpan.innerText = gesture === “thumbs_up” ? “\ud83d\udc4d \u62c7\u6307\u8d5e” : (gesture === “victory” ? “\u270c\ufe0f \u80dc\u5229\/V” : (gesture === “fist” ? “\u270a \u62f3\u5934” : (gesture === “palm_open” ? “\ud83d\udd90\ufe0f \u624b\u638c” : (gesture === “index_point” ? “\ud83d\udc49 \u98df\u6307\u6307\u5411” : “\ud83e\udd1a \u5176\u4ed6”))));
\n handleGesture(gesture);
\n } else {
\n ctx.clearRect(0,0,canvas.width,canvas.height);
\n gestureSpan.innerText = “\u672a\u8bc6\u522b\u624b\u638c”;
\n }
\n } else {
\n ctx.clearRect(0,0,canvas.width,canvas.height);
\n gestureSpan.innerText = “\u65e0\u624b\u52bf”;
\n }
\n } catch(err) {
\n console.warn(“\u624b\u52bf\u68c0\u6d4b\u9519\u8bef”, err);
\n }
\n requestAnimationFrame(detectHand);
\n }<\/p>\n
\/\/ \u52a0\u8f7d handpose \u6a21\u578b
\n async function loadHandModel() {
\n handModelStatusSpan.innerText = “\ud83d\udd04 \u52a0\u8f7d\u624b\u52bf\u6a21\u578b (\u7ea65MB)…”;
\n try {
\n handModel = await handpose.load();
\n handModelStatusSpan.innerText = “\u2705 \u624b\u52bf\u6a21\u578b\u5c31\u7eea”;
\n addLog(“\ud83e\udde0 \u624b\u52bf\u8bc6\u522b\u6a21\u578b\u5df2\u52a0\u8f7d\uff0c\u53ef\u7528\u6444\u50cf\u5934\u63a7\u5236”, “info”);
\n } catch(e) {
\n console.error(e);
\n handModelStatusSpan.innerText = “\u274c \u6a21\u578b\u52a0\u8f7d\u5931\u8d25\uff0c\u5237\u65b0\u91cd\u8bd5”;
\n addLog(“\u26a0\ufe0f \u624b\u52bf\u6a21\u578b\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u7f51\u7edc”, “info”);
\n }
\n }<\/p>\n
\/\/ ———- \u6444\u50cf\u5934\u521d\u59cb\u5316 (\u5e26\u955c\u50cfcanvas\u9002\u914d)———-
\n async function initCamera() {
\n if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
\n addLog(“\u274c \u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6444\u50cf\u5934\u8bbf\u95ee”, “error”);
\n return false;
\n }
\n try {
\n const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
\n video.srcObject = stream;
\n await new Promise((resolve) => { video.onloadedmetadata = () => { resolve(); }; });
\n video.play();
\n \/\/ \u9002\u914dcanvas\u5c3a\u5bf8
\n const updateCanvasSize = () => {
\n if(video.videoWidth) {
\n canvas.width = video.videoWidth;
\n canvas.height = video.videoHeight;
\n } else {
\n canvas.width = 640;
\n canvas.height = 480;
\n }
\n };
\n updateCanvasSize();
\n video.addEventListener(‘resize’, updateCanvasSize);
\n cameraActive = true;
\n addLog(“\ud83d\udcf7 \u6444\u50cf\u5934\u5df2\u6fc0\u6d3b\uff0c\u73b0\u5728\u53ef\u4ee5\u4f7f\u7528\u624b\u52bf\u4ea4\u4e92 (\u7ad6\u8d77\u62c7\u6307, V\u5b57\u7b49)”, “info”);
\n speak(“\u6444\u50cf\u5934\u5df2\u5f00\u542f\uff0c\u624b\u52bf\u63a7\u5236\u5df2\u5c31\u7eea”);
\n return true;
\n } catch(err) {
\n addLog(`\u6444\u50cf\u5934\u9519\u8bef: ${err.message}`, “error”);
\n return false;
\n }
\n }<\/p>\n
\/\/ ———- \u8bed\u97f3\u8bc6\u522b\u6a21\u5757 Web Speech ———-
\n let recognition = null;
\n let isListening = false;
\n function initSpeech() {
\n if (!(‘webkitSpeechRecognition’ in window) && !(‘SpeechRecognition’ in window)) {
\n voiceStatusSpan.innerText = “\u4e0d\u652f\u6301\u8bed\u97f3”;
\n addLog(“\u26a0\ufe0f \u5f53\u524d\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u8bed\u97f3\u8bc6\u522b”, “error”);
\n return false;
\n }
\n const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
\n recognition = new SpeechRecognition();
\n recognition.continuous = false;
\n recognition.interimResults = false;
\n recognition.lang = ‘zh-CN’;
\n recognition.onstart = () => {
\n isListening = true;
\n voiceStatusSpan.innerHTML = ‘\ud83c\udfa4 \u8046\u542c\u4e2d… \u8bf4\u51fa\u6307\u4ee4’;
\n voiceStatusSpan.classList.add(‘listening’);
\n };
\n recognition.onend = () => {
\n isListening = false;
\n voiceStatusSpan.innerHTML = ‘\u5f85\u547d’;
\n voiceStatusSpan.classList.remove(‘listening’);
\n };
\n recognition.onresult = (event) => {
\n const transcript = event.results[0][0].transcript;
\n speechTextDiv.innerText = transcript;
\n addLog(`\ud83c\udfa4 \u8bed\u97f3: ${transcript}`, ‘info’);
\n processVoiceCommand(transcript);
\n };
\n recognition.onerror = (e) => {
\n voiceStatusSpan.innerHTML = ‘\u8bed\u97f3\u9519\u8bef’;
\n addLog(`\u8bed\u97f3\u8bc6\u522b\u9519\u8bef: ${e.error}`, ‘error’);
\n isListening = false;
\n };
\n return true;
\n }<\/p>\n
function processVoiceCommand(text) {
\n const cmd = text.toLowerCase().trim();
\n if(cmd.includes(“\u6253\u5f00\u767e\u5ea6”) || cmd.includes(“\u767e\u5ea6\u4e00\u4e0b”)) {
\n executeAction(“open_baidu”);
\n speak(“\u6b63\u5728\u6253\u5f00\u767e\u5ea6”);
\n } else if(cmd.includes(“\u6253\u5f00\u8c37\u6b4c”) || cmd.includes(“google”)) {
\n executeAction(“open_google”);
\n speak(“\u6253\u5f00\u8c37\u6b4c\u641c\u7d22”);
\n } else if(cmd.includes(“\u6253\u5f00github”) || cmd.includes(“github”)) {
\n executeAction(“open_github”);
\n } else if(cmd.includes(“\u5237\u65b0”) || cmd.includes(“\u5237\u65b0\u9875\u9762”)) {
\n executeAction(“refresh”);
\n speak(“\u5237\u65b0\u9875\u9762”);
\n } else if(cmd.includes(“\u6eda\u52a8\u5230\u5e95\u90e8”) || cmd.includes(“\u5230\u5e95\u90e8”)) {
\n executeAction(“scroll_bottom”);
\n speak(“\u6eda\u52a8\u5230\u5e95\u90e8”);
\n } else if(cmd.includes(“\u8fd4\u56de”) || cmd.includes(“\u8fd4\u56de\u4e0a\u4e00\u9875”)) {
\n executeAction(“back”);
\n speak(“\u8fd4\u56de\u4e0a\u4e00\u9875”);
\n } else if(cmd.includes(“\u641c\u7d22\u5929\u6c14”)) {
\n executeAction(“search_weather”, “\u4eca\u65e5\u5929\u6c14”);
\n speak(“\u641c\u7d22\u5929\u6c14”);
\n } else if(cmd.includes(“\u4f60\u597d\u6d4f\u89c8\u5668”) || cmd.includes(“\u55e8\u6d4f\u89c8\u5668”)) {
\n executeAction(“hello_browser”);
\n } else if(cmd.includes(“\u641c\u7d22”) && cmd.length > 2) {
\n let keyword = cmd.replace(“\u641c\u7d22”, “”).trim();
\n if(keyword) executeAction(“search_”, keyword);
\n else speak(“\u8bf7\u8bf4\u51fa\u8981\u641c\u7d22\u7684\u5185\u5bb9”);
\n } else if(cmd.includes(“\u6253\u5f00”)) {
\n let site = cmd.replace(“\u6253\u5f00”, “”).trim();
\n if(site===’\u767e\u5ea6’) executeAction(“open_baidu”);
\n else if(site===’\u8c37\u6b4c’) executeAction(“open_google”);
\n else speak(“\u672a\u8bc6\u522b\u7f51\u5740”);
\n } else {
\n speak(“\u672a\u8bc6\u522b\u8bed\u97f3\u6307\u4ee4\uff0c\u8bd5\u8bd5\u201c\u6253\u5f00\u767e\u5ea6\u201d\u6216\u201c\u5237\u65b0\u201d”);
\n addLog(`\u672a\u5904\u7406\u6307\u4ee4: ${text}`, “info”);
\n }
\n }<\/p>\n
function toggleListening() {
\n if(!recognition) {
\n if(!initSpeech()) return;
\n }
\n if(isListening) {
\n recognition.stop();
\n voiceStatusSpan.innerHTML = “\u505c\u6b62”;
\n } else {
\n try {
\n recognition.start();
\n } catch(e){
\n addLog(“\u8bf7\u5148\u5141\u8bb8\u9ea6\u514b\u98ce\u6743\u9650, \u5237\u65b0\u9875\u9762\u540e\u70b9\u51fb”, “error”);
\n }
\n }
\n }<\/p>\n
\/\/ —–\u4e8b\u4ef6\u7ed1\u5b9a—–
\n enableCamBtn.onclick = async () => {
\n await initCamera();
\n };
\n resetHandBtn.onclick = () => {
\n if(handModel) {
\n addLog(“\ud83d\udd04 \u624b\u52bf\u6a21\u578b\u91cd\u7f6e”, “info”);
\n gestureSpan.innerText = “\u2014\u2014”;
\n } else {
\n loadHandModel();
\n }
\n };
\n voiceBtn.onclick = toggleListening;<\/p>\n
\/\/ \u9875\u9762\u542f\u52a8\uff1a\u52a0\u8f7d\u6a21\u578b\uff0c\u521d\u59cb\u5316\u8bed\u97f3\u9884\u5907\uff0c\u4f46\u4e0d\u81ea\u52a8\u5f00\u6444\u50cf\u5934 (\u9700\u8981\u7528\u6237\u70b9\u51fb )
\n loadHandModel();
\n initSpeech(); \/\/ \u9884\u7f6e\u8bed\u97f3\u8bc6\u522b\u80fd\u529b
\n \/\/ \u542f\u52a8\u68c0\u6d4bloop\u4f46\u4e0d\u68c0\u6d4b(\u7b49\u5f85\u6444\u50cf\u5934)
\n (function initLoop() {
\n detectHand();
\n })();
\n addLog(“\ud83d\udca1 \u70b9\u51fb\u300c\u5f00\u542f\u6444\u50cf\u5934\u300d\u5141\u8bb8\u6743\u9650\uff0c\u6bd4\u51fa\u5927\u62c7\u6307\ud83d\udc4d \u6253\u5f00\u767e\u5ea6\uff0c\u6216\u70b9\u51fb\ud83c\udfa4\u8bf4\u51fa\u6307\u4ee4”, “info”);
\n \/\/ \u4f18\u96c5\u63d0\u793a
\n if (Notification.permission === “default”) Notification.requestPermission();
\n<\/script>
\n<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":54,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/news.miaotao.com\/index.php\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.miaotao.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.miaotao.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.miaotao.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/news.miaotao.com\/index.php\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":1,"href":"https:\/\/news.miaotao.com\/index.php\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/news.miaotao.com\/index.php\/wp-json\/wp\/v2\/posts\/1\/revisions\/20"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/news.miaotao.com\/index.php\/wp-json\/wp\/v2\/media\/54"}],"wp:attachment":[{"href":"https:\/\/news.miaotao.com\/index.php\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.miaotao.com\/index.php\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.miaotao.com\/index.php\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}