Face Lab 2027 - AI Avatar Studio

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_179":180,"_181":182},"routes/_app.x.$handle.$name",{"_93":92,"_32":44,"_101":83,"_27":102,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":25,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":-5,"_55":25,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":76,"_77":78,"_79":80,"_81":25},"version",77,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","styles.ts","latestPath","fileId","d73570f0-e857-11f0-8c47-42dde27851f2","name","fileType","script","content","const STYLES = `\n:root {\n --bg-primary: #0a0a0f;\n --bg-secondary: #12121a;\n --bg-tertiary: #1a1a25;\n --bg-card: #16161f;\n --bg-hover: #1e1e2a;\n \n --text-primary: #ffffff;\n --text-secondary: #a0a0b0;\n --text-muted: #606070;\n \n --accent-primary: #6366f1;\n --accent-secondary: #8b5cf6;\n --accent-success: #10b981;\n --accent-warning: #f59e0b;\n --accent-error: #ef4444;\n \n --border-color: #2a2a35;\n --border-radius: 12px;\n --border-radius-sm: 8px;\n \n --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);\n --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);\n \n --transition-fast: 150ms ease;\n --transition-normal: 250ms ease;\n \n --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n --font-mono: 'JetBrains Mono', 'Fira Code', monospace;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: var(--font-sans);\n background: var(--bg-primary);\n color: var(--text-primary);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Layout */\n.app-container {\n display: flex;\n width: 100%;\n height: 100%;\n}\n\n.sidebar {\n width: 320px;\n min-width: 320px;\n height: 100%;\n background: var(--bg-secondary);\n border-right: 1px solid var(--border-color);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.main-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n}\n\n/* Sidebar Header */\n.sidebar-header {\n padding: 20px;\n border-bottom: 1px solid var(--border-color);\n}\n\n.logo {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.logo-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n border-radius: var(--border-radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n}\n\n.logo-text {\n font-size: 20px;\n font-weight: 700;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.status-bar {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: var(--text-secondary);\n}\n\n.status-item {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--accent-success);\n animation: pulse 2s infinite;\n}\n\n.status-dot.warning { background: var(--accent-warning); }\n.status-dot.error { background: var(--accent-error); }\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* Sidebar Tabs */\n.sidebar-tabs {\n display: flex;\n border-bottom: 1px solid var(--border-color);\n}\n\n.tab-btn {\n flex: 1;\n padding: 12px;\n background: transparent;\n border: none;\n color: var(--text-secondary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition-fast);\n position: relative;\n}\n\n.tab-btn:hover {\n color: var(--text-primary);\n background: var(--bg-hover);\n}\n\n.tab-btn.active {\n color: var(--accent-primary);\n}\n\n.tab-btn.active::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--accent-primary);\n}\n\n/* Sidebar Content */\n.sidebar-content {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n.sidebar-content::-webkit-scrollbar {\n width: 6px;\n}\n\n.sidebar-content::-webkit-scrollbar-track {\n background: var(--bg-tertiary);\n}\n\n.sidebar-content::-webkit-scrollbar-thumb {\n background: var(--border-color);\n border-radius: 3px;\n}\n\n.tab-panel {\n display: none;\n}\n\n.tab-panel.active {\n display: block;\n}\n\n/* Style Grid */\n.style-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n}\n\n.style-card {\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n padding: 16px;\n cursor: pointer;\n transition: var(--transition-fast);\n position: relative;\n overflow: hidden;\n}\n\n.style-card:hover {\n border-color: var(--accent-primary);\n transform: translateY(-2px);\n box-shadow: var(--shadow-md);\n}\n\n.style-card.active {\n border-color: var(--accent-primary);\n background: rgba(99, 102, 241, 0.1);\n}\n\n.style-card.locked {\n opacity: 0.6;\n}\n\n.style-card.locked::after {\n content: '🔒';\n position: absolute;\n top: 8px;\n right: 8px;\n font-size: 12px;\n}\n\n.style-preview {\n font-size: 32px;\n text-align: center;\n margin-bottom: 8px;\n}\n\n.style-name {\n font-size: 13px;\n font-weight: 600;\n text-align: center;\n margin-bottom: 4px;\n}\n\n.style-tier {\n font-size: 10px;\n text-align: center;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.style-tier.free { color: var(--accent-success); }\n.style-tier.pro { color: var(--accent-primary); }\n.style-tier.enterprise { color: var(--accent-secondary); }\n\n/* Controls */\n.control-group {\n margin-bottom: 20px;\n}\n\n.control-label {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n font-size: 13px;\n color: var(--text-secondary);\n}\n\n.control-value {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--accent-primary);\n}\n\n/* Slider */\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: var(--transition-fast);\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n transform: scale(1.2);\n box-shadow: 0 0 10px var(--accent-primary);\n}\n\n/* Toggle */\n.toggle-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px;\n background: var(--bg-card);\n border-radius: var(--border-radius-sm);\n margin-bottom: 8px;\n}\n\n.toggle-label {\n font-size: 13px;\n}\n\n.toggle {\n width: 44px;\n height: 24px;\n background: var(--bg-tertiary);\n border-radius: 12px;\n position: relative;\n cursor: pointer;\n transition: var(--transition-fast);\n}\n\n.toggle.active {\n background: var(--accent-primary);\n}\n\n.toggle::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 20px;\n height: 20px;\n background: white;\n border-radius: 50%;\n transition: var(--transition-fast);\n}\n\n.toggle.active::after {\n left: 22px;\n}\n\n/* Color Picker */\n.color-picker-wrapper {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.color-preview {\n width: 36px;\n height: 36px;\n border-radius: var(--border-radius-sm);\n border: 2px solid var(--border-color);\n cursor: pointer;\n}\n\n.color-input {\n flex: 1;\n padding: 8px 12px;\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius-sm);\n color: var(--text-primary);\n font-family: var(--font-mono);\n font-size: 13px;\n}\n\n/* Buttons */\n.btn {\n padding: 10px 20px;\n border: none;\n border-radius: var(--border-radius-sm);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition-fast);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.btn-primary {\n background: var(--accent-primary);\n color: white;\n}\n\n.btn-primary:hover {\n background: var(--accent-secondary);\n transform: translateY(-1px);\n}\n\n.btn-secondary {\n background: var(--bg-tertiary);\n color: var(--text-primary);\n border: 1px solid var(--border-color);\n}\n\n.btn-secondary:hover {\n background: var(--bg-hover);\n border-color: var(--accent-primary);\n}\n\n.btn-icon {\n width: 40px;\n height: 40px;\n padding: 0;\n border-radius: 50%;\n}\n\n/* Canvas Container */\n.canvas-container {\n flex: 1;\n position: relative;\n background: var(--bg-primary);\n overflow: hidden;\n}\n\n#render-canvas {\n width: 100%;\n height: 100%;\n}\n\n.video-hidden {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n\n/* Overlay Controls */\n.overlay-controls {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n padding: 12px 20px;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n border-radius: 50px;\n border: 1px solid var(--border-color);\n}\n\n.overlay-btn {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--bg-tertiary);\n border: 1px solid var(--border-color);\n color: var(--text-primary);\n font-size: 20px;\n cursor: pointer;\n transition: var(--transition-fast);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.overlay-btn:hover {\n background: var(--accent-primary);\n border-color: var(--accent-primary);\n transform: scale(1.1);\n}\n\n.overlay-btn.recording {\n background: var(--accent-error);\n border-color: var(--accent-error);\n animation: pulse-red 1s infinite;\n}\n\n@keyframes pulse-red {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }\n 50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }\n}\n\n/* Stats Overlay */\n.stats-overlay {\n position: absolute;\n top: 20px;\n left: 20px;\n padding: 12px 16px;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n border-radius: var(--border-radius-sm);\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--text-secondary);\n pointer-events: none;\n}\n\n.stats-row {\n display: flex;\n justify-content: space-between;\n gap: 20px;\n margin-bottom: 4px;\n}\n\n.stats-row:last-child {\n margin-bottom: 0;\n}\n\n.stats-value {\n color: var(--accent-success);\n}\n\n.stats-value.warning { color: var(--accent-warning); }\n.stats-value.error { color: var(--accent-error); }\n\n/* Watermark */\n.watermark {\n position: absolute;\n bottom: 80px;\n right: 20px;\n padding: 8px 12px;\n background: rgba(0, 0, 0, 0.6);\n border-radius: var(--border-radius-sm);\n font-size: 11px;\n color: var(--text-muted);\n pointer-events: none;\n}\n\n/* Settings Panel */\n.settings-section {\n margin-bottom: 24px;\n}\n\n.settings-section-title {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--text-muted);\n margin-bottom: 12px;\n}\n\n/* License Panel */\n.license-card {\n padding: 20px;\n background: var(--bg-card);\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n text-align: center;\n}\n\n.license-tier {\n font-size: 24px;\n font-weight: 700;\n margin-bottom: 8px;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.license-features {\n margin: 16px 0;\n text-align: left;\n}\n\n.license-feature {\n display: flex; align-items: center;\n gap: 8px;\n padding: 8px 0;\n font-size: 13px;\n color: var(--text-secondary);\n border-bottom: 1px solid var(--border-color);\n}\n\n.license-feature:last-child {\n border-bottom: none;\n}\n\n.feature-icon {\n width: 20px;\n text-align: center;\n}\n\n.feature-icon.enabled { color: var(--accent-success); }\n.feature-icon.disabled { color: var(--text-muted); }\n\n/* Modal */\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: var(--transition-normal);\n}\n\n.modal-overlay.active {\n opacity: 1;\n visibility: visible;\n}\n\n.modal {\n background: var(--bg-secondary);\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n max-width: 500px;\n width: 90%;\n max-height: 80vh;\n overflow: auto;\n transform: translateY(20px);\n transition: var(--transition-normal);\n}\n\n.modal-overlay.active .modal {\n transform: translateY(0);\n}\n\n.modal-header {\n padding: 20px;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.modal-title {\n font-size: 18px;\n font-weight: 600;\n}\n\n.modal-close {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--bg-tertiary);\n border: none;\n color: var(--text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: var(--transition-fast);\n}\n\n.modal-close:hover {\n background: var(--accent-error);\n color: white;\n}\n\n.modal-body {\n padding: 20px;\n}\n\n.modal-footer {\n padding: 20px;\n border-top: 1px solid var(--border-color);\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n}\n\n/* License Input */\n.license-input-wrapper {\n margin-bottom: 20px;\n}\n\n.license-input {\n width: 100%;\n padding: 16px;\n background: var(--bg-card);\n border: 2px solid var(--border-color);\n border-radius: var(--border-radius-sm);\n color: var(--text-primary);\n font-family: var(--font-mono);\n font-size: 14px;\n text-align: center;\n letter-spacing: 2px;\n transition: var(--transition-fast);\n}\n\n.license-input:focus {\n outline: none;\n border-color: var(--accent-primary);\n}\n\n.license-input.valid {\n border-color: var(--accent-success);\n}\n\n.license-input.invalid {\n border-color: var(--accent-error);\n}\n\n/* Toast Notifications */\n.toast-container {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 2000;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.toast {\n padding: 12px 20px;\n background: var(--bg-secondary);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius-sm);\n box-shadow: var(--shadow-lg);\n display: flex;\n align-items: center;\n gap: 12px;\n animation: slideIn 0.3s ease;\n}\n\n@keyframes slideIn {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.toast.success { border-left: 3px solid var(--accent-success); }\n.toast.error { border-left: 3px solid var(--accent-error); }\n.toast.warning { border-left: 3px solid var(--accent-warning); }\n.toast.info { border-left: 3px solid var(--accent-primary); }\n\n/* Loading Spinner */\n.spinner {\n width: 40px;\n height: 40px;\n border: 3px solid var(--bg-tertiary);\n border-top-color: var(--accent-primary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(10, 10, 15, 0.9);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n z-index: 100;\n}\n\n.loading-text {\n font-size: 14px;\n color: var(--text-secondary);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .app-container {\n flex-direction: column;\n }\n \n .sidebar {\n width: 100%;\n min-width: 100%;\n height: auto;\n max-height: 50vh;\n border-right: none;\n border-bottom: 1px solid var(--border-color);\n }\n \n .style-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n \n .overlay-controls {\n bottom: 10px;\n padding: 8px 16px;\n }\n \n .overlay-btn {\n width: 40px;\n height: 40px;\n font-size: 16px;\n }\n}\n`;\n\nexport default STYLES;","createdAt",["D",1767432340017],"branchVersion","branchId","8db9776e-e857-11f0-bcde-42dde27851f2","id","8db936b4-e857-11f0-bcde-42dde27851f2","patternlanguage",["D",1767412318598],"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",{"_93":92,"_100":96},"org",{"_93":92,"_94":-5,"_95":96,"_18":53,"_97":98,"_99":25},"branch",{"_13":82,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"isOwned",80,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","banks","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM3QkpMYjNNQXJWZGdESmFRZHZyc2ZSS1djUyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":175,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":-5,"_55":25,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":176,"_77":177,"_79":178,"_81":25},"tree",[162,163,164],"files",[162,163,164],"counts",{"_151":59,"_152":153,"_154":59,"_155":156,"_157":158},"contents",[124,125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":143,"_32":144,"_30":145,"_128":-5,"_40":41,"_39":146,"_129":25,"_37":147,"_13":148,"_33":34,"_35":149,"_24":25,"_132":-5,"_27":150},{"_42":134,"_32":135,"_30":136,"_128":-5,"_40":41,"_39":137,"_129":25,"_37":138,"_13":139,"_33":140,"_35":141,"_24":25,"_132":-5,"_27":142},{"_42":127,"_32":28,"_30":31,"_128":-5,"_40":41,"_39":14,"_129":119,"_37":130,"_13":131,"_33":34,"_35":36,"_24":25,"_132":-5,"_27":133},"2b6c2712-e886-11f0-9348-42dde27851f2","parentId","latest",["D",1767432340017],16,"label",[28],"1d9c4202-e886-11f0-872c-42dde27851f2","main.ts","8dbb9ad0-e857-11f0-bcde-42dde27851f2",76,["D",1767432316840],57,"http","// @val.town/facelab-main - HTTP Handler version\nimport { STYLES } from \"./styles.ts\";\nimport { FACELAB_HTML } from \"./html-template.ts\";\n\n// ============================================================================\n// TYPES & INTERFACES\n// ============================================================================\n\ninterface PatternParameter {\n id: string;\n name: string;\n type: \"float\" | \"int\" | \"bool\" | \"color\";\n default: number | boolean | string;\n min?: number;\n max?: number;\n step?: number;\n ui: \"slider\" | \"toggle\" | \"colorpicker\";\n}\n\ninterface StyleDefinition {\n id: string;\n name: string;\n description: string;\n tier: \"free\" | \"basic\" | \"pro\";\n parameters: PatternParameter[];\n fragmentShader: string;\n preview: string;\n}\n\ninterface FaceLabConfig {\n performance: string;\n devView: boolean;\n videoHidden: boolean;\n lerpFactor: number;\n renderMode: string;\n skinColor: string;\n outlineColor: string;\n outlineWidth: number;\n eyeStyle: string;\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 // Video effect style settings\n videoEffectStyle: string;\n videoEffectParams: Record>;\n showVideoEffect: boolean;\n}\n\ninterface Point2D {\n x: number;\n y: number;\n}\n\ninterface WizardState {\n currentStep: number;\n totalSteps: number;\n stepZoomModes: string[];\n}\n\ninterface PathStyle {\n fill?: string;\n stroke?: string;\n lineWidth?: number;\n blur?: number;\n blend?: GlobalCompositeOperation;\n}\n\ninterface DelayedFrameResult {\n canvas: HTMLCanvasElement;\n frameNumber: number;\n currentFrameNumber: number;\n actualDelay: number;\n bufferedFrames: number;\n}\n\ninterface LandmarkDefinitions {\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 [key: string]: number | number[];\n}\n\ninterface LightPosBinding {\n id: string;\n key: keyof FaceLabConfig;\n valueId: string;\n prop: \"x\" | \"y\" | \"z\";\n}\n\n// ============================================================================\n// VIDEO EFFECT STYLES\n// ============================================================================\n\nconst VIDEO_EFFECT_STYLES: StyleDefinition[] = [\n {\n id: \"none\",\n name: \"No Effect\",\n description: \"Raw camera feed\",\n tier: \"free\",\n preview: \"📷\",\n parameters: [],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n void main() {\n gl_FragColor = texture2D(map, vUv);\n }\n `,\n },\n {\n id: \"sketch\",\n name: \"Pencil Sketch\",\n description: \"Hand-drawn sketch effect with wobble\",\n tier: \"free\",\n preview: \"✏️\",\n parameters: [\n {\n id: \"edgeStrength\",\n name: \"Edge Strength\",\n type: \"float\",\n default: 1.5,\n min: 0.5,\n max: 3.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"wobble\",\n name: \"Wobble\",\n type: \"float\",\n default: 0.002,\n min: 0.0,\n max: 0.01,\n step: 0.001,\n ui: \"slider\",\n },\n {\n id: \"paperWhite\",\n name: \"Paper Brightness\",\n type: \"float\",\n default: 0.95,\n min: 0.7,\n max: 1.0,\n step: 0.01,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform float time;\n uniform vec2 resolution;\n uniform float edgeStrength;\n uniform float wobble;\n uniform float paperWhite;\n \n float rand(vec2 co) {\n return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);\n }\n \n float noise(vec2 p) {\n vec2 i = floor(p);\n vec2 f = fract(p);\n float a = rand(i);\n float b = rand(i + vec2(1.0, 0.0));\n float c = rand(i + vec2(0.0, 1.0));\n float d = rand(i + vec2(1.0, 1.0));\n vec2 u = f * f * (3.0 - 2.0 * f);\n return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n }\n \n void main() {\n vec2 uv = vUv;\n \n uv += vec2(\n noise(vUv * 8.0 + time) - 0.5,\n noise(vUv * 8.0 + time + 100.0) - 0.5\n ) * wobble;\n \n vec2 texel = edgeStrength / resolution;\n \n float tl = dot(texture2D(map, uv + vec2(-texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float t = dot(texture2D(map, uv + vec2(0.0, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float tr = dot(texture2D(map, uv + vec2(texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float l = dot(texture2D(map, uv + vec2(-texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float r = dot(texture2D(map, uv + vec2(texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float bl = dot(texture2D(map, uv + vec2(-texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float b = dot(texture2D(map, uv + vec2(0.0, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float br = dot(texture2D(map, uv + vec2(texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n \n float gx = tl + 2.0*l + bl - tr - 2.0*r - br;\n float gy = tl + 2.0*t + tr - bl - 2.0*b - br;\n float edge = sqrt(gx*gx + gy*gy);\n edge = smoothstep(0.02, 0.15, edge);\n \n float paper = paperWhite - noise(vUv * 80.0) * 0.04;\n \n vec3 color = mix(vec3(paper), vec3(0.1), edge);\n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"toon\",\n name: \"Cartoon\",\n description: \"Cel-shaded cartoon effect\",\n tier: \"free\",\n preview: \"🎨\",\n parameters: [\n {\n id: \"levels\",\n name: \"Color Levels\",\n type: \"float\",\n default: 5.0,\n min: 2.0,\n max: 10.0,\n step: 1.0,\n ui: \"slider\",\n },\n {\n id: \"outline\",\n name: \"Outline\",\n type: \"float\",\n default: 1.2,\n min: 0.0,\n max: 3.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"saturation\",\n name: \"Saturation\",\n type: \"float\",\n default: 1.4,\n min: 0.5,\n max: 2.5,\n step: 0.1,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform vec2 resolution;\n uniform float levels;\n uniform float outline;\n uniform float saturation;\n \n vec3 rgb2hsv(vec3 c) {\n vec4 K = vec4(0.0, -1.0/3.0, 2.0/3.0, -1.0);\n vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));\n vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));\n float d = q.x - min(q.w, q.y);\n float e = 1.0e-10;\n return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);\n }\n \n vec3 hsv2rgb(vec3 c) {\n vec4 K = vec4(1.0, 2.0/3.0, 1.0/3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n }\n \n void main() {\n vec4 tex = texture2D(map, vUv);\n vec3 color = tex.rgb;\n \n vec3 hsv = rgb2hsv(color);\n hsv.y = clamp(hsv.y * saturation, 0.0, 1.0);\n color = hsv2rgb(hsv);\n \n color = floor(color * levels + 0.5) / levels;\n \n vec2 texel = outline / resolution;\n float c0 = dot(texture2D(map, vUv).rgb, vec3(0.33));\n float c1 = dot(texture2D(map, vUv + vec2(texel.x, 0.0)).rgb, vec3(0.33));\n float c2 = dot(texture2D(map, vUv + vec2(-texel.x, 0.0)).rgb, vec3(0.33));\n float c3 = dot(texture2D(map, vUv + vec2(0.0, texel.y)).rgb, vec3(0.33));\n float c4 = dot(texture2D(map, vUv + vec2(0.0, -texel.y)).rgb, vec3(0.33));\n \n float edge = abs(c1 - c2) + abs(c3 - c4);\n edge = smoothstep(0.05, 0.2, edge);\n \n color = mix(color, vec3(0.1), edge * step(0.1, outline));\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"glitch\",\n name: \"Glitch\",\n description: \"Digital glitch with RGB split\",\n tier: \"free\",\n preview: \"📺\",\n parameters: [\n {\n id: \"rgbShift\",\n name: \"RGB Shift\",\n type: \"float\",\n default: 0.008,\n min: 0.0,\n max: 0.03,\n step: 0.001,\n ui: \"slider\",\n },\n {\n id: \"scanline\",\n name: \"Scanlines\",\n type: \"float\",\n default: 0.4,\n min: 0.0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"noiseAmt\",\n name: \"Noise\",\n type: \"float\",\n default: 0.15,\n min: 0.0,\n max: 0.5,\n step: 0.02,\n ui: \"slider\",\n },\n {\n id: \"glitchProb\",\n name: \"Glitch Amount\",\n type: \"float\",\n default: 0.4,\n min: 0.0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform float time;\n uniform vec2 resolution;\n uniform float rgbShift;\n uniform float scanline;\n uniform float noiseAmt;\n uniform float glitchProb;\n \n float rand(vec2 co) {\n return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);\n }\n \n void main() {\n vec2 uv = vUv;\n \n float lineNum = floor(uv.y * 40.0);\n float glitchTrigger = step(1.0 - glitchProb * 0.15, rand(vec2(lineNum, floor(time * 8.0))));\n uv.x += glitchTrigger * (rand(vec2(time, lineNum)) - 0.5) * 0.12;\n \n float shift = rgbShift * (1.0 + glitchTrigger * 2.0);\n float r = texture2D(map, uv + vec2(shift, 0.0)).r;\n float g = texture2D(map, uv).g;\n float b = texture2D(map, uv - vec2(shift, 0.0)).b;\n vec3 color = vec3(r, g, b);\n \n float scan = sin(vUv.y * resolution.y * 1.5) * 0.5 + 0.5;\n color *= 1.0 - scanline * 0.35 * scan;\n \n float n = rand(vUv + time) * noiseAmt;\n color += n - noiseAmt * 0.5;\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"neon\",\n name: \"Neon\",\n description: \"Glowing neon edge effect\",\n tier: \"free\",\n preview: \"💜\",\n parameters: [\n {\n id: \"glow\",\n name: \"Glow Intensity\",\n type: \"float\",\n default: 2.0,\n min: 0.5,\n max: 4.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"hueSpeed\",\n name: \"Color Speed\",\n type: \"float\",\n default: 0.2,\n min: 0.0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"threshold\",\n name: \"Edge Threshold\",\n type: \"float\",\n default: 0.12,\n min: 0.02,\n max: 0.3,\n step: 0.01,\n ui: \"slider\",\n },\n {\n id: \"bgDark\",\n name: \"Background Dark\",\n type: \"float\",\n default: 0.05,\n min: 0.0,\n max: 0.3,\n step: 0.01,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform float time;\n uniform vec2 resolution;\n uniform float glow;\n uniform float hueSpeed;\n uniform float threshold;\n uniform float bgDark;\n \n vec3 hsv2rgb(vec3 c) {\n vec4 K = vec4(1.0, 2.0/3.0, 1.0/3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n }\n \n void main() {\n vec2 texel = 1.5 / resolution;\n \n float tl = dot(texture2D(map, vUv + vec2(-texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float t = dot(texture2D(map, vUv + vec2(0.0, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float tr = dot(texture2D(map, vUv + vec2(texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float l = dot(texture2D(map, vUv + vec2(-texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float r = dot(texture2D(map, vUv + vec2(texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float bl = dot(texture2D(map, vUv + vec2(-texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float b = dot(texture2D(map, vUv + vec2(0.0, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float br = dot(texture2D(map, vUv + vec2(texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n \n float gx = tl + 2.0*l + bl - tr - 2.0*r - br;\n float gy = tl + 2.0*t + tr - bl - 2.0*b - br;\n float edge = sqrt(gx*gx + gy*gy);\n edge = smoothstep(threshold * 0.3, threshold, edge);\n \n float hue = fract(vUv.x * 0.4 + vUv.y * 0.3 + time * hueSpeed);\n vec3 neonCol = hsv2rgb(vec3(hue, 0.85, 1.0));\n \n vec3 glowColor = neonCol * edge * glow;\n \n for(float i = 1.0; i <= 4.0; i++) {\n vec2 off = texel * i * 2.5;\n float e1 = smoothstep(threshold * 0.3, threshold, sqrt(\n pow(dot(texture2D(map, vUv + vec2(off.x, 0.0)).rgb, vec3(0.33)) - dot(texture2D(map, vUv - vec2(off.x, 0.0)).rgb, vec3(0.33)), 2.0) +\n pow(dot(texture2D(map, vUv + vec2(0.0, off.y)).rgb, vec3(0.33)) - dot(texture2D(map, vUv - vec2(0.0, off.y)).rgb, vec3(0.33)), 2.0)\n ));\n glowColor += neonCol * e1 * (0.4 / i);\n }\n \n vec3 bg = vec3(bgDark * 0.15, bgDark * 0.05, bgDark * 0.2);\n vec3 color = bg + glowColor;\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"pixel\",\n name: \"Pixel Art\",\n description: \"Retro pixelated look\",\n tier: \"free\",\n preview: \"👾\",\n parameters: [\n {\n id: \"pixelSize\",\n name: \"Pixel Size\",\n type: \"float\",\n default: 8.0,\n min: 2.0,\n max: 24.0,\n step: 1.0,\n ui: \"slider\",\n },\n {\n id: \"colorDepth\",\n name: \"Colors\",\n type: \"float\",\n default: 12.0,\n min: 2.0,\n max: 32.0,\n step: 1.0,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform vec2 resolution;\n uniform float pixelSize;\n uniform float colorDepth;\n \n void main() {\n vec2 pixUv = floor(vUv * resolution / pixelSize) * pixelSize / resolution;\n vec4 color = texture2D(map, pixUv);\n color.rgb = floor(color.rgb * colorDepth + 0.5) / colorDepth;\n gl_FragColor = color;\n }\n `,\n },\n {\n id: \"thermal\",\n name: \"Thermal\",\n description: \"Heat vision effect\",\n tier: \"free\",\n preview: \"🌡️\",\n parameters: [\n {\n id: \"contrast\",\n name: \"Contrast\",\n type: \"float\",\n default: 1.2,\n min: 0.5,\n max: 2.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"colorShift\",\n name: \"Color Shift\",\n type: \"float\",\n default: 0.0,\n min: -0.5,\n max: 0.5,\n step: 0.05,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform float contrast;\n uniform float colorShift;\n \n void main() {\n vec4 tex = texture2D(map, vUv);\n float lum = dot(tex.rgb, vec3(0.299, 0.587, 0.114));\n \n lum = (lum - 0.5) * contrast + 0.5;\n lum = clamp(lum + colorShift, 0.0, 1.0);\n \n vec3 color;\n if (lum < 0.25) {\n color = mix(vec3(0.0, 0.0, 0.2), vec3(0.0, 0.0, 1.0), lum * 4.0);\n } else if (lum < 0.5) {\n color = mix(vec3(0.0, 0.0, 1.0), vec3(0.0, 1.0, 0.0), (lum - 0.25) * 4.0);\n } else if (lum < 0.75) {\n color = mix(vec3(0.0, 1.0, 0.0), vec3(1.0, 1.0, 0.0), (lum - 0.5) * 4.0);\n } else {\n color = mix(vec3(1.0, 1.0, 0.0), vec3(1.0, 0.0, 0.0), (lum - 0.75) * 4.0);\n }\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"vhs\",\n name: \"VHS\",\n description: \"Retro VHS tape effect\",\n tier: \"free\",\n preview: \"📼\",\n parameters: [\n {\n id: \"tracking\",\n name: \"Tracking Error\",\n type: \"float\",\n default: 0.4,\n min: 0.0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"noise\",\n name: \"Tape Noise\",\n type: \"float\",\n default: 0.15,\n min: 0.0,\n max: 0.5,\n step: 0.02,\n ui: \"slider\",\n },\n {\n id: \"colorBleed\",\n name: \"Color Bleed\",\n type: \"float\",\n default: 0.006,\n min: 0.0,\n max: 0.02,\n step: 0.001,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform float time;\n uniform vec2 resolution;\n uniform float tracking;\n uniform float noise;\n uniform float colorBleed;\n \n float rand(vec2 co) {\n return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);\n }\n \n void main() {\n vec2 uv = vUv;\n \n float trackWave = sin(uv.y * 30.0 + time * 5.0) * 0.002 * tracking;\n float trackNoise = (rand(vec2(floor(uv.y * 100.0), time)) - 0.5) * 0.01 * tracking;\n uv.x += trackWave + trackNoise;\n \n float trackLine = step(0.995, rand(vec2(floor(time * 4.0), 0.0))) * \n step(abs(uv.y - fract(time * 0.5)) , 0.02) * tracking;\n uv.x += trackLine * 0.05;\n \n float r = texture2D(map, uv + vec2(colorBleed, 0.0)).r;\n float g = texture2D(map, uv).g;\n float b = texture2D(map, uv - vec2(colorBleed, 0.0)).b;\n vec3 color = vec3(r, g, b);\n \n float scanline = sin(vUv.y * resolution.y * 2.0) * 0.04;\n color -= scanline;\n \n float n = rand(vUv + time) * noise;\n color += n - noise * 0.5;\n \n float lum = dot(color, vec3(0.299, 0.587, 0.114));\n color = mix(vec3(lum), color, 0.85);\n \n float vig = 1.0 - length((vUv - 0.5) * vec2(1.0, 0.7)) * 0.5;\n color *= vig;\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n];\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst DEFAULT_CONFIG: FaceLabConfig = {\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.3,\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\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({\n config: DEFAULT_CONFIG,\n videoEffectStyles: VIDEO_EFFECT_STYLES,\n });\n }\n\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

\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`;",[135],"04aeb2a2-e886-11f0-8f74-42dde27851f2","html-template.ts","01fe4c54-e884-11f0-b5b0-42dde27851f2",74,["D",1767432275023],3,"// @val.town/facelab-html-template\n\nexport const FACELAB_HTML = `\n

\n\n

\n \n

Face Lab

\n Beta 2027\n

\n \n Tracking\n

60 FPS

Delay: 1f

\n\n

\n \n Zoomed: Eyes\n

\n\n

Initializing...

\n\n

Configuration Wizard

Face

Eyes

Mouth

Teeth

Lighting

\n\n

\n \n

Face Setup

Configure the base face mesh rendering style and appearance.

\n\n

Render Mode

Cel-Shaded

Standard

\n\n

Video Delay (Frame Sync)

\n Frame Delay\n 1\n

\n \n

\n Use Delayed Video Background\n

\n\n

Colors

\n \n

Skin Color

#fff5e6

\n \n

Outline Color

#000000

\n\n

Outline

\n Outline Width\n 0.006\n

\n \n

\n\n

System

\n Smoothing Factor\n 0.7\n

\n \n

\n Developer View\n

\n\n

\n \n \n Texture\n \n \n

\n \n BG\n

\n \n Save\n

\n\n

\n \n

Eye Configuration

Customize the eye style, color, and pupil appearance.

\n\n

Style

\n \n \n \n

\n\n

Appearance

\n \n

Iris Color

#3498db

\n\n

Sizing

\n Eye Size\n 0.86\n

\n \n

\n Pupil Size\n 0.45\n

\n \n

\n\n

Details

\n Eyelash Opacity\n 1.0\n

\n \n

\n Eyebrow Opacity\n 0.0\n

\n \n

\n\n

\n \n

Mouth & Lips

Configure lip appearance and mouth interior settings.

\n\n

Lips

\n Lip Opacity\n 0.10\n

\n \n

\n\n

Tongue

\n Show Tongue\n

\n \n

Tongue Color

#d13d69

\n Tongue Depth\n 0.19\n

\n \n

\n\n

\n \n

Teeth Configuration

Fine-tune teeth positioning and sizing.

\n\n

Global Settings

\n Overall Scale\n 0.74\n

\n \n

\n\n

Top Teeth

\n Show Top Teeth\n

\n Width\n 1.00\n

\n \n

\n Height\n 0.72\n

\n \n

\n Offset X\n -0.07\n

\n \n

\n Offset Y\n 0.10\n

\n \n

\n Depth\n 1.00\n

\n \n

\n\n

Bottom Teeth

\n Show Bottom Teeth\n

\n Width\n 1.00\n

\n \n

\n Height\n 0.50\n

\n \n

\n Offset X\n 0.01\n

\n \n

\n Offset Y\n 0.10\n

\n \n

\n Depth\n 0.22\n

\n \n

\n\n

\n \n

Lighting Setup

Adjust ambient and directional lighting for the scene.

\n\n

Intensity

\n Ambient Light\n 1.98\n

\n \n

\n Directional Light\n 2.45\n

\n \n

\n\n

Light Color

\n \n

Light Color

#ffffff

\n\n

Light Position

\n Position X\n 5.0\n

\n \n

\n Position Y\n 2.0\n

\n \n

\n Position Z\n 5.0\n

\n \n

\n\n

\n \n Reset\n

\n \n Export\n

\n \n Finish\n

\n\n \n

\n\n

\n`;\n\n/**\n * Renders the FaceLab application HTML into a container element\n */\nexport function renderApp(container: HTMLElement): void {\n container.innerHTML = FACELAB_HTML;\n}\n\n/**\n * Creates a complete HTML document with all necessary meta tags and imports\n */\nexport function createFullDocument(): string {\n return `\n\n\n Face Lab 2027 - AI Avatar Studio\n \n \n \n \n \n \n \n\n\n${FACELAB_HTML}\n\n`;\n}\n\n/**\n * Icon SVG components for reuse\n */\nexport const ICONS = {\n face: ``,\n\n user: ``,\n\n eye: ``,\n\n teeth: ``,\n\n light: ``,\n\n zoom: ``,\n\n image: ``,\n\n save: ``,\n\n reset: ``,\n\n export: ``,\n\n check: ``,\n\n arrowLeft: ``,\n\n arrowRight: ``,\n};\n\n/**\n * Helper to create a slider control HTML\n */\nexport function createSliderControl(\n id: string,\n label: string,\n valueId: string,\n min: number,\n max: number,\n step: number,\n defaultValue: number,\n): string {\n return `\n

\n ${label}\n ${\n defaultValue.toFixed(2)\n }\n

\n \n

\n `;\n}\n\n/**\n * Helper to create a color control HTML\n */\nexport function createColorControl(\n id: string,\n label: string,\n previewId: string,\n hexId: string,\n defaultColor: string,\n): string {\n return `\n

\n \n

${label}

${defaultColor}

\n `;\n}\n\n/**\n * Helper to create a toggle control HTML\n */\nexport function createToggleControl(\n id: string,\n label: string,\n active: boolean = false,\n): string {\n return `\n

\n ${label}\n

\n `;\n}\n\n/**\n * Helper to create a quick action button HTML\n */\nexport function createQuickAction(\n id: string,\n label: string,\n iconKey: keyof typeof ICONS,\n): string {\n return `\n

\n ${ICONS[iconKey]}\n ${label}\n

\n `;\n}",[144],"pulls","branches",1,"forks","envVars",{"_159":59,"_161":59},"connections",{"_159":59,"_160":59},"count","unfilledCount","emptyCount",{"_42":143,"_32":144,"_30":145,"_128":-5,"_40":41,"_39":146,"_129":25,"_37":172,"_13":148,"_33":34,"_35":149,"_24":25,"_132":-5,"_166":173,"_27":174},{"_42":134,"_32":135,"_30":136,"_128":-5,"_40":41,"_39":137,"_129":25,"_37":169,"_13":139,"_33":140,"_35":141,"_24":25,"_132":-5,"_166":170,"_27":171},{"_42":127,"_32":28,"_30":31,"_128":-5,"_40":41,"_39":14,"_129":119,"_37":165,"_13":131,"_33":34,"_35":36,"_24":25,"_132":-5,"_166":167,"_27":168},["D",1767432340017],"children",[],[28],["D",1767432316840],[],[135],["D",1767432275023],[],[144],["D",1767412318598],{"_93":92,"_100":96},{"_93":92,"_94":-5,"_95":96,"_18":53,"_97":98,"_99":25},{"_13":82,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"ctx",{"_75":-5,"_121":212,"_213":214,"_215":216,"_217":25,"_218":25,"_219":25,"_220":119,"_221":-5,"_222":-7,"_223":-7,"_224":59,"_225":25,"_226":25,"_227":-5,"_228":25,"_229":25,"_230":25,"_231":-5},"ENV",{"_183":184,"_185":186,"_187":83,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211},"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 · v77