Draw face detection result

deps.edn

@@ -1,2 +1,3 @@
 {:paths ["src"]
- :deps {thheller/shadow-cljs {:mvn/version "2.8.109"}}}
+ :deps {thheller/shadow-cljs {:mvn/version "2.8.109"}
+        appliedscience/js-interop {:mvn/version "0.2.5"}}}

src/heyarne/all_my_friends/core.cljs

@@ -1,13 +1,48 @@
 (ns heyarne.all-my-friends.core
-  (:require ["@tensorflow-models/facemesh" :as facemesh]))
+  (:require ["@tensorflow/tfjs-core" :as tf]
+            ["@tensorflow-models/facemesh" :as facemesh]
+            [applied-science.js-interop :as j]
+            [goog.dom :as dom]))
+
+(def img (js/document.querySelector "img"))
+
+(defn draw-results [img predictions]
+  (let [bounds (j/lookup (.getBoundingClientRect img))
+        parent (dom/getParentElement img)
+        canvas (doto (dom/createElement "canvas")
+                 (.setAttribute "width" (:width bounds))
+                 (.setAttribute "height" (:height bounds))
+                 (.setAttribute "style" (str "display: block; "
+                                             "position: absolute; "
+                                             "top: " (:top bounds) "px; "
+                                             "left: " (:left bounds) "px")))
+        ctx (. canvas (getContext "2d"))]
+    ;; remove previous results
+    (doseq [result-canvas (.querySelectorAll parent "canvas")]
+      (dom/removeNode result-canvas))
+    ;; draw and append new results
+    (set! (.-strokeStyle ctx) "white")
+    (doseq [prediction predictions
+            [x y _] (j/get prediction :scaledMesh)]
+      (.beginPath ctx)
+      (.ellipse ctx x y 2 2 0 0 (* 2 Math/PI))
+      (.stroke ctx))
+    (dom/appendChild parent canvas)))
 
 (defn detect-faces [model]
   (println "Facemesh loaded")
   (.. model
-      (estimateFaces (js/document.querySelector "img"))
+      (estimateFaces img)
       (then (fn [predictions]
-              (println "Predictions" predictions)))))
+              (set! (.-predictions js/window) predictions)
+              #_(println "Predictions" predictions)
+              (draw-results img predictions)))))
 
-(.. facemesh
-    (load)
-    (then detect-faces))
+(defonce
+  init
+  (do
+    (println "Initializing…")
+    (.. tf
+        (setBackend "webgl")
+        (then #(.load facemesh))
+        (then detect-faces))))