Fix tensor cleanup and orphan event listener (#171)

Closes: #166

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: #171

src/pages/detect.vue

@@ -10,7 +10,7 @@
     </f7-navbar>
     <f7-block class="detect-grid">
       <div class="image-container" ref="image_container">
-        <SvgIcon v-if="!imageView && !videoAvailable" :icon="f7route.params.region" fill-color="var(--avn-theme-color)" @click="selectImage" />
+        <SvgIcon v-if="!imageView.src && !videoAvailable" :icon="f7route.params.region" fill-color="var(--avn-theme-color)" @click="selectImage" />
         <div class="vid-container" :style="`display: ${videoAvailable ? 'block' : 'none'}; position: absolute; width: 100%; height: 100%;`">
           <video id="vid-view" ref="vid_viewer" :srcObject="cameraStream" :autoPlay="true" style="width: 100%; height: 100%"></video>
           <f7-button @click="captureVidFrame()" style="position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3;" fill large>Capture</f7-button>
@@ -120,7 +120,6 @@
   import submitMixin from './submit-mixin'
   import detectionMixin from './detection-mixin'
   import cameraMixin from './camera-mixin'
-import { Conv2DBackpropFilter } from '@tensorflow/tfjs'
 
   export default {
     mixins: [submitMixin, detectionMixin, cameraMixin],
@@ -139,7 +138,7 @@ import { Conv2DBackpropFilter } from '@tensorflow/tfjs'
         activeRegion: 4,
         classesList: [],
         imageLoaded: false,
-        imageView: null,
+        imageView: new Image(),
         imageLoadMode: "environment",
         detecting: false,
         detectPanel: false,
@@ -300,7 +299,7 @@ import { Conv2DBackpropFilter } from '@tensorflow/tfjs'
           this.videoAvailable = await this.openCamera(this.$refs.image_container)
           if (this.videoAvailable) {
             this.imageLoaded = false
-            this.imageView = null
+            this.imageView.src = null
             this.$refs.image_cvs.style['background-image'] = 'none'
             this.resultData = {}
             var trackDetails = this.cameraStream.getVideoTracks()[0].getSettings()
@@ -384,11 +383,11 @@ import { Conv2DBackpropFilter } from '@tensorflow/tfjs'
             this.detecting = true
             resolve('data:image/jpg;base64,' + searchImage)
           }
-          var reader = new FileReader()
+          const reader = new FileReader()
           reader.addEventListener("load", () => {
             this.detecting = true
             resolve(reader.result)
-          })
+          },{once: true})
           if (this.imageLoadMode == 'sample') {
             fetch(`${this.isCordova ? 'https://localhost' : '.'}/samples/${this.detectorName}-${searchImage}.jpeg`).then( resp => {
               return resp.blob()
@@ -408,7 +407,6 @@ import { Conv2DBackpropFilter } from '@tensorflow/tfjs'
           this.imageLoaded = true
           this.resultData = {}
           this.selectedChip = -1
-          this.imageView = new Image()
           this.imageView.src = imgData
           return(this.imageView.decode())
         }).then( () => {