Face Lab 2027 - AI Avatar Studio

\n Video Effects\n \n

Select an effect

\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// ============================================================================\n// CLIENT SCRIPT (TypeScript compiled to JS for browser execution)\n// ============================================================================\n\nconst FACELAB_CLIENT_SCRIPT = `\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three/addons/controls/OrbitControls.js';\nimport { MindARThree } from 'mindar-face-three';\n\nconst STORAGE_KEY = 'facelab-2027-config';\n\n// Video Effect Styles\nconst VIDEO_EFFECT_STYLES = ${JSON.stringify(VIDEO_EFFECT_STYLES)};\n\nconst TEETH_SVG = \\`\\`;\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 // Video effect settings\n videoEffectStyle: \"none\",\n videoEffectParams: {},\n showVideoEffect: false,\n};\n\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\nfunction getActiveIndices() {\n const indices = new Set();\n Object.values(LANDMARKS).forEach(v => \n Array.isArray(v) ? v.forEach(i => indices.add(i)) : indices.add(v)\n );\n return indices;\n}\n\nconst ACTIVE_INDICES = getActiveIndices();\n\nfunction loadConfig() {\n try {\n const saved = localStorage.getItem(STORAGE_KEY);\n if (saved) return { ...DEFAULT_CONFIG, ...JSON.parse(saved) };\n } catch (e) { \n console.warn('Load config failed:', e); \n }\n return { ...DEFAULT_CONFIG };\n}\n\nfunction saveConfig(config) {\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 exportConfig(config) {\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}\n\nfunction showToast(message) {\n const toast = document.getElementById('toast');\n if (!toast) return;\n toast.textContent = message;\n toast.classList.add('show');\n setTimeout(() => toast.classList.remove('show'), 2500);\n}\n\nfunction bindSlider(id, config, 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\nfunction bindColor(id, config, 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 if (preview) preview.style.background = config[configKey];\n if (hex) hex.textContent = config[configKey];\n\n if (preview) preview.onclick = () => input.click();\n\n input.oninput = () => {\n config[configKey] = input.value;\n if (preview) preview.style.background = input.value;\n if (hex) hex.textContent = input.value;\n if (onChange) onChange(input.value);\n };\n}\n\nfunction bindToggle(id, config, 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\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 const canvas = document.createElement(\"canvas\");\n canvas.width = video.videoWidth || 640;\n canvas.height = video.videoHeight || 480;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\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 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\nlet currentFaceTiltX = 0;\nlet currentFaceTiltY = 0;\n\nfunction updateParallax(tiltX, tiltY) {\n const parallaxBg = document.getElementById('parallax-bg');\n if (!parallaxBg) return;\n \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\nfunction createWizardState() {\n return {\n currentStep: 0,\n totalSteps: 5,\n stepZoomModes: ['face', 'eyes', 'mouth', 'mouth', 'face']\n };\n}\n\nfunction updateWizardUI(state, devView) {\n document.querySelectorAll('.progress-step').forEach((el, i) => {\n el.classList.remove('active', 'completed');\n if (i < state.currentStep) el.classList.add('completed');\n else if (i === state.currentStep) el.classList.add('active');\n });\n\n document.querySelectorAll('.step-label').forEach((el, i) => {\n el.classList.remove('active', 'completed');\n if (i < state.currentStep) el.classList.add('completed');\n else if (i === state.currentStep) el.classList.add('active');\n });\n\n document.querySelectorAll('.step-panel').forEach((el, i) => {\n el.classList.toggle('active', i === state.currentStep);\n });\n\n const prevBtn = document.getElementById('prev-step');\n if (prevBtn) prevBtn.style.visibility = state.currentStep === 0 ? 'hidden' : 'visible';\n \n const nextBtn = document.getElementById('next-step');\n if (nextBtn) {\n if (state.currentStep === state.totalSteps - 1) {\n nextBtn.innerHTML = \\`Finish \\`;\n } else {\n nextBtn.innerHTML = \\`Next \\`;\n }\n }\n\n updateZoom(state, devView);\n}\n\nfunction updateZoom(state, devView) {\n const container = document.getElementById('container');\n const indicator = document.getElementById('zoom-indicator');\n const label = document.getElementById('zoom-label');\n if (!container) return;\n\n if (devView) {\n container.classList.remove('zoomed-eyes', 'zoomed-mouth', 'zoomed-face');\n container.classList.add('dev-mode');\n if (indicator) indicator.classList.remove('visible');\n return;\n }\n\n container.classList.remove('zoomed-eyes', 'zoomed-mouth', 'zoomed-face', 'dev-mode');\n\n const zoomMode = state.stepZoomModes[state.currentStep];\n if (zoomMode === 'eyes') {\n container.classList.add('zoomed-eyes');\n if (indicator) indicator.classList.add('visible');\n if (label) label.textContent = 'Zoomed: Eyes';\n } else if (zoomMode === 'mouth') {\n container.classList.add('zoomed-mouth');\n if (indicator) indicator.classList.add('visible');\n if (label) label.textContent = 'Zoomed: Mouth';\n } else {\n if (indicator) indicator.classList.remove('visible');\n }\n}\n\nfunction goToStep(state, step, devView) {\n state.currentStep = Math.max(0, Math.min(state.totalSteps - 1, step));\n updateWizardUI(state, devView);\n}\n\nconst pointCache = {};\nconst tempVec = new THREE.Vector3();\n\nfunction projectPoint(index, positions, matrixWorld, camera, w, h, lerpFactor) {\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) * lerpFactor;\n p.y += (targetY - p.y) * 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\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, config) {\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\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, config) {\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, config);\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, config) {\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\nfunction createCelMaterial(skinColor) {\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: { uColor: { value: new THREE.Color(skinColor) } }\n });\n}\n\nfunction createOutlineMaterial(outlineColor, outlineWidth) {\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\nfunction createStandardMaterial() {\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}\n\n// ============================================================================\n// VIDEO EFFECT SYSTEM - Head Position Based Transform\n// ============================================================================\n\nclass VideoEffectSystem {\n constructor(video, container) {\n this.video = video;\n this.container = container;\n this.currentStyle = 'none';\n this.params = {};\n this.mesh = null;\n this.material = null;\n this.scene = null;\n this.camera = null;\n this.renderer = null;\n this.clock = new THREE.Clock();\n this.anchor = null;\n this.enabled = false;\n this.faceMesh = null;\n \n this.init();\n }\n\n init() {\n // Create a separate renderer for video effects\n this.effectCanvas = document.createElement('canvas');\n this.effectCanvas.id = 'video-effect-canvas';\n this.effectCanvas.style.cssText = \\`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n pointer-events: none;\n transform: scaleX(-1);\n \\`;\n \n this.scene = new THREE.Scene();\n this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);\n this.camera.position.z = 1;\n \n this.renderer = new THREE.WebGLRenderer({ \n canvas: this.effectCanvas,\n alpha: true,\n antialias: false \n });\n this.renderer.setSize(640, 480);\n }\n\n attachToContainer() {\n if (this.container && !this.effectCanvas.parentNode) {\n // Insert at the beginning of the container\n this.container.insertBefore(this.effectCanvas, this.container.firstChild);\n }\n }\n\n setVideo(video) {\n this.video = video;\n if (video) {\n this.videoTexture = new THREE.VideoTexture(video);\n this.videoTexture.minFilter = THREE.LinearFilter;\n this.videoTexture.magFilter = THREE.LinearFilter;\n this.createMesh();\n }\n }\n\n createMesh() {\n if (this.mesh) {\n this.scene.remove(this.mesh);\n }\n\n const style = VIDEO_EFFECT_STYLES.find(s => s.id === this.currentStyle) || VIDEO_EFFECT_STYLES[0];\n \n // Initialize params for this style if not exists\n if (!this.params[this.currentStyle]) {\n this.params[this.currentStyle] = {};\n style.parameters.forEach(p => {\n this.params[this.currentStyle][p.id] = p.default;\n });\n }\n\n const uniforms = {\n map: { value: this.videoTexture },\n time: { value: 0 },\n resolution: { value: new THREE.Vector2(640, 480) },\n headPosition: { value: new THREE.Vector2(0.5, 0.5) },\n headRotation: { value: new THREE.Vector3(0, 0, 0) }\n };\n\n // Add style-specific params\n style.parameters.forEach(p => {\n uniforms[p.id] = { value: this.params[this.currentStyle][p.id] ?? p.default };\n });\n\n this.material = new THREE.ShaderMaterial({\n uniforms,\n vertexShader: \\`\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n \\`,\n fragmentShader: style.fragmentShader,\n transparent: true\n });\n\n const geometry = new THREE.PlaneGeometry(2, 2);\n this.mesh = new THREE.Mesh(geometry, this.material);\n this.scene.add(this.mesh);\n }\n\n setStyle(styleId) {\n this.currentStyle = styleId;\n if (this.videoTexture) {\n this.createMesh();\n }\n }\n\n setParam(paramId, value) {\n if (!this.params[this.currentStyle]) {\n this.params[this.currentStyle] = {};\n }\n this.params[this.currentStyle][paramId] = value;\n \n if (this.material && this.material.uniforms[paramId]) {\n this.material.uniforms[paramId].value = value;\n }\n }\n\n getParam(paramId) {\n return this.params[this.currentStyle]?.[paramId] ?? 0;\n }\n\n updateHeadTransform(position, rotation) {\n if (this.material) {\n if (this.material.uniforms.headPosition) {\n this.material.uniforms.headPosition.value.set(position.x, position.y);\n }\n if (this.material.uniforms.headRotation) {\n this.material.uniforms.headRotation.value.set(rotation.x, rotation.y, rotation.z);\n }\n }\n }\n\n setEnabled(enabled) {\n this.enabled = enabled;\n this.effectCanvas.style.display = enabled ? 'block' : 'none';\n }\n\n render() {\n if (!this.enabled || !this.material || this.currentStyle === 'none') return;\n\n this.material.uniforms.time.value = this.clock.getElapsedTime();\n\n if (this.video && this.video.videoWidth) {\n this.material.uniforms.resolution.value.set(\n this.video.videoWidth,\n this.video.videoHeight\n );\n }\n\n this.renderer.render(this.scene, this.camera);\n }\n\n resize(width, height) {\n this.renderer.setSize(width, height);\n if (this.material) {\n this.material.uniforms.resolution.value.set(width, height);\n }\n }\n}\n\n// ============================================================================\n// VIDEO EFFECTS UI\n// ============================================================================\n\nfunction buildVideoEffectsUI(effectSystem, config) {\n const effectGrid = document.getElementById('effect-grid');\n const effectParams = document.getElementById('effect-params');\n \n if (!effectGrid) return;\n\n // Build effect buttons\n VIDEO_EFFECT_STYLES.forEach(style => {\n const btn = document.createElement('button');\n btn.className = 'effect-btn' + (config.videoEffectStyle === style.id ? ' active' : '');\n btn.dataset.id = style.id;\n btn.innerHTML = \\`\n \\${style.preview}\n \\${style.name}\n \\`;\n btn.onclick = () => selectVideoEffect(style.id, effectSystem, config);\n effectGrid.appendChild(btn);\n });\n\n // Initial params build\n buildEffectParams(config.videoEffectStyle, effectSystem, config);\n}\n\nfunction selectVideoEffect(styleId, effectSystem, config) {\n config.videoEffectStyle = styleId;\n effectSystem.setStyle(styleId);\n\n // Update active button\n document.querySelectorAll('.effect-btn').forEach(btn => {\n btn.classList.toggle('active', btn.dataset.id === styleId);\n });\n\n // Update params UI\n buildEffectParams(styleId, effectSystem, config);\n\n showToast(\\`Effect: \\${VIDEO_EFFECT_STYLES.find(s => s.id === styleId)?.name || 'None'}\\`);\n}\n\nfunction buildEffectParams(styleId, effectSystem, config) {\n const effectParams = document.getElementById('effect-params');\n if (!effectParams) return;\n\n const style = VIDEO_EFFECT_STYLES.find(s => s.id === styleId);\n \n if (!style || style.parameters.length === 0) {\n effectParams.innerHTML = '

No parameters for this effect

';\n return;\n }\n\n // Initialize params in config if needed\n if (!config.videoEffectParams[styleId]) {\n config.videoEffectParams[styleId] = {};\n style.parameters.forEach(p => {\n config.videoEffectParams[styleId][p.id] = p.default;\n });\n }\n\n effectParams.innerHTML = '';\n const params = config.videoEffectParams[styleId];\n\n style.parameters.forEach(param => {\n const div = document.createElement('div');\n div.className = 'effect-param';\n \n const formatValue = (v) => {\n if (param.step >= 1) return Math.round(v);\n return v.toFixed(param.step < 0.01 ? 3 : 2);\n };\n\n div.innerHTML = \\`\n

\n \\${param.name}\n \\${formatValue(params[param.id])}\n

\n \n \\`;\n effectParams.appendChild(div);\n\n const slider = div.querySelector('input');\n slider.oninput = () => {\n const v = parseFloat(slider.value);\n params[param.id] = v;\n document.getElementById('effect-v-' + param.id).textContent = formatValue(v);\n effectSystem.setParam(param.id, v);\n };\n });\n}\n\n// ============================================================================\n// MAIN INIT\n// ============================================================================\n\nasync function initFaceLab() {\n const CONFIG = loadConfig();\n const wizardState = createWizardState();\n const teethRenderer = new SVGTeethRenderer();\n\n const container = document.querySelector(\"#container\");\n if (!container) {\n console.error('Container not found');\n return;\n }\n \n const mindarThree = new MindARThree({ container });\n const { renderer, scene, camera: arCamera } = mindarThree;\n\n const frameBuffer = new VideoFrameBuffer(15);\n let globalFrameNumber = 0;\n\n // Initialize video effect system\n const videoEffectSystem = new VideoEffectSystem(null, container);\n videoEffectSystem.setStyle(CONFIG.videoEffectStyle);\n videoEffectSystem.setEnabled(CONFIG.showVideoEffect);\n\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,\n frustumSize * aspect,\n frustumSize,\n -frustumSize,\n 0.001,\n 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 = createCelMaterial(CONFIG.skinColor);\n const outlineMat = createOutlineMaterial(CONFIG.outlineColor, CONFIG.outlineWidth);\n const standardMat = createStandardMaterial();\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 if (!canvas) {\n console.error('Overlay canvas not found');\n return;\n }\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 videoEffectSystem.resize(w, h);\n };\n\n handleResize();\n\n // Video Effects Panel UI\n const toggleEffectsBtn = document.getElementById('toggle-effects-btn');\n const videoEffectsPanel = document.getElementById('video-effects-panel');\n const closeEffectsPanel = document.getElementById('close-effects-panel');\n\n if (toggleEffectsBtn && videoEffectsPanel) {\n toggleEffectsBtn.onclick = () => {\n const isVisible = videoEffectsPanel.classList.toggle('visible');\n toggleEffectsBtn.classList.toggle('active', isVisible);\n \n // Enable/disable effect system\n CONFIG.showVideoEffect = isVisible;\n videoEffectSystem.setEnabled(isVisible);\n \n // Hide original video when effect is active\n const video = container.querySelector('video');\n if (video) {\n video.style.opacity = isVisible ? '0' : (CONFIG.showDelayedVideo ? '0' : '1');\n }\n };\n\n if (closeEffectsPanel) {\n closeEffectsPanel.onclick = () => {\n videoEffectsPanel.classList.remove('visible');\n toggleEffectsBtn.classList.remove('active');\n CONFIG.showVideoEffect = false;\n videoEffectSystem.setEnabled(false);\n \n const video = container.querySelector('video');\n if (video) {\n video.style.opacity = CONFIG.showDelayedVideo ? '0' : '1';\n }\n };\n }\n }\n\n // Build video effects UI\n buildVideoEffectsUI(videoEffectSystem, CONFIG);\n\n const prevBtn = document.getElementById('prev-step');\n const nextBtn = document.getElementById('next-step');\n\n if (prevBtn) {\n prevBtn.onclick = () => goToStep(wizardState, wizardState.currentStep - 1, CONFIG.devView);\n }\n\n if (nextBtn) {\n nextBtn.onclick = () => {\n if (wizardState.currentStep === wizardState.totalSteps - 1) {\n saveConfig(CONFIG);\n showToast('Configuration complete!');\n } else {\n goToStep(wizardState, wizardState.currentStep + 1, CONFIG.devView);\n }\n };\n }\n\n document.querySelectorAll('.progress-step').forEach(el => {\n el.onclick = () => goToStep(wizardState, parseInt(el.dataset.step || '0'), CONFIG.devView);\n });\n\n document.querySelectorAll('.step-label').forEach(el => {\n el.onclick = () => goToStep(wizardState, parseInt(el.dataset.step || '0'), CONFIG.devView);\n });\n\n const frameDelaySlider = document.getElementById(\"frame-delay\");\n const frameDelayValue = document.getElementById(\"frame-delay-value\");\n if (frameDelaySlider) {\n frameDelaySlider.value = CONFIG.frameDelay;\n if (frameDelayValue) frameDelayValue.textContent = CONFIG.frameDelay;\n\n frameDelaySlider.oninput = () => {\n CONFIG.frameDelay = parseInt(frameDelaySlider.value);\n if (frameDelayValue) frameDelayValue.textContent = CONFIG.frameDelay;\n const delayPill = document.getElementById(\"delay-pill\");\n if (delayPill) delayPill.textContent = \\`Delay: \\${CONFIG.frameDelay}f\\`;\n };\n }\n\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 bindColor('skin-color', CONFIG, 'skinColor', 'skin-color-preview', 'skin-color-hex', c => celMat.uniforms.uColor.value.set(c));\n bindColor('outline-color', CONFIG, 'outlineColor', 'outline-color-preview', 'outline-color-hex', c => outlineMat.uniforms.uColor.value.set(c));\n \n const outlineWidthSlider = document.getElementById('outline-width');\n if (outlineWidthSlider) {\n outlineWidthSlider.value = CONFIG.outlineWidth;\n const outlineWidthValue = document.getElementById('outline-width-value');\n if (outlineWidthValue) outlineWidthValue.textContent = CONFIG.outlineWidth.toFixed(3);\n \n outlineWidthSlider.oninput = function() {\n CONFIG.outlineWidth = parseFloat(this.value);\n if (outlineWidthValue) outlineWidthValue.textContent = CONFIG.outlineWidth.toFixed(3);\n outlineMat.uniforms.uWidth.value = CONFIG.outlineWidth;\n };\n }\n\n bindSlider('lerp-factor', CONFIG, '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 if (devToggle) {\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 const statsPanel = document.getElementById('stats-panel');\n if (statsPanel) statsPanel.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 updateWizardUI(wizardState, CONFIG.devView);\n };\n }\n\n bindColor('eye-color', CONFIG, 'eyeColor', 'eye-color-preview', 'eye-color-hex');\n bindSlider('eye-size', CONFIG, 'eyeSize', 'eye-size-value');\n bindSlider('pupil-size', CONFIG, 'pupilSize', 'pupil-size-value');\n bindSlider('eyelash-opacity', CONFIG, 'eyelashOpacity', 'eyelash-value', v => v, v => v.toFixed(1));\n bindSlider('eyebrow-opacity', CONFIG, '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 bindSlider('lip-opacity', CONFIG, 'lipOpacity', 'lip-opacity-value');\n bindToggle('toggle-tongue', CONFIG, 'showTongue');\n bindColor('tongue-color', CONFIG, 'tongueColor', 'tongue-color-preview', 'tongue-color-hex');\n bindSlider('tongue-depth', CONFIG, 'tongueDepth', 'tongue-depth-value');\n\n bindSlider('teeth-scale', CONFIG, 'teethScale', 'teeth-scale-value');\n bindToggle('toggle-top-teeth', CONFIG, 'showTopTeeth');\n bindSlider('top-teeth-width', CONFIG, 'topTeethWidth', 'top-teeth-width-value');\n bindSlider('top-teeth-height', CONFIG, 'topTeethHeight', 'top-teeth-height-value');\n bindSlider('top-teeth-x', CONFIG, 'topTeethOffsetX', 'top-teeth-x-value');\n bindSlider('top-teeth-y', CONFIG, 'topTeethOffsetY', 'top-teeth-y-value');\n bindSlider('top-teeth-depth', CONFIG, 'topTeethDepth', 'top-teeth-depth-value');\n\n bindToggle('toggle-bottom-teeth', CONFIG, 'showBottomTeeth');\n bindSlider('bottom-teeth-width', CONFIG, 'bottomTeethWidth', 'bottom-teeth-width-value');\n bindSlider('bottom-teeth-height', CONFIG, 'bottomTeethHeight', 'bottom-teeth-height-value');\n bindSlider('bottom-teeth-x', CONFIG, 'bottomTeethOffsetX', 'bottom-teeth-x-value');\n bindSlider('bottom-teeth-y', CONFIG, 'bottomTeethOffsetY', 'bottom-teeth-y-value');\n bindSlider('bottom-teeth-depth', CONFIG, 'bottomTeethDepth', 'bottom-teeth-depth-value');\n\n const ambientSlider = document.getElementById('ambient-intensity');\n if (ambientSlider) {\n ambientSlider.value = CONFIG.ambientIntensity;\n const ambientValue = document.getElementById('ambient-value');\n if (ambientValue) ambientValue.textContent = CONFIG.ambientIntensity.toFixed(2);\n \n ambientSlider.oninput = function() {\n CONFIG.ambientIntensity = parseFloat(this.value);\n if (ambientValue) ambientValue.textContent = CONFIG.ambientIntensity.toFixed(2);\n ambientLight.intensity = CONFIG.ambientIntensity;\n };\n }\n\n const lightIntensitySlider = document.getElementById('light-intensity');\n if (lightIntensitySlider) {\n lightIntensitySlider.value = CONFIG.lightIntensity;\n const lightIntensityValue = document.getElementById('light-intensity-value');\n if (lightIntensityValue) lightIntensityValue.textContent = CONFIG.lightIntensity.toFixed(2);\n \n lightIntensitySlider.oninput = function() {\n CONFIG.lightIntensity = parseFloat(this.value);\n if (lightIntensityValue) lightIntensityValue.textContent = CONFIG.lightIntensity.toFixed(2);\n dirLight.intensity = CONFIG.lightIntensity;\n };\n }\n\n bindColor('light-color', CONFIG, 'lightColor', 'light-color-preview', 'light-color-hex', c => dirLight.color.set(c));\n\n const lightPosBindings = [\n { id: 'light-x', key: 'lightX', valueId: 'light-x-value', prop: 'x' },\n { id: 'light-y', key: 'lightY', valueId: 'light-y-value', prop: 'y' },\n { id: 'light-z', key: 'lightZ', valueId: 'light-z-value', prop: 'z' }\n ];\n\n lightPosBindings.forEach(({ id, key, valueId, prop }) => {\n const slider = document.getElementById(id);\n if (slider) {\n slider.value = CONFIG[key];\n const valueEl = document.getElementById(valueId);\n if (valueEl) valueEl.textContent = CONFIG[key].toFixed(1);\n\n slider.oninput = function() {\n CONFIG[key] = parseFloat(this.value);\n dirLight.position[prop] = CONFIG[key];\n if (valueEl) valueEl.textContent = CONFIG[key].toFixed(1);\n };\n }\n });\n\n const saveBtn = document.getElementById('save-config');\n if (saveBtn) saveBtn.onclick = () => saveConfig(CONFIG);\n\n const resetBtn = document.getElementById('reset-config');\n if (resetBtn) resetBtn.onclick = resetConfig;\n\n const finishBtn = document.getElementById('finish-wizard');\n if (finishBtn) {\n finishBtn.onclick = () => {\n saveConfig(CONFIG);\n showToast('All done!');\n };\n }\n\n const exportBtn = document.getElementById('export-config');\n if (exportBtn) {\n exportBtn.onclick = () => {\n exportConfig(CONFIG);\n showToast('Config exported');\n };\n }\n\n const toggleBgBtn = document.getElementById('toggle-bg');\n if (toggleBgBtn) {\n toggleBgBtn.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\n const textureLoader = new THREE.TextureLoader();\n const fileInput = document.getElementById('file-input');\n if (fileInput) {\n fileInput.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\n await mindarThree.start();\n\n const video = container.querySelector(\"video\");\n const threeCanvas = renderer.domElement;\n\n // Set up video effect system with actual video\n if (video) {\n videoEffectSystem.setVideo(video);\n videoEffectSystem.attachToContainer();\n\n video.after(delayedVideoCanvas);\n threeCanvas.style.position = \"absolute\";\n threeCanvas.style.zIndex = \"2\";\n\n if (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(wizardState, CONFIG.devView);\n\n if (localStorage.getItem(STORAGE_KEY)) {\n showToast('Config loaded');\n }\n\n renderer.setAnimationLoop(() => {\n const face = mindarThree.faceMeshes[0];\n const currentCamera = CONFIG.devView ? isoCamera : arCamera;\n globalFrameNumber++;\n\n const videoEl = container.querySelector(\"video\");\n if (videoEl && videoEl.readyState >= 2) {\n frameBuffer.captureFrame(videoEl, globalFrameNumber);\n }\n\n if (CONFIG.showDelayedVideo && !CONFIG.videoHidden && videoEl && delayedCtx) {\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 // Update video effect system with head position/rotation\n const headPos = new THREE.Vector3();\n faceMesh.getWorldPosition(headPos);\n headPos.project(currentCamera);\n \n videoEffectSystem.updateHeadTransform(\n { x: (headPos.x + 1) / 2, y: (-headPos.y + 1) / 2 },\n { x: euler.x, y: euler.y, z: euler.z }\n );\n }\n\n // Render video effects\n videoEffectSystem.render();\n\n renderer.render(scene, currentCamera);\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 (const i of ACTIVE_INDICES) {\n points[i] = projectPoint(i, positions, matrix, currentCamera, w, h, CONFIG.lerpFactor);\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, CONFIG);\n drawCartoonEye(ctx, points, LANDMARKS.RIGHT_EYE_LOOP, LANDMARKS.RIGHT_EYE_OUTER, LANDMARKS.RIGHT_EYE_INNER, s, CONFIG);\n } else {\n ['LEFT', 'RIGHT'].forEach(side => {\n const eyeIndices = LANDMARKS[\\`\\${side}_EYE\\`];\n const eye = eyeIndices.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 lidIndices = LANDMARKS[\\`\\${side}_LID\\`];\n const lid = lidIndices.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 browIndices = LANDMARKS[\\`\\${side}_BROW\\`];\n const brow = browIndices.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, CONFIG);\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 const trackingStatus = document.getElementById('tracking-status');\n if (trackingStatus) trackingStatus.textContent = 'Tracking';\n } else {\n const trackingStatus = document.getElementById('tracking-status');\n if (trackingStatus) trackingStatus.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 const fpsPill = document.getElementById('fps-pill');\n if (fpsPill) fpsPill.textContent = \\`\\${fpsValue} FPS\\`;\n\n const delayPill = document.getElementById(\"delay-pill\");\n if (delayPill) delayPill.textContent = \\`Delay: \\${CONFIG.frameDelay}f (\\${delayMs}ms)\\`;\n\n const statsPanel = document.getElementById('stats-panel');\n if (statsPanel) {\n statsPanel.innerHTML = \\`\n FPS: \\${fpsValue} | Frame: \\${frameTimeMs}ms
\n SVG Teeth: \\${teethRenderer.loaded ? \"OK\" : \"...\"}
\n Step: \\${wizardState.currentStep + 1}/\\${wizardState.totalSteps}
\n Mode: \\${CONFIG.devView ? \"DEV\" : \"LIVE\"}
\n Video Effect: \\${CONFIG.showVideoEffect ? CONFIG.videoEffectStyle : \"OFF\"}
\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 }\n\n frames = 0;\n lastTime = now;\n }\n });\n}\n\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => initFaceLab());\n} else {\n initFaceLab();\n}\n`;",[141],"pulls","branches",1,"forks","envVars",{"_157":60,"_159":60},"connections",{"_157":60,"_158":60},"count","unfilledCount","emptyCount",{"_43":140,"_33":141,"_31":142,"_129":-5,"_41":42,"_40":143,"_131":26,"_38":170,"_13":145,"_34":146,"_36":147,"_23":26,"_135":-5,"_164":171,"_27":172},{"_43":137,"_33":28,"_31":32,"_129":-5,"_41":42,"_40":14,"_131":26,"_38":167,"_13":60,"_34":35,"_36":37,"_23":26,"_135":-5,"_164":168,"_27":169},{"_43":126,"_33":127,"_31":128,"_129":-5,"_41":42,"_40":130,"_131":26,"_38":163,"_13":133,"_34":35,"_36":134,"_23":26,"_135":-5,"_164":165,"_27":166},["D",1767425667446],"children",[],[127],["D",1767431411520],[],[28],["D",1767431346625],[],[141],["D",1767412318598],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":26},{"_13":83,"_33":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"ctx",{"_76":-5,"_120":210,"_211":212,"_213":214,"_215":26,"_216":26,"_217":26,"_218":24,"_219":-5,"_220":-7,"_221":-7,"_222":60,"_223":26,"_224":26,"_225":-5,"_226":26,"_227":26,"_228":26,"_229":-5},"ENV",{"_181":182,"_183":184,"_185":84,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209},"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 · v71