From dcdde0289b744b522c6e10731eb3aba5c5887108 Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Wed, 11 Sep 2024 10:55:26 -0700 Subject: [PATCH] Set worker use as configuration setting Signed-off-by: Justin Georgi --- public/conf/conf.yaml | 1 + src/components/app.vue | 3 ++ src/js/store.js | 7 ++++ src/pages/detect.vue | 79 +++++++++++++++++++++--------------------- src/pages/specs.vue | 3 +- 5 files changed, 52 insertions(+), 41 deletions(-) diff --git a/public/conf/conf.yaml b/public/conf/conf.yaml index d46e141..8c9adc7 100644 --- a/public/conf/conf.yaml +++ b/public/conf/conf.yaml @@ -6,6 +6,7 @@ regions: - limbs - head useExternal: none +disableWorkers: true external: - name: Mserver address: "192.169.1.105" diff --git a/src/components/app.vue b/src/components/app.vue index 61352d3..0413651 100644 --- a/src/components/app.vue +++ b/src/components/app.vue @@ -99,6 +99,9 @@ store().set('siteDemo',this.siteConf?.demo) store().set('infoUrl',this.siteConf?.infoUrl) const loadServerSettings = localStorage.getItem('serverSettings') + if (this.siteConf.disableWorkers) { + store().disableWorkers() + } if (this.siteConf?.useExternal) { if (!['none','list','optional','required'].includes(this.siteConf.useExternal)) { console.warn(`'${this.siteConf.useExternal}' is not a valid value for useExternal configuration: using 'optional'`) diff --git a/src/js/store.js b/src/js/store.js index 1064141..7e7f7c4 100644 --- a/src/js/store.js +++ b/src/js/store.js @@ -7,6 +7,7 @@ const state = reactive({ version: '0.5.0-alpha', fullscreen: false, useExternal: 'optional', + workersEnabled: 'true', siteDemo: false, externalServerList: [], infoUrl: false, @@ -26,6 +27,10 @@ const safariDetected = () => { state.safariBrowser = true } +const disableWorkers = () => { + state.workersEnabled = false +} + const getServerList = () => { if (state.useExternal == 'required') { return state.externalServerList[0] @@ -51,6 +56,7 @@ export default () => ({ isFullscreen: computed(() => state.fullscreen), demoMode: computed(() => state.siteDemo), externalType: computed(() => state.useExternal), + useWorkers: computed(() => state.workersEnabled), getRegions: computed(() => state.enabledRegions), getVersion: computed(() => state.version), getIconSet: computed(() => state.regionIconSet), @@ -59,6 +65,7 @@ export default () => ({ set, agree, safariDetected, + disableWorkers, getServerList, toggleFullscreen }) diff --git a/src/pages/detect.vue b/src/pages/detect.vue index 36e2311..7dd69ed 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -209,8 +209,6 @@ let miniJ = `../models/${this.detectorName}-mini/model.json` this.modelLocation = new URL(modelJ,import.meta.url).href this.miniLocation = new URL(miniJ,import.meta.url).href - console.log(this.modelLocation) - console.log(this.miniLocation) let classesJ = `../models/${this.detectorName}/classes.json` fetch(new URL(classesJ,import.meta.url).href) .then((mod) => { return mod.json() }) @@ -222,30 +220,12 @@ if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings) }, mounted () { - this.detectWorker = new detectionWorker() - this.detectWorker.onmessage = (eMount) => { - self = this - if (eMount.data.error) { - console.log(eMount.data.message) - f7.dialog.alert(`ALVINN AI model error: ${eMount.data.message}`) - } - self.modelLoading = false - } - this.vidWorker = new detectionWorker() - this.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}`) - } - } - if (this.serverSettings && this.serverSettings.use) { this.getRemoteLabels() this.modelLoading = false } else { this.modelLoading = true - if (this.isSafari) { + if (!this.useWorkers) { this.loadModel(this.modelLocation, true).then(() => { this.modelLoading = false }).catch((e) => { @@ -254,6 +234,23 @@ this.modelLoading = false }) } else { + this.detectWorker = new detectionWorker() + this.detectWorker.onmessage = (eMount) => { + self = this + if (eMount.data.error) { + console.log(eMount.data.message) + f7.dialog.alert(`ALVINN AI model error: ${eMount.data.message}`) + } + self.modelLoading = false + } + this.vidWorker = new detectionWorker() + this.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}) } @@ -318,30 +315,32 @@ 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 () { - this.detectWorker.onmessage = (eDetect) => { - self = this - if (eDetect.data.error) { - self.detecting = false - self.resultData = {} - loadFailure() - f7.dialog.alert(`ALVINN structure finding error: ${eDetect.data.message}`) - } else if (eDetect.data.success == 'detection') { - self.detecting = false - self.resultData = eDetect.data.detections - if (self.resultData) { - self.resultData.detections.map(d => {d.label = self.detectorLabels[d.label].name}) + if (this.detectWorker) { + this.detectWorker.onmessage = (eDetect) => { + self = this + if (eDetect.data.error) { + self.detecting = false + self.resultData = {} + loadFailure() + f7.dialog.alert(`ALVINN structure finding error: ${eDetect.data.message}`) + } else if (eDetect.data.success == 'detection') { + self.detecting = false + self.resultData = eDetect.data.detections + if (self.resultData) { + self.resultData.detections.map(d => {d.label = self.detectorLabels[d.label].name}) + } + self.uploadDirty = true + } else if (eDetect.data.success == 'model') { + self.reloadModel = false + loadSuccess() } - self.uploadDirty = true - } else if (eDetect.data.success == 'model') { - self.reloadModel = false - loadSuccess() } } let loadSuccess = null let loadFailure = null let modelReloading = null - if (this.isSafari && this.reloadModel) { + if (!this.useWorkers && this.reloadModel) { await this.loadModel(this.modelLocation) this.reloadModel = false } else { @@ -358,7 +357,7 @@ if (this.serverSettings && this.serverSettings.use) { this.remoteDetect() - } else if (!this.isSafari) { + } else if (this.useWorkers) { Promise.all([modelReloading,createImageBitmap(this.imageView)]).then(res => { this.detectWorker.postMessage({call: 'localDetect', image: res[1]}, [res[1]]) }) @@ -400,7 +399,7 @@ var vidElement = this.$refs.vid_viewer vidElement.width = trackDetails.width vidElement.height = trackDetails.height - if (this.isSafari) { + if (!this.useWorkers) { this.videoFrameDetect(vidElement) } else { this.videoFrameDetectWorker(vidElement) diff --git a/src/pages/specs.vue b/src/pages/specs.vue index 4bd5627..5d947b4 100644 --- a/src/pages/specs.vue +++ b/src/pages/specs.vue @@ -8,7 +8,7 @@ Details - + Models @@ -54,6 +54,7 @@ alvinnVersion: store().getVersion, isCordova: !!window.cordova, isSafari: store().isSafari, + useWorkers: store().useWorkers, otherSettings: {} } },