From a98577e2062c8203aa76f8046a1572a23f8eba39 Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Sat, 5 Oct 2024 16:30:33 -0700 Subject: [PATCH] Optimize reactive vue data variables Signed-off-by: Justin Georgi --- src/pages/camera-mixin.js | 16 ++-- src/pages/detect.vue | 141 ++++++++++++++++++----------------- src/pages/detection-mixin.js | 4 +- src/pages/touch-mixin.js | 1 - 4 files changed, 82 insertions(+), 80 deletions(-) diff --git a/src/pages/camera-mixin.js b/src/pages/camera-mixin.js index 8df69ec..2179611 100644 --- a/src/pages/camera-mixin.js +++ b/src/pages/camera-mixin.js @@ -3,11 +3,11 @@ import { f7 } from 'framework7-vue' export default { methods: { async openCamera(imContain) { - var cameraLoaded = false + let cameraLoaded = false const devicesList = await navigator.mediaDevices.enumerateDevices() - this.videoDeviceAvailable = devicesList.some( d => d.kind == "videoinput") - if (this.videoDeviceAvailable) { - var vidConstraint = { + let videoDeviceAvailable = devicesList.some( d => d.kind == "videoinput") + if (videoDeviceAvailable) { + let vidConstraint = { video: { width: { ideal: imContain.offsetWidth @@ -41,20 +41,20 @@ export default { tempCtx.drawImage(vidViewer, 0, 0) this.getImage(tempCVS.toDataURL()) }, - async videoFrameDetectWorker (vidData) { + async videoFrameDetectWorker (vidData, vidWorker) { const startDetection = () => { createImageBitmap(vidData).then(imVideoFrame => { - this.vidWorker.postMessage({call: 'videoFrame', image: imVideoFrame}, [imVideoFrame]) + vidWorker.postMessage({call: 'videoFrame', image: imVideoFrame}, [imVideoFrame]) }) } vidData.addEventListener('resize',startDetection,{once: true}) - this.vidWorker.onmessage = (eVid) => { + vidWorker.onmessage = (eVid) => { if (eVid.data.error) { console.log(eVid.data.message) f7.dialog.alert(`ALVINN AI model error: ${eVid.data.message}`) } else if (this.videoAvailable) { createImageBitmap(vidData).then(imVideoFrame => { - this.vidWorker.postMessage({call: 'videoFrame', image: imVideoFrame}, [imVideoFrame]) + vidWorker.postMessage({call: 'videoFrame', image: imVideoFrame}, [imVideoFrame]) }) if (eVid.data.coords) { imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height) diff --git a/src/pages/detect.vue b/src/pages/detect.vue index 37cc68e..8939b02 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -2,7 +2,7 @@ - {{ regions[activeRegion] }} + {{ regionTitle }} @@ -30,7 +30,8 @@ :style="`display: ${(imageLoaded || videoAvailable) ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 2;`" > { return mod.json() }) .then((classes) => { - this.classesList = classes - this.detectorLabels = this.classesList.map( l => { return {'name': l, 'detect': true} } ) + classesList = classes + this.detectorLabels = classesList.map( l => { return {'name': l, 'detect': true} } ) }) var loadServerSettings = localStorage.getItem('serverSettings') - if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings) + if (loadServerSettings) serverSettings = JSON.parse(loadServerSettings) }, mounted () { - if (this.serverSettings && this.serverSettings.use) { + if (serverSettings && serverSettings.use) { this.getRemoteLabels() this.modelLoading = false } else { this.modelLoading = true if (!this.useWorkers) { - this.loadModel(this.modelLocation, true).then(() => { + this.loadModel(modelLocation, true).then(() => { this.modelLoading = false }).catch((e) => { console.log(e.message) @@ -243,8 +244,8 @@ this.modelLoading = false }) } else { - this.detectWorker = new detectionWorker() - this.detectWorker.onmessage = (eMount) => { + detectWorker = new detectionWorker() + detectWorker.onmessage = (eMount) => { self = this if (eMount.data.error) { console.log(eMount.data.message) @@ -252,21 +253,24 @@ } self.modelLoading = false } - this.vidWorker = new detectionWorker() - this.vidWorker.onmessage = (eMount) => { + vidWorker = new detectionWorker() + vidWorker.onmessage = (eMount) => { self = this if (eMount.data.error) { console.log(eMount.data.message) f7.dialog.alert(`ALVINN AI nano model error: ${eMount.data.message}`) } } - this.detectWorker.postMessage({call: 'loadModel', weights: this.modelLocation, preload: true}) - this.vidWorker.postMessage({call: 'loadModel', weights: this.miniLocation, preload: true}) + detectWorker.postMessage({call: 'loadModel', weights: modelLocation, preload: true}) + vidWorker.postMessage({call: 'loadModel', weights: miniLocation, preload: true}) } } window.onresize = (e) => { if (this.$refs.image_cvs) this.selectChip('redraw') } }, computed: { + regionTitle () { + return regions[activeRegion] + }, message () { if (this.modelLoading) { return "Preparing ALVINN..." @@ -310,7 +314,7 @@ } }, demoEnabled () { - return this.otherSettings.demo || this.demoMode + return otherSettings.demo || this.demoMode }, infoLinkTarget () { if (!this.getInfoUrl) return '' @@ -324,12 +328,12 @@ return `--chip-media-gradient: conic-gradient(from ${270 - (confFactor * 360 / 2)}deg, hsl(${confFactor * 120}deg, 100%, 50%) ${confFactor}turn, hsl(${confFactor * 120}deg, 50%, 66%) ${confFactor}turn)` }, async setData () { - if (this.detectWorker) { - this.detectWorker.onmessage = (eDetect) => { + if (detectWorker) { + detectWorker.onmessage = (eDetect) => { self = this if (eDetect.data.error) { self.detecting = false - self.resultData = {} + self.this.resultData = {} loadFailure() f7.dialog.alert(`ALVINN structure finding error: ${eDetect.data.message}`) } else if (eDetect.data.success == 'detection') { @@ -340,7 +344,7 @@ } self.uploadDirty = true } else if (eDetect.data.success == 'model') { - self.reloadModel = false + reloadModel = false loadSuccess() } f7.utils.nextFrame(() => { @@ -352,26 +356,26 @@ let loadSuccess = null let loadFailure = null let modelReloading = null - if (!this.useWorkers && this.reloadModel) { - await this.loadModel(this.modelLocation) - this.reloadModel = false + if (!this.useWorkers && reloadModel) { + await this.loadModel(modelLocation) + reloadModel = false } else { modelReloading = new Promise((res, rej) => { loadSuccess = res loadFailure = rej - if (this.reloadModel) { - this.detectWorker.postMessage({call: 'loadModel', weights: this.modelLocation}) + if (reloadModel) { + detectWorker.postMessage({call: 'loadModel', weights: modelLocation}) } else { loadSuccess() } }) } - if (this.serverSettings && this.serverSettings.use) { + if (serverSettings && serverSettings.use) { this.remoteDetect() } else if (this.useWorkers) { Promise.all([modelReloading,createImageBitmap(this.imageView)]).then(res => { - this.detectWorker.postMessage({call: 'localDetect', image: res[1]}, [res[1]]) + detectWorker.postMessage({call: 'localDetect', image: res[1]}, [res[1]]) }) } else { createImageBitmap(this.imageView).then(res => { @@ -399,12 +403,12 @@ } }, async selectImage (mode) { - this.imageLoadMode = mode + imageLoadMode = mode if (this.isCordova && mode == "camera") { navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true }); return } - if (mode == "camera" && !this.otherSettings.disableVideo) { + if (mode == "camera" && !otherSettings.disableVideo) { this.videoAvailable = await this.openCamera(this.$refs.image_container) if (this.videoAvailable) { this.selectedChip = -1 @@ -417,9 +421,9 @@ vidElement.width = trackDetails.width vidElement.height = trackDetails.height if (!this.useWorkers) { - this.videoFrameDetect(vidElement) + this.videoFrameDetect(vidElement, miniLocation) } else { - this.videoFrameDetectWorker(vidElement) + this.videoFrameDetectWorker(vidElement, vidWorker) } return } @@ -445,7 +449,6 @@ return clip[0].getType("image/png"); }).then(blob => { let clipImage = URL.createObjectURL(blob); - console.log(clipImage) this.getImage(clipImage) }).catch(e => { console.log(e) @@ -530,12 +533,12 @@ imageCtx.lineWidth = 3 / this.canvasZoom if (this.imageLoaded) { let imageLoc = this.box2cvs({top: 0,left: 0,right: 1,bottom: 1}) - this.imCvsLocation.top = imageLoc[0].cvsTop - this.imCvsLocation.left = imageLoc[0].cvsLeft - this.imCvsLocation.width = imageLoc[0].cvsRight - imageLoc[0].cvsLeft - this.imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop + imCvsLocation.top = imageLoc[0].cvsTop + imCvsLocation.left = imageLoc[0].cvsLeft + imCvsLocation.width = imageLoc[0].cvsRight - imageLoc[0].cvsLeft + imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop if (drawChip) {imageCtx.globalAlpha = .5} - imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height) + imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, imCvsLocation.left, imCvsLocation.top, imCvsLocation.width, imCvsLocation.height) if (drawChip) {imageCtx.globalAlpha = 1} } this.structureZoomed = false @@ -546,13 +549,13 @@ if (this.videoAvailable) { this.closeCamera() this.detecting = true - this.reloadModel = true + reloadModel = true resolve(searchImage) - } else if (this.isCordova && this.imageLoadMode == "camera") { + } else if (this.isCordova && imageLoadMode == "camera") { this.detecting = true resolve('data:image/jpg;base64,' + searchImage) } - if (this.imageLoadMode == 'clipboard') { + if (imageLoadMode == 'clipboard') { this.detecting = true resolve(searchImage) } @@ -561,7 +564,7 @@ this.detecting = true resolve(reader.result) },{once: true}) - if (this.imageLoadMode == 'sample') { + if (imageLoadMode == 'sample') { fetch(`${this.isCordova ? 'https://localhost' : '.'}/samples/${this.detectorName}-${searchImage}.jpeg`).then( resp => { return resp.blob() }).then(respBlob => { @@ -590,11 +593,11 @@ imCanvas.height = imCanvas.clientHeight const imageCtx = imCanvas.getContext("2d") let imageLoc = this.box2cvs({top: 0,left: 0,right: 1,bottom: 1}) - this.imCvsLocation.top = imageLoc[0].cvsTop - this.imCvsLocation.left = imageLoc[0].cvsLeft - this.imCvsLocation.width = imageLoc[0].cvsRight - imageLoc[0].cvsLeft - this.imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop - imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height) + imCvsLocation.top = imageLoc[0].cvsTop + imCvsLocation.left = imageLoc[0].cvsLeft + imCvsLocation.width = imageLoc[0].cvsRight - imageLoc[0].cvsLeft + imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop + imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, imCvsLocation.left, imCvsLocation.top, imCvsLocation.width, imCvsLocation.height) f7.utils.nextFrame(() => { this.setData() }) @@ -672,13 +675,13 @@ }) }, startMove() { - this.canvasMoving = true + canvasMoving = true }, endMove() { - this.canvasMoving = false + canvasMoving = false }, makeMove(event) { - if (this.canvasMoving) { + if (canvasMoving) { this.canvasOffset.x += event.movementX this.canvasOffset.y += event.movementY this.selectChip("redraw") diff --git a/src/pages/detection-mixin.js b/src/pages/detection-mixin.js index 6cb7b77..a2672fc 100644 --- a/src/pages/detection-mixin.js +++ b/src/pages/detection-mixin.js @@ -172,8 +172,8 @@ export default { this.detecting = false f7.dialog.alert('No connection to remote ALVINN instance. Please check app settings.') }, - async videoFrameDetect (vidData) { - await this.loadModel(this.miniLocation) + async videoFrameDetect (vidData, miniModel) { + await this.loadModel(miniModel) const [modelWidth, modelHeight] = model.inputs[0].shape.slice(1, 3) const imCanvas = this.$refs.image_cvs const imageCtx = imCanvas.getContext("2d") diff --git a/src/pages/touch-mixin.js b/src/pages/touch-mixin.js index 0aa42ee..0b8659a 100644 --- a/src/pages/touch-mixin.js +++ b/src/pages/touch-mixin.js @@ -25,7 +25,6 @@ export default { moveTouch(event) { switch (event.touches.length) { case 1: - console.log(event) this.canvasOffset.x += event.touches[0].clientX - this.touchPrevious.x this.canvasOffset.y += event.touches[0].clientY - this.touchPrevious.y this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}