Skip to content

Commit 4e1ee66

Browse files
kkbankol-ibmkkbankol-ibm
committed
updating to add heatmap
1 parent bdd2cea commit 4e1ee66

File tree

2 files changed

+63
-21
lines changed

2 files changed

+63
-21
lines changed

‎backend/app.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,15 @@ app.use(require("express-form-data").parse())
6262
// app.use(formData.stream())
6363
app.use('/proxypost', function(req, res) {
6464
// console.log(upload)
65-
// console.log(req)
65+
console.log(req)
66+
console.log("received post request")
6667
console.log("req.headers")
6768
console.log(req.headers)
68-
var url = headers['x-proxy-url']
69+
var url = req.headers['x-proxy-url']
70+
console.log(`url: ${url}`)
71+
// console.log(`req.url: ${req.url}`)
6972
var paiv_url = url + req.url;
73+
console.log(`posting to ${paiv_url}`)
7074
// console.log(fs.createReadStream(req.files['files']['path']))
7175
// console.log(req.files)
7276
var filePath = req.files['blob']['path']
@@ -76,7 +80,8 @@ app.use('/proxypost', function(req, res) {
7680
console.log("readStream")
7781
console.log(readStream)
7882
var formData = {
79-
files: readStream
83+
files: readStream,
84+
containHeatMap: "true"
8085
}
8186
// console.log("posting to " + paiv_url)
8287
// require('request').post({url: paiv_url}).pipe(res)

‎frontend/src/App.vue‎

Lines changed: 55 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<vue-button type="default" v-on:click="showInvokeModal({'function': 'init_user', 'fields': ['ID'], 'title': 'Create User'})">Create User</vue-button> -->
2020
<div style="margin-top:10px">
2121
<vue-button type="default" v-on:click="goHome">Home</vue-button>
22-
<vue-button type="default" v-on:click="showModal({'name': 'upload-modal', 'title': 'Upload'})">Upload Image(s)</vue-button>
22+
<vue-button type="default" v-on:click="filenames = [] ; showModal({'name': 'upload-modal', 'title': 'Upload'})">Upload Image(s)</vue-button>
2323
<vue-button type="default" v-on:click="showModal({'name': 'login-modal', 'fields': ['URL', 'Username', 'Password'], 'title': 'Login'})">Login</vue-button>
2424
<vue-button type="default" v-on:click="downloadImages">Download Image(s)</vue-button>
2525
</div>
@@ -76,13 +76,19 @@
7676
</md-card-header>
7777

7878
<md-card-media md-big>
79-
<img :src="url + inference['thumbnail_path']">
79+
<template v-if="Object.keys(inference).includes('heatmap')">
80+
<img :src="inference['heatmap']">
81+
<img :src="url + inference['thumbnail_path']">
82+
</template>
83+
<template v-else>
84+
<img :src="url + inference['thumbnail_path']">
85+
</template>
8086
</md-card-media>
8187

8288
<md-card-content>
8389
<!-- <template v-if="'processed_frames' in Object.keys(inference)"> -->
84-
<div class="md-subhead">{{inference['status']}}</div>
85-
<div class="md-subhead">{{inference['percent_complete'].toFixed(2)}} %</div>
90+
<div class="md-subhead">Status: {{inference['status']}}</div>
91+
<div class="md-subhead">Progress: {{inference['percent_complete'].toFixed(2)}} %</div>
8692
<!-- </template> -->
8793
</md-card-content>
8894

@@ -93,8 +99,20 @@
9399

94100

95101
<template v-if="inferenceDetails && (Object.keys(inferenceDetails).length > 0) && inferenceDetails[inference._id]">
96-
<div class="md-subhead">Detected Objects</div>
97-
<div>{{Object.keys(inferenceDetails[inference._id]).join(", ")}}</div>
102+
<div class="md-subhead">Detected Objects / Classes</div>
103+
<!-- <div>All: {{inferenceDetails[inference._id]}}</div> -->
104+
<template v-if="inference._id.includes('-')">
105+
<div>{{Object.keys(inferenceDetails[inference._id]).join(", ")}}</div>
106+
</template>
107+
<template v-else>
108+
<template v-for="(value, key) in Object.keys(inferenceDetails[inference._id])">
109+
<template v-if="Object.keys(inferenceDetails[inference._id][value]).includes('score')">
110+
{{value}}: {{inferenceDetails[inference._id][value]['score']}}
111+
</template>
112+
</template>
113+
114+
</template>
115+
98116
</template>
99117
<!-- <div class="md-subhead">Classes: {{inferencedetailed['created_date']}}</div> -->
100118

@@ -627,6 +645,7 @@
627645
var formData = new FormData()
628646
formData.append('blob', file)
629647
formData.append("genCaption", "true")
648+
formData.append("containHeatMap", "true")
630649
var options = {
631650
method: "POST",
632651
body: formData,
@@ -638,6 +657,11 @@
638657
}
639658
console.log("formData")
640659
console.log(formData)
660+
console.log("this.$data.url")
661+
console.log(this.$data.url)
662+
console.log("options")
663+
console.log(options)
664+
641665
console.log("adding file: " + file.name)
642666
// console.log('this.$data.url + "/dlapis/" + this.$data.selectedModel')
643667
// console.log(this.$data.url + "/dlapis/" + this.$data.selectedModel)
@@ -646,41 +670,53 @@
646670
fetch("http://localhost:30000/proxypost" + "/api/dlapis/" + this.$data.selectedModel, options).then((res) => {
647671
console.log("api call complete")
648672
// this.$modal.hide('invoke-modal');
649-
// console.log(res.text())
650-
console.log(res)
651673
res.json().then((result) => {
652674
console.log("json")
653675
console.log(result)
654676
// this.$data.inferences.append(result)
655677
// TODO, this only applies in case of a still image
656-
var labels = Array.from(new Set(result.classified.map((c) => c.label)))
678+
657679
var endpoint = result.imageUrl.split('/uploads')[1]
658680
// result.classified.filter((c) => )
659681
this.$data.inferenceDetails[result.imageMd5] = {}
660-
labels.map((l) => {
661-
var r = result.classified.filter(c => c.label == l)
662-
var count = r.length //Array.from((new Set(r))).length
663-
console.log("count for " + l)
664-
this.$data.inferenceDetails[result.imageMd5][l] = count
665-
})
682+
console.log(JSON.stringify(result))
683+
if (Object.keys(result).includes('classified')) {
684+
// var labels = Array.from(new Set(result.classified.map((c) => c.label)))
685+
var labels = Array.from(new Set(Object.keys(result.classified).map((c) => c)))
686+
687+
labels.map((l) => {
688+
var r = Object.keys(result.classified).filter(c => c.label == l)
689+
var count = r.length //Array.from((new Set(r))).length
690+
console.log("count for " + l)
691+
this.$data.inferenceDetails[result.imageMd5][l] = {"count": count, "score": result.classified[l]}
692+
// this.$data.inferenceDetails[result.imageMd5]['score'] = result.classified[l]
693+
})
694+
console.log("labels")
695+
console.log(labels)
696+
}
666697
698+
if (Object.keys(result).includes('heatmap')) {
699+
var heatmap = result['heatmap']
700+
} else {
701+
var heatmap = ""
702+
}
667703
var inference = {
668704
_id: result.imageMd5,
669705
created_date: (new Date().toJSON()),
670706
thumbnail_path: '/uploads' + endpoint,
671707
status: result['result'],
672708
model: result['webAPIId'],
709+
heatmap: heatmap,
673710
percent_complete: 100
674711
}
675-
console.log("labels")
676-
console.log(labels)
677712
// this.$data.inferenceDetails[result.imageMd5] = //result.classified
678713
console.log("appending inference ")
679714
console.log(inference)
680715
this.$data.inferences.push(inference)
681716
// "http://powerai-vision-ny-service:9080/powerai-vision-ny-api/uploads/temp/ee5f1177-7ff1-4cd5-86d2-60faca266c71/16acd8ad-2008-484b-8f7a-e669621852f3.jpg"
682717
}).catch((err) => {
683718
console.log("error parsing json")
719+
console.log(err)
684720
})
685721
}).catch((err) => {
686722
console.log(err)
@@ -796,6 +832,7 @@
796832
var objects = Object.keys(detections)
797833
var d = []
798834
objects.map((o) => {
835+
console.log("adding object " + o)
799836
var x = Array.from(Array(detections[o].length + 1).keys())
800837
// d['data'].push({
801838
d.push({
@@ -820,7 +857,7 @@
820857
formatCircle(inferenceId) {
821858
console.log(this.$data.inferenceDetails)
822859
console.log("generating line graph for " + inferenceId)
823-
var detections = this.$data.inferenceDetails[inferenceId]
860+
var detections = this.$data.inferenceDetails[inferenceId]['count']
824861
var objects = Object.keys(detections)
825862
var d = {
826863
values: [],

0 commit comments

Comments
 (0)