diff --git a/src/lib/Recognizer.ts b/src/lib/Recognizer.ts index 285b3e5..d4f8f18 100644 --- a/src/lib/Recognizer.ts +++ b/src/lib/Recognizer.ts @@ -3,7 +3,6 @@ import { type GestureRecognizerOptions, type GestureRecognizerResult, } from "@mediapipe/tasks-vision"; -import { defaultOptions } from "./constants"; import type { WasmFileset } from "./types"; /** @@ -68,11 +67,12 @@ export default class Recognizer { vision?: WasmFileset; options?: GestureRecognizerOptions; }): Promise { - // TOOD - Track loading progress for wasm file and model file from defaultOptions. - /** * Manually create the WasmFileset instead of using the FilesetResolver. */ + const modelAsset = await fetch( + "https://storage.googleapis.com/mediapipe-models/gesture_recognizer/gesture_recognizer/float16/1/gesture_recognizer.task", + ); const wasmLoader = await fetch( "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm/vision_wasm_internal.js", ); @@ -80,6 +80,17 @@ export default class Recognizer { "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm/vision_wasm_internal.wasm", ); + const defaultOptions: GestureRecognizerOptions = { + runningMode: "VIDEO", + baseOptions: { + // Pretrained model for gesture recognition. + // https://developers.google.com/mediapipe/solutions/vision/gesture_recognizer#models + modelAssetBuffer: new Uint8Array(await modelAsset.arrayBuffer()), + delegate: "GPU", + }, + numHands: 1, + }; + const defaultWasmFileset: WasmFileset = { wasmLoaderPath: URL.createObjectURL(await wasmLoader.blob()), wasmBinaryPath: URL.createObjectURL(await wasmBinary.blob()), diff --git a/src/styles.css b/src/styles.css index 355ae08..32e7ae5 100644 --- a/src/styles.css +++ b/src/styles.css @@ -52,13 +52,13 @@ main { } .videoContainer.active { - &:after, &:before { + &::after, &::before { background: var(--active) } } .videoContainer.inactive { - &:after, &:before { + &::after, &::before { background: var(--inactive) } } @@ -74,7 +74,7 @@ main { right: 0; margin: auto; - &&:after, &&:before { + &&::after, &&::before { content: ""; position: absolute; top: -1px;