Spaces:

samlax12
/

hand

Running

App Files Files Community

samlax12 commited on Mar 13, 2025

Commit

a3aa6eb

verified ·

1 Parent(s): 6a1b44a

Update index.html

Browse files

Files changed (1) hide show

index.html +273 -169

index.html CHANGED Viewed

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <title>AR Nail Studio</title>
   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
@@ -15,7 +15,6 @@
       box-sizing: border-box;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     }
     body {
       background-color: #f8f8f8;
       overflow: hidden;
@@ -24,18 +23,22 @@
       height: 100%;
       touch-action: none;
     }
     .container {
       position: relative;
       width: 100%;
       height: 100%;
       overflow: hidden;
     }
     .input_video {
-      display: none;
     }
     .output_canvas {
       position: absolute;
       width: 100%;
@@ -44,7 +47,6 @@
       top: 0;
       object-fit: cover;
     }
     .controls-container {
       position: absolute;
       bottom: 0;
@@ -54,16 +56,13 @@
       background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
       z-index: 10;
     }
     .controls-content {
       max-width: 500px;
       margin: 0 auto;
     }
     .control-section {
       margin-bottom: 25px;
     }
     .section-title {
       color: white;
       font-size: 14px;
@@ -72,7 +71,6 @@
       letter-spacing: 0.5px;
       text-transform: uppercase;
     }
     .design-options {
       display: flex;
       overflow-x: auto;
@@ -80,11 +78,9 @@
       gap: 12px;
       scrollbar-width: none;
     }
     .design-options::-webkit-scrollbar {
       display: none;
     }
     .design-option {
       width: 60px;
       height: 60px;
@@ -95,25 +91,21 @@
       transition: all 0.2s ease;
       flex-shrink: 0;
     }
     .design-option.selected {
       border-color: #fff;
       transform: scale(1.05);
       box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
     }
     .slider-container {
       margin: 15px 0;
       color: white;
     }
     .slider-label {
       display: flex;
       justify-content: space-between;
       font-size: 12px;
       margin-bottom: 8px;
     }
     .slider {
       -webkit-appearance: none;
       appearance: none;
@@ -123,7 +115,6 @@
       border-radius: 2px;
       outline: none;
     }
     .slider::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;
@@ -134,24 +125,20 @@
       cursor: pointer;
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     }
     .toggle-section {
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
     .toggle-container {
       display: flex;
       align-items: center;
     }
     .toggle-label {
       color: white;
       font-size: 14px;
       margin-right: 10px;
     }
     .toggle {
       position: relative;
       width: 46px;
@@ -160,11 +147,9 @@
       background-color: rgba(255, 255, 255, 0.3);
       transition: all 0.3s ease;
     }
     .toggle.active {
       background-color: #3a86ff;
     }
     .toggle-handle {
       position: absolute;
       top: 2px;
@@ -176,11 +161,9 @@
       transition: all 0.3s ease;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
     }
     .toggle.active .toggle-handle {
       left: 24px;
     }
     .snap-button {
       position: absolute;
       bottom: 240px;
@@ -198,11 +181,9 @@
       border: none;
       outline: none;
     }
     .snap-button:active {
       transform: translateX(-50%) scale(0.95);
     }
     .snap-button::after {
       content: '';
       width: 52px;
@@ -210,7 +191,6 @@
       border-radius: 50%;
       border: 2px solid #f8f8f8;
     }
     .camera-flip {
       position: absolute;
       top: 20px;
@@ -227,7 +207,6 @@
       z-index: 20;
       font-size: 18px;
     }
     .loading-screen {
       position: fixed;
       top: 0;
@@ -242,7 +221,6 @@
       z-index: 9999;
       transition: opacity 0.5s ease;
     }
     .loading-spinner {
       width: 50px;
       height: 50px;
@@ -252,19 +230,16 @@
       animation: spin 1s linear infinite;
       margin-bottom: 20px;
     }
     .loading-text {
       color: white;
       font-size: 18px;
       font-weight: 500;
     }
     @keyframes spin {
       to {
         transform: rotate(360deg);
       }
     }
     .app-title {
       position: absolute;
       top: 20px;
@@ -280,20 +255,81 @@
       width: 100%;
       height: 100%;
     }
   </style>
 </head>
 <body>
   <div class="loading-screen">
     <div class="loading-spinner"></div>
-    <div class="loading-text">Loading AR Nail Studio...</div>
   </div>
   <div class="container">
     <video class="input_video" playsinline></video>
     <canvas class="output_canvas"></canvas>
-    <div class="app-title">AR Nail Studio</div>
     <button class="camera-flip">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -309,7 +345,7 @@
     <div class="controls-container">
       <div class="controls-content">
         <div class="control-section">
-          <div class="section-title">Nail Design</div>
           <div class="design-options">
             <div class="design-option selected" data-design="pink">
               <div class="color-block" style="background: linear-gradient(45deg, #ff9a9e, #fad0c4);"></div>
@@ -333,11 +369,11 @@
         </div>
         <div class="control-section">
-          <div class="section-title">Adjustments</div>
           <div class="slider-container">
             <div class="slider-label">
-              <span>Size</span>
               <span id="size-value">100%</span>
             </div>
             <input type="range" min="50" max="150" value="100" class="slider" id="size-slider">
@@ -345,7 +381,7 @@
           <div class="slider-container">
             <div class="slider-label">
-              <span>Length</span>
               <span id="length-value">100%</span>
             </div>
             <input type="range" min="80" max="200" value="100" class="slider" id="length-slider">
@@ -353,7 +389,7 @@
           <div class="slider-container">
             <div class="slider-label">
-              <span>Opacity</span>
               <span id="opacity-value">100%</span>
             </div>
             <input type="range" min="30" max="100" value="100" class="slider" id="opacity-slider">
@@ -362,14 +398,14 @@
         <div class="control-section toggle-section">
           <div class="toggle-container">
-            <span class="toggle-label">Realistic Shadows</span>
             <div class="toggle active" id="shadow-toggle">
               <div class="toggle-handle"></div>
             </div>
           </div>
           <div class="toggle-container">
-            <span class="toggle-label">Show Hand Lines</span>
             <div class="toggle" id="lines-toggle">
               <div class="toggle-handle"></div>
             </div>
@@ -380,7 +416,7 @@
   </div>
   <script>
-    // Define nail colors and their properties
     const nailDesigns = {
       pink: {
         color: 'linear-gradient(45deg, #ff9a9e, #fad0c4)',
@@ -407,31 +443,40 @@
         shadowColor: 'rgba(35, 37, 38, 0.5)'
       }
     };
-    // Hide loading screen when page is ready
-    document.addEventListener('DOMContentLoaded', function() {
-      document.querySelector('.loading-screen').style.opacity = 0;
-      setTimeout(() => {
-        document.querySelector('.loading-screen').style.display = 'none';
-      }, 500);
-    });
-    // Initialize variables
     let currentDesign = 'pink';
     let sizeScale = 1.0;
     let lengthScale = 1.0;
-    let opacity = 1.0; // Fixed variable name to avoid duplicate
     let showShadows = true;
     let showLines = false;
-    let facingMode = 'environment'; // 'user' = front camera, 'environment' = back camera
-    // Get UI elements
     const videoElement = document.getElementsByClassName('input_video')[0];
     const canvasElement = document.getElementsByClassName('output_canvas')[0];
     canvasElement.width = window.innerWidth;
     canvasElement.height = window.innerHeight;
     const canvasCtx = canvasElement.getContext('2d');
     const sizeSlider = document.getElementById('size-slider');
     const sizeValue = document.getElementById('size-value');
     const lengthSlider = document.getElementById('length-slider');
@@ -443,90 +488,44 @@
     const flipButton = document.querySelector('.camera-flip');
     const snapButton = document.querySelector('.snap-button');
     const designOptions = document.querySelectorAll('.design-option');
-    // Setup event listeners
-    sizeSlider.addEventListener('input', (e) => {
-      sizeScale = parseInt(e.target.value) / 100;
-      sizeValue.textContent = `${e.target.value}%`;
-    });
-    lengthSlider.addEventListener('input', (e) => {
-      lengthScale = parseInt(e.target.value) / 100;
-      lengthValue.textContent = `${e.target.value}%`;
-    });
-    opacitySlider.addEventListener('input', (e) => {
-      opacity = parseInt(e.target.value) / 100;
-      opacityValue.textContent = `${e.target.value}%`;
-    });
-    shadowToggle.addEventListener('click', () => {
-      shadowToggle.classList.toggle('active');
-      showShadows = shadowToggle.classList.contains('active');
-    });
-    linesToggle.addEventListener('click', () => {
-      linesToggle.classList.toggle('active');
-      showLines = linesToggle.classList.contains('active');
-    });
-    flipButton.addEventListener('click', () => {
-      facingMode = facingMode === 'user' ? 'environment' : 'user';
-      // Restart camera with new facingMode
-      camera.stop();
-      setupCamera();
-    });
-    designOptions.forEach(option => {
-      option.addEventListener('click', () => {
-        designOptions.forEach(opt => opt.classList.remove('selected'));
-        option.classList.add('selected');
-        currentDesign = option.getAttribute('data-design');
-      });
-    });
-    snapButton.addEventListener('click', () => {
-      const dataUrl = canvasElement.toDataURL('image/png');
-      // Create a temporary link element
-      const link = document.createElement('a');
-      link.href = dataUrl;
-      link.download = 'AR-Nail-Design.png';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      // Visual feedback for snapshot
-      snapButton.style.backgroundColor = '#3a86ff';
       setTimeout(() => {
-        snapButton.style.backgroundColor = 'white';
-      }, 300);
     });
-    // Function to apply nail design to a finger tip
     function applyNailDesign(ctx, fingerTip, fingerBase, design) {
-      // Extract coordinates
       const tipX = fingerTip.x * canvasElement.width;
       const tipY = fingerTip.y * canvasElement.height;
       const baseX = fingerBase.x * canvasElement.width;
       const baseY = fingerBase.y * canvasElement.height;
-      // Calculate nail parameters
       const fingerAngle = Math.atan2(tipY - baseY, tipX - baseX);
       const fingerLength = Math.sqrt(Math.pow(tipX - baseX, 2) + Math.pow(tipY - baseY, 2));
-      // Size of the nail (adjusted by slider)
       const nailWidth = fingerLength * 0.6 * sizeScale;
       const nailLength = fingerLength * 0.7 * lengthScale;
-      // Save context state
       ctx.save();
-      // Move to the finger tip and rotate
       ctx.translate(tipX, tipY);
       ctx.rotate(fingerAngle);
-      // Draw nail shadow if enabled
       if (showShadows) {
         ctx.save();
         ctx.shadowColor = nailDesigns[design].shadowColor;
@@ -540,15 +539,15 @@
         ctx.restore();
       }
-      // Draw nail shape (ellipse)
       ctx.beginPath();
       ctx.ellipse(0, 0, nailWidth/2, nailLength/2, 0, 0, Math.PI * 2);
       ctx.clip();
-      // Create gradient for the nail color
       const gradient = ctx.createLinearGradient(-nailWidth/2, -nailLength/2, nailWidth/2, nailLength/2);
-      // Parse gradient colors from the design
       const gradientStr = nailDesigns[design].color;
       const colorStart = gradientStr.substring(
         gradientStr.indexOf('(') + 1,
@@ -562,80 +561,185 @@
       gradient.addColorStop(0, colorStart);
       gradient.addColorStop(1, colorEnd);
-      // Draw the nail design with gradient
       ctx.globalAlpha = opacity;
       ctx.fillStyle = gradient;
       ctx.fillRect(-nailWidth/2, -nailLength/2, nailWidth, nailLength);
-      // Restore context
       ctx.restore();
     }
-    // MediaPipe Hands model callback
     function onResults(results) {
-      // Clear canvas and draw camera feed
       canvasCtx.save();
       canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
       canvasCtx.drawImage(
         results.image, 0, 0, canvasElement.width, canvasElement.height
       );
-      // Process hands
       if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
         for (const landmarks of results.multiHandLandmarks) {
-          // Draw hand skeleton if enabled
           if (showLines) {
             drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS,
                           {color: 'rgba(255, 255, 255, 0.5)', lineWidth: 2});
           }
-          // Apply nail designs to each fingertip
-          // Thumb
           applyNailDesign(canvasCtx, landmarks[4], landmarks[3], currentDesign);
-          // Index finger
           applyNailDesign(canvasCtx, landmarks[8], landmarks[7], currentDesign);
-          // Middle finger
           applyNailDesign(canvasCtx, landmarks[12], landmarks[11], currentDesign);
-          // Ring finger
           applyNailDesign(canvasCtx, landmarks[16], landmarks[15], currentDesign);
-          // Pinky
           applyNailDesign(canvasCtx, landmarks[20], landmarks[19], currentDesign);
         }
       }
       canvasCtx.restore();
     }
-    // Initialize MediaPipe Hands
-    const hands = new Hands({locateFile: (file) => {
-      return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
-    }});
-    hands.setOptions({
-      maxNumHands: 2,
-      modelComplexity: 1,
-      minDetectionConfidence: 0.5,
-      minTrackingConfidence: 0.5
     });
-    hands.onResults(onResults);
-    // Set up camera with appropriate facingMode
-    function setupCamera() {
-      const camera = new Camera(videoElement, {
-        onFrame: async () => {
-          await hands.send({image: videoElement});
-        },
-        width: 1280,
-        height: 720,
-        facingMode: facingMode
       });
-      camera.start();
-      return camera;
     }
-    // Initialize camera
-    let camera = setupCamera();
-    // Handle window resize
     window.addEventListener('resize', () => {
       canvasElement.width = window.innerWidth;
       canvasElement.height = window.innerHeight;

 <!DOCTYPE html>
+<html lang="zh-CN">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>AR美甲工作室</title>
   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
       box-sizing: border-box;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     }
     body {
       background-color: #f8f8f8;
       overflow: hidden;
       height: 100%;
       touch-action: none;
     }
     .container {
       position: relative;
       width: 100%;
       height: 100%;
       overflow: hidden;
     }
     .input_video {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      object-fit: cover;
+      opacity: 0;
+      pointer-events: none;
     }
     .output_canvas {
       position: absolute;
       width: 100%;
       top: 0;
       object-fit: cover;
     }
     .controls-container {
       position: absolute;
       bottom: 0;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
       z-index: 10;
     }
     .controls-content {
       max-width: 500px;
       margin: 0 auto;
     }
     .control-section {
       margin-bottom: 25px;
     }
     .section-title {
       color: white;
       font-size: 14px;
       letter-spacing: 0.5px;
       text-transform: uppercase;
     }
     .design-options {
       display: flex;
       overflow-x: auto;
       gap: 12px;
       scrollbar-width: none;
     }
     .design-options::-webkit-scrollbar {
       display: none;
     }
     .design-option {
       width: 60px;
       height: 60px;
       transition: all 0.2s ease;
       flex-shrink: 0;
     }
     .design-option.selected {
       border-color: #fff;
       transform: scale(1.05);
       box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
     }
     .slider-container {
       margin: 15px 0;
       color: white;
     }
     .slider-label {
       display: flex;
       justify-content: space-between;
       font-size: 12px;
       margin-bottom: 8px;
     }
     .slider {
       -webkit-appearance: none;
       appearance: none;
       border-radius: 2px;
       outline: none;
     }
     .slider::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;
       cursor: pointer;
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     }
     .toggle-section {
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
     .toggle-container {
       display: flex;
       align-items: center;
     }
     .toggle-label {
       color: white;
       font-size: 14px;
       margin-right: 10px;
     }
     .toggle {
       position: relative;
       width: 46px;
       background-color: rgba(255, 255, 255, 0.3);
       transition: all 0.3s ease;
     }
     .toggle.active {
       background-color: #3a86ff;
     }
     .toggle-handle {
       position: absolute;
       top: 2px;
       transition: all 0.3s ease;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
     }
     .toggle.active .toggle-handle {
       left: 24px;
     }
     .snap-button {
       position: absolute;
       bottom: 240px;
       border: none;
       outline: none;
     }
     .snap-button:active {
       transform: translateX(-50%) scale(0.95);
     }
     .snap-button::after {
       content: '';
       width: 52px;
       border-radius: 50%;
       border: 2px solid #f8f8f8;
     }
     .camera-flip {
       position: absolute;
       top: 20px;
       z-index: 20;
       font-size: 18px;
     }
     .loading-screen {
       position: fixed;
       top: 0;
       z-index: 9999;
       transition: opacity 0.5s ease;
     }
     .loading-spinner {
       width: 50px;
       height: 50px;
       animation: spin 1s linear infinite;
       margin-bottom: 20px;
     }
     .loading-text {
       color: white;
       font-size: 18px;
       font-weight: 500;
     }
     @keyframes spin {
       to {
         transform: rotate(360deg);
       }
     }
     .app-title {
       position: absolute;
       top: 20px;
       width: 100%;
       height: 100%;
     }
+    .camera-permission {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.8);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 9998;
+      color: white;
+      text-align: center;
+      padding: 20px;
+    }
+    .camera-permission h2 {
+      margin-bottom: 20px;
+      font-size: 24px;
+    }
+    .camera-permission p {
+      margin-bottom: 30px;
+      font-size: 16px;
+      max-width: 500px;
+    }
+    .allow-camera-btn {
+      background-color: #3a86ff;
+      color: white;
+      border: none;
+      padding: 12px 24px;
+      border-radius: 24px;
+      font-size: 16px;
+      font-weight: 500;
+      cursor: pointer;
+    }
+    .debug-info {
+      position: fixed;
+      top: 70px;
+      left: 20px;
+      color: white;
+      background-color: rgba(0,0,0,0.7);
+      padding: 10px;
+      border-radius: 5px;
+      font-size: 12px;
+      z-index: 100;
+      max-width: 300px;
+      display: none;
+    }
   </style>
 </head>
 <body>
   <div class="loading-screen">
     <div class="loading-spinner"></div>
+    <div class="loading-text">正在加载AR美甲工作室...</div>
+  </div>
+  <div class="camera-permission" id="cameraPermission">
+    <h2>需要摄像头权限</h2>
+    <p>AR美甲工作室需要使用您的摄像头来实时显示美甲效果。请点击下方按钮允许使用摄像头。</p>
+    <button class="allow-camera-btn" id="allowCameraBtn">允许使用摄像头</button>
   </div>
+  <div class="debug-info" id="debugInfo"></div>
   <div class="container">
     <video class="input_video" playsinline></video>
     <canvas class="output_canvas"></canvas>
+    <div class="app-title">AR美甲工作室</div>
     <button class="camera-flip">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
     <div class="controls-container">
       <div class="controls-content">
         <div class="control-section">
+          <div class="section-title">美甲设计</div>
           <div class="design-options">
             <div class="design-option selected" data-design="pink">
               <div class="color-block" style="background: linear-gradient(45deg, #ff9a9e, #fad0c4);"></div>
         </div>
         <div class="control-section">
+          <div class="section-title">调整</div>
           <div class="slider-container">
             <div class="slider-label">
+              <span>大小</span>
               <span id="size-value">100%</span>
             </div>
             <input type="range" min="50" max="150" value="100" class="slider" id="size-slider">
           <div class="slider-container">
             <div class="slider-label">
+              <span>长度</span>
               <span id="length-value">100%</span>
             </div>
             <input type="range" min="80" max="200" value="100" class="slider" id="length-slider">
           <div class="slider-container">
             <div class="slider-label">
+              <span>透明度</span>
               <span id="opacity-value">100%</span>
             </div>
             <input type="range" min="30" max="100" value="100" class="slider" id="opacity-slider">
         <div class="control-section toggle-section">
           <div class="toggle-container">
+            <span class="toggle-label">真实阴影</span>
             <div class="toggle active" id="shadow-toggle">
               <div class="toggle-handle"></div>
             </div>
           </div>
           <div class="toggle-container">
+            <span class="toggle-label">显示手部轮廓</span>
             <div class="toggle" id="lines-toggle">
               <div class="toggle-handle"></div>
             </div>
   </div>
   <script>
+    // 定义美甲颜色及其属性
     const nailDesigns = {
       pink: {
         color: 'linear-gradient(45deg, #ff9a9e, #fad0c4)',
         shadowColor: 'rgba(35, 37, 38, 0.5)'
       }
     };
+    // 初始化变量
     let currentDesign = 'pink';
     let sizeScale = 1.0;
     let lengthScale = 1.0;
+    let opacity = 1.0;
     let showShadows = true;
     let showLines = false;
+    let facingMode = 'environment'; // 'user' = 前置摄像头, 'environment' = 后置摄像头
+    let camera;
+    let cameraInitialized = false;
+    // 初始化MediaPipe Hands实例
+    let hands;
+    // 调试工具
+    const debugInfo = document.getElementById('debugInfo');
+    function showDebug(text) {
+      debugInfo.style.display = 'block';
+      debugInfo.textContent = text;
+    }
+    // 获取UI元素
     const videoElement = document.getElementsByClassName('input_video')[0];
     const canvasElement = document.getElementsByClassName('output_canvas')[0];
+    const cameraPermissionElement = document.getElementById('cameraPermission');
+    const allowCameraButton = document.getElementById('allowCameraBtn');
+    // 设置画布尺寸
     canvasElement.width = window.innerWidth;
     canvasElement.height = window.innerHeight;
     const canvasCtx = canvasElement.getContext('2d');
+    // 获取其他UI元素
     const sizeSlider = document.getElementById('size-slider');
     const sizeValue = document.getElementById('size-value');
     const lengthSlider = document.getElementById('length-slider');
     const flipButton = document.querySelector('.camera-flip');
     const snapButton = document.querySelector('.snap-button');
     const designOptions = document.querySelectorAll('.design-option');
+    // 隐藏加载屏幕当页面准备就绪
+    document.addEventListener('DOMContentLoaded', function() {
+      document.querySelector('.loading-screen').style.opacity = 0;
       setTimeout(() => {
+        document.querySelector('.loading-screen').style.display = 'none';
+      }, 500);
     });
+    // 摄像头权限按钮点击事件
+    allowCameraButton.addEventListener('click', () => {
+      initializeARApp();
+    });
+    // 为指尖应用美甲设计的函数
     function applyNailDesign(ctx, fingerTip, fingerBase, design) {
+      // 提取坐标
       const tipX = fingerTip.x * canvasElement.width;
       const tipY = fingerTip.y * canvasElement.height;
       const baseX = fingerBase.x * canvasElement.width;
       const baseY = fingerBase.y * canvasElement.height;
+      // 计算指甲参数
       const fingerAngle = Math.atan2(tipY - baseY, tipX - baseX);
       const fingerLength = Math.sqrt(Math.pow(tipX - baseX, 2) + Math.pow(tipY - baseY, 2));
+      // 指甲的大小（通过滑块调整）
       const nailWidth = fingerLength * 0.6 * sizeScale;
       const nailLength = fingerLength * 0.7 * lengthScale;
+      // 保存上下文状态
       ctx.save();
+      // 移动到指尖并旋转
       ctx.translate(tipX, tipY);
       ctx.rotate(fingerAngle);
+      // 如果启用，绘制指甲阴影
       if (showShadows) {
         ctx.save();
         ctx.shadowColor = nailDesigns[design].shadowColor;
         ctx.restore();
       }
+      // 绘制指甲形状（椭圆）
       ctx.beginPath();
       ctx.ellipse(0, 0, nailWidth/2, nailLength/2, 0, 0, Math.PI * 2);
       ctx.clip();
+      // 为指甲颜色创建渐变
       const gradient = ctx.createLinearGradient(-nailWidth/2, -nailLength/2, nailWidth/2, nailLength/2);
+      // 从设计解析渐变颜色
       const gradientStr = nailDesigns[design].color;
       const colorStart = gradientStr.substring(
         gradientStr.indexOf('(') + 1,
       gradient.addColorStop(0, colorStart);
       gradient.addColorStop(1, colorEnd);
+      // 使用渐变绘制指甲设计
       ctx.globalAlpha = opacity;
       ctx.fillStyle = gradient;
       ctx.fillRect(-nailWidth/2, -nailLength/2, nailWidth, nailLength);
+      // 恢复上下文
       ctx.restore();
     }
+    // MediaPipe Hands 模型回调
     function onResults(results) {
+      // 清除画布并绘制摄像头画面
       canvasCtx.save();
       canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
       canvasCtx.drawImage(
         results.image, 0, 0, canvasElement.width, canvasElement.height
       );
+      // 处理手部
       if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
         for (const landmarks of results.multiHandLandmarks) {
+          // 如果启用，绘制手部骨架
           if (showLines) {
             drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS,
                           {color: 'rgba(255, 255, 255, 0.5)', lineWidth: 2});
           }
+          // 为每个指尖应用美甲设计
+          // 拇指
           applyNailDesign(canvasCtx, landmarks[4], landmarks[3], currentDesign);
+          // 食指
           applyNailDesign(canvasCtx, landmarks[8], landmarks[7], currentDesign);
+          // 中指
           applyNailDesign(canvasCtx, landmarks[12], landmarks[11], currentDesign);
+          // 无名指
           applyNailDesign(canvasCtx, landmarks[16], landmarks[15], currentDesign);
+          // 小指
           applyNailDesign(canvasCtx, landmarks[20], landmarks[19], currentDesign);
         }
       }
       canvasCtx.restore();
     }
+    // 初始化AR应用
+    function initializeARApp() {
+      try {
+        cameraPermissionElement.style.display = 'none';
+        if (!cameraInitialized) {
+          showDebug("正在初始化手部跟踪...");
+          // 创建 MediaPipe Hands 实例
+          hands = new Hands({locateFile: (file) => {
+            return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
+          }});
+          hands.setOptions({
+            maxNumHands: 2,
+            modelComplexity: 1,
+            minDetectionConfidence: 0.5,
+            minTrackingConfidence: 0.5
+          });
+          hands.onResults(onResults);
+          // 设置摄像头
+          setupCamera();
+          cameraInitialized = true;
+          showDebug("手部跟踪已初始化");
+        }
+      } catch (error) {
+        showDebug("初始化失败: " + error.message);
+        console.error("初始化AR应用失败:", error);
+      }
+    }
+    // 设置事件监听器
+    sizeSlider.addEventListener('input', (e) => {
+      sizeScale = parseInt(e.target.value) / 100;
+      sizeValue.textContent = `${e.target.value}%`;
     });
+    lengthSlider.addEventListener('input', (e) => {
+      lengthScale = parseInt(e.target.value) / 100;
+      lengthValue.textContent = `${e.target.value}%`;
+    });
+    opacitySlider.addEventListener('input', (e) => {
+      opacity = parseInt(e.target.value) / 100;
+      opacityValue.textContent = `${e.target.value}%`;
+    });
+    shadowToggle.addEventListener('click', () => {
+      shadowToggle.classList.toggle('active');
+      showShadows = shadowToggle.classList.contains('active');
+    });
+    linesToggle.addEventListener('click', () => {
+      linesToggle.classList.toggle('active');
+      showLines = linesToggle.classList.contains('active');
+    });
+    flipButton.addEventListener('click', () => {
+      facingMode = facingMode === 'user' ? 'environment' : 'user';
+      // 使用新的facingMode重启摄像头
+      if (camera) {
+        camera.stop();
+      }
+      setupCamera();
+    });
+    designOptions.forEach(option => {
+      option.addEventListener('click', () => {
+        designOptions.forEach(opt => opt.classList.remove('selected'));
+        option.classList.add('selected');
+        currentDesign = option.getAttribute('data-design');
       });
+    });
+    snapButton.addEventListener('click', () => {
+      const dataUrl = canvasElement.toDataURL('image/png');
+      // 创建临时链接元素
+      const link = document.createElement('a');
+      link.href = dataUrl;
+      link.download = 'AR-美甲设计.png';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      // 拍照的视觉反馈
+      snapButton.style.backgroundColor = '#3a86ff';
+      setTimeout(() => {
+        snapButton.style.backgroundColor = 'white';
+      }, 300);
+    });
+    // 设置带有适当facingMode的摄像头
+    function setupCamera() {
+      try {
+        showDebug("正在初始化摄像头...");
+        camera = new Camera(videoElement, {
+          onFrame: async () => {
+            if (hands) {
+              try {
+                await hands.send({image: videoElement});
+              } catch (error) {
+                showDebug("手部跟踪出错: " + error.message);
+              }
+            }
+          },
+          width: 1280,
+          height: 720,
+          facingMode: facingMode
+        });
+        camera.start()
+          .then(() => {
+            showDebug("摄像头已启动");
+            setTimeout(() => {
+              debugInfo.style.display = 'none';
+            }, 3000);
+          })
+          .catch(error => {
+            console.error('摄像头启动失败: ', error);
+            showDebug("摄像头启动失败: " + error.message);
+            // 显示摄像头权限界面
+            cameraPermissionElement.style.display = 'flex';
+          });
+      } catch (error) {
+        showDebug("摄像头初始化失败: " + error.message);
+        console.error("摄像头初始化失败:", error);
+      }
     }
+    // 处理窗口调整大小
     window.addEventListener('resize', () => {
       canvasElement.width = window.innerWidth;
       canvasElement.height = window.innerHeight;