ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Add detection settings panel #23

Merged
jgeorgi merged 1 commits from xps-detect-settings into main 2023-11-29 22:51:37 +00:00
Conversation 0 Commits 1 Files Changed 3 +307 -249
3 changed files with 307 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7d981e83f4 - Show all commits

2
src/components/app.vue
View File

@@ -29,7 +29,7 @@
<f7-button style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
<img src="../assets/regions/limb.svg" />
</f7-button>
<f7-button disabled="true" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
<f7-button class="disabled" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
<img src="../assets/regions/headneck.svg" />
</f7-button>
</f7-segmented>

109
src/pages/detect.vue
View File

@@ -3,10 +3,13 @@
<!-- Top Navbar -->
<f7-navbar :sliding="false" back-link="Back">
<f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
<f7-nav-right>
<f7-link icon-ios="f7:menu" icon-md="material:settings" panel-open="right"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block class="detect-grid">
<div class="image-container">
<img :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: scale-down; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
<img :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
<div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none;" />
</div>
<div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
@@ -16,30 +19,40 @@
<f7-button popover-open="#region-popover">
<img :src="imageRegion" />
</f7-button>
<f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
<img src="../assets/icons/visibility.svg" />
</f7-button>
<f7-button @click="selectImage">
<img src="../assets/icons/image.svg" />
</f7-button>
<f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
<img src="../assets/icons/visibility.svg" />
</f7-button>
<f7-button @click="setData">
<img src="../assets/icons/videocam.svg" />
</f7-button>
</f7-segmented>
<input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
</f7-block>
<f7-panel right cover>
<f7-page>
<f7-navbar title="Detection Settings"></f7-navbar>
<f7-list>
<f7-list-input v-model:value="detectSettings.level" :label="`Confidence % threshold: ${detectSettings.level}`" type="range" />
<f7-list-item accordion-item title="Structures">
<f7-accordion-content>
<f7-list>
<f7-list-item checkbox checked checkbox-icon="end" title="All/none" @change="selectAll"></f7-list-item>
<f7-list-item v-for="structure in detectSettings.filter" checkbox checkbox-icon="end" v-model:checked="structure.detect" :title="structure.name"></f7-list-item>
</f7-list>
</f7-accordion-content>
</f7-list-item>
</f7-list>
</f7-page>
</f7-panel>
</f7-page>
</template>
<style>
.detect-grid {
/*display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: stretch;
height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
box-sizing: border-box;
width: 100vw;*/
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto min-content;
@@ -60,6 +73,7 @@
min-height: 0;
position: relative;
display: flex;
align-self: stretch;
}
.chip-results {
@@ -166,7 +180,12 @@
imageLoaded: false,
imageView: '../assets/icons/image.svg',
reader: new FileReader(),
detectorName: ''
detectorName: '',
detectSettings: {
level: 50,
filter: []
},
serverSettings: {}
}
},
created () {
@@ -191,6 +210,29 @@
this.imageRegion = '../assets/regions/headneck.svg'
break;
}
var loadServerSettings = localStorage.getItem('serverSettings')
if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings)
var self = this
if (this.serverSettings && this.serverSettings.use) {
var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detectors`
var xhr = new XMLHttpRequest()
xhr.open("GET", modelURL)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.onload = function () {
if (this.status !== 200) {
//this.response.text().then(function(message){alert(message)})
console.log(this.response)
return;
}
var detectors = JSON.parse(this.response).detectors
self.detectSettings.filter = detectors
.find( d => { return d.name == self.detectorName } ).labels
.filter( l => { return l != "" } ).sort()
.map( l => { return {'name': l, 'detect': true} } )
}
xhr.send()
}
},
methods: {
chipColor (confVal) {
@@ -200,10 +242,8 @@
},
setData () {
var self = this
var loadServerSettings = localStorage.getItem('serverSettings')
if (loadServerSettings) var serverSettings = JSON.parse(loadServerSettings)
if (serverSettings && serverSettings.use) {
var modelURL = `http://${serverSettings.address}:${serverSettings.port}/detect`
if (this.serverSettings && this.serverSettings.use) {
var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect`
var xhr = new XMLHttpRequest()
xhr.open("POST", modelURL)
xhr.setRequestHeader('Content-Type', 'application/json')
@@ -216,19 +256,33 @@
self.resultData = JSON.parse(this.response)
}
var detectStructures = {}
if (this.detectSettings.filter.every( s => { return s.detect } )) {
detectStructures['*'] = this.detectSettings.level
} else {
this.detectSettings.filter.forEach( s => {
if (s.detect) detectStructures[s.name] = this.detectSettings.level
})
}
var doodsData = {
"detector_name": this.detectorName,
"detect": {
"*":50
"detect": detectStructures,
"data": this.reader.result.split(',')[1]
}
}
doodsData.data = this.reader.result.split(',')[1]
xhr.send(JSON.stringify(doodsData))
} else {
//TODO
f7.dialog.alert('Using built-in model')
}
},
selectAll (ev) {
if (ev.target.checked) {
this.detectSettings.filter.forEach( s => s.detect = true )
} else {
this.detectSettings.filter.forEach( s => s.detect = false )
}
},
selectImage () {
var loadResult = this.$refs.image_chooser.click()
},
@@ -248,7 +302,7 @@
imgWidth = img.offsetHeight * imgAspect
imgHeight = img.offsetHeight
}
box.style.display = "block"
box.style.display = 'block'
box.style.left = `${(img.offsetWidth - imgWidth) / 2 + this.resultData.detections[iChip].left * imgWidth}px`
box.style.top = `${(img.offsetHeight - imgHeight) / 2 + this.resultData.detections[iChip].top * imgHeight}px`
box.style.width = `${(this.resultData.detections[iChip].right - this.resultData.detections[iChip].left) * imgWidth}px`
@@ -260,10 +314,15 @@
});
},
getImage () {
const example = this.$refs.image_chooser.files[0];
this.imageView = URL.createObjectURL(example);
this.reader.readAsDataURL(example)
this.imageLoaded = true;
const searchImage = this.$refs.image_chooser.files[0]
//Promise goes here?
this.imageView = URL.createObjectURL(searchImage)
this.reader.readAsDataURL(searchImage)
this.imageLoaded = true
this.resultData = {}
this.selectedChip = -1
const box = this.$refs.structure_box
box.style.display = 'none'
}
}
}

3
src/pages/home.vue
View File

@@ -2,7 +2,6 @@
<f7-page name="home">
<!-- Top Navbar -->
<f7-navbar>
<f7-nav-left>
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
</f7-nav-left>
@@ -23,7 +22,7 @@
<f7-button class="region-button limbs" href="/detect/limbs/">
<img class="region-image" src="../assets/regions/limb.svg" />
</f7-button>
<f7-button class="region-button headneck" disabled="true" href="/detect/head/">
<f7-button class="region-button headneck disabled" href="/detect/head/">
<img class="region-image" src="../assets/regions/headneck.svg" />
</f7-button>
</div>