Justin Georgi
e1102d0baf
Moving panel to page element was resulting in opening errors after more than one page opened. viewedAll computer property was returning errors before result data was fetched. Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#65
535 lines
18 KiB
Vue
535 lines
18 KiB
Vue
<template>
|
|
<f7-page name="detect" :id="detectorName + '-detect-page'">
|
|
<!-- Top Navbar -->
|
|
<f7-navbar :sliding="false" back-link="true" back-link-url="/" back-link-force>
|
|
<f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
|
|
</f7-navbar>
|
|
<f7-block class="detect-grid">
|
|
<div class="image-container">
|
|
<canvas id="im-draw" ref="image_cvs" :style="`display: ${imageLoaded ? 'block' : 'none'}; flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat`" />
|
|
<SvgIcon v-if="!imageView" icon="image" fill-color="var(--avn-theme-color)" @click="selectImage" />
|
|
<div ref="structure_box" style="border: solid 3px var(--avn-structure-box-color); position: absolute; display: none; box-sizing: border-box;" />
|
|
</div>
|
|
<div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
|
|
<f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
|
|
:class="(result.resultIndex == selectedChip) ? 'selected-chip' : ''"
|
|
:text="result.label"
|
|
media=" "
|
|
:tooltip="result.confidence.toFixed(1)"
|
|
deleteable
|
|
@click="selectChip(result.resultIndex)"
|
|
@delete="deleteChip(result.resultIndex)"
|
|
:style="chipGradient(result.confidence)"
|
|
/>
|
|
<span v-if="numResults == 0" style="height: var(--f7-chip-height); font-size: calc(var(--f7-chip-height) - 4px); font-weight: bolder; margin: 2px;">No results.</span>
|
|
</div>
|
|
<div v-if="showDetectSettings" class="detect-inputs" style="grid-area: detect-settings;">
|
|
<f7-range class="level-slide-horz" :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 50px"/>
|
|
<f7-range class="level-slide-vert" vertical :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 50px"/>
|
|
<f7-button @click="() => detectPanel = !detectPanel" :panel-open="!detectPanel && `#${detectorName}-settings`" :panel-close="detectPanel && `#${detectorName}-settings`">
|
|
<SvgIcon icon="check_list"/>
|
|
</f7-button>
|
|
<f7-button @click="setData">
|
|
<SvgIcon icon="refresh_search"/>
|
|
</f7-button>
|
|
</div>
|
|
<f7-segmented class="image-menu" raised>
|
|
<f7-button popover-open="#region-popover">
|
|
<RegionIcon :region="activeRegion" />
|
|
</f7-button>
|
|
<f7-button popover-open="#capture-popover">
|
|
<SvgIcon icon="image"/>
|
|
</f7-button>
|
|
<f7-button @click="() => showDetectSettings = !showDetectSettings" :class="(imageLoaded) ? '' : 'disabled'">
|
|
<SvgIcon icon="visibility"/>
|
|
</f7-button>
|
|
<f7-button :class="(numResults && uploadDirty && viewedAll) ? '' : 'disabled'" @click="submitData">
|
|
<SvgIcon :icon="(uploadUid) ? 'cloud_done' : 'cloud_upload'"/>
|
|
</f7-button>
|
|
</f7-segmented>
|
|
<input type="file" ref="image_chooser" @change="getImage()" accept="image/*" capture="environment" style="display: none;"/>
|
|
</f7-block>
|
|
|
|
<f7-panel :id="detectorName + '-settings'" right cover :backdrop="false" :container-el="`#${detectorName}-detect-page`">
|
|
<f7-page>
|
|
<f7-navbar title="Detection Settings"></f7-navbar>
|
|
<f7-list>
|
|
<f7-list-button title="Close List" @click="() => detectPanel = false" :panel-close="`#${detectorName}-settings`"></f7-list-button>
|
|
<f7-list-item checkbox checked checkbox-icon="end" title="All/none" @change="selectAll"></f7-list-item>
|
|
<f7-list-item v-for="structure in detectorLabels" :key="structure.name" checkbox checkbox-icon="end" v-model:checked="structure.detect" :title="structure.name"></f7-list-item>
|
|
</f7-list>
|
|
</f7-page>
|
|
</f7-panel>
|
|
|
|
<f7-popover id="region-popover" class="popover-button-menu">
|
|
<f7-segmented raised class="segment-button-menu">
|
|
<f7-button style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
|
|
<RegionIcon :region="0" />
|
|
</f7-button>
|
|
<f7-button style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
|
|
<RegionIcon :region="1" />
|
|
</f7-button>
|
|
<f7-button style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
|
|
<RegionIcon :region="2" />
|
|
</f7-button>
|
|
<f7-button class="disabled" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
|
|
<RegionIcon :region="3" />
|
|
</f7-button>
|
|
</f7-segmented>
|
|
</f7-popover>
|
|
|
|
<f7-popover id="capture-popover" class="popover-button-menu">
|
|
<f7-segmented raised class="segment-button-menu">
|
|
<f7-button style="height: auto; width: auto;" popover-close="#capture-popover" class="disabled" @click="videoStream">
|
|
<SvgIcon icon="videocam"/>
|
|
</f7-button>
|
|
<f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('camera')">
|
|
<SvgIcon icon="photo_camera" />
|
|
</f7-button>
|
|
<f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('file')">
|
|
<SvgIcon icon="photo_library" />
|
|
</f7-button>
|
|
</f7-segmented>
|
|
</f7-popover>
|
|
|
|
</f7-page>
|
|
</template>
|
|
|
|
<style>
|
|
.detect-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr auto auto min-content;
|
|
grid-template-areas:
|
|
"image-view"
|
|
"result-view"
|
|
"detect-settings"
|
|
"menu-view";
|
|
justify-items: center;
|
|
height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
|
|
max-height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
|
|
}
|
|
|
|
.image-container {
|
|
grid-area: image-view;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
position: relative;
|
|
display: flex;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.popover-button-menu {
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
width: auto;
|
|
}
|
|
|
|
.segment-button-menu {
|
|
flex-wrap: nowrap;
|
|
flex-direction: column;
|
|
max-height: 100%;
|
|
min-height: 0px;
|
|
}
|
|
|
|
.chip-media {
|
|
background-color: var(--chip-media-background) !important;
|
|
}
|
|
|
|
.chip-results {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
padding: 10px;
|
|
--f7-chip-border-radius: 16px;
|
|
--f7-chip-media-size: 32px;
|
|
--f7-chip-font-weight: normal;
|
|
}
|
|
|
|
.chip-results .chip {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.selected-chip {
|
|
font-weight: 500;
|
|
box-shadow: 4px 4px 1px var(--avn-theme-color);
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
|
|
.detect-inputs {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 5px;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
min-width: 192px;
|
|
}
|
|
|
|
.level-slide-vert {
|
|
display: none;
|
|
}
|
|
|
|
.image-menu {
|
|
grid-area: menu-view;
|
|
margin: 5px;
|
|
/*width: 90%;*/
|
|
max-width: 400px;
|
|
min-width: 192px;
|
|
}
|
|
|
|
.image-menu .button {
|
|
aspect-ratio: 1;
|
|
height: auto;
|
|
padding: 5px;
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
.image-menu > .button > svg {
|
|
aspect-ratio: 1;
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.segment-button-menu .button {
|
|
padding: 8px;
|
|
aspect-ratio: 1;
|
|
width: auto;
|
|
flex: 1 1 0%;
|
|
max-height: 100px;
|
|
max-width: 100px;
|
|
}
|
|
|
|
@media (max-height: 450px) and (orientation: landscape) {
|
|
.detect-grid {
|
|
grid-template-columns: minmax(0,1fr) max-content auto auto;
|
|
grid-template-rows: calc(100vh - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - 64px);
|
|
grid-template-areas:
|
|
"image-view result-view detect-settings menu-view";
|
|
justify-items: stretch;
|
|
align-items: stretch;
|
|
height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
|
|
max-height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
|
|
position: relative;
|
|
}
|
|
|
|
.chip-results {
|
|
flex-direction: column;
|
|
max-height: 100%;
|
|
justify-self: start;
|
|
flex-wrap: nowrap;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.detect-inputs {
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
max-width: 72px;
|
|
}
|
|
|
|
.level-slide-horz {
|
|
display: none;
|
|
}
|
|
|
|
.level-slide-vert {
|
|
display: block;
|
|
}
|
|
|
|
|
|
.image-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.image-menu {
|
|
flex-direction: column;
|
|
aspect-ratio: .25;
|
|
width: auto;
|
|
min-width: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.image-menu .button {
|
|
aspect-ratio: 1;
|
|
width: auto;
|
|
height: 100%;
|
|
flex: 1 1 0%;
|
|
border-bottom: 1px solid var(--f7-segmented-raised-divider-color);
|
|
border-bottom-left-radius: 0px !important;
|
|
}
|
|
|
|
.segment-button-menu {
|
|
flex-direction: row;
|
|
max-height: 100%;
|
|
min-height: 0px;
|
|
}
|
|
|
|
.segment-button-menu .button {
|
|
height: auto;
|
|
flex: 1 1 0%;
|
|
max-height: 100px;
|
|
max-width: 100px;
|
|
}
|
|
|
|
.button > svg {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { f7 } from 'framework7-vue'
|
|
|
|
import RegionIcon from '../components/region-icon.vue'
|
|
import SvgIcon from '../components/svg-icon.vue'
|
|
|
|
import submitMixin from './submit-mixin'
|
|
|
|
export default {
|
|
mixins: [submitMixin],
|
|
props: {
|
|
f7route: Object,
|
|
},
|
|
components: {
|
|
RegionIcon,
|
|
SvgIcon
|
|
},
|
|
data () {
|
|
return {
|
|
regions: ['Thorax','Abdomen/Pelvis','Limbs','Head and Neck'],
|
|
resultData: {},
|
|
selectedChip: -1,
|
|
activeRegion: 4,
|
|
imageLoaded: false,
|
|
imageView: null,
|
|
imageLoadMode: "environment",
|
|
detectPanel: false,
|
|
showDetectSettings: false,
|
|
detectorName: '',
|
|
detectorLevel: 50,
|
|
detectorLabels: [],
|
|
serverSettings: {},
|
|
isCordova: !!window.cordova,
|
|
uploadUid: null,
|
|
uploadDirty: false
|
|
}
|
|
},
|
|
created () {
|
|
switch (this.f7route.params.region) {
|
|
case 'thorax':
|
|
this.activeRegion = 0
|
|
this.detectorName = 'thorax'
|
|
break;
|
|
case 'abdomen':
|
|
this.activeRegion = 1
|
|
this.detectorName = 'combined'
|
|
break;
|
|
case 'limbs':
|
|
this.activeRegion = 2
|
|
this.detectorName = 'defaultNew'
|
|
break;
|
|
case 'head':
|
|
this.activeRegion = 3
|
|
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(xhr.response)
|
|
return;
|
|
}
|
|
var detectors = JSON.parse(xhr.response).detectors
|
|
var findLabel = detectors
|
|
.find( d => { return d.name == self.detectorName } )?.labels
|
|
.filter( l => { return l != "" } ).sort()
|
|
.map( l => { return {'name': l, 'detect': true} } )
|
|
self.detectorLabels = findLabel || []
|
|
}
|
|
xhr.send()
|
|
}
|
|
},
|
|
computed: {
|
|
showResults () {
|
|
var filteredResults = this.resultData.detections
|
|
if (!filteredResults) return []
|
|
var allSelect = this.detectorLabels.every( s => { return s.detect } )
|
|
var selectedLabels = this.detectorLabels
|
|
.filter( l => { return l.detect })
|
|
.map( l => { return l.name })
|
|
filteredResults.forEach( (d, i) => {
|
|
filteredResults[i].resultIndex = i
|
|
filteredResults[i].aboveThreshold = d.confidence >= this.detectorLevel
|
|
filteredResults[i].isSearched = allSelect || selectedLabels.includes(d.label)
|
|
})
|
|
return filteredResults
|
|
},
|
|
numResults () {
|
|
return this.showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted }).length
|
|
},
|
|
viewedAll () {
|
|
if (this.resultData && this.resultData.detections) {
|
|
return this.resultData.detections
|
|
.filter( s => { return s.confidence >= this.detectorLevel})
|
|
.every( s => { return s.beenViewed })
|
|
} else {
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
chipGradient (confVal) {
|
|
return `--chip-media-background: hsl(${confVal / 100 * 120}deg 100% 50%)`
|
|
},
|
|
setData () {
|
|
var self = this
|
|
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')
|
|
xhr.onload = function () {
|
|
if (this.status !== 200) {
|
|
//this.response.text().then(function(message){alert(message)})
|
|
console.log(xhr.response)
|
|
return;
|
|
}
|
|
self.resultData = JSON.parse(xhr.response)
|
|
self.uploadDirty = true
|
|
}
|
|
|
|
var doodsData = {
|
|
"detector_name": this.detectorName,
|
|
"detect": {
|
|
"*": 1
|
|
},
|
|
"data": this.imageView.src.split(',')[1]
|
|
}
|
|
|
|
xhr.send(JSON.stringify(doodsData))
|
|
} else {
|
|
//TODO
|
|
f7.dialog.alert('Using built-in model')
|
|
}
|
|
},
|
|
selectAll (ev) {
|
|
if (ev.target.checked) {
|
|
this.detectorLabels.forEach( s => s.detect = true )
|
|
} else {
|
|
this.detectorLabels.forEach( s => s.detect = false )
|
|
}
|
|
},
|
|
selectImage (mode) {
|
|
this.imageLoadMode = mode
|
|
if (mode == "camera") {
|
|
this.$refs.image_chooser.setAttribute("capture","environment")
|
|
} else {
|
|
this.$refs.image_chooser.removeAttribute("capture")
|
|
}
|
|
if (this.isCordova && mode == "camera") {
|
|
navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true });
|
|
} else {
|
|
var loadResult = this.$refs.image_chooser.click()
|
|
}
|
|
},
|
|
onFail (message) {
|
|
alert(`Camera fail: ${message}`)
|
|
},
|
|
selectChip ( iChip ) {
|
|
const [imCanvas, imageCtx] = this.resetView()
|
|
|
|
if (this.selectedChip == iChip) {
|
|
this.selectedChip = -1
|
|
return
|
|
}
|
|
|
|
var imgWidth
|
|
var imgHeight
|
|
this.selectedChip = iChip
|
|
var imgAspect = this.imageView.width / this.imageView.height
|
|
var rendAspect = imCanvas.width / imCanvas.height
|
|
if (imgAspect >= rendAspect) {
|
|
imgWidth = imCanvas.width
|
|
imgHeight = imCanvas.width / imgAspect
|
|
} else {
|
|
imgWidth = imCanvas.height * imgAspect
|
|
imgHeight = imCanvas.height
|
|
}
|
|
var boxLeft = (imCanvas.width - imgWidth) / 2 + this.resultData.detections[iChip].left * imgWidth
|
|
var boxTop = (imCanvas.height - imgHeight) / 2 + this.resultData.detections[iChip].top * imgHeight
|
|
var boxWidth = (Math.min(this.resultData.detections[iChip].right, 1) - Math.max(this.resultData.detections[iChip].left, 0)) * imgWidth
|
|
var boxHeight = (Math.min(this.resultData.detections[iChip].bottom, 1) - Math.max(this.resultData.detections[iChip].top, 0)) * imgHeight
|
|
imageCtx.strokeRect(boxLeft,boxTop,boxWidth,boxHeight)
|
|
this.resultData.detections[iChip].beenViewed = true
|
|
},
|
|
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?`, () => {
|
|
this.resetView()
|
|
this.resultData.detections.splice(iChip, 1)
|
|
this.selectedChip = -1
|
|
this.uploadDirty = true
|
|
});
|
|
},
|
|
resetView () {
|
|
const imCanvas = this.$refs.image_cvs
|
|
const imageCtx = imCanvas.getContext("2d")
|
|
imCanvas.width = imCanvas.clientWidth
|
|
imCanvas.height = imCanvas.clientHeight
|
|
imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
|
|
imageCtx.strokeStyle = 'yellow'
|
|
imageCtx.lineWidth = 3
|
|
return [imCanvas, imageCtx]
|
|
},
|
|
getImage (searchImage) {
|
|
let loadImage =new Promise(resolve => {
|
|
if (this.isCordova && this.imageLoadMode == "camera") {
|
|
resolve('data:image/jpg;base64,' + searchImage)
|
|
} else {
|
|
const searchImage = this.$refs.image_chooser.files[0]
|
|
var reader = new FileReader()
|
|
reader.addEventListener("loadend", () => {
|
|
resolve(reader.result)
|
|
})
|
|
reader.readAsDataURL(searchImage)
|
|
}
|
|
})
|
|
loadImage.then((imgData) => {
|
|
this.imageLoaded = true
|
|
this.resultData = {}
|
|
this.imageView = new Image()
|
|
this.imageView.src = imgData
|
|
return(this.imageView.decode())
|
|
}).then( () => {
|
|
const [imCanvas, _] = this.resetView()
|
|
imCanvas.style['background-image'] = `url(${this.imageView.src})`
|
|
this.setData()
|
|
}).catch((e) => {
|
|
console.log(e.message)
|
|
f7.dialog.alert(`Error loading image: ${e.message}`)
|
|
})
|
|
},
|
|
videoStream() {
|
|
//TODO
|
|
return null
|
|
},
|
|
async submitData () {
|
|
var uploadData = this.showResults
|
|
.filter( d => { return d.aboveThreshold && d.isSearched && !d.isDeleted })
|
|
.map( r => { return {"top": r.top, "left": r.left, "bottom": r.bottom, "right": r.right, "label": r.label}})
|
|
this.uploadUid = await this.uploadData(this.imageView.src.split(',')[1],uploadData,this.uploadUid)
|
|
if (this.uploadUid) { this.uploadDirty = false }
|
|
},
|
|
onLevelChange(value) {
|
|
this.detectorLevel = value
|
|
}
|
|
}
|
|
}
|
|
</script> |