add known issues to readme; dont capture on focus, but add capture on…

… event change

README.md

@@ -17,6 +17,10 @@ The code demos usages with Wasm ([MediaPipe](https://ai.google.dev/edge/mediapip
 WebGPU ([TensorFlow.js](https://www.tensorflow.org/js), [ONNX Runtime Web](https://onnxruntime.ai/docs/get-started/with-javascript/web.html), [Transformers.js](https://huggingface.co/docs/transformers.js/index)),
 WebGL ([Three.js](https://threejs.org/), [SwissGL](https://google.github.io/swissgl/)), and VanillaJS.
 
+Known issues:
+1. Modnet crashes using Transformers.js v3-alpha on Chromium 129+: https://github.com/xenova/transformers.js/issues/943 (I currently reverted to v2 causing a significant slowdown)
+2. Resolution of captured media is doubled for smaller frames: https://github.com/screen-share/element-capture/issues/44
+
 <br>
 
 [Demo video](https://github.com/eyaler/LordTubeMaster/assets/4436747/2352969c-889d-478e-b386-8bdf6452a797)

script.js

@@ -14,8 +14,9 @@ import {
 } from 'https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/vision_bundle.mjs'
 const mediapipe_wasm_url = 'https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/wasm'
 
-import {AutoModel, AutoProcessor, RawImage} from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]/dist/transformers.min.js'
-// import {AutoModel, AutoProcessor, RawImage} from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.min.js'
+import {AutoModel, AutoProcessor, RawImage} from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]/dist/transformers.min.js'
+// import {AutoModel, AutoProcessor, RawImage} from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.min.js'
+// Note modnet on transformers v3 is 10x faster on chromium 128 but crashed on 129+. See: https://github.com/xenova/transformers.js/issues/943
 
 import 'https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js'
 import 'https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf-backend-webgpu.min.js'
@@ -68,12 +69,12 @@ video_url.addEventListener('change', e => {
 video_url.addEventListener('focus', e => {
     skip_changed = false
     e.currentTarget.select()  // Broken in Chrome. See: https://issues.chromium.org/issues/40345011#comment45
-    if (e.currentTarget.value)
-        capture()
 })
 
 let loop_mode
 effect.addEventListener('change', e => {
+    if (e.currentTarget.value)
+        capture()
     loop_mode = null
     if (e.currentTarget.value == 'loop' || e.currentTarget.value == 'random') {
         loop_mode = e.currentTarget.value

style.css

@@ -17,7 +17,7 @@ footer {
 }
 
 #inputs {
-    column-gap: 1.5rem;
+    column-gap: 1rem;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;