Object detection

[abdou31]

Hello ,
Can you please make a tutorial of object detection problem ??

[imfing]

Please take a look at this issue #13. It might help

[IdeaKing]

@mtobeiyf I was able to go through the legacy version and create the object detection version. But I would really like an object detection version for the main (newer) page. Can you help walk me through any needed modifications? I don't know where to start as I have already tried creating an object detection version without anything working.

[imfing]

@IdeaKing
It's basically similar to #13
First, you need to modify the prediction result as an image with bounding boxes.
https://github.com/mtobeiyf/keras-flask-deploy-webapp/blob/39144f7304c2fa76229e62b4b00f244115f4a8e4/app.py#L57-L58

In the predict() function in app.py, serialize the output image into a base64 string, replace the result with the base64 image.
https://github.com/mtobeiyf/keras-flask-deploy-webapp/blob/39144f7304c2fa76229e62b4b00f244115f4a8e4/app.py#L87

Modify the displayResult function in static/main.js. Here, you'll get the result from the above predict() function.
https://github.com/mtobeiyf/keras-flask-deploy-webapp/blob/39144f7304c2fa76229e62b4b00f244115f4a8e4/static/main.js#L131-L137

All you have to do is to modify the image-display using the displayImage() function.
Previously, I used this function to display the same image you choose from your computer. Now display it with your detection result image.
https://github.com/mtobeiyf/keras-flask-deploy-webapp/blob/39144f7304c2fa76229e62b4b00f244115f4a8e4/static/main.js#L96

Provide it with the returned base64 image in the result field. For example:

function displayResult(data) { 
  hide(loader); 
  displayImage(data.result, "image-display");
  imageDisplay.classList.remove("loading");
}

[IdeaKing]

@mtobeiyf Thank you so so much! It works perfectly. However, there's one problem, the output box is shaded. What should I change? Here's an example:

Btw, I think you should also paste your previous comment in the readme after you close this issue/topic.

[imfing]

@IdeaKing oh, just remove the loading class for the imageDisplay element at the last step:

function displayResult(data) { 
  hide(loader); 
  displayImage(data.result, "image-display");
  imageDisplay.classList.remove("loading");
}

I've corrected the above answer.

[IdeaKing]

@mtobeiyf Great! Thank you for all of the help.

[cuongngm]

oh, i understood problem and solved, it worked very well, many tks :)) Vào Th 3, 15 thg 9, 2020 vào lúc 06:39 Thomas Chia < [email protected]> đã viết:

…

@counghip0908 This is due to browser cache. Turn on dev tools in your browser (for Chrome the shortcut is F12) and remove all cache for your website and then reload. All of @mtobeiyf steps work very well. On Mon, Sep 14, 2020 at 12:05 AM cuonghip0908 ***@***.***> wrote: > @mtobeiyf <https://github.com/mtobeiyf> by this way, we don't need to > edit file index.html, right? i replaced result by annotated_img in the > predict function (app.py) and edit displayResult function in main.js by > your tutorials but it doesn't work? can you help me? > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > < #22 (comment) >, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AP2RVZVBGOA7NNXMP25TY4LSFWI7RANCNFSM4OGGSCNA > > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#22 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMXE2E3UGDNRVPLL6VFBIU3SF2SRLANCNFSM4OGGSCNA> .