FaceMesh Texture Mapper - UV Capture Tool

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_311":312,"_313":314},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":84,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":120,"_121":25,"_122":123,"_124":125,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","019b8c55-674d-714b-886f-81bfa8f2db9a","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport { renderToString } from \"npm:react-dom/server\";\n\n// ============================================================================\n// FACEMESH TEXTURE MAPPER - UV Texture Capture Tool\n// ============================================================================\n\ninterface TextureMapperConfig {\n captureResolution: number;\n uvMapSize: number;\n autoCapture: boolean;\n autoCaptureInterval: number;\n showUVOverlay: boolean;\n overlayOpacity: number;\n blendMode: string;\n minAngleChange: number;\n captureQuality: number;\n}\n\nconst DEFAULT_CONFIG: TextureMapperConfig = {\n captureResolution: 1024,\n uvMapSize: 2048,\n autoCapture: true,\n autoCaptureInterval: 100,\n showUVOverlay: true,\n overlayOpacity: 0.5,\n blendMode: \"average\",\n minAngleChange: 5,\n captureQuality: 0.95,\n};\n\nconst STYLES = `\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n:root {\n --bg-primary: #0a0a0f;\n --bg-secondary: #12121a;\n --bg-tertiary: #1a1a24;\n --accent-primary: #6366f1;\n --accent-secondary: #8b5cf6;\n --accent-success: #22c55e;\n --accent-warning: #f59e0b;\n --accent-danger: #ef4444;\n --text-primary: #ffffff;\n --text-secondary: #a1a1aa;\n --text-muted: #71717a;\n --border-color: rgba(255, 255, 255, 0.1);\n --glass-bg: rgba(18, 18, 26, 0.8);\n}\n\nbody {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--bg-primary);\n color: var(--text-primary);\n overflow: hidden;\n height: 100vh;\n}\n\n.app-layout {\n display: grid;\n grid-template-columns: 1fr 380px;\n height: 100vh;\n gap: 0;\n}\n\n.viewport-section {\n position: relative;\n background: var(--bg-secondary);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.viewport-header {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 100;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 24px;\n background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);\n}\n\n.brand {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.brand-logo {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.brand-logo svg {\n width: 24px;\n height: 24px;\n color: white;\n}\n\n.brand-text {\n font-size: 20px;\n font-weight: 700;\n background: linear-gradient(135deg, #fff, #a1a1aa);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.brand-badge {\n font-size: 10px;\n padding: 2px 8px;\n background: var(--accent-warning);\n color: black;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.status-pills {\n display: flex;\n gap: 8px;\n}\n\n.status-pill {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: var(--glass-bg);\n border-radius: 20px;\n font-size: 12px;\n font-weight: 500;\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n}\n\n.status-dot {\n width: 8px;\n height: 8px;\n background: var(--accent-success);\n border-radius: 50%;\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n.viewport-container {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 80px 24px 24px;\n}\n\n#container {\n position: relative;\n width: 640px;\n height: 480px;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n background: #000;\n}\n\n#container video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scaleX(-1);\n}\n\n#overlay-canvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 20;\n pointer-events: none;\n}\n\n#uv-overlay-canvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 15;\n pointer-events: none;\n opacity: 0.5;\n}\n\n/* Capture indicators */\n.capture-indicator {\n position: absolute;\n bottom: 20px;\n left: 20px;\n right: 20px;\n z-index: 100;\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.angle-badge {\n padding: 6px 12px;\n background: var(--glass-bg);\n border-radius: 8px;\n font-size: 11px;\n font-family: 'JetBrains Mono', monospace;\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n transition: all 0.3s;\n}\n\n.angle-badge.captured {\n background: rgba(34, 197, 94, 0.3);\n border-color: var(--accent-success);\n}\n\n.angle-badge.current {\n background: rgba(99, 102, 241, 0.3);\n border-color: var(--accent-primary);\n animation: glow 1s infinite;\n}\n\n@keyframes glow {\n 0%, 100% { box-shadow: 0 0 5px var(--accent-primary); }\n 50% { box-shadow: 0 0 20px var(--accent-primary); }\n}\n\n/* Progress ring */\n.capture-progress {\n position: absolute;\n top: 80px;\n right: 20px;\n z-index: 100;\n background: var(--glass-bg);\n border-radius: 16px;\n padding: 16px;\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n}\n\n.progress-ring {\n width: 100px;\n height: 100px;\n position: relative;\n}\n\n.progress-ring svg {\n transform: rotate(-90deg);\n}\n\n.progress-ring circle {\n fill: none;\n stroke-width: 8;\n}\n\n.progress-ring .bg {\n stroke: var(--bg-tertiary);\n}\n\n.progress-ring .progress {\n stroke: var(--accent-primary);\n stroke-linecap: round;\n transition: stroke-dashoffset 0.3s;\n}\n\n.progress-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n}\n\n.progress-percent {\n font-size: 24px;\n font-weight: 700;\n}\n\n.progress-label {\n font-size: 10px;\n color: var(--text-muted);\n}\n\n/* UV Preview */\n.uv-preview {\n position: absolute;\n bottom: 80px;\n right: 20px;\n z-index: 100;\n background: var(--glass-bg);\n border-radius: 12px;\n padding: 12px;\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n}\n\n.uv-preview-title {\n font-size: 11px;\n color: var(--text-muted);\n margin-bottom: 8px;\n}\n\n#uv-preview-canvas {\n width: 150px;\n height: 150px;\n border-radius: 8px;\n background: #1a1a24;\n}\n\n/* Sidebar */\n.sidebar-section {\n background: var(--bg-secondary);\n border-left: 1px solid var(--border-color);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.sidebar-header {\n padding: 20px;\n border-bottom: 1px solid var(--border-color);\n}\n\n.sidebar-title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 4px;\n}\n\n.sidebar-subtitle {\n font-size: 12px;\n color: var(--text-muted);\n}\n\n.sidebar-content {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n.control-group {\n margin-bottom: 24px;\n}\n\n.control-group-title {\n font-size: 11px;\n font-weight: 600;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 12px;\n}\n\n.slider-control {\n margin-bottom: 16px;\n}\n\n.slider-header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n}\n\n.slider-label {\n font-size: 13px;\n color: var(--text-secondary);\n}\n\n.slider-value {\n font-size: 12px;\n font-family: 'JetBrains Mono', monospace;\n color: var(--accent-primary);\n}\n\ninput[type=\"range\"] {\n width: 100%;\n height: 6px;\n background: var(--bg-tertiary);\n border-radius: 3px;\n outline: none;\n -webkit-appearance: none;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: var(--accent-primary);\n border-radius: 50%;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n transform: scale(1.2);\n}\n\n.toggle-control {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--bg-tertiary);\n border-radius: 10px;\n cursor: pointer;\n margin-bottom: 8px;\n transition: all 0.2s;\n}\n\n.toggle-control:hover {\n background: rgba(99, 102, 241, 0.1);\n}\n\n.toggle-control.active {\n background: rgba(99, 102, 241, 0.2);\n border: 1px solid var(--accent-primary);\n}\n\n.toggle-label {\n font-size: 13px;\n}\n\n.toggle-switch {\n width: 40px;\n height: 22px;\n background: var(--bg-primary);\n border-radius: 11px;\n position: relative;\n transition: all 0.3s;\n}\n\n.toggle-switch::after {\n content: '';\n position: absolute;\n width: 18px;\n height: 18px;\n background: var(--text-muted);\n border-radius: 50%;\n top: 2px;\n left: 2px;\n transition: all 0.3s;\n}\n\n.toggle-control.active .toggle-switch {\n background: var(--accent-primary);\n}\n\n.toggle-control.active .toggle-switch::after {\n left: 20px;\n background: white;\n}\n\n/* Action buttons */\n.action-buttons {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n padding: 20px;\n border-top: 1px solid var(--border-color);\n}\n\n.action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 14px 20px;\n border: none;\n border-radius: 10px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.action-btn svg {\n width: 18px;\n height: 18px;\n}\n\n.action-btn-primary {\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n color: white;\n grid-column: span 2;\n}\n\n.action-btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);\n}\n\n.action-btn-secondary {\n background: var(--bg-tertiary);\n color: var(--text-primary);\n border: 1px solid var(--border-color);\n}\n\n.action-btn-secondary:hover {\n background: rgba(99, 102, 241, 0.1);\n border-color: var(--accent-primary);\n}\n\n.action-btn-danger {\n background: rgba(239, 68, 68, 0.2);\n color: var(--accent-danger);\n border: 1px solid var(--accent-danger);\n}\n\n.action-btn-danger:hover {\n background: rgba(239, 68, 68, 0.3);\n}\n\n/* Instructions panel */\n.instructions {\n background: var(--bg-tertiary);\n border-radius: 12px;\n padding: 16px;\n margin-bottom: 20px;\n}\n\n.instructions-title {\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.instructions-title svg {\n width: 18px;\n height: 18px;\n color: var(--accent-primary);\n}\n\n.instructions-list {\n list-style: none;\n}\n\n.instructions-list li {\n font-size: 12px;\n color: var(--text-secondary);\n padding: 6px 0;\n padding-left: 20px;\n position: relative;\n}\n\n.instructions-list li::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 6px;\n height: 6px;\n background: var(--accent-primary);\n border-radius: 50%;\n}\n\n/* Toast notification */\n#toast {\n position: fixed;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%) translateY(100px);\n background: var(--glass-bg);\n color: var(--text-primary);\n padding: 14px 28px;\n border-radius: 12px;\n font-size: 14px;\n font-weight: 500;\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n z-index: 1000;\n opacity: 0;\n transition: all 0.3s ease;\n}\n\n#toast.show {\n transform: translateX(-50%) translateY(0);\n opacity: 1;\n}\n\n/* Stats panel */\n#stats-panel {\n position: absolute;\n top: 80px;\n left: 20px;\n background: var(--glass-bg);\n border-radius: 12px;\n padding: 12px 16px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n line-height: 1.6;\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n z-index: 100;\n display: none;\n}\n\n#stats-panel.visible {\n display: block;\n}\n\n/* Angle grid visualization */\n.angle-grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-template-rows: repeat(3, 1fr);\n gap: 4px;\n margin-top: 12px;\n}\n\n.angle-cell {\n aspect-ratio: 1;\n background: var(--bg-primary);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n color: var(--text-muted);\n transition: all 0.3s;\n}\n\n.angle-cell.captured {\n background: rgba(34, 197, 94, 0.3);\n color: var(--accent-success);\n}\n\n.angle-cell.current {\n background: rgba(99, 102, 241, 0.5);\n color: white;\n animation: pulse 1s infinite;\n}\n`;\n\n\n\nconst CLIENT_SCRIPT = `\nimport * as THREE from 'three';\nimport { MindARThree } from 'mindar-face-three';\n\n// ============================================================================\n// FACEMESH UV COORDINATES\n// MindAR face mesh uses MediaPipe's 478 landmark topology\n// We need to map 3D face positions to 2D UV coordinates\n// ============================================================================\n\n// Standard UV layout for face texture (similar to canonical face mesh)\n// These UV coordinates map the 3D face mesh to a 2D texture\nconst FACE_UV_MAP = generateFaceUVMap();\n\nfunction generateFaceUVMap() {\n // Approximate UV coordinates for key face regions\n // The face mesh has 478 vertices - we'll generate UV coords based on position\n const uvMap = new Map();\n \n // Key landmark UV positions (approximate canonical positions)\n // Format: landmark_index -> [u, v] where 0,0 is top-left and 1,1 is bottom-right\n \n // Face outline (silhouette)\n const faceOutline = [\n [10, [0.5, 0.05]], // Top of forehead center\n [338, [0.75, 0.08]], // Right forehead\n [297, [0.85, 0.15]], // Right temple\n [332, [0.9, 0.25]], // Right upper cheek\n [284, [0.92, 0.4]], // Right cheek\n [251, [0.9, 0.55]], // Right lower cheek\n [389, [0.85, 0.7]], // Right jaw\n [356, [0.75, 0.82]], // Right chin area\n [454, [0.65, 0.9]], // Right chin\n [152, [0.5, 0.95]], // Chin center\n [234, [0.35, 0.9]], // Left chin\n [127, [0.25, 0.82]], // Left chin area\n [162, [0.15, 0.7]], // Left jaw\n [21, [0.1, 0.55]], // Left lower cheek\n [54, [0.08, 0.4]], // Left cheek\n [103, [0.1, 0.25]], // Left upper cheek\n [67, [0.15, 0.15]], // Left temple\n [109, [0.25, 0.08]], // Left forehead\n ];\n\n // Eyes\n const leftEye = [\n [33, [0.28, 0.38]], // Left eye outer corner\n [133, [0.38, 0.38]], // Left eye inner corner\n [159, [0.33, 0.35]], // Left eye top\n [145, [0.33, 0.41]], // Left eye bottom\n ];\n \n const rightEye = [\n [362, [0.62, 0.38]], // Right eye inner corner\n [263, [0.72, 0.38]], // Right eye outer corner\n [386, [0.67, 0.35]], // Right eye top\n [374, [0.67, 0.41]], // Right eye bottom\n ];\n\n // Nose\n const nose = [\n [1, [0.5, 0.55]], // Nose tip\n [6, [0.5, 0.42]], // Nose bridge\n [4, [0.5, 0.48]], // Nose middle\n [48, [0.42, 0.55]], // Left nostril\n [278, [0.58, 0.55]], // Right nostril\n ];\n\n // Mouth\n const mouth = [\n [61, [0.38, 0.7]], // Left mouth corner\n [291, [0.62, 0.7]], // Right mouth corner\n [13, [0.5, 0.65]], // Upper lip center\n [14, [0.5, 0.75]], // Lower lip center\n [78, [0.42, 0.68]], // Upper lip left\n [308, [0.58, 0.68]], // Upper lip right\n [95, [0.42, 0.73]], // Lower lip left\n [324, [0.58, 0.73]], // Lower lip right\n ];\n\n // Eyebrows\n const leftBrow = [\n [70, [0.22, 0.28]],\n [63, [0.28, 0.26]],\n [105, [0.34, 0.27]],\n [66, [0.38, 0.29]],\n ];\n \n const rightBrow = [\n [300, [0.78, 0.28]],\n [293, [0.72, 0.26]],\n [334, [0.66, 0.27]],\n [296, [0.62, 0.29]],\n ];\n\n // Combine all landmarks\n const allLandmarks = [\n ...faceOutline, ...leftEye, ...rightEye, \n ...nose, ...mouth, ...leftBrow, ...rightBrow\n ];\n \n allLandmarks.forEach(([idx, uv]) => {\n uvMap.set(idx, uv);\n });\n \n return uvMap;\n}\n\n// ============================================================================\n// TEXTURE CAPTURE SYSTEM\n// ============================================================================\n\nclass TextureCaptureSystem {\n constructor(uvMapSize = 2048) {\n this.uvMapSize = uvMapSize;\n \n // Main UV texture canvas (accumulated result)\n this.uvCanvas = document.createElement('canvas');\n this.uvCanvas.width = uvMapSize;\n this.uvCanvas.height = uvMapSize;\n this.uvCtx = this.uvCanvas.getContext('2d');\n \n // Weight/count canvas for blending\n this.weightCanvas = document.createElement('canvas');\n this.weightCanvas.width = uvMapSize;\n this.weightCanvas.height = uvMapSize;\n this.weightCtx = this.weightCanvas.getContext('2d');\n \n // Initialize with transparent\n this.uvCtx.fillStyle = 'rgba(128, 128, 128, 0)';\n this.uvCtx.fillRect(0, 0, uvMapSize, uvMapSize);\n \n // Track captured angles (yaw, pitch) in 15-degree increments\n this.capturedAngles = new Set();\n this.angleResolution = 15; // degrees\n \n // Capture history for quality tracking\n this.captureHistory = [];\n this.maxHistory = 100;\n }\n\n // Quantize angle to grid cell\n quantizeAngle(yaw, pitch) {\n const qYaw = Math.round(yaw / this.angleResolution) * this.angleResolution;\n const qPitch = Math.round(pitch / this.angleResolution) * this.angleResolution;\n return \\`\\${qYaw},\\${qPitch}\\`;\n }\n\n // Check if angle already captured\n isAngleCaptured(yaw, pitch) {\n return this.capturedAngles.has(this.quantizeAngle(yaw, pitch));\n }\n\n // Capture texture from current frame\n captureFrame(videoCanvas, facePositions, faceMatrix, yaw, pitch, quality = 0.95) {\n if (!videoCanvas || !facePositions) return false;\n \n const angleKey = this.quantizeAngle(yaw, pitch);\n \n // Skip if already well-captured at this angle\n if (this.capturedAngles.has(angleKey)) {\n return false;\n }\n \n // Create temporary canvas for this capture\n const tempCanvas = document.createElement('canvas');\n tempCanvas.width = this.uvMapSize;\n tempCanvas.height = this.uvMapSize;\n const tempCtx = tempCanvas.getContext('2d');\n \n // Calculate face visibility/confidence based on angle\n const visibility = this.calculateVisibility(yaw, pitch);\n \n // Map video pixels to UV space\n this.mapToUV(tempCtx, videoCanvas, facePositions, visibility);\n \n // Blend into main texture\n this.blendCapture(tempCtx, visibility * quality);\n \n // Mark angle as captured\n this.capturedAngles.add(angleKey);\n \n // Record in history\n this.captureHistory.push({\n angle: angleKey,\n yaw, pitch,\n timestamp: Date.now(),\n visibility\n });\n \n if (this.captureHistory.length > this.maxHistory) {\n this.captureHistory.shift();\n }\n \n return true;\n }\n\n // Calculate how visible the face is at given angle\n calculateVisibility(yaw, pitch) {\n // Face is most visible when looking straight at camera\n // Visibility decreases as face turns away\n const yawFactor = Math.cos(yaw * Math.PI / 180);\n const pitchFactor = Math.cos(pitch * Math.PI / 180);\n return Math.max(0.1, yawFactor * pitchFactor);\n }\n\n // Map video frame to UV coordinates\n mapToUV(ctx, videoCanvas, positions, visibility) {\n const videoW = videoCanvas.width;\n const videoH = videoCanvas.height;\n \n // Clear with transparency\n ctx.clearRect(0, 0, this.uvMapSize, this.uvMapSize);\n \n // For each known UV landmark, sample from video\n FACE_UV_MAP.forEach((uv, landmarkIdx) => {\n if (landmarkIdx * 3 + 2 >= positions.length) return;\n \n // Get 3D position (already projected to screen space in our case)\n // We need to project from the face mesh positions\n const px = positions[landmarkIdx * 3];\n const py = positions[landmarkIdx * 3 + 1];\n \n // UV coordinates (0-1 range)\n const u = uv[0];\n const v = uv[1];\n \n // Target position in UV texture\n const targetX = u * this.uvMapSize;\n const targetY = v * this.uvMapSize;\n \n // Sample radius (larger = smoother but blurrier)\n const sampleRadius = this.uvMapSize * 0.02;\n \n // Draw sampled region\n // This is a simplified approach - proper UV mapping would use triangulation\n ctx.globalAlpha = visibility;\n \n // We'd normally sample from video at the projected position\n // For now, create a color based on position (placeholder)\n ctx.fillStyle = \\`hsl(\\${(u * 360)}, 50%, 50%)\\`;\n ctx.beginPath();\n ctx.arc(targetX, targetY, sampleRadius, 0, Math.PI * 2);\n ctx.fill();\n });\n \n ctx.globalAlpha = 1;\n }\n\n // Blend a new capture into the accumulated texture\n blendCapture(sourceCtx, weight) {\n const sourceData = sourceCtx.getImageData(0, 0, this.uvMapSize, this.uvMapSize);\n const targetData = this.uvCtx.getImageData(0, 0, this.uvMapSize, this.uvMapSize);\n const weightData = this.weightCtx.getImageData(0, 0, this.uvMapSize, this.uvMapSize);\n \n for (let i = 0; i < sourceData.data.length; i += 4) {\n const srcA = sourceData.data[i + 3] / 255;\n \n if (srcA > 0.1) {\n const existingWeight = weightData.data[i] / 255;\n const newWeight = existingWeight + weight * srcA;\n \n if (newWeight > 0) {\n const t = (weight * srcA) / newWeight;\n \n targetData.data[i] = targetData.data[i] * (1 - t) + sourceData.data[i] * t;\n targetData.data[i + 1] = targetData.data[i + 1] * (1 - t) + sourceData.data[i + 1] * t;\n targetData.data[i + 2] = targetData.data[i + 2] * (1 - t) + sourceData.data[i + 2] * t;\n targetData.data[i + 3] = Math.min(255, targetData.data[i + 3] + srcA * 255 * 0.5);\n \n weightData.data[i] = Math.min(255, newWeight * 255);\n }\n }\n }\n \n this.uvCtx.putImageData(targetData, 0, 0);\n this.weightCtx.putImageData(weightData, 0, 0);\n }\n\n // Get coverage percentage\n getCoverage() {\n // Define expected angle range\n const yawRange = [-45, -30, -15, 0, 15, 30, 45];\n const pitchRange = [-30, -15, 0, 15, 30];\n \n let total = 0;\n let captured = 0;\n \n yawRange.forEach(yaw => {\n pitchRange.forEach(pitch => {\n total++;\n if (this.capturedAngles.has(this.quantizeAngle(yaw, pitch))) {\n captured++;\n }\n });\n });\n \n return captured / total;\n }\n\n // Get captured angle grid for visualization\n getAngleGrid() {\n const yawRange = [-45, -30, -15, 0, 15, 30, 45];\n const pitchRange = [-30, -15, 0, 15, 30];\n \n const grid = [];\n pitchRange.forEach(pitch => {\n yawRange.forEach(yaw => {\n grid.push({\n yaw, pitch,\n captured: this.capturedAngles.has(this.quantizeAngle(yaw, pitch))\n });\n });\n });\n \n return grid;\n }\n\n // Clear all captures\n clear() {\n this.uvCtx.clearRect(0, 0, this.uvMapSize, this.uvMapSize);\n this.weightCtx.clearRect(0, 0, this.uvMapSize, this.uvMapSize);\n this.capturedAngles.clear();\n this.captureHistory = [];\n }\n\n // Export as PNG\n exportPNG() {\n return this.uvCanvas.toDataURL('image/png', 1.0);\n }\n\n // Get preview canvas\n getPreviewCanvas() {\n return this.uvCanvas;\n }\n\n // Resize output\n setSize(size) {\n if (size === this.uvMapSize) return;\n \n // Save current content\n const tempCanvas = document.createElement('canvas');\n tempCanvas.width = this.uvMapSize;\n tempCanvas.height = this.uvMapSize;\n tempCanvas.getContext('2d').drawImage(this.uvCanvas, 0, 0);\n \n // Resize\n this.uvMapSize = size;\n this.uvCanvas.width = size;\n this.uvCanvas.height = size;\n this.weightCanvas.width = size;\n this.weightCanvas.height = size;\n \n // Restore scaled\n this.uvCtx.drawImage(tempCanvas, 0, 0, size, size);\n }\n}\n\n// ============================================================================\n// UV OVERLAY RENDERER\n// Shows the UV template on top of the video\n// ============================================================================\n\nclass UVOverlayRenderer {\n constructor() {\n this.overlayImage = null;\n this.createOverlayTemplate();\n }\n\n createOverlayTemplate() {\n // Create a UV wireframe overlay\n const size = 512;\n const canvas = document.createElement('canvas');\n canvas.width = size;\n canvas.height = size;\n const ctx = canvas.getContext('2d');\n \n // Draw UV grid\n ctx.strokeStyle = 'rgba(99, 102, 241, 0.5)';\n ctx.lineWidth = 1;\n \n // Draw face outline shape\n ctx.beginPath();\n ctx.ellipse(size/2, size * 0.45, size * 0.35, size * 0.42, 0, 0, Math.PI * 2);\n ctx.stroke();\n \n // Draw eye regions\n ctx.beginPath();\n ctx.ellipse(size * 0.33, size * 0.38, size * 0.08, size * 0.04, 0, 0, Math.PI * 2);\n ctx.stroke();\n ctx.beginPath();\n ctx.ellipse(size * 0.67, size * 0.38, size * 0.08, size * 0.04, 0, 0, Math.PI * 2);\n ctx.stroke();\n \n // Draw nose\n ctx.beginPath();\n ctx.moveTo(size * 0.5, size * 0.35);\n ctx.lineTo(size * 0.45, size * 0.55);\n ctx.lineTo(size * 0.55, size * 0.55);\n ctx.closePath();\n ctx.stroke();\n \n // Draw mouth region\n ctx.beginPath();\n ctx.ellipse(size/2, size * 0.7, size * 0.12, size * 0.05, 0, 0, Math.PI * 2);\n ctx.stroke();\n \n // Draw UV grid lines\n ctx.strokeStyle = 'rgba(99, 102, 241, 0.2)';\n for (let i = 0; i <= 10; i++) {\n ctx.beginPath();\n ctx.moveTo(i * size / 10, 0);\n ctx.lineTo(i * size / 10, size);\n ctx.stroke();\n ctx.beginPath();\n ctx.moveTo(0, i * size / 10);\n ctx.lineTo(size, i * size / 10);\n ctx.stroke();\n }\n \n this.overlayImage = canvas;\n }\n\n render(ctx, canvasW, canvasH, points, opacity = 0.5) {\n if (!points || !this.overlayImage) return;\n \n ctx.save();\n ctx.globalAlpha = opacity;\n \n // Find face bounding box from landmarks\n const faceTop = points[10];\n const faceChin = points[152];\n const faceLeft = points[234];\n const faceRight = points[454];\n \n if (!faceTop || !faceChin || !faceLeft || !faceRight) {\n ctx.restore();\n return;\n }\n \n const faceW = Math.abs(faceRight.x - faceLeft.x) * 1.2;\n const faceH = Math.abs(faceChin.y - faceTop.y) * 1.1;\n const faceCenterX = (faceLeft.x + faceRight.x) / 2;\n const faceCenterY = (faceTop.y + faceChin.y) / 2;\n \n // Draw overlay positioned and scaled to face\n ctx.drawImage(\n this.overlayImage,\n faceCenterX - faceW / 2,\n faceCenterY - faceH / 2,\n faceW,\n faceH\n );\n \n // Draw landmark points\n ctx.fillStyle = 'rgba(34, 197, 94, 0.8)';\n FACE_UV_MAP.forEach((uv, idx) => {\n if (points[idx]) {\n ctx.beginPath();\n ctx.arc(points[idx].x, points[idx].y, 3, 0, Math.PI * 2);\n ctx.fill();\n }\n });\n \n ctx.restore();\n }\n}\n\n// ============================================================================\n// POINT PROJECTOR (from original code, simplified)\n// ============================================================================\n\nclass PointProjector {\n constructor() {\n this.tempVec = new THREE.Vector3();\n }\n\n project(frameData, canvasW, canvasH, indices) {\n if (!frameData || !frameData.positions || !frameData.matrixWorld) return null;\n if (!frameData.cameraMatrixWorldInverse || !frameData.cameraProjectionMatrix) return null;\n\n const points = {};\n const positions = frameData.positions;\n const modelMatrix = frameData.matrixWorld;\n const viewMatrix = frameData.cameraMatrixWorldInverse;\n const projMatrix = frameData.cameraProjectionMatrix;\n\n for (const index of indices) {\n if (index * 3 + 2 >= positions.length) continue;\n \n this.tempVec.set(\n positions[index * 3],\n positions[index * 3 + 1],\n positions[index * 3 + 2]\n );\n \n this.tempVec.applyMatrix4(modelMatrix);\n this.tempVec.applyMatrix4(viewMatrix);\n this.tempVec.applyMatrix4(projMatrix);\n\n const rawX = (this.tempVec.x + 1) / 2 * canvasW;\n points[index] = {\n x: canvasW - rawX,\n y: (-this.tempVec.y + 1) / 2 * canvasH\n };\n }\n return points;\n }\n}\n\n// ============================================================================\n// MAIN APPLICATION\n// ============================================================================\n\nconst CONFIG = {\n autoCapture: true,\n autoCaptureInterval: 100,\n showUVOverlay: true,\n overlayOpacity: 0.5,\n minAngleChange: 5,\n uvMapSize: 2048,\n blendQuality: 0.95,\n devView: false\n};\n\nasync function initTextureMapper() {\n const container = document.getElementById('container');\n if (!container) {\n console.error('Container not found');\n return;\n }\n\n // Initialize systems\n const captureSystem = new TextureCaptureSystem(CONFIG.uvMapSize);\n const uvOverlay = new UVOverlayRenderer();\n const projector = new PointProjector();\n \n // Get all UV landmark indices\n const uvIndices = new Set(FACE_UV_MAP.keys());\n // Add face outline indices\n [10, 338, 297, 332, 284, 251, 389, 356, 454, 152, 234, 127, 162, 21, 54, 103, 67, 109]\n .forEach(i => uvIndices.add(i));\n \n // Initialize MindAR\n const mindarThree = new MindARThree({ container });\n const { renderer, scene, camera } = mindarThree;\n \n // Setup canvases\n const overlayCanvas = document.getElementById('overlay-canvas');\n const uvOverlayCanvas = document.getElementById('uv-overlay-canvas');\n const previewCanvas = document.getElementById('uv-preview-canvas');\n \n if (!overlayCanvas || !uvOverlayCanvas || !previewCanvas) {\n console.error('Canvas elements not found');\n return;\n }\n \n overlayCanvas.style.transform = 'scaleX(-1)';\n uvOverlayCanvas.style.transform = 'scaleX(-1)';\n \n const ctx = overlayCanvas.getContext('2d');\n const uvCtx = uvOverlayCanvas.getContext('2d');\n const previewCtx = previewCanvas.getContext('2d');\n \n // Add face mesh (invisible, just for tracking)\n const faceMesh = mindarThree.addFaceMesh();\n faceMesh.visible = false;\n scene.add(faceMesh);\n \n // State\n let lastCaptureTime = 0;\n let lastYaw = 0;\n let lastPitch = 0;\n let currentYaw = 0;\n let currentPitch = 0;\n let frameCount = 0;\n let fps = 0;\n let lastFpsTime = performance.now();\n \n // Video capture canvas\n const videoCapture = document.createElement('canvas');\n videoCapture.width = 640;\n videoCapture.height = 480;\n const videoCaptureCtx = videoCapture.getContext('2d');\n\n // Handle resize\n const handleResize = () => {\n const dpr = window.devicePixelRatio;\n overlayCanvas.width = 640 * dpr;\n overlayCanvas.height = 480 * dpr;\n uvOverlayCanvas.width = 640;\n uvOverlayCanvas.height = 480;\n renderer.setSize(640, 480);\n };\n handleResize();\n\n // Bind controls\n bindControls();\n\n // Render angle grid\n updateAngleGrid();\n\n // Start tracking\n await mindarThree.start();\n \n const video = container.querySelector('video');\n if (video) {\n video.style.transform = 'scaleX(-1)';\n }\n\n document.getElementById('tracking-status').textContent = 'Tracking Active';\n showToast('Face tracking initialized');\n\n // Animation loop\n renderer.setAnimationLoop(() => {\n frameCount++;\n const now = performance.now();\n \n // FPS counter\n if (now - lastFpsTime >= 1000) {\n fps = frameCount;\n frameCount = 0;\n lastFpsTime = now;\n document.getElementById('fps-pill').textContent = fps + ' FPS';\n }\n \n const face = mindarThree.faceMeshes[0];\n \n if (face && face.visible) {\n face.updateMatrixWorld(true);\n camera.updateMatrixWorld(true);\n \n // Extract rotation (yaw/pitch) from face quaternion\n const euler = new THREE.Euler().setFromQuaternion(face.quaternion, 'YXZ');\n currentYaw = THREE.MathUtils.radToDeg(euler.y);\n currentPitch = THREE.MathUtils.radToDeg(euler.x);\n \n // Update angle display\n document.getElementById('angle-pill').textContent = \n \\`Yaw: \\${currentYaw.toFixed(0)}° Pitch: \\${currentPitch.toFixed(0)}°\\`;\n \n // Prepare frame data for projection\n const frameData = {\n positions: new Float32Array(face.geometry.attributes.position.array),\n matrixWorld: face.matrixWorld.clone(),\n cameraMatrixWorldInverse: camera.matrixWorldInverse.clone(),\n cameraProjectionMatrix: camera.projectionMatrix.clone()\n };\n \n // Project points\n const w = overlayCanvas.width;\n const h = overlayCanvas.height;\n const points = projector.project(frameData, w, h, uvIndices);\n \n // Clear overlay canvas\n ctx.clearRect(0, 0, w, h);\n \n if (points) {\n // Draw tracking points\n ctx.fillStyle = 'rgba(99, 102, 241, 0.6)';\n Object.values(points).forEach(p => {\n ctx.beginPath();\n ctx.arc(p.x, p.y, 4, 0, Math.PI * 2);\n ctx.fill();\n });\n \n // Draw face outline\n const outlineIndices = [10, 338, 297, 332, 284, 251, 389, 356, 454, 152, 234, 127, 162, 21, 54, 103, 67, 109, 10];\n ctx.strokeStyle = 'rgba(99, 102, 241, 0.8)';\n ctx.lineWidth = 2;\n ctx.beginPath();\n outlineIndices.forEach((idx, i) => {\n if (points[idx]) {\n if (i === 0) ctx.moveTo(points[idx].x, points[idx].y);\n else ctx.lineTo(points[idx].x, points[idx].y);\n }\n });\n ctx.stroke();\n }\n \n // Draw UV overlay\n uvCtx.clearRect(0, 0, 640, 480);\n if (CONFIG.showUVOverlay && points) {\n uvOverlay.render(uvCtx, 640, 480, points, CONFIG.overlayOpacity);\n }\n \n // Auto capture\n if (CONFIG.autoCapture && now - lastCaptureTime > CONFIG.autoCaptureInterval) {\n const angleDiff = Math.abs(currentYaw - lastYaw) + Math.abs(currentPitch - lastPitch);\n \n if (angleDiff >= CONFIG.minAngleChange || !captureSystem.isAngleCaptured(currentYaw, currentPitch)) {\n // Capture video frame\n if (video && video.readyState >= 2) {\n videoCaptureCtx.drawImage(video, 0, 0, 640, 480);\n \n // Attempt capture\n const captured = captureSystem.captureFrame(\n videoCapture,\n frameData.positions,\n frameData.matrixWorld,\n currentYaw,\n currentPitch,\n CONFIG.blendQuality\n );\n \n if (captured) {\n lastYaw = currentYaw;\n lastPitch = currentPitch;\n updateAngleGrid();\n updateProgress();\n }\n }\n \n lastCaptureTime = now;\n }\n }\n \n // Update preview\n updatePreview();\n \n document.getElementById('tracking-status').textContent = 'Tracking';\n } else {\n document.getElementById('tracking-status').textContent = 'Searching...';\n ctx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);\n uvCtx.clearRect(0, 0, 640, 480);\n }\n \n // Render Three.js scene (mostly empty, just for MindAR)\n renderer.render(scene, camera);\n \n // Update stats\n if (CONFIG.devView) {\n document.getElementById('stats-panel').innerHTML = \\`\n FPS: \\${fps}
\n Yaw: \\${currentYaw.toFixed(1)}°
\n Pitch: \\${currentPitch.toFixed(1)}°
\n Captures: \\${captureSystem.capturedAngles.size}
\n Coverage: \\${(captureSystem.getCoverage() * 100).toFixed(0)}%\n \\`;\n }\n });\n\n // ============================================================================\n // UI FUNCTIONS\n // ============================================================================\n\n function bindControls() {\n // Auto capture toggle\n const autoCapture = document.getElementById('toggle-auto-capture');\n autoCapture.classList.toggle('active', CONFIG.autoCapture);\n autoCapture.onclick = () => {\n CONFIG.autoCapture = !CONFIG.autoCapture;\n autoCapture.classList.toggle('active', CONFIG.autoCapture);\n showToast(CONFIG.autoCapture ? 'Auto capture enabled' : 'Auto capture disabled');\n };\n \n // UV overlay toggle\n const uvToggle = document.getElementById('toggle-uv-overlay');\n uvToggle.classList.toggle('active', CONFIG.showUVOverlay);\n uvToggle.onclick = () => {\n CONFIG.showUVOverlay = !CONFIG.showUVOverlay;\n uvToggle.classList.toggle('active', CONFIG.showUVOverlay);\n uvOverlayCanvas.style.opacity = CONFIG.showUVOverlay ? CONFIG.overlayOpacity : 0;\n };\n \n // Overlay opacity\n const opacitySlider = document.getElementById('overlay-opacity');\n const opacityValue = document.getElementById('overlay-opacity-value');\n opacitySlider.value = CONFIG.overlayOpacity;\n opacityValue.textContent = CONFIG.overlayOpacity.toFixed(2);\n opacitySlider.oninput = () => {\n CONFIG.overlayOpacity = parseFloat(opacitySlider.value);\n opacityValue.textContent = CONFIG.overlayOpacity.toFixed(2);\n uvOverlayCanvas.style.opacity = CONFIG.overlayOpacity;\n };\n \n // Min angle\n const angleSlider = document.getElementById('min-angle');\n const angleValue = document.getElementById('min-angle-value');\n angleSlider.value = CONFIG.minAngleChange;\n angleValue.textContent = CONFIG.minAngleChange;\n angleSlider.oninput = () => {\n CONFIG.minAngleChange = parseInt(angleSlider.value);\n angleValue.textContent = CONFIG.minAngleChange;\n };\n \n // Texture size\n const sizeSlider = document.getElementById('texture-size');\n const sizeValue = document.getElementById('texture-size-value');\n sizeSlider.value = CONFIG.uvMapSize;\n sizeValue.textContent = CONFIG.uvMapSize + 'px';\n sizeSlider.oninput = () => {\n CONFIG.uvMapSize = parseInt(sizeSlider.value);\n sizeValue.textContent = CONFIG.uvMapSize + 'px';\n captureSystem.setSize(CONFIG.uvMapSize);\n };\n \n // Blend quality\n const qualitySlider = document.getElementById('blend-quality');\n const qualityValue = document.getElementById('blend-quality-value');\n qualitySlider.value = CONFIG.blendQuality;\n qualityValue.textContent = CONFIG.blendQuality.toFixed(2);\n qualitySlider.oninput = () => {\n CONFIG.blendQuality = parseFloat(qualitySlider.value);\n qualityValue.textContent = CONFIG.blendQuality.toFixed(2);\n };\n \n // Dev view\n const devToggle = document.getElementById('toggle-dev-view');\n devToggle.onclick = () => {\n CONFIG.devView = !CONFIG.devView;\n devToggle.classList.toggle('active', CONFIG.devView);\n document.getElementById('stats-panel').classList.toggle('visible', CONFIG.devView);\n };\n \n // Export button\n document.getElementById('export-texture').onclick = () => {\n const coverage = captureSystem.getCoverage();\n if (coverage < 0.3) {\n showToast('Capture more angles first (currently ' + (coverage * 100).toFixed(0) + '%)');\n return;\n }\n \n const dataUrl = captureSystem.exportPNG();\n const link = document.createElement('a');\n link.download = 'face-texture-' + Date.now() + '.png';\n link.href = dataUrl;\n link.click();\n showToast('Texture exported!');\n };\n \n // Manual capture\n document.getElementById('capture-single').onclick = () => {\n if (video && video.readyState >= 2 && face && face.visible) {\n videoCaptureCtx.drawImage(video, 0, 0, 640, 480);\n const face = mindarThree.faceMeshes[","/** @jsxImportSource https://esm.sh/react */\nimport { renderToString } from \"npm:react-dom/server\";\nimport { TEXTURE_MAPPER_HTML } from \"./html-template.ts\";\nimport STYLES from \".styles.ts\";\n// ============================================================================\n// FACEMESH TEXTURE MAPPER - UV Texture Capture Tool\n// ============================================================================\n\ninterface TextureMapperConfig {\n captureResolution: number;\n uvMapSize: number;\n autoCapture: boolean;\n autoCaptureInterval: number;\n showUVOverlay: boolean;\n overlayOpacity: number;\n blendMode: string;\n minAngleChange: number;\n captureQuality: number;\n}\n\nconst DEFAULT_CONFIG: TextureMapperConfig = {\n captureResolution: 1024,\n uvMapSize: 2048,\n autoCapture: true,\n autoCaptureInterval: 100,\n showUVOverlay: true,\n overlayOpacity: 0.5,\n blendMode: \"average\",\n minAngleChange: 5,\n captureQuality: 0.95,\n};\n\n\n\nconst CLIENT_SCRIPT = `\nimport * as THREE from 'three';\nimport { MindARThree } from 'mindar-face-three';\n\n// ============================================================================\n// FACEMESH UV COORDINATES\n// MindAR face mesh uses MediaPipe's 478 landmark topology\n// We need to map 3D face positions to 2D UV coordinates\n// ============================================================================\n\n// Standard UV layout for face texture (similar to canonical face mesh)\n// These UV coordinates map the 3D face mesh to a 2D texture\nconst FACE_UV_MAP = generateFaceUVMap();\n\nfunction generateFaceUVMap() {\n // Approximate UV coordinates for key face regions\n // The face mesh has 478 vertices - we'll generate UV coords based on position\n const uvMap = new Map();\n \n // Key landmark UV positions (approximate canonical positions)\n // Format: landmark_index -> [u, v] where 0,0 is top-left and 1,1 is bottom-right\n \n // Face outline (silhouette)\n const faceOutline = [\n [10, [0.5, 0.05]], // Top of forehead center\n [338, [0.75, 0.08]], // Right forehead\n [297, [0.85, 0.15]], // Right temple\n [332, [0.9, 0.25]], // Right upper cheek\n [284, [0.92, 0.4]], // Right cheek\n [251, [0.9, 0.55]], // Right lower cheek\n [389, [0.85, 0.7]], // Right jaw\n [356, [0.75, 0.82]], // Right chin area\n [454, [0.65, 0.9]], // Right chin\n [152, [0.5, 0.95]], // Chin center\n [234, [0.35, 0.9]], // Left chin\n [127, [0.25, 0.82]], // Left chin area\n [162, [0.15, 0.7]], // Left jaw\n [21, [0.1, 0.55]], // Left lower cheek\n [54, [0.08, 0.4]], // Left cheek\n [103, [0.1, 0.25]], // Left upper cheek\n [67, [0.15, 0.15]], // Left temple\n [109, [0.25, 0.08]], // Left forehead\n ];\n\n // Eyes\n const leftEye = [\n [33, [0.28, 0.38]], // Left eye outer corner\n [133, [0.38, 0.38]], // Left eye inner corner\n [159, [0.33, 0.35]], // Left eye top\n [145, [0.33, 0.41]], // Left eye bottom\n ];\n \n const rightEye = [\n [362, [0.62, 0.38]], // Right eye inner corner\n [263, [0.72, 0.38]], // Right eye outer corner\n [386, [0.67, 0.35]], // Right eye top\n [374, [0.67, 0.41]], // Right eye bottom\n ];\n\n // Nose\n const nose = [\n [1, [0.5, 0.55]], // Nose tip\n [6, [0.5, 0.42]], // Nose bridge\n [4, [0.5, 0.48]], // Nose middle\n [48, [0.42, 0.55]], // Left nostril\n [278, [0.58, 0.55]], // Right nostril\n ];\n\n // Mouth\n const mouth = [\n [61, [0.38, 0.7]], // Left mouth corner\n [291, [0.62, 0.7]], // Right mouth corner\n [13, [0.5, 0.65]], // Upper lip center\n [14, [0.5, 0.75]], // Lower lip center\n [78, [0.42, 0.68]], // Upper lip left\n [308, [0.58, 0.68]], // Upper lip right\n [95, [0.42, 0.73]], // Lower lip left\n [324, [0.58, 0.73]], // Lower lip right\n ];\n\n // Eyebrows\n const leftBrow = [\n [70, [0.22, 0.28]],\n [63, [0.28, 0.26]],\n [105, [0.34, 0.27]],\n [66, [0.38, 0.29]],\n ];\n \n const rightBrow = [\n [300, [0.78, 0.28]],\n [293, [0.72, 0.26]],\n [334, [0.66, 0.27]],\n [296, [0.62, 0.29]],\n ];\n\n // Combine all landmarks\n const allLandmarks = [\n ...faceOutline, ...leftEye, ...rightEye, \n ...nose, ...mouth, ...leftBrow, ...rightBrow\n ];\n \n allLandmarks.forEach(([idx, uv]) => {\n uvMap.set(idx, uv);\n });\n \n return uvMap;\n}\n\n// ============================================================================\n// TEXTURE CAPTURE SYSTEM\n// ============================================================================\n\nclass TextureCaptureSystem {\n constructor(uvMapSize = 2048) {\n this.uvMapSize = uvMapSize;\n \n // Main UV texture canvas (accumulated result)\n this.uvCanvas = document.createElement('canvas');\n this.uvCanvas.width = uvMapSize;\n this.uvCanvas.height = uvMapSize;\n this.uvCtx = this.uvCanvas.getContext('2d');\n \n // Weight/count canvas for blending\n this.weightCanvas = document.createElement('canvas');\n this.weightCanvas.width = uvMapSize;\n this.weightCanvas.height = uvMapSize;\n this.weightCtx = this.weightCanvas.getContext('2d');\n \n // Initialize with transparent\n this.uvCtx.fillStyle = 'rgba(128, 128, 128, 0)';\n this.uvCtx.fillRect(0, 0, uvMapSize, uvMapSize);\n \n // Track captured angles (yaw, pitch) in 15-degree increments\n this.capturedAngles = new Set();\n this.angleResolution = 15; // degrees\n \n // Capture history for quality tracking\n this.captureHistory = [];\n this.maxHistory = 100;\n }\n\n // Quantize angle to grid cell\n quantizeAngle(yaw, pitch) {\n const qYaw = Math.round(yaw / this.angleResolution) * this.angleResolution;\n const qPitch = Math.round(pitch / this.angleResolution) * this.angleResolution;\n return \\`\\${qYaw},\\${qPitch}\\`;\n }\n\n // Check if angle already captured\n isAngleCaptured(yaw, pitch) {\n return this.capturedAngles.has(this.quantizeAngle(yaw, pitch));\n }\n\n // Capture texture from current frame\n captureFrame(videoCanvas, facePositions, faceMatrix, yaw, pitch, quality = 0.95) {\n if (!videoCanvas || !facePositions) return false;\n \n const angleKey = this.quantizeAngle(yaw, pitch);\n \n // Skip if already well-captured at this angle\n if (this.capturedAngles.has(angleKey)) {\n return false;\n }\n \n // Create temporary canvas for this capture\n const tempCanvas = document.createElement('canvas');\n tempCanvas.width = this.uvMapSize;\n tempCanvas.height = this.uvMapSize;\n const tempCtx = tempCanvas.getContext('2d');\n \n // Calculate face visibility/confidence based on angle\n const visibility = this.calculateVisibility(yaw, pitch);\n \n // Map video pixels to UV space\n this.mapToUV(tempCtx, videoCanvas, facePositions, visibility);\n \n // Blend into main texture\n this.blendCapture(tempCtx, visibility * quality);\n \n // Mark angle as captured\n this.capturedAngles.add(angleKey);\n \n // Record in history\n this.captureHistory.push({\n angle: angleKey,\n yaw, pitch,\n timestamp: Date.now(),\n visibility\n });\n \n if (this.captureHistory.length > this.maxHistory) {\n this.captureHistory.shift();\n }\n \n return true;\n }\n\n // Calculate how visible the face is at given angle\n calculateVisibility(yaw, pitch) {\n // Face is most visible when looking straight at camera\n // Visibility decreases as face turns away\n const yawFactor = Math.cos(yaw * Math.PI / 180);\n const pitchFactor = Math.cos(pitch * Math.PI / 180);\n return Math.max(0.1, yawFactor * pitchFactor);\n }\n\n // Map video frame to UV coordinates\n mapToUV(ctx, videoCanvas, positions, visibility) {\n const videoW = videoCanvas.width;\n const videoH = videoCanvas.height;\n \n // Clear with transparency\n ctx.clearRect(0, 0, this.uvMapSize, this.uvMapSize);\n \n // For each known UV landmark, sample from video\n FACE_UV_MAP.forEach((uv, landmarkIdx) => {\n if (landmarkIdx * 3 + 2 >= positions.length) return;\n \n // Get 3D position (already projected to screen space in our case)\n // We need to project from the face mesh positions\n const px = positions[landmarkIdx * 3];\n const py = positions[landmarkIdx * 3 + 1];\n \n // UV coordinates (0-1 range)\n const u = uv[0];\n const v = uv[1];\n \n // Target position in UV texture\n const targetX = u * this.uvMapSize;\n const targetY = v * this.uvMapSize;\n \n // Sample radius (larger = smoother but blurrier)\n const sampleRadius = this.uvMapSize * 0.02;\n \n // Draw sampled region\n // This is a simplified approach - proper UV mapping would use triangulation\n ctx.globalAlpha = visibility;\n \n // We'd normally sample from video at the projected position\n // For now, create a color based on position (placeholder)\n ctx.fillStyle = \\`hsl(\\${(u * 360)}, 50%, 50%)\\`;\n ctx.beginPath();\n ctx.arc(targetX, targetY, sampleRadius, 0, Math.PI * 2);\n ctx.fill();\n });\n \n ctx.globalAlpha = 1;\n }\n\n // Blend a new capture into the accumulated texture\n blendCapture(sourceCtx, weight) {\n const sourceData = sourceCtx.getImageData(0, 0, this.uvMapSize, this.uvMapSize);\n const targetData = this.uvCtx.getImageData(0, 0, this.uvMapSize, this.uvMapSize);\n const weightData = this.weightCtx.getImageData(0, 0, this.uvMapSize, this.uvMapSize);\n \n for (let i = 0; i < sourceData.data.length; i += 4) {\n const srcA = sourceData.data[i + 3] / 255;\n \n if (srcA > 0.1) {\n const existingWeight = weightData.data[i] / 255;\n const newWeight = existingWeight + weight * srcA;\n \n if (newWeight > 0) {\n const t = (weight * srcA) / newWeight;\n \n targetData.data[i] = targetData.data[i] * (1 - t) + sourceData.data[i] * t;\n targetData.data[i + 1] = targetData.data[i + 1] * (1 - t) + sourceData.data[i + 1] * t;\n targetData.data[i + 2] = targetData.data[i + 2] * (1 - t) + sourceData.data[i + 2] * t;\n targetData.data[i + 3] = Math.min(255, targetData.data[i + 3] + srcA * 255 * 0.5);\n \n weightData.data[i] = Math.min(255, newWeight * 255);\n }\n }\n }\n \n this.uvCtx.putImageData(targetData, 0, 0);\n this.weightCtx.putImageData(weightData, 0, 0);\n }\n\n // Get coverage percentage\n getCoverage() {\n // Define expected angle range\n const yawRange = [-45, -30, -15, 0, 15, 30, 45];\n const pitchRange = [-30, -15, 0, 15, 30];\n \n let total = 0;\n let captured = 0;\n \n yawRange.forEach(yaw => {\n pitchRange.forEach(pitch => {\n total++;\n if (this.capturedAngles.has(this.quantizeAngle(yaw, pitch))) {\n captured++;\n }\n });\n });\n \n return captured / total;\n }\n\n // Get captured angle grid for visualization\n getAngleGrid() {\n const yawRange = [-45, -30, -15, 0, 15, 30, 45];\n const pitchRange = [-30, -15, 0, 15, 30];\n \n const grid = [];\n pitchRange.forEach(pitch => {\n yawRange.forEach(yaw => {\n grid.push({\n yaw, pitch,\n captured: this.capturedAngles.has(this.quantizeAngle(yaw, pitch))\n });\n });\n });\n \n return grid;\n }\n\n // Clear all captures\n clear() {\n this.uvCtx.clearRect(0, 0, this.uvMapSize, this.uvMapSize);\n this.weightCtx.clearRect(0, 0, this.uvMapSize, this.uvMapSize);\n this.capturedAngles.clear();\n this.captureHistory = [];\n }\n\n // Export as PNG\n exportPNG() {\n return this.uvCanvas.toDataURL('image/png', 1.0);\n }\n\n // Get preview canvas\n getPreviewCanvas() {\n return this.uvCanvas;\n }\n\n // Resize output\n setSize(size) {\n if (size === this.uvMapSize) return;\n \n // Save current content\n const tempCanvas = document.createElement('canvas');\n tempCanvas.width = this.uvMapSize;\n tempCanvas.height = this.uvMapSize;\n tempCanvas.getContext('2d').drawImage(this.uvCanvas, 0, 0);\n \n // Resize\n this.uvMapSize = size;\n this.uvCanvas.width = size;\n this.uvCanvas.height = size;\n this.weightCanvas.width = size;\n this.weightCanvas.height = size;\n \n // Restore scaled\n this.uvCtx.drawImage(tempCanvas, 0, 0, size, size);\n }\n}\n\n// ============================================================================\n// UV OVERLAY RENDERER\n// Shows the UV template on top of the video\n// ============================================================================\n\nclass UVOverlayRenderer {\n constructor() {\n this.overlayImage = null;\n this.createOverlayTemplate();\n }\n\n createOverlayTemplate() {\n // Create a UV wireframe overlay\n const size = 512;\n const canvas = document.createElement('canvas');\n canvas.width = size;\n canvas.height = size;\n const ctx = canvas.getContext('2d');\n \n // Draw UV grid\n ctx.strokeStyle = 'rgba(99, 102, 241, 0.5)';\n ctx.lineWidth = 1;\n \n // Draw face outline shape\n ctx.beginPath();\n ctx.ellipse(size/2, size * 0.45, size * 0.35, size * 0.42, 0, 0, Math.PI * 2);\n ctx.stroke();\n \n // Draw eye regions\n ctx.beginPath();\n ctx.ellipse(size * 0.33, size * 0.38, size * 0.08, size * 0.04, 0, 0, Math.PI * 2);\n ctx.stroke();\n ctx.beginPath();\n ctx.ellipse(size * 0.67, size * 0.38, size * 0.08, size * 0.04, 0, 0, Math.PI * 2);\n ctx.stroke();\n \n // Draw nose\n ctx.beginPath();\n ctx.moveTo(size * 0.5, size * 0.35);\n ctx.lineTo(size * 0.45, size * 0.55);\n ctx.lineTo(size * 0.55, size * 0.55);\n ctx.closePath();\n ctx.stroke();\n \n // Draw mouth region\n ctx.beginPath();\n ctx.ellipse(size/2, size * 0.7, size * 0.12, size * 0.05, 0, 0, Math.PI * 2);\n ctx.stroke();\n \n // Draw UV grid lines\n ctx.strokeStyle = 'rgba(99, 102, 241, 0.2)';\n for (let i = 0; i <= 10; i++) {\n ctx.beginPath();\n ctx.moveTo(i * size / 10, 0);\n ctx.lineTo(i * size / 10, size);\n ctx.stroke();\n ctx.beginPath();\n ctx.moveTo(0, i * size / 10);\n ctx.lineTo(size, i * size / 10);\n ctx.stroke();\n }\n \n this.overlayImage = canvas;\n }\n\n render(ctx, canvasW, canvasH, points, opacity = 0.5) {\n if (!points || !this.overlayImage) return;\n \n ctx.save();\n ctx.globalAlpha = opacity;\n \n // Find face bounding box from landmarks\n const faceTop = points[10];\n const faceChin = points[152];\n const faceLeft = points[234];\n const faceRight = points[454];\n \n if (!faceTop || !faceChin || !faceLeft || !faceRight) {\n ctx.restore();\n return;\n }\n \n const faceW = Math.abs(faceRight.x - faceLeft.x) * 1.2;\n const faceH = Math.abs(faceChin.y - faceTop.y) * 1.1;\n const faceCenterX = (faceLeft.x + faceRight.x) / 2;\n const faceCenterY = (faceTop.y + faceChin.y) / 2;\n \n // Draw overlay positioned and scaled to face\n ctx.drawImage(\n this.overlayImage,\n faceCenterX - faceW / 2,\n faceCenterY - faceH / 2,\n faceW,\n faceH\n );\n \n // Draw landmark points\n ctx.fillStyle = 'rgba(34, 197, 94, 0.8)';\n FACE_UV_MAP.forEach((uv, idx) => {\n if (points[idx]) {\n ctx.beginPath();\n ctx.arc(points[idx].x, points[idx].y, 3, 0, Math.PI * 2);\n ctx.fill();\n }\n });\n \n ctx.restore();\n }\n}\n\n// ============================================================================\n// POINT PROJECTOR (from original code, simplified)\n// ============================================================================\n\nclass PointProjector {\n constructor() {\n this.tempVec = new THREE.Vector3();\n }\n\n project(frameData, canvasW, canvasH, indices) {\n if (!frameData || !frameData.positions || !frameData.matrixWorld) return null;\n if (!frameData.cameraMatrixWorldInverse || !frameData.cameraProjectionMatrix) return null;\n\n const points = {};\n const positions = frameData.positions;\n const modelMatrix = frameData.matrixWorld;\n const viewMatrix = frameData.cameraMatrixWorldInverse;\n const projMatrix = frameData.cameraProjectionMatrix;\n\n for (const index of indices) {\n if (index * 3 + 2 >= positions.length) continue;\n \n this.tempVec.set(\n positions[index * 3],\n positions[index * 3 + 1],\n positions[index * 3 + 2]\n );\n \n this.tempVec.applyMatrix4(modelMatrix);\n this.tempVec.applyMatrix4(viewMatrix);\n this.tempVec.applyMatrix4(projMatrix);\n\n const rawX = (this.tempVec.x + 1) / 2 * canvasW;\n points[index] = {\n x: canvasW - rawX,\n y: (-this.tempVec.y + 1) / 2 * canvasH\n };\n }\n return points;\n }\n}\n\n// ============================================================================\n// MAIN APPLICATION\n// ============================================================================\n\nconst CONFIG = {\n autoCapture: true,\n autoCaptureInterval: 100,\n showUVOverlay: true,\n overlayOpacity: 0.5,\n minAngleChange: 5,\n uvMapSize: 2048,\n blendQuality: 0.95,\n devView: false\n};\n\nasync function initTextureMapper() {\n const container = document.getElementById('container');\n if (!container) {\n console.error('Container not found');\n return;\n }\n\n // Initialize systems\n const captureSystem = new TextureCaptureSystem(CONFIG.uvMapSize);\n const uvOverlay = new UVOverlayRenderer();\n const projector = new PointProjector();\n \n // Get all UV landmark indices\n const uvIndices = new Set(FACE_UV_MAP.keys());\n // Add face outline indices\n [10, 338, 297, 332, 284, 251, 389, 356, 454, 152, 234, 127, 162, 21, 54, 103, 67, 109]\n .forEach(i => uvIndices.add(i));\n \n // Initialize MindAR\n const mindarThree = new MindARThree({ container });\n const { renderer, scene, camera } = mindarThree;\n \n // Setup canvases\n const overlayCanvas = document.getElementById('overlay-canvas');\n const uvOverlayCanvas = document.getElementById('uv-overlay-canvas');\n const previewCanvas = document.getElementById('uv-preview-canvas');\n \n if (!overlayCanvas || !uvOverlayCanvas || !previewCanvas) {\n console.error('Canvas elements not found');\n return;\n }\n \n overlayCanvas.style.transform = 'scaleX(-1)';\n uvOverlayCanvas.style.transform = 'scaleX(-1)';\n \n const ctx = overlayCanvas.getContext('2d');\n const uvCtx = uvOverlayCanvas.getContext('2d');\n const previewCtx = previewCanvas.getContext('2d');\n \n // Add face mesh (invisible, just for tracking)\n const faceMesh = mindarThree.addFaceMesh();\n faceMesh.visible = false;\n scene.add(faceMesh);\n \n // State\n let lastCaptureTime = 0;\n let lastYaw = 0;\n let lastPitch = 0;\n let currentYaw = 0;\n let currentPitch = 0;\n let frameCount = 0;\n let fps = 0;\n let lastFpsTime = performance.now();\n \n // Video capture canvas\n const videoCapture = document.createElement('canvas');\n videoCapture.width = 640;\n videoCapture.height = 480;\n const videoCaptureCtx = videoCapture.getContext('2d');\n\n // Handle resize\n const handleResize = () => {\n const dpr = window.devicePixelRatio;\n overlayCanvas.width = 640 * dpr;\n overlayCanvas.height = 480 * dpr;\n uvOverlayCanvas.width = 640;\n uvOverlayCanvas.height = 480;\n renderer.setSize(640, 480);\n };\n handleResize();\n\n // Bind controls\n bindControls();\n\n // Render angle grid\n updateAngleGrid();\n\n // Start tracking\n await mindarThree.start();\n \n const video = container.querySelector('video');\n if (video) {\n video.style.transform = 'scaleX(-1)';\n }\n\n document.getElementById('tracking-status').textContent = 'Tracking Active';\n showToast('Face tracking initialized');\n\n // Animation loop\n renderer.setAnimationLoop(() => {\n frameCount++;\n const now = performance.now();\n \n // FPS counter\n if (now - lastFpsTime >= 1000) {\n fps = frameCount;\n frameCount = 0;\n lastFpsTime = now;\n document.getElementById('fps-pill').textContent = fps + ' FPS';\n }\n \n const face = mindarThree.faceMeshes[0];\n \n if (face && face.visible) {\n face.updateMatrixWorld(true);\n camera.updateMatrixWorld(true);\n \n // Extract rotation (yaw/pitch) from face quaternion\n const euler = new THREE.Euler().setFromQuaternion(face.quaternion, 'YXZ');\n currentYaw = THREE.MathUtils.radToDeg(euler.y);\n currentPitch = THREE.MathUtils.radToDeg(euler.x);\n \n // Update angle display\n document.getElementById('angle-pill').textContent = \n \\`Yaw: \\${currentYaw.toFixed(0)}° Pitch: \\${currentPitch.toFixed(0)}°\\`;\n \n // Prepare frame data for projection\n const frameData = {\n positions: new Float32Array(face.geometry.attributes.position.array),\n matrixWorld: face.matrixWorld.clone(),\n cameraMatrixWorldInverse: camera.matrixWorldInverse.clone(),\n cameraProjectionMatrix: camera.projectionMatrix.clone()\n };\n \n // Project points\n const w = overlayCanvas.width;\n const h = overlayCanvas.height;\n const points = projector.project(frameData, w, h, uvIndices);\n \n // Clear overlay canvas\n ctx.clearRect(0, 0, w, h);\n \n if (points) {\n // Draw tracking points\n ctx.fillStyle = 'rgba(99, 102, 241, 0.6)';\n Object.values(points).forEach(p => {\n ctx.beginPath();\n ctx.arc(p.x, p.y, 4, 0, Math.PI * 2);\n ctx.fill();\n });\n \n // Draw face outline\n const outlineIndices = [10, 338, 297, 332, 284, 251, 389, 356, 454, 152, 234, 127, 162, 21, 54, 103, 67, 109, 10];\n ctx.strokeStyle = 'rgba(99, 102, 241, 0.8)';\n ctx.lineWidth = 2;\n ctx.beginPath();\n outlineIndices.forEach((idx, i) => {\n if (points[idx]) {\n if (i === 0) ctx.moveTo(points[idx].x, points[idx].y);\n else ctx.lineTo(points[idx].x, points[idx].y);\n }\n });\n ctx.stroke();\n }\n \n // Draw UV overlay\n uvCtx.clearRect(0, 0, 640, 480);\n if (CONFIG.showUVOverlay && points) {\n uvOverlay.render(uvCtx, 640, 480, points, CONFIG.overlayOpacity);\n }\n \n // Auto capture\n if (CONFIG.autoCapture && now - lastCaptureTime > CONFIG.autoCaptureInterval) {\n const angleDiff = Math.abs(currentYaw - lastYaw) + Math.abs(currentPitch - lastPitch);\n \n if (angleDiff >= CONFIG.minAngleChange || !captureSystem.isAngleCaptured(currentYaw, currentPitch)) {\n // Capture video frame\n if (video && video.readyState >= 2) {\n videoCaptureCtx.drawImage(video, 0, 0, 640, 480);\n \n // Attempt capture\n const captured = captureSystem.captureFrame(\n videoCapture,\n frameData.positions,\n frameData.matrixWorld,\n currentYaw,\n currentPitch,\n CONFIG.blendQuality\n );\n \n if (captured) {\n lastYaw = currentYaw;\n lastPitch = currentPitch;\n updateAngleGrid();\n updateProgress();\n }\n }\n \n lastCaptureTime = now;\n }\n }\n \n // Update preview\n updatePreview();\n \n document.getElementById('tracking-status').textContent = 'Tracking';\n } else {\n document.getElementById('tracking-status').textContent = 'Searching...';\n ctx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);\n uvCtx.clearRect(0, 0, 640, 480);\n }\n \n // Render Three.js scene (mostly empty, just for MindAR)\n renderer.render(scene, camera);\n \n // Update stats\n if (CONFIG.devView) {\n document.getElementById('stats-panel').innerHTML = \\`\n FPS: \\${fps}
\n Yaw: \\${currentYaw.toFixed(1)}°
\n Pitch: \\${currentPitch.toFixed(1)}°
\n Captures: \\${captureSystem.capturedAngles.size}
\n Coverage: \\${(captureSystem.getCoverage() * 100).toFixed(0)}%\n \\`;\n }\n });\n\n // ============================================================================\n // UI FUNCTIONS\n // ============================================================================\n\n function bindControls() {\n // Auto capture toggle\n const autoCapture = document.getElementById('toggle-auto-capture');\n autoCapture.classList.toggle('active', CONFIG.autoCapture);\n autoCapture.onclick = () => {\n CONFIG.autoCapture = !CONFIG.autoCapture;\n autoCapture.classList.toggle('active', CONFIG.autoCapture);\n showToast(CONFIG.autoCapture ? 'Auto capture enabled' : 'Auto capture disabled');\n };\n \n // UV overlay toggle\n const uvToggle = document.getElementById('toggle-uv-overlay');\n uvToggle.classList.toggle('active', CONFIG.showUVOverlay);\n uvToggle.onclick = () => {\n CONFIG.showUVOverlay = !CONFIG.showUVOverlay;\n uvToggle.classList.toggle('active', CONFIG.showUVOverlay);\n uvOverlayCanvas.style.opacity = CONFIG.showUVOverlay ? CONFIG.overlayOpacity : 0;\n };\n \n // Overlay opacity\n const opacitySlider = document.getElementById('overlay-opacity');\n const opacityValue = document.getElementById('overlay-opacity-value');\n opacitySlider.value = CONFIG.overlayOpacity;\n opacityValue.textContent = CONFIG.overlayOpacity.toFixed(2);\n opacitySlider.oninput = () => {\n CONFIG.overlayOpacity = parseFloat(opacitySlider.value);\n opacityValue.textContent = CONFIG.overlayOpacity.toFixed(2);\n uvOverlayCanvas.style.opacity = CONFIG.overlayOpacity;\n };\n \n // Min angle\n const angleSlider = document.getElementById('min-angle');\n const angleValue = document.getElementById('min-angle-value');\n angleSlider.value = CONFIG.minAngleChange;\n angleValue.textContent = CONFIG.minAngleChange;\n angleSlider.oninput = () => {\n CONFIG.minAngleChange = parseInt(angleSlider.value);\n angleValue.textContent = CONFIG.minAngleChange;\n };\n \n // Texture size\n const sizeSlider = document.getElementById('texture-size');\n const sizeValue = document.getElementById('texture-size-value');\n sizeSlider.value = CONFIG.uvMapSize;\n sizeValue.textContent = CONFIG.uvMapSize + 'px';\n sizeSlider.oninput = () => {\n CONFIG.uvMapSize = parseInt(sizeSlider.value);\n sizeValue.textContent = CONFIG.uvMapSize + 'px';\n captureSystem.setSize(CONFIG.uvMapSize);\n };\n \n // Blend quality\n const qualitySlider = document.getElementById('blend-quality');\n const qualityValue = document.getElementById('blend-quality-value');\n qualitySlider.value = CONFIG.blendQuality;\n qualityValue.textContent = CONFIG.blendQuality.toFixed(2);\n qualitySlider.oninput = () => {\n CONFIG.blendQuality = parseFloat(qualitySlider.value);\n qualityValue.textContent = CONFIG.blendQuality.toFixed(2);\n };\n \n // Dev view\n const devToggle = document.getElementById('toggle-dev-view');\n devToggle.onclick = () => {\n CONFIG.devView = !CONFIG.devView;\n devToggle.classList.toggle('active', CONFIG.devView);\n document.getElementById('stats-panel').classList.toggle('visible', CONFIG.devView);\n };\n \n // Export button\n document.getElementById('export-texture').onclick = () => {\n const coverage = captureSystem.getCoverage();\n if (coverage < 0.3) {\n showToast('Capture more angles first (currently ' + (coverage * 100).toFixed(0) + '%)');\n return;\n }\n \n const dataUrl = captureSystem.exportPNG();\n const link = document.createElement('a');\n link.download = 'face-texture-' + Date.now() + '.png';\n link.href = dataUrl;\n link.click();\n showToast('Texture exported!');\n };\n \n // Manual capture\n document.getElementById('capture-single').onclick = () => {\n if (video && video.readyState >= 2 && face && face.visible) {\n videoCaptureCtx.drawImage(video, 0, 0, 640, 480);\n const face = mindarThree.faceMeshes[0];\n if (face && face.visible) {\n const frameData = {\n positions: new Float32Array(face.geometry.attributes.position.array),\n matrixWorld: face.matrixWorld.clone(),\n };\n \n const captured = captureSystem.captureFrame(\n videoCapture,\n frameData.positions,\n frameData.matrixWorld,\n currentYaw,\n currentPitch,\n 1.0 // Full quality for manual capture\n );\n \n if (captured) {\n updateAngleGrid();\n updateProgress();\n showToast('Captured at ' + currentYaw.toFixed(0) + '°, ' + currentPitch.toFixed(0) + '°');\n } else {\n showToast('Angle already captured');\n }\n }\n } else {\n showToast('No face detected');\n }\n };\n \n // Clear captures\n document.getElementById('clear-captures').onclick = () => {\n captureSystem.clear();\n updateAngleGrid();\n updateProgress();\n updatePreview();\n showToast('All captures cleared');\n };\n }\n\n function updateAngleGrid() {\n const grid = captureSystem.getAngleGrid();\n const gridEl = document.getElementById('angle-grid');\n \n // Clear existing\n gridEl.innerHTML = '';\n \n // Create grid cells (5 columns x 7 rows to match yaw/pitch ranges)\n grid.forEach(cell => {\n const div = document.createElement('div');\n div.className = 'angle-cell';\n \n if (cell.captured) {\n div.classList.add('captured');\n div.textContent = '✓';\n }\n \n // Highlight current angle\n const isCurrentYaw = Math.abs(cell.yaw - currentYaw) < 15;\n const isCurrentPitch = Math.abs(cell.pitch - currentPitch) < 15;\n if (isCurrentYaw && isCurrentPitch) {\n div.classList.add('current');\n }\n \n div.title = `Yaw: ${cell.yaw}° Pitch: ${cell.pitch}°`;\n gridEl.appendChild(div);\n });\n }\n\n function updateProgress() {\n const coverage = captureSystem.getCoverage();\n const percent = Math.round(coverage * 100);\n \n document.getElementById('progress-percent').textContent = percent + '%';\n \n // Update progress ring\n const circle = document.getElementById('progress-circle');\n const circumference = 2 * Math.PI * 42; // r=42\n const offset = circumference - (coverage * circumference);\n circle.style.strokeDashoffset = offset;\n \n // Change color based on coverage\n if (coverage >= 0.8) {\n circle.style.stroke = '#22c55e'; // Green\n } else if (coverage >= 0.5) {\n circle.style.stroke = '#f59e0b'; // Orange\n } else {\n circle.style.stroke = '#6366f1'; // Purple\n }\n }\n\n function updatePreview() {\n const sourceCanvas = captureSystem.getPreviewCanvas();\n previewCtx.clearRect(0, 0, 256, 256);\n previewCtx.drawImage(sourceCanvas, 0, 0, 256, 256);\n }\n\n function showToast(message) {\n const toast = document.getElementById('toast');\n toast.textContent = message;\n toast.classList.add('show');\n setTimeout(() => toast.classList.remove('show'), 2500);\n }\n}\n\n// ============================================================================\n// ENHANCED TEXTURE CAPTURE WITH REAL VIDEO SAMPLING\n// ============================================================================\n\n// Override the mapToUV function in TextureCaptureSystem for real video sampling\nTextureCaptureSystem.prototype.mapToUVReal = function(ctx, videoCanvas, positions, screenPoints, visibility) {\n const videoW = videoCanvas.width;\n const videoH = videoCanvas.height;\n \n ctx.clearRect(0, 0, this.uvMapSize, this.uvMapSize);\n \n if (!screenPoints) return;\n \n // Get video image data for direct pixel sampling\n const videoCtx = videoCanvas.getContext('2d');\n const videoData = videoCtx.getImageData(0, 0, videoW, videoH);\n \n // For each UV landmark, sample color from video at screen position\n FACE_UV_MAP.forEach((uv, landmarkIdx) => {\n const screenPoint = screenPoints[landmarkIdx];\n if (!screenPoint) return;\n \n // Screen position (mirrored back for video sampling)\n const videoX = Math.floor(videoW - screenPoint.x * (videoW / 640));\n const videoY = Math.floor(screenPoint.y * (videoH / 480));\n \n if (videoX < 0 || videoX >= videoW || videoY < 0 || videoY >= videoH) return;\n \n // Sample color from video\n const pixelIdx = (videoY * videoW + videoX) * 4;\n const r = videoData.data[pixelIdx];\n const g = videoData.data[pixelIdx + 1];\n const b = videoData.data[pixelIdx + 2];\n \n // UV coordinates\n const u = uv[0];\n const v = uv[1];\n \n // Target position in UV texture\n const targetX = u * this.uvMapSize;\n const targetY = v * this.uvMapSize;\n \n // Sample radius based on face region\n const sampleRadius = this.uvMapSize * 0.025;\n \n // Draw sampled color\n ctx.globalAlpha = visibility;\n ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;\n ctx.beginPath();\n ctx.arc(targetX, targetY, sampleRadius, 0, Math.PI * 2);\n ctx.fill();\n });\n \n ctx.globalAlpha = 1;\n};\n\n// Enhanced capture that uses screen points\nTextureCaptureSystem.prototype.captureFrameEnhanced = function(videoCanvas, positions, screenPoints, yaw, pitch, quality = 0.95) {\n if (!videoCanvas || !positions || !screenPoints) return false;\n \n const angleKey = this.quantizeAngle(yaw, pitch);\n \n if (this.capturedAngles.has(angleKey)) {\n return false;\n }\n \n const tempCanvas = document.createElement('canvas');\n tempCanvas.width = this.uvMapSize;\n tempCanvas.height = this.uvMapSize;\n const tempCtx = tempCanvas.getContext('2d');\n \n const visibility = this.calculateVisibility(yaw, pitch);\n \n // Use enhanced mapping with screen points\n this.mapToUVReal(tempCtx, videoCanvas, positions, screenPoints, visibility);\n \n this.blendCapture(tempCtx, visibility * quality);\n \n this.capturedAngles.add(angleKey);\n \n this.captureHistory.push({\n angle: angleKey,\n yaw, pitch,\n timestamp: Date.now(),\n visibility\n });\n \n if (this.captureHistory.length > this.maxHistory) {\n this.captureHistory.shift();\n }\n \n return true;\n};\n\n// ============================================================================\n// TRIANGULATED UV MAPPING (More accurate)\n// ============================================================================\n\nclass TriangulatedUVMapper {\n constructor(uvMapSize) {\n this.uvMapSize = uvMapSize;\n this.triangles = this.generateFaceTriangles();\n }\n \n // Generate triangles connecting UV landmarks\n generateFaceTriangles() {\n // Define triangles using landmark indices\n // Each triangle: [idx1, idx2, idx3]\n return [\n // Forehead\n [10, 109, 67],\n [10, 67, 103],\n [10, 103, 54],\n [10, 338, 297],\n [10, 297, 332],\n \n // Left eye area\n [33, 133, 159],\n [33, 159, 145],\n [70, 63, 33],\n [63, 105, 133],\n \n // Right eye area \n [362, 263, 386],\n [362, 386, 374],\n [300, 293, 263],\n [293, 334, 362],\n \n // Nose\n [6, 4, 48],\n [6, 4, 278],\n [4, 1, 48],\n [4, 1, 278],\n \n // Mouth\n [61, 13, 78],\n [291, 13, 308],\n [61, 14, 95],\n [291, 14, 324],\n [13, 14, 61],\n [13, 14, 291],\n \n // Cheeks\n [33, 48, 61],\n [263, 278, 291],\n [54, 48, 33],\n [284, 278, 263],\n \n // Jaw\n [61, 152, 127],\n [291, 152, 356],\n [127, 234, 152],\n [356, 454, 152],\n ];\n }\n \n // Render triangulated UV map\n renderToUV(ctx, videoCanvas, screenPoints, uvMapSize) {\n if (!screenPoints) return;\n \n const videoCtx = videoCanvas.getContext('2d');\n \n this.triangles.forEach(tri => {\n const [i1, i2, i3] = tri;\n const p1 = screenPoints[i1];\n const p2 = screenPoints[i2];\n const p3 = screenPoints[i3];\n \n if (!p1 || !p2 || !p3) return;\n \n const uv1 = FACE_UV_MAP.get(i1);\n const uv2 = FACE_UV_MAP.get(i2);\n const uv3 = FACE_UV_MAP.get(i3);\n \n if (!uv1 || !uv2 || !uv3) return;\n \n // Draw textured triangle using canvas transforms\n this.drawTexturedTriangle(\n ctx, videoCanvas,\n p1.x, p1.y, p2.x, p2.y, p3.x, p3.y,\n uv1[0] * uvMapSize, uv1[1] * uvMapSize,\n uv2[0] * uvMapSize, uv2[1] * uvMapSize,\n uv3[0] * uvMapSize, uv3[1] * uvMapSize\n );\n });\n }\n \n // Draw a textured triangle using affine transform\n drawTexturedTriangle(ctx, img, x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2) {\n ctx.save();\n ctx.beginPath();\n ctx.moveTo(u0, v0);\n ctx.lineTo(u1, v1);\n ctx.lineTo(u2, v2);\n ctx.closePath();\n ctx.clip();\n \n // Calculate affine transform\n const denom = (x1 - x2) * (y0 - y2) - (x0 - x2) * (y1 - y2);\n if (Math.abs(denom) < 0.001) {\n ctx.restore();\n return;\n }\n \n const m11 = ((u1 - u2) * (y0 - y2) - (u0 - u2) * (y1 - y2)) / denom;\n const m12 = ((u0 - u2) * (x1 - x2) - (u1 - u2) * (x0 - x2)) / denom;\n const m21 = ((v1 - v2) * (y0 - y2) - (v0 - v2) * (y1 - y2)) / denom;\n const m22 = ((v0 - v2) * (x1 - x2) - (v1 - v2) * (x0 - x2)) / denom;\n const dx = u2 - m11 * x2 - m12 * y2;\n const dy = v2 - m21 * x2 - m22 * y2;\n \n ctx.transform(m11, m21, m12, m22, dx, dy);\n ctx.drawImage(img, 0, 0);\n ctx.restore();\n }\n}\n\n// ============================================================================\n// INITIALIZE\n// ============================================================================\n\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => initTextureMapper());\n} else {\n initTextureMapper();\n}\n`;\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n \n if (url.pathname === \"/api/config\" && req.method === \"GET\") {\n return Response.json(DEFAULT_CONFIG);\n }\n\n const html = `\n\n\n FaceMesh Texture Mapper - UV Capture Tool\n \n \n \n \n \n \n \n \n\n \n\n\n${TEXTURE_MAPPER_HTML}\n\n \n\n`;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n },\n });\n}","createdAt",["D",1767586197069],"branchVersion","branchId","db931ee6-e9eb-11f0-9212-42dde27851f2","id","db9108b8-e9eb-11f0-9212-42dde27851f2","facelabtexture",["D",1767585965871],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019b43e2-aa14-727d-9d22-490aa147aa0b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019b43e2-aa14-727d-9d22-4c67294d95f4","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":54,"_102":103,"_104":25},"branch",{"_13":83,"_32":84,"_43":42,"_85":44,"_86":87,"_88":89,"_90":91,"_92":93,"_94":62,"_95":45,"_96":97},"isOwned",19,"main","projectId","forkedBranchId","77a495b4-e4a4-11f0-9e9c-42dde27851f2","forkedBranchVersion",157,"forkedProjectPrivacy","unlisted","forkedProjectId","77a45bc6-e4a4-11f0-9e9c-42dde27851f2","forkedProjectOrgId","projectName","userHandle","banks","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM3QkpMYjNNQXJWZGdESmFRZHZyc2ZSS1djUyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":307,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":308,"_78":309,"_80":310,"_82":25},"tree",[250,251,252,253,254,255,256,257,258,259,260,261,262,263],"files",[250,251,252,253,254,255,256,257,258,259,260,261,262,263],"counts",{"_240":60,"_241":155,"_242":60,"_243":244,"_245":246},"contents",[137,138,139,140,141,142,143,144,145,146,147,148,149,150],"upstreamProject","upstreamBranch",{"_43":87,"_38":130,"_131":132,"_32":84,"_85":93,"_13":133,"_86":-5,"_88":-5,"_134":135,"_47":-5,"_82":25,"_49":91,"_96":97,"_61":62,"_95":136},"emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},["D",1767005548148],"updatedAt",["D",1768202325411],316,"lockfileKey","1768202351285-esm.town_v_banks_facelab0@316-main","facelab0",{"_43":234,"_32":235,"_30":236,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":237,"_13":60,"_33":158,"_35":238,"_24":25,"_160":-5,"_27":239},{"_43":228,"_32":229,"_30":230,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":231,"_13":60,"_33":158,"_35":232,"_24":25,"_160":-5,"_27":233},{"_43":221,"_32":222,"_30":223,"_154":-5,"_41":42,"_40":224,"_156":25,"_38":225,"_13":155,"_33":158,"_35":226,"_24":25,"_160":-5,"_27":227},{"_43":215,"_32":216,"_30":217,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":218,"_13":60,"_33":158,"_35":219,"_24":25,"_160":-5,"_27":220},{"_43":211,"_32":28,"_30":31,"_154":-5,"_41":42,"_40":14,"_156":25,"_38":212,"_13":213,"_33":34,"_35":37,"_24":25,"_160":-5,"_27":214},{"_43":205,"_32":206,"_30":207,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":208,"_13":60,"_33":158,"_35":209,"_24":25,"_160":-5,"_27":210},{"_43":199,"_32":200,"_30":201,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":202,"_13":60,"_33":158,"_35":203,"_24":25,"_160":-5,"_27":204},{"_43":193,"_32":194,"_30":195,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":196,"_13":60,"_33":158,"_35":197,"_24":25,"_160":-5,"_27":198},{"_43":187,"_32":188,"_30":189,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":190,"_13":60,"_33":158,"_35":191,"_24":25,"_160":-5,"_27":192},{"_43":180,"_32":181,"_30":182,"_154":-5,"_41":42,"_40":183,"_156":25,"_38":184,"_13":155,"_33":158,"_35":185,"_24":25,"_160":-5,"_27":186},{"_43":174,"_32":175,"_30":176,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":177,"_13":60,"_33":158,"_35":178,"_24":25,"_160":-5,"_27":179},{"_43":168,"_32":169,"_30":170,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":171,"_13":60,"_33":158,"_35":172,"_24":25,"_160":-5,"_27":173},{"_43":162,"_32":163,"_30":164,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":165,"_13":60,"_33":158,"_35":166,"_24":25,"_160":-5,"_27":167},{"_43":151,"_32":152,"_30":153,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":157,"_13":60,"_33":158,"_35":159,"_24":25,"_160":-5,"_27":161},"db9a1962-e9eb-11f0-9212-42dde27851f2","wizard.ts","019b8c55-674d-714b-886f-a74e7ca211f7","parentId",1,"latest",["D",1767585965871],"script","// @val.town/facelab-wizard\nexport interface WizardState {\n currentStep: number;\n totalSteps: number;\n}\n\nexport const STEP_ZOOM_MODES = [\n \"face\",\n \"eyes\",\n \"mouth\",\n \"mouth\",\n \"face\",\n] as const;\nexport const STEP_ZOOM_LABELS = [\n \"Full Face\",\n \"Eyes Region\",\n \"Mouth Region\",\n \"Teeth Detail\",\n \"Full Scene\",\n];\n\nexport function createWizardState(): WizardState {\n return {\n currentStep: 0,\n totalSteps: 5,\n };\n}\n\nexport function updateWizardUI(state: WizardState, devView: boolean): void {\n const { currentStep, totalSteps } = state;\n\n // Update progress steps\n document.querySelectorAll(\".progress-step\").forEach((el, i) => {\n el.classList.remove(\"active\", \"completed\");\n if (i < currentStep) el.classList.add(\"completed\");\n else if (i === currentStep) el.classList.add(\"active\");\n });\n\n // Update step labels\n document.querySelectorAll(\".step-label\").forEach((el, i) => {\n el.classList.remove(\"active\", \"completed\");\n if (i < currentStep) el.classList.add(\"completed\");\n else if (i === currentStep) el.classList.add(\"active\");\n });\n\n // Update step panels\n document.querySelectorAll(\".step-panel\").forEach((el, i) => {\n el.classList.toggle(\"active\", i === currentStep);\n });\n\n // Update navigation buttons\n const prevBtn = document.getElementById(\"prev-step\") as HTMLButtonElement;\n if (prevBtn) {\n prevBtn.style.visibility = currentStep === 0 ? \"hidden\" : \"visible\";\n }\n\n const nextBtn = document.getElementById(\"next-step\") as HTMLButtonElement;\n if (nextBtn) {\n if (currentStep === totalSteps - 1) {\n nextBtn.innerHTML =\n `Finish `;\n } else {\n nextBtn.innerHTML =\n `Next `;\n }\n }\n\n updateZoom(state, devView);\n}\n\nexport function updateZoom(state: WizardState, devView: boolean): void {\n const container = document.getElementById(\"container\");\n const indicator = document.getElementById(\"zoom-indicator\");\n const label = document.getElementById(\"zoom-label\");\n\n if (!container || !indicator || !label) return;\n\n // Don't apply zoom in dev mode\n if (devView) {\n container.classList.remove(\"zoomed-eyes\", \"zoomed-mouth\", \"zoomed-face\");\n container.classList.add(\"dev-mode\");\n indicator.classList.remove(\"visible\");\n return;\n }\n\n container.classList.remove(\n \"zoomed-eyes\",\n \"zoomed-mouth\",\n \"zoomed-face\",\n \"dev-mode\",\n );\n\n const zoomMode = STEP_ZOOM_MODES[state.currentStep];\n if (zoomMode === \"eyes\") {\n container.classList.add(\"zoomed-eyes\");\n indicator.classList.add(\"visible\");\n label.textContent = \"Zoomed: Eyes\";\n } else if (zoomMode === \"mouth\") {\n container.classList.add(\"zoomed-mouth\");\n indicator.classList.add(\"visible\");\n label.textContent = \"Zoomed: Mouth\";\n } else {\n indicator.classList.remove(\"visible\");\n }\n}\n\nexport function goToStep(\n state: WizardState,\n step: number,\n devView: boolean,\n): void {\n state.currentStep = Math.max(0, Math.min(state.totalSteps - 1, step));\n updateWizardUI(state, devView);\n}","label",[152],"db9a0904-e9eb-11f0-9212-42dde27851f2","ui-bindings.ts","019b8c55-674d-714b-886f-a06091638c6d",["D",1767585965871],"// @val.town/facelab-ui-bindings\n\nimport * as THREE from \"https://unpkg.com/three@0.160.0/build/three.module.js\";\n\nimport type { FaceLabConfig } from \"./types.ts\";\n\nexport function showToast(message: string): void {\n const toast = document.getElementById(\"toast\");\n if (!toast) return;\n\n toast.textContent = message;\n toast.classList.add(\"show\");\n setTimeout(() => toast.classList.remove(\"show\"), 2500);\n}\n\nexport function bindSlider(\n id: string,\n config: FaceLabConfig,\n configKey: keyof FaceLabConfig,\n valueId: string,\n transform: (v: number) => number = (v) => v,\n format: (v: number) => string = (v) => v.toFixed(2),\n): void {\n const slider = document.getElementById(id) as HTMLInputElement;\n const valueEl = document.getElementById(valueId);\n if (!slider) return;\n\n slider.value = String(config[configKey]);\n if (valueEl) valueEl.textContent = format(config[configKey] as number);\n\n slider.oninput = () => {\n (config as any)[configKey] = transform(parseFloat(slider.value));\n if (valueEl) valueEl.textContent = format(config[configKey] as number);\n };\n}\n\nexport function bindColor(\n id: string,\n config: FaceLabConfig,\n configKey: keyof FaceLabConfig,\n previewId: string,\n hexId: string,\n onChange?: (color: string) => void,\n): void {\n const input = document.getElementById(id) as HTMLInputElement;\n const preview = document.getElementById(previewId) as HTMLElement;\n const hex = document.getElementById(hexId) as HTMLElement;\n if (!input || !preview) return;\n\n input.value = config[configKey] as string;\n preview.style.background = config[configKey] as string;\n if (hex) hex.textContent = config[configKey] as string;\n\n preview.onclick = () => input.click();\n\n input.oninput = () => {\n (config as any)[configKey] = input.value;\n preview.style.background = input.value;\n if (hex) hex.textContent = input.value;\n if (onChange) onChange(input.value);\n };\n}\n\nexport function bindToggle(\n id: string,\n config: FaceLabConfig,\n configKey: keyof FaceLabConfig,\n onChange?: (value: boolean) => void,\n): void {\n const toggle = document.getElementById(id);\n if (!toggle) return;\n\n toggle.classList.toggle(\"active\", config[configKey] as boolean);\n\n toggle.onclick = () => {\n (config as any)[configKey] = !(config[configKey] as boolean);\n toggle.classList.toggle(\"active\", config[configKey] as boolean);\n if (onChange) onChange(config[configKey] as boolean);\n };\n}\n\nexport function setupFileUpload(\n inputId: string,\n onTextureLoad: (texture: THREE.Texture) => void,\n): void {\n const textureLoader = new THREE.TextureLoader();\n const input = document.getElementById(inputId) as HTMLInputElement;\n\n if (!input) return;\n\n input.addEventListener(\"change\", (e) => {\n const file = (e.target as HTMLInputElement).files?.[0];\n if (!file) return;\n\n const url = URL.createObjectURL(file);\n textureLoader.load(url, (tex) => {\n tex.colorSpace = THREE.SRGBColorSpace;\n onTextureLoad(tex);\n showToast(\"Texture applied\");\n });\n });\n}",[163],"db99fb08-e9eb-11f0-9212-42dde27851f2","types.ts","019b8c55-674d-714b-886f-9c8e91f67bd6",["D",1767585965871],"// @val.town/facelab-types\nexport interface FaceLabConfig {\n performance: string;\n devView: boolean;\n videoHidden: boolean;\n lerpFactor: number;\n renderMode: \"Cel-Shaded\" | \"Standard\";\n skinColor: string;\n outlineColor: string;\n outlineWidth: number;\n eyeStyle: \"Cartoon\" | \"Natural\" | \"Anime\";\n eyeColor: string;\n pupilSize: number;\n eyeSize: number;\n showTopTeeth: boolean;\n topTeethWidth: number;\n topTeethHeight: number;\n topTeethOffsetX: number;\n topTeethOffsetY: number;\n topTeethDepth: number;\n showBottomTeeth: boolean;\n bottomTeethWidth: number;\n bottomTeethHeight: number;\n bottomTeethOffsetX: number;\n bottomTeethOffsetY: number;\n bottomTeethDepth: number;\n teethScale: number;\n teethAnchorBlend: number;\n showTongue: boolean;\n tongueColor: string;\n tongueDepth: number;\n lipOpacity: number;\n eyelashOpacity: number;\n eyebrowOpacity: number;\n ambientIntensity: number;\n lightIntensity: number;\n lightColor: string;\n lightX: number;\n lightY: number;\n lightZ: number;\n isoZoom: number;\n frameDelay: number;\n showDelayedVideo: boolean;\n}\n\nexport interface Point2D {\n x: number;\n y: number;\n}\n\nexport interface PointCache {\n [index: number]: Point2D;\n}\n\nexport interface DrawStyle {\n fill?: string;\n stroke?: string;\n lineWidth?: number;\n blur?: number;\n blend?: GlobalCompositeOperation;\n}\n\nexport interface LandmarkIndices {\n LIPS_OUTER: number[];\n LIPS_INNER: number[];\n LEFT_EYE: number[];\n LEFT_EYE_LOOP: number[];\n LEFT_LID: number[];\n LEFT_BROW: number[];\n LEFT_EYE_OUTER: number;\n LEFT_EYE_INNER: number;\n RIGHT_EYE: number[];\n RIGHT_EYE_LOOP: number[];\n RIGHT_LID: number[];\n RIGHT_BROW: number[];\n RIGHT_EYE_OUTER: number;\n RIGHT_EYE_INNER: number;\n NOSE_TIP: number;\n CHIN: number;\n L_CHEEK: number;\n R_CHEEK: number;\n FACE_TOP: number;\n MOUTH_LEFT: number;\n MOUTH_RIGHT: number;\n MOUTH_TOP: number;\n MOUTH_BOTTOM: number;\n}",[169],"db99d6be-e9eb-11f0-9212-42dde27851f2","teeth-renderer.ts","019b8c55-674d-714b-886f-995d612b47ef",["D",1767585965871],"// @val.town/facelab-teeth-renderer\nimport type { FaceLabConfig, Point2D } from \"./types.ts\";\nimport { LANDMARKS, TEETH_SVG } from \"./constants.ts\";\n\nexport class SVGTeethRenderer {\n private topTeethImage: HTMLImageElement | null = null;\n private bottomTeethImage: HTMLImageElement | null = null;\n public loaded = false;\n\n constructor() {\n this.loadTeethImages();\n }\n\n private loadTeethImages(): void {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(TEETH_SVG, \"image/svg+xml\");\n const paths = svgDoc.querySelectorAll(\"path\");\n\n const topPaths: string[] = [];\n const bottomPaths: string[] = [];\n\n paths.forEach((path) => {\n const d = path.getAttribute(\"d\");\n if (!d) return;\n const match = d.match(/M\\s*([\\d.]+)\\s+([\\d.]+)/);\n if (match) {\n const y = parseFloat(match[2]);\n if (y < 1000) {\n topPaths.push(path.outerHTML);\n } else {\n bottomPaths.push(path.outerHTML);\n }\n }\n });\n\n const topSVG =\n ``;\n const bottomSVG =\n ``;\n\n this.topTeethImage = new Image();\n this.bottomTeethImage = new Image();\n\n const topBlob = new Blob([topSVG], { type: \"image/svg+xml\" });\n const bottomBlob = new Blob([bottomSVG], { type: \"image/svg+xml\" });\n\n this.topTeethImage.src = URL.createObjectURL(topBlob);\n this.bottomTeethImage.src = URL.createObjectURL(bottomBlob);\n\n let loadCount = 0;\n const checkLoaded = () => {\n if (++loadCount === 2) this.loaded = true;\n };\n\n this.topTeethImage.onload = checkLoaded;\n this.bottomTeethImage.onload = checkLoaded;\n }\n\n public render(\n ctx: CanvasRenderingContext2D,\n points: { [key: number]: Point2D },\n canvasW: number,\n canvasH: number,\n config: FaceLabConfig,\n ): void {\n if (!this.loaded) return;\n\n const mouthLeft = points[LANDMARKS.MOUTH_LEFT];\n const mouthRight = points[LANDMARKS.MOUTH_RIGHT];\n const mouthTop = points[LANDMARKS.MOUTH_TOP];\n const mouthBottom = points[LANDMARKS.MOUTH_BOTTOM];\n const lCheek = points[LANDMARKS.L_CHEEK];\n const rCheek = points[LANDMARKS.R_CHEEK];\n\n if (\n !mouthLeft || !mouthRight || !mouthTop || !mouthBottom || !lCheek ||\n !rCheek\n ) return;\n\n const faceWidth = Math.hypot(rCheek.x - lCheek.x, rCheek.y - lCheek.y);\n const axisX = mouthRight.x - mouthLeft.x;\n const axisY = mouthRight.y - mouthLeft.y;\n const mouthWidth = Math.hypot(axisX, axisY);\n\n if (mouthWidth < 1) return;\n\n const ux = axisX / mouthWidth;\n const uy = axisY / mouthWidth;\n const vx = uy;\n const vy = -ux;\n const mouthAngle = Math.atan2(uy, ux);\n\n const originX = (mouthLeft.x + mouthRight.x) / 2;\n const originY = (mouthLeft.y + mouthRight.y) / 2;\n\n const topDx = mouthTop.x - originX;\n const topDy = mouthTop.y - originY;\n const topLocalY = topDx * vx + topDy * vy;\n\n const bottomDx = mouthBottom.x - originX;\n const bottomDy = mouthBottom.y - originY;\n const bottomLocalY = bottomDx * vx + bottomDy * vy;\n\n const mouthOpenness = topLocalY - bottomLocalY;\n if (mouthOpenness < faceWidth * 0.02) return;\n\n const toScreen = (localX: number, localY: number): Point2D => ({\n x: originX + localX * ux + localY * vx,\n y: originY + localX * uy + localY * vy,\n });\n\n ctx.save();\n ctx.beginPath();\n\n const innerLip = LANDMARKS.LIPS_INNER.map((i) => points[i]).filter((p) =>\n p\n );\n if (innerLip.length > 2) {\n ctx.moveTo(innerLip[0].x, innerLip[0].y);\n for (let i = 1; i < innerLip.length; i++) {\n ctx.lineTo(innerLip[i].x, innerLip[i].y);\n }\n ctx.closePath();\n ctx.clip();\n }\n\n // Throat gradient\n const throatGrad = ctx.createRadialGradient(\n originX,\n originY,\n 0,\n originX,\n originY,\n mouthWidth,\n );\n throatGrad.addColorStop(0, \"#0a0202\");\n throatGrad.addColorStop(0.5, \"#1a0508\");\n throatGrad.addColorStop(1, \"#2a0a10\");\n ctx.fillStyle = throatGrad;\n ctx.fillRect(0, 0, canvasW, canvasH);\n\n // Tongue\n if (config.showTongue) {\n const tongueLocalY = bottomLocalY * (1 - config.tongueDepth);\n const tonguePos = toScreen(0, tongueLocalY);\n this.drawTongue(\n ctx,\n tonguePos.x,\n tonguePos.y,\n mouthWidth * 0.5,\n mouthOpenness * 0.4,\n mouthAngle,\n config,\n );\n }\n\n // Top teeth\n if (config.showTopTeeth && this.topTeethImage) {\n const baseLocalY = topLocalY * (1 - config.topTeethDepth);\n const teethLocalX = config.topTeethOffsetX * mouthWidth;\n const teethLocalY = baseLocalY - config.topTeethOffsetY * mouthOpenness;\n const teethPos = toScreen(teethLocalX, teethLocalY);\n\n const topWidth = mouthWidth * 1.1 * config.teethScale *\n config.topTeethWidth;\n const topHeight = topWidth * 0.5 * config.topTeethHeight;\n\n ctx.save();\n ctx.translate(teethPos.x, teethPos.y);\n ctx.rotate(mouthAngle);\n ctx.drawImage(\n this.topTeethImage,\n -topWidth / 2,\n -topHeight * 0.1,\n topWidth,\n topHeight,\n );\n ctx.restore();\n }\n\n // Bottom teeth\n if (config.showBottomTeeth && this.bottomTeethImage) {\n const baseLocalY = bottomLocalY * (1 - config.bottomTeethDepth);\n const teethLocalX = config.bottomTeethOffsetX * mouthWidth;\n const teethLocalY = baseLocalY -\n config.bottomTeethOffsetY * mouthOpenness;\n const teethPos = toScreen(teethLocalX, teethLocalY);\n\n const bottomWidth = mouthWidth * 1.1 * config.teethScale *\n config.bottomTeethWidth;\n const bottomHeight = bottomWidth * 0.5 * config.bottomTeethHeight;\n\n ctx.save();\n ctx.translate(teethPos.x, teethPos.y);\n ctx.rotate(mouthAngle);\n ctx.drawImage(\n this.bottomTeethImage,\n -bottomWidth / 2,\n -bottomHeight * 0.7,\n bottomWidth,\n bottomHeight,\n );\n ctx.restore();\n }\n\n ctx.restore();\n }\n\n private drawTongue(\n ctx: CanvasRenderingContext2D,\n x: number,\n y: number,\n w: number,\n h: number,\n angle: number,\n config: FaceLabConfig,\n ): void {\n ctx.save();\n ctx.translate(x, y);\n ctx.rotate(angle);\n\n const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, w);\n gradient.addColorStop(0, config.tongueColor);\n gradient.addColorStop(0.7, \"#a02020\");\n gradient.addColorStop(1, \"#601010\");\n\n ctx.fillStyle = gradient;\n ctx.beginPath();\n ctx.ellipse(0, h * 0.2, w, h, 0, 0, Math.PI);\n ctx.fill();\n\n ctx.strokeStyle = \"rgba(0,0,0,0.3)\";\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(0, -h * 0.5);\n ctx.lineTo(0, h * 0.3);\n ctx.stroke();\n\n ctx.restore();\n }\n}",[175],"28170dcc-e9ec-11f0-ab18-42dde27851f2","styles.ts","019b8c55-674d-714b-886f-96d820a3b09b",4,["D",1767586094234],"const STYLES = `\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n:root {\n --bg-primary: #0a0a0f;\n --bg-secondary: #12121a;\n --bg-tertiary: #1a1a24;\n --accent-primary: #6366f1;\n --accent-secondary: #8b5cf6;\n --accent-success: #22c55e;\n --accent-warning: #f59e0b;\n --accent-danger: #ef4444;\n --text-primary: #ffffff;\n --text-secondary: #a1a1aa;\n --text-muted: #71717a;\n --border-color: rgba(255, 255, 255, 0.1);\n --glass-bg: rgba(18, 18, 26, 0.8);\n}\n\nbody {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--bg-primary);\n color: var(--text-primary);\n overflow: hidden;\n height: 100vh;\n}\n\n.app-layout {\n display: grid;\n grid-template-columns: 1fr 380px;\n height: 100vh;\n gap: 0;\n}\n\n.viewport-section {\n position: relative;\n background: var(--bg-secondary);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.viewport-header {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 100;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 24px;\n background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);\n}\n\n.brand {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.brand-logo {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.brand-logo svg {\n width: 24px;\n height: 24px;\n color: white;\n}\n\n.brand-text {\n font-size: 20px;\n font-weight: 700;\n background: linear-gradient(135deg, #fff, #a1a1aa);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.brand-badge {\n font-size: 10px;\n padding: 2px 8px;\n background: var(--accent-warning);\n color: black;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.status-pills {\n display: flex;\n gap: 8px;\n}\n\n.status-pill {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: var(--glass-bg);\n border-radius: 20px;\n font-size: 12px;\n font-weight: 500;\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n}\n\n.status-dot {\n width: 8px;\n height: 8px;\n background: var(--accent-success);\n border-radius: 50%;\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n.viewport-container {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 80px 24px 24px;\n}\n\n#container {\n position: relative;\n width: 640px;\n height: 480px;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n background: #000;\n}\n\n#container video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scaleX(-1);\n}\n\n#overlay-canvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 20;\n pointer-events: none;\n}\n\n#uv-overlay-canvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 15;\n pointer-events: none;\n opacity: 0.5;\n}\n\n/* Capture indicators */\n.capture-indicator {\n position: absolute;\n bottom: 20px;\n left: 20px;\n right: 20px;\n z-index: 100;\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.angle-badge {\n padding: 6px 12px;\n background: var(--glass-bg);\n border-radius: 8px;\n font-size: 11px;\n font-family: 'JetBrains Mono', monospace;\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n transition: all 0.3s;\n}\n\n.angle-badge.captured {\n background: rgba(34, 197, 94, 0.3);\n border-color: var(--accent-success);\n}\n\n.angle-badge.current {\n background: rgba(99, 102, 241, 0.3);\n border-color: var(--accent-primary);\n animation: glow 1s infinite;\n}\n\n@keyframes glow {\n 0%, 100% { box-shadow: 0 0 5px var(--accent-primary); }\n 50% { box-shadow: 0 0 20px var(--accent-primary); }\n}\n\n/* Progress ring */\n.capture-progress {\n position: absolute;\n top: 80px;\n right: 20px;\n z-index: 100;\n background: var(--glass-bg);\n border-radius: 16px;\n padding: 16px;\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n}\n\n.progress-ring {\n width: 100px;\n height: 100px;\n position: relative;\n}\n\n.progress-ring svg {\n transform: rotate(-90deg);\n}\n\n.progress-ring circle {\n fill: none;\n stroke-width: 8;\n}\n\n.progress-ring .bg {\n stroke: var(--bg-tertiary);\n}\n\n.progress-ring .progress {\n stroke: var(--accent-primary);\n stroke-linecap: round;\n transition: stroke-dashoffset 0.3s;\n}\n\n.progress-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n}\n\n.progress-percent {\n font-size: 24px;\n font-weight: 700;\n}\n\n.progress-label {\n font-size: 10px;\n color: var(--text-muted);\n}\n\n/* UV Preview */\n.uv-preview {\n position: absolute;\n bottom: 80px;\n right: 20px;\n z-index: 100;\n background: var(--glass-bg);\n border-radius: 12px;\n padding: 12px;\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n}\n\n.uv-preview-title {\n font-size: 11px;\n color: var(--text-muted);\n margin-bottom: 8px;\n}\n\n#uv-preview-canvas {\n width: 150px;\n height: 150px;\n border-radius: 8px;\n background: #1a1a24;\n}\n\n/* Sidebar */\n.sidebar-section {\n background: var(--bg-secondary);\n border-left: 1px solid var(--border-color);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.sidebar-header {\n padding: 20px;\n border-bottom: 1px solid var(--border-color);\n}\n\n.sidebar-title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 4px;\n}\n\n.sidebar-subtitle {\n font-size: 12px;\n color: var(--text-muted);\n}\n\n.sidebar-content {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n.control-group {\n margin-bottom: 24px;\n}\n\n.control-group-title {\n font-size: 11px;\n font-weight: 600;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 12px;\n}\n\n.slider-control {\n margin-bottom: 16px;\n}\n\n.slider-header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n}\n\n.slider-label {\n font-size: 13px;\n color: var(--text-secondary);\n}\n\n.slider-value {\n font-size: 12px;\n font-family: 'JetBrains Mono', monospace;\n color: var(--accent-primary);\n}\n\ninput[type=\"range\"] {\n width: 100%;\n height: 6px;\n background: var(--bg-tertiary);\n border-radius: 3px;\n outline: none;\n -webkit-appearance: none;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: var(--accent-primary);\n border-radius: 50%;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n transform: scale(1.2);\n}\n\n.toggle-control {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--bg-tertiary);\n border-radius: 10px;\n cursor: pointer;\n margin-bottom: 8px;\n transition: all 0.2s;\n}\n\n.toggle-control:hover {\n background: rgba(99, 102, 241, 0.1);\n}\n\n.toggle-control.active {\n background: rgba(99, 102, 241, 0.2);\n border: 1px solid var(--accent-primary);\n}\n\n.toggle-label {\n font-size: 13px;\n}\n\n.toggle-switch {\n width: 40px;\n height: 22px;\n background: var(--bg-primary);\n border-radius: 11px;\n position: relative;\n transition: all 0.3s;\n}\n\n.toggle-switch::after {\n content: '';\n position: absolute;\n width: 18px;\n height: 18px;\n background: var(--text-muted);\n border-radius: 50%;\n top: 2px;\n left: 2px;\n transition: all 0.3s;\n}\n\n.toggle-control.active .toggle-switch {\n background: var(--accent-primary);\n}\n\n.toggle-control.active .toggle-switch::after {\n left: 20px;\n background: white;\n}\n\n/* Action buttons */\n.action-buttons {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n padding: 20px;\n border-top: 1px solid var(--border-color);\n}\n\n.action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 14px 20px;\n border: none;\n border-radius: 10px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.action-btn svg {\n width: 18px;\n height: 18px;\n}\n\n.action-btn-primary {\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n color: white;\n grid-column: span 2;\n}\n\n.action-btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);\n}\n\n.action-btn-secondary {\n background: var(--bg-tertiary);\n color: var(--text-primary);\n border: 1px solid var(--border-color);\n}\n\n.action-btn-secondary:hover {\n background: rgba(99, 102, 241, 0.1);\n border-color: var(--accent-primary);\n}\n\n.action-btn-danger {\n background: rgba(239, 68, 68, 0.2);\n color: var(--accent-danger);\n border: 1px solid var(--accent-danger);\n}\n\n.action-btn-danger:hover {\n background: rgba(239, 68, 68, 0.3);\n}\n\n/* Instructions panel */\n.instructions {\n background: var(--bg-tertiary);\n border-radius: 12px;\n padding: 16px;\n margin-bottom: 20px;\n}\n\n.instructions-title {\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.instructions-title svg {\n width: 18px;\n height: 18px;\n color: var(--accent-primary);\n}\n\n.instructions-list {\n list-style: none;\n}\n\n.instructions-list li {\n font-size: 12px;\n color: var(--text-secondary);\n padding: 6px 0;\n padding-left: 20px;\n position: relative;\n}\n\n.instructions-list li::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 6px;\n height: 6px;\n background: var(--accent-primary);\n border-radius: 50%;\n}\n\n/* Toast notification */\n#toast {\n position: fixed;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%) translateY(100px);\n background: var(--glass-bg);\n color: var(--text-primary);\n padding: 14px 28px;\n border-radius: 12px;\n font-size: 14px;\n font-weight: 500;\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n z-index: 1000;\n opacity: 0;\n transition: all 0.3s ease;\n}\n\n#toast.show {\n transform: translateX(-50%) translateY(0);\n opacity: 1;\n}\n\n/* Stats panel */\n#stats-panel {\n position: absolute;\n top: 80px;\n left: 20px;\n background: var(--glass-bg);\n border-radius: 12px;\n padding: 12px 16px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n line-height: 1.6;\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n z-index: 100;\n display: none;\n}\n\n#stats-panel.visible {\n display: block;\n}\n\n/* Angle grid visualization */\n.angle-grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-template-rows: repeat(3, 1fr);\n gap: 4px;\n margin-top: 12px;\n}\n\n.angle-cell {\n aspect-ratio: 1;\n background: var(--bg-primary);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n color: var(--text-muted);\n transition: all 0.3s;\n}\n\n.angle-cell.captured {\n background: rgba(34, 197, 94, 0.3);\n color: var(--accent-success);\n}\n\n.angle-cell.current {\n background: rgba(99, 102, 241, 0.5);\n color: white;\n animation: pulse 1s infinite;\n}\n`;",[181],"db9988a8-e9eb-11f0-9212-42dde27851f2","shaders.ts","019b8c55-674d-714b-886f-90f7e81815e7",["D",1767585965871],"// @val.town/facelab-shaders\n\nimport * as THREE from \"https://unpkg.com/three@0.160.0/build/three.module.js\";\n\nexport function createCelMaterial(skinColor: string): THREE.ShaderMaterial {\n return new THREE.ShaderMaterial({\n vertexShader: `\n varying vec3 vNormal;\n void main() {\n vNormal = normalize(normalMatrix * normal);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform vec3 uColor;\n varying vec3 vNormal;\n void main() {\n vec3 light = normalize(vec3(0.5, 0.8, 1.0));\n float d = dot(vNormal, light);\n float i = smoothstep(0.0, 0.1, d) * 0.3 + 0.7;\n gl_FragColor = vec4(uColor * i, 1.0);\n }\n `,\n uniforms: {\n uColor: { value: new THREE.Color(skinColor) },\n },\n });\n}\n\nexport function createOutlineMaterial(\n outlineColor: string,\n outlineWidth: number,\n): THREE.ShaderMaterial {\n return new THREE.ShaderMaterial({\n vertexShader: `\n uniform float uWidth;\n void main() {\n vec3 pos = position + normal * uWidth;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\n }\n `,\n fragmentShader: `\n uniform vec3 uColor;\n void main() { gl_FragColor = vec4(uColor, 1.0); }\n `,\n uniforms: {\n uWidth: { value: outlineWidth },\n uColor: { value: new THREE.Color(outlineColor) },\n },\n side: THREE.BackSide,\n });\n}\n\nexport function createStandardMaterial(): THREE.MeshStandardMaterial {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff,\n transparent: true,\n opacity: 0.5,\n roughness: 0.5,\n metalness: 0.1,\n });\n}",[188],"db98bbbc-e9eb-11f0-9212-42dde27851f2","server.ts","019b8c55-674d-714b-886f-8efbed3a3718",["D",1767585965871],"// @val.town/facelab-server\n\nimport { FACELAB_STYLES } from \"./styles.ts\";\nimport { FACELAB_HTML } from \"./html-template.ts\";\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n\n // Handle different routes\n if (url.pathname === \"/api/config\" && req.method === \"GET\") {\n // API endpoint to get default config\n // UPDATED: Matches the new defaults from the second snippet\n return Response.json({\n performance: \"Low\",\n devView: false,\n videoHidden: false,\n lerpFactor: 0.95,\n renderMode: \"Cel-Shaded\",\n skinColor: \"#fff5e6\",\n outlineColor: \"#000000\",\n outlineWidth: 0.006,\n eyeStyle: \"Cartoon\",\n eyeColor: \"#3498db\",\n pupilSize: 0.45,\n eyeSize: 0.855,\n showTopTeeth: true,\n topTeethWidth: 1.39,\n topTeethHeight: 0.86,\n topTeethOffsetX: -0.06,\n topTeethOffsetY: -0.30,\n topTeethDepth: 0.08,\n showBottomTeeth: true,\n bottomTeethWidth: 1.21,\n bottomTeethHeight: 0.66,\n bottomTeethOffsetX: -0.06,\n bottomTeethOffsetY: 0.26,\n bottomTeethDepth: 0.28,\n teethScale: 0.75,\n teethAnchorBlend: 0.79,\n showTongue: true,\n tongueColor: \"#d13d69\",\n tongueDepth: 0.187,\n lipOpacity: 0.095,\n eyelashOpacity: 1.0,\n eyebrowOpacity: 0,\n ambientIntensity: 1.982,\n lightIntensity: 2.445,\n lightColor: \"#ffffff\",\n lightX: 5,\n lightY: 2,\n lightZ: 5,\n isoZoom: 2.5,\n frameDelay: 1,\n showDelayedVideo: true,\n });\n }\n\n // Serve the main application\n const html = `\n\n\n Face Lab 2027 - AI Avatar Studio\n \n \n \n \n \n \n \n \n\n \n\n\n${FACELAB_HTML}\n\n \n\n`;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n },\n });\n}\n\n// Complete client-side script (UPDATED with Frame Buffer & Delay Logic)\nconst FACELAB_CLIENT_SCRIPT = `\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three/addons/controls/OrbitControls.js';\nimport { MindARThree } from 'mindar-face-three';\n\n// SVG TEETH DATA\nconst TEETH_SVG = \\`\\`;\n\n// CONFIGURATION\nconst STORAGE_KEY = 'facelab-2027-config';\n\nconst DEFAULT_CONFIG = {\n performance: \"Low\",\n devView: false,\n videoHidden: false,\n lerpFactor: 0.95,\n renderMode: \"Cel-Shaded\",\n skinColor: \"#fff5e6\",\n outlineColor: \"#000000\",\n outlineWidth: 0.006,\n eyeStyle: \"Cartoon\",\n eyeColor: \"#3498db\",\n pupilSize: 0.45,\n eyeSize: 0.855,\n showTopTeeth: true,\n topTeethWidth: 1.39,\n topTeethHeight: 0.86,\n topTeethOffsetX: -0.06,\n topTeethOffsetY: -0.30,\n topTeethDepth: 0.08,\n showBottomTeeth: true,\n bottomTeethWidth: 1.21,\n bottomTeethHeight: 0.66,\n bottomTeethOffsetX: -0.06,\n bottomTeethOffsetY: 0.26,\n bottomTeethDepth: 0.28,\n teethScale: 0.75,\n teethAnchorBlend: 0.79,\n showTongue: true,\n tongueColor: \"#d13d69\",\n tongueDepth: 0.187,\n lipOpacity: 0.095,\n eyelashOpacity: 1.0,\n eyebrowOpacity: 0,\n ambientIntensity: 1.982,\n lightIntensity: 2.445,\n lightColor: \"#ffffff\",\n lightX: 5,\n lightY: 2,\n lightZ: 5,\n isoZoom: 2.5,\n frameDelay: 1,\n showDelayedVideo: true,\n};\n\nfunction loadConfig() {\n try {\n const saved = localStorage.getItem(STORAGE_KEY);\n if (saved) return { ...DEFAULT_CONFIG, ...JSON.parse(saved) };\n } catch (e) { console.warn('Load config failed:', e); }\n return { ...DEFAULT_CONFIG };\n}\n\nfunction saveConfig() {\n try {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(CONFIG));\n showToast('Configuration saved');\n } catch (e) {\n showToast('Failed to save');\n }\n}\n\nfunction resetConfig() {\n localStorage.removeItem(STORAGE_KEY);\n showToast('Resetting...');\n setTimeout(() => location.reload(), 800);\n}\n\nfunction showToast(message) {\n const toast = document.getElementById('toast');\n toast.textContent = message;\n toast.classList.add('show');\n setTimeout(() => toast.classList.remove('show'), 2500);\n}\n\nconst CONFIG = loadConfig();\n\n// VIDEO FRAME BUFFER CLASS\nclass VideoFrameBuffer {\n constructor(maxFrames = 15) {\n this.maxFrames = maxFrames;\n this.frames = [];\n this.frameNumbers = [];\n this.currentFrameNumber = 0;\n }\n\n captureFrame(video, frameNumber) {\n if (!video || video.readyState < 2) return;\n\n // Create a new canvas for this frame\n const canvas = document.createElement(\"canvas\");\n canvas.width = video.videoWidth || 640;\n canvas.height = video.videoHeight || 480;\n const ctx = canvas.getContext(\"2d\");\n\n // Draw mirrored (video is already mirrored by MindAR)\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n\n this.frames.push(canvas);\n this.frameNumbers.push(frameNumber);\n this.currentFrameNumber = frameNumber;\n\n // Remove old frames\n while (this.frames.length > this.maxFrames) {\n this.frames.shift();\n this.frameNumbers.shift();\n }\n }\n\n getDelayedFrame(delayFrames) {\n if (this.frames.length === 0) return null;\n\n const index = Math.max(0, this.frames.length - 1 - delayFrames);\n return {\n canvas: this.frames[index],\n frameNumber: this.frameNumbers[index],\n currentFrameNumber: this.currentFrameNumber,\n actualDelay: this.frames.length - 1 - index,\n bufferedFrames: this.frames.length,\n };\n }\n\n clear() {\n this.frames = [];\n this.frameNumbers = [];\n }\n}\n\n// Parallax state\nlet currentFaceTiltX = 0;\nlet currentFaceTiltY = 0;\nconst parallaxBg = document.getElementById('parallax-bg');\n\nfunction updateParallax(tiltX, tiltY) {\n currentFaceTiltX += (tiltX - currentFaceTiltX) * 0.1;\n currentFaceTiltY += (tiltY - currentFaceTiltY) * 0.1;\n const translateX = -currentFaceTiltX * 30;\n const translateY = -currentFaceTiltY * 15;\n parallaxBg.style.transform = \\`translate(\\${translateX}px, \\${translateY}px)\\`;\n}\n\n// LANDMARKS\nconst LANDMARKS = {\n LIPS_OUTER: [61, 146, 91, 181, 84, 17, 314, 405, 321, 375, 291, 409, 270, 269, 267, 0, 37, 39, 40, 185, 61],\n LIPS_INNER: [78, 95, 88, 178, 87, 14, 317, 402, 318, 324, 308, 415, 310, 311, 312, 13, 82, 81, 80, 191, 78],\n LEFT_EYE: [33, 7, 163, 144, 145, 153, 154, 155, 133, 173, 157, 158, 159, 160, 161, 246, 33],\n LEFT_EYE_LOOP: [33, 246, 161, 160, 159, 158, 157, 173, 133, 155, 154, 153, 145, 144, 163, 7, 33],\n LEFT_LID: [33, 246, 161, 160, 159, 158, 157, 173],\n LEFT_BROW: [70, 63, 105, 66, 107, 55, 65, 52, 53, 46],\n LEFT_EYE_OUTER: 33,\n LEFT_EYE_INNER: 133,\n RIGHT_EYE: [362, 382, 381, 380, 374, 373, 390, 249, 263, 466, 388, 387, 386, 385, 384, 398, 362],\n RIGHT_EYE_LOOP: [362, 398, 384, 385, 386, 387, 388, 466, 263, 249, 390, 373, 374, 380, 381, 382, 362],\n RIGHT_LID: [263, 466, 388, 387, 386, 385, 384, 398],\n RIGHT_BROW: [300, 293, 334, 296, 336, 285, 295, 282, 283, 276],\n RIGHT_EYE_OUTER: 263,\n RIGHT_EYE_INNER: 362,\n NOSE_TIP: 1,\n CHIN: 152,\n L_CHEEK: 234,\n R_CHEEK: 454,\n FACE_TOP: 10,\n MOUTH_LEFT: 61,\n MOUTH_RIGHT: 291,\n MOUTH_TOP: 13,\n MOUTH_BOTTOM: 14,\n};\n\nconst ACTIVE_INDICES = new Set();\nObject.values(LANDMARKS).forEach(v => Array.isArray(v) ? v.forEach(i => ACTIVE_INDICES.add(i)) : ACTIVE_INDICES.add(v));\n\n// WIZARD STATE\nlet currentStep = 0;\nconst totalSteps = 5;\nconst stepZoomModes = ['face', 'eyes', 'mouth', 'mouth', 'face'];\n\nfunction updateWizardUI() {\n document.querySelectorAll('.progress-step').forEach((el, i) => {\n el.classList.remove('active', 'completed');\n if (i < currentStep) el.classList.add('completed');\n else if (i === currentStep) el.classList.add('active');\n });\n\n document.querySelectorAll('.step-label').forEach((el, i) => {\n el.classList.remove('active', 'completed');\n if (i < currentStep) el.classList.add('completed');\n else if (i === currentStep) el.classList.add('active');\n });\n\n document.querySelectorAll('.step-panel').forEach((el, i) => {\n el.classList.toggle('active', i === currentStep);\n });\n\n document.getElementById('prev-step').style.visibility = currentStep === 0 ? 'hidden' : 'visible';\n const nextBtn = document.getElementById('next-step');\n if (currentStep === totalSteps - 1) {\n nextBtn.innerHTML = \\`Finish \\`;\n } else {\n nextBtn.innerHTML = \\`Next \\`;\n }\n\n updateZoom();\n}\n\nfunction updateZoom() {\n const container = document.getElementById('container');\n const indicator = document.getElementById('zoom-indicator');\n const label = document.getElementById('zoom-label');\n\n if (CONFIG.devView) {\n container.classList.remove('zoomed-eyes', 'zoomed-mouth', 'zoomed-face');\n container.classList.add('dev-mode');\n indicator.classList.remove('visible');\n return;\n }\n\n container.classList.remove('zoomed-eyes', 'zoomed-mouth', 'zoomed-face', 'dev-mode');\n\n const zoomMode = stepZoomModes[currentStep];\n if (zoomMode === 'eyes') {\n container.classList.add('zoomed-eyes');\n indicator.classList.add('visible');\n label.textContent = 'Zoomed: Eyes';\n } else if (zoomMode === 'mouth') {\n container.classList.add('zoomed-mouth');\n indicator.classList.add('visible');\n label.textContent = 'Zoomed: Mouth';\n } else {\n indicator.classList.remove('visible');\n }\n}\n\nfunction goToStep(step) {\n currentStep = Math.max(0, Math.min(totalSteps - 1, step));\n updateWizardUI();\n}\n\n// RENDERING HELPERS\nconst pointCache = {};\nconst tempVec = new THREE.Vector3();\n\nfunction projectPoint(index, positions, matrixWorld, camera, w, h) {\n tempVec.set(positions[index*3], positions[index*3+1], positions[index*3+2]);\n tempVec.applyMatrix4(matrixWorld);\n tempVec.project(camera);\n\n const targetX = (tempVec.x + 1) / 2 * w;\n const targetY = (-tempVec.y + 1) / 2 * h;\n\n if (!pointCache[index]) {\n pointCache[index] = { x: targetX, y: targetY };\n } else {\n const p = pointCache[index];\n p.x += (targetX - p.x) * CONFIG.lerpFactor;\n p.y += (targetY - p.y) * CONFIG.lerpFactor;\n }\n return pointCache[index];\n}\n\nfunction drawPath(ctx, points, isClosed, style = {}) {\n if (!points || points.length < 2) return;\n ctx.save();\n\n if (style.blend) ctx.globalCompositeOperation = style.blend;\n if (style.blur) ctx.filter = \\`blur(\\${style.blur}px)\\`;\n\n ctx.beginPath();\n ctx.moveTo(points[0].x, points[0].y);\n for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);\n if (isClosed) ctx.closePath();\n\n if (style.fill) { ctx.fillStyle = style.fill; ctx.fill(); }\n if (style.stroke) {\n ctx.strokeStyle = style.stroke;\n ctx.lineWidth = style.lineWidth || 1;\n ctx.lineCap = 'round';\n ctx.lineJoin = 'round';\n ctx.stroke();\n }\n ctx.restore();\n}\n\n// SVG TEETH RENDERER\nclass SVGTeethRenderer {\n constructor() {\n this.topTeethImage = null;\n this.bottomTeethImage = null;\n this.loaded = false;\n this.loadTeethImages();\n }\n\n loadTeethImages() {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(TEETH_SVG, 'image/svg+xml');\n const paths = svgDoc.querySelectorAll('path');\n\n const topPaths = [];\n const bottomPaths = [];\n\n paths.forEach(path => {\n const d = path.getAttribute('d');\n if (!d) return;\n const match = d.match(/M\\\\s*([\\\\d.]+)\\\\s+([\\\\d.]+)/);\n if (match) {\n const y = parseFloat(match[2]);\n if (y < 1000) topPaths.push(path.outerHTML);\n else bottomPaths.push(path.outerHTML);\n }\n });\n\n const topSVG = \\`\\`;\n const bottomSVG = \\`\\`;\n\n this.topTeethImage = new Image();\n this.bottomTeethImage = new Image();\n\n const topBlob = new Blob([topSVG], { type: 'image/svg+xml' });\n const bottomBlob = new Blob([bottomSVG], { type: 'image/svg+xml' });\n\n this.topTeethImage.src = URL.createObjectURL(topBlob);\n this.bottomTeethImage.src = URL.createObjectURL(bottomBlob);\n\n let loadCount = 0;\n const checkLoaded = () => { if (++loadCount === 2) this.loaded = true; };\n\n this.topTeethImage.onload = checkLoaded;\n this.bottomTeethImage.onload = checkLoaded;\n }\n\n render(ctx, points, canvasW, canvasH) {\n if (!this.loaded) return;\n\n const mouthLeft = points[LANDMARKS.MOUTH_LEFT];\n const mouthRight = points[LANDMARKS.MOUTH_RIGHT];\n const mouthTop = points[LANDMARKS.MOUTH_TOP];\n const mouthBottom = points[LANDMARKS.MOUTH_BOTTOM];\n const lCheek = points[LANDMARKS.L_CHEEK];\n const rCheek = points[LANDMARKS.R_CHEEK];\n\n if (!mouthLeft || !mouthRight || !mouthTop || !mouthBottom || !lCheek || !rCheek) return;\n\n const faceWidth = Math.hypot(rCheek.x - lCheek.x, rCheek.y - lCheek.y);\n const axisX = mouthRight.x - mouthLeft.x;\n const axisY = mouthRight.y - mouthLeft.y;\n const mouthWidth = Math.hypot(axisX, axisY);\n\n if (mouthWidth < 1) return;\n\n const ux = axisX / mouthWidth;\n const uy = axisY / mouthWidth;\n const vx = uy;\n const vy = -ux;\n const mouthAngle = Math.atan2(uy, ux);\n\n const originX = (mouthLeft.x + mouthRight.x) / 2;\n const originY = (mouthLeft.y + mouthRight.y) / 2;\n\n const topDx = mouthTop.x - originX;\n const topDy = mouthTop.y - originY;\n const topLocalY = topDx * vx + topDy * vy;\n\n const bottomDx = mouthBottom.x - originX;\n const bottomDy = mouthBottom.y - originY;\n const bottomLocalY = bottomDx * vx + bottomDy * vy;\n\n const mouthOpenness = topLocalY - bottomLocalY;\n if (mouthOpenness < faceWidth * 0.02) return;\n\n const toScreen = (localX, localY) => ({\n x: originX + localX * ux + localY * vx,\n y: originY + localX * uy + localY * vy\n });\n\n ctx.save();\n ctx.beginPath();\n const innerLip = LANDMARKS.LIPS_INNER.map(i => points[i]).filter(p => p);\n if (innerLip.length > 2) {\n ctx.moveTo(innerLip[0].x, innerLip[0].y);\n for (let i = 1; i < innerLip.length; i++) ctx.lineTo(innerLip[i].x, innerLip[i].y);\n ctx.closePath();\n ctx.clip();\n }\n\n const throatGrad = ctx.createRadialGradient(originX, originY, 0, originX, originY, mouthWidth);\n throatGrad.addColorStop(0, '#0a0202');\n throatGrad.addColorStop(0.5, '#1a0508');\n throatGrad.addColorStop(1, '#2a0a10');\n ctx.fillStyle = throatGrad;\n ctx.fillRect(0, 0, canvasW, canvasH);\n\n if (CONFIG.showTongue) {\n const tongueLocalY = bottomLocalY * (1 - CONFIG.tongueDepth);\n const tonguePos = toScreen(0, tongueLocalY);\n this.drawTongue(ctx, tonguePos.x, tonguePos.y, mouthWidth * 0.5, mouthOpenness * 0.4, mouthAngle);\n }\n\n if (CONFIG.showTopTeeth && this.topTeethImage) {\n const baseLocalY = topLocalY * (1 - CONFIG.topTeethDepth);\n const teethLocalX = CONFIG.topTeethOffsetX * mouthWidth;\n const teethLocalY = baseLocalY - CONFIG.topTeethOffsetY * mouthOpenness;\n const teethPos = toScreen(teethLocalX, teethLocalY);\n\n const topWidth = mouthWidth * 1.1 * CONFIG.teethScale * CONFIG.topTeethWidth;\n const topHeight = topWidth * 0.5 * CONFIG.topTeethHeight;\n\n ctx.save();\n ctx.translate(teethPos.x, teethPos.y);\n ctx.rotate(mouthAngle);\n ctx.drawImage(this.topTeethImage, -topWidth / 2, -topHeight * 0.1, topWidth, topHeight);\n ctx.restore();\n }\n\n if (CONFIG.showBottomTeeth && this.bottomTeethImage) {\n const baseLocalY = bottomLocalY * (1 - CONFIG.bottomTeethDepth);\n const teethLocalX = CONFIG.bottomTeethOffsetX * mouthWidth;\n const teethLocalY = baseLocalY - CONFIG.bottomTeethOffsetY * mouthOpenness;\n const teethPos = toScreen(teethLocalX, teethLocalY);\n\n const bottomWidth = mouthWidth * 1.1 * CONFIG.teethScale * CONFIG.bottomTeethWidth;\n const bottomHeight = bottomWidth * 0.5 * CONFIG.bottomTeethHeight;\n\n ctx.save();\n ctx.translate(teethPos.x, teethPos.y);\n ctx.rotate(mouthAngle);\n ctx.drawImage(this.bottomTeethImage, -bottomWidth / 2, -bottomHeight * 0.7, bottomWidth, bottomHeight);\n ctx.restore();\n }\n\n ctx.restore();\n }\n\n drawTongue(ctx, x, y, w, h, angle) {\n ctx.save();\n ctx.translate(x, y);\n ctx.rotate(angle);\n\n const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, w);\n gradient.addColorStop(0, CONFIG.tongueColor);\n gradient.addColorStop(0.7, '#a02020');\n gradient.addColorStop(1, '#601010');\n\n ctx.fillStyle = gradient;\n ctx.beginPath();\n ctx.ellipse(0, h * 0.2, w, h, 0, 0, Math.PI);\n ctx.fill();\n\n ctx.strokeStyle = 'rgba(0,0,0,0.3)';\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(0, -h * 0.5);\n ctx.lineTo(0, h * 0.3);\n ctx.stroke();\n\n ctx.restore();\n }\n}\n\nconst teethRenderer = new SVGTeethRenderer();\n\n// CARTOON EYE RENDERER\nfunction calculateEyeCenter(points, loopIndices) {\n let sumX = 0, sumY = 0, count = 0;\n for (const idx of loopIndices) {\n if (points[idx]) {\n sumX += points[idx].x;\n sumY += points[idx].y;\n count++;\n }\n }\n return count === 0 ? null : { x: sumX / count, y: sumY / count };\n}\n\nfunction drawCartoonEye(ctx, points, loopIndices, outerIdx, innerIdx, scale) {\n const eyePoints = loopIndices.map(i => points[i]).filter(p => p);\n if (eyePoints.length < 3) return;\n\n const irisCenter = calculateEyeCenter(points, loopIndices);\n if (!irisCenter) return;\n\n const outerCorner = points[outerIdx];\n const innerCorner = points[innerIdx];\n if (!outerCorner || !innerCorner) return;\n\n const eyeWidth = Math.hypot(outerCorner.x - innerCorner.x, outerCorner.y - innerCorner.y);\n if (eyeWidth < 1 || !isFinite(eyeWidth)) return;\n\n const irisRadius = (eyeWidth * 0.35) * CONFIG.eyeSize;\n if (irisRadius < 1 || !isFinite(irisRadius)) return;\n\n ctx.save();\n\n ctx.beginPath();\n ctx.moveTo(eyePoints[0].x, eyePoints[0].y);\n for (let i = 1; i < eyePoints.length; i++) ctx.lineTo(eyePoints[i].x, eyePoints[i].y);\n ctx.closePath();\n ctx.clip();\n\n ctx.fillStyle = '#ffffff';\n ctx.fill();\n ctx.lineWidth = 3 * scale;\n ctx.strokeStyle = 'rgba(0,0,0,0.1)';\n ctx.stroke();\n\n const grd = ctx.createRadialGradient(\n irisCenter.x, irisCenter.y, irisRadius * 0.1,\n irisCenter.x, irisCenter.y, irisRadius\n );\n grd.addColorStop(0, '#ffffff');\n grd.addColorStop(0.2, CONFIG.eyeColor);\n grd.addColorStop(0.8, CONFIG.eyeColor);\n grd.addColorStop(1, '#0a0a0a');\n\n ctx.fillStyle = grd;\n ctx.beginPath();\n ctx.arc(irisCenter.x, irisCenter.y, irisRadius, 0, Math.PI * 2);\n ctx.fill();\n\n ctx.fillStyle = '#000000';\n ctx.beginPath();\n ctx.arc(irisCenter.x, irisCenter.y, irisRadius * CONFIG.pupilSize, 0, Math.PI * 2);\n ctx.fill();\n\n ctx.fillStyle = 'rgba(255,255,255,0.9)';\n ctx.beginPath();\n ctx.arc(\n irisCenter.x + irisRadius * 0.3,\n irisCenter.y - irisRadius * 0.3,\n irisRadius * 0.18,\n 0, Math.PI * 2\n );\n ctx.fill();\n\n ctx.restore();\n\n ctx.save();\n ctx.beginPath();\n ctx.moveTo(eyePoints[0].x, eyePoints[0].y);\n for (let i = 1; i < eyePoints.length; i++) ctx.lineTo(eyePoints[i].x, eyePoints[i].y);\n ctx.closePath();\n ctx.strokeStyle = '#000000';\n ctx.lineWidth = 2 * scale;\n ctx.lineJoin = 'round';\n ctx.stroke();\n ctx.restore();\n}\n\n// MAIN APPLICATION\nasync function init() {\n const container = document.querySelector(\"#container\");\n const mindarThree = new MindARThree({ container: container });\n const { renderer, scene, camera: arCamera } = mindarThree;\n\n // Create frame buffer\n const frameBuffer = new VideoFrameBuffer(15);\n let globalFrameNumber = 0;\n\n // Create delayed video canvas - will be inserted after MindAR starts\n const delayedVideoCanvas = document.createElement(\"canvas\");\n delayedVideoCanvas.id = \"delayed-video-canvas\";\n delayedVideoCanvas.style.cssText = \\`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n pointer-events: none;\n transform: scaleX(-1);\n \\`;\n const delayedCtx = delayedVideoCanvas.getContext(\"2d\");\n\n const aspect = 640 / 480;\n const frustumSize = 0.5;\n const isoCamera = new THREE.OrthographicCamera(\n -frustumSize * aspect, frustumSize * aspect,\n frustumSize, -frustumSize, 0.001, 1000\n );\n isoCamera.position.set(0.3, 0.3, 0.3);\n isoCamera.lookAt(0, 0, 0);\n\n const controls = new OrbitControls(isoCamera, renderer.domElement);\n controls.enableZoom = true;\n controls.enablePan = true;\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.enabled = false;\n\n let activeCamera = arCamera;\n\n const ambientLight = new THREE.AmbientLight(0xffffff, CONFIG.ambientIntensity);\n scene.add(ambientLight);\n\n const dirLight = new THREE.DirectionalLight(new THREE.Color(CONFIG.lightColor), CONFIG.lightIntensity);\n dirLight.position.set(CONFIG.lightX, CONFIG.lightY, CONFIG.lightZ);\n scene.add(dirLight);\n\n const gridHelper = new THREE.GridHelper(1, 10, 0x444444, 0x222222);\n gridHelper.visible = false;\n scene.add(gridHelper);\n\n const axesHelper = new THREE.AxesHelper(0.2);\n axesHelper.visible = false;\n scene.add(axesHelper);\n\n const celMat = new THREE.ShaderMaterial({\n vertexShader: \\`\n varying vec3 vNormal;\n void main() {\n vNormal = normalize(normalMatrix * normal);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n \\`,\n fragmentShader: \\`\n uniform vec3 uColor;\n varying vec3 vNormal;\n void main() {\n vec3 light = normalize(vec3(0.5, 0.8, 1.0));\n float d = dot(vNormal, light);\n float i = smoothstep(0.0, 0.1, d) * 0.3 + 0.7;\n gl_FragColor = vec4(uColor * i, 1.0);\n }\n \\`,\n uniforms: { uColor: { value: new THREE.Color(CONFIG.skinColor) } }\n });\n\n const outlineMat = new THREE.ShaderMaterial({\n vertexShader: \\`\n uniform float uWidth;\n void main() {\n vec3 pos = position + normal * uWidth;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\n }\n \\`,\n fragmentShader: \\`\n uniform vec3 uColor;\n void main() { gl_FragColor = vec4(uColor, 1.0); }\n \\`,\n uniforms: {\n uWidth: { value: CONFIG.outlineWidth },\n uColor: { value: new THREE.Color(CONFIG.outlineColor) }\n },\n side: THREE.BackSide\n });\n\n const standardMat = new THREE.MeshStandardMaterial({\n color: 0xffffff, transparent: true, opacity: 0.5,\n roughness: 0.5, metalness: 0.1\n });\n\n const faceMesh = mindarThree.addFaceMesh();\n faceMesh.material = celMat;\n scene.add(faceMesh);\n\n const outlineMesh = new THREE.Mesh(faceMesh.geometry, outlineMat);\n outlineMesh.scale.multiplyScalar(1.02);\n scene.add(outlineMesh);\n\n const canvas = document.getElementById('overlay-canvas');\n const ctx = canvas.getContext('2d', { alpha: true, desynchronized: true });\n\n let lastTime = performance.now();\n let frames = 0;\n let fpsValue = 60;\n\n const handleResize = () => {\n const dpr = window.devicePixelRatio;\n const w = 640;\n const h = 480;\n\n renderer.setSize(w, h);\n renderer.setPixelRatio(dpr);\n\n canvas.width = w * dpr;\n canvas.height = h * dpr;\n\n delayedVideoCanvas.width = w;\n delayedVideoCanvas.height = h;\n\n arCamera.aspect = w / h;\n arCamera.updateProjectionMatrix();\n };\n\n handleResize();\n\n // UI BINDINGS\n document.getElementById('prev-step').onclick = () => goToStep(currentStep - 1);\n document.getElementById('next-step').onclick = () => {\n if (currentStep === totalSteps - 1) {\n saveConfig();\n showToast('Configuration complete!');\n } else {\n goToStep(currentStep + 1);\n }\n };\n\n document.querySelectorAll('.progress-step').forEach(el => {\n el.onclick = () => goToStep(parseInt(el.dataset.step));\n });\n\n document.querySelectorAll('.step-label').forEach(el => {\n el.onclick = () => goToStep(parseInt(el.dataset.step));\n });\n\n const bindSlider = (id, configKey, valueId, transform = v => v, format = v => v.toFixed(2)) => {\n const slider = document.getElementById(id);\n const valueEl = document.getElementById(valueId);\n if (!slider) return;\n\n slider.value = CONFIG[configKey];\n if (valueEl) valueEl.textContent = format(CONFIG[configKey]);\n\n slider.oninput = () => {\n CONFIG[configKey] = transform(parseFloat(slider.value));\n if (valueEl) valueEl.textContent = format(CONFIG[configKey]);\n };\n };\n\n const bindColor = (id, configKey, previewId, hexId, onChange) => {\n const input = document.getElementById(id);\n const preview = document.getElementById(previewId);\n const hex = document.getElementById(hexId);\n if (!input) return;\n\n input.value = CONFIG[configKey];\n preview.style.background = CONFIG[configKey];\n if (hex) hex.textContent = CONFIG[configKey];\n\n preview.onclick = () => input.click();\n\n input.oninput = () => {\n CONFIG[configKey] = input.value;\n preview.style.background = input.value;\n if (hex) hex.textContent = input.value;\n if (onChange) onChange(input.value);\n };\n };\n\n const bindToggle = (id, configKey, onChange) => {\n const toggle = document.getElementById(id);\n if (!toggle) return;\n\n toggle.classList.toggle('active', CONFIG[configKey]);\n\n toggle.onclick = () => {\n CONFIG[configKey] = !CONFIG[configKey];\n toggle.classList.toggle('active', CONFIG[configKey]);\n if (onChange) onChange(CONFIG[configKey]);\n };\n };\n\n // Frame delay controls\n const frameDelaySlider = document.getElementById(\"frame-delay\");\n const frameDelayValue = document.getElementById(\"frame-delay-value\");\n if (frameDelaySlider) {\n frameDelaySlider.value = CONFIG.frameDelay;\n frameDelayValue.textContent = CONFIG.frameDelay;\n\n frameDelaySlider.oninput = () => {\n CONFIG.frameDelay = parseInt(frameDelaySlider.value);\n frameDelayValue.textContent = CONFIG.frameDelay;\n document.getElementById(\"delay-pill\").textContent = \\`Delay: \\${CONFIG.frameDelay}f\\`;\n };\n }\n\n // Delayed video toggle\n const delayedVideoToggle = document.getElementById(\"toggle-delayed-video\");\n if (delayedVideoToggle) {\n delayedVideoToggle.classList.toggle(\"active\", CONFIG.showDelayedVideo);\n\n const updateVideoVisibility = () => {\n const video = container.querySelector(\"video\");\n if (video) {\n video.style.opacity = CONFIG.showDelayedVideo ? \"0\" : \"1\";\n }\n delayedVideoCanvas.style.display = CONFIG.showDelayedVideo ? \"block\" : \"none\";\n };\n\n delayedVideoToggle.onclick = () => {\n CONFIG.showDelayedVideo = !CONFIG.showDelayedVideo;\n delayedVideoToggle.classList.toggle(\"active\", CONFIG.showDelayedVideo);\n updateVideoVisibility();\n };\n }\n\n // FACE STEP\n bindColor('skin-color', 'skinColor', 'skin-color-preview', 'skin-color-hex', c => celMat.uniforms.uColor.value.set(c));\n bindColor('outline-color', 'outlineColor', 'outline-color-preview', 'outline-color-hex', c => outlineMat.uniforms.uColor.value.set(c));\n bindSlider('outline-width', 'outlineWidth', 'outline-width-value', v => v, v => v.toFixed(3));\n document.getElementById('outline-width').oninput = function() {\n CONFIG.outlineWidth = parseFloat(this.value);\n document.getElementById('outline-width-value').textContent = CONFIG.outlineWidth.toFixed(3);\n outlineMat.uniforms.uWidth.value = CONFIG.outlineWidth;\n };\n\n bindSlider('lerp-factor', 'lerpFactor', 'lerp-value');\n\n document.querySelectorAll('.view-option').forEach(el => {\n el.onclick = () => {\n document.querySelectorAll('.view-option').forEach(e => e.classList.remove('active'));\n el.classList.add('active');\n const mode = el.dataset.mode;\n CONFIG.renderMode = mode === 'cel' ? 'Cel-Shaded' : 'Standard';\n\n if (CONFIG.renderMode === 'Cel-Shaded') {\n faceMesh.material = celMat;\n outlineMesh.visible = true;\n } else {\n faceMesh.material = standardMat;\n outlineMesh.visible = false;\n }\n };\n });\n\n const devToggle = document.getElementById('toggle-dev-view');\n devToggle.classList.toggle('active', CONFIG.devView);\n \n devToggle.onclick = () => {\n CONFIG.devView = !CONFIG.devView;\n devToggle.classList.toggle('active', CONFIG.devView);\n \n activeCamera = CONFIG.devView ? isoCamera : arCamera;\n controls.enabled = CONFIG.devView;\n gridHelper.visible = CONFIG.devView;\n axesHelper.visible = CONFIG.devView;\n \n document.getElementById('stats-panel').classList.toggle('visible', CONFIG.devView);\n\n const video = container.querySelector('video');\n if (video) {\n video.style.opacity = CONFIG.devView \n ? \"0.05\" \n : (CONFIG.showDelayedVideo ? \"0\" : \"1\");\n }\n \n updateZoom();\n };\n\n // EYES STEP\n bindColor('eye-color', 'eyeColor', 'eye-color-preview', 'eye-color-hex');\n bindSlider('eye-size', 'eyeSize', 'eye-size-value');\n bindSlider('pupil-size', 'pupilSize', 'pupil-size-value');\n bindSlider('eyelash-opacity', 'eyelashOpacity', 'eyelash-value', v => v, v => v.toFixed(1));\n bindSlider('eyebrow-opacity', 'eyebrowOpacity', 'eyebrow-value', v => v, v => v.toFixed(1));\n\n document.querySelectorAll('[data-eye-style]').forEach(btn => {\n btn.onclick = () => {\n document.querySelectorAll('[data-eye-style]').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n CONFIG.eyeStyle = btn.dataset.eyeStyle;\n };\n });\n\n // MOUTH STEP\n bindSlider('lip-opacity', 'lipOpacity', 'lip-opacity-value');\n bindToggle('toggle-tongue', 'showTongue');\n bindColor('tongue-color', 'tongueColor', 'tongue-color-preview', 'tongue-color-hex');\n bindSlider('tongue-depth', 'tongueDepth', 'tongue-depth-value');\n\n // TEETH STEP\n bindSlider('teeth-scale', 'teethScale', 'teeth-scale-value');\n bindToggle('toggle-top-teeth', 'showTopTeeth');\n bindSlider('top-teeth-width', 'topTeethWidth', 'top-teeth-width-value');\n bindSlider('top-teeth-height', 'topTeethHeight', 'top-teeth-height-value');\n bindSlider('top-teeth-x', 'topTeethOffsetX', 'top-teeth-x-value');\n bindSlider('top-teeth-y', 'topTeethOffsetY', 'top-teeth-y-value');\n bindSlider('top-teeth-depth', 'topTeethDepth', 'top-teeth-depth-value');\n\n bindToggle('toggle-bottom-teeth', 'showBottomTeeth');\n bindSlider('bottom-teeth-width', 'bottomTeethWidth', 'bottom-teeth-width-value');\n bindSlider('bottom-teeth-height', 'bottomTeethHeight', 'bottom-teeth-height-value');\n bindSlider('bottom-teeth-x', 'bottomTeethOffsetX', 'bottom-teeth-x-value');\n bindSlider('bottom-teeth-y', 'bottomTeethOffsetY', 'bottom-teeth-y-value');\n bindSlider('bottom-teeth-depth', 'bottomTeethDepth', 'bottom-teeth-depth-value');\n\n // LIGHTING STEP\n bindSlider('ambient-intensity', 'ambientIntensity', 'ambient-value');\n document.getElementById('ambient-intensity').oninput = function() {\n CONFIG.ambientIntensity = parseFloat(this.value);\n document.getElementById('ambient-value').textContent = CONFIG.ambientIntensity.toFixed(2);\n ambientLight.intensity = CONFIG.ambientIntensity;\n };\n\n bindSlider('light-intensity', 'lightIntensity', 'light-intensity-value');\n document.getElementById('light-intensity').oninput = function() {\n CONFIG.lightIntensity = parseFloat(this.value);\n document.getElementById('light-intensity-value').textContent = CONFIG.lightIntensity.toFixed(2);\n dirLight.intensity = CONFIG.lightIntensity;\n };\n\n bindColor('light-color', 'lightColor', 'light-color-preview', 'light-color-hex', c => dirLight.color.set(c));\n\n bindSlider('light-x', 'lightX', 'light-x-value', v => v, v => v.toFixed(1));\n bindSlider('light-y', 'lightY', 'light-y-value', v => v, v => v.toFixed(1));\n bindSlider('light-z', 'lightZ', 'light-z-value', v => v, v => v.toFixed(1));\n\n ['light-x', 'light-y', 'light-z'].forEach(id => {\n document.getElementById(id).oninput = function() {\n if (id === 'light-x') { CONFIG.lightX = parseFloat(this.value); dirLight.position.x = CONFIG.lightX; document.getElementById('light-x-value').textContent = CONFIG.lightX.toFixed(1); }\n if (id === 'light-y') { CONFIG.lightY = parseFloat(this.value); dirLight.position.y = CONFIG.lightY; document.getElementById('light-y-value').textContent = CONFIG.lightY.toFixed(1); }\n if (id === 'light-z') { CONFIG.lightZ = parseFloat(this.value); dirLight.position.z = CONFIG.lightZ; document.getElementById('light-z-value').textContent = CONFIG.lightZ.toFixed(1); }\n };\n });\n\n // QUICK ACTIONS\n document.getElementById('save-config').onclick = saveConfig;\n document.getElementById('reset-config').onclick = resetConfig;\n document.getElementById('finish-wizard').onclick = () => {\n saveConfig();\n showToast('All done!');\n };\n\n document.getElementById('export-config').onclick = () => {\n const dataStr = JSON.stringify(CONFIG, null, 2);\n const blob = new Blob([dataStr], { type: 'application/json' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'facelab-config.json';\n a.click();\n showToast('Config exported');\n };\n\n // Toggle BG\n document.getElementById('toggle-bg').onclick = () => {\n CONFIG.videoHidden = !CONFIG.videoHidden;\n const video = container.querySelector('video');\n if (video) {\n video.classList.toggle('video-hidden', CONFIG.videoHidden);\n }\n delayedVideoCanvas.style.display = CONFIG.videoHidden\n ? \"none\"\n : (CONFIG.showDelayedVideo ? \"block\" : \"none\");\n showToast(CONFIG.videoHidden ? 'Background hidden' : 'Background visible');\n };\n\n const textureLoader = new THREE.TextureLoader();\n document.getElementById('file-input').addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (!file) return;\n const url = URL.createObjectURL(file);\n textureLoader.load(url, (tex) => {\n tex.colorSpace = THREE.SRGBColorSpace;\n standardMat.map = tex;\n standardMat.opacity = 1.0;\n standardMat.needsUpdate = true;\n faceMesh.material = standardMat;\n outlineMesh.visible = false;\n CONFIG.renderMode = 'Standard';\n showToast('Texture applied');\n });\n });\n\n await mindarThree.start();\n\n // Insert delayed video canvas after MindAR creates its elements\n const video = container.querySelector(\"video\");\n const threeCanvas = renderer.domElement;\n\n if (video) {\n // Insert delayed canvas right after video\n video.after(delayedVideoCanvas);\n\n // Make sure Three.js canvas is above delayed video\n threeCanvas.style.position = \"absolute\";\n threeCanvas.style.zIndex = \"2\";\n\n // Set initial visibility\n if (delayedVideoToggle && CONFIG.showDelayedVideo) {\n video.style.opacity = \"0\";\n delayedVideoCanvas.style.display = \"block\";\n } else {\n video.style.opacity = \"1\";\n delayedVideoCanvas.style.display = \"none\";\n }\n }\n\n updateWizardUI();\n\n if (localStorage.getItem(STORAGE_KEY)) {\n showToast('Config loaded');\n }\n\n // RENDER LOOP\n renderer.setAnimationLoop(() => {\n const face = mindarThree.faceMeshes[0];\n globalFrameNumber++;\n\n // Capture video frame\n const video = container.querySelector(\"video\");\n if (video && video.readyState >= 2) {\n frameBuffer.captureFrame(video, globalFrameNumber);\n }\n\n // Draw delayed video frame\n if (CONFIG.showDelayedVideo && !CONFIG.videoHidden && video) {\n const delayedFrame = frameBuffer.getDelayedFrame(CONFIG.frameDelay);\n if (delayedFrame && delayedFrame.canvas) {\n delayedCtx.clearRect(0, 0, delayedVideoCanvas.width, delayedVideoCanvas.height);\n delayedCtx.drawImage(delayedFrame.canvas, 0, 0, delayedVideoCanvas.width, delayedVideoCanvas.height);\n }\n }\n\n if (CONFIG.devView && face && face.visible) {\n const target = new THREE.Vector3();\n faceMesh.getWorldPosition(target);\n controls.target.copy(target);\n controls.update();\n }\n\n if (face && face.visible) {\n outlineMesh.position.copy(faceMesh.position);\n outlineMesh.quaternion.copy(faceMesh.quaternion);\n outlineMesh.scale.copy(faceMesh.scale).multiplyScalar(1.02);\n outlineMesh.visible = CONFIG.renderMode === 'Cel-Shaded';\n \n const euler = new THREE.Euler().setFromQuaternion(faceMesh.quaternion);\n updateParallax(euler.y * 2, euler.x * 2);\n }\n\n renderer.render(scene, activeCamera);\n\n const w = canvas.width;\n const h = canvas.height;\n ctx.clearRect(0, 0, w, h);\n\n const s = w / 1080;\n\n if (face && face.visible) {\n const positions = face.geometry.attributes.position.array;\n const matrix = face.matrixWorld;\n\n const points = {};\n for (let i of ACTIVE_INDICES) {\n points[i] = projectPoint(i, positions, matrix, activeCamera, w, h);\n }\n\n if (CONFIG.eyeStyle === 'Cartoon' || CONFIG.eyeStyle === 'Anime') {\n drawCartoonEye(ctx, points, LANDMARKS.LEFT_EYE_LOOP, LANDMARKS.LEFT_EYE_OUTER, LANDMARKS.LEFT_EYE_INNER, s);\n drawCartoonEye(ctx, points, LANDMARKS.RIGHT_EYE_LOOP, LANDMARKS.RIGHT_EYE_OUTER, LANDMARKS.RIGHT_EYE_INNER, s);\n } else {\n ['LEFT', 'RIGHT'].forEach(side => {\n const eye = LANDMARKS[\\`\\${side}_EYE\\`].map(i => points[i]).filter(p => p);\n if (eye.length > 2) {\n drawPath(ctx, eye, true, { fill: 'rgba(255,255,255,0.15)', blend: 'overlay' });\n }\n });\n }\n\n ['LEFT', 'RIGHT'].forEach(side => {\n const lid = LANDMARKS[\\`\\${side}_LID\\`].map(i => points[i]).filter(p => p);\n if (lid.length > 1) {\n drawPath(ctx, lid, false, {\n stroke: \\`rgba(20, 10, 10, \\${CONFIG.eyelashOpacity})\\`,\n lineWidth: 5 * s,\n blur: 1\n });\n }\n });\n\n ['LEFT', 'RIGHT'].forEach(side => {\n const brow = LANDMARKS[\\`\\${side}_BROW\\`].map(i => points[i]).filter(p => p);\n if (brow.length > 1) {\n drawPath(ctx, brow, false, {\n stroke: \\`rgba(30, 20, 20, \\${CONFIG.eyebrowOpacity})\\`,\n lineWidth: 12 * s,\n blur: 6,\n blend: 'multiply'\n });\n }\n });\n\n teethRenderer.render(ctx, points, w, h);\n\n const lipsOuter = LANDMARKS.LIPS_OUTER.map(i => points[i]).filter(p => p);\n if (lipsOuter.length > 2) {\n drawPath(ctx, lipsOuter, true, {\n fill: \\`rgba(200, 50, 80, \\${CONFIG.lipOpacity})\\`,\n blend: 'multiply',\n blur: 2\n });\n drawPath(ctx, lipsOuter, true, {\n stroke: 'rgba(150, 30, 50, 0.4)',\n lineWidth: 2 * s\n });\n }\n\n document.getElementById('tracking-status').textContent = 'Tracking';\n } else {\n document.getElementById('tracking-status').textContent = 'Searching...';\n }\n\n frames++;\n const now = performance.now();\n if (now - lastTime >= 1000) {\n fpsValue = frames;\n const frameTimeMs = (1000 / fpsValue).toFixed(1);\n const delayMs = (CONFIG.frameDelay * (1000 / fpsValue)).toFixed(1);\n const delayedFrame = frameBuffer.getDelayedFrame(CONFIG.frameDelay);\n\n document.getElementById('fps-pill').textContent = \\`\\${fpsValue} FPS\\`;\n document.getElementById(\"delay-pill\").textContent = \\`Delay: \\${CONFIG.frameDelay}f (\\${delayMs}ms)\\`;\n\n document.getElementById('stats-panel').innerHTML = \\`\n FPS: \\${fpsValue} | Frame: \\${frameTimeMs}ms
\n SVG Teeth: \\${teethRenderer.loaded ? \"OK\" : \"...\"}
\n Step: \\${currentStep + 1}/\\${totalSteps}
\n Mode: \\${CONFIG.devView ? \"DEV\" : \"LIVE\"}
\n ── Frame Sync ──
\n Current Frame: \\${globalFrameNumber}
\n Displayed Frame: \\${delayedFrame ? delayedFrame.frameNumber : \"N/A\"}
\n Buffer: \\${delayedFrame ? delayedFrame.bufferedFrames : 0}/15
\n Delay: \\${CONFIG.frameDelay}f = \\${delayMs}ms\n \\`;\n frames = 0;\n lastTime = now;\n }\n });\n}\n\ninit();\n`;",[194],"db98a0e6-e9eb-11f0-9212-42dde27851f2","rendering.ts","019b8c55-674d-714b-886f-8ac6e36d4c52",["D",1767585965871],"// @val.town/facelab-rendering\n\nimport * as THREE from \"https://unpkg.com/three@0.160.0/build/three.module.js\";\n\nimport type { DrawStyle, FaceLabConfig, Point2D, PointCache } from \"./types.ts\";\n\nconst pointCache: PointCache = {};\nconst tempVec = new THREE.Vector3();\n\nexport function projectPoint(\n index: number,\n positions: Float32Array,\n matrixWorld: THREE.Matrix4,\n camera: THREE.Camera,\n width: number,\n height: number,\n lerpFactor: number,\n): Point2D {\n tempVec.set(\n positions[index * 3],\n positions[index * 3 + 1],\n positions[index * 3 + 2],\n );\n tempVec.applyMatrix4(matrixWorld);\n tempVec.project(camera);\n\n const targetX = (tempVec.x + 1) / 2 * width;\n const targetY = (-tempVec.y + 1) / 2 * height;\n\n if (!pointCache[index]) {\n pointCache[index] = { x: targetX, y: targetY };\n } else {\n const p = pointCache[index];\n p.x += (targetX - p.x) * lerpFactor;\n p.y += (targetY - p.y) * lerpFactor;\n }\n\n return pointCache[index];\n}\n\nexport function drawPath(\n ctx: CanvasRenderingContext2D,\n points: Point2D[],\n isClosed: boolean,\n style: DrawStyle = {},\n): void {\n if (!points || points.length < 2) return;\n\n ctx.save();\n\n if (style.blend) {\n ctx.globalCompositeOperation = style.blend;\n }\n if (style.blur) {\n ctx.filter = `blur(${style.blur}px)`;\n }\n\n ctx.beginPath();\n ctx.moveTo(points[0].x, points[0].y);\n\n for (let i = 1; i < points.length; i++) {\n ctx.lineTo(points[i].x, points[i].y);\n }\n\n if (isClosed) {\n ctx.closePath();\n }\n\n if (style.fill) {\n ctx.fillStyle = style.fill;\n ctx.fill();\n }\n\n if (style.stroke) {\n ctx.strokeStyle = style.stroke;\n ctx.lineWidth = style.lineWidth || 1;\n ctx.lineCap = \"round\";\n ctx.lineJoin = \"round\";\n ctx.stroke();\n }\n\n ctx.restore();\n}\n\nexport function calculateEyeCenter(\n points: { [key: number]: Point2D },\n loopIndices: number[],\n): Point2D | null {\n let sumX = 0;\n let sumY = 0;\n let count = 0;\n\n for (const idx of loopIndices) {\n if (points[idx]) {\n sumX += points[idx].x;\n sumY += points[idx].y;\n count++;\n }\n }\n\n return count === 0 ? null : { x: sumX / count, y: sumY / count };\n}\n\nexport function drawCartoonEye(\n ctx: CanvasRenderingContext2D,\n points: { [key: number]: Point2D },\n loopIndices: number[],\n outerIdx: number,\n innerIdx: number,\n scale: number,\n config: FaceLabConfig,\n): void {\n const eyePoints = loopIndices.map((i) => points[i]).filter((p) => p);\n if (eyePoints.length < 3) return;\n\n const irisCenter = calculateEyeCenter(points, loopIndices);\n if (!irisCenter) return;\n\n const outerCorner = points[outerIdx];\n const innerCorner = points[innerIdx];\n if (!outerCorner || !innerCorner) return;\n\n const eyeWidth = Math.hypot(\n outerCorner.x - innerCorner.x,\n outerCorner.y - innerCorner.y,\n );\n if (eyeWidth < 1 || !isFinite(eyeWidth)) return;\n\n const irisRadius = (eyeWidth * 0.35) * config.eyeSize;\n if (irisRadius < 1 || !isFinite(irisRadius)) return;\n\n ctx.save();\n\n // Clip to eye shape\n ctx.beginPath();\n ctx.moveTo(eyePoints[0].x, eyePoints[0].y);\n for (let i = 1; i < eyePoints.length; i++) {\n ctx.lineTo(eyePoints[i].x, eyePoints[i].y);\n }\n ctx.closePath();\n ctx.clip();\n\n // White of eye\n ctx.fillStyle = \"#ffffff\";\n ctx.fill();\n ctx.lineWidth = 3 * scale;\n ctx.strokeStyle = \"rgba(0,0,0,0.1)\";\n ctx.stroke();\n\n // Iris gradient\n const grd = ctx.createRadialGradient(\n irisCenter.x,\n irisCenter.y,\n irisRadius * 0.1,\n irisCenter.x,\n irisCenter.y,\n irisRadius,\n );\n grd.addColorStop(0, \"#ffffff\");\n grd.addColorStop(0.2, config.eyeColor);\n grd.addColorStop(0.8, config.eyeColor);\n grd.addColorStop(1, \"#0a0a0a\");\n\n ctx.fillStyle = grd;\n ctx.beginPath();\n ctx.arc(irisCenter.x, irisCenter.y, irisRadius, 0, Math.PI * 2);\n ctx.fill();\n\n // Pupil\n ctx.fillStyle = \"#000000\";\n ctx.beginPath();\n ctx.arc(\n irisCenter.x,\n irisCenter.y,\n irisRadius * config.pupilSize,\n 0,\n Math.PI * 2,\n );\n ctx.fill();\n\n // Highlight\n ctx.fillStyle = \"rgba(255,255,255,0.9)\";\n ctx.beginPath();\n ctx.arc(\n irisCenter.x + irisRadius * 0.3,\n irisCenter.y - irisRadius * 0.3,\n irisRadius * 0.18,\n 0,\n Math.PI * 2,\n );\n ctx.fill();\n\n ctx.restore();\n\n // Eye outline\n ctx.save();\n ctx.beginPath();\n ctx.moveTo(eyePoints[0].x, eyePoints[0].y);\n for (let i = 1; i < eyePoints.length; i++) {\n ctx.lineTo(eyePoints[i].x, eyePoints[i].y);\n }\n ctx.closePath();\n ctx.strokeStyle = \"#000000\";\n ctx.lineWidth = 2 * scale;\n ctx.lineJoin = \"round\";\n ctx.stroke();\n ctx.restore();\n}",[200],"db9898c6-e9eb-11f0-9212-42dde27851f2","parallax.ts","019b8c55-674d-714b-886f-8759359c5bd7",["D",1767585965871],"// @val.town/facelab-parallax\nlet currentFaceTiltX = 0;\nlet currentFaceTiltY = 0;\n\nexport function updateParallax(tiltX: number, tiltY: number): void {\n const parallaxBg = document.getElementById(\"parallax-bg\");\n if (!parallaxBg) return;\n\n // Smooth lerp\n currentFaceTiltX += (tiltX - currentFaceTiltX) * 0.1;\n currentFaceTiltY += (tiltY - currentFaceTiltY) * 0.1;\n\n // Invert direction for camera pan effect\n const translateX = -currentFaceTiltX * 30;\n const translateY = -currentFaceTiltY * 15;\n\n parallaxBg.style.transform = `translate(${translateX}px, ${translateY}px)`;\n}\n\nexport function resetParallax(): void {\n currentFaceTiltX = 0;\n currentFaceTiltY = 0;\n\n const parallaxBg = document.getElementById(\"parallax-bg\");\n if (parallaxBg) {\n parallaxBg.style.transform = \"translate(0px, 0px)\";\n }\n}",[206],"655f4b2c-e9ec-11f0-bd6f-42dde27851f2",["D",1767586197069],2,[28],"db972c02-e9eb-11f0-9212-42dde27851f2","index.ts","019b8c55-674d-714b-886f-7de2af76ee5e",["D",1767585965871],"// @val.town/facelab\n// Main entry point - exports all modules\n\nexport * from \"./types.ts\";\nexport * from \"./constants.ts\";\nexport * from \"./config.ts\";\nexport * from \"./rendering.ts\";\nexport * from \"./teeth-renderer.ts\";\nexport * from \"./shaders.ts\";\nexport * from \"./wizard.ts\";\nexport * from \"./ui-bindings.ts\";\nexport * from \"./parallax.ts\";\nexport { initFaceLab } from \"./main.ts\";\nexport { FACELAB_STYLES, injectStyles } from \"./styles.ts\";\nexport { FACELAB_HTML, renderApp } from \"./html-template.ts\";\n\n// Convenience function to bootstrap the entire app\nexport async function bootstrap(container: HTMLElement): Promise {\n const { injectStyles } = await import(\"./styles.ts\");\n const { renderApp } = await import(\"./html-template.ts\");\n const { initFaceLab } = await import(\"./main.ts\");\n\n injectStyles();\n renderApp(container);\n await initFaceLab();\n}",[216],"1359c582-e9ec-11f0-b3ef-42dde27851f2","html-template.ts","019b8c55-674d-714b-886f-79bd5814ddb9",3,["D",1767586059459],"export const TEXTURE_MAPPER_HTML = `\n

\n \n

Texture Mapper

\n FaceMesh UV\n

\n \n Initializing...\n

-- FPS

Yaw: 0° Pitch: 0°

\n\n

\n \n

Coverage

\n\n

UV Texture Preview

\n\n

\n \n\n

\n \n How to Use\n

Position your face in the camera view
Slowly turn your head left and right
Tilt your head up and down
The grid shows captured angles
Export when coverage reaches 80%+

\n\n

Angle Coverage

\n \n

\n\n

Capture Settings

\n \n

\n Auto Capture\n

\n\n

\n Show UV Overlay\n

\n\n

\n Overlay Opacity\n 0.50\n

\n \n

\n\n

\n Min Angle Change (°)\n 5\n

\n \n

\n\n

Output Settings

\n \n

\n Texture Size\n 2048px\n

\n \n

\n\n

\n Blend Quality\n 0.95\n

\n \n

\n\n

Developer

\n Show Debug Info\n

\n\n

\n \n \n \n

\n\n

\n`;",[222],"db967ca8-e9eb-11f0-9212-42dde27851f2","constants.ts","019b8c55-674d-714b-886f-74d1ce9f75a7",["D",1767585965871],"// @val.town/facelab-constants\nimport type { FaceLabConfig, LandmarkIndices } from \"./types.ts\";\n\nexport const STORAGE_KEY = \"facelab-2027-config\";\n\nexport const DEFAULT_CONFIG: FaceLabConfig = {\n performance: \"High\",\n devView: false,\n videoHidden: false,\n lerpFactor: 0.7,\n renderMode: \"Cel-Shaded\",\n skinColor: \"#fff5e6\",\n outlineColor: \"#000000\",\n outlineWidth: 0.006,\n eyeStyle: \"Cartoon\",\n eyeColor: \"#3498db\",\n pupilSize: 0.45,\n eyeSize: 0.855,\n showTopTeeth: true,\n topTeethWidth: 1.0005,\n topTeethHeight: 0.7185,\n topTeethOffsetX: -0.07,\n topTeethOffsetY: 0.1,\n topTeethDepth: 1.0,\n showBottomTeeth: true,\n bottomTeethWidth: 1.0005,\n bottomTeethHeight: 0.5,\n bottomTeethOffsetX: 0.014,\n bottomTeethOffsetY: 0.1,\n bottomTeethDepth: 0.221,\n teethScale: 0.744,\n teethAnchorBlend: 0.79,\n showTongue: true,\n tongueColor: \"#d13d69\",\n tongueDepth: 0.187,\n lipOpacity: 0.095,\n eyelashOpacity: 1.0,\n eyebrowOpacity: 0,\n ambientIntensity: 1.982,\n lightIntensity: 2.445,\n lightColor: \"#ffffff\",\n lightX: 5,\n lightY: 2,\n lightZ: 5,\n isoZoom: 2.5,\n frameDelay: 1,\n showDelayedVideo: true,\n};\n\nexport const LANDMARKS: LandmarkIndices = {\n LIPS_OUTER: [\n 61,\n 146,\n 91,\n 181,\n 84,\n 17,\n 314,\n 405,\n 321,\n 375,\n 291,\n 409,\n 270,\n 269,\n 267,\n 0,\n 37,\n 39,\n 40,\n 185,\n 61,\n ],\n LIPS_INNER: [\n 78,\n 95,\n 88,\n 178,\n 87,\n 14,\n 317,\n 402,\n 318,\n 324,\n 308,\n 415,\n 310,\n 311,\n 312,\n 13,\n 82,\n 81,\n 80,\n 191,\n 78,\n ],\n LEFT_EYE: [\n 33,\n 7,\n 163,\n 144,\n 145,\n 153,\n 154,\n 155,\n 133,\n 173,\n 157,\n 158,\n 159,\n 160,\n 161,\n 246,\n 33,\n ],\n LEFT_EYE_LOOP: [\n 33,\n 246,\n 161,\n 160,\n 159,\n 158,\n 157,\n 173,\n 133,\n 155,\n 154,\n 153,\n 145,\n 144,\n 163,\n 7,\n 33,\n ],\n LEFT_LID: [33, 246, 161, 160, 159, 158, 157, 173],\n LEFT_BROW: [70, 63, 105, 66, 107, 55, 65, 52, 53, 46],\n LEFT_EYE_OUTER: 33,\n LEFT_EYE_INNER: 133,\n RIGHT_EYE: [\n 362,\n 382,\n 381,\n 380,\n 374,\n 373,\n 390,\n 249,\n 263,\n 466,\n 388,\n 387,\n 386,\n 385,\n 384,\n 398,\n 362,\n ],\n RIGHT_EYE_LOOP: [\n 362,\n 398,\n 384,\n 385,\n 386,\n 387,\n 388,\n 466,\n 263,\n 249,\n 390,\n 373,\n 374,\n 380,\n 381,\n 382,\n 362,\n ],\n RIGHT_LID: [263, 466, 388, 387, 386, 385, 384, 398],\n RIGHT_BROW: [300, 293, 334, 296, 336, 285, 295, 282, 283, 276],\n RIGHT_EYE_OUTER: 263,\n RIGHT_EYE_INNER: 362,\n NOSE_TIP: 1,\n CHIN: 152,\n L_CHEEK: 234,\n R_CHEEK: 454,\n FACE_TOP: 10,\n MOUTH_LEFT: 61,\n MOUTH_RIGHT: 291,\n MOUTH_TOP: 13,\n MOUTH_BOTTOM: 14,\n};\n\nexport const TEETH_SVG =\n ``;\n\nexport function getActiveIndices(): Set {\n const indices = new Set();\n Object.values(LANDMARKS).forEach((v) => {\n if (Array.isArray(v)) {\n v.forEach((i) => indices.add(i));\n } else if (typeof v === \"number\") {\n indices.add(v);\n }\n });\n return indices;\n}",[229],"db965188-e9eb-11f0-9212-42dde27851f2","config.ts","019b8c55-674d-714b-886f-701eda85dda8",["D",1767585965871],"// @val.town/facelab-config\nimport type { FaceLabConfig } from \"./types.ts\";\nimport { DEFAULT_CONFIG, STORAGE_KEY } from \"./constants.ts\";\n\nexport function loadConfig(): FaceLabConfig {\n try {\n const saved = localStorage.getItem(STORAGE_KEY);\n if (saved) {\n return { ...DEFAULT_CONFIG, ...JSON.parse(saved) };\n }\n } catch (e) {\n console.warn(\"Load config failed:\", e);\n }\n return { ...DEFAULT_CONFIG };\n}\n\nexport function saveConfig(config: FaceLabConfig): boolean {\n try {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(config));\n return true;\n } catch (e) {\n console.error(\"Failed to save config:\", e);\n return false;\n }\n}\n\nexport function resetConfig(): void {\n localStorage.removeItem(STORAGE_KEY);\n}\n\nexport function exportConfig(config: FaceLabConfig): void {\n const dataStr = JSON.stringify(config, null, 2);\n const blob = new Blob([dataStr], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = \"facelab-config.json\";\n a.click();\n URL.revokeObjectURL(url);\n}",[235],"pulls","branches","forks","envVars",{"_247":60,"_249":60},"connections",{"_247":60,"_248":60},"count","unfilledCount","emptyCount",{"_43":234,"_32":235,"_30":236,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":304,"_13":60,"_33":158,"_35":238,"_24":25,"_160":-5,"_265":305,"_27":306},{"_43":228,"_32":229,"_30":230,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":301,"_13":60,"_33":158,"_35":232,"_24":25,"_160":-5,"_265":302,"_27":303},{"_43":221,"_32":222,"_30":223,"_154":-5,"_41":42,"_40":224,"_156":25,"_38":298,"_13":155,"_33":158,"_35":226,"_24":25,"_160":-5,"_265":299,"_27":300},{"_43":215,"_32":216,"_30":217,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":295,"_13":60,"_33":158,"_35":219,"_24":25,"_160":-5,"_265":296,"_27":297},{"_43":211,"_32":28,"_30":31,"_154":-5,"_41":42,"_40":14,"_156":25,"_38":292,"_13":213,"_33":34,"_35":37,"_24":25,"_160":-5,"_265":293,"_27":294},{"_43":205,"_32":206,"_30":207,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":289,"_13":60,"_33":158,"_35":209,"_24":25,"_160":-5,"_265":290,"_27":291},{"_43":199,"_32":200,"_30":201,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":286,"_13":60,"_33":158,"_35":203,"_24":25,"_160":-5,"_265":287,"_27":288},{"_43":193,"_32":194,"_30":195,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":283,"_13":60,"_33":158,"_35":197,"_24":25,"_160":-5,"_265":284,"_27":285},{"_43":187,"_32":188,"_30":189,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":280,"_13":60,"_33":158,"_35":191,"_24":25,"_160":-5,"_265":281,"_27":282},{"_43":180,"_32":181,"_30":182,"_154":-5,"_41":42,"_40":183,"_156":25,"_38":277,"_13":155,"_33":158,"_35":185,"_24":25,"_160":-5,"_265":278,"_27":279},{"_43":174,"_32":175,"_30":176,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":274,"_13":60,"_33":158,"_35":178,"_24":25,"_160":-5,"_265":275,"_27":276},{"_43":168,"_32":169,"_30":170,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":271,"_13":60,"_33":158,"_35":172,"_24":25,"_160":-5,"_265":272,"_27":273},{"_43":162,"_32":163,"_30":164,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":268,"_13":60,"_33":158,"_35":166,"_24":25,"_160":-5,"_265":269,"_27":270},{"_43":151,"_32":152,"_30":153,"_154":-5,"_41":42,"_40":155,"_156":125,"_38":264,"_13":60,"_33":158,"_35":159,"_24":25,"_160":-5,"_265":266,"_27":267},["D",1767585965871],"children",[],[152],["D",1767585965871],[],[163],["D",1767585965871],[],[169],["D",1767585965871],[],[175],["D",1767586094234],[],[181],["D",1767585965871],[],[188],["D",1767585965871],[],[194],["D",1767585965871],[],[200],["D",1767585965871],[],[206],["D",1767586197069],[],[28],["D",1767585965871],[],[216],["D",1767586059459],[],[222],["D",1767585965871],[],[229],["D",1767585965871],[],[235],["D",1767585965871],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":54,"_102":103,"_104":25},{"_13":83,"_32":84,"_43":42,"_85":44,"_86":87,"_88":89,"_90":91,"_92":93,"_94":62,"_95":45,"_96":97},"ctx",{"_76":-5,"_127":344,"_345":346,"_347":348,"_349":25,"_350":25,"_351":25,"_352":125,"_353":-5,"_354":-7,"_355":-7,"_356":60,"_357":25,"_358":25,"_359":-5,"_360":25,"_361":25,"_362":25,"_363":-5},"ENV",{"_315":316,"_317":318,"_319":84,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v5