From 40935a5ab81bfdcea3321a23e174ea54ab8c4850 Mon Sep 17 00:00:00 2001 From: Anatoly Belikov Date: Wed, 30 Jan 2019 18:34:12 +0300 Subject: [PATCH 1/6] vqa service --- src/components/service/ServiceMappings.js | 5 +- src/components/service/VisualQAOpencog.js | 220 ++++++++++++++++++++++ 2 files changed, 224 insertions(+), 1 deletion(-) create mode 100644 src/components/service/VisualQAOpencog.js diff --git a/src/components/service/ServiceMappings.js b/src/components/service/ServiceMappings.js index fab114d72..bb2a44abf 100644 --- a/src/components/service/ServiceMappings.js +++ b/src/components/service/ServiceMappings.js @@ -9,6 +9,7 @@ import OpenNMTRomanceTranslator from './OpenNMTRomanceTranslator.js'; import S2VTVideoCaptioning from './S2VTVideoCaptioning.js'; import YOLOv3ObjectDetection from './YOLOv3ObjectDetection.js'; import Zeta36ChessAlphaZero from './Zeta36ChessAlphaZero.js'; +import VisualQAOpencog from './VisualQAOpencog.js'; import DefaultService from './DefaultService.js'; @@ -25,6 +26,7 @@ export default class SampleServices { this.serviceOrgIDToComponent[this.generateUniqueID("snet", "s2vt-video-captioning")] = S2VTVideoCaptioning; this.serviceOrgIDToComponent[this.generateUniqueID("snet", "yolov3-object-detection")] = YOLOv3ObjectDetection; this.serviceOrgIDToComponent[this.generateUniqueID("snet", "zeta36-chess-alpha-zero")] = Zeta36ChessAlphaZero; + this.serviceOrgIDToComponent[this.generateUniqueID("anatoly.belikov", "opencog-vqa")] = VisualQAOpencog; } generateUniqueID(orgId,serviceId) { @@ -37,6 +39,7 @@ export default class SampleServices { component = DefaultService; } + return component; } -} \ No newline at end of file +} diff --git a/src/components/service/VisualQAOpencog.js b/src/components/service/VisualQAOpencog.js new file mode 100644 index 000000000..28c6b5da1 --- /dev/null +++ b/src/components/service/VisualQAOpencog.js @@ -0,0 +1,220 @@ +import React from 'react'; +import {hasOwnDefinedProperty} from '../../util' +import Button from '@material-ui/core/Button'; + +export default class VisualQAOpencog extends React.Component { + + constructor(props) { + super(props); + this.submitAction = this.submitAction.bind(this); + this.handleServiceName = this.handleServiceName.bind(this); + this.handleFormUpdate = this.handleFormUpdate.bind(this); + + this.state = { + users_guide: "https://github.com/singnet/semantic-vision/tree/master/services/vqa-service", + code_repo: "https://github.com/singnet/semantic-vision/tree/master/services/vqa-service", + reference: "https://github.com/singnet/semantic-vision", + + serviceName: undefined, + methodName: undefined, + + imgPath: undefined, + question: "", + use_pm: false, + + response: undefined + }; + this.isComplete = false; + this.serviceMethods = []; + this.allServices = []; + this.methodsForAllServices = []; + this.parseProps(props); + } + + parseProps(nextProps) { + this.isComplete = nextProps.isComplete; + if (!this.isComplete) { + this.parseServiceSpec(nextProps.serviceSpec); + } else { + console.log(nextProps.response); + if (typeof nextProps.response !== 'undefined') { + this.state.response = nextProps.response; + } + } + } + + parseServiceSpec(serviceSpec) { + const packageName = Object.keys(serviceSpec.nested).find(key => + typeof serviceSpec.nested[key] === "object" && + hasOwnDefinedProperty(serviceSpec.nested[key], "nested")); + + var objects = undefined; + var items = undefined; + if (typeof packageName !== 'undefined') { + items = serviceSpec.lookup(packageName); + objects = Object.keys(items); + } else { + items = serviceSpec.nested; + objects = Object.keys(serviceSpec.nested); + } + + this.allServices.push("Select a service"); + this.methodsForAllServices = []; + objects.map(rr => { + if (typeof items[rr] === 'object' && items[rr] !== null && items[rr].hasOwnProperty("methods")) { + this.allServices.push(rr); + this.methodsForAllServices.push(rr); + + var methods = Object.keys(items[rr]["methods"]); + methods.unshift("Select a method"); + this.methodsForAllServices[rr] = methods; + } + }) + } + + handleFormUpdate(event) { + this.setState({[event.target.name]: event.target.value}) + } + + handleServiceName(event) { + var strService = event.target.value; + this.setState({ + serviceName: strService + }); + console.log("Selected service is " + strService); + var data = this.methodsForAllServices[strService]; + if (typeof data === 'undefined') { + data = []; + } + this.serviceMethods = data; + } + + submitAction() { + let oReq = new XMLHttpRequest(); + oReq.open("GET", this.state.imgPath, true); + oReq.responseType = "blob"; + oReq.onload = function(oEvent) { + let blob = oReq.response; + this.props.callApiCallback(this.state.serviceName, + this.state.methodName, { + image_data: blob, + model: this.state.use_pm + }); + } + } + + renderForm() { + return ( + +
+
Service Name
+
+ +
+
+
+
Method Name
+
+ +
+
+
+
Method Name
+
+ + + + + +
+
+
+
Image URL
+
+ +
+
+
+
Image URL
+
+ +
+
+
+
About
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ + ) + } + + renderComplete() { + let status = "Ok\n"; + let top_5 = "\n"; + let delta_time = "\n"; + + if (typeof this.state.response === "object") { + delta_time = this.state.response.deltaTime + "s\n"; + top_5 = this.state.response.top_5; + } else { + status = this.state.response + "\n"; + } + return ( +
+

Response from service is:

+ 
+                    Status : {status}
+                    Time   : {delta_time}
+                    {top_5}
+
+
+ ); + } + + render() { + if (this.isComplete) + return ( +
+ {this.renderComplete()} +
+ ); + else { + return ( +
+ {this.renderForm()} +
+ ) + } + } +} From cec6fca1800029a497a1fdd77e2ca3050ee5accc Mon Sep 17 00:00:00 2001 From: Anatoly Belikov Date: Thu, 31 Jan 2019 18:42:03 +0300 Subject: [PATCH 2/6] minor fixes --- src/components/service/VisualQAOpencog.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/service/VisualQAOpencog.js b/src/components/service/VisualQAOpencog.js index 28c6b5da1..c951368ef 100644 --- a/src/components/service/VisualQAOpencog.js +++ b/src/components/service/VisualQAOpencog.js @@ -91,16 +91,18 @@ export default class VisualQAOpencog extends React.Component { submitAction() { let oReq = new XMLHttpRequest(); + let bl = this; oReq.open("GET", this.state.imgPath, true); oReq.responseType = "blob"; oReq.onload = function(oEvent) { let blob = oReq.response; - this.props.callApiCallback(this.state.serviceName, - this.state.methodName, { + bl.props.callApiCallback(bl.state.serviceName, + bl.state.methodName, { image_data: blob, - model: this.state.use_pm + model: bl.state.use_pm }); } + oReq.send(null); } renderForm() { @@ -128,15 +130,13 @@ export default class VisualQAOpencog extends React.Component {
-
Method Name
+
Use pattern matcher or URE
- - - + +
@@ -149,7 +149,7 @@ export default class VisualQAOpencog extends React.Component {
-
Image URL
+
Question
Date: Thu, 7 Feb 2019 17:54:39 +0300 Subject: [PATCH 3/6] use image uploading component --- src/components/service/VisualQAOpencog.js | 47 +++++++++++++---------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/src/components/service/VisualQAOpencog.js b/src/components/service/VisualQAOpencog.js index c951368ef..4ddb79b9f 100644 --- a/src/components/service/VisualQAOpencog.js +++ b/src/components/service/VisualQAOpencog.js @@ -1,6 +1,8 @@ import React from 'react'; import {hasOwnDefinedProperty} from '../../util' import Button from '@material-ui/core/Button'; +import SNETImageUpload from "./standardComponents/SNETImageUpload"; + export default class VisualQAOpencog extends React.Component { @@ -9,6 +11,7 @@ export default class VisualQAOpencog extends React.Component { this.submitAction = this.submitAction.bind(this); this.handleServiceName = this.handleServiceName.bind(this); this.handleFormUpdate = this.handleFormUpdate.bind(this); + this.getImageData = this.getImageData.bind(this); this.state = { users_guide: "https://github.com/singnet/semantic-vision/tree/master/services/vqa-service", @@ -18,7 +21,7 @@ export default class VisualQAOpencog extends React.Component { serviceName: undefined, methodName: undefined, - imgPath: undefined, + imageData: undefined, question: "", use_pm: false, @@ -89,20 +92,17 @@ export default class VisualQAOpencog extends React.Component { this.serviceMethods = data; } - submitAction() { - let oReq = new XMLHttpRequest(); - let bl = this; - oReq.open("GET", this.state.imgPath, true); - oReq.responseType = "blob"; - oReq.onload = function(oEvent) { - let blob = oReq.response; - bl.props.callApiCallback(bl.state.serviceName, - bl.state.methodName, { - image_data: blob, - model: bl.state.use_pm - }); - } - oReq.send(null); + getImageData(imgData) { + this.state.imageData = imgData; + } + + submitAction(){ + this.props.callApiCallback(this.state.serviceName, + this.state.methodName, { + image_data: this.state.imageData, + use_pm: this.state.use_pm, + question: this.state.question + }); } renderForm() { @@ -143,9 +143,10 @@ export default class VisualQAOpencog extends React.Component {
Image URL
- +
+ +
+
@@ -183,10 +184,14 @@ export default class VisualQAOpencog extends React.Component { let status = "Ok\n"; let top_5 = "\n"; let delta_time = "\n"; - + let answer = "\n"; if (typeof this.state.response === "object") { delta_time = this.state.response.deltaTime + "s\n"; - top_5 = this.state.response.top_5; + if (this.state.response.ok) { + answer = "answer " + this.state.response.answer; + } else { + answer = "Request failed with " + this.state.response.error_message; + } } else { status = this.state.response + "\n"; } @@ -196,7 +201,7 @@ export default class VisualQAOpencog extends React.Component { 
                     Status : {status}
                     Time   : {delta_time}
-                    {top_5}
+                    {answer}
); From c0f975158a5e90d6b6d4110dbc5c888012c714ca Mon Sep 17 00:00:00 2001 From: anand Date: Sun, 10 Feb 2019 19:11:05 +0530 Subject: [PATCH 4/6] Added method componentWillReceiveProps and removed the BaseService --- src/components/service/BaseService.js | 87 ------------------------ src/components/service/ExampleService.js | 82 +++++++++++++++++++++- 2 files changed, 79 insertions(+), 90 deletions(-) delete mode 100644 src/components/service/BaseService.js diff --git a/src/components/service/BaseService.js b/src/components/service/BaseService.js deleted file mode 100644 index 5c684a7a5..000000000 --- a/src/components/service/BaseService.js +++ /dev/null @@ -1,87 +0,0 @@ -import React from 'react'; -import {hasOwnDefinedProperty} from '../../util' - -export default class BaseService extends React.Component { - - constructor(props) { - super(props); - - this.isComplete = false; - this.serviceMethods = []; - this.allServices = []; - this.methodsForAllServices = []; - this.parseProps(props); - } - - componentWillReceiveProps(nextProps) { - console.log("Updating in base class") - if(this.isComplete !== nextProps.isComplete) { - this.parseProps(nextProps); - } - } - - parseProps(nextProps) { - this.isComplete = nextProps.isComplete; - if (!this.isComplete) { - this.parseServiceSpec(nextProps.serviceSpec); - } else { - if (typeof nextProps.response !== 'undefined') { - if (typeof nextProps.response === 'string') { - this.state.response = nextProps.response; - } else { - this.state.response = nextProps.response.value; - } - } - } - } - - parseServiceSpec(serviceSpec) { - const packageName = Object.keys(serviceSpec.nested).find(key => - typeof serviceSpec.nested[key] === "object" && - hasOwnDefinedProperty(serviceSpec.nested[key], "nested")); - - var objects = undefined; - var items = undefined; - if (typeof packageName !== 'undefined') { - items = serviceSpec.lookup(packageName); - objects = Object.keys(items); - } else { - items = serviceSpec.nested; - objects = Object.keys(serviceSpec.nested); - } - this.allServices.push("Select a service"); - this.methodsForAllServices = []; - objects.map(rr => { - if (typeof items[rr] === 'object' && items[rr] !== null && items[rr].hasOwnProperty("methods")) { - this.allServices.push(rr); - this.methodsForAllServices.push(rr); - var methods = Object.keys(items[rr]["methods"]); - if (methods.length > 1) { - methods.unshift("Select a method"); - } - this.methodsForAllServices[rr] = methods; - } - }) - } - - handleServiceName(strService) { - this.serviceMethods.length = 0; - if (typeof strService !== 'undefined' && strService !== 'Select a service') { - let data = Object.values(this.methodsForAllServices[strService]); - if (typeof data !== 'undefined') { - this.serviceMethods= data; - } - } - } - - onKeyPressvalidator(event) { - const keyCode = event.keyCode || event.which; - if (!(keyCode == 8 || keyCode == 46) && (keyCode < 48 || keyCode > 57)) { - event.preventDefault() - } else { - let dots = event.target.value.split('.'); - if (dots.length > 1 && keyCode == 46) - event.preventDefault() - } - } -} diff --git a/src/components/service/ExampleService.js b/src/components/service/ExampleService.js index d0dba218c..26beaafcc 100644 --- a/src/components/service/ExampleService.js +++ b/src/components/service/ExampleService.js @@ -1,8 +1,7 @@ import React from 'react'; import {hasOwnDefinedProperty} from '../../util' -import BaseService from './BaseService'; -export default class ExampleService extends BaseService { +export default class ExampleService extends React.Component { constructor(props) { super(props); @@ -17,8 +16,63 @@ export default class ExampleService extends BaseService { a: 0, b: 0 }; + + this.isComplete = false; + this.serviceMethods = []; + this.allServices = []; + this.methodsForAllServices = []; + this.parseProps(props); } + componentWillReceiveProps(nextProps) { + if(this.isComplete !== nextProps.isComplete) { + this.parseProps(nextProps); + } + } + + parseProps(nextProps) { + this.isComplete = nextProps.isComplete; + if (!this.isComplete) { + this.parseServiceSpec(nextProps.serviceSpec); + } else { + if (typeof nextProps.response !== 'undefined') { + if (typeof nextProps.response === 'string') { + this.state.response = nextProps.response; + } else { + this.state.response = nextProps.response.value; + } + } + } + } + + parseServiceSpec(serviceSpec) { + const packageName = Object.keys(serviceSpec.nested).find(key => + typeof serviceSpec.nested[key] === "object" && + hasOwnDefinedProperty(serviceSpec.nested[key], "nested")); + + var objects = undefined; + var items = undefined; + if (typeof packageName !== 'undefined') { + items = serviceSpec.lookup(packageName); + objects = Object.keys(items); + } else { + items = serviceSpec.nested; + objects = Object.keys(serviceSpec.nested); + } + + this.allServices.push("Select a service"); + this.methodsForAllServices = []; + objects.map(rr => { + if (typeof items[rr] === 'object' && items[rr] !== null && items[rr].hasOwnProperty("methods")) { + this.allServices.push(rr); + this.methodsForAllServices.push(rr); + + var methods = Object.keys(items[rr]["methods"]); + methods.unshift("Select a method"); + this.methodsForAllServices[rr] = methods; + } + }) + } handleFormUpdate(event) { this.setState({ @@ -31,7 +85,29 @@ export default class ExampleService extends BaseService { this.setState({ serviceName: strService }); - super.handleServiceName(strService); + this.serviceMethods.length = 0; + if (typeof strService !== 'undefined' && strService !== 'Select a service') { + let data = Object.values(this.methodsForAllServices[strService]); + if (typeof data !== 'undefined') { + this.serviceMethods= data; + } + } + } + + componentWillReceiveProps(nextProps) { + if(this.isComplete !== nextProps.isComplete) { + this.parseProps(nextProps); + } + } + onKeyPressvalidator(event) { + const keyCode = event.keyCode || event.which; + if (!(keyCode == 8 || keyCode == 46) && (keyCode < 48 || keyCode > 57)) { + event.preventDefault() + } else { + let dots = event.target.value.split('.'); + if (dots.length > 1 && keyCode == 46) + event.preventDefault() + } } submitAction() { From 184e30ad95f69583341262413d33c7088025cb5f Mon Sep 17 00:00:00 2001 From: anand Date: Sun, 10 Feb 2019 19:15:22 +0530 Subject: [PATCH 5/6] removed the method componentWillReceiveProps --- src/components/service/ServiceMappings.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/service/ServiceMappings.js b/src/components/service/ServiceMappings.js index fe3456430..dbe0faf52 100644 --- a/src/components/service/ServiceMappings.js +++ b/src/components/service/ServiceMappings.js @@ -40,11 +40,7 @@ export default class SampleServices { generateUniqueID(orgId,serviceId) { return orgId + "__$%^^%$__" + serviceId; } - componentWillReceiveProps(nextProps) { - if(this.isComplete !== nextProps.isComplete) { - this.parseProps(nextProps); - } - } + getComponent(orgId, serviceId) { let component = this.serviceOrgIDToComponent[this.generateUniqueID(orgId, serviceId)]; if(typeof component === 'undefined') { From aa9ed7490f215dfbf08a7c421768fc0196fa1e68 Mon Sep 17 00:00:00 2001 From: anand Date: Sun, 10 Feb 2019 19:21:14 +0530 Subject: [PATCH 6/6] removed the duplicate method componentWillReceiveProps --- src/components/service/ExampleService.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/service/ExampleService.js b/src/components/service/ExampleService.js index 26beaafcc..bce992433 100644 --- a/src/components/service/ExampleService.js +++ b/src/components/service/ExampleService.js @@ -94,11 +94,6 @@ export default class ExampleService extends React.Component { } } - componentWillReceiveProps(nextProps) { - if(this.isComplete !== nextProps.isComplete) { - this.parseProps(nextProps); - } - } onKeyPressvalidator(event) { const keyCode = event.keyCode || event.which; if (!(keyCode == 8 || keyCode == 46) && (keyCode < 48 || keyCode > 57)) {