Update holistic.js

holistic.js

@@ -1,22 +1,24 @@
 import DeviceDetector from "https://cdn.skypack.dev/[email protected]";
-// 用法: testSupport({client?: string, os?: string}[])
-// Client 和 os 是正则表达式。
-// 参见: https://cdn.jsdelivr.net/npm/[email protected]/README.md
-// 了解 client 和 os 的合法值
-// 导入必要的库
+// 사용 방법: testSupport({client?: string, os?: string}[])
+// client와 os는 정규 표현식입니다.
+// 참고: https://cdn.jsdelivr.net/npm/[email protected]/README.md
+// client와 os의 유효 값 확인
 
-// 初始化速度和加速度图表
+// 필요한 라이브러리 임포트
+
+// 속도와 가속도 차트를 초기화
 let speedChart, accelerationChart;
 let previousPoseData = null;
 let lastTimestamp = 0;
+
 testSupport([
     { client: 'Chrome' },
 ]);
 
-// 图表相关的常量配置
+// 차트 관련 상수 설정
 const CHART_CONFIG = {
     maxDataPoints: 50,
-    updateInterval: 100, // 图表更新间隔(ms)
+    updateInterval: 100, // 차트 업데이트 간격(ms)
     colors: {
         speed: {
             primary: 'rgba(75, 192, 192, 1)',
@@ -29,14 +31,14 @@ const CHART_CONFIG = {
     }
 };
 
-// 初始化图表
+// 차트 초기화
 function initCharts() {
-    // 创建图表容器
+    // 차트를 담을 컨테이너 생성
     const chartsContainer = document.createElement('div');
     chartsContainer.className = 'charts-container';
     document.querySelector('.container').appendChild(chartsContainer);
 
-    // 速度图表容器
+    // 속도 차트 컨테이너
     const speedChartContainer = document.createElement('div');
     speedChartContainer.className = 'chart-card';
     const speedCanvas = document.createElement('canvas');
@@ -44,7 +46,7 @@ function initCharts() {
     speedChartContainer.appendChild(speedCanvas);
     chartsContainer.appendChild(speedChartContainer);
 
-    // 加速度图表容器
+    // 가속도 차트 컨테이너
     const accelerationChartContainer = document.createElement('div');
     accelerationChartContainer.className = 'chart-card';
     const accelerationCanvas = document.createElement('canvas');
@@ -52,13 +54,13 @@ function initCharts() {
     accelerationChartContainer.appendChild(accelerationCanvas);
     chartsContainer.appendChild(accelerationChartContainer);
 
-    // 速度图表配置
+    // 속도 차트 설정
     speedChart = new Chart(speedCanvas.getContext('2d'), {
         type: 'line',
         data: {
             labels: [],
             datasets: [{
-                label: '运动速度 (像素/秒)',
+                label: '운동 속도 (픽셀/초)',
                 data: [],
                 borderColor: CHART_CONFIG.colors.speed.primary,
                 backgroundColor: CHART_CONFIG.colors.speed.background,
@@ -129,13 +131,13 @@ function initCharts() {
         }
     });
 
-    // 加速度图表配置
+    // 가속도 차트 설정
     accelerationChart = new Chart(accelerationCanvas.getContext('2d'), {
         type: 'line',
         data: {
             labels: [],
             datasets: [{
-                label: '加速度 (像素/秒²)',
+                label: '가속도 (픽셀/초²)',
                 data: [],
                 borderColor: CHART_CONFIG.colors.acceleration.primary,
                 backgroundColor: CHART_CONFIG.colors.acceleration.background,
@@ -206,21 +208,21 @@ function initCharts() {
         }
     });
 
-    // 添加响应式处理
+    // 반응형 처리
     window.addEventListener('resize', () => {
         speedChart.resize();
         accelerationChart.resize();
     });
 }
 
-// 计算姿态变化的速度和加速度
+// 자세 변화의 속도와 가속도를 계산
 function calculateMotionMetrics(results, timestamp) {
-    // 基本验证
+    // 기본 검증
     if (!results || !results.poseLandmarks || !Array.isArray(results.poseLandmarks)) {
         return { speed: 0, acceleration: 0 };
     }
 
-    // 初始化状态
+    // 초기 상태
     if (!previousPoseData || !previousPoseData.poseLandmarks) {
         previousPoseData = {
             poseLandmarks: [...results.poseLandmarks]
@@ -229,73 +231,75 @@ function calculateMotionMetrics(results, timestamp) {
         return { speed: 0, acceleration: 0 };
     }
 
-    const deltaTime = (timestamp - lastTimestamp) / 1000; // 转换为秒
+    const deltaTime = (timestamp - lastTimestamp) / 1000; // 초 단위로 변환
     if (deltaTime === 0) {
         return { speed: 0, acceleration: 0 };
     }
 
-    // 计算关键点的平均位移
+    // 키포인트 평균 이동거리 계산
     let totalDisplacement = 0;
     let validPoints = 0;
     
     try {
-        // 只使用有效的关键点进行计算
+        // 유효한 키포인트만 사용
         results.poseLandmarks.forEach((landmark, index) => {
             const prevLandmark = previousPoseData.poseLandmarks[index];
             
-            // 确保当前和前一帧的关键点都存在且有效
-            if (landmark && prevLandmark && 
+            if (
+                landmark && prevLandmark &&
                 typeof landmark.x === 'number' && 
                 typeof landmark.y === 'number' &&
                 typeof prevLandmark.x === 'number' && 
                 typeof prevLandmark.y === 'number' &&
-                // 可选：检查可见性阈值
+                // 선택 사항: 가시성(visibility) 값이 일정 기준 이상일 때만
                 (!landmark.visibility || landmark.visibility > 0.5) &&
-                (!prevLandmark.visibility || prevLandmark.visibility > 0.5)) {
-                
+                (!prevLandmark.visibility || prevLandmark.visibility > 0.5)
+            ) {
                 const dx = landmark.x - prevLandmark.x;
                 const dy = landmark.y - prevLandmark.y;
                 const displacement = Math.sqrt(dx * dx + dy * dy);
                 
-                // 过滤掉异常大的位移
-                if (displacement < 1.0) { // 根据需要调整阈值
+                // 비정상적으로 큰 이동 거리는 필터링
+                if (displacement < 1.0) { 
                     totalDisplacement += displacement;
                     validPoints++;
                 }
             }
         });
     } catch (error) {
-        console.warn('Error calculating displacement:', error);
+        console.warn('이동 거리 계산 중 오류:', error);
         return { speed: 0, acceleration: 0 };
     }
 
-    // 如果没有有效点，返回零值
+    // 유효 포인트가 없다면 0 반환
     if (validPoints === 0) {
         return { speed: 0, acceleration: 0 };
     }
 
-    // 计算平均位移和速度
+    // 평균 이동거리 및 속도 계산
     const averageDisplacement = totalDisplacement / validPoints;
     const currentSpeed = averageDisplacement / deltaTime;
 
-    // 获取上一次的速度，如果不存在则使用0
+    // 이전 속도가 없으면 0
     let previousSpeed = 0;
     try {
-        previousSpeed = speedChart.data.datasets[0].data[speedChart.data.datasets[0].data.length - 1] || 0;
+        previousSpeed = speedChart.data.datasets[0].data[
+            speedChart.data.datasets[0].data.length - 1
+        ] || 0;
     } catch (error) {
-        console.warn('Error accessing previous speed:', error);
+        console.warn('이전 속도 접근 중 오류:', error);
     }
 
-    // 计算加速度
+    // 가속도 계산
     const acceleration = (currentSpeed - previousSpeed) / deltaTime;
 
-    // 更新先前数据用于下一帧计算
+    // 다음 프레임 계산을 위해 이전 데이터 업데이트
     previousPoseData = {
         poseLandmarks: [...results.poseLandmarks]
     };
     lastTimestamp = timestamp;
 
-    // 添加一些基本的数值验证
+    // 값 검증 및 제한
     const metrics = {
         speed: isFinite(currentSpeed) ? Math.min(Math.max(currentSpeed, 0), 1000) : 0,
         acceleration: isFinite(acceleration) ? Math.min(Math.max(acceleration, -1000), 1000) : 0
@@ -304,31 +308,31 @@ function calculateMotionMetrics(results, timestamp) {
     return metrics;
 }
 
-// 更新图表数据的函数也需要添加错误处理
+// 차트 데이터를 업데이트하는 함수 (오류 처리 포함)
 function updateCharts(metrics) {
     if (!metrics || typeof metrics.speed !== 'number' || typeof metrics.acceleration !== 'number') {
-        console.warn('Invalid metrics data:', metrics);
+        console.warn('잘못된 metrics 데이터:', metrics);
         return;
     }
 
     try {
-        const timestamp = new Date().toLocaleTimeString('zh-CN', { 
+        const timestamp = new Date().toLocaleTimeString('ko-KR', { 
             hour: '2-digit', 
             minute: '2-digit', 
             second: '2-digit' 
         });
 
-        // 检查图表对象是否存在且正确初始化
+        // 차트 객체가 제대로 초기화되었는지 확인
         if (!speedChart || !speedChart.data || !speedChart.data.labels) {
-            console.warn('Speed chart not properly initialized');
+            console.warn('속도 차트가 정상적으로 초기화되지 않았습니다.');
             return;
         }
         if (!accelerationChart || !accelerationChart.data || !accelerationChart.data.labels) {
-            console.warn('Acceleration chart not properly initialized');
+            console.warn('가속도 차트가 정상적으로 초기화되지 않았습니다.');
             return;
         }
 
-        // 更新速度图表
+        // 속도 차트 업데이트
         speedChart.data.labels.push(timestamp);
         speedChart.data.datasets[0].data.push(metrics.speed);
         if (speedChart.data.labels.length > CHART_CONFIG.maxDataPoints) {
@@ -336,7 +340,7 @@ function updateCharts(metrics) {
             speedChart.data.datasets[0].data.shift();
         }
 
-        // 更新加速度图表
+        // 가속도 차트 업데이트
         accelerationChart.data.labels.push(timestamp);
         accelerationChart.data.datasets[0].data.push(metrics.acceleration);
         if (accelerationChart.data.labels.length > CHART_CONFIG.maxDataPoints) {
@@ -344,21 +348,20 @@ function updateCharts(metrics) {
             accelerationChart.data.datasets[0].data.shift();
         }
 
-        // 使用 requestAnimationFrame 优化图表更新
+        // requestAnimationFrame을 사용해 차트 업데이트 최적화
         requestAnimationFrame(() => {
             try {
                 speedChart.update('none');
                 accelerationChart.update('none');
             } catch (error) {
-                console.warn('Error updating charts:', error);
+                console.warn('차트 업데이트 중 오류:', error);
             }
         });
     } catch (error) {
-        console.warn('Error in updateCharts:', error);
+        console.warn('updateCharts에서 오류 발생:', error);
     }
 }
 
-
 function testSupport(supportedDevices) {
     const deviceDetector = new DeviceDetector();
     const detectedDevice = deviceDetector.parse(navigator.userAgent);
@@ -380,8 +383,8 @@ function testSupport(supportedDevices) {
         break;
     }
     if (!isSupported) {
-        alert(`此演示在 ${detectedDevice.client.name}/${detectedDevice.os.name} 上运行时 ` +
-            `目前不能很好地支持，继续使用需自担风险。`);
+        alert(`이 데모는 ${detectedDevice.client.name}/${detectedDevice.os.name} 에서 실행될 때 ` +
+              `완전히 지원되지 않습니다. 계속 사용할 경우 본인 책임 하에 진행하시기 바랍니다.`);
     }
 }
 
@@ -393,17 +396,16 @@ const config = { locateFile: (file) => {
             `${mpHolistic.VERSION}/${file}`;
     } };
 
-// 我们的输入帧将来自这里。
+// 입력 프레임은 여기서 가져옵니다.
 const videoElement = document.getElementsByClassName('input_video')[0];
 const canvasElement = document.getElementsByClassName('output_canvas')[0];
 const controlsElement = document.getElementsByClassName('control-panel')[0];
 const canvasCtx = canvasElement.getContext('2d');
 
-// 我们稍后会将这个添加到控制面板中，但我们会在这里保存它，
-// 以便每次图形运行时都可以调用 tick()。
+// 이후 tick()이 호출될 때마다 참조할 FPS 컨트롤
 const fpsControl = new controls.FPS();
 
-// 优化：在隐藏动画完成后关闭动画旋转器。
+// 로딩 스피너를 숨기는 최적화
 const spinner = document.querySelector('.loading');
 spinner.ontransitionend = () => {
     spinner.style.display = 'none';
@@ -417,7 +419,10 @@ function removeElements(landmarks, elements) {
 
 function removeLandmarks(results) {
     if (results.poseLandmarks) {
-        removeElements(results.poseLandmarks, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 16, 17, 18, 19, 20, 21, 22]);
+        removeElements(results.poseLandmarks, [
+            0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
+            15, 16, 17, 18, 19, 20, 21, 22
+        ]);
     }
 }
 
@@ -441,25 +446,27 @@ function connect(ctx, connectors) {
 
 let activeEffect = 'mask';
 
-    
 function onResults(results) {
-    // 隐藏旋转器
+    // 로딩 스피너 숨기기
     document.body.classList.add('loaded');
 
-    // 移除我们不想绘制的关键点
+    // 그릴 필요 없는 랜드마크 제거
     removeLandmarks(results);
 
-    // 更新帧率
+    // FPS 업데이트
     fpsControl.tick();
 
-    // 绘制叠加层
+    // 캔버스에 그리기
     canvasCtx.save();
     canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
 
     if (results.segmentationMask) {
-        canvasCtx.drawImage(results.segmentationMask, 0, 0, canvasElement.width, canvasElement.height);
+        canvasCtx.drawImage(
+            results.segmentationMask,
+            0, 0, canvasElement.width, canvasElement.height
+        );
 
-        // 仅覆盖现有像素
+        // 기존 픽셀만 덮어쓰기
         if (activeEffect === 'mask' || activeEffect === 'both') {
             canvasCtx.globalCompositeOperation = 'source-in';
             canvasCtx.fillStyle = '#00FF007F';
@@ -470,7 +477,7 @@ function onResults(results) {
             canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);
         }
 
-        // 仅覆盖缺失的像素
+        // 누락된 픽셀만 덮어쓰기
         canvasCtx.globalCompositeOperation = 'destination-atop';
         canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
         canvasCtx.globalCompositeOperation = 'source-over';
@@ -478,17 +485,17 @@ function onResults(results) {
         canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
     }
 
-    // 计算并更新动作指标
+    // 동작 지표 계산 후 차트 업데이트
     const metrics = calculateMotionMetrics(results, performance.now());
     updateCharts(metrics);
 
-    // 添加安全检查
+    // 안전 검사
     if (!results.poseLandmarks || !mpHolistic.POSE_LANDMARKS) {
         canvasCtx.restore();
         return;
     }
 
-    // 连接肘部到手部
+    // 팔꿈치에서 손까지 연결
     canvasCtx.lineWidth = 5;
     if (results.poseLandmarks) {
         if (results.rightHandLandmarks && results.poseLandmarks[mpHolistic.POSE_LANDMARKS.RIGHT_ELBOW]) {
@@ -507,38 +514,54 @@ function onResults(results) {
         }
     }
 
-    // 绘制姿态连接点
+    // 전신 자세 연결
     if (results.poseLandmarks && mpHolistic.POSE_CONNECTIONS) {
-        drawingUtils.drawConnectors(canvasCtx, results.poseLandmarks, mpHolistic.POSE_CONNECTIONS, { color: 'white' });
+        drawingUtils.drawConnectors(
+            canvasCtx,
+            results.poseLandmarks,
+            mpHolistic.POSE_CONNECTIONS,
+            { color: 'white' }
+        );
     }
 
-    // 绘制左侧姿态关键点
+    // 왼쪽 자세 랜드마크
     if (results.poseLandmarks && mpHolistic.POSE_LANDMARKS_LEFT) {
         const leftLandmarks = Object.values(mpHolistic.POSE_LANDMARKS_LEFT)
             .map(index => results.poseLandmarks[index])
             .filter(landmark => landmark !== undefined);
         
         if (leftLandmarks.length > 0) {
-            drawingUtils.drawLandmarks(canvasCtx, leftLandmarks, 
-                { visibilityMin: 0.65, color: 'white', fillColor: 'rgb(255,138,0)' });
+            drawingUtils.drawLandmarks(canvasCtx, leftLandmarks, {
+                visibilityMin: 0.65,
+                color: 'white',
+                fillColor: 'rgb(255,138,0)'
+            });
         }
     }
 
-    // 绘制右侧姿态关键点
+    // 오른쪽 자세 랜드마크
     if (results.poseLandmarks && mpHolistic.POSE_LANDMARKS_RIGHT) {
         const rightLandmarks = Object.values(mpHolistic.POSE_LANDMARKS_RIGHT)
             .map(index => results.poseLandmarks[index])
             .filter(landmark => landmark !== undefined);
         
         if (rightLandmarks.length > 0) {
-            drawingUtils.drawLandmarks(canvasCtx, rightLandmarks,
-                { visibilityMin: 0.65, color: 'white', fillColor: 'rgb(0,217,231)' });
+            drawingUtils.drawLandmarks(canvasCtx, rightLandmarks, {
+                visibilityMin: 0.65,
+                color: 'white',
+                fillColor: 'rgb(0,217,231)'
+            });
         }
     }
 
-    // 绘制手部
+    // 손 랜드마크
     if (results.rightHandLandmarks && mpHolistic.HAND_CONNECTIONS) {
-        drawingUtils.drawConnectors(canvasCtx, results.rightHandLandmarks, mpHolistic.HAND_CONNECTIONS, { color: 'white' });
+        drawingUtils.drawConnectors(
+            canvasCtx,
+            results.rightHandLandmarks,
+            mpHolistic.HAND_CONNECTIONS,
+            { color: 'white' }
+        );
         drawingUtils.drawLandmarks(canvasCtx, results.rightHandLandmarks, {
             color: 'white',
             fillColor: 'rgb(0,217,231)',
@@ -550,7 +573,12 @@ function onResults(results) {
     }
 
     if (results.leftHandLandmarks && mpHolistic.HAND_CONNECTIONS) {
-        drawingUtils.drawConnectors(canvasCtx, results.leftHandLandmarks, mpHolistic.HAND_CONNECTIONS, { color: 'white' });
+        drawingUtils.drawConnectors(
+            canvasCtx,
+            results.leftHandLandmarks,
+            mpHolistic.HAND_CONNECTIONS,
+            { color: 'white' }
+        );
         drawingUtils.drawLandmarks(canvasCtx, results.leftHandLandmarks, {
             color: 'white',
             fillColor: 'rgb(255,138,0)',
@@ -561,45 +589,73 @@ function onResults(results) {
         });
     }
 
-    // 绘制面部
+    // 얼굴 랜드마크
     if (results.faceLandmarks && mpHolistic.FACEMESH_TESSELATION) {
-        drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_TESSELATION, 
-            { color: '#C0C0C070', lineWidth: 1 });
-        
+        drawingUtils.drawConnectors(
+            canvasCtx,
+            results.faceLandmarks,
+            mpHolistic.FACEMESH_TESSELATION,
+            { color: '#C0C0C070', lineWidth: 1 }
+        );
         if (mpHolistic.FACEMESH_RIGHT_EYE) {
-            drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_RIGHT_EYE, 
-                { color: 'rgb(0,217,231)' });
+            drawingUtils.drawConnectors(
+                canvasCtx,
+                results.faceLandmarks,
+                mpHolistic.FACEMESH_RIGHT_EYE,
+                { color: 'rgb(0,217,231)' }
+            );
         }
         if (mpHolistic.FACEMESH_RIGHT_EYEBROW) {
-            drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_RIGHT_EYEBROW, 
-                { color: 'rgb(0,217,231)' });
+            drawingUtils.drawConnectors(
+                canvasCtx,
+                results.faceLandmarks,
+                mpHolistic.FACEMESH_RIGHT_EYEBROW,
+                { color: 'rgb(0,217,231)' }
+            );
         }
         if (mpHolistic.FACEMESH_LEFT_EYE) {
-            drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_LEFT_EYE, 
-                { color: 'rgb(255,138,0)' });
+            drawingUtils.drawConnectors(
+                canvasCtx,
+                results.faceLandmarks,
+                mpHolistic.FACEMESH_LEFT_EYE,
+                { color: 'rgb(255,138,0)' }
+            );
         }
         if (mpHolistic.FACEMESH_LEFT_EYEBROW) {
-            drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_LEFT_EYEBROW, 
-                { color: 'rgb(255,138,0)' });
+            drawingUtils.drawConnectors(
+                canvasCtx,
+                results.faceLandmarks,
+                mpHolistic.FACEMESH_LEFT_EYEBROW,
+                { color: 'rgb(255,138,0)' }
+            );
         }
         if (mpHolistic.FACEMESH_FACE_OVAL) {
-            drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_FACE_OVAL, 
-                { color: '#E0E0E0', lineWidth: 5 });
+            drawingUtils.drawConnectors(
+                canvasCtx,
+                results.faceLandmarks,
+                mpHolistic.FACEMESH_FACE_OVAL,
+                { color: '#E0E0E0', lineWidth: 5 }
+            );
         }
         if (mpHolistic.FACEMESH_LIPS) {
-            drawingUtils.drawConnectors(canvasCtx, results.faceLandmarks, mpHolistic.FACEMESH_LIPS, 
-                { color: '#E0E0E0', lineWidth: 5 });
+            drawingUtils.drawConnectors(
+                canvasCtx,
+                results.faceLandmarks,
+                mpHolistic.FACEMESH_LIPS,
+                { color: '#E0E0E0', lineWidth: 5 }
+            );
         }
     }
 
     canvasCtx.restore();
 }
-// 视频上传处理
+
+// 영상 업로드 처리
 function handleVideoUpload(file) {
-    // 创建视频 URL
+    // 비디오 URL 생성
     const videoUrl = URL.createObjectURL(file);
     
-    // 重置图表数据
+    // 차트 데이터 초기화
     speedChart.data.labels = [];
     speedChart.data.datasets[0].data = [];
     accelerationChart.data.labels = [];
@@ -607,15 +663,15 @@ function handleVideoUpload(file) {
     previousPoseData = null;
     lastTimestamp = 0;
 
-    // 重置姿态检测
+    // 자세 감지 리셋
     holistic.reset();
 
-    // 更新视频源
+    // 비디오 소스 업데이트
     videoElement.src = videoUrl;
     
-    // 设置视频加载完成后的处理
+    // 비디오 로드 완료 후 처리
     videoElement.onloadedmetadata = () => {
-        // 调整画布大小以匹配视频尺寸
+        // 비디오 비율에 맞춰 캔버스 사이즈 조정
         const aspect = videoElement.videoHeight / videoElement.videoWidth;
         let width, height;
         if (window.innerWidth > window.innerHeight) {
@@ -628,7 +684,7 @@ function handleVideoUpload(file) {
         canvasElement.width = width;
         canvasElement.height = height;
 
-        // 创建用于视频处理的动画帧
+        // 영상을 처리하기 위한 animation frame 생성
         let animationId;
         
         async function processFrame() {
@@ -636,24 +692,21 @@ function handleVideoUpload(file) {
                 cancelAnimationFrame(animationId);
                 return;
             }
-
-            // 发送当前帧到姿态检测
+            // 현재 프레임을 자세 감지에 전송
             await holistic.send({
                 image: videoElement
             });
-
-            // 继续处理下一帧
             animationId = requestAnimationFrame(processFrame);
         }
 
-        // 视频播放事件处理
+        // 비디오 재생 처리
         videoElement.onplay = () => {
             processFrame();
         };
 
-        // 添加视频控制按钮事件监听
+        // 재생/일시정지 버튼
         const playPauseBtn = document.createElement('button');
-        playPauseBtn.textContent = '播放/暂停';
+        playPauseBtn.textContent = '재생/일시정지';
         playPauseBtn.className = 'control-button';
         playPauseBtn.onclick = () => {
             if (videoElement.paused) {
@@ -663,8 +716,9 @@ function handleVideoUpload(file) {
             }
         };
 
+        // 다시 시작 버튼
         const restartBtn = document.createElement('button');
-        restartBtn.textContent = '重新开始';
+        restartBtn.textContent = '처음부터 재생';
         restartBtn.className = 'control-button';
         restartBtn.onclick = () => {
             videoElement.currentTime = 0;
@@ -673,25 +727,25 @@ function handleVideoUpload(file) {
             }
         };
 
-        // 添加控制按钮到界面
+        // 버튼을 화면에 추가
         const controlsContainer = document.createElement('div');
         controlsContainer.className = 'video-controls';
         controlsContainer.appendChild(playPauseBtn);
         controlsContainer.appendChild(restartBtn);
         
-        // 找到合适的位置插入控制按钮
+        // 적절한 위치에 버튼 삽입
         const container = document.querySelector('.container') || document.body;
         container.appendChild(controlsContainer);
     };
 
-    // 添加错误处理
+    // 에러 처리
     videoElement.onerror = () => {
-        console.error('视频加载失败');
-        alert('视频加载失败，请尝试其他视频文件');
+        console.error('비디오 로드 실패');
+        alert('비디오 로드에 실패했습니다. 다른 비디오 파일을 시도해보세요.');
     };
 }
 
-// 添加一些基本的样式
+// 일부 기본 스타일 추가
 const style = document.createElement('style');
 style.textContent = `
     .video-controls {
@@ -723,81 +777,81 @@ document.head.appendChild(style);
 const holistic = new mpHolistic.Holistic(config);
 holistic.onResults(onResults);
 
-// 呈现一个控制面板，用户可以通过它操作解决方案选项。
+// 컨트롤 패널을 그려서 사용자에게 옵션 제어 제공
 new controls
     .ControlPanel(controlsElement, {
-    selfieMode: true,
-    modelComplexity: 1,
-    smoothLandmarks: true,
-    enableSegmentation: false,
-    smoothSegmentation: true,
-    minDetectionConfidence: 0.5,
-    minTrackingConfidence: 0.5,
-    effect: 'background',
-})
+        selfieMode: true,
+        modelComplexity: 1,
+        smoothLandmarks: true,
+        enableSegmentation: false,
+        smoothSegmentation: true,
+        minDetectionConfidence: 0.5,
+        minTrackingConfidence: 0.5,
+        effect: 'background',
+    })
     .add([
-    new controls.StaticText({ title: 'MediaPipe 全身姿态检测' }),
-    fpsControl,
-    new controls.Toggle({ title: '自拍模式', field: 'selfieMode' }),
-    new controls.SourcePicker({
-        onSourceChanged: () => {
-            // 重置，因为在源更改之间重置时，姿势会给出更好的结果。
-            holistic.reset();
-        },
-        onFrame: async (input, size) => {
-            const aspect = size.height / size.width;
-            let width, height;
-            if (window.innerWidth > window.innerHeight) {
-                height = window.innerHeight;
-                width = height / aspect;
-            }
-            else {
-                width = window.innerWidth;
-                height = width * aspect;
-            }
-            canvasElement.width = width;
-            canvasElement.height = height;
-            await holistic.send({ image: input });
-        },
-    }),
-    new controls.Slider({
-        title: '模型复杂度',
-        field: 'modelComplexity',
-        discrete: ['轻量', '完整', '重度'],
-    }),
-    new controls.Toggle({ title: '平滑关键点', field: 'smoothLandmarks' }),
-    new controls.Toggle({ title: '启用分割', field: 'enableSegmentation' }),
-    new controls.Toggle({ title: '平滑分割', field: 'smoothSegmentation' }),
-    new controls.Slider({
-        title: '最小检测置信度',
-        field: 'minDetectionConfidence',
-        range: [0, 1],
-        step: 0.01
-    }),
-    new controls.Slider({
-        title: '最小跟踪置信度',
-        field: 'minTrackingConfidence',
-        range: [0, 1],
-        step: 0.01
-    }),
-    new controls.Slider({
-        title: '效果',
-        field: 'effect',
-        discrete: { 'background': '背景', 'mask': '前景' },
-    }),
-])
+        new controls.StaticText({ title: 'MediaPipe 전신 자세 감지' }),
+        fpsControl,
+        new controls.Toggle({ title: '셀피 모드', field: 'selfieMode' }),
+        new controls.SourcePicker({
+            onSourceChanged: () => {
+                // 소스 변경 시 리셋. 리셋 후 자세를 더 잘 감지할 수 있음
+                holistic.reset();
+            },
+            onFrame: async (input, size) => {
+                const aspect = size.height / size.width;
+                let width, height;
+                if (window.innerWidth > window.innerHeight) {
+                    height = window.innerHeight;
+                    width = height / aspect;
+                } else {
+                    width = window.innerWidth;
+                    height = width * aspect;
+                }
+                canvasElement.width = width;
+                canvasElement.height = height;
+                await holistic.send({ image: input });
+            },
+        }),
+        new controls.Slider({
+            title: '모델 복잡도',
+            field: 'modelComplexity',
+            discrete: ['경량', '완전', '고급'],
+        }),
+        new controls.Toggle({ title: '랜드마크 평활화', field: 'smoothLandmarks' }),
+        new controls.Toggle({ title: '세그먼테이션 사용', field: 'enableSegmentation' }),
+        new controls.Toggle({ title: '세그먼테이션 평활화', field: 'smoothSegmentation' }),
+        new controls.Slider({
+            title: '최소 감지 신뢰도',
+            field: 'minDetectionConfidence',
+            range: [0, 1],
+            step: 0.01
+        }),
+        new controls.Slider({
+            title: '최소 추적 신뢰도',
+            field: 'minTrackingConfidence',
+            range: [0, 1],
+            step: 0.01
+        }),
+        new controls.Slider({
+            title: '효과',
+            field: 'effect',
+            discrete: { 'background': '배경', 'mask': '전경' },
+        }),
+    ])
     .on(x => {
-    const options = x;
-    videoElement.classList.toggle('selfie', options.selfieMode);
-    activeEffect = x['effect'];
-    holistic.setOptions(options);
-});
-// 初始化函数
+        const options = x;
+        videoElement.classList.toggle('selfie', options.selfieMode);
+        activeEffect = x['effect'];
+        holistic.setOptions(options);
+    });
+
+// 초기화 함수
 function initialize() {
-    // 初始化图表
+    // 차트 초기화
     initCharts();
 
-    // 设置视频上传处理
+    // 비디오 업로드 처리
     const videoUploadInput = document.querySelector('#video-upload');
     if (videoUploadInput) {
         videoUploadInput.addEventListener('change', (e) => {
@@ -807,17 +861,17 @@ function initialize() {
         });
     }
 
-    // 初始化姿态检测
+    // 자세 감지 초기화
     const holistic = new mpHolistic.Holistic(config);
     holistic.onResults(onResults);
 
-    // ... 保持其他原有的初始化逻辑 ...
+    // ... 기존 초기화 로직을 유지 ...
 }
 
-// 启动应用
+// 애플리케이션 시작
 window.addEventListener('load', initialize);
 
-// 保持原有的窗口大小调整逻辑
+// 창 크기 변경 처리
 window.addEventListener('resize', () => {
     const aspect = videoElement.videoHeight / videoElement.videoWidth;
     let width, height;
@@ -831,7 +885,7 @@ window.addEventListener('resize', () => {
     canvasElement.width = width;
     canvasElement.height = height;
     
-    // 重新调整图表大小
+    // 차트 크기 재조정
     speedChart.resize();
     accelerationChart.resize();
-});
+});