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

Add photo detection framework #8

Merged
jgeorgi merged 4 commits from xps-photo-detect into main 2023-11-14 17:16:33 +00:00
Conversation 0 Commits 4 Files Changed 16 +278 -398
16 changed files with 278 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 347e5409db - Show all commits

28
src/pages/detect.vue
View File

@@ -4,14 +4,12 @@
<f7-navbar :sliding="false" back-link="Back">
<f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
</f7-navbar>
<f7-block style="display: flex; flex-direction: column; align-items: center; height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top));">
<f7-block style="flex: 1 1 50%; align-self: stretch;">
<div class="image-box" style="position: relative;">
<img :src="imageView" />
<div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none;" />
</div>
</f7-block>
<f7-segmented class="image-menu" raised style="margin: 5px; width: 50%; max-width: 400px; min-width: 192px; flex: auto 0 0;">
<f7-block style="display: flex; justify-content: flex-start; flex-direction: column; align-items: center; height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top));">
<div class="image-box" style="display: flex; flex-direction: column; align-items: center; flex: 1 1 0%;" >
<img :src="imageView" ref="image_src" style="min-width: 0; min-height: 0; flex: 1 1 0"/>
<div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none;" />
</div>
<f7-segmented class="image-menu" raised style="margin: 5px; width: 50%; max-width: 400px; min-width: 192px; flex: 0 0 auto;">
<f7-button popover-open="#region-popover">
<img :src="imageRegion" style="height: 100%;" />
</f7-button>
@@ -26,7 +24,7 @@
</f7-button>
</f7-segmented>
<input type="file" ref="image_chooser" @change="getImage()" accept="image/png, image/jpg, image/jpeg" style="display: none;"/>
<div v-if="resultData && resultData.detections" class="chip-results" style="flex: auto 0 0;">
<div v-if="resultData && resultData.detections" class="chip-results" style="flex: 0 0 auto;">
<f7-chip v-for="(result, idx) in resultData.detections" :class="(idx == selectedChip) ? 'selected-chip' : ''" :text="result.label" media=" " :tooltip="result.confidence.toFixed(1)" :media-bg-color="chipColor(result.confidence)" deleteable @click="selectChip(idx)" @delete="deleteChip(idx)" />
</div>
</f7-block>
@@ -112,15 +110,19 @@
this.$refs.image_chooser.click()
//TODO This really needs to be a promise and resolve system
this.imageLoaded = true;
var box = this.$refs.structure_box
},
selectChip ( iChip ) {
this.selectedChip = iChip
var box = this.$refs.structure_box
var img = this.$refs.image_src
var imgWidth = img.offsetWidth
var imgHeight = img.offsetHeight
box.style.display = "block"
box.style.left = `${this.resultData.detections[iChip].left * 100}%`
box.style.top = `${this.resultData.detections[iChip].top * 100}%`
box.style.width = `${(this.resultData.detections[iChip].right - this.resultData.detections[iChip].left) * 100}%`
box.style.height = `${(this.resultData.detections[iChip].bottom - this.resultData.detections[iChip].top) * 100}%`
box.style.left = `calc( 50% - ${imgWidth/2}px + ${this.resultData.detections[iChip].left * imgWidth}px)`
box.style.top = `${this.resultData.detections[iChip].top * imgHeight}px`
box.style.width = `${(this.resultData.detections[iChip].right - this.resultData.detections[iChip].left) * imgWidth}px`
box.style.height = `${(this.resultData.detections[iChip].bottom - this.resultData.detections[iChip].top) * imgHeight}px`
},
deleteChip ( iChip ) {
f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => {