Fix: TalkingHead2.animate crash - null morph target access in animate()

Dockerfile

@@ -6,6 +6,11 @@ WORKDIR /app
 COPY package.json ./
 RUN bun install
 
+# ── PATCH TalkingHead animate() to fix "Cannot read properties of undefined (reading 'value')" ──
+# This prevents crashes when this.mtAvatar has null/undefined entries.
+COPY patch_talkinghead.py ./
+RUN python3 patch_talkinghead.py
+
 # Copy remaining source (public, src, index.ts, index.html)
 COPY public ./public
 COPY src ./src
@@ -13,4 +18,4 @@ COPY index.ts index.html .
 
 ENV PORT=7860
 
-CMD ["bun", "run", "index.ts"]
+CMD ["bun", "run", "index.ts"]

index.html

@@ -23,7 +23,7 @@
         <button id="settings-btn" class="icon-btn" aria-label="Settings" title="Settings">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="12" cy="12" r="3"></circle>
-            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06-.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06-.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0 -.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
           </svg>
         </button>
       </header>
@@ -167,6 +167,8 @@
       .vaistudio-loadmore-btn:hover { background:#e2e8f0;border-color:#0077b6 }
     </style>
 
+    <!-- VT_PATCHER: Fix TalkingHead animate() crashes BEFORE app.js loads -->
+    <script src="./src/vt_patcher.js"></script>
     <script type="module" src="./src/app.js"></script>
   </body>
-</html>
+</html>

patch_talkinghead.py

@@ -0,0 +1,95 @@
+#!/usr/bin/env python3
+"""
+Patch @met4citizen/talkinghead/dist/talkinghead.mjs to fix:
+  "Cannot read properties of undefined (reading 'value')"
+
+Root cause: this.mtRandomized contains morph keys not in this.mtAvatar for
+the loaded GLB model. Line 2619: j = this.mtAvatar[i]; if (!j.needsUpdate) crashes.
+"""
+import os, sys, re
+
+PKG_DIR = os.path.join(os.getcwd(), 'node_modules', '@met4citizen', 'talkinghead')
+
+dist_files = ['dist/talkinghead.mjs', 'dist/talkinghead.js']
+target_path = None
+for name in dist_files:
+    p = os.path.join(PKG_DIR, name)
+    if os.path.exists(p):
+        target_path = p
+        break
+
+if not target_path:
+    print('ERROR: talkinghead file not found in ' + PKG_DIR)
+    sys.exit(1)
+
+print('Patching: ' + target_path)
+with open(target_path, 'r') as f:
+    code = f.read()
+
+if '__VT_PATCHED__' in code:
+    print('Already patched, skipping.')
+    sys.exit(0)
+
+# Fix 1: Null check for mtRandomized loop (line ~2619)
+old1 = "j = this.mtAvatar[i];\n      if ( !j.needsUpdate ) {"
+new1 = "j = this.mtAvatar[i];\n      if ( !j ) continue;\n      __VT_PATCHED__=1;\n      if ( !j.needsUpdate ) {"
+if old1 in code:
+    code = code.replace(old1, new1)
+    print('OK Fix1: added null check for mtRandomized loop')
+else:
+    code = re.sub(
+        r'(j = this\.mtAvatar\[i\];)\s*\n\s*if\s*\(\s*!j\.needsUpdate',
+        r'\1\n      if ( !j ) continue;\n      __VT_PATCHED__=1;\n      if ( !j.needsUpdate',
+        code
+    )
+
+# Fix 2: Guard direct .value accesses on specific keys
+for key in ['bodyRotateY', 'eyeLookInLeft', 'eyeLookOutLeft', 'eyesLookDown',
+            'browDownLeft', 'browDownRight', 'eyeBlinkLeft', 'eyeBlinkRight',
+            'eyesLookUp', 'bodyRotateX', 'bodyRotateZ', 'headRotateX',
+            'headRotateY', 'headRotateZ']:
+    full_access = 'this.mtAvatar[' + repr(key) + '].value'
+    safe_access = "(this.mtAvatar[" + repr(key) + "] || {}).value || 0"
+    code = code.replace('this.mtAvatar[' + repr(key) + '].value', safe_access)
+
+if '(this.mtAvatar[' + repr('bodyRotateY') + '] || {}).value' in code:
+    print('OK Fix2: guarded direct .value accesses on known keys')
+
+# Fix 3: Wrap animate method in try/catch as safety net
+match = re.search(
+    r'prototype\.animate\s*=\s*function\s*\(\s*t\s*\)\s*\{',
+    code
+)
+if match:
+    brace_open = code.index('{', match.end() - 1)
+    depth = 1
+    pos = brace_open + 1
+    while depth > 0 and pos < len(code):
+        ch = code[pos]
+        if ch == '{': depth += 1
+        elif ch == '}': depth -= 1
+        pos += 1
+    brace_close = pos - 1
+    indent = '      '
+    body = code[brace_open + 1:brace_close]
+    if '__VT_CATCH__' not in body:
+        new_body = (
+            indent + '__VT_CATCH__=1;\n'
+            + indent + 'try {\n'
+            + body + '\n'
+            + indent + '} catch (e) {\n'
+            + indent + indent + 'if (!(e && e.message && e.message.includes("Cannot read properties of undefined"))) {\n'
+            + indent + indent + indent + 'console.warn("[patch_talkinghead] animate:", e?.message || e);\n'
+            + indent + indent + indent + 'throw e;\n'
+            + indent + indent + '}\n'
+            + indent + '}\n'
+        )
+        code = code[:brace_open + 1] + new_body + code[brace_close + 1:]
+        print('OK Fix3: wrapped animate() in try/catch')
+else:
+    print('WARN Fix3: could not wrap animate()')
+
+with open(target_path, 'w') as f:
+    f.write(code)
+
+print('Done. Wrote ' + str(len(code)) + ' bytes')

src/vt_patcher.js

@@ -0,0 +1,30 @@
+// Runtime guard: override TalkingHead animate to catch null morph target crashes
+// This is a safety net in addition to the Dockerfile build-time patch.
+
+(function() {
+  // Wait for TalkingHead to be defined
+  function checkAndPatch() {
+    if (typeof TalkingHead !== 'undefined' && TalkingHead.prototype && TalkingHead.prototype.animate) {
+      const origAnimate = TalkingHead.prototype.animate;
+      if (!TalkingHead.prototype.__VT_PATCHED__) {
+        TalkingHead.prototype.animate = function(t) {
+          try {
+            return origAnimate.call(this, t);
+          } catch (e) {
+            if (e && e.message && e.message.includes('Cannot read properties of undefined')) {
+              console.warn('[Avatar] TalkingHead animate skipped error:', e.message);
+            } else {
+              throw e;
+            }
+          }
+        };
+        TalkingHead.prototype.__VT_PATCHED__ = true;
+      }
+    }
+  }
+
+  // Check immediately, then after each raf
+  checkAndPatch();
+  const pollInterval = setInterval(checkAndPatch, 100);
+  setTimeout(() => clearInterval(pollInterval), 5000);
+})();