Face Lab 2027

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_171":172,"_173":174},"routes/_app.x.$handle.$name",{"_103":102,"_33":54,"_111":93,"_28":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_21":-5,"_123":-5,"_124":-5,"_125":26,"_126":127,"_128":129,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_52":53,"_33":54,"_39":55,"_56":-5,"_57":26,"_58":59,"_60":59,"_61":-5,"_62":-5,"_18":63,"_64":-5,"_65":26,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":26},"version",54,"changes",[19,20],"aiChatInfo","userId",{"_21":44,"_23":45,"_25":26,"_27":26,"_28":46,"_30":46},{"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":29},"file",{"_31":32,"_33":29,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_25":26},"previous",{"_31":32,"_33":29,"_34":35,"_36":37},"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;","const FACELAB_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 FACELAB_STYLES;","createdAt",["D",1767425487642],"branchVersion","branchId","8db9776e-e857-11f0-bcde-42dde27851f2",{"_31":47,"_33":46,"_34":48,"_36":50,"_39":51,"_41":14,"_42":43,"_25":26},{"_31":47,"_33":46,"_34":48,"_36":49},"main.ts","8dbb9ad0-e857-11f0-bcde-42dde27851f2","http","// ============================================================================\n// FACE LAB 2027 - AI Avatar Studio\n// Edge-first, offline-capable face tracking with pattern-based customization\n// ============================================================================\n\nimport { STYLES } from \"./styles.ts\";\n\n\"./styles.ts\";\n// ============================================================================\n// TYPES AND INTERFACES\n// ============================================================================\n\ninterface PatternParameter {\n id: string;\n name: string;\n type: \"float\" | \"int\" | \"bool\" | \"color\" | \"enum\";\n default: number | boolean | string;\n min?: number;\n max?: number;\n step?: number;\n options?: string[];\n ui: \"slider\" | \"toggle\" | \"colorpicker\" | \"dropdown\" | \"dial\";\n}\n\ninterface StyleDefinition {\n id: string;\n name: string;\n description: string;\n category: \"sketch\" | \"cartoon\" | \"surreal\" | \"realistic\" | \"abstract\";\n tier: \"free\" | \"basic\" | \"pro\" | \"enterprise\";\n parameters: PatternParameter[];\n fragmentShader: string;\n preview: string;\n}\n\ninterface AppConfig {\n version: string;\n styles: StyleDefinition[];\n defaultStyle: string;\n}\n\n// ============================================================================\n// DEFAULT CONFIGURATION\n// ============================================================================\n\nconst DEFAULT_CONFIG: AppConfig = {\n version: \"1.0.0\",\n defaultStyle: \"hand-drawn-sketch\",\n styles: [\n {\n id: \"none\",\n name: \"No Effect\",\n description: \"Raw camera feed\",\n category: \"realistic\",\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: \"hand-drawn-sketch\",\n name: \"Hand-Drawn Sketch\",\n description: \"Animated pencil sketch with wobbling lines\",\n category: \"sketch\",\n tier: \"free\",\n preview: \"📝\",\n parameters: [\n {\n id: \"strokeWeight\",\n name: \"Stroke Weight\",\n type: \"float\",\n default: 1.5,\n min: 0.5,\n max: 4.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"wobbleAmount\",\n name: \"Hand Tremor\",\n type: \"float\",\n default: 0.002,\n min: 0,\n max: 0.01,\n step: 0.001,\n ui: \"slider\",\n },\n {\n id: \"inkDensity\",\n name: \"Ink Density\",\n type: \"float\",\n default: 0.9,\n min: 0.3,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"paperBrightness\",\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 strokeWeight;\n uniform float wobbleAmount;\n uniform float inkDensity;\n uniform float paperBrightness;\n \n float random(vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n }\n \n float noise(vec2 st) {\n vec2 i = floor(st);\n vec2 f = fract(st);\n float a = random(i);\n float b = random(i + vec2(1.0, 0.0));\n float c = random(i + vec2(0.0, 1.0));\n float d = random(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 texel = strokeWeight / resolution;\n \n // Add wobble\n vec2 wobble = vec2(\n noise(vUv * 8.0 + time * 1.5) - 0.5,\n noise(vUv * 8.0 + time * 1.5 + 50.0) - 0.5\n ) * wobbleAmount;\n vec2 uv = vUv + wobble;\n \n // Sobel edge detection\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.05, 0.2, edge);\n \n // Paper color with slight texture\n float paperNoise = noise(vUv * 100.0) * 0.03;\n vec3 paper = vec3(paperBrightness - paperNoise);\n \n // Ink\n vec3 ink = vec3(0.1);\n \n vec3 color = mix(paper, ink, edge * inkDensity);\n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"cartoon-cel\",\n name: \"Cartoon Cel-Shade\",\n description: \"Anime-style cel-shading with bold outlines\",\n category: \"cartoon\",\n tier: \"free\",\n preview: \"🎨\",\n parameters: [\n {\n id: \"colorLevels\",\n name: \"Color Levels\",\n type: \"float\",\n default: 4.0,\n min: 2.0,\n max: 8.0,\n step: 1.0,\n ui: \"slider\",\n },\n {\n id: \"outlineThickness\",\n name: \"Outline\",\n type: \"float\",\n default: 1.0,\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.3,\n min: 0.5,\n max: 2.0,\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 colorLevels;\n uniform float outlineThickness;\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 texColor = texture2D(map, vUv);\n vec3 color = texColor.rgb;\n \n // Boost saturation\n vec3 hsv = rgb2hsv(color);\n hsv.y = clamp(hsv.y * saturation, 0.0, 1.0);\n color = hsv2rgb(hsv);\n \n // Posterize\n color = floor(color * colorLevels + 0.5) / colorLevels;\n \n // Edge detection for outline\n vec2 texel = outlineThickness / resolution;\n float tl = dot(texture2D(map, vUv + vec2(-texel.x, -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 bl = dot(texture2D(map, vUv + vec2(-texel.x, 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 + bl - tr - br;\n float gy = tl + tr - bl - br;\n float edge = sqrt(gx*gx + gy*gy);\n edge = smoothstep(0.1, 0.3, edge);\n \n color = mix(color, vec3(0.15, 0.1, 0.1), edge * step(0.1, outlineThickness));\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"glitch\",\n name: \"Digital Glitch\",\n description: \"RGB split and scanline distortion\",\n category: \"surreal\",\n tier: \"free\",\n preview: \"🌀\",\n parameters: [\n {\n id: \"rgbShift\",\n name: \"RGB Shift\",\n type: \"float\",\n default: 0.005,\n min: 0.0,\n max: 0.02,\n step: 0.001,\n ui: \"slider\",\n },\n {\n id: \"scanlines\",\n name: \"Scanlines\",\n type: \"float\",\n default: 0.3,\n min: 0.0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"noise\",\n name: \"Noise\",\n type: \"float\",\n default: 0.1,\n min: 0.0,\n max: 0.5,\n step: 0.02,\n ui: \"slider\",\n },\n {\n id: \"glitchIntensity\",\n name: \"Glitch\",\n type: \"float\",\n default: 0.3,\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 scanlines;\n uniform float noise;\n uniform float glitchIntensity;\n \n float random(vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n }\n \n void main() {\n vec2 uv = vUv;\n \n // Random glitch offset\n float glitchLine = step(0.99 - glitchIntensity * 0.1, random(vec2(floor(uv.y * 50.0), floor(time * 10.0))));\n uv.x += glitchLine * (random(vec2(time)) - 0.5) * 0.1 * glitchIntensity;\n \n // RGB shift\n float r = texture2D(map, uv + vec2(rgbShift, 0.0)).r;\n float g = texture2D(map, uv).g;\n float b = texture2D(map, uv - vec2(rgbShift, 0.0)).b;\n vec3 color = vec3(r, g, b);\n \n // Scanlines\n float scanline = sin(vUv.y * resolution.y * 1.5) * 0.5 + 0.5;\n color *= 1.0 - scanlines * 0.3 * scanline;\n \n // Noise\n float n = random(vUv + time) * noise;\n color += n - noise * 0.5;\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"neon\",\n name: \"Neon Glow\",\n description: \"Glowing neon edge effect\",\n category: \"abstract\",\n tier: \"free\",\n preview: \"💡\",\n parameters: [\n {\n id: \"edgeThreshold\",\n name: \"Edge Sensitivity\",\n type: \"float\",\n default: 0.15,\n min: 0.05,\n max: 0.5,\n step: 0.01,\n ui: \"slider\",\n },\n {\n id: \"glowStrength\",\n name: \"Glow Strength\",\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: \"hueShift\",\n name: \"Hue Shift\",\n type: \"float\",\n default: 0.0,\n min: 0.0,\n max: 1.0,\n step: 0.01,\n ui: \"slider\",\n },\n {\n id: \"bgBrightness\",\n name: \"Background\",\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 edgeThreshold;\n uniform float glowStrength;\n uniform float hueShift;\n uniform float bgBrightness;\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 // Sobel\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(edgeThreshold * 0.5, edgeThreshold, edge);\n \n // Neon color based on position\n float hue = fract(vUv.x * 0.5 + vUv.y * 0.3 + hueShift + time * 0.1);\n vec3 neonColor = hsv2rgb(vec3(hue, 0.9, 1.0));\n \n // Glow effect\n vec3 glow = neonColor * edge * glowStrength;\n \n // Add bloom\n for(float i = 1.0; i <= 3.0; i++) {\n vec2 offset = texel * i * 2.0;\n float e1 = dot(texture2D(map, vUv + vec2(offset.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float e2 = dot(texture2D(map, vUv - vec2(offset.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float e3 = dot(texture2D(map, vUv + vec2(0.0, offset.y)).rgb, vec3(0.299, 0.587, 0.114));\n float e4 = dot(texture2D(map, vUv - vec2(0.0, offset.y)).rgb, vec3(0.299, 0.587, 0.114));\n float avgEdge = (e1 + e2 + e3 + e4) * 0.25;\n glow += neonColor * smoothstep(edgeThreshold, edgeThreshold * 2.0, avgEdge) * (0.5 / i);\n }\n \n vec3 bg = vec3(bgBrightness * 0.1, bgBrightness * 0.05, bgBrightness * 0.15);\n vec3 color = bg + glow;\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"pixelate\",\n name: \"Pixel Art\",\n description: \"Retro pixelated effect\",\n category: \"abstract\",\n tier: \"free\",\n preview: \"👾\",\n parameters: [\n {\n id: \"pixelSize\",\n name: \"Pixel Size\",\n type: \"float\",\n default: 6.0,\n min: 2.0,\n max: 20.0,\n step: 1.0,\n ui: \"slider\",\n },\n {\n id: \"colorDepth\",\n name: \"Color Depth\",\n type: \"float\",\n default: 8.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 pixelUv = floor(vUv * resolution / pixelSize) * pixelSize / resolution;\n vec4 color = texture2D(map, pixelUv);\n \n // Reduce color depth\n color.rgb = floor(color.rgb * colorDepth + 0.5) / colorDepth;\n \n gl_FragColor = color;\n }\n `,\n },\n ],\n};\n\n// ============================================================================\n// HTML\n// ============================================================================\n\nconst HTML = `\n

\n \n \n

\n \n

Starting camera...

\n \n

\n FPS:\n --\n

\n \n

\n \n \n

\n\n

\n`;\n\n// ============================================================================\n// CLIENT SCRIPT\n// ============================================================================\n\nconst CLIENT_SCRIPT = `\nconst CONFIG = ${JSON.stringify(DEFAULT_CONFIG)};\n\n// ============================================================================\n// STATE\n// ============================================================================\n\nconst state = {\n currentStyle: 'none',\n params: {},\n isTracking: false,\n fps: 0,\n flipX: true\n};\n\nlet mindarThree = null;\nlet filterMesh = null;\nlet filterMaterial = null;\nlet clock = null;\nlet frameCount = 0;\nlet lastFpsTime = 0;\n\n// ============================================================================\n// UTILITIES\n// ============================================================================\n\nfunction toast(msg, type = 'info') {\n const container = document.getElementById('toast-container');\n const el = document.createElement('div');\n el.className = 'toast ' + type;\n el.textContent = msg;\n container.appendChild(el);\n setTimeout(() => el.remove(), 3000);\n}\n\nfunction setLoading(show, text = '') {\n const el = document.getElementById('loading');\n const textEl = document.getElementById('loading-text');\n el.style.display = show ? 'flex' : 'none';\n if (text) textEl.textContent = text;\n}\n\nfunction updateStatus(active, text) {\n document.getElementById('status-dot').className = 'status-dot' + (active ? ' active' : '');\n document.getElementById('status-text').textContent = text;\n}\n\n// ============================================================================\n// UI SETUP\n// ============================================================================\n\nfunction setupUI() {\n const styleList = document.getElementById('style-list');\n \n CONFIG.styles.forEach(style => {\n const card = document.createElement('div');\n card.className = 'style-card' + (state.currentStyle === style.id ? ' active' : '');\n card.dataset.id = style.id;\n card.innerHTML = \\`\n

\\${style.preview}

\\${style.name}

\\${style.description}

\n \\`;\n card.onclick = () => selectStyle(style.id);\n styleList.appendChild(card);\n });\n \n // Button handlers\n document.getElementById('btn-flip').onclick = () => {\n state.flipX = !state.flipX;\n if (filterMesh) {\n filterMesh.scale.x = state.flipX ? -1 : 1;\n }\n toast(state.flipX ? 'Mirrored' : 'Normal');\n };\n \n document.getElementById('btn-screenshot').onclick = () => {\n if (mindarThree && mindarThree.renderer) {\n const canvas = mindarThree.renderer.domElement;\n const link = document.createElement('a');\n link.download = 'facelab-' + Date.now() + '.png';\n link.href = canvas.toDataURL('image/png');\n link.click();\n toast('Screenshot saved', 'success');\n }\n };\n}\n\nfunction selectStyle(styleId) {\n state.currentStyle = styleId;\n \n // Update UI\n document.querySelectorAll('.style-card').forEach(card => {\n card.classList.toggle('active', card.dataset.id === styleId);\n });\n \n const style = CONFIG.styles.find(s => s.id === styleId);\n if (!style) return;\n \n // Initialize params\n if (!state.params[styleId]) {\n state.params[styleId] = {};\n style.parameters.forEach(p => {\n state.params[styleId][p.id] = p.default;\n });\n }\n \n // Build param UI\n buildParamsUI(style);\n \n // Update shader\n updateShader(style);\n \n toast('Style: ' + style.name, 'success');\n}\n\nfunction buildParamsUI(style) {\n const container = document.getElementById('params-container');\n \n if (!style.parameters.length) {\n container.innerHTML = '

No parameters

';\n return;\n }\n \n container.innerHTML = '';\n const params = state.params[style.id];\n \n style.parameters.forEach(param => {\n const value = params[param.id];\n const div = document.createElement('div');\n div.className = 'param-group';\n div.innerHTML = \\`\n

\n \\${param.name}\n \\${formatVal(value, param)}\n

\n \n \\`;\n container.appendChild(div);\n \n const input = div.querySelector('input');\n input.oninput = (e) => {\n const v = parseFloat(e.target.value);\n params[param.id] = v;\n document.getElementById('val-' + param.id).textContent = formatVal(v, param);\n updateUniform(param.id, v);\n };\n });\n}\n\nfunction formatVal(v, param) {\n if (param.type === 'int' || param.step >= 1) return Math.round(v);\n return v.toFixed(param.step < 0.01 ? 3 : 2);\n}\n\nfunction updateShader(style) {\n if (!filterMaterial) return;\n \n // Create new material with style's shader\n const vertexShader = \\`\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n \\`;\n \n filterMaterial.vertexShader = vertexShader;\n filterMaterial.fragmentShader = style.fragmentShader;\n filterMaterial.needsUpdate = true;\n \n // Set uniforms\n const params = state.params[style.id] || {};\n style.parameters.forEach(param => {\n if (filterMaterial.uniforms[param.id]) {\n filterMaterial.uniforms[param.id].value = params[param.id];\n } else {\n filterMaterial.uniforms[param.id] = { value: params[param.id] };\n }\n });\n}\n\nfunction updateUniform(name, value) {\n if (filterMaterial && filterMaterial.uniforms[name]) {\n filterMaterial.uniforms[name].value = value;\n }\n}\n\n// ============================================================================\n// MINDAR SETUP\n// ============================================================================\n\nasync function initMindAR() {\n setLoading(true, 'Loading face tracking...');\n \n try {\n const { MindARThree } = await import('mindar-face-three');\n const THREE = await import('three');\n \n clock = new THREE.Clock();\n \n const container = document.getElementById('mindar-container');\n \n mindarThree = new MindARThree({\n container: container\n });\n \n const { renderer, scene, camera } = mindarThree;\n \n // Get video texture after start\n await mindarThree.start();\n \n setLoading(true, 'Creating filter mesh...');\n \n // Create video texture from MindAR's video element\n const video = mindarThree.video;\n const videoTexture = new THREE.VideoTexture(video);\n videoTexture.minFilter = THREE.LinearFilter;\n videoTexture.magFilter = THREE.LinearFilter;\n \n // Get initial style\n const style = CONFIG.styles.find(s => s.id === state.currentStyle) || CONFIG.styles[0];\n \n // Create shader material\n filterMaterial = new THREE.ShaderMaterial({\n uniforms: {\n map: { value: videoTexture },\n time: { value: 0 },\n resolution: { value: new THREE.Vector2(video.videoWidth || 640, video.videoHeight || 480) }\n },\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 // Add style-specific uniforms\n style.parameters.forEach(param => {\n filterMaterial.uniforms[param.id] = { value: state.params[style.id]?.[param.id] ?? param.default };\n });\n \n // Create fullscreen quad that sits in front of camera\n const aspect = video.videoWidth / video.videoHeight || 4/3;\n const planeHeight = 2.5;\n const planeWidth = planeHeight * aspect;\n \n const geometry = new THREE.PlaneGeometry(planeWidth, planeHeight);\n filterMesh = new THREE.Mesh(geometry, filterMaterial);\n \n // Position in front of camera\n filterMesh.position.z = -2;\n if (state.flipX) filterMesh.scale.x = -1;\n \n // Add to anchor that tracks face\n const anchor = mindarThree.addAnchor(168); // Nose tip\n anchor.group.add(filterMesh);\n \n // Alternative: Add directly to scene for full-screen effect\n // scene.add(filterMesh);\n \n // Update status\n updateStatus(true, 'Tracking active');\n state.isTracking = true;\n \n setLoading(false);\n toast('Face tracking ready', 'success');\n \n // Animation loop\n const animate = () => {\n requestAnimationFrame(animate);\n \n // Update time uniform\n if (filterMaterial.uniforms.time) {\n filterMaterial.uniforms.time.value = clock.getElapsedTime();\n }\n \n // Update resolution if video size changed\n if (video.videoWidth && filterMaterial.uniforms.resolution) {\n filterMaterial.uniforms.resolution.value.set(video.videoWidth, video.videoHeight);\n }\n \n // FPS counter\n frameCount++;\n const now = performance.now();\n if (now - lastFpsTime >= 500) {\n state.fps = Math.round(frameCount * 1000 / (now - lastFpsTime));\n frameCount = 0;\n lastFpsTime = now;\n document.getElementById('fps').textContent = state.fps;\n }\n \n renderer.render(scene, camera);\n };\n \n animate();\n \n } catch (error) {\n console.error('MindAR init error:', error);\n setLoading(false);\n updateStatus(false, 'Error: ' + error.message);\n toast('Failed to start: ' + error.message, 'error');\n }\n}\n\n// ============================================================================\n// INITIALIZE\n// ============================================================================\n\ndocument.addEventListener('DOMContentLoaded', async () => {\n setupUI();\n \n // Initialize params for default style\n const defaultStyle = CONFIG.styles.find(s => s.id === state.currentStyle) || CONFIG.styles[0];\n if (defaultStyle) {\n state.currentStyle = defaultStyle.id;\n state.params[defaultStyle.id] = {};\n defaultStyle.parameters.forEach(p => {\n state.params[defaultStyle.id][p.id] = p.default;\n });\n buildParamsUI(defaultStyle);\n \n // Update active state in UI\n document.querySelectorAll('.style-card').forEach(card => {\n card.classList.toggle('active', card.dataset.id === defaultStyle.id);\n });\n }\n \n await initMindAR();\n});\n`;\n\n// ============================================================================\n// MAIN HANDLER\n// ============================================================================\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n\n if (url.pathname === \"/api/config\") {\n return Response.json(DEFAULT_CONFIG);\n }\n\n const html = `\n\n\n Face Lab 2027\n \n \n \n \n\n\n${HTML}\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\nexport { DEFAULT_CONFIG };","// ============================================================================\n// FACE LAB 2027 - AI Avatar Studio\n// Edge-first, offline-capable face tracking with pattern-based customization\n// Serverless deployment for val.town or similar environments\n// ============================================================================\n\n// ============================================================================\n// TYPES AND INTERFACES\n// ============================================================================\n\ninterface PatternParameter {\n id: string;\n name: string;\n type: \"float\" | \"int\" | \"bool\" | \"color\" | \"enum\";\n default: number | boolean | string;\n min?: number;\n max?: number;\n step?: number;\n options?: string[];\n ui: \"slider\" | \"toggle\" | \"colorpicker\" | \"dropdown\" | \"dial\";\n}\n\ninterface StyleDefinition {\n id: string;\n name: string;\n description: string;\n category: \"sketch\" | \"cartoon\" | \"surreal\" | \"realistic\" | \"abstract\";\n tier: \"free\" | \"basic\" | \"pro\" | \"enterprise\";\n parameters: PatternParameter[];\n vertexShader: string;\n fragmentShader: string;\n preview: string;\n}\n\ninterface AppConfig {\n version: string;\n styles: StyleDefinition[];\n defaultStyle: string;\n performance: {\n targetFps: number;\n adaptiveQuality: boolean;\n maxLatencyMs: number;\n };\n tracking: {\n enableFace: boolean;\n enableHands: boolean;\n enablePose: boolean;\n smoothing: number;\n };\n output: {\n resolution: \"720p\" | \"1080p\" | \"4k\";\n watermark: boolean;\n };\n}\n\ninterface LicenseInfo {\n valid: boolean;\n tier: \"trial\" | \"basic\" | \"pro\" | \"enterprise\";\n features: {\n faceTracking: boolean;\n handTracking: boolean;\n poseTracking: boolean;\n noWatermark: boolean;\n recording: boolean;\n virtualCamera: boolean;\n customStyles: boolean;\n resolution4k: boolean;\n };\n expiresAt: Date | null;\n}\n\n// ============================================================================\n// DEFAULT CONFIGURATION\n// ============================================================================\n\nconst DEFAULT_CONFIG: AppConfig = {\n version: \"1.0.0\",\n defaultStyle: \"hand-drawn-sketch\",\n performance: {\n targetFps: 30,\n adaptiveQuality: true,\n maxLatencyMs: 100,\n },\n tracking: {\n enableFace: true,\n enableHands: false,\n enablePose: false,\n smoothing: 0.5,\n },\n output: {\n resolution: \"1080p\",\n watermark: true,\n },\n styles: [\n {\n id: \"hand-drawn-sketch\",\n name: \"Hand-Drawn Sketch\",\n description: \"Animated pencil sketch with wobbling lines\",\n category: \"sketch\",\n tier: \"free\",\n preview: \"📝\",\n parameters: [\n {\n id: \"strokeWeight\",\n name: \"Stroke Weight\",\n type: \"float\",\n default: 2.0,\n min: 0.5,\n max: 5.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"wobbleAmount\",\n name: \"Hand Tremor\",\n type: \"float\",\n default: 0.003,\n min: 0,\n max: 0.01,\n step: 0.001,\n ui: \"slider\",\n },\n {\n id: \"wobbleSpeed\",\n name: \"Tremor Speed\",\n type: \"float\",\n default: 2.0,\n min: 0.5,\n max: 5.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"inkDensity\",\n name: \"Ink Density\",\n type: \"float\",\n default: 0.8,\n min: 0.3,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"crosshatchAmount\",\n name: \"Cross-Hatching\",\n type: \"float\",\n default: 0.3,\n min: 0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"inkColor\",\n name: \"Ink Color\",\n type: \"color\",\n default: \"#1a1a1a\",\n ui: \"colorpicker\",\n },\n {\n id: \"paperColor\",\n name: \"Paper Color\",\n type: \"color\",\n default: \"#f5f2e8\",\n ui: \"colorpicker\",\n },\n ],\n vertexShader: `\n precision highp float;\n attribute vec3 position;\n attribute vec3 normal;\n attribute vec2 uv;\n \n uniform mat4 modelViewMatrix;\n uniform mat4 projectionMatrix;\n uniform mat3 normalMatrix;\n uniform mat3 uvTransform;\n uniform sampler2D displacementMap;\n uniform float displacementStrength;\n \n varying vec2 vUv;\n varying vec3 vNormal;\n varying vec3 vPosition;\n \n void main() {\n vec3 uvh = uvTransform * vec3(uv, 1.0);\n vUv = uvh.xy;\n \n float displacement = texture2D(displacementMap, vUv).r;\n float offset = (displacement - 0.5) * 2.0 * displacementStrength;\n vec3 displacedPosition = position + normal * offset;\n \n vNormal = normalize(normalMatrix * normal);\n vPosition = (modelViewMatrix * vec4(displacedPosition, 1.0)).xyz;\n \n gl_Position = projectionMatrix * modelViewMatrix * vec4(displacedPosition, 1.0);\n }\n `,\n fragmentShader: `\n precision highp float;\n \n varying vec2 vUv;\n varying vec3 vNormal;\n varying vec3 vPosition;\n \n uniform sampler2D diffuseMap;\n uniform float time;\n uniform float strokeWeight;\n uniform float wobbleAmount;\n uniform float wobbleSpeed;\n uniform float inkDensity;\n uniform float crosshatchAmount;\n uniform vec3 inkColor;\n uniform vec3 paperColor;\n uniform vec2 resolution;\n \n float random(vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n }\n \n float noise(vec2 st) {\n vec2 i = floor(st);\n vec2 f = fract(st);\n float a = random(i);\n float b = random(i + vec2(1.0, 0.0));\n float c = random(i + vec2(0.0, 1.0));\n float d = random(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 float sobelEdge(sampler2D tex, vec2 uv, float thickness) {\n vec2 texel = thickness / resolution;\n \n float tl = dot(texture2D(tex, uv + vec2(-texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float t = dot(texture2D(tex, uv + vec2(0.0, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float tr = dot(texture2D(tex, uv + vec2(texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float l = dot(texture2D(tex, uv + vec2(-texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float r = dot(texture2D(tex, uv + vec2(texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float bl = dot(texture2D(tex, uv + vec2(-texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float b = dot(texture2D(tex, uv + vec2(0.0, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float br = dot(texture2D(tex, 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 \n return sqrt(gx*gx + gy*gy);\n }\n \n float crossHatch(vec2 uv, float density, float t) {\n float wobble = noise(uv * 10.0 + t) * 0.1;\n float hatch1 = smoothstep(0.0, 0.1, fract((uv.x + uv.y + wobble) * 50.0 * density));\n float hatch2 = smoothstep(0.0, 0.1, fract((uv.x - uv.y + wobble) * 50.0 * density));\n return min(hatch1, hatch2);\n }\n \n void main() {\n vec2 wobble = vec2(\n noise(vUv * 10.0 + time * wobbleSpeed),\n noise(vUv * 10.0 + time * wobbleSpeed + 100.0)\n ) * wobbleAmount;\n vec2 uv = vUv + wobble;\n \n float edge = sobelEdge(diffuseMap, uv, strokeWeight);\n edge = smoothstep(0.1, 0.3, edge);\n \n vec3 color = texture2D(diffuseMap, uv).rgb;\n float lum = dot(color, vec3(0.299, 0.587, 0.114));\n float hatch = crossHatch(uv, 1.0 - lum, time);\n \n float inkAmount = max(edge, (1.0 - hatch) * (1.0 - lum) * crosshatchAmount);\n inkAmount *= inkDensity;\n \n vec3 finalColor = mix(paperColor, inkColor, inkAmount);\n \n gl_FragColor = vec4(finalColor, 1.0);\n }\n `,\n },\n {\n id: \"cartoon-cel-shade\",\n name: \"Cartoon Cel-Shade\",\n description: \"Anime-style cel-shading with bold outlines\",\n category: \"cartoon\",\n tier: \"basic\",\n preview: \"🎨\",\n parameters: [\n {\n id: \"colorLevels\",\n name: \"Color Levels\",\n type: \"int\",\n default: 4,\n min: 2,\n max: 8,\n step: 1,\n ui: \"slider\",\n },\n {\n id: \"outlineThickness\",\n name: \"Outline Thickness\",\n type: \"float\",\n default: 0.003,\n min: 0.001,\n max: 0.01,\n step: 0.001,\n ui: \"slider\",\n },\n {\n id: \"outlineColor\",\n name: \"Outline Color\",\n type: \"color\",\n default: \"#2d1b0e\",\n ui: \"colorpicker\",\n },\n {\n id: \"skinBase\",\n name: \"Skin Base\",\n type: \"color\",\n default: \"#ffe4c4\",\n ui: \"colorpicker\",\n },\n {\n id: \"skinShadow\",\n name: \"Skin Shadow\",\n type: \"color\",\n default: \"#e8b89d\",\n ui: \"colorpicker\",\n },\n {\n id: \"blushIntensity\",\n name: \"Blush Intensity\",\n type: \"float\",\n default: 0.3,\n min: 0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"sparkleIntensity\",\n name: \"Eye Sparkles\",\n type: \"float\",\n default: 0.7,\n min: 0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n ],\n vertexShader: `\n precision highp float;\n attribute vec3 position;\n attribute vec3 normal;\n attribute vec2 uv;\n \n uniform mat4 modelViewMatrix;\n uniform mat4 projectionMatrix;\n uniform mat3 normalMatrix;\n \n varying vec2 vUv;\n varying vec3 vNormal;\n varying vec3 vPosition;\n \n void main() {\n vUv = uv;\n vNormal = normalize(normalMatrix * normal);\n vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n precision highp float;\n \n varying vec2 vUv;\n varying vec3 vNormal;\n varying vec3 vPosition;\n \n uniform sampler2D diffuseMap;\n uniform float time;\n uniform int colorLevels;\n uniform float outlineThickness;\n uniform vec3 outlineColor;\n uniform vec3 skinBase;\n uniform vec3 skinShadow;\n uniform float blushIntensity;\n uniform float sparkleIntensity;\n uniform vec2 resolution;\n \n vec3 posterize(vec3 color, int levels) {\n float fl = float(levels);\n return floor(color * fl) / fl;\n }\n \n float edgeDetect(sampler2D tex, vec2 uv, float thickness) {\n vec2 texel = thickness / resolution;\n \n vec3 c = texture2D(tex, uv).rgb;\n vec3 n = texture2D(tex, uv + vec2(0.0, -texel.y)).rgb;\n vec3 s = texture2D(tex, uv + vec2(0.0, texel.y)).rgb;\n vec3 e = texture2D(tex, uv + vec2(texel.x, 0.0)).rgb;\n vec3 w = texture2D(tex, uv + vec2(-texel.x, 0.0)).rgb;\n \n float diff = length(c - n) + length(c - s) + length(c - e) + length(c - w);\n return smoothstep(0.1, 0.5, diff);\n }\n \n void main() {\n vec4 texColor = texture2D(diffuseMap, vUv);\n \n // Posterize\n vec3 posterized = posterize(texColor.rgb, colorLevels);\n \n // Simple cel shading\n vec3 lightDir = normalize(vec3(0.5, 0.5, 1.0));\n float NdotL = max(dot(vNormal, lightDir), 0.0);\n float shade = NdotL > 0.5 ? 1.0 : 0.7;\n \n vec3 color = posterized * shade;\n \n // Blend with skin tones\n float skinMask = smoothstep(0.3, 0.7, texColor.r) * (1.0 - smoothstep(0.7, 1.0, texColor.b));\n color = mix(color, mix(skinShadow, skinBase, shade), skinMask * 0.5);\n \n // Add blush\n float blushMask = smoothstep(0.4, 0.6, vUv.y) * (1.0 - smoothstep(0.6, 0.8, vUv.y));\n blushMask *= smoothstep(0.2, 0.4, abs(vUv.x - 0.5));\n color = mix(color, vec3(1.0, 0.6, 0.6), blushMask * blushIntensity);\n \n // Edge outline\n float edge = edgeDetect(diffuseMap, vUv, outlineThickness);\n color = mix(color, outlineColor, edge);\n \n // Sparkle effect\n float sparkle = sin(time * 3.0 + vUv.x * 20.0) * sin(time * 2.0 + vUv.y * 20.0);\n sparkle = smoothstep(0.9, 1.0, sparkle) * sparkleIntensity;\n color += vec3(sparkle);\n \n gl_FragColor = vec4(color, texColor.a);\n }\n `,\n },\n {\n id: \"surreal-glitch\",\n name: \"Surreal Glitch\",\n description: \"Digital glitch art with RGB splitting\",\n category: \"surreal\",\n tier: \"pro\",\n preview: \"🌀\",\n parameters: [\n {\n id: \"glitchAmount\",\n name: \"Glitch Intensity\",\n type: \"float\",\n default: 0.5,\n min: 0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"glitchSpeed\",\n name: \"Glitch Speed\",\n type: \"float\",\n default: 1.0,\n min: 0.1,\n max: 5.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"rgbSplitAmount\",\n name: \"RGB Split\",\n type: \"float\",\n default: 0.01,\n min: 0,\n max: 0.05,\n step: 0.002,\n ui: \"slider\",\n },\n {\n id: \"scanlineIntensity\",\n name: \"Scanlines\",\n type: \"float\",\n default: 0.3,\n min: 0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"waveDistortion\",\n name: \"Wave Distortion\",\n type: \"float\",\n default: 0.02,\n min: 0,\n max: 0.1,\n step: 0.005,\n ui: \"slider\",\n },\n {\n id: \"colorShift\",\n name: \"Color Shift\",\n type: \"float\",\n default: 0.0,\n min: -1.0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"saturationBoost\",\n name: \"Saturation\",\n type: \"float\",\n default: 1.2,\n min: 0,\n max: 3.0,\n step: 0.1,\n ui: \"slider\",\n },\n ],\n vertexShader: `\n precision highp float;\n attribute vec3 position;\n attribute vec3 normal;\n attribute vec2 uv;\n \n uniform mat4 modelViewMatrix;\n uniform mat4 projectionMatrix;\n \n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n precision highp float;\n \n varying vec2 vUv;\n \n uniform sampler2D diffuseMap;\n uniform float time;\n uniform float glitchAmount;\n uniform float glitchSpeed;\n uniform float rgbSplitAmount;\n uniform float scanlineIntensity;\n uniform float waveDistortion;\n uniform float colorShift;\n uniform float saturationBoost;\n uniform vec2 resolution;\n \n float random(vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n }\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 float t = time * glitchSpeed;\n \n // Glitch trigger\n float glitchTrigger = step(0.9, random(vec2(floor(t * 10.0), 0.0)));\n float activeGlitch = glitchTrigger * glitchAmount;\n \n // Wave distortion\n vec2 uv = vUv;\n uv.x += sin(uv.y * 20.0 + t) * waveDistortion * activeGlitch;\n \n // Block glitch\n float blockY = floor(uv.y * 20.0) / 20.0;\n float blockGlitch = step(0.95, random(vec2(blockY, floor(t * 5.0)))) * activeGlitch;\n uv.x += blockGlitch * 0.1 * (random(vec2(blockY, t)) - 0.5);\n \n // RGB split\n float splitAmount = rgbSplitAmount * (1.0 + activeGlitch * 3.0);\n float r = texture2D(diffuseMap, uv + vec2(splitAmount, 0.0)).r;\n float g = texture2D(diffuseMap, uv).g;\n float b = texture2D(diffuseMap, uv - vec2(splitAmount, 0.0)).b;\n vec3 color = vec3(r, g, b);\n \n // Scanlines\n float scanline = sin(vUv.y * resolution.y * 2.0) * 0.5 + 0.5;\n scanline = mix(1.0, scanline, scanlineIntensity * (0.5 + activeGlitch * 0.5));\n color *= scanline;\n \n // Color shift and saturation\n vec3 hsv = rgb2hsv(color);\n hsv.x = fract(hsv.x + colorShift);\n hsv.y = clamp(hsv.y * saturationBoost, 0.0, 1.0);\n color = hsv2rgb(hsv);\n \n // Vignette glitch\n float vignette = 1.0 - length(vUv - 0.5) * activeGlitch;\n color *= vignette;\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"neon-wireframe\",\n name: \"Neon Wireframe\",\n description: \"Glowing neon edges on dark background\",\n category: \"abstract\",\n tier: \"basic\",\n preview: \"💡\",\n parameters: [\n {\n id: \"neonColor1\",\n name: \"Primary Neon\",\n type: \"color\",\n default: \"#00ffff\",\n ui: \"colorpicker\",\n },\n {\n id: \"neonColor2\",\n name: \"Secondary Neon\",\n type: \"color\",\n default: \"#ff00ff\",\n ui: \"colorpicker\",\n },\n {\n id: \"glowIntensity\",\n name: \"Glow Intensity\",\n type: \"float\",\n default: 2.0,\n min: 0.5,\n max: 5.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"lineThickness\",\n name: \"Line Thickness\",\n type: \"float\",\n default: 0.002,\n min: 0.001,\n max: 0.005,\n step: 0.0005,\n ui: \"slider\",\n },\n {\n id: \"pulseSpeed\",\n name: \"Pulse Speed\",\n type: \"float\",\n default: 1.0,\n min: 0.1,\n max: 3.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"backgroundColor\",\n name: \"Background\",\n type: \"color\",\n default: \"#0a0a0f\",\n ui: \"colorpicker\",\n },\n {\n id: \"gridOverlay\",\n name: \"Grid Overlay\",\n type: \"float\",\n default: 0.2,\n min: 0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n ],\n vertexShader: `\n precision highp float;\n attribute vec3 position;\n attribute vec3 normal;\n attribute vec2 uv;\n \n uniform mat4 modelViewMatrix;\n uniform mat4 projectionMatrix;\n uniform mat3 normalMatrix;\n \n varying vec2 vUv;\n varying vec3 vNormal;\n \n void main() {\n vUv = uv;\n vNormal = normalize(normalMatrix * normal);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n precision highp float;\n \n varying vec2 vUv;\n varying vec3 vNormal;\n \n uniform sampler2D diffuseMap;\n uniform float time;\n uniform vec3 neonColor1;\n uniform vec3 neonColor2;\n uniform float glowIntensity;\n uniform float lineThickness;\n uniform float pulseSpeed;\n uniform vec3 backgroundColor;\n uniform float gridOverlay;\n uniform vec2 resolution;\n \n float edgeDetect(sampler2D tex, vec2 uv, float thickness) {\n vec2 texel = thickness / resolution;\n \n float tl = dot(texture2D(tex, uv + vec2(-texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float t = dot(texture2D(tex, uv + vec2(0.0, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float tr = dot(texture2D(tex, uv + vec2(texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float l = dot(texture2D(tex, uv + vec2(-texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float r = dot(texture2D(tex, uv + vec2(texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float bl = dot(texture2D(tex, uv + vec2(-texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float b = dot(texture2D(tex, uv + vec2(0.0, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float br = dot(texture2D(tex, 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 \n return sqrt(gx*gx + gy*gy);\n }\n \n void main() {\n // Edge detection\n float edge = edgeDetect(diffuseMap, vUv, lineThickness);\n edge = smoothstep(0.1, 0.5, edge);\n \n // Pulsing\n float pulse = sin(time * pulseSpeed) * 0.3 + 0.7;\n \n // Color mixing based on position\n float colorMix = sin(vUv.x * 5.0 + time) * 0.5 + 0.5;\n vec3 neonColor = mix(neonColor1, neonColor2, colorMix);\n \n // Glow effect\n vec3 glow = neonColor * edge * glowIntensity * pulse;\n \n // Add bloom\n for(float i = 1.0; i <= 4.0; i++) {\n float offset = i * lineThickness * 2.0;\n float e1 = edgeDetect(diffuseMap, vUv + vec2(offset, 0.0), lineThickness);\n float e2 = edgeDetect(diffuseMap, vUv - vec2(offset, 0.0), lineThickness);\n float e3 = edgeDetect(diffuseMap, vUv + vec2(0.0, offset), lineThickness);\n float e4 = edgeDetect(diffuseMap, vUv - vec2(0.0, offset), lineThickness);\n glow += neonColor * (e1 + e2 + e3 + e4) * 0.25 * (1.0 / i) * pulse;\n }\n \n // Grid overlay\n float gridX = smoothstep(0.98, 1.0, fract(vUv.x * 50.0));\n float gridY = smoothstep(0.98, 1.0, fract(vUv.y * 50.0));\n float grid = max(gridX, gridY) * gridOverlay;\n vec3 gridColor = mix(neonColor1, neonColor2, 0.5) * 0.3;\n \n // Combine\n vec3 color = backgroundColor + glow + gridColor * grid;\n \n // Fresnel edge highlight\n float fresnel = pow(1.0 - abs(dot(vNormal, vec3(0.0, 0.0, 1.0))), 3.0);\n color += neonColor * fresnel * 0.5 * pulse;\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"watercolor\",\n name: \"Watercolor\",\n description: \"Soft watercolor painting effect\",\n category: \"sketch\",\n tier: \"pro\",\n preview: \"🎨\",\n parameters: [\n {\n id: \"wetness\",\n name: \"Wetness\",\n type: \"float\",\n default: 0.5,\n min: 0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"bleedAmount\",\n name: \"Color Bleed\",\n type: \"float\",\n default: 0.3,\n min: 0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"paperTexture\",\n name: \"Paper Texture\",\n type: \"float\",\n default: 0.4,\n min: 0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"edgeDarkening\",\n name: \"Edge Darkening\",\n type: \"float\",\n default: 0.3,\n min: 0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"colorVibrancy\",\n name: \"Color Vibrancy\",\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: \"granulation\",\n name: \"Granulation\",\n type: \"float\",\n default: 0.2,\n min: 0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n ],\n vertexShader: `\n precision highp float;\n attribute vec3 position;\n attribute vec3 normal;\n attribute vec2 uv;\n \n uniform mat4 modelViewMatrix;\n uniform mat4 projectionMatrix;\n \n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n precision highp float;\n \n varying vec2 vUv;\n \n uniform sampler2D diffuseMap;\n uniform float time;\n uniform float wetness;\n uniform float bleedAmount;\n uniform float paperTexture;\n uniform float edgeDarkening;\n uniform float colorVibrancy;\n uniform float granulation;\n uniform vec2 resolution;\n \n float random(vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n }\n \n float noise(vec2 st) {\n vec2 i = floor(st);\n vec2 f = fract(st);\n float a = random(i);\n float b = random(i + vec2(1.0, 0.0));\n float c = random(i + vec2(0.0, 1.0));\n float d = random(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 float fbm(vec2 st) {\n float value = 0.0;\n float amplitude = 0.5;\n for(int i = 0; i < 5; i++) {\n value += amplitude * noise(st);\n st *= 2.0;\n amplitude *= 0.5;\n }\n return value;\n }\n \n void main() {\n vec2 texel = 1.0 / resolution;\n \n // Paper texture noise\n float paper = fbm(vUv * 50.0) * paperTexture;\n \n // Color bleeding / blur\n vec3 color = vec3(0.0);\n float blurSize = bleedAmount * 0.01;\n for(int x = -2; x <= 2; x++) {\n for(int y = -2; y <= 2; y++) {\n vec2 offset = vec2(float(x), float(y)) * blurSize;\n offset += vec2(noise(vUv * 20.0 + time), noise(vUv * 20.0 + time + 100.0)) * blurSize * wetness;\n color += texture2D(diffuseMap, vUv + offset).rgb;\n }\n }\n color /= 25.0;\n \n // Edge darkening\n float edge = 0.0;\n for(int x = -1; x <= 1; x++) {\n for(int y = -1; y <= 1; y++) {\n vec2 offset = vec2(float(x), float(y)) * texel * 2.0;\n vec3 sample1 = texture2D(diffuseMap, vUv + offset).rgb;\n edge += length(color - sample1);\n }\n }\n edge = smoothstep(0.0, 0.5, edge / 9.0) * edgeDarkening;\n color *= (1.0 - edge * 0.5);\n \n // Granulation\n float gran = noise(vUv * 100.0) * granulation;\n color = mix(color, color * (1.0 - gran), gran);\n \n // Apply paper texture\n color = mix(color, color * (0.9 + paper * 0.2), paperTexture);\n \n // Boost vibrancy\n vec3 gray = vec3(dot(color, vec3(0.299, 0.587, 0.114)));\n color = mix(gray, color, colorVibrancy);\n \n // Soft white blend for watercolor look\n color = mix(color, vec3(1.0), 0.1 * wetness);\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"pixel-art\",\n name: \"Pixel Art\",\n description: \"Retro pixelated style\",\n category: \"abstract\",\n tier: \"free\",\n preview: \"👾\",\n parameters: [\n {\n id: \"pixelSize\",\n name: \"Pixel Size\",\n type: \"int\",\n default: 8,\n min: 2,\n max: 32,\n step: 1,\n ui: \"slider\",\n },\n {\n id: \"colorPalette\",\n name: \"Color Palette\",\n type: \"int\",\n default: 16,\n min: 4,\n max: 64,\n step: 4,\n ui: \"slider\",\n },\n {\n id: \"ditherAmount\",\n name: \"Dithering\",\n type: \"float\",\n default: 0.5,\n min: 0,\n max: 1.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"outlinePixels\",\n name: \"Outline\",\n type: \"bool\",\n default: true,\n ui: \"toggle\",\n },\n {\n id: \"scanlines\",\n name: \"CRT Scanlines\",\n type: \"bool\",\n default: false,\n ui: \"toggle\",\n },\n ],\n vertexShader: `\n precision highp float;\n attribute vec3 position;\n attribute vec2 uv;\n \n uniform mat4 modelViewMatrix;\n uniform mat4 projectionMatrix;\n \n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n precision highp float;\n \n varying vec2 vUv;\n \n uniform sampler2D diffuseMap;\n uniform float time;\n uniform int pixelSize;\n uniform int colorPalette;\n uniform float ditherAmount;\n uniform bool outlinePixels;\n uniform bool scanlines;\n uniform vec2 resolution;\n \n float dither8x8(vec2 position, float brightness) {\n int x = int(mod(position.x, 8.0));\n int y = int(mod(position.y, 8.0));\n int index = x + y * 8;\n float limit = 0.0;\n \n // Simplified Bayer matrix\n if (x < 4) {\n if (y < 4) {\n limit = float(x + y * 4) / 16.0;\n } else {\n limit = float(x + (y - 4) * 4 + 8) / 16.0;\n }\n } else {\n if (y < 4) {\n limit = float((x - 4) + y * 4 + 8) / 16.0;\n } else {\n limit = float((x - 4) + (y - 4) * 4) / 16.0;\n }\n }\n \n return brightness < limit ? 0.0 : 1.0;\n }\n \n vec3 quantizeColor(vec3 color, float levels) {\n return floor(color * levels + 0.5) / levels;\n }\n \n void main() {\n // Pixelate\n float pxSize = float(pixelSize);\n vec2 pixelUv = floor(vUv * resolution / pxSize) * pxSize / resolution;\n \n vec4 texColor = texture2D(diffuseMap, pixelUv);\n vec3 color = texColor.rgb;\n \n // Quantize colors\n float levels = float(colorPalette);\n \n // Dithering\n if (ditherAmount > 0.0) {\n vec2 pixelPos = vUv * resolution / pxSize;\n vec3 dithered = color;\n dithered.r = dither8x8(pixelPos, color.r) > 0.5 ? \n ceil(color.r * levels) / levels : \n floor(color.r * levels) / levels;\n dithered.g = dither8x8(pixelPos + vec2(3.0, 0.0), color.g) > 0.5 ? \n ceil(color.g * levels) / levels : \n floor(color.g * levels) / levels;\n dithered.b = dither8x8(pixelPos + vec2(0.0, 3.0), color.b) > 0.5 ? \n ceil(color.b * levels) / levels : \n floor(color.b * levels) / levels;\n color = mix(quantizeColor(color, levels), dithered, ditherAmount);\n } else {\n color = quantizeColor(color, levels);\n }\n \n // Pixel outline\n if (outlinePixels) {\n vec2 pixelCenter = (floor(vUv * resolution / pxSize) + 0.5) * pxSize / resolution;\n vec2 toCenter = abs(vUv - pixelCenter) * resolution / pxSize;\n float outline = step(0.4, max(toCenter.x, toCenter.y));\n color *= (1.0 - outline * 0.2);\n }\n \n // CRT scanlines\n if (scanlines) {\n float scanline = sin(vUv.y * resolution.y * 3.14159) * 0.5 + 0.5;\n color *= 0.8 + scanline * 0.2;\n }\n \n gl_FragColor = vec4(color, texColor.a);\n }\n `,\n },\n ],\n};\n\n// ============================================================================\n// TEETH AND MOUTH SVG DATA\n// ============================================================================\n\nconst TEETH_SVG =\n ``;\n\n// ============================================================================\n// STYLES\n// ============================================================================\n\n// ============================================================================\n// HTML TEMPLATE\n// ============================================================================\n\nconst FACELAB_HTML = `\n

\n \n

\n \n \n \n \n

\n \n

\n \n \n

\n Select a style to adjust parameters\n

\n \n \n

Tracking

\n \n

\n Face Tracking\n

\n \n

\n Hand Tracking\n

\n \n

\n Pose Tracking\n

\n \n

\n Smoothing\n 0.5\n

\n \n

Performance

\n \n

\n Target FPS\n 30\n

\n \n

\n Adaptive Quality\n

\n \n

Output

\n \n

\n Resolution\n

\n \n

\n Show Watermark\n

\n \n

License

\n \n

Trial

\n Limited features enabled\n

\n \n

\n \n \n

\n \n

Initializing Face Lab...

\n \n

\n FPS:\n --\n

\n Inference:\n -- ms\n

\n Render:\n -- ms\n

\n Latency:\n -- ms\n

\n \n

Face Lab 2027 • Trial Version

\n \n

\n \n \n \n \n \n

\n\n\n\n\n\n

\n`;\n\n// ============================================================================\n// CLIENT SCRIPT\n// ============================================================================\n\nconst FACELAB_CLIENT_SCRIPT = `\nimport * as THREE from 'three';\nimport { MindARThree } from 'mindar-face-three';\n\n// ============================================================================\n// CONFIGURATION & STATE\n// ============================================================================\n\nconst STORAGE_KEY = 'facelab-2027-config';\n\nconst TIER_FEATURES = {\n trial: 0b00000000000000000000000000010001,\n basic: 0b00000000000000000010001100110001,\n pro: 0b00000000000000000110011101111111,\n enterprise: 0b00000000000000001111111111111111,\n};\n\nconst FEATURE_FLAGS = {\n faceTracking: 0,\n handTracking: 1,\n poseTracking: 2,\n multiPerson: 3,\n resolution720p: 4,\n resolution1080p: 5,\n resolution4K: 6,\n noWatermark: 7,\n recording: 8,\n virtualCamera: 9,\n ndiOutput: 10,\n apiAccess: 11,\n customStyleImport: 12,\n stylePack1: 13,\n stylePack2: 14,\n stylePack3: 15,\n};\n\nclass AppState {\n constructor() {\n this.config = null;\n this.currentStyle = null;\n this.styleParams = {};\n this.license = {\n valid: false,\n tier: 'trial',\n features: TIER_FEATURES.trial,\n expiresAt: null\n };\n this.tracking = {\n isActive: false,\n faceDetected: false,\n fps: 0,\n inferenceTime: 0,\n renderTime: 0,\n latency: 0\n };\n this.recording = {\n isRecording: false,\n mediaRecorder: null,\n chunks: []\n };\n this.flipHorizontal = true;\n }\n \n hasFeature(feature) {\n const bit = FEATURE_FLAGS[feature];\n if (bit === undefined) return false;\n return (this.license.features & (1 << bit)) !== 0;\n }\n \n saveToStorage() {\n const data = {\n currentStyle: this.currentStyle,\n styleParams: this.styleParams,\n license: this.license,\n flipHorizontal: this.flipHorizontal\n };\n localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n }\n \n loadFromStorage() {\n try {\n const data = JSON.parse(localStorage.getItem(STORAGE_KEY));\n if (data) {\n this.currentStyle = data.currentStyle;\n this.styleParams = data.styleParams || {};\n this.license = data.license || this.license;\n this.flipHorizontal = data.flipHorizontal ?? true;\n }\n } catch (e) {\n console.warn('Failed to load state from storage:', e);\n }\n }\n}\n\nconst state = new AppState();\n\n// ============================================================================\n// LICENSE VERIFICATION (Offline-capable)\n// ============================================================================\n\nclass LicenseVerifier {\n // Ed25519 public key (32 bytes) - embedded in application\n // In production, this would be your actual public key\n static PUBLIC_KEY = new Uint8Array([\n 0x7d, 0x4d, 0x0e, 0x7f, 0x6e, 0x85, 0x1a, 0x0c,\n 0x38, 0x57, 0x8d, 0x2c, 0x9b, 0x4a, 0x3f, 0x1e,\n 0x8b, 0x2d, 0x6c, 0x5a, 0x9e, 0x7f, 0x4d, 0x3c,\n 0x1a, 0x8b, 0x5e, 0x2d, 0x9c, 0x6f, 0x4a, 0x3b\n ]);\n \n static base64urlDecode(str) {\n str = str.replace(/-/g, '+').replace(/_/g, '/');\n while (str.length % 4) str += '=';\n const binary = atob(str);\n const bytes = new Uint8Array(binary.length);\n for (let i = 0; i < binary.length; i++) {\n bytes[i] = binary.charCodeAt(i);\n }\n return bytes;\n }\n \n static async verify(tokenString) {\n try {\n // Remove formatting\n const cleanToken = tokenString.replace(/-/g, '').trim();\n \n // For demo purposes, accept special demo tokens\n if (cleanToken === 'DEMO' || cleanToken === 'DEMOLICENSE') {\n return {\n valid: true,\n tier: 'pro',\n features: TIER_FEATURES.pro,\n expiresAt: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)\n };\n }\n \n // Decode token\n const token = this.base64urlDecode(cleanToken);\n \n if (token.length !== 93) {\n return { valid: false, reason: 'INVALID_LENGTH' };\n }\n \n const payload = token.slice(0, 29);\n const signature = token.slice(29);\n \n // Parse payload\n const view = new DataView(payload.buffer, payload.byteOffset);\n const header = payload[0];\n const version = header >> 4;\n const tierNum = header & 0x0F;\n const issuedAt = view.getUint32(1, false);\n const expiresAt = view.getUint32(5, false);\n const features = view.getUint32(9, false);\n \n // Check version\n if (version > 1) {\n return { valid: false, reason: 'UNSUPPORTED_VERSION' };\n }\n \n // Check expiration\n const now = Math.floor(Date.now() / 1000);\n if (expiresAt !== 0 && expiresAt < now) {\n return { valid: false, reason: 'EXPIRED' };\n }\n \n // In production, verify Ed25519 signature here\n // For demo, we skip actual signature verification\n \n const tiers = ['trial', 'basic', 'pro', 'enterprise'];\n \n return {\n valid: true,\n tier: tiers[tierNum] || 'trial',\n features: features,\n expiresAt: expiresAt === 0 ? null : new Date(expiresAt * 1000)\n };\n } catch (e) {\n console.error('License verification error:', e);\n return { valid: false, reason: 'PARSE_ERROR' };\n }\n }\n}\n\n// ============================================================================\n// UI UTILITIES\n// ============================================================================\n\nfunction showToast(message, type = 'info') {\n const container = document.getElementById('toast-container');\n const toast = document.createElement('div');\n toast.className = \\`toast \\${type}\\`;\n \n const icons = { success: '✓', error: '✗', warning: '⚠', info: 'ℹ' };\n toast.innerHTML = \\`\\${icons[type] || ''}\\${message}\\`;\n \n container.appendChild(toast);\n \n setTimeout(() => {\n toast.style.animation = 'slideIn 0.3s ease reverse';\n setTimeout(() => toast.remove(), 300);\n }, 3000);\n}\n\nfunction setLoadingState(isLoading, text = 'Loading...') {\n const overlay = document.getElementById('loading-overlay');\n const loadingText = document.getElementById('loading-text');\n \n overlay.style.display = isLoading ? 'flex' : 'none';\n loadingText.textContent = text;\n}\n\nfunction updateStats() {\n document.getElementById('stats-fps').textContent = state.tracking.fps.toFixed(0);\n document.getElementById('stats-inference').textContent = state.tracking.inferenceTime.toFixed(1) + ' ms';\n document.getElementById('stats-render').textContent = state.tracking.renderTime.toFixed(1) + ' ms';\n document.getElementById('stats-latency').textContent = state.tracking.latency.toFixed(0) + ' ms';\n document.getElementById('fps-counter').textContent = state.tracking.fps.toFixed(0) + ' FPS';\n \n // Update status indicator\n const statusDot = document.getElementById('tracking-status');\n const statusText = document.getElementById('tracking-status-text');\n \n if (!state.tracking.isActive) {\n statusDot.className = 'status-dot error';\n statusText.textContent = 'Not tracking';\n } else if (!state.tracking.faceDetected) {\n statusDot.className = 'status-dot warning';\n statusText.textContent = 'No face detected';\n } else {\n statusDot.className = 'status-dot';\n statusText.textContent = 'Tracking active';\n }\n}\n\n// ============================================================================\n// STYLE SYSTEM\n// ============================================================================\n\nfunction populateStyleGrid(styles) {\n const grid = document.getElementById('style-grid');\n grid.innerHTML = '';\n \n styles.forEach(style => {\n const isLocked = !canUseStyle(style);\n const isActive = state.currentStyle === style.id;\n \n const card = document.createElement('div');\n card.className = \\`style-card\\${isActive ? ' active' : ''}\\${isLocked ? ' locked' : ''}\\`;\n card.dataset.styleId = style.id;\n \n card.innerHTML = \\`\n

\\${style.preview}

\\${style.name}

\\${style.tier}

\n \\`;\n \n card.addEventListener('click', () => {\n if (isLocked) {\n showToast(\\`\\${style.name} requires \\${style.tier} license\\`, 'warning');\n return;\n }\n selectStyle(style.id);\n });\n \n grid.appendChild(card);\n });\n}\n\nfunction canUseStyle(style) {\n if (style.tier === 'free') return true;\n if (style.tier === 'basic') return ['basic', 'pro', 'enterprise'].includes(state.license.tier);\n if (style.tier === 'pro') return ['pro', 'enterprise'].includes(state.license.tier);\n if (style.tier === 'enterprise') return state.license.tier === 'enterprise';\n return false;\n}\n\nfunction selectStyle(styleId) {\n const style = state.config.styles.find(s => s.id === styleId);\n if (!style) return;\n \n // Update state\n state.currentStyle = styleId;\n \n // Initialize parameters if not set\n if (!state.styleParams[styleId]) {\n state.styleParams[styleId] = {};\n style.parameters.forEach(param => {\n state.styleParams[styleId][param.id] = param.default;\n });\n }\n \n // Update UI\n document.querySelectorAll('.style-card').forEach(card => {\n card.classList.toggle('active', card.dataset.styleId === styleId);\n });\n \n // Populate parameter controls\n populateParameterControls(style);\n \n // Update shader\n if (window.faceLab) {\n window.faceLab.setStyle(style, state.styleParams[styleId]);\n }\n \n state.saveToStorage();\n showToast(\\`Style: \\${style.name}\\`, 'success');\n}\n\nfunction populateParameterControls(style) {\n const container = document.getElementById('style-parameters');\n container.innerHTML = \\`

\\${style.name} Settings

\\`;\n \n const params = state.styleParams[style.id] || {};\n \n style.parameters.forEach(param => {\n const value = params[param.id] ?? param.default;\n \n const group = document.createElement('div');\n group.className = 'control-group';\n \n if (param.ui === 'slider') {\n group.innerHTML = \\`\n

\n \\${param.name}\n \\${formatValue(value, param)}\n

\n \n \\`;\n \n const slider = group.querySelector('input');\n slider.addEventListener('input', (e) => {\n const newValue = param.type === 'int' ? parseInt(e.target.value) : parseFloat(e.target.value);\n updateParameter(style.id, param.id, newValue);\n document.getElementById(\\`value-\\${param.id}\\`).textContent = formatValue(newValue, param);\n });\n } else if (param.ui === 'toggle') {\n group.innerHTML = \\`\n

\n \\${param.name}\n

\n \\`;\n \n const toggle = group.querySelector('.toggle');\n toggle.addEventListener('click', () => {\n const newValue = !toggle.classList.contains('active');\n toggle.classList.toggle('active', newValue);\n updateParameter(style.id, param.id, newValue);\n });\n } else if (param.ui === 'colorpicker') {\n group.innerHTML = \\`\n

\n \\${param.name}\n

\n \n \n

\n \\`;\n \n const colorPicker = group.querySelector(\\`#color-\\${param.id}\\`);\n const colorInput = group.querySelector(\\`#param-\\${param.id}\\`);\n \n colorPicker.addEventListener('input', (e) => {\n colorInput.value = e.target.value;\n updateParameter(style.id, param.id, e.target.value);\n });\n \n colorInput.addEventListener('change', (e) => {\n colorPicker.value = e.target.value;\n updateParameter(style.id, param.id, e.target.value);\n });\n }\n \n container.appendChild(group);\n });\n}\n\nfunction formatValue(value, param) {\n if (param.type === 'int') return value.toString();\n if (param.type === 'float') return value.toFixed(param.step < 0.01 ? 3 : 2);\n return value;\n}\n\nfunction updateParameter(styleId, paramId, value) {\n if (!state.styleParams[styleId]) {\n state.styleParams[styleId] = {};\n }\n state.styleParams[styleId][paramId] = value;\n \n if (window.faceLab) {\n window.faceLab.updateParameter(paramId, value);\n }\n \n state.saveToStorage();\n}\n\n// ============================================================================\n// FACE TRACKING ENGINE\n// ============================================================================\n\nclass FaceLabEngine {\n constructor() {\n this.mindar = null;\n this.scene = null;\n this.camera = null;\n this.renderer = null;\n this.faceMesh = null;\n this.currentShaderMaterial = null;\n this.videoTexture = null;\n this.clock = new THREE.Clock();\n this.frameCount = 0;\n this.lastFpsUpdate = 0;\n this.isRunning = false;\n }\n \n async initialize() {\n setLoadingState(true, 'Initializing camera...');\n \n try {\n // Get canvas\n const canvas = document.getElementById('render-canvas');\n \n // Initialize MindAR\n this.mindar = new MindARThree({\n container: canvas.parentElement,\n });\n \n const { renderer, scene, camera } = this.mindar;\n this.renderer = renderer;\n this.scene = scene;\n this.camera = camera;\n \n // Configure renderer\n this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n this.renderer.setSize(canvas.parentElement.clientWidth, canvas.parentElement.clientHeight);\n this.renderer.outputColorSpace = THREE.SRGBColorSpace;\n \n setLoadingState(true, 'Loading face tracking model...');\n \n // Create face mesh anchor\n const anchor = this.mindar.addAnchor(168); // Nose tip landmark\n \n // Create initial material\n this.createShaderMaterial(state.config.styles[0]);\n \n // Create face geometry\n const geometry = new THREE.PlaneGeometry(1.5, 1.5, 64, 64);\n this.faceMesh = new THREE.Mesh(geometry, this.currentShaderMaterial);\n anchor.group.add(this.faceMesh);\n \n // Add lighting\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\n scene.add(ambientLight);\n \n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);\n directionalLight.position.set(0, 1, 1);\n scene.add(directionalLight);\n \n setLoadingState(true, 'Starting face tracking...');\n \n // Start\n await this.mindar.start();\n this.isRunning = true;\n \n // Set up video texture\n const video = this.mindar.video;\n this.videoTexture = new THREE.VideoTexture(video);\n this.videoTexture.minFilter = THREE.LinearFilter;\n this.videoTexture.magFilter = THREE.LinearFilter;\n \n if (this.currentShaderMaterial) {\n this.currentShaderMaterial.uniforms.diffuseMap.value = this.videoTexture;\n }\n \n // Animation loop\n this.animate();\n \n setLoadingState(false);\n showToast('Face tracking initialized', 'success');\n \n state.tracking.isActive = true;\n \n } catch (error) {\n console.error('Initialization error:', error);\n setLoadingState(false);\n showToast('Failed to initialize: ' + error.message, 'error');\n }\n }\n \n createShaderMaterial(style) {\n const uniforms = {\n diffuseMap: { value: null },\n displacementMap: { value: this.createDefaultDisplacementMap() },\n displacementStrength: { value: 0.0 },\n time: { value: 0 },\n resolution: { value: new THREE.Vector2(1920, 1080) },\n uvTransform: { value: new THREE.Matrix3() }\n };\n \n // Add style-specific uniforms\n style.parameters.forEach(param => {\n const value = state.styleParams[style.id]?.[param.id] ?? param.default;\n \n if (param.type === 'color') {\n uniforms[param.id] = { value: new THREE.Color(value) };\n } else if (param.type === 'bool') {\n uniforms[param.id] = { value: value };\n } else {\n uniforms[param.id] = { value: value };\n }\n });\n \n this.currentShaderMaterial = new THREE.ShaderMaterial({\n uniforms,\n vertexShader: style.vertexShader,\n fragmentShader: style.fragmentShader,\n transparent: true,\n side: THREE.DoubleSide\n });\n \n return this.currentShaderMaterial;\n }\n \n createDefaultDisplacementMap() {\n const size = 64;\n const data = new Uint8Array(size * size);\n data.fill(128); // Middle gray = no displacement\n \n const texture = new THREE.DataTexture(data, size, size, THREE.RedFormat);\n texture.needsUpdate = true;\n return texture;\n }\n \n setStyle(style, params) {\n this.createShaderMaterial(style);\n \n if (this.videoTexture) {\n this.currentShaderMaterial.uniforms.diffuseMap.value = this.videoTexture;\n }\n \n if (this.faceMesh) {\n this.faceMesh.material = this.currentShaderMaterial;\n }\n \n // Apply saved parameters\n Object.entries(params).forEach(([key, value]) => {\n this.updateParameter(key, value);\n });\n }\n \n updateParameter(paramId, value) {\n if (!this.currentShaderMaterial) return;\n \n const uniform = this.currentShaderMaterial.uniforms[paramId];\n if (!uniform) return;\n \n if (uniform.value instanceof THREE.Color) {\n uniform.value.set(value);\n } else {\n uniform.value = value;\n }\n }\n \n animate() {\n if (!this.isRunning) return;\n \n requestAnimationFrame(() => this.animate());\n \n const delta = this.clock.getDelta();\n const elapsed = this.clock.getElapsedTime();\n \n // Update time uniform\n if (this.currentShaderMaterial) {\n this.currentShaderMaterial.uniforms.time.value = elapsed;\n }\n \n // Update resolution\n if (this.currentShaderMaterial && this.renderer) {\n const size = this.renderer.getSize(new THREE.Vector2());\n this.currentShaderMaterial.uniforms.resolution.value.set(size.x, size.y);\n }\n \n // Render\n const renderStart = performance.now();\n this.renderer.render(this.scene, this.camera);\n state.tracking.renderTime = performance.now() - renderStart;\n \n // Update FPS\n this.frameCount++;\n const now = performance.now();\n if (now - this.lastFpsUpdate > 500) {\n state.tracking.fps = (this.frameCount / (now - this.lastFpsUpdate)) * 1000;\n this.frameCount = 0;\n this.lastFpsUpdate = now;\n updateStats();\n }\n \n // Check face detection\n state.tracking.faceDetected = this.faceMesh && this.faceMesh.visible;\n }\n \n async switchCamera() {\n if (!this.mindar) return;\n \n // MindAR doesn't have built-in camera switching\n // Would need to restart with different constraints\n showToast('Camera switching not yet implemented', 'warning');\n }\n \n takeScreenshot() {\n if (!this.renderer) return;\n \n const canvas = this.renderer.domElement;\n const link = document.createElement('a');\n link.download = \\`facelab-\\${Date.now()}.png\\`;\n link.href = canvas.toDataURL('image/png');\n link.click();\n \n showToast('Screenshot saved', 'success');\n }\n \n startRecording() {\n if (!state.hasFeature('recording')) {\n showToast('Recording requires Pro license', 'warning');\n return;\n }\n \n if (!this.renderer) return;\n \n const canvas = this.renderer.domElement;\n const stream = canvas.captureStream(30);\n \n state.recording.mediaRecorder = new MediaRecorder(stream, {\n mimeType: 'video/webm;codecs=vp9'\n });\n \n state.recording.chunks = [];\n \n state.recording.mediaRecorder.ondataavailable = (e) => {\n if (e.data.size > 0) {\n state.recording.chunks.push(e.data);\n }\n };\n \n state.recording.mediaRecorder.onstop = () => {\n const blob = new Blob(state.recording.chunks, { type: 'video/webm' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.download = \\`facelab-\\${Date.now()}.webm\\`;\n link.href = url;\n link.click();\n URL.revokeObjectURL(url);\n \n showToast('Recording saved', 'success');\n };\n \n state.recording.mediaRecorder.start();\n state.recording.isRecording = true;\n \n document.getElementById('btn-record').classList.add('recording');\n showToast('Recording started', 'info');\n }\n \n stopRecording() {\n if (state.recording.mediaRecorder && state.recording.isRecording) {\n state.recording.mediaRecorder.stop();\n state.recording.isRecording = false;\n \n document.getElementById('btn-record').classList.remove('recording');\n }\n }\n \n toggleRecording() {\n if (state.recording.isRecording) {\n this.stopRecording();\n } else {\n this.startRecording();\n }\n }\n \n toggleFullscreen() {\n const container = document.querySelector('.canvas-container');\n \n if (document.fullscreenElement) {\n document.exitFullscreen();\n } else {\n container.requestFullscreen();\n }\n }\n \n flipHorizontal() {\n state.flipHorizontal = !state.flipHorizontal;\n \n if (this.faceMesh) {\n this.faceMesh.scale.x = state.flipHorizontal ? -1 : 1;\n }\n \n state.saveToStorage();\n showToast(state.flipHorizontal ? 'Mirrored' : 'Normal', 'info');\n }\n \n destroy() {\n this.isRunning = false;\n \n if (this.mindar) {\n this.mindar.stop();\n }\n \n if (this.renderer) {\n this.renderer.dispose();\n }\n }\n}\n\n// ============================================================================\n// EVENT HANDLERS\n// ============================================================================\n\nfunction setupEventListeners() {\n // Tab switching\n document.querySelectorAll('.tab-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n const tab = btn.dataset.tab;\n \n document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));\n document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));\n \n btn.classList.add('active');\n document.getElementById(\\`panel-\\${tab}\\`).classList.add('active');\n });\n });\n \n // Settings toggles\n document.querySelectorAll('.toggle[data-setting]').forEach(toggle => {\n toggle.addEventListener('click', () => {\n const setting = toggle.dataset.setting;\n const isActive = !toggle.classList.contains('active');\n toggle.classList.toggle('active', isActive);\n \n // Apply setting\n switch(setting) {\n case 'enableFace':\n state.config.tracking.enableFace = isActive;\n break;\n case 'enableHands':\n if (!state.hasFeature('handTracking') && isActive) {\n toggle.classList.remove('active');\n showToast('Hand tracking requires Pro license', 'warning');\n return;\n }\n state.config.tracking.enableHands = isActive;\n break;\n case 'enablePose':\n if (!state.hasFeature('poseTracking') && isActive) {\n toggle.classList.remove('active');\n showToast('Pose tracking requires Pro license', 'warning');\n return;\n }\n state.config.tracking.enablePose = isActive;\n break;\n case 'adaptiveQuality':\n state.config.performance.adaptiveQuality = isActive;\n break;\n case 'watermark':\n if (!state.hasFeature('noWatermark') && !isActive) {\n toggle.classList.add('active');\n showToast('Removing watermark requires Basic+ license', 'warning');\n return;\n }\n state.config.output.watermark = isActive;\n document.getElementById('watermark').style.display = isActive ? 'block' : 'none';\n break;\n }\n });\n });\n \n // Smoothing slider\n document.getElementById('smoothing-slider')?.addEventListener('input', (e) => {\n const value = parseFloat(e.target.value);\n state.config.tracking.smoothing = value;\n document.getElementById('smoothing-value').textContent = value.toFixed(2);\n });\n \n // FPS target slider\n document.getElementById('fps-target-slider')?.addEventListener('input', (e) => {\n const value = parseInt(e.target.value);\n state.config.performance.targetFps = value;\n document.getElementById('fps-target-value').textContent = value;\n });\n \n // Resolution select\n document.getElementById('resolution-select')?.addEventListener('change', (e) => {\n const value = e.target.value;\n if (value === '4k' && !state.hasFeature('resolution4K')) {\n e.target.value = state.config.output.resolution;\n showToast('4K output requires Enterprise license', 'warning');\n return;\n }\n state.config.output.resolution = value;\n });\n \n // Overlay controls\n document.getElementById('btn-camera')?.addEventListener('click', () => {\n window.faceLab?.switchCamera();\n });\n \n document.getElementById('btn-screenshot')?.addEventListener('click', () => {\n window.faceLab?.takeScreenshot();\n });\n \n document.getElementById('btn-record')?.addEventListener('click', () => {\n window.faceLab?.toggleRecording();\n });\n \n document.getElementById('btn-fullscreen')?.addEventListener('click', () => {\n window.faceLab?.toggleFullscreen();\n });\n \n document.getElementById('btn-flip')?.addEventListener('click', () => {\n window.faceLab?.flipHorizontal();\n });\n \n // License modal\n document.getElementById('btn-activate-license')?.addEventListener('click', () => {\n document.getElementById('license-modal').classList.add('active');\n });\n \n document.getElementById('modal-close')?.addEventListener('click', () => {\n document.getElementById('license-modal').classList.remove('active');\n });\n \n document.getElementById('btn-cancel-license')?.addEventListener('click', () => {\n document.getElementById('license-modal').classList.remove('active');\n });\n \n document.getElementById('btn-submit-license')?.addEventListener('click', async () => {\n const input = document.getElementById('license-input');\n const token = input.value.trim();\n \n if (!token) {\n input.classList.add('invalid');\n showToast('Please enter a license key', 'error');\n return;\n }\n \n const result = await LicenseVerifier.verify(token);\n \n if (result.valid) {\n input.classList.remove('invalid');\n input.classList.add('valid');\n \n state.license = result;\n state.saveToStorage();\n \n updateLicenseUI();\n \n document.getElementById('license-modal').classList.remove('active');\n showToast(\\`License activated: \\${result.tier.toUpperCase()}\\`, 'success');\n \n // Refresh style grid to unlock styles\n populateStyleGrid(state.config.styles);\n } else {\n input.classList.remove('valid');\n input.classList.add('invalid');\n showToast(\\`Invalid license: \\${result.reason}\\`, 'error');\n }\n });\n \n // Format license input\n document.getElementById('license-input')?.addEventListener('input', (e) => {\n let value = e.target.value.replace(/[^A-Za-z0-9]/g, '').toUpperCase();\n let formatted = value.match(/.{1,4}/g)?.join('-') || value;\n if (formatted.length > 29) formatted = formatted.slice(0, 29);\n e.target.value = formatted;\n e.target.classList.remove('valid', 'invalid');\n });\n \n // Window resize\n window.addEventListener('resize', () => {\n if (window.faceLab?.renderer) {\n const container = document.querySelector('.canvas-container');\n window.faceLab.renderer.setSize(container.clientWidth, container.clientHeight);\n }\n });\n}\n\nfunction updateLicenseUI() {\n document.getElementById('license-tier').textContent = state.license.tier.charAt(0).toUpperCase() + state.license.tier.slice(1);\n \n // Update feature icons in modal\n const updateFeature = (id, enabled) => {\n const el = document.getElementById(id);\n if (el) {\n el.className = \\`feature-icon \\${enabled ? 'enabled' : 'disabled'}\\`;\n el.textContent = enabled ? '✓' : '✗';\n }\n };\n \n updateFeature('feature-hands', state.hasFeature('handTracking'));\n updateFeature('feature-pose', state.hasFeature('poseTracking'));\n updateFeature('feature-watermark', state.hasFeature('noWatermark'));\n updateFeature('feature-4k', state.hasFeature('resolution4K'));\n updateFeature('feature-recording', state.hasFeature('recording'));\n \n // Update watermark visibility\n const watermarkEl = document.getElementById('watermark');\n if (watermarkEl) {\n watermarkEl.style.display = state.hasFeature('noWatermark') && !state.config.output.watermark ? 'none' : 'block';\n }\n}\n\n// ============================================================================\n// INITIALIZATION\n// ============================================================================\n\nasync function init() {\n console.log('Face Lab 2027 initializing...');\n \n // Load config\n try {\n const response = await fetch('/api/config');\n state.config = await response.json();\n } catch (e) {\n console.warn('Failed to load config, using defaults');\n state.config = ${JSON.stringify(DEFAULT_CONFIG)};\n }\n \n // Load saved state\n state.loadFromStorage();\n \n // Apply default style if none selected\n if (!state.currentStyle) {\n state.currentStyle = state.config.defaultStyle;\n }\n \n // Setup UI\n setupEventListeners();\n populateStyleGrid(state.config.styles);\n updateLicenseUI();\n \n // Select initial style\n const initialStyle = state.config.styles.find(s => s.id === state.currentStyle);\n if (initialStyle) {\n populateParameterControls(initialStyle);\n document.querySelector(\\`.style-card[data-style-id=\"\\${state.currentStyle}\"]\\`)?.classList.add('active');\n }\n \n // Initialize engine\n window.faceLab = new FaceLabEngine();\n await window.faceLab.initialize();\n \n // Apply saved style\n if (initialStyle) {\n window.faceLab.setStyle(initialStyle, state.styleParams[state.currentStyle] || {});\n }\n \n // Apply flip state\n if (state.flipHorizontal && window.faceLab.faceMesh) {\n window.faceLab.faceMesh.scale.x = -1;\n }\n}\n\n// Start\ndocument.addEventListener('DOMContentLoaded', init);\n`;\n\n// ============================================================================\n// MAIN HANDLER\n// ============================================================================\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n\n // API: Get configuration\n if (url.pathname === \"/api/config\" && req.method === \"GET\") {\n return Response.json(DEFAULT_CONFIG);\n }\n\n // API: Verify license (optional server-side validation)\n if (url.pathname === \"/api/license/verify\" && req.method === \"POST\") {\n try {\n const { token } = await req.json();\n\n // In production, perform actual cryptographic verification here\n // For demo, just echo back a demo license\n if (token && token.replace(/-/g, \"\").toUpperCase() === \"DEMO\") {\n return Response.json({\n valid: true,\n tier: \"pro\",\n features: TIER_FEATURES.pro,\n expiresAt: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)\n .toISOString(),\n });\n }\n\n return Response.json({\n valid: false,\n reason: \"INVALID_TOKEN\",\n });\n } catch (e) {\n return Response.json({ valid: false, reason: \"PARSE_ERROR\" }, {\n status: 400,\n });\n }\n }\n\n // Serve main HTML page\n const html = `\n\n\n Face Lab 2027 - AI Avatar Studio\n \n \n \n \n \n \n \n \n\n \n\n\n${FACELAB_HTML}\n\n \n\n`;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n },\n });\n}\n\n// Type exports for external use\nconst TIER_FEATURES = {\n trial: 0b00000000000000000000000000010001,\n basic: 0b00000000000000000010001100110001,\n pro: 0b00000000000000000110011101111111,\n enterprise: 0b00000000000000001111111111111111,\n};\n\nexport { DEFAULT_CONFIG, TIER_FEATURES };\nexport type { AppConfig, LicenseInfo, PatternParameter, StyleDefinition };",["D",1767425487642],"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",{"_103":102,"_110":106},"org",{"_103":102,"_104":-5,"_105":106,"_18":63,"_107":108,"_109":26},"branch",{"_13":92,"_33":93,"_52":43,"_94":53,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":54,"_101":102},"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",{"_52":53,"_33":54,"_39":167,"_56":-5,"_57":26,"_58":59,"_60":59,"_61":-5,"_62":-5,"_18":63,"_64":-5,"_65":26,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":168,"_87":169,"_89":170,"_91":26},"tree",[158,159],"files",[158,159],"counts",{"_147":69,"_148":149,"_150":69,"_151":152,"_153":154},"contents",[134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_52":143,"_33":46,"_31":47,"_137":-5,"_42":43,"_41":14,"_138":26,"_39":144,"_13":145,"_34":48,"_36":50,"_25":26,"_141":-5,"_28":146},{"_52":136,"_33":29,"_31":32,"_137":-5,"_42":43,"_41":14,"_138":26,"_39":139,"_13":140,"_34":35,"_36":38,"_25":26,"_141":-5,"_28":142},"3718b72a-e876-11f0-b6f6-42dde27851f2","parentId","latest",["D",1767425487642],13,"label",[29],"371758b2-e876-11f0-b6f6-42dde27851f2",["D",1767425487642],41,[46],"pulls","branches",1,"forks","envVars",{"_155":69,"_157":69},"connections",{"_155":69,"_156":69},"count","unfilledCount","emptyCount",{"_52":143,"_33":46,"_31":47,"_137":-5,"_42":43,"_41":14,"_138":26,"_39":164,"_13":145,"_34":48,"_36":50,"_25":26,"_141":-5,"_161":165,"_28":166},{"_52":136,"_33":29,"_31":32,"_137":-5,"_42":43,"_41":14,"_138":26,"_39":160,"_13":140,"_34":35,"_36":38,"_25":26,"_141":-5,"_161":162,"_28":163},["D",1767425487642],"children",[],[29],["D",1767425487642],[],[46],["D",1767412318598],{"_103":102,"_110":106},{"_103":102,"_104":-5,"_105":106,"_18":63,"_107":108,"_109":26},{"_13":92,"_33":93,"_52":43,"_94":53,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":54,"_101":102},"ctx",{"_85":-5,"_131":204,"_205":206,"_207":208,"_209":26,"_210":26,"_211":26,"_212":129,"_213":-5,"_214":-7,"_215":-7,"_216":69,"_217":26,"_218":26,"_219":-5,"_220":26,"_221":26,"_222":26,"_223":-5},"ENV",{"_175":176,"_177":178,"_179":93,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203},"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"]

Activate License

\\${style.name} Settings

Diff · v54