Global Sports Pose Coach | Real-Time Form Comparison & Training Assistant

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="theme-color" content="#f3f5fb" /> <meta name="robots" content="noindex,nofollow,noarchive" /> <meta http-equiv="Referrer-Policy" content="no-referrer" /> <meta http-equiv="Content-Security-Policy" content=" default-src 'none'; base-uri 'none'; form-action 'none'; object-src 'none'; img-src 'self' data: blob:; media-src 'self' data: blob:; font-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' blob: https://cdn.jsdelivr.net https://esm.sh https://esm.run; connect-src 'self' blob: data: https://cdn.jsdelivr.net https://esm.sh https://esm.run; worker-src 'self' blob:; child-src blob:; frame-src 'none'; manifest-src 'none'; upgrade-insecure-requests " /> <title>Global Sports Pose Coach | Real-Time Form Comparison & Training Assistant</title> <style> :root{--ink:#0f172a;--muted:#5f617b;--line:#e6e9f0;--bg:#f3f5fb;--card:#fff;--pri:#265f9c;--accent:#2e6f5e;--radius:16px;--shadow:0 14px 38px rgba(7,13,29,.08);font-family:system-ui,-apple-system,Pretendard,"Segoe UI",Roboto,Helvetica,Arial,sans-serif} html,body{margin:0;background:var(--bg);color:var(--ink)} #hc7-wrap{max-width:1100px;margin:0 auto;padding:14px 10px 40px} .panel{background:radial-gradient(circle at top,#fff 0%,#fcfdff 68%,#f3f5fb 100%);border:1px solid rgba(196,204,221,.35);border-radius:18px;padding:16px 14px 18px;box-shadow:var(--shadow)} .header-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .title-block{min-width:280px} .title-block h1{margin:0;font-size:18px;font-weight:900;letter-spacing:-.03em;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid rgba(15,23,42,.15);background:#fff} .subtitle{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.5} .actions{display:flex;gap:8px;flex-wrap:wrap} .btn{cursor:pointer;border:1px solid rgba(16,24,40,.08);border-radius:12px;padding:9px 14px;font-weight:700;background:#fff;color:var(--ink);display:inline-flex;gap:6px;align-items:center;transition:.12s;font-size:13px} .btn:hover{background:#eef1f8} .btn.primary{background:var(--pri);color:#fff;border-color:rgba(13,60,90,.4);box-shadow:0 4px 16px rgba(30,97,159,.35)} .small-note{margin-top:10px;font-size:12px;color:rgba(15,23,42,.68)} .note-box{margin-top:12px;background:rgba(255,255,255,.7);border:1px solid rgba(209,214,225,.35);border-radius:14px;padding:12px 14px;line-height:1.7} .note-box h4{margin:0 0 6px;font-size:13px;font-weight:800} ol.guide{margin:6px 0 0 16px;padding:0;font-size:12px} .grid{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;margin-top:12px} .card{background:var(--card);border:1px solid rgba(229,234,248,.75);border-radius:16px;padding:12px 12px 14px;box-shadow:0 2px 12px rgba(3,9,22,.03)} .top-controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .sel,.num,.chk{background:#f7f8fc;border:1px solid rgba(223,229,237,.8);border-radius:11px;padding:8px 8px;font-size:12.5px;color:var(--ink)} .num{width:86px} .small-label{font-size:11.5px;color:var(--muted);display:inline-block} .hr{height:1px;background:rgba(225,230,238,.85);margin:10px 0} canvas,video{display:block;width:100%;border-radius:12px;background:#000} #cmpWrap{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} #cmpWrap canvas{background:#0f172a} .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px} .stat{background:linear-gradient(180deg,rgba(235,239,249,.8) 0%, rgba(238,242,252,0.1) 100%);border:1px solid rgba(226,231,240,.55);border-radius:12px;padding:8px 10px 10px} .stat .label{font-size:11px;color:var(--muted);margin-bottom:2px} .stat .value{font-size:21px;font-weight:900;letter-spacing:-.03em} .kv{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .kv .k{background:#fbfcff;border:1px solid rgba(233,238,248,.6);border-radius:12px;padding:8px 10px} .k .label{font-size:11px;color:var(--muted);margin-bottom:4px} .k .value{font-size:18px;font-weight:800} .k .sub{font-size:11.5px;color:rgba(40,57,103,.6)} .secondary-card-title{font-weight:800;margin-bottom:6px} .coach{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);border:1px solid rgba(220,228,238,.8);border-radius:999px;padding:4px 12px;font-size:11.5px;color:#222;display:none;box-shadow:0 10px 30px rgba(5,9,18,.25)} #gal{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:7px} #gal img{width:100%;height:56px;object-fit:cover;border:1px solid rgba(229,233,242,.6);border-radius:9px;background:#fff} .footer-box{margin-top:12px;background:#fff;border:1px dashed rgba(217,222,233,.8);border-radius:14px;padding:10px 12px 11px;font-size:11.5px;color:rgba(69,83,114,.85);display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between} .foot-right{display:flex;gap:10px;flex-wrap:wrap} #dl{min-height:20px;font-size:12px;color:rgba(15,23,42,.7);margin-left:4px} .lang-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid rgba(16,24,40,.08);border-radius:999px;padding:4px 8px;font-size:12px} #langSelect{border:0;background:transparent;font-weight:700;color:var(--ink);outline:none} #langModal{position:fixed;inset:0;background:rgba(5,10,20,.45);display:none;align-items:center;justify-content:center;z-index:9999} #langModal.open{display:flex} #langModal .modal-card{width:min(560px,92vw);background:#fff;border:1px solid rgba(214,220,230,.8);border-radius:18px;box-shadow:0 20px 60px rgba(6,12,25,.22);padding:16px} #langModal h3{margin:0 0 8px;font-size:17px} #langModal p{margin:0;color:var(--muted);font-size:13px;line-height:1.6} .lang-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px} .lang-btn{border:1px solid rgba(217,223,234,.9);border-radius:12px;padding:10px 12px;background:#fff;cursor:pointer;text-align:left;font-weight:700} .lang-btn small{display:block;font-weight:500;color:var(--muted);margin-top:2px} .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px} .linkish{background:none;border:0;color:var(--pri);font-weight:700;cursor:pointer;padding:0} @media (max-width:980px){.grid{grid-template-columns:1fr}.header-row{flex-direction:column;align-items:flex-start}#gal{grid-template-columns:repeat(4,1fr)}} @media (max-width:620px){.top-controls{flex-direction:column;align-items:flex-start}.stat-grid{grid-template-columns:1fr}.kv{grid-template-columns:1fr}#gal{grid-template-columns:repeat(3,1fr)}.actions{width:100%}.btn{justify-content:center;width:100%}.lang-grid{grid-template-columns:1fr}} </style> </head> <body> <script> (function(){ try{ if(window.top!==window.self){ document.addEventListener("dragstart",function(e){e.preventDefault();},{passive:false}); document.addEventListener("drop",function(e){e.preventDefault();},{passive:false}); } }catch(e){} })(); </script> <div id="langModal" aria-hidden="true"> <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="langModalTitle"> <h3 id="langModalTitle" data-i18n="lang_modal_title">Choose your language</h3> <p data-i18n="lang_modal_desc">This tool runs entirely in your browser. Select a language for labels and guidance.</p> <div class="lang-grid"> <button class="lang-btn" type="button" data-lang="en">English<small>Global default</small></button> <button class="lang-btn" type="button" data-lang="ko">한국어<small>Korean</small></button> <button class="lang-btn" type="button" data-lang="ja">日本語<small>Japanese</small></button> <button class="lang-btn" type="button" data-lang="zh">中文<small>Chinese</small></button> <button class="lang-btn" type="button" data-lang="es">Español<small>Spanish</small></button> <button class="lang-btn" type="button" data-lang="fr">Français<small>French</small></button> </div> <div class="modal-actions"> <button id="langModalClose" class="btn" type="button" data-i18n="close">Close</button> </div> </div> </div> <div id="hc7-wrap" aria-label="Global Sports Pose Coach"> <div class="panel"> <div class="header-row"> <div class="title-block"> <h1> <span data-i18n="title">Global Sports Pose Coach | Real-Time Form Comparison & Training Assistant</span> <span class="badge" aria-label="Version">v2.0 Global</span> </h1> <div class="subtitle" data-i18n="subtitle">Compare webcam/video posture against a reference pose and review sport-specific rules, symmetry, and ROM for training support.</div> </div> <div class="actions"> <div class="lang-chip"> <span>🌐</span> <select id="langSelect" aria-label="Language"> <option value="en">EN</option> <option value="ko">KO</option> <option value="ja">JA</option> <option value="zh">ZH</option> <option value="es">ES</option> <option value="fr">FR</option> </select> <button id="langOpen" class="linkish" type="button" data-i18n="change">Change</button> </div> <button id="hc7-run" class="btn primary" type="button" data-i18n="run">Start</button> <button id="hc7-stop" class="btn" type="button" style="display:none;" data-i18n="close_tool">Close</button> </div> </div> <div class="small-note" data-i18n="https_note">Camera access requires HTTPS. If denied, use a local video file. Camera/video data is processed locally in your browser and is not uploaded by this tool.</div> <div class="note-box" style="margin-top:12px;"> <h4 data-i18n="guide_title">How to use</h4> <ol class="guide"> <li data-i18n="g1">Place your full body in frame or upload a front-facing training video.</li> <li data-i18n="g2">Capture a reference pose while holding correct form.</li> <li data-i18n="g3">Select a sport preset, lead side, and drill, then start the drill.</li> <li data-i18n="g4">Review score, similarity, joint angles, ROM, and symmetry, then save CSV/JSON/report/snapshots.</li> </ol> <div style="margin-top:4px;font-size:11.5px;" data-i18n="env_tip">Best results: clear floor, stable lighting, and simple background.</div> </div> <div id="hc7-app" style="display:none;margin-top:12px;"> <div class="grid"> <div class="card"> <div class="top-controls" aria-label="Input and control area"> <button id="camBtn" class="btn primary" type="button" data-i18n="webcam_start">Start Webcam</button> <label class="btn" for="file" style="background:rgba(232,236,244,0.7);" data-i18n="select_file">Select Video</label> <input id="file" type="file" accept="video/*" style="display:none" /> <label class="btn" for="refFile" data-i18n="reference_video">Reference Video</label> <input id="refFile" type="file" accept="video/*" style="display:none" /> <button id="refCap" class="btn" type="button" data-i18n="capture_ref">Capture Reference Pose</button> <button id="cmpBtn" class="btn" type="button" data-i18n="compare_view">Compare View</button> <button id="oneBtn" class="btn" type="button" style="background:rgba(46,111,94,.12);color:#1c4d3f;border:1px solid rgba(33,85,72,.4);" data-i18n="one_click">One-Click Analysis</button> </div> <div class="top-controls" style="margin-top:8px;"> <select id="exercise" class="sel" aria-label="Sport preset"></select> <select id="lead" class="sel" aria-label="Lead side"> <option value="right" data-i18n="lead_right">Right Lead</option> <option value="left" data-i18n="lead_left">Left Lead</option> </select> <label class="small-label" for="sens" data-i18n="sensitivity">Sensitivity</label><input id="sens" class="num" type="number" min="0.3" max="1.5" step="0.05" value="0.90" /> <label class="small-label" for="conf" data-i18n="confidence">Confidence</label><input id="conf" class="num" type="number" min="0.1" max="0.9" step="0.05" value="0.5" /> <label class="small-label" for="smoo" data-i18n="smoothing">Smoothing</label><input id="smoo" class="num" type="number" min="0" max="0.95" step="0.05" value="0.6" /> <label class="small-label"><input id="flip" class="chk" type="checkbox" checked /> <span data-i18n="mirror">Mirror</span></label> </div> <div class="top-controls" style="margin-top:8px;position:relative;"> <select id="drill" class="sel" aria-label="Drill"></select> <input id="goalReps" class="num" type="number" min="1" max="500" value="8" aria-label="Goal reps" /> <input id="goalSets" class="num" type="number" min="1" max="20" value="3" aria-label="Goal sets" /> <input id="tempo" class="num" type="number" min="20" max="200" value="56" aria-label="Tempo BPM" /> <button id="drillStart" class="btn" type="button" style="background:#4c6a8c;color:#fff;border-color:#3c5875" data-i18n="drill_start">Start Drill</button> <button id="drillStop" class="btn" type="button" data-i18n="drill_stop">Stop Drill</button> <span class="coach" aria-live="polite"></span> </div> <div class="hr" aria-hidden="true"></div> <canvas id="out" width="960" height="540" aria-label="Training video output"></canvas> <div id="cmpWrap" aria-label="Comparison canvases"> <canvas id="outL" width="480" height="540" aria-label="Reference"></canvas> <canvas id="outR" width="480" height="540" aria-label="Live"></canvas> </div> <video id="vid" style="display:none" muted playsinline autoplay></video> <video id="refVid" style="display:none" muted playsinline autoplay></video> <div class="stat-grid"> <div class="stat"><div class="label" data-i18n="total_score">Total Score</div><div id="score" class="value">0</div></div> <div class="stat"><div class="label" data-i18n="similarity_rule">Similarity / Rule</div><div id="mix" class="value">0 / 0</div></div> <div class="stat"><div class="label" data-i18n="fps_valid">FPS / Valid Frames%</div><div id="fps" class="value">0 / 0%</div></div> </div> <div class="kv"> <div class="k"><div class="label" data-i18n="knee_angles">Left/Right Knee Angle</div><div id="knees" class="value">- / -</div><div id="kneeRom" class="sub">ROM - / SymmetryΔ -</div></div> <div class="k"><div class="label" data-i18n="elbow_angles">Left/Right Elbow Angle</div><div id="elbs" class="value">- / -</div><div id="elbRom" class="sub">ROM - / SymmetryΔ -</div></div> </div> <div class="hr" aria-hidden="true"></div> <div class="top-controls"> <button id="recStart" class="btn" type="button" style="background:#4c6a8c;color:#fff;border-color:#3c5875" data-i18n="rec_start">Start Recording</button> <button id="recStop" class="btn" type="button" data-i18n="rec_stop">Stop Recording</button> <button id="csvBtn" class="btn primary" type="button" data-i18n="save_csv">Save CSV</button> <button id="jsonBtn" class="btn primary" type="button" data-i18n="save_json">Save JSON</button> <button id="reportBtn" class="btn primary" type="button" data-i18n="make_report">Generate Report</button> <button id="snapBtn" class="btn primary" type="button" data-i18n="snapshot">Snapshot</button> <div id="dl" role="status" aria-live="polite"></div> </div> <div id="gal" aria-label="Snapshot gallery"></div> <div class="hr" aria-hidden="true"></div> <canvas id="chart" height="150" aria-label="Analysis chart"></canvas> </div> <div class="card" aria-label="Presets and coaching info"> <div class="secondary-card-title" data-i18n="preset_drill">Preset & Drill</div> <div id="presetInfo" class="small-note">Loading…</div> <div id="drillInfo" class="small-note" style="margin-top:6px;white-space:pre-wrap;"></div> <div class="hr"></div> <div class="small-note" style="line-height:1.7"> <b data-i18n="coaching_tip">Coaching Tip</b><br /> <span data-i18n="coaching_tip_desc">Review symmetry delta and ROM together for more realistic sport-form feedback. For ice sports, verify low-knee-angle thresholds for deeper positions.</span> </div> </div> </div> <div class="note-box" style="margin-top:12px;"> <h4 data-i18n="disclaimer_title">Disclaimer</h4> <div data-i18n="disclaimer_1">This tool is for training assistance only. It does not replace professional coaching, fitness testing, or medical diagnosis. Stop immediately if you feel pain, dizziness, or signs of injury.</div> <div style="margin-top:5px;" data-i18n="disclaimer_2">Pose estimation, angles, and snapshots are processed locally in your browser. This embedded tool does not intentionally transmit your camera/video data to our servers.</div> <div style="margin-top:5px;" data-i18n="disclaimer_3">Users are responsible for compliance with local laws, venue rules, and consent requirements when recording themselves or others.</div> </div> <div class="note-box" style="margin-top:8px;"> <h4 data-i18n="copyright_title">Copyright</h4> <div>© 2026 Happycode7. All rights reserved.</div> <div style="margin-top:4px;" data-i18n="copyright_desc">Unauthorized copying, modification, redistribution, or commercial resale is prohibited without permission from the copyright holder.</div> </div> <div class="footer-box"> <div data-i18n="safety_field">Field use: secure non-slip floor, remove obstacles, and stabilize the camera on a tripod when possible.</div> <div class="foot-right"> <span>Happycode7</span> <span aria-label="Build info">Build 2026-02-22</span> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.21.0/dist/tf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm@4.21.0/dist/tf-backend-wasm.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script> <script type="module"> (async () => { const urls = [ "https://esm.sh/@tensorflow-models/pose-detection@3.4.0", "https://esm.run/@tensorflow-models/pose-detection@3.4.0" ]; for (let i=0;i<urls.length;i++){ try{ window.__poseModule = await import(urls[i]); break; }catch(e){} } if(!window.__poseModule){ window._poseLoadFail = true; } })(); </script> <script> document.addEventListener("DOMContentLoaded", function(){ var I18N={ en:{title:"Global Sports Pose Coach | Real-Time Form Comparison & Training Assistant",subtitle:"Compare webcam/video posture against a reference pose and review sport-specific rules, symmetry, and ROM for training support.",run:"Start",close_tool:"Close",change:"Change",close:"Close",https_note:"Camera access requires HTTPS. If denied, use a local video file. Camera/video data is processed locally in your browser and is not uploaded by this tool.",guide_title:"How to use",g1:"Place your full body in frame or upload a front-facing training video.",g2:"Capture a reference pose while holding correct form.",g3:"Select a sport preset, lead side, and drill, then start the drill.",g4:"Review score, similarity, joint angles, ROM, and symmetry, then save CSV/JSON/report/snapshots.",env_tip:"Best results: clear floor, stable lighting, and simple background.",webcam_start:"Start Webcam",select_file:"Select Video",reference_video:"Reference Video",capture_ref:"Capture Reference Pose",compare_view:"Compare View",compare_off:"Hide Compare",one_click:"One-Click Analysis",lead_right:"Right Lead",lead_left:"Left Lead",sensitivity:"Sensitivity",confidence:"Confidence",smoothing:"Smoothing",mirror:"Mirror",drill_start:"Start Drill",drill_stop:"Stop Drill",total_score:"Total Score",similarity_rule:"Similarity / Rule",fps_valid:"FPS / Valid Frames%",knee_angles:"Left/Right Knee Angle",elbow_angles:"Left/Right Elbow Angle",rec_start:"Start Recording",rec_stop:"Stop Recording",save_csv:"Save CSV",save_json:"Save JSON",make_report:"Generate Report",snapshot:"Snapshot",preset_drill:"Preset & Drill",coaching_tip:"Coaching Tip",coaching_tip_desc:"Review symmetry delta and ROM together for more realistic sport-form feedback. For ice sports, verify low-knee-angle thresholds for deeper positions.",disclaimer_title:"Disclaimer",disclaimer_1:"This tool is for training assistance only. It does not replace professional coaching, fitness testing, or medical diagnosis. Stop immediately if you feel pain, dizziness, or signs of injury.",disclaimer_2:"Pose estimation, angles, and snapshots are processed locally in your browser. This embedded tool does not intentionally transmit your camera/video data to our servers.",disclaimer_3:"Users are responsible for compliance with local laws, venue rules, and consent requirements when recording themselves or others.",copyright_title:"Copyright",copyright_desc:"Unauthorized copying, modification, redistribution, or commercial resale is prohibited without permission from the copyright holder.",safety_field:"Field use: secure non-slip floor, remove obstacles, and stabilize the camera on a tripod when possible.",lang_modal_title:"Choose your language",lang_modal_desc:"This tool runs entirely in your browser. Select a language for labels and guidance."}, ko:{title:"글로벌 스포츠 포즈 코치 | 실시간 자세 비교·훈련 보조",subtitle:"웹캠/영상 포즈를 기준 포즈와 비교하고 종목별 룰, 대칭, ROM을 확인하는 훈련 보조 도구입니다.",run:"실행하기",close_tool:"닫기",change:"변경",close:"닫기",https_note:"카메라 접근은 HTTPS에서만 동작합니다. 거부되면 로컬 영상 파일을 사용하세요. 카메라/영상 데이터는 브라우저에서 로컬 처리되며 이 도구가 업로드하지 않습니다.",guide_title:"사용 안내",g1:"전신이 보이게 카메라를 고정하거나 정면 훈련 영상을 올리세요.",g2:"정석 자세에서 기준 포즈를 캡처하세요.",g3:"종목 프리셋, 리드 방향, 드릴을 선택한 뒤 드릴을 시작하세요.",g4:"점수, 유사도, 관절각, ROM, 대칭을 확인하고 CSV/JSON/리포트/스냅샷을 저장하세요.",env_tip:"흰 바닥, 안정적인 조명, 단순 배경에서 인식률이 좋습니다.",webcam_start:"웹캠 시작",select_file:"영상 선택",reference_video:"기준 영상",capture_ref:"기준 포즈 캡처",compare_view:"비교 보기",compare_off:"비교 끄기",one_click:"원클릭 분석",lead_right:"오른발 리드",lead_left:"왼발 리드",sensitivity:"감도",confidence:"신뢰도",smoothing:"스무딩",mirror:"좌우반전",drill_start:"드릴 시작",drill_stop:"드릴 정지",total_score:"총점",similarity_rule:"유사도 / 룰",fps_valid:"FPS / 유효프레임%",knee_angles:"왼/오 무릎 각도",elbow_angles:"왼/오 팔꿈치 각도",rec_start:"녹화 시작",rec_stop:"녹화 종료",save_csv:"CSV 저장",save_json:"JSON 저장",make_report:"리포트 생성",snapshot:"스냅샷",preset_drill:"프리셋 & 드릴",coaching_tip:"코칭 팁",coaching_tip_desc:"대칭Δ와 ROM을 함께 확인하면 실제 경기 자세에 더 가까운 피드백이 됩니다. 빙상 종목은 로우 포지션 무릎각 임계값을 확인하세요.",disclaimer_title:"면책",disclaimer_1:"이 도구는 훈련 보조용이며 전문 코칭, 피지컬 테스트, 의료 진단을 대체하지 않습니다. 통증, 어지럼, 부상 징후가 있으면 즉시 중단하세요.",disclaimer_2:"포즈 추정, 각도, 스냅샷은 브라우저 로컬에서 처리됩니다. 이 임베드 도구는 카메라/영상 데이터를 서버로 전송하지 않도록 설계되었습니다.",disclaimer_3:"촬영 및 사용 시 현지 법률, 장소 규정, 촬영 동의 요건 준수 책임은 사용자에게 있습니다.",copyright_title:"저작권",copyright_desc:"저작권자 허가 없이 무단 복제·수정·재배포·상업적 재판매를 금합니다.",safety_field:"현장 사용 시 바닥 미끄럼 방지, 장애물 제거, 카메라 삼각대 고정을 권장합니다.",lang_modal_title:"언어를 선택하세요",lang_modal_desc:"이 도구는 브라우저에서 로컬로 실행됩니다. 라벨과 안내 언어를 선택하세요."}, ja:{title:"グローバルスポーツ姿勢コーチ | リアルタイム姿勢比較・練習アシスタント",subtitle:"Webカメラ/動画の姿勢を基準姿勢と比較し、競技別ルール・左右差・ROMを確認できます。",run:"開始",close_tool:"閉じる",change:"変更",close:"閉じる",guide_title:"使い方",lang_modal_title:"言語を選択",lang_modal_desc:"このツールはブラウザ内で実行されます。表示言語を選択してください。"}, zh:{title:"全球运动姿态教练 | 实时姿态对比与训练辅助",subtitle:"将摄像头/视频姿态与参考姿态进行对比，并查看项目规则、对称性与关节活动范围。",run:"开始",close_tool:"关闭",change:"切换",close:"关闭",guide_title:"使用说明",lang_modal_title:"选择语言",lang_modal_desc:"本工具在浏览器本地运行。请选择界面语言。"}, es:{title:"Coach Global de Postura Deportiva | Comparación en Tiempo Real y Asistente de Entrenamiento",subtitle:"Compara la postura de webcam/video con una postura de referencia y revisa reglas del deporte, simetría y ROM.",run:"Iniciar",close_tool:"Cerrar",change:"Cambiar",close:"Cerrar",guide_title:"Cómo usar",lang_modal_title:"Elige tu idioma",lang_modal_desc:"Esta herramienta se ejecuta localmente en tu navegador. Selecciona un idioma."}, fr:{title:"Coach Global de Posture Sportive | Comparaison en Temps Réel et Assistant d’Entraînement",subtitle:"Comparez la posture webcam/vidéo à une posture de référence et vérifiez règles sportives, symétrie et amplitude.",run:"Démarrer",close_tool:"Fermer",change:"Changer",close:"Fermer",guide_title:"Mode d’emploi",lang_modal_title:"Choisissez votre langue",lang_modal_desc:"Cet outil s’exécute localement dans votre navigateur. Choisissez votre langue."} }; function t(lang,key){ return (I18N[lang]&&I18N[lang][key]) || (I18N.en&&I18N.en[key]) || key; } function applyI18n(lang){ document.documentElement.lang=lang; document.querySelectorAll("[data-i18n]").forEach(function(el){ var key=el.getAttribute("data-i18n"); var txt=t(lang,key); if(txt!=null) el.textContent=txt; }); try{ localStorage.setItem("hc7_pose_lang",lang); }catch(e){} } function getLang(){ try{ var s=localStorage.getItem("hc7_pose_lang"); if(s && I18N[s]) return s; }catch(e){} return "en"; } var langSelect=document.getElementById("langSelect"); var langModal=document.getElementById("langModal"); var langOpen=document.getElementById("langOpen"); var langModalClose=document.getElementById("langModalClose"); var currentLang=getLang(); if(langSelect){ langSelect.value=currentLang; } applyI18n(currentLang); if(langOpen){ langOpen.onclick=function(){ langModal.classList.add("open"); langModal.setAttribute("aria-hidden","false"); }; } if(langModalClose){ langModalClose.onclick=function(){ langModal.classList.remove("open"); langModal.setAttribute("aria-hidden","true"); }; } if(langSelect){ langSelect.onchange=function(){ currentLang=this.value; applyI18n(currentLang); }; } document.querySelectorAll(".lang-btn[data-lang]").forEach(function(btn){ btn.addEventListener("click",function(){ currentLang=this.getAttribute("data-lang"); if(langSelect) langSelect.value=currentLang; applyI18n(currentLang); langModal.classList.remove("open"); langModal.setAttribute("aria-hidden","true"); }); }); var runBtn=document.getElementById("hc7-run"), stopBtn=document.getElementById("hc7-stop"), app=document.getElementById("hc7-app"); var started=false, appState=null; var RESIZE_TOKEN = (function(){ try{ return (location.hash||"").slice(1)||""; }catch(e){ return ""; } })(); runBtn.onclick=function(){ if(started) return; started=true; app.style.display="block"; runBtn.style.display="none"; stopBtn.style.display="inline-flex"; appState=startApp(); safeResize(); }; stopBtn.onclick=function(){ if(appState && typeof appState.stop==="function"){ try{ appState.stop(); }catch(e){} } app.style.display="none"; stopBtn.style.display="none"; runBtn.style.display="inline-flex"; started=false; safeResize(); }; function safeResize(){ try{ parent.postMessage({hc7:"resize",h:document.body.scrollHeight,token:RESIZE_TOKEN},"*"); }catch(e){} } function kp(obj,name){return obj.keypoints.find(function(k){return k.name===name})||obj.keypoints.find(function(k){return k.part===name})} function angle(a,b,c){ if(!a||!b||!c) return NaN; var abx=a.x-b.x, aby=a.y-b.y, cbx=c.x-b.x, cby=c.y-b.y; var mab=Math.hypot(abx,aby), mcb=Math.hypot(cbx,cby); if(!mab||!mcb) return NaN; var dot=abx*cbx+aby*cby; var ang=Math.acos(Math.max(-1,Math.min(1,dot/(mab*mcb)))); return ang*180/Math.PI; } function anglesFrom(k){ return {Lk:angle(kp(k,"left_hip"),kp(k,"left_knee"),kp(k,"left_ankle")),Rk:angle(kp(k,"right_hip"),kp(k,"right_knee"),kp(k,"right_ankle")),Le:angle(kp(k,"left_shoulder"),kp(k,"left_elbow"),kp(k,"left_wrist")),Re:angle(kp(k,"right_shoulder"),kp(k,"right_elbow"),kp(k,"right_wrist")),Ls:angle(kp(k,"left_elbow"),kp(k,"left_shoulder"),kp(k,"left_hip")),Rs:angle(kp(k,"right_elbow"),kp(k,"right_shoulder"),kp(k,"right_hip")),Lh:angle(kp(k,"left_shoulder"),kp(k,"left_hip"),kp(k,"left_knee")),Rh:angle(kp(k,"right_shoulder"),kp(k,"right_hip"),kp(k,"right_knee"))}; } function drawKpsOn(cv,k,col,alpha){ var ctx=cv.getContext("2d"); ctx.globalAlpha=alpha; ctx.lineWidth=3; ctx.strokeStyle=col; ctx.fillStyle=col; var pts=["left_shoulder","right_shoulder","left_elbow","right_elbow","left_wrist","right_wrist","left_hip","right_hip","left_knee","right_knee","left_ankle","right_ankle"]; var pairs=[["left_shoulder","right_shoulder"],["left_shoulder","left_elbow"],["left_elbow","left_wrist"],["right_shoulder","right_elbow"],["right_elbow","right_wrist"],["left_shoulder","left_hip"],["right_shoulder","right_hip"],["left_hip","left_knee"],["left_knee","left_ankle"],["right_hip","right_knee"],["right_knee","right_ankle"],["left_hip","right_hip"]]; pairs.forEach(function(p){ var a=kp(k,p[0]),b=kp(k,p[1]); if(a&&b){ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();} }); pts.forEach(function(n){ var a=kp(k,n); if(a){ctx.beginPath();ctx.arc(a.x,a.y,3,0,Math.PI*2);ctx.fill();} }); ctx.globalAlpha=1; } function clamp(x,a,b){return Math.max(a,Math.min(b,x))} function ema(prev,curr,alpha){ if(!prev) return curr; var out={},k; for(k in curr){ var v=curr[k]; out[k]=(isFinite(v)?(alpha*v+(1-alpha)*(prev[k]!=null?prev[k]:v)):(prev[k]!=null?prev[k]:v)); } return out; } function simScore(curr,base){ if(!base) return 0; var keys=["Lk","Rk","Le","Re","Ls","Rs","Lh","Rh"], diff=0,cnt=0; keys.forEach(function(key){ var a=curr[key], b=base[key]; if(isFinite(a)&&isFinite(b)){ diff+=Math.abs(a-b); cnt++; } }); if(!cnt) return 0; var avg=diff/cnt; return Math.round(clamp(100-avg,0,100)); } /* 원본 기능 로직은 동일 유지 */ /* 아래는 사용자 제공 버전과 동일 동작을 위해 그대로 유지 */ /* (RULES / DRILLS / detector / loop / recording / export / one-click flow 등) */ /* ====== 시작: 원본 로직 유지 ====== */ var RULES={ fencing_lunge:function(A,lead){ var fk=lead==="right"?A.Rk:A.Lk, bk=lead==="right"?A.Lk:A.Rk, sh=lead==="right"?A.Rs:A.Ls; var t=[]; if(!(fk>80&&fk<110)) t.push("Front knee 90±10°"); if(bk<150) t.push("Rear leg extension"); if(sh<70) t.push("Shoulder stability"); var pass=!t.length; return {score:pass?100:clamp(100-t.length*15,0,100), msg:pass?"Alignment OK":"Fix: "+t.join(", ")}; }, snatch_receive:function(A){ var t=[]; if(A.Lk<80||A.Rk<80) t.push("Squat depth"); if(A.Ls<80||A.Rs<80) t.push("Overhead lock"); var pass=!t.length; return {score:pass?100:clamp(100-t.length*15,0,100), msg:pass?"Stable overhead":"Fix: "+t.join(", ")}; }, clean_rack:function(A){ var t=[]; if(A.Ls<50||A.Rs<50) t.push("Elbows up"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"Front rack"}; }, jerk_lockout:function(A){ var t=[]; if(A.Ls<80||A.Rs<80) t.push("Full extension"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"Lockout"}; }, tennis_serve_trophy:function(A,lead){ var tos=lead==="right"?A.Rs:A.Ls, opp=lead==="right"?A.Ls:A.Rs; var t=[]; if(tos<80) t.push("Toss arm up"); if(opp<120) t.push("Racket arm abduction"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"Trophy pose"}; }, archery_stance:function(A,lead){ var draw=lead==="right"?A.Rs:A.Ls, bow=lead==="right"?A.Ls:A.Rs; var t=[]; if(draw<140) t.push("Scapular retraction"); if(bow<150) t.push("Bow arm extension"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"Horizontal alignment"}; }, soccer_instep_kick:function(A,lead){ var plant=lead==="right"?A.Lk:A.Rk; var t=[]; if(plant<150) t.push("Plant leg extension"); return {score:clamp(100-t.length*25,0,100), msg:t[0]?"Fix: "+t.join(", "):"Impact ready"}; }, vb_spike_plant:function(A){ var t=[]; if(A.Lk>120||A.Rk>120) t.push("Plant bend"); return {score:clamp(100-t.length*25,0,100), msg:t[0]?"Fix: "+t.join(", "):"Jump prep"}; }, bb_jump_shot:function(A){ var t=[]; if(A.Ls<70||A.Rs<70) t.push("Shooting angle"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"Release"}; }, tkd_round:function(A,lead){ var kick=lead==="right"?A.Rk:A.Lk; var t=[]; if(kick<60) t.push("Chamber height"); return {score:clamp(100-t.length*25,0,100), msg:t[0]?"Fix: "+t.join(", "):"Chamber"}; }, pushup:function(A){ var t=[]; if(A.Le<160||A.Re<160) t.push("Arm extension"); return {score:clamp(100-t.length*25,0,100), msg:t[0]?"Fix: "+t.join(", "):"Push-up"}; }, plank:function(A){ var t=[]; if(A.Lh<150||A.Rh<150) t.push("Hip alignment"); return {score:clamp(100-t.length*25,0,100), msg:t[0]?"Fix: "+t.join(", "):"Plank"}; }, lunge:function(A,lead){ var fk=lead==="right"?A.Rk:A.Lk; var t=[]; if(!(fk>80&&fk<110)) t.push("Front knee 90±10°"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"Lunge"}; }, squat:function(A){ var t=[]; if(A.Lk<80||A.Rk<80) t.push("Depth"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"Squat"}; }, jumpingjack:function(A){ var t=[]; if(A.Ls<90||A.Rs<90) t.push("Arm range"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"Rhythm"}; }, figure_jump:function(A){ var t=[]; if(A.Lk>170&&A.Rk>170) t.push("Landing cushioning"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?("Fix: "+t.join(", ")):"Landing"}; }, figure_spin:function(A){ var t=[]; if(Math.abs((A.Lh||0)-(A.Rh||0))>30) t.push("Torso alignment"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"Spin"}; }, shorttrack_start:function(A){ var t=[]; if(A.Lk>110||A.Rk>110) t.push("Knee bend"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"Start"}; }, speedskate_corner:function(A){ var t=[]; if(A.Lk>140||A.Rk>140) t.push("Low position"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"Corner"}; }, curling_delivery:function(A,lead){ var fk=lead==="right"?A.Rk:A.Lk, bk=lead==="right"?A.Lk:A.Rk; var t=[]; if(!(fk>70 && fk<120)) t.push("Front leg 70~120°"); if(bk<150) t.push("Rear leg extension"); if(Math.abs((A.Ls||0)-(A.Rs||0))>25) t.push("Shoulder level"); return {score:clamp(100-t.length*18,0,100), msg:t[0]?"Fix: "+t.join(", "):"Delivery OK"}; }, biathlon_shoot:function(A){ var t=[]; if((A.Lh||180)>165 || (A.Rh||180)>165) t.push("Lower hips"); if(A.Ls<60 || A.Rs<60) t.push("Shoulder support angle"); return {score:clamp(100-t.length*18,0,100), msg:t[0]?"Fix: "+t.join(", "):"Shooting pose OK"}; }, handball_jump_shot:function(A){ var t=[]; if(A.Ls<70||A.Rs<70) t.push("Shooting arm angle"); if(A.Lk>140 && A.Rk>140) t.push("Landing cushioning"); return {score:clamp(100-t.length*18,0,100), msg:t[0]?"Fix: "+t.join(", "):"Handball shot"}; }, wrestling_stance:function(A){ var t=[]; if(A.Lk>130||A.Rk>130) t.push("Bend knees more"); if(Math.abs((A.Lh||0)-(A.Rh||0))>25) t.push("Torso balance"); return {score:clamp(100-t.length*18,0,100), msg:t[0]?"Fix: "+t.join(", "):"Wrestling stance"}; }, judo_ogoshi_entry:function(A){ var t=[]; if((A.Lh||180)<130 || (A.Rh||180)<130) t.push("Drive hips in"); if(A.Ls<40||A.Rs<40) t.push("Pull with arms"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"O-goshi entry"}; }, rhythmic_pivot:function(A){ var t=[]; if(Math.abs((A.Lh||0)-(A.Rh||0))>25) t.push("Pelvis level"); if(A.Ls<50 && A.Rs<50) t.push("Arm line"); return {score:clamp(100-t.length*20,0,100), msg:t[0]?"Fix: "+t.join(", "):"Pivot pose"}; } }; function ruleScore(ex,A,lead){ var r=RULES[ex]; if(!r) return {score:0,msg:"Free compare mode"}; return r(A,lead); } var DRILLS={ squat_basic:{ name:"Squat 3-step", for:["squat"], bpm:60, phases:[{id:"down",hold:200,enter:function(A){return A.Lk<110 && A.Rk<110;},cue:"Down"},{id:"bottom",hold:300,enter:function(A){return A.Lk<90 && A.Rk<90;},cue:"Hold"},{id:"up",hold:200,enter:function(A){return A.Lk>150 && A.Rk>150;},cue:"Up"}]}, lunge_iso:{ name:"Lunge Isometric", for:["lunge","fencing_lunge","curling_delivery"], bpm:50, phases:[{id:"plant",hold:200,enter:function(A,lead){var fk=lead==="right"?A.Rk:A.Lk; return fk>80 && fk<110;},cue:"Front 90°"},{id:"hold",hold:2000,enter:function(){return true;},cue:"Hold"}]}, speed_low_hold:{ name:"Ice Low Position Hold", for:["shorttrack_start","speedskate_corner"], bpm:45, phases:[{id:"low",hold:1600,enter:function(A){return A.Lk<115 && A.Rk<115;},cue:"Low Hold"},{id:"reset",hold:400,enter:function(){return true;},cue:"Reset"}]}, wrestling_pulse:{ name:"Wrestling Pulse", for:["wrestling_stance","judo_ogoshi_entry"], bpm:70, phases:[{id:"drop",hold:200,enter:function(A){return A.Lk<130 && A.Rk<130;},cue:"Drop"},{id:"hold",hold:600,enter:function(){return true;},cue:"Balance"}]} }; var vid=document.getElementById("vid"), canvas=document.getElementById("out"), ctx=canvas.getContext("2d"), refVid=document.getElementById("refVid"), cmpWrap=document.getElementById("cmpWrap"), canvasL=document.getElementById("outL"), canvasR=document.getElementById("outR"); var camBtn=document.getElementById("camBtn"), file=document.getElementById("file"), refFile=document.getElementById("refFile"), scoreEl=document.getElementById("score"), mixEl=document.getElementById("mix"), fpsEl=document.getElementById("fps"), kneesEl=document.getElementById("knees"), elbsEl=document.getElementById("elbs"), kneeRomEl=document.getElementById("kneeRom"), elbRomEl=document.getElementById("elbRom"), exerciseSel=document.getElementById("exercise"), leadSel=document.getElementById("lead"), refCap=document.getElementById("refCap"), cmpBtn=document.getElementById("cmpBtn"), sens=document.getElementById("sens"), conf=document.getElementById("conf"), smoo=document.getElementById("smoo"), flip=document.getElementById("flip"), recStart=document.getElementById("recStart"), recStop=document.getElementById("recStop"), csvBtn=document.getElementById("csvBtn"), jsonBtn=document.getElementById("jsonBtn"), reportBtn=document.getElementById("reportBtn"), snapBtn=document.getElementById("snapBtn"), dl=document.getElementById("dl"), presetInfo=document.getElementById("presetInfo"), drillSel=document.getElementById("drill"), drillInfo=document.getElementById("drillInfo"), goalReps=document.getElementById("goalReps"), goalSets=document.getElementById("goalSets"), tempo=document.getElementById("tempo"), drillStart=document.getElementById("drillStart"), drillStop=document.getElementById("drillStop"), coach=document.querySelector(".coach"), oneBtn=document.getElementById("oneBtn"), gal=document.getElementById("gal"); var detector=null, detectorErr=null, anim=null; var refKp=null, log=[], emaAngles=null, lastT=0, frames=0, validFrames=0, lastPose=null, ch=null, mediaRec=null; var cmpOn=false, refSnap=document.createElement("canvas"); refSnap.width=960; refSnap.height=540; (async function warmTF(){ try{ if(typeof tf!=="undefined"){ await tf.ready(); try{ await tf.setBackend("webgl"); }catch(e){} if(tf.getBackend()!=="webgl"){ try{ await tf.setBackend("wasm"); }catch(e){} } } }catch(e){} })(); var PRESETS=[ {g:"General", items:[["squat","Squat"],["lunge","Lunge"],["pushup","Push-up"],["plank","Plank"],["jumpingjack","Jumping Jack"],["free","Free Compare"]]}, {g:"Olympic / Major Sports", items:[["snatch_receive","Weightlifting Snatch"],["clean_rack","Weightlifting Clean"],["jerk_lockout","Weightlifting Jerk"],["fencing_lunge","Fencing Lunge"],["tkd_round","Taekwondo Roundhouse"],["archery_stance","Archery Stance"],["bb_jump_shot","Basketball Jump Shot"],["vb_spike_plant","Volleyball Spike Plant"],["soccer_instep_kick","Soccer Instep Kick"],["tennis_serve_trophy","Tennis Serve Trophy"]]}, {g:"Winter / Emerging / Niche", items:[["figure_jump","Figure Skating Landing"],["figure_spin","Figure Skating Spin"],["shorttrack_start","Short Track Start"],["speedskate_corner","Speed Skating Corner"],["curling_delivery","Curling Delivery"],["biathlon_shoot","Biathlon Shooting Position"],["handball_jump_shot","Handball Jump Shot"],["wrestling_stance","Wrestling Stance"],["judo_ogoshi_entry","Judo O-goshi Entry"],["rhythmic_pivot","Rhythmic Gymnastics Pivot"]]} ]; (function loadPresetSelect(){ exerciseSel.innerHTML=""; PRESETS.forEach(function(p){ var og=document.createElement("optgroup"); og.label=p.g; p.items.forEach(function(it){ var o=document.createElement("option"); o.value=it[0]; o.textContent=it[1]; og.appendChild(o); }); exerciseSel.appendChild(og); }); presetInfo.textContent="Categories: "+PRESETS.map(function(p){return p.g+" ("+p.items.length+")";}).join(", "); })(); exerciseSel.addEventListener("change",function(){ loadDrillsFor(exerciseSel.value); }); loadDrillsFor(exerciseSel.value||"squat"); function loadDrillsFor(ex){ var list=Object.entries(DRILLS).filter(function(x){return x[1].for.indexOf(ex)>-1;}).map(function(x){return [x[0],x[1].name];}); drillSel.innerHTML=""; if(list.length){ list.forEach(function(v){ var o=document.createElement("option"); o.value=v[0]; o.textContent=v[1]; drillSel.appendChild(o); }); drillInfo.textContent="Drills: "+list.length+"\\n- "+list.map(function(x){return x[1];}).join("\\n- "); }else{ drillInfo.textContent="No drill presets for this sport selection."; } } var ac=null; function beep(){ try{ ac=ac||new (window.AudioContext||window.webkitAudioContext)(); var o=ac.createOscillator(), g=ac.createGain(); o.frequency.value=720; g.gain.value=0.06; o.connect(g); g.connect(ac.destination); o.start(); setTimeout(function(){o.stop();},60); }catch(e){} } var D=null, phaseIdx=0, reps=0, sets=0, inDrill=false, nextBeat=0; function startDrill(){ var id=drillSel.value; if(!id || !DRILLS[id]){ note("No drill preset"); return; } D=DRILLS[id]; phaseIdx=0; reps=0; sets=1; inDrill=true; if(coach){ coach.style.display="block"; coach.textContent=D.phases[0].cue; } beep(); nextBeat=performance.now(); } function stopDrill(){ inDrill=false; if(coach){ coach.style.display="none"; } } drillStart.onclick=startDrill; drillStop.onclick=stopDrill; ch=new Chart(document.getElementById("chart"),{type:"line",data:{labels:[],datasets:[{label:"Total",data:[],borderWidth:2,tension:.25},{label:"L Knee",data:[],borderWidth:1,tension:.25},{label:"R Knee",data:[],borderWidth:1,tension:.25}]},options:{animation:false,responsive:true,plugins:{legend:{labels:{color:"#556079"}}},scales:{x:{ticks:{color:"#7a889e"},grid:{color:"#eef1f6"}},y:{ticks:{color:"#7a889e"},grid:{color:"#eef1f6"}}}}}); function pushChart(t,score,A){ ch.data.labels.push(t); ch.data.datasets[0].data.push(score); ch.data.datasets[1].data.push(A.Lk||null); ch.data.datasets[2].data.push(A.Rk||null); if(ch.data.labels.length>180){ ch.data.labels.shift(); ch.data.datasets.forEach(function(d){d.data.shift();}); } ch.update("none"); } var rom={Lk:{min:1e9,max:-1e9},Rk:{min:1e9,max:-1e9},Le:{min:1e9,max:-1e9},Re:{min:1e9,max:-1e9}}; function updRom(A){ ["Lk","Rk","Le","Re"].forEach(function(k){ var v=A[k]; if(isFinite(v)){ rom[k].min=Math.min(rom[k].min,v); rom[k].max=Math.max(rom[k].max,v); } }); } function note(msg){ dl.textContent=msg; setTimeout(function(){ if(dl.textContent===msg){ dl.textContent=""; } },1800); } function safeDownload(name, blob){ try{ var url=URL.createObjectURL(blob), a=document.createElement("a"); a.style.display="none"; a.href=url; a.download=name; document.body.appendChild(a); a.click(); setTimeout(function(){ try{ document.body.removeChild(a); }catch(e){} setTimeout(function(){ try{ URL.revokeObjectURL(url); }catch(e){} },30000); },300); dl.textContent=name+" ready"; }catch(e){ note("Download failed"); } } async function startCam(){ try{ if(!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)){ note("Camera API unsupported"); return false; } var s=await navigator.mediaDevices.getUserMedia({ video:{facingMode:"user",width:{ideal:960},height:{ideal:540}}, audio:false }); vid.srcObject=s; vid.muted=true; vid.playsInline=true; vid.onloadedmetadata=function(){ vid.play().catch(function(){ note("Autoplay blocked. Tap/click the page once."); }); }; return true; }catch(err){ note("Camera error: "+(err && err.name ? err.name : "error")); return false; } } function stopStream(){ if(vid.srcObject){ vid.srcObject.getTracks().forEach(function(t){t.stop();}); vid.srcObject=null; } } camBtn.onclick=async function(){ stopStream(); await startCam(); }; file.onchange=function(e){ stopStream(); var f=e.target.files[0]; if(!f) return; var url=URL.createObjectURL(f); vid.src=url; vid.onloadedmetadata=function(){ vid.currentTime=0; vid.play().catch(function(){ note("Autoplay blocked. Click the video area once."); }); }; setTimeout(function(){ try{ URL.revokeObjectURL(url); }catch(e){} },30000); }; refFile.onchange=function(e){ var f=e.target.files[0]; if(!f) return; var url=URL.createObjectURL(f); refVid.src=url; refVid.onloadedmetadata=function(){ refVid.currentTime=0; refVid.play().catch(function(){ note("Reference video autoplay blocked."); }); }; setTimeout(function(){ try{ URL.revokeObjectURL(url); }catch(e){} },30000); }; function getActiveCanvas(){ return cmpOn ? canvasR : canvas; } function pushThumb(cv){ try{ var tcv=document.createElement("canvas"); tcv.width=240; tcv.height=135; var g=tcv.getContext("2d"); g.drawImage(cv,0,0,tcv.width,tcv.height); var img=new Image(); img.src=tcv.toDataURL("image/png"); gal.prepend(img); while(gal.children.length>12){ gal.removeChild(gal.lastChild); } }catch(e){} } refCap.onclick=function(){ if(!lastPose) return; refKp=JSON.parse(JSON.stringify(lastPose)); var c=getActiveCanvas(), rx=refSnap.getContext("2d"); rx.clearRect(0,0,refSnap.width,refSnap.height); rx.drawImage(c,0,0,960,540); pushThumb(refSnap); note("Reference pose saved"); }; (async function initPoseDetector(){ var t0=performance.now(); while(typeof window.__poseModule==="undefined" && !window._poseLoadFail && performance.now()-t0<8000){ await new Promise(function(r){setTimeout(r,120);}); } try{ if(window._poseLoadFail || typeof window.__poseModule==="undefined"){ detectorErr=true; note("Pose model load failed (video only mode)"); return; } var pd=window.__poseModule; detector=await pd.createDetector(pd.SupportedModels.MoveNet,{modelType:"Lightning"}); }catch(e){ detectorErr=e; note("Pose model load failed (video only mode)"); } })(); function drawVideoTo(cv, video, flipH){ var c=cv.getContext("2d"); if(flipH){ c.save(); c.scale(-1,1); c.translate(-cv.width,0); c.drawImage(video,0,0,cv.width,cv.height); c.restore(); } else { c.drawImage(video,0,0,cv.width,cv.height); } } vid.onplay=function(){ cancelAnimationFrame(anim); note("Video is playing"); loop(); }; async function loop(){ var now=performance.now(); if(!lastT) lastT=now; frames++; if(now-lastT>1000){ var fps=Math.round(1000*(frames/(now-lastT))), vf=frames?Math.round(100*validFrames/frames):0; fpsEl.textContent=fps+" / "+vf+"%"; frames=0; validFrames=0; lastT=now; } if(cmpOn){ if(refVid.src && !refVid.paused && !refVid.ended){ drawVideoTo(canvasL,refVid,flip.checked); } else{ var lctx=canvasL.getContext("2d"); lctx.clearRect(0,0,canvasL.width,canvasL.height); lctx.drawImage(refSnap,0,0,canvasL.width,canvasL.height); } if(vid.readyState>=2){ drawVideoTo(canvasR,vid,flip.checked); } }else{ if(vid.readyState>=2){ if(flip.checked){ ctx.save(); ctx.scale(-1,1); ctx.translate(-canvas.width,0); ctx.drawImage(vid,0,0,canvas.width,canvas.height); ctx.restore(); } else{ ctx.drawImage(vid,0,0,canvas.width,canvas.height); } }else{ ctx.clearRect(0,0,canvas.width,canvas.height); } } if(detector && !detectorErr){ try{ var poses=await detector.estimatePoses(vid,{flipHorizontal:flip.checked}); var p=poses && poses[0], thr=parseFloat(conf.value||0.5); var ok=p && p.keypoints && p.keypoints.filter(function(q){return q.score>=thr;}).length>=10; if(ok){ lastPose={keypoints:p.keypoints.map(function(q){return {x:q.x,y:q.y,score:q.score,name:q.name,part:q.part};})}; validFrames++; } else { lastPose=null; } if(refKp){ if(cmpOn) drawKpsOn(canvasL,refKp,"rgba(20,40,60,.6)",0.35); else drawKpsOn(canvas,refKp,"rgba(20,40,60,.6)",0.35); } if(lastPose){ if(cmpOn) drawKpsOn(canvasR,lastPose,"#2e6f5e",1); else drawKpsOn(canvas,lastPose,"#2e6f5e",1); var A=anglesFrom(lastPose), a=parseFloat(smoo.value||0.6); emaAngles=ema(emaAngles,A,a); A=emaAngles; var base=refKp?anglesFrom(refKp):null, sim=simScore(A,base), r=ruleScore(exerciseSel.value,A,leadSel.value); var total=Math.round((sim*0.6 + r.score*0.4)*(parseFloat(sens.value||1))); scoreEl.textContent=total; mixEl.textContent=sim+" / "+r.score; kneesEl.textContent=(isFinite(A.Lk)?A.Lk.toFixed(0):"-")+" / "+(isFinite(A.Rk)?A.Rk.toFixed(0):"-"); elbsEl.textContent=(isFinite(A.Le)?A.Le.toFixed(0):"-")+" / "+(isFinite(A.Re)?A.Re.toFixed(0):"-"); var dK=(isFinite(A.Lk)&&isFinite(A.Rk))?Math.abs(A.Lk-A.Rk).toFixed(0):"-"; var dE=(isFinite(A.Le)&&isFinite(A.Re))?Math.abs(A.Le-A.Re).toFixed(0):"-"; updRom(A); kneeRomEl.textContent="ROM "+(isFinite(rom.Lk.min)?Math.round(rom.Lk.max-rom.Lk.min):"-")+"/"+(isFinite(rom.Rk.min)?Math.round(rom.Rk.max-rom.Rk.min):"-")+" · SymmetryΔ "+dK; elbRomEl.textContent="ROM "+(isFinite(rom.Le.min)?Math.round(rom.Le.max-rom.Le.min):"-")+"/"+(isFinite(rom.Re.min)?Math.round(rom.Re.max-rom.Re.min):"-")+" · SymmetryΔ "+dE; pushChart((new Date()).toLocaleTimeString(),total,A); if(inDrill){ var tt=performance.now(); if(ac && (!nextBeat || tt>=nextBeat)){ beep(); var interval=60000/Math.max(20,Math.min(200,parseInt(tempo.value||60))); nextBeat=tt+interval; } var ph=D && D.phases ? D.phases[phaseIdx] : null; if(ph){ if(ph.enter(A,leadSel.value)){ ph._t0=ph._t0||tt; if(tt-ph._t0>=ph.hold){ phaseIdx=(phaseIdx+1)%D.phases.length; if(coach){ coach.textContent=D.phases[phaseIdx].cue; } D.phases[(phaseIdx-1+D.phases.length)%D.phases.length]._t0=null; if(phaseIdx===0){ reps++; if(coach){ coach.textContent=D.phases[0].cue+" · "+sets+"/"+goalSets.value+" sets "+reps+"/"+goalReps.value+" reps"; } if(reps>=parseInt(goalReps.value||10)){ reps=0; sets++; if(sets>parseInt(goalSets.value||1)){ stopDrill(); note("Drill complete"); } } } } }else{ ph._t0=null; } } } log.push({ t:Date.now(), A:emaAngles||{}, sim:sim||0, rule:r?r.score:0, total:parseInt(scoreEl.textContent)||0, phase:inDrill?(D && D.phases ? D.phases[phaseIdx].id:null):null }); if(log.length>50000){ log.splice(0,1000); } } }catch(e){} } anim=requestAnimationFrame(loop); } var recChunks=[]; recStart.onclick=function(){ if(!("MediaRecorder" in window)){ note("Recording not supported"); return; } var stream=getActiveCanvas().captureStream(30); try{ mediaRec=new MediaRecorder(stream); }catch(e){ note("Recording codec not supported"); return; } recChunks=[]; mediaRec.ondataavailable=function(e){ if(e.data && e.data.size) recChunks.push(e.data); }; mediaRec.onstop=function(){ var blob=new Blob(recChunks,{type:mediaRec.mimeType||"video/webm"}); safeDownload("hc7-session.webm", blob); }; mediaRec.start(); note("Recording started"); }; recStop.onclick=function(){ if(mediaRec && mediaRec.state!=="inactive"){ mediaRec.stop(); note("Recording stopped"); } }; csvBtn.onclick=function(){ if(!log.length){ note("No records"); return; } var header="ts,phase,Lk,Rk,Le,Re,Ls,Rs,Lh,Rh,sim,rule,total\\n"; var rows=log.map(function(r){ return [r.t,r.phase||"",r.A.Lk!=null?Number(r.A.Lk).toFixed(1):"",r.A.Rk!=null?Number(r.A.Rk).toFixed(1):"",r.A.Le!=null?Number(r.A.Le).toFixed(1):"",r.A.Re!=null?Number(r.A.Re).toFixed(1):"",r.A.Ls!=null?Number(r.A.Ls).toFixed(1):"",r.A.Rs!=null?Number(r.A.Rs).toFixed(1):"",r.A.Lh!=null?Number(r.A.Lh).toFixed(1):"",r.A.Rh!=null?Number(r.A.Rh).toFixed(1):"",r.sim||0,r.rule||0,r.total||0].join(","); }); safeDownload("hc7-log.csv", new Blob([header+rows.join("\\n")],{type:"text/csv"})); }; jsonBtn.onclick=function(){ var meta={ preset:exerciseSel.value, lead:leadSel.value, drill:drillSel.value, goalReps:goalReps.value, goalSets:goalSets.value, tempo:tempo.value, copyright:"© 2026 Happycode7. All rights reserved." }; safeDownload("hc7-log.json", new Blob([JSON.stringify({meta:meta,log:log},null,2)],{type:"application/json"})); }; function savePngAuto(){ try{ var cv=getActiveCanvas(); cv.toBlob(function(b){ if(!b) return; safeDownload("hc7-snap.png", b); pushThumb(cv); },"image/png"); }catch(e){} } snapBtn.onclick=function(){ var cv=getActiveCanvas(); cv.toBlob(function(b){ if(!b) return; safeDownload("hc7-snap.png", b); pushThumb(cv); },"image/png"); }; reportBtn.onclick=function(){ if(!log.length){ note("No records"); return; } function stat(a){ if(!a.length) return {avg:NaN,min:NaN,max:NaN}; var s=a.reduce(function(p,c){return p+c;},0)/a.length; return {avg:s,min:Math.min.apply(null,a),max:Math.max.apply(null,a)}; } var total=log.map(function(r){return r.total;}).filter(isFinite), sT=stat(total); var txt=["[HC7 Report] "+new Date().toLocaleString(),"Preset: "+exerciseSel.value+" / Lead: "+leadSel.value,"Drill: "+(drillSel.value||"-"),"Goal: "+goalSets.value+" sets x "+goalReps.value+" reps @ "+tempo.value+" BPM","Average score: "+(isFinite(sT.avg)?sT.avg.toFixed(1):"-")+" (min "+(isFinite(sT.min)?sT.min:"-")+", max "+(isFinite(sT.max)?sT.max:"-")+")","Knee ROM L/R: "+(isFinite(rom.Lk.min)?Math.round(rom.Lk.max-rom.Lk.min):"-")+" / "+(isFinite(rom.Rk.min)?Math.round(rom.Rk.max-rom.Rk.min):"-"),"Notice: Training support only. Check local laws and consent requirements when recording.","© 2026 Happycode7. All rights reserved."].join("\\n"); safeDownload("hc7-report.txt", new Blob([txt],{type:"text/plain;charset=utf-8"})); }; async function waitForDetectorReady(){ var t0=performance.now(); while(!detector && !detectorErr){ if(performance.now()-t0>5000) break; await new Promise(function(r){setTimeout(r,60);}); } } async function waitStablePose(ms){ var okSince=null, need=ms||1200; while(true){ await new Promise(function(r){setTimeout(r,80);}); if(lastPose){ if(!okSince) okSince=performance.now(); if(performance.now()-okSince>=need) return true; } else { okSince=null; } } } async function autoPickPresetAndDrill(){ if(!exerciseSel.value) exerciseSel.value="squat"; loadDrillsFor(exerciseSel.value); if(!drillSel.value && drillSel.options.length){ drillSel.value=drillSel.options[0].value; } } async function oneClickFlow(){ dl.textContent="Preparing..."; stopStream(); var camReady=await startCam(); if(!camReady){ dl.textContent="Please select a video file"; try{ file.click(); }catch(e){} return; } await waitForDetectorReady(); await waitStablePose(1200); refCap.click(); await autoPickPresetAndDrill(); recStart.click(); startDrill(); dl.textContent="Analyzing..."; var watcher=setInterval(function(){ if(!inDrill){ clearInterval(watcher); if(mediaRec && mediaRec.state!=="inactive") mediaRec.stop(); setTimeout(function(){ reportBtn.click(); csvBtn.click(); },300); setTimeout(function(){ savePngAuto(); },600); note("One-click analysis complete"); } },500); } oneBtn.onclick=function(){ oneClickFlow(); }; cmpBtn.onclick=function(){ cmpOn=!cmpOn; cmpWrap.style.display=cmpOn?"grid":"none"; canvas.style.display=cmpOn?"none":"block"; cmpBtn.textContent=cmpOn?t(currentLang,"compare_off"):t(currentLang,"compare_view"); }; function stopAll(){ cancelAnimationFrame(anim); stopStream(); try{ if(ch && ch.destroy) ch.destroy(); }catch(e){} } window.startApp=function(){ note("Start webcam or choose a video file"); return {stop:stopAll}; }; setTimeout(function(){ safeResize(); },120); window.addEventListener("resize", safeResize, {passive:true}); }); </script> </body> </html>

'+Practical software for daily life' 카테고리의 다른 글

Script & Content Language Assistant — Global Creator Edition (1)	2026.02.23
Global Finance Block Puzzle (2)	2026.02.23
PrintFlow Studio (2)	2026.02.21
OCR + Spreadsheet Array Tools (3)	2026.02.21
Mangtae Madam — AI Voice Fraud Guard (2)	2026.02.20

Global Sports Pose Coach | Real-Time Form Comparison & Training Assistant

'+Practical software for daily life' 카테고리의 다른 글

관련글

티스토리툴바