Spaces:

samlax12
/

hand

Running

App Files Files Community

samlax12 commited on Mar 11, 2025

Commit

bc9d8e1

verified ·

1 Parent(s): 556b01d

Update index.html

Browse files

Files changed (1) hide show

index.html +299 -467

index.html CHANGED Viewed

@@ -5,8 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AR Nail Polish Simulator</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/tracking-min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
     <style>
         * {
             margin: 0;
@@ -495,6 +498,27 @@
             font-weight: 500;
             color: #333;
         }
     </style>
 </head>
 <body>
@@ -507,6 +531,7 @@
         <div class="video-container">
             <video id="video" autoplay playsinline></video>
             <canvas id="nail-overlay"></canvas>
             <div class="camera-switch">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
@@ -516,6 +541,11 @@
         </div>
         <div class="controls">
             <div class="tabs">
                 <div class="tab active" data-tab="color">Colors</div>
                 <div class="tab" data-tab="texture">Textures</div>
@@ -703,20 +733,58 @@
         let currentShape = 'rounded';
         let currentLength = 2;
         let currentWidth = 2;
-        let handTracker;
-        let isTracking = false;
-        let fingerPositions = [];
         let capturedImage = null;
         // Initialize the application
-        // Immediately upon page load
         document.addEventListener('DOMContentLoaded', function() {
-            const tutorialBtn = document.querySelector('.tutorial-btn');
-            tutorialBtn.addEventListener('click', function() {
                 document.querySelector('.tutorial-overlay').style.display = 'none';
             });
-        });
         // Update canvas size to match video
         function updateCanvasSize() {
             const container = document.querySelector('.video-container');
@@ -725,6 +793,8 @@
             canvas.width = width;
             canvas.height = height;
         }
         // Initialize camera
@@ -737,81 +807,133 @@
                 }
             };
-            navigator.mediaDevices.getUserMedia(constraints)
-                .then(function(stream) {
-                    video.srcObject = stream;
                     document.querySelector('.loading-message').style.display = 'none';
-                    // Wait for video to be loaded
-                    video.onloadedmetadata = function() {
-                        updateCanvasSize();
-                        // Start tracking
-                        startTracking();
-                    };
                 })
-                .catch(function(error) {
-                    console.error('Error accessing camera:', error);
                     document.querySelector('.loading-message').textContent = 'Error accessing camera. Please check permissions.';
                 });
         }
-        // Initialize hand tracking
         function initHandTracking() {
-            handTracker = new tracking.HandTracker();
-            handTracker.setInitialScale(4);
-            handTracker.setStepSize(2);
-            handTracker.setEdgesDensity(0.1);
         }
-        // Start tracking
-        function startTracking() {
-            if (!isTracking) {
-                tracking.track('#video', handTracker);
-                isTracking = true;
-                // Setup tracking event
-                handTracker.on('track', function(event) {
-                    if (event.data.length > 0) {
-                        fingerPositions = [];
-                        event.data.forEach(function(hand) {
-                            // For simplicity, we'll use the center of the detected hand as reference
-                            // In a real app, you'd use machine learning for actual finger detection
-                            const centerX = hand.x + hand.width / 2;
-                            const centerY = hand.y + hand.height / 2;
-                            // Simulate 5 fingers based on hand position
-                            // This is a simplified approach - a real app would use more advanced ML models
-                            for (let i = 0; i < 5; i++) {
-                                const angle = (Math.PI / 4) * i - Math.PI / 8;
-                                const distance = hand.width * 0.4;
-                                const fingerX = centerX + Math.cos(angle) * distance;
-                                const fingerY = centerY + Math.sin(angle) * distance;
-                                fingerPositions.push({
-                                    x: fingerX,
-                                    y: fingerY,
-                                    width: hand.width * 0.15,
-                                    height: hand.width * 0.3 * (currentLength / 2)
-                                });
-                            }
                         });
                     }
-                    // Render nails
-                    renderNails();
-                });
-                // Render function for smoother appearance
-                function renderLoop() {
-                    renderNails();
-                    requestAnimationFrame(renderLoop);
                 }
-                renderLoop();
             }
         }
         // Render nails on canvas
@@ -821,44 +943,48 @@
             // For each detected finger position
             fingerPositions.forEach(function(finger) {
                 // Draw nail based on shape
-                drawNail(finger.x, finger.y, finger.width * (currentWidth / 2), finger.height);
             });
         }
         // Draw a nail at the specified position
-        function drawNail(x, y, width, height) {
             ctx.save();
             // Set base color with opacity
             ctx.fillStyle = hexToRgba(currentColor, currentOpacity);
             // Apply different shapes
             switch(currentShape) {
                 case 'rounded':
-                    drawRoundedNail(x, y, width, height);
                     break;
                 case 'oval':
-                    drawOvalNail(x, y, width, height);
                     break;
                 case 'pointy':
-                    drawPointyNail(x, y, width, height);
                     break;
                 case 'square':
-                    drawSquareNail(x, y, width, height);
                     break;
                 case 'almond':
-                    drawAlmondNail(x, y, width, height);
                     break;
                 case 'coffin':
-                    drawCoffinNail(x, y, width, height);
                     break;
                 default:
-                    drawRoundedNail(x, y, width, height);
             }
             // Apply texture if selected
             if (currentTexture) {
-                applyTexture(x, y, width, height);
             }
             ctx.restore();
@@ -1191,20 +1317,43 @@
                 });
             });
-            // Camera switch
             document.querySelector('.camera-switch').addEventListener('click', function() {
                 cameraFacingMode = cameraFacingMode === 'user' ? 'environment' : 'user';
-                // Stop current video stream
-                if (video.srcObject) {
-                    const tracks = video.srcObject.getTracks();
-                    tracks.forEach(track => track.stop());
                 }
-                // Reinitialize camera
                 document.querySelector('.loading-message').style.display = 'block';
                 document.querySelector('.loading-message').textContent = 'Switching camera...';
-                initCamera();
             });
             // Reset button
@@ -1226,8 +1375,6 @@
                 document.querySelectorAll('.shape-option').forEach(el => el.classList.remove('selected'));
                 document.querySelector('.shape-option[data-shape="rounded"]').classList.add('selected');
-                document.querySelectorAll('.preset-option').forEach(el => el.classList.remove('selected'));
                 document.getElementById('opacity-slider').value = 100;
                 document.getElementById('opacity-value').textContent = '100%';
@@ -1239,424 +1386,109 @@
                 document.getElementById('width-slider').value = 2;
                 document.getElementById('width-value').textContent = 'Medium';
             });
-            // Capture button
-            document.getElementById('capture-btn').addEventListener('click', function() {
-                captureImage();
-            });
-            // Share buttons
-            document.getElementById('share-instagram').addEventListener('click', function() {
-                alert('Sharing to Instagram would open Instagram app here');
                 document.querySelector('.share-modal').style.display = 'none';
             });
-            document.getElementById('share-facebook').addEventListener('click', function() {
-                alert('Sharing to Facebook would open Facebook app here');
-                document.querySelector('.share-modal').style.display = 'none';
             });
-            document.getElementById('share-download').addEventListener('click', function() {
-                // Download the image
-                const link = document.createElement('a');
-                link.download = 'my-nail-design.png';
-                link.href = document.getElementById('share-image').src;
-                link.click();
             });
-            // Close share modal
-            document.querySelector('.close-share').addEventListener('click', function() {
-                document.querySelector('.share-modal').style.display = 'none';
             });
         }
-        // Apply preset
         function applyPreset(preset) {
             switch(preset) {
                 case 'french':
-                    currentColor = '#FFFFFF';
                     currentTexture = null;
-                    currentShape = 'rounded';
-                    // A real app would apply a French tip design
                     break;
                 case 'ombre':
-                    currentColor = '#ff80ab';
-                    currentOpacity = 0.7;
                     currentTexture = null;
-                    currentShape = 'almond';
-                    // A real app would apply a gradient
                     break;
                 case 'glitter':
-                    currentColor = '#f5f5f5';
                     currentTexture = 'polka';
-                    textureOpacity = 0.8;
-                    currentShape = 'rounded';
                     break;
                 case 'marble':
-                    currentColor = '#ffffff';
-                    currentTexture = 'stripes';
                     textureOpacity = 0.3;
-                    currentShape = 'square';
                     break;
                 case 'metallic':
-                    currentColor = '#C0C0C0';
-                    currentOpacity = 1.0;
                     currentTexture = null;
-                    currentShape = 'oval';
                     break;
                 case 'galaxy':
-                    currentColor = '#000080';
                     currentTexture = 'stars';
-                    textureOpacity = 0.7;
-                    currentShape = 'pointy';
                     break;
-                default:
-                    // No preset
             }
-            // Update UI to match preset
-            document.querySelectorAll('.color-option').forEach(function(option) {
-                if (option.getAttribute('data-color') === currentColor) {
-                    document.querySelectorAll('.color-option').forEach(el => el.classList.remove('selected'));
-                    option.classList.add('selected');
-                }
-            });
-            document.querySelectorAll('.texture-option').forEach(function(option) {
-                if (option.getAttribute('data-texture') === currentTexture) {
-                    document.querySelectorAll('.texture-option').forEach(el => el.classList.remove('selected'));
-                    option.classList.add('selected');
-                }
-            });
-            document.querySelectorAll('.shape-option').forEach(function(option) {
-                if (option.getAttribute('data-shape') === currentShape) {
-                    document.querySelectorAll('.shape-option').forEach(el => el.classList.remove('selected'));
-                    option.classList.add('selected');
-                }
-            });
-            // Update sliders
-            document.getElementById('opacity-slider').value = currentOpacity * 100;
-            document.getElementById('opacity-value').textContent = Math.round(currentOpacity * 100) + '%';
-            document.getElementById('texture-opacity-slider').value = textureOpacity * 100;
-            document.getElementById('texture-opacity-value').textContent = Math.round(textureOpacity * 100) + '%';
-        }
-        // Capture current view
-        function captureImage() {
-            // Create a canvas that includes both video and overlay
-            const captureCanvas = document.createElement('canvas');
-            const captureCtx = captureCanvas.getContext('2d');
-            captureCanvas.width = video.videoWidth;
-            captureCanvas.height = video.videoHeight;
-            // Draw video
-            captureCtx.drawImage(video, 0, 0, captureCanvas.width, captureCanvas.height);
-            // Scale the nail overlay to match the capture canvas
-            const scaleX = captureCanvas.width / canvas.width;
-            const scaleY = captureCanvas.height / canvas.height;
-            captureCtx.save();
-            captureCtx.scale(scaleX, scaleY);
-            // Redraw nails on the capture canvas
-            fingerPositions.forEach(function(finger) {
-                // Draw nail based on shape
-                drawNailOnContext(captureCtx, finger.x, finger.y, finger.width * (currentWidth / 2), finger.height);
-            });
-            captureCtx.restore();
-            // Convert to image
-            capturedImage = captureCanvas.toDataURL('image/png');
-            // Show share modal
-            document.getElementById('share-image').src = capturedImage;
-            document.querySelector('.share-modal').style.display = 'flex';
-        }
-        // Draw nail on a specific context (for capture)
-        function drawNailOnContext(context, x, y, width, height) {
-            context.save();
-            // Set base color with opacity
-            context.fillStyle = hexToRgba(currentColor, currentOpacity);
-            // Apply different shapes
-            switch(currentShape) {
-                case 'rounded':
-                    drawRoundedNailOnContext(context, x, y, width, height);
-                    break;
-                case 'oval':
-                    drawOvalNailOnContext(context, x, y, width, height);
-                    break;
-                case 'pointy':
-                    drawPointyNailOnContext(context, x, y, width, height);
-                    break;
-                case 'square':
-                    drawSquareNailOnContext(context, x, y, width, height);
-                    break;
-                case 'almond':
-                    drawAlmondNailOnContext(context, x, y, width, height);
-                    break;
-                case 'coffin':
-                    drawCoffinNailOnContext(context, x, y, width, height);
-                    break;
-                default:
-                    drawRoundedNailOnContext(context, x, y, width, height);
-            }
-            // Apply texture if selected
             if (currentTexture) {
-                applyTextureOnContext(context, x, y, width, height);
-            }
-            context.restore();
-        }
-        // Draw rounded nail shape on a specific context
-        function drawRoundedNailOnContext(context, x, y, width, height) {
-            const radius = width * 0.5;
-            context.beginPath();
-            context.moveTo(x - width, y);
-            context.lineTo(x - width, y - height + radius);
-            context.quadraticCurveTo(x - width, y - height, x - width + radius, y - height);
-            context.lineTo(x + width - radius, y - height);
-            context.quadraticCurveTo(x + width, y - height, x + width, y - height + radius);
-            context.lineTo(x + width, y);
-            context.closePath();
-            context.fill();
-        }
-        // Draw oval nail shape on a specific context
-        function drawOvalNailOnContext(context, x, y, width, height) {
-            context.beginPath();
-            context.ellipse(x, y - height/2, width, height/2, 0, 0, Math.PI * 2);
-            context.fill();
-        }
-        // Draw pointy nail shape on a specific context
-        function drawPointyNailOnContext(context, x, y, width, height) {
-            context.beginPath();
-            context.moveTo(x - width, y);
-            context.lineTo(x - width, y - height * 0.6);
-            context.lineTo(x, y - height);
-            context.lineTo(x + width, y - height * 0.6);
-            context.lineTo(x + width, y);
-            context.closePath();
-            context.fill();
-        }
-        // Draw square nail shape on a specific context
-        function drawSquareNailOnContext(context, x, y, width, height) {
-            context.beginPath();
-            context.rect(x - width, y - height, width * 2, height);
-            context.fill();
-        }
-        // Draw almond nail shape on a specific context
-        function drawAlmondNailOnContext(context, x, y, width, height) {
-            context.beginPath();
-            context.moveTo(x - width, y);
-            context.quadraticCurveTo(x - width * 0.8, y - height * 0.6, x, y - height);
-            context.quadraticCurveTo(x + width * 0.8, y - height * 0.6, x + width, y);
-            context.closePath();
-            context.fill();
-        }
-        // Draw coffin nail shape on a specific context
-        function drawCoffinNailOnContext(context, x, y, width, height) {
-            context.beginPath();
-            context.moveTo(x - width, y);
-            context.lineTo(x - width, y - height * 0.7);
-            context.lineTo(x - width * 0.5, y - height);
-            context.lineTo(x + width * 0.5, y - height);
-            context.lineTo(x + width, y - height * 0.7);
-            context.lineTo(x + width, y);
-            context.closePath();
-            context.fill();
-        }
-        // Apply texture to the nail on a specific context
-        function applyTextureOnContext(context, x, y, width, height) {
-            context.globalAlpha = textureOpacity;
-            // Different texture patterns
-            switch(currentTexture) {
-                case 'grid':
-                    drawGridTextureOnContext(context, x, y, width, height);
-                    break;
-                case 'polka':
-                    drawPolkaDotTextureOnContext(context, x, y, width, height);
-                    break;
-                case 'stripes':
-                    drawStripedTextureOnContext(context, x, y, width, height);
-                    break;
-                case 'chevron':
-                    drawChevronTextureOnContext(context, x, y, width, height);
-                    break;
-                case 'stars':
-                    drawStarsTextureOnContext(context, x, y, width, height);
-                    break;
-                case 'hearts':
-                    drawHeartsTextureOnContext(context, x, y, width, height);
-                    break;
-                default:
-                    // No texture
             }
-            context.globalAlpha = 1.0;
-        }
-        // Draw grid texture on a specific context
-        function drawGridTextureOnContext(context, x, y, width, height) {
-            context.strokeStyle = '#000';
-            context.lineWidth = 1;
-            const gridSize = width * 0.3;
-            // Vertical lines
-            for (let i = -width; i <= width; i += gridSize) {
-                context.beginPath();
-                context.moveTo(x + i, y - height);
-                context.lineTo(x + i, y);
-                context.stroke();
-            }
-            // Horizontal lines
-            for (let i = 0; i <= height; i += gridSize) {
-                context.beginPath();
-                context.moveTo(x - width, y - i);
-                context.lineTo(x + width, y - i);
-                context.stroke();
-            }
-        }
-        // Draw polka dot texture on a specific context
-        function drawPolkaDotTextureOnContext(context, x, y, width, height) {
-            context.fillStyle = '#000';
-            const dotSize = width * 0.15;
-            const spacing = width * 0.4;
-            for (let i = -width + dotSize; i < width; i += spacing) {
-                for (let j = -height + dotSize; j < 0; j += spacing) {
-                    context.beginPath();
-                    context.arc(x + i, y + j, dotSize, 0, Math.PI * 2);
-                    context.fill();
-                }
-            }
-        }
-        // Draw striped texture on a specific context
-        function drawStripedTextureOnContext(context, x, y, width, height) {
-            context.fillStyle = '#000';
-            const stripeWidth = width * 0.3;
-            for (let i = -width; i < width; i += stripeWidth * 2) {
-                context.fillRect(x + i, y - height, stripeWidth, height);
-            }
-        }
-        // Draw chevron texture on a specific context
-        function drawChevronTextureOnContext(context, x, y, width, height) {
-            context.strokeStyle = '#000';
-            context.lineWidth = 2;
-            const chevronSize = width * 0.5;
-            for (let i = 0; i <= height + chevronSize; i += chevronSize) {
-                context.beginPath();
-                context.moveTo(x - width, y - i);
-                context.lineTo(x, y - i - chevronSize / 2);
-                context.lineTo(x + width, y - i);
-                context.stroke();
-            }
-        }
-        // Draw stars texture on a specific context
-        function drawStarsTextureOnContext(context, x, y, width, height) {
-            context.fillStyle = '#000';
-            const starSize = width * 0.3;
-            const spacing = width * 0.7;
-            for (let i = -width + starSize; i < width; i += spacing) {
-                for (let j = -height + starSize; j < 0; j += spacing) {
-                    drawStarOnContext(context, x + i, y + j, 5, starSize * 0.5, starSize * 0.2);
-                }
-            }
-        }
-        // Draw a star shape on a specific context
-        function drawStarOnContext(context, cx, cy, spikes, outerRadius, innerRadius) {
-            let rot = Math.PI / 2 * 3;
-            let x = cx;
-            let y = cy;
-            let step = Math.PI / spikes;
-            context.beginPath();
-            context.moveTo(cx, cy - outerRadius);
-            for (let i = 0; i < spikes; i++) {
-                x = cx + Math.cos(rot) * outerRadius;
-                y = cy + Math.sin(rot) * outerRadius;
-                context.lineTo(x, y);
-                rot += step;
-                x = cx + Math.cos(rot) * innerRadius;
-                y = cy + Math.sin(rot) * innerRadius;
-                context.lineTo(x, y);
-                rot += step;
-            }
-            context.lineTo(cx, cy - outerRadius);
-            context.closePath();
-            context.fill();
-        }
-        // Draw hearts texture on a specific context
-        function drawHeartsTextureOnContext(context, x, y, width, height) {
-            context.fillStyle = '#000';
-            const heartSize = width * 0.3;
-            const spacing = width * 0.7;
-            for (let i = -width + heartSize; i < width; i += spacing) {
-                for (let j = -height + heartSize; j < 0; j += spacing) {
-                    drawHeartOnContext(context, x + i, y + j, heartSize);
-                }
-            }
-        }
-        // Draw a heart shape on a specific context
-        function drawHeartOnContext(context, x, y, size) {
-            context.beginPath();
-            context.moveTo(x, y - size * 0.3);
-            context.bezierCurveTo(
-                x, y - size * 0.7,
-                x - size, y - size * 0.7,
-                x - size, y - size * 0.3
-            );
-            context.bezierCurveTo(
-                x - size, y + size * 0.3,
-                x, y + size * 0.7,
-                x, y + size * 0.3
-            );
-            context.bezierCurveTo(
-                x, y + size * 0.7,
-                x + size, y + size * 0.3,
-                x + size, y - size * 0.3
-            );
-            context.bezierCurveTo(
-                x + size, y - size * 0.7,
-                x, y - size * 0.7,
-                x, y - size * 0.3
-            );
-            context.fill();
         }
         // Convert hex color to rgba

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AR Nail Polish Simulator</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <!-- MediaPipe dependencies -->
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3.1640029074/camera_utils.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1646424915/hands.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.3.1620248257/drawing_utils.js"></script>
     <style>
         * {
             margin: 0;
             font-weight: 500;
             color: #333;
         }
+        .manual-mode-toggle {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+            cursor: pointer;
+        }
+        .manual-mode-toggle input {
+            margin-right: 10px;
+        }
+        #debug-canvas {
+            display: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
     </style>
 </head>
 <body>
         <div class="video-container">
             <video id="video" autoplay playsinline></video>
             <canvas id="nail-overlay"></canvas>
+            <canvas id="debug-canvas"></canvas>
             <div class="camera-switch">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
         </div>
         <div class="controls">
+            <div class="manual-mode-toggle">
+                <input type="checkbox" id="manual-mode-checkbox">
+                <label for="manual-mode-checkbox">Manual Placement Mode</label>
+            </div>
             <div class="tabs">
                 <div class="tab active" data-tab="color">Colors</div>
                 <div class="tab" data-tab="texture">Textures</div>
         let currentShape = 'rounded';
         let currentLength = 2;
         let currentWidth = 2;
         let capturedImage = null;
+        let manualMode = false;
+        let fingerPositions = [];
+        let hands; // MediaPipe Hands model
+        let camera; // MediaPipe camera utility
+        let isProcessing = false;
+        let debugCanvas;
+        let debugCtx;
         // Initialize the application
         document.addEventListener('DOMContentLoaded', function() {
+            // Get elements
+            video = document.getElementById('video');
+            canvas = document.getElementById('nail-overlay');
+            ctx = canvas.getContext('2d');
+            debugCanvas = document.getElementById('debug-canvas');
+            debugCtx = debugCanvas.getContext('2d');
+            // Set up canvas size
+            updateCanvasSize();
+            window.addEventListener('resize', updateCanvasSize);
+            // Set up hand tracking
+            initHandTracking();
+            // Set up camera
+            initCamera();
+            // Set up event listeners
+            setupEventListeners();
+            // Make sure the tutorial button works
+            document.querySelector('.tutorial-btn').addEventListener('click', function() {
                 document.querySelector('.tutorial-overlay').style.display = 'none';
             });
+            // Manual mode toggle
+            document.getElementById('manual-mode-checkbox').addEventListener('change', function() {
+                manualMode = this.checked;
+                if (manualMode) {
+                    // Add click event to canvas for manual placement
+                    canvas.style.pointerEvents = 'auto';
+                    canvas.addEventListener('click', handleCanvasClick);
+                } else {
+                    // Remove click event and reset pointer events
+                    canvas.style.pointerEvents = 'none';
+                    canvas.removeEventListener('click', handleCanvasClick);
+                }
+            });
+        });
         // Update canvas size to match video
         function updateCanvasSize() {
             const container = document.querySelector('.video-container');
             canvas.width = width;
             canvas.height = height;
+            debugCanvas.width = width;
+            debugCanvas.height = height;
         }
         // Initialize camera
                 }
             };
+            // Set up MediaPipe camera utility
+            camera = new window.cameraPipe.Camera(video, {
+                onFrame: async () => {
+                    if (!isProcessing) {
+                        isProcessing = true;
+                        await hands.send({image: video});
+                        isProcessing = false;
+                    }
+                },
+                width: 1280,
+                height: 720
+            });
+            camera.start()
+                .then(() => {
                     document.querySelector('.loading-message').style.display = 'none';
+                    updateCanvasSize();
                 })
+                .catch((error) => {
+                    console.error('Error starting camera:', error);
                     document.querySelector('.loading-message').textContent = 'Error accessing camera. Please check permissions.';
                 });
         }
+        // Initialize hand tracking with MediaPipe
         function initHandTracking() {
+            hands = new window.Hands({
+                locateFile: (file) => {
+                    return `https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1646424915/${file}`;
+                }
+            });
+            hands.setOptions({
+                maxNumHands: 2,
+                modelComplexity: 1,
+                minDetectionConfidence: 0.5,
+                minTrackingConfidence: 0.5
+            });
+            hands.onResults(onHandResults);
         }
+        // Process hand tracking results
+        function onHandResults(results) {
+            // Clear previous drawings
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Debug visualization
+            if (debugCanvas.style.display === 'block') {
+                debugCtx.clearRect(0, 0, debugCanvas.width, debugCanvas.height);
+                if (results.multiHandLandmarks) {
+                    for (const landmarks of results.multiHandLandmarks) {
+                        window.drawConnectors(debugCtx, landmarks, window.HAND_CONNECTIONS,
+                                             {color: '#00FF00', lineWidth: 2});
+                        window.drawLandmarks(debugCtx, landmarks,
+                                            {color: '#FF0000', lineWidth: 1, radius: 3});
+                    }
+                }
+            }
+            // If manual mode is active, don't update automatically
+            if (manualMode) {
+                renderNails();
+                return;
+            }
+            // Extract fingertip positions from hand landmarks
+            if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
+                fingerPositions = [];
+                for (const landmarks of results.multiHandLandmarks) {
+                    // MediaPipe hand model has 21 landmarks, with fingertips at indices:
+                    // Thumb: 4, Index: 8, Middle: 12, Ring: 16, Pinky: 20
+                    const fingertipIndices = [4, 8, 12, 16, 20];
+                    for (const index of fingertipIndices) {
+                        // Calculate nail position and size based on hand landmarks
+                        const tip = landmarks[index];
+                        const joint = landmarks[index - 2]; // Base joint of the finger
+                        // Convert normalized coordinates to canvas coordinates
+                        const tipX = tip.x * canvas.width;
+                        const tipY = tip.y * canvas.height;
+                        const jointX = joint.x * canvas.width;
+                        const jointY = joint.y * canvas.height;
+                        // Calculate nail dimensions based on finger orientation
+                        const dx = tipX - jointX;
+                        const dy = tipY - jointY;
+                        const angle = Math.atan2(dy, dx);
+                        // Calculate distance between points for size reference
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        // Add to finger positions
+                        fingerPositions.push({
+                            x: tipX,
+                            y: tipY,
+                            width: distance * 0.5 * (currentWidth / 2),
+                            height: distance * 0.8 * (currentLength / 2),
+                            angle: angle
                         });
                     }
                 }
             }
+            // Render nails
+            renderNails();
+        }
+        // Handle click on canvas for manual placement
+        function handleCanvasClick(event) {
+            const rect = canvas.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            // Add a nail at the clicked position
+            fingerPositions.push({
+                x: x,
+                y: y,
+                width: 20 * (currentWidth / 2),
+                height: 40 * (currentLength / 2),
+                angle: -Math.PI / 2 // Pointing upward
+            });
+            // Re-render the nails
+            renderNails();
         }
         // Render nails on canvas
             // For each detected finger position
             fingerPositions.forEach(function(finger) {
                 // Draw nail based on shape
+                drawNail(finger.x, finger.y, finger.width, finger.height, finger.angle);
             });
         }
         // Draw a nail at the specified position
+        function drawNail(x, y, width, height, angle) {
             ctx.save();
+            // Transform context based on finger orientation
+            ctx.translate(x, y);
+            ctx.rotate(angle);
             // Set base color with opacity
             ctx.fillStyle = hexToRgba(currentColor, currentOpacity);
             // Apply different shapes
             switch(currentShape) {
                 case 'rounded':
+                    drawRoundedNail(0, 0, width, height);
                     break;
                 case 'oval':
+                    drawOvalNail(0, 0, width, height);
                     break;
                 case 'pointy':
+                    drawPointyNail(0, 0, width, height);
                     break;
                 case 'square':
+                    drawSquareNail(0, 0, width, height);
                     break;
                 case 'almond':
+                    drawAlmondNail(0, 0, width, height);
                     break;
                 case 'coffin':
+                    drawCoffinNail(0, 0, width, height);
                     break;
                 default:
+                    drawRoundedNail(0, 0, width, height);
             }
             // Apply texture if selected
             if (currentTexture) {
+                applyTexture(0, 0, width, height);
             }
             ctx.restore();
                 });
             });
+            // Camera switch button
             document.querySelector('.camera-switch').addEventListener('click', function() {
                 cameraFacingMode = cameraFacingMode === 'user' ? 'environment' : 'user';
+                // Stop current camera
+                if (camera) {
+                    camera.stop();
                 }
+                // Show loading message
                 document.querySelector('.loading-message').style.display = 'block';
                 document.querySelector('.loading-message').textContent = 'Switching camera...';
+                // Reinitialize camera with new facing mode
+                setTimeout(initCamera, 500);
+            });
+            // Capture button
+            document.getElementById('capture-btn').addEventListener('click', function() {
+                // Create a composite image of video and overlay
+                const captureCanvas = document.createElement('canvas');
+                captureCanvas.width = canvas.width;
+                captureCanvas.height = canvas.height;
+                const captureCtx = captureCanvas.getContext('2d');
+                // Draw video frame
+                captureCtx.drawImage(video, 0, 0, captureCanvas.width, captureCanvas.height);
+                // Draw nail overlay
+                captureCtx.drawImage(canvas, 0, 0);
+                // Convert to image data URL
+                capturedImage = captureCanvas.toDataURL('image/png');
+                // Show in share modal
+                document.getElementById('share-image').src = capturedImage;
+                document.querySelector('.share-modal').style.display = 'flex';
             });
             // Reset button
                 document.querySelectorAll('.shape-option').forEach(el => el.classList.remove('selected'));
                 document.querySelector('.shape-option[data-shape="rounded"]').classList.add('selected');
                 document.getElementById('opacity-slider').value = 100;
                 document.getElementById('opacity-value').textContent = '100%';
                 document.getElementById('width-slider').value = 2;
                 document.getElementById('width-value').textContent = 'Medium';
+                // If in manual mode, clear finger positions
+                if (manualMode) {
+                    fingerPositions = [];
+                    renderNails();
+                }
             });
+            // Share modal close button
+            document.querySelector('.close-share').addEventListener('click', function() {
                 document.querySelector('.share-modal').style.display = 'none';
             });
+            // Share buttons
+            document.getElementById('share-download').addEventListener('click', function() {
+                if (capturedImage) {
+                    const link = document.createElement('a');
+                    link.href = capturedImage;
+                    link.download = 'nail-design.png';
+                    link.click();
+                }
             });
+            document.getElementById('share-instagram').addEventListener('click', function() {
+                alert('This would open Instagram sharing if implemented in a production environment.');
+                // In production: would use Web Share API or Instagram API
             });
+            document.getElementById('share-facebook').addEventListener('click', function() {
+                alert('This would open Facebook sharing if implemented in a production environment.');
+                // In production: would use Web Share API or Facebook SDK
             });
         }
+        // Apply preset nail designs
         function applyPreset(preset) {
             switch(preset) {
                 case 'french':
+                    // French manicure - white tips on light pink base
+                    currentColor = '#FFF5F5';
+                    currentOpacity = 0.9;
                     currentTexture = null;
+                    currentShape = 'oval';
+                    // We would need a more complex rendering logic to add the white tips
+                    // This is simplified for this demo
                     break;
                 case 'ombre':
+                    // Ombre effect - gradient would require custom rendering
+                    currentColor = '#f48fb1';
+                    currentOpacity = 0.8;
                     currentTexture = null;
                     break;
                 case 'glitter':
+                    // Glitter effect
+                    currentColor = '#f06292';
                     currentTexture = 'polka';
+                    textureOpacity = 0.7;
+                    document.getElementById('texture-opacity-slider').value = 70;
+                    document.getElementById('texture-opacity-value').textContent = '70%';
                     break;
                 case 'marble':
+                    // Marble effect
+                    currentColor = '#f5f5f5';
+                    currentTexture = 'chevron';
                     textureOpacity = 0.3;
+                    document.getElementById('texture-opacity-slider').value = 30;
+                    document.getElementById('texture-opacity-value').textContent = '30%';
                     break;
                 case 'metallic':
+                    // Metallic effect
+                    currentColor = '#FFD700';
+                    currentOpacity = 0.9;
                     currentTexture = null;
+                    // Would need specialized rendering for true metallic effect
                     break;
                 case 'galaxy':
+                    // Galaxy effect
+                    currentColor = '#311B92';
                     currentTexture = 'stars';
+                    textureOpacity = 0.8;
+                    document.getElementById('texture-opacity-slider').value = 80;
+                    document.getElementById('texture-opacity-value').textContent = '80%';
                     break;
             }
+            // Update UI to reflect preset
+            document.querySelectorAll('.color-option').forEach(el => el.classList.remove('selected'));
+            document.querySelectorAll('.texture-option').forEach(el => el.classList.remove('selected'));
             if (currentTexture) {
+                const textureElement = document.querySelector(`.texture-option[data-texture="${currentTexture}"]`);
+                if (textureElement) textureElement.classList.add('selected');
             }
+            // Update opacity slider
+            document.getElementById('opacity-slider').value = currentOpacity * 100;
+            document.getElementById('opacity-value').textContent = Math.round(currentOpacity * 100) + '%';
         }
         // Convert hex color to rgba