Spaces:

samlax12
/

hand

Running

App Files Files Community

samlax12 commited on Mar 13, 2025

Commit

c6bf4be

verified ·

1 Parent(s): bc9d8e1

Update index.html

Browse files

Files changed (1) hide show

index.html +623 -1483

index.html CHANGED Viewed

@@ -1,1504 +1,644 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <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;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        body {
-            background-color: #f5f5f5;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-        .container {
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 100%;
-            flex: 1;
-            padding: 20px;
-        }
-        .header {
-            width: 100%;
-            text-align: center;
-            background-color: #ffffff;
-            padding: 15px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            margin-bottom: 20px;
-            border-radius: 12px;
-        }
-        .header h1 {
-            color: #333;
-            font-size: 1.5rem;
-            margin-bottom: 5px;
-        }
-        .header p {
-            color: #777;
-            font-size: 0.9rem;
-        }
-        .video-container {
-            position: relative;
-            width: 100%;
-            max-width: 480px;
-            height: 0;
-            padding-bottom: 100%;
-            overflow: hidden;
-            border-radius: 12px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
-            background-color: #333;
-        }
-        #video {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        #nail-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-        }
-        .loading-message {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            color: white;
-            background-color: rgba(0,0,0,0.7);
-            padding: 15px 30px;
-            border-radius: 30px;
-            font-size: 1.1rem;
-            z-index: 10;
-        }
-        .controls {
-            width: 100%;
-            max-width: 480px;
-            background-color: #ffffff;
-            border-radius: 12px;
-            padding: 20px;
-            margin-top: 20px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-        }
-        .tabs {
-            display: flex;
-            border-bottom: 1px solid #eee;
-            margin-bottom: 15px;
-        }
-        .tab {
-            padding: 10px 15px;
-            cursor: pointer;
-            border-bottom: 2px solid transparent;
-            color: #777;
-            font-weight: 500;
-            transition: all 0.3s ease;
-        }
-        .tab.active {
-            color: #333;
-            border-bottom-color: #f06292;
-        }
-        .color-selector {
-            display: grid;
-            grid-template-columns: repeat(5, 1fr);
-            gap: 10px;
-            margin-bottom: 20px;
-        }
-        .color-option {
-            width: 100%;
-            aspect-ratio: 1;
-            border-radius: 50%;
-            cursor: pointer;
-            border: 3px solid transparent;
-            transition: transform 0.2s ease, border-color 0.2s ease;
-            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-        }
-        .color-option.selected {
-            border-color: #333;
-            transform: scale(1.1);
-        }
-        .texture-selector {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-        .texture-option {
-            width: 100%;
-            aspect-ratio: 1;
-            border-radius: 12px;
-            cursor: pointer;
-            background-size: cover;
-            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-            border: 3px solid transparent;
-            transition: transform 0.2s ease, border-color 0.2s ease;
-        }
-        .texture-option.selected {
-            border-color: #333;
-            transform: scale(1.05);
-        }
-        .opacity-control {
-            width: 100%;
-            margin-bottom: 20px;
-        }
-        .opacity-control p {
-            margin-bottom: 8px;
-            color: #555;
-            font-weight: 500;
-        }
-        .slider-container {
-            margin-bottom: 15px;
-        }
-        .slider-container p {
-            margin-bottom: 8px;
-            color: #555;
-            font-weight: 500;
-        }
-        input[type="range"] {
-            width: 100%;
-            height: 8px;
-            border-radius: 5px;
-            background: #ddd;
-            outline: none;
-            -webkit-appearance: none;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background: #f06292;
-            cursor: pointer;
-        }
-        .action-buttons {
-            display: flex;
-            justify-content: space-between;
-            gap: 10px;
-        }
-        .btn {
-            flex: 1;
-            padding: 12px;
-            border-radius: 30px;
-            border: none;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 1rem;
-        }
-        .btn-primary {
-            background-color: #f06292;
-            color: white;
-            box-shadow: 0 4px 15px rgba(240, 98, 146, 0.3);
-        }
-        .btn-secondary {
-            background-color: #fff;
-            color: #333;
-            border: 1px solid #ddd;
-        }
-        .btn:hover {
-            transform: translateY(-2px);
-        }
-        .btn-primary:hover {
-            box-shadow: 0 6px 20px rgba(240, 98, 146, 0.4);
-        }
-        .camera-switch {
-            position: absolute;
-            right: 15px;
-            top: 15px;
-            z-index: 100;
-            background-color: rgba(255, 255, 255, 0.8);
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
-        }
-        .camera-switch svg {
-            width: 24px;
-            height: 24px;
-            color: #333;
-        }
-        .tutorial-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.7);
-            z-index: 1000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .tutorial-content {
-            background-color: white;
-            border-radius: 15px;
-            padding: 25px;
-            width: 90%;
-            max-width: 400px;
-            text-align: center;
-        }
-        .tutorial-content h2 {
-            margin-bottom: 15px;
-            color: #333;
-        }
-        .tutorial-content p {
-            margin-bottom: 20px;
-            color: #666;
-            line-height: 1.5;
-        }
-        .tutorial-btn {
-            padding: 12px 25px;
-            background-color: #f06292;
-            color: white;
-            border: none;
-            border-radius: 30px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .tutorial-btn:hover {
-            background-color: #e91e63;
-        }
-        .gallery-container {
-            width: 100%;
-            max-width: 480px;
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 10px;
-            margin-top: 20px;
-        }
-        .gallery-item {
-            width: 100%;
-            aspect-ratio: 1;
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-        }
-        .gallery-item img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        .shape-option {
-            width: 100%;
-            aspect-ratio: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: #f5f5f5;
-            border-radius: 12px;
-            cursor: pointer;
-            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-            border: 3px solid transparent;
-            transition: transform 0.2s ease, border-color 0.2s ease;
-        }
-        .shape-option.selected {
-            border-color: #333;
-            transform: scale(1.05);
-        }
-        .shape-option svg {
-            width: 60%;
-            height: 60%;
-        }
-        .tab-content {
-            display: none;
-        }
-        .tab-content.active {
-            display: block;
-        }
-        .preset-selector {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-        .preset-option {
-            width: 100%;
-            aspect-ratio: 1;
-            border-radius: 12px;
-            cursor: pointer;
-            overflow: hidden;
-            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-            border: 3px solid transparent;
-            transition: transform 0.2s ease, border-color 0.2s ease;
-            position: relative;
-        }
-        .preset-option img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        .preset-option.selected {
-            border-color: #333;
-            transform: scale(1.05);
-        }
-        .preset-option p {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background-color: rgba(0,0,0,0.7);
-            color: white;
-            padding: 5px;
-            font-size: 0.8rem;
-            text-align: center;
-        }
-        .share-modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.7);
-            z-index: 1000;
-            align-items: center;
-            justify-content: center;
-        }
-        .share-content {
-            background-color: white;
-            border-radius: 15px;
-            padding: 25px;
-            width: 90%;
-            max-width: 400px;
-            text-align: center;
-        }
-        .share-content h2 {
-            margin-bottom: 15px;
-            color: #333;
-        }
-        .share-preview {
-            width: 100%;
-            aspect-ratio: 1;
-            margin-bottom: 20px;
-            border-radius: 10px;
-            overflow: hidden;
-        }
-        .share-preview img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-        .share-buttons {
-            display: flex;
-            justify-content: space-around;
-            margin-bottom: 20px;
-        }
-        .share-btn {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            cursor: pointer;
-        }
-        .share-btn .icon {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 8px;
-        }
-        .share-btn p {
-            font-size: 0.8rem;
-            color: #555;
-        }
-        .close-share {
-            display: block;
-            margin: 0 auto;
-            padding: 10px 25px;
-            background-color: #f5f5f5;
-            border: none;
-            border-radius: 20px;
-            cursor: pointer;
-            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="container">
-        <div class="header">
-            <h1>AR Nail Polish Simulator</h1>
-            <p>Try on virtual nail polish designs in real-time</p>
-        </div>
-        <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" />
-                </svg>
             </div>
-            <div class="loading-message">Initializing camera...</div>
-        </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>
-                <div class="tab" data-tab="shape">Shape</div>
-                <div class="tab" data-tab="preset">Presets</div>
             </div>
-            <div class="tab-content active" id="color-tab">
-                <div class="color-selector">
-                    <div class="color-option selected" style="background-color: #f06292;" data-color="#f06292"></div>
-                    <div class="color-option" style="background-color: #ec407a;" data-color="#ec407a"></div>
-                    <div class="color-option" style="background-color: #d81b60;" data-color="#d81b60"></div>
-                    <div class="color-option" style="background-color: #e91e63;" data-color="#e91e63"></div>
-                    <div class="color-option" style="background-color: #ad1457;" data-color="#ad1457"></div>
-                    <div class="color-option" style="background-color: #880e4f;" data-color="#880e4f"></div>
-                    <div class="color-option" style="background-color: #c2185b;" data-color="#c2185b"></div>
-                    <div class="color-option" style="background-color: #ff80ab;" data-color="#ff80ab"></div>
-                    <div class="color-option" style="background-color: #ff4081;" data-color="#ff4081"></div>
-                    <div class="color-option" style="background-color: #f50057;" data-color="#f50057"></div>
-                    <div class="color-option" style="background-color: #c51162;" data-color="#c51162"></div>
-                    <div class="color-option" style="background-color: #ff1744;" data-color="#ff1744"></div>
-                    <div class="color-option" style="background-color: #d50000;" data-color="#d50000"></div>
-                    <div class="color-option" style="background-color: #ff5252;" data-color="#ff5252"></div>
-                    <div class="color-option" style="background-color: #ff8a80;" data-color="#ff8a80"></div>
-                </div>
-                <div class="opacity-control">
-                    <p>Color Opacity: <span id="opacity-value">100%</span></p>
-                    <input type="range" id="opacity-slider" min="10" max="100" value="100">
-                </div>
             </div>
-            <div class="tab-content" id="texture-tab">
-                <div class="texture-selector">
-                    <div class="texture-option" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPjwvc3ZnPg==')" data-texture="grid"></div>
-                    <div class="texture-option" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9InBvbGthIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgwKSI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iMiIgZmlsbD0iYmxhY2siIC8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcG9sa2EpIiAvPjwvc3ZnPg==')" data-texture="polka"></div>
-                    <div class="texture-option" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9InN0cmlwZXMiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjQwIiBmaWxsPSJibGFjayIgLz48cmVjdCB4PSIxMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjQwIiBmaWxsPSJ0cmFuc3BhcmVudCIgLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgZmlsbD0idXJsKCNzdHJpcGVzKSIgLz48L3N2Zz4=')" data-texture="stripes"></div>
-                    <div class="texture-option" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImNoZXZyb24iIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMjAgbDIwIDIwIGwyMC0yMCBNLTIwIDAgbDIwIDIwIGwyMC0yMCBNMjAgMCBsLTIwIDIwIGw0MCA0MCBNNjAgMCBsLTIwIDIwIGwyMCAyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9InVybCgjY2hldnJvbikiIC8+PC9zdmc+')" data-texture="chevron"></div>
-                    <div class="texture-option" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9InN0YXJzIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0xMCA1IGwxIDMgaDMgbC0yLjUgMiAxIDMgLTIuNS0yIC0yLjUgMiAxLTMgLTIuNS0yIGgzIHoiIGZpbGw9ImJsYWNrIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjc3RhcnMpIiAvPjwvc3ZnPg==')" data-texture="stars"></div>
-                    <div class="texture-option" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImhlYXJ0cyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNMTAsNiBjMC0yLC0yLTQsLTQtNCBzLTQsMiwtNCw0IHMwLDQsNCw4IHM0LTQsNC04IiBmaWxsPSJibGFjayIgLz48cGF0aCBkPSJNMTAsNiBjMC0yLDItNCw0LTQgczQsMiw0LDQgcy0wLDQsLTQsOCBzLTQtNCwtNC04IiBmaWxsPSJibGFjayIgLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0idXJsKCNoZWFydHMpIiAvPjwvc3ZnPg==')" data-texture="hearts"></div>
-                </div>
-                <div class="opacity-control">
-                    <p>Texture Opacity: <span id="texture-opacity-value">50%</span></p>
-                    <input type="range" id="texture-opacity-slider" min="10" max="100" value="50">
-                </div>
             </div>
-            <div class="tab-content" id="shape-tab">
-                <div class="texture-selector">
-                    <div class="shape-option selected" data-shape="rounded">
-                        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-                            <rect x="20" y="20" width="60" height="60" rx="15" fill="#333"/>
-                        </svg>
-                    </div>
-                    <div class="shape-option" data-shape="oval">
-                        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-                            <ellipse cx="50" cy="50" rx="30" ry="40" fill="#333"/>
-                        </svg>
-                    </div>
-                    <div class="shape-option" data-shape="pointy">
-                        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M50,20 L70,40 L70,70 L30,70 L30,40 Z" fill="#333"/>
-                        </svg>
-                    </div>
-                    <div class="shape-option" data-shape="square">
-                        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-                            <rect x="30" y="30" width="40" height="40" fill="#333"/>
-                        </svg>
-                    </div>
-                    <div class="shape-option" data-shape="almond">
-                        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M50,20 C70,30 70,70 50,80 C30,70 30,30 50,20 Z" fill="#333"/>
-                        </svg>
-                    </div>
-                    <div class="shape-option" data-shape="coffin">
-                        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M40,30 L60,30 L70,70 L50,80 L30,70 Z" fill="#333"/>
-                        </svg>
-                    </div>
-                </div>
-                <div class="slider-container">
-                    <p>Length: <span id="length-value">Medium</span></p>
-                    <input type="range" id="length-slider" min="1" max="3" value="2">
-                </div>
-                <div class="slider-container">
-                    <p>Width: <span id="width-value">Medium</span></p>
-                    <input type="range" id="width-slider" min="1" max="3" value="2">
-                </div>
             </div>
-            <div class="tab-content" id="preset-tab">
-                <div class="preset-selector">
-                    <div class="preset-option" data-preset="french">
-                        <img src="/api/placeholder/120/120" alt="French Manicure">
-                        <p>French</p>
-                    </div>
-                    <div class="preset-option" data-preset="ombre">
-                        <img src="/api/placeholder/120/120" alt="Ombre Nails">
-                        <p>Ombre</p>
-                    </div>
-                    <div class="preset-option" data-preset="glitter">
-                        <img src="/api/placeholder/120/120" alt="Glitter Nails">
-                        <p>Glitter</p>
-                    </div>
-                    <div class="preset-option" data-preset="marble">
-                        <img src="/api/placeholder/120/120" alt="Marble Nails">
-                        <p>Marble</p>
-                    </div>
-                    <div class="preset-option" data-preset="metallic">
-                        <img src="/api/placeholder/120/120" alt="Metallic Nails">
-                        <p>Metallic</p>
-                    </div>
-                    <div class="preset-option" data-preset="galaxy">
-                        <img src="/api/placeholder/120/120" alt="Galaxy Nails">
-                        <p>Galaxy</p>
-                    </div>
-                </div>
             </div>
-            <div class="action-buttons">
-                <button class="btn btn-secondary" id="reset-btn">Reset</button>
-                <button class="btn btn-primary" id="capture-btn">Take Photo</button>
             </div>
         </div>
-    </div>
-    <div class="tutorial-overlay">
-        <div class="tutorial-content">
-            <h2>Welcome to AR Nail Polish</h2>
-            <p>Hold your hand in front of the camera to try different nail colors and designs in real-time!</p>
-            <p>Use the controls below to customize your virtual manicure.</p>
-            <button class="tutorial-btn">Get Started</button>
-        </div>
-    </div>
-    <div class="share-modal">
-        <div class="share-content">
-            <h2>Share Your Look</h2>
-            <div class="share-preview">
-                <img id="share-image" src="" alt="Your nail design">
             </div>
-            <div class="share-buttons">
-                <div class="share-btn" id="share-instagram">
-                    <div class="icon" style="background-color: #C13584;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white">
-                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
-                        </svg>
-                    </div>
-                    <p>Instagram</p>
-                </div>
-                <div class="share-btn" id="share-facebook">
-                    <div class="icon" style="background-color: #3b5998;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white">
-                            <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/>
-                        </svg>
-                    </div>
-                    <p>Facebook</p>
-                </div>
-                <div class="share-btn" id="share-download">
-                    <div class="icon" style="background-color: #4CAF50;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white">
-                            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
-                        </svg>
-                    </div>
-                    <p>Download</p>
-                </div>
             </div>
-            <button class="close-share">Close</button>
         </div>
     </div>
-    <script>
-        // Global variables
-        let video;
-        let canvas;
-        let ctx;
-        let cameraFacingMode = 'user'; // Default to front camera
-        let currentColor = '#f06292';
-        let currentOpacity = 1.0;
-        let currentTexture = null;
-        let textureOpacity = 0.5;
-        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');
-            const width = container.clientWidth;
-            const height = container.clientHeight;
-            canvas.width = width;
-            canvas.height = height;
-            debugCanvas.width = width;
-            debugCanvas.height = height;
-        }
-        // Initialize camera
-        function initCamera() {
-            const constraints = {
-                video: {
-                    facingMode: cameraFacingMode,
-                    width: { ideal: 1280 },
-                    height: { ideal: 720 }
-                }
-            };
-            // 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
-        function renderNails() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            // 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();
-        }
-        // Draw rounded nail shape
-        function drawRoundedNail(x, y, width, height) {
-            const radius = width * 0.5;
-            ctx.beginPath();
-            ctx.moveTo(x - width, y);
-            ctx.lineTo(x - width, y - height + radius);
-            ctx.quadraticCurveTo(x - width, y - height, x - width + radius, y - height);
-            ctx.lineTo(x + width - radius, y - height);
-            ctx.quadraticCurveTo(x + width, y - height, x + width, y - height + radius);
-            ctx.lineTo(x + width, y);
-            ctx.closePath();
-            ctx.fill();
-        }
-        // Draw oval nail shape
-        function drawOvalNail(x, y, width, height) {
-            ctx.beginPath();
-            ctx.ellipse(x, y - height/2, width, height/2, 0, 0, Math.PI * 2);
-            ctx.fill();
-        }
-        // Draw pointy nail shape
-        function drawPointyNail(x, y, width, height) {
-            ctx.beginPath();
-            ctx.moveTo(x - width, y);
-            ctx.lineTo(x - width, y - height * 0.6);
-            ctx.lineTo(x, y - height);
-            ctx.lineTo(x + width, y - height * 0.6);
-            ctx.lineTo(x + width, y);
-            ctx.closePath();
-            ctx.fill();
-        }
-        // Draw square nail shape
-        function drawSquareNail(x, y, width, height) {
-            ctx.beginPath();
-            ctx.rect(x - width, y - height, width * 2, height);
-            ctx.fill();
-        }
-        // Draw almond nail shape
-        function drawAlmondNail(x, y, width, height) {
-            ctx.beginPath();
-            ctx.moveTo(x - width, y);
-            ctx.quadraticCurveTo(x - width * 0.8, y - height * 0.6, x, y - height);
-            ctx.quadraticCurveTo(x + width * 0.8, y - height * 0.6, x + width, y);
-            ctx.closePath();
-            ctx.fill();
-        }
-        // Draw coffin nail shape
-        function drawCoffinNail(x, y, width, height) {
-            ctx.beginPath();
-            ctx.moveTo(x - width, y);
-            ctx.lineTo(x - width, y - height * 0.7);
-            ctx.lineTo(x - width * 0.5, y - height);
-            ctx.lineTo(x + width * 0.5, y - height);
-            ctx.lineTo(x + width, y - height * 0.7);
-            ctx.lineTo(x + width, y);
-            ctx.closePath();
-            ctx.fill();
-        }
-        // Apply texture to the nail
-        function applyTexture(x, y, width, height) {
-            ctx.globalAlpha = textureOpacity;
-            // Different texture patterns
-            switch(currentTexture) {
-                case 'grid':
-                    drawGridTexture(x, y, width, height);
-                    break;
-                case 'polka':
-                    drawPolkaDotTexture(x, y, width, height);
-                    break;
-                case 'stripes':
-                    drawStripedTexture(x, y, width, height);
-                    break;
-                case 'chevron':
-                    drawChevronTexture(x, y, width, height);
-                    break;
-                case 'stars':
-                    drawStarsTexture(x, y, width, height);
-                    break;
-                case 'hearts':
-                    drawHeartsTexture(x, y, width, height);
-                    break;
-                default:
-                    // No texture
-            }
-            ctx.globalAlpha = 1.0;
-        }
-        // Draw grid texture
-        function drawGridTexture(x, y, width, height) {
-            ctx.strokeStyle = '#000';
-            ctx.lineWidth = 1;
-            const gridSize = width * 0.3;
-            // Vertical lines
-            for (let i = -width; i <= width; i += gridSize) {
-                ctx.beginPath();
-                ctx.moveTo(x + i, y - height);
-                ctx.lineTo(x + i, y);
-                ctx.stroke();
-            }
-            // Horizontal lines
-            for (let i = 0; i <= height; i += gridSize) {
-                ctx.beginPath();
-                ctx.moveTo(x - width, y - i);
-                ctx.lineTo(x + width, y - i);
-                ctx.stroke();
-            }
-        }
-        // Draw polka dot texture
-        function drawPolkaDotTexture(x, y, width, height) {
-            ctx.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) {
-                    ctx.beginPath();
-                    ctx.arc(x + i, y + j, dotSize, 0, Math.PI * 2);
-                    ctx.fill();
-                }
-            }
-        }
-        // Draw striped texture
-        function drawStripedTexture(x, y, width, height) {
-            ctx.fillStyle = '#000';
-            const stripeWidth = width * 0.3;
-            for (let i = -width; i < width; i += stripeWidth * 2) {
-                ctx.fillRect(x + i, y - height, stripeWidth, height);
-            }
-        }
-        // Draw chevron texture
-        function drawChevronTexture(x, y, width, height) {
-            ctx.strokeStyle = '#000';
-            ctx.lineWidth = 2;
-            const chevronSize = width * 0.5;
-            for (let i = 0; i <= height + chevronSize; i += chevronSize) {
-                ctx.beginPath();
-                ctx.moveTo(x - width, y - i);
-                ctx.lineTo(x, y - i - chevronSize / 2);
-                ctx.lineTo(x + width, y - i);
-                ctx.stroke();
-            }
-        }
-        // Draw stars texture
-        function drawStarsTexture(x, y, width, height) {
-            ctx.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) {
-                    drawStar(x + i, y + j, 5, starSize * 0.5, starSize * 0.2);
-                }
-            }
-        }
-        // Draw a star shape
-        function drawStar(cx, cy, spikes, outerRadius, innerRadius) {
-            let rot = Math.PI / 2 * 3;
-            let x = cx;
-            let y = cy;
-            let step = Math.PI / spikes;
-            ctx.beginPath();
-            ctx.moveTo(cx, cy - outerRadius);
-            for (let i = 0; i < spikes; i++) {
-                x = cx + Math.cos(rot) * outerRadius;
-                y = cy + Math.sin(rot) * outerRadius;
-                ctx.lineTo(x, y);
-                rot += step;
-                x = cx + Math.cos(rot) * innerRadius;
-                y = cy + Math.sin(rot) * innerRadius;
-                ctx.lineTo(x, y);
-                rot += step;
-            }
-            ctx.lineTo(cx, cy - outerRadius);
-            ctx.closePath();
-            ctx.fill();
-        }
-        // Draw hearts texture
-        function drawHeartsTexture(x, y, width, height) {
-            ctx.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) {
-                    drawHeart(x + i, y + j, heartSize);
-                }
-            }
-        }
-        // Draw a heart shape
-        function drawHeart(x, y, size) {
-            ctx.beginPath();
-            ctx.moveTo(x, y - size * 0.3);
-            ctx.bezierCurveTo(
-                x, y - size * 0.7,
-                x - size, y - size * 0.7,
-                x - size, y - size * 0.3
-            );
-            ctx.bezierCurveTo(
-                x - size, y + size * 0.3,
-                x, y + size * 0.7,
-                x, y + size * 0.3
-            );
-            ctx.bezierCurveTo(
-                x, y + size * 0.7,
-                x + size, y + size * 0.3,
-                x + size, y - size * 0.3
-            );
-            ctx.bezierCurveTo(
-                x + size, y - size * 0.7,
-                x, y - size * 0.7,
-                x, y - size * 0.3
-            );
-            ctx.fill();
-        }
-        // Set up event listeners
-        function setupEventListeners() {
-            // Color selection
-            document.querySelectorAll('.color-option').forEach(function(option) {
-                option.addEventListener('click', function() {
-                    document.querySelectorAll('.color-option').forEach(el => el.classList.remove('selected'));
-                    this.classList.add('selected');
-                    currentColor = this.getAttribute('data-color');
-                });
-            });
-            // Texture selection
-            document.querySelectorAll('.texture-option').forEach(function(option) {
-                option.addEventListener('click', function() {
-                    document.querySelectorAll('.texture-option').forEach(el => el.classList.remove('selected'));
-                    this.classList.add('selected');
-                    currentTexture = this.getAttribute('data-texture');
-                });
-            });
-            // Shape selection
-            document.querySelectorAll('.shape-option').forEach(function(option) {
-                option.addEventListener('click', function() {
-                    document.querySelectorAll('.shape-option').forEach(el => el.classList.remove('selected'));
-                    this.classList.add('selected');
-                    currentShape = this.getAttribute('data-shape');
-                });
-            });
-            // Preset selection
-            document.querySelectorAll('.preset-option').forEach(function(option) {
-                option.addEventListener('click', function() {
-                    document.querySelectorAll('.preset-option').forEach(el => el.classList.remove('selected'));
-                    this.classList.add('selected');
-                    applyPreset(this.getAttribute('data-preset'));
-                });
-            });
-            // Opacity slider
-            document.getElementById('opacity-slider').addEventListener('input', function() {
-                currentOpacity = this.value / 100;
-                document.getElementById('opacity-value').textContent = this.value + '%';
-            });
-            // Texture opacity slider
-            document.getElementById('texture-opacity-slider').addEventListener('input', function() {
-                textureOpacity = this.value / 100;
-                document.getElementById('texture-opacity-value').textContent = this.value + '%';
-            });
-            // Length slider
-            document.getElementById('length-slider').addEventListener('input', function() {
-                currentLength = parseInt(this.value);
-                let lengthText = 'Medium';
-                if (currentLength === 1) lengthText = 'Short';
-                else if (currentLength === 3) lengthText = 'Long';
-                document.getElementById('length-value').textContent = lengthText;
-            });
-            // Width slider
-            document.getElementById('width-slider').addEventListener('input', function() {
-                currentWidth = parseInt(this.value);
-                let widthText = 'Medium';
-                if (currentWidth === 1) widthText = 'Narrow';
-                else if (currentWidth === 3) widthText = 'Wide';
-                document.getElementById('width-value').textContent = widthText;
-            });
-            // Tabs
-            document.querySelectorAll('.tab').forEach(function(tab) {
-                tab.addEventListener('click', function() {
-                    const tabId = this.getAttribute('data-tab');
-                    // Update active tab
-                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-                    this.classList.add('active');
-                    // Show active content
-                    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
-                    document.getElementById(tabId + '-tab').classList.add('active');
-                });
-            });
-            // 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.getElementById('reset-btn').addEventListener('click', function() {
-                // Reset to defaults
-                currentColor = '#f06292';
-                currentOpacity = 1.0;
-                currentTexture = null;
-                textureOpacity = 0.5;
-                currentShape = 'rounded';
-                currentLength = 2;
-                currentWidth = 2;
-                // Reset UI elements
-                document.querySelectorAll('.color-option').forEach(el => el.classList.remove('selected'));
-                document.querySelector('.color-option[data-color="#f06292"]').classList.add('selected');
-                document.querySelectorAll('.texture-option').forEach(el => el.classList.remove('selected'));
-                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('texture-opacity-slider').value = 50;
-                document.getElementById('texture-opacity-value').textContent = '50%';
-                document.getElementById('length-slider').value = 2;
-                document.getElementById('length-value').textContent = 'Medium';
-                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
-        function hexToRgba(hex, alpha) {
-            const r = parseInt(hex.slice(1, 3), 16);
-            const g = parseInt(hex.slice(3, 5), 16);
-            const b = parseInt(hex.slice(5, 7), 16);
-            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-        }
-    </script>
 </body>
 </html>

 <!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>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      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;
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      touch-action: none;
+    }
+    .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    .input_video {
+      display: none;
+    }
+    .output_canvas {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      object-fit: cover;
+    }
+    .controls-container {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding: 20px;
+      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;
+      font-weight: 600;
+      margin-bottom: 12px;
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+    }
+    .design-options {
+      display: flex;
+      overflow-x: auto;
+      padding-bottom: 8px;
+      gap: 12px;
+      scrollbar-width: none;
+    }
+    .design-options::-webkit-scrollbar {
+      display: none;
+    }
+    .design-option {
+      width: 60px;
+      height: 60px;
+      border-radius: 12px;
+      overflow: hidden;
+      position: relative;
+      border: 2px solid transparent;
+      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);
+    }
+    .design-option img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .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;
+      width: 100%;
+      height: 4px;
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 2px;
+      outline: none;
+    }
+    .slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: white;
+      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;
+      height: 24px;
+      border-radius: 12px;
+      background-color: rgba(255, 255, 255, 0.3);
+      transition: all 0.3s ease;
+    }
+    .toggle.active {
+      background-color: #3a86ff;
+    }
+    .toggle-handle {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: white;
+      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;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background-color: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+      z-index: 20;
+      border: none;
+      outline: none;
+    }
+    .snap-button:active {
+      transform: translateX(-50%) scale(0.95);
+    }
+    .snap-button::after {
+      content: '';
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      border: 2px solid #f8f8f8;
+    }
+    .camera-flip {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      background: rgba(0, 0, 0, 0.5);
+      color: white;
+      border: none;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 20;
+      font-size: 18px;
+    }
+    .loading-screen {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #000;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 9999;
+      transition: opacity 0.5s ease;
+    }
+    .loading-spinner {
+      width: 50px;
+      height: 50px;
+      border: 3px solid rgba(255, 255, 255, 0.2);
+      border-radius: 50%;
+      border-top-color: white;
+      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;
+      left: 20px;
+      color: white;
+      font-size: 18px;
+      font-weight: 600;
+      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+      z-index: 20;
+    }
+  </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">
+        <path d="M9 16V10H15"></path>
+        <path d="M15 16L9 10"></path>
+        <path d="M12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21C7.029 21 3 16.971 3 12"></path>
+        <path d="M3 4V8H7"></path>
+      </svg>
+    </button>
+    <button class="snap-button"></button>
+    <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="gradient">
+              <img src="https://i.ibb.co/2WyMYRq/gradient.jpg" alt="Gradient Nails">
             </div>
+            <div class="design-option" data-design="marble">
+              <img src="https://i.ibb.co/LgTT2B0/marble.jpg" alt="Marble Nails">
             </div>
+            <div class="design-option" data-design="holographic">
+              <img src="https://i.ibb.co/pP9Xnzq/holographic.jpg" alt="Holographic Nails">
             </div>
+            <div class="design-option" data-design="glitter">
+              <img src="https://i.ibb.co/S0ThyfD/glitter.jpg" alt="Glitter Nails">
             </div>
+            <div class="design-option" data-design="french">
+              <img src="https://i.ibb.co/9sZsq2f/french.jpg" alt="French Manicure">
             </div>
+            <div class="design-option" data-design="matte">
+              <img src="https://i.ibb.co/QC5tDn2/matte.jpg" alt="Matte Finish">
             </div>
+          </div>
+        </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">
+          </div>
+          <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">
+          </div>
+          <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">
+          </div>
         </div>
+        <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>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
+  <script>
+    // Define nail patterns and their properties
+    const nailPatterns = {
+      gradient: {
+        image: 'https://i.ibb.co/2WyMYRq/gradient.jpg',
+        shadowColor: 'rgba(255, 100, 150, 0.3)'
+      },
+      marble: {
+        image: 'https://i.ibb.co/LgTT2B0/marble.jpg',
+        shadowColor: 'rgba(200, 200, 200, 0.3)'
+      },
+      holographic: {
+        image: 'https://i.ibb.co/pP9Xnzq/holographic.jpg',
+        shadowColor: 'rgba(100, 200, 255, 0.3)'
+      },
+      glitter: {
+        image: 'https://i.ibb.co/S0ThyfD/glitter.jpg',
+        shadowColor: 'rgba(255, 215, 0, 0.3)'
+      },
+      french: {
+        image: 'https://i.ibb.co/9sZsq2f/french.jpg',
+        shadowColor: 'rgba(255, 255, 255, 0.3)'
+      },
+      matte: {
+        image: 'https://i.ibb.co/QC5tDn2/matte.jpg',
+        shadowColor: 'rgba(100, 100, 100, 0.3)'
+      }
+    };
+    // Nail design images preloading
+    const nailImages = {};
+    let loadedImages = 0;
+    const totalImages = Object.keys(nailPatterns).length;
+    for (const design in nailPatterns) {
+      nailImages[design] = new Image();
+      nailImages[design].onload = () => {
+        loadedImages++;
+        if (loadedImages === totalImages) {
+          // All images loaded, hide loading screen
+          document.querySelector('.loading-screen').style.opacity = 0;
+          setTimeout(() => {
+            document.querySelector('.loading-screen').style.display = 'none';
+          }, 500);
+        }
+      };
+      nailImages[design].src = nailPatterns[design].image;
+    }
+    // Initialize variables
+    let currentDesign = 'gradient';
+    let sizeScale = 1.0;
+    let lengthScale = 1.0;
+    let opacityValue = 1.0;
+    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');
+    const lengthValue = document.getElementById('length-value');
+    const opacitySlider = document.getElementById('opacity-slider');
+    const opacityValue = document.getElementById('opacity-value');
+    const shadowToggle = document.getElementById('shadow-toggle');
+    const linesToggle = document.getElementById('lines-toggle');
+    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) => {
+      opacityValue = 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 = nailPatterns[design].shadowColor;
+        ctx.shadowBlur = 15;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 5;
+        ctx.fillStyle = 'rgba(0,0,0,0)';
+        ctx.beginPath();
+        ctx.ellipse(0, 0, nailWidth/2, nailLength/2, 0, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      }
+      // Draw nail shape (ellipse)
+      ctx.beginPath();
+      ctx.ellipse(0, 0, nailWidth/2, nailLength/2, 0, 0, Math.PI * 2);
+      ctx.clip();
+      // Draw the nail design pattern
+      ctx.globalAlpha = opacityValue;
+      ctx.drawImage(
+        nailImages[design],
+        -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;
+    });
+  </script>
 </body>
 </html>