Attempt to salvage the model's accuracy

src/main.js

@@ -9,7 +9,7 @@ let model
 tf.enableProdMode()
 
 const wasmToUrl = wasm => {
-  const blb = new Blob([tfwasm])
+  const blb = new Blob([wasm], { type: 'application/wasm' })
   return URL.createObjectURL(blb)
 }
 
@@ -18,11 +18,10 @@ const backendloaded = (async () => {
     // dead code elimination should occur here
     // eslint-disable-next-line camelcase
     if (execution_mode === 'userscript') {
-      weightsData = import('./model.weights.bin')
+      weightsData = (await import('./model.weights.bin')).default
-
+      const tfwasmthreadedsimd = (await import('./tfjs-backend-wasm-threaded-simd.wasm')).default
-      const tfwasmthreadedsimd = await import('./tfjs-backend-wasm-threaded-simd.wasm')
+      const tfwasmsimd = (await import('./tfjs-backend-wasm-simd.wasm')).default
-      const tfwasmsimd = await import('./tfjs-backend-wasm-simd.wasm')
+      const tfwasm = (await import('./tfjs-backend-wasm.wasm')).default
-      const tfwasm = await import('./tfjs-backend-wasm.wasm')
       setWasmPaths({
         'tfjs-backend-wasm.wasm': wasmToUrl(tfwasm),
         'tfjs-backend-wasm-simd.wasm': wasmToUrl(tfwasmsimd),
@@ -146,6 +145,7 @@ function imageFromCanvas (img, bg, off) {
   const scale = th / h
 
   const canvas = document.createElement('canvas')
+  document.body.append(canvas)
   canvas.height = w * scale + pw * 2
   canvas.width = th
 
@@ -158,7 +158,27 @@ function imageFromCanvas (img, bg, off) {
   ctx.scale(-scale, scale)
   ctx.rotate((90 * Math.PI) / 180)
 
-  const draw = function (off) {
+  const adf = 0.3
+
+  const draw = function (off, adj) {
+    if (adj) {
+      if (bg) {
+        const border = 4
+        ctx.drawImage(
+          bg,
+          /* sx */ -off + border,
+          /* sy */ 0,
+          /* sw */w - border * 2,
+          /* sh */h,
+          /* dx */-w / 2 + border,
+          /* dy */-h / 2 - (h * (adf * 0.5)),
+          /* dw */w - border * 2,
+          /* dh */h * (1 + adf)
+        )
+      }
+      ctx.drawImage(img, -w / 2, -h / 2 - (h * (adf * 0.5)), w, h * (1 + adf))
+      return
+    }
     if (bg) {
       const border = 4
       ctx.drawImage(
@@ -187,13 +207,16 @@ function imageFromCanvas (img, bg, off) {
     for (let off = 0; off >= -50; off--) {
       draw(off)
 
-      const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height)
+      let imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height)
       const disorder = calculateDisorder(imgdata)
 
       if (disorder < bestDisorder) {
         bestDisorder = disorder
+        draw(off, true)
+        imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height)
         bestImagedata = imgdata
         bestOff = off
+        console.log(off)
       }
     }
 
@@ -206,11 +229,10 @@ function imageFromCanvas (img, bg, off) {
       slider.value = -bestOff * 2
       bg.style.backgroundPositionX = bestOff + 'px'
     }, 1)
-
+    draw(bestOff, true)
     return bestImagedata
   } else {
     draw(off)
-
     return ctx.getImageData(0, 0, canvas.width, canvas.height)
   }
 }
@@ -233,6 +255,7 @@ async function predict (img, bg, off) {
     model = await load()
   }
   const image = imageFromCanvas(img, bg, off)
+
   const tensor = tf.browser
     .fromPixels(image, 1)
     .mul(-1 / 238)
@@ -354,7 +377,6 @@ async function imageFromUri (uri) {
 
   const img = new Image()
   await new Promise((r) => (img.onload = r), (img.src = uri))
-
   return img
 }
 
@@ -468,7 +490,7 @@ function showOpts (opts) {
 const observer = new MutationObserver(async function (mutationsList, observer) {
   solve(false)
 })
-
+window.solve = solve
 observer.observe(document.body, {
   attributes: true,
   childList: true,