[Opencv.js doc] Init commit to add image classification example in op… by akineeic · Pull Request #343 · huningxin/opencv

akineeic · 2020-06-21T09:22:36Z

To fix #308

Pull Request Readiness Checklist

See details at https://github.com/opencv/opencv/wiki/How_to_contribute#making-a-good-pull-request

I agree to contribute to the project under OpenCV (BSD) License.
To the best of my knowledge, the proposed patch is not based on a code under GPL or other license that is incompatible with OpenCV
The PR is proposed to proper branch
There is reference to original bug report and related work
There is accuracy test, performance test and test data in opencv_extra repository, if applicable
Patch to opencv_extra has the same branch name.
The feature is well documented and sample code can be built with the project CMake

…encv.js tutorial

akineeic · 2020-06-21T09:36:09Z

Sorry for the late PR. I have divided the whole code into several functions. But I can't access the functions declared in the code editor area, so the functions haven't been put into the code editor yet. I'll try to fix this problem.

huningxin

Thanks for the PR. I left some comments inline. For the label and image files, what are their license? Are you able to use some existing ones within opencv repo?

doc/js_tutorials/js_tutorials.markdown

doc/js_tutorials/js_dnn/js_table_of_contents_dnn.markdown

doc/js_tutorials/js_assets/js_image_classification.html

huningxin · 2020-06-29T01:08:54Z

Ping @akineeic , are there any updates on this PR after we synced in last week?

akineeic · 2020-06-29T01:48:21Z

Ping @akineeic , are there any updates on this PR after we synced in last week?

I put the function into the code snippet and the example works well now. But I'm still adjust the web page and I'll update soon.

…ns into code snippet.

huningxin · 2020-06-30T07:33:57Z

@akineeic , is this PR ready for the next review?

akineeic · 2020-06-30T10:24:25Z

@akineeic , is this PR ready for the next review?

Yes, please take a look and try to build the doc to see the web page. I'm still trying to write a json file to show the model information in the web page.

huningxin · 2020-06-30T14:20:12Z

I can try your example and let you know my feedback.

huningxin · 2020-07-01T07:07:41Z

There is a layout issue when uploading big image.

huningxin

Thanks for the update. I've finished my review and left some comments. Please take a look.

huningxin · 2020-07-01T06:07:30Z

doc/js_tutorials/js_dnn/js_table_of_contents_dnn.markdown

@@ -0,0 +1,6 @@
+DNN Module application {#tutorial_js_table_of_contents_dnn}


Please change the title to "Deep Neural Networks (dnn module)"

huningxin · 2020-07-01T06:08:57Z

doc/js_tutorials/js_tutorials.markdown

+-   @subpage tutorial_js_table_of_contents_dnn
+
+    In this section you
+    will see several examples of dnn module.


Please change to "These tutorials show how to use dnn module in JavaScript"

huningxin · 2020-07-01T06:10:42Z

doc/js_tutorials/js_dnn/js_image_classification/js_image_classification.markdown

+Goal
+----
+
+- learn the basic pipeline of DNN module, like image processing, model import, inference, etc.


Please change to "In this tutorial you will learn how to use OpenCV.js dnn module for image classification."

huningxin · 2020-07-01T06:10:49Z

doc/js_tutorials/js_dnn/js_image_classification/js_image_classification.markdown

+Image Classification example {#tutorial_js_image_classification}
+=======================================
+
+Goal


Introduction

huningxin · 2020-07-01T07:24:33Z

doc/js_tutorials/js_assets/js_image_classification.html

+<h2>Image Classification Example</h2>
+<p>
+    This tutorial show you how to write an image classification example with OpenCV.js.<br>
+    Click <b>Try it</b> button to see the result. You can choose any other image.<br>


other images

huningxin · 2020-07-01T07:36:06Z

doc/js_tutorials/js_assets/js_image_classification.html

+<script id="codeSnippet1" type="text/code-snippet">
+loadLables = function(labelsUrl){
+    document.getElementById('status').innerHTML = 'Loading classification labels';    
+    let request = new XMLHttpRequest();


Please use fetch API to implement.

huningxin · 2020-07-01T07:36:27Z

doc/js_tutorials/js_assets/js_image_classification.html

+</script>
+
+<script id="codeSnippet1" type="text/code-snippet">
+loadLables = function(labelsUrl){


Please make this API return the labels instead of setting some global variables.

huningxin · 2020-07-01T07:36:49Z

doc/js_tutorials/js_assets/js_image_classification.html

+</script>
+
+<script id="codeSnippet1" type="text/code-snippet">
+loadLables = function(labelsUrl){


Please also make this function async and use await to get the return values.

huningxin · 2020-07-01T07:37:33Z

doc/js_tutorials/js_assets/js_image_classification.html

+    modelUrl: modelUrl,
+    configPath: configPath,
+    configUrl: configUrl
+}


Please a separate code snippet to host all configurations.

huningxin · 2020-07-01T07:47:41Z

doc/js_tutorials/js_assets/js_image_classification.html

+}
+loadModel(() => {
+    runModel();
+});        


Please use the await to make it easy to read.

I think the main flow should be something like this:

const path = await loadModel(modelInfo); const labels = await loadLables(labelsUrl); const input = getBlobFromImage(imageElementId, preprocessInfo); const net = cv.readNet(path); net.setInput(input); const result = net.forward(); const prob = softmax(result) const classes = getTopClasses(prob, labels, topK)

akineeic · 2020-07-03T08:45:44Z

Thanks for the update. I've finished my review and left some comments. Please take a look.

Thanks for your review and I modified the code according to your comments. Please take a look again, thanks.

huningxin · 2020-07-06T02:31:01Z

Review comments:

change model url to relative path (same as the examples path)
put getNameFromUrl into the code snippet
fix indention
add the model URLs into the json file

…ow in the web page.

akineeic · 2020-07-06T08:52:55Z

Review comments:

change model url to relative path (same as the examples path)

put getNameFromUrl into the code snippet

fix indention

add the model URLs into the json file

I have modified the code according to your comments and add a json file to store the parameters for models. Please take a look, thanks!

huningxin

Looks good with nits. Please fix that then I'll merge this PR. Thanks much @akineeic !

doc/js_tutorials/js_assets/js_image_classification.html

huningxin · 2020-07-08T13:58:55Z

Looks good. I am going to merge this PR. Thanks again.

[Opencv.js doc] Init commit to add image classification example in op…

b35568c

…encv.js tutorial

huningxin reviewed Jun 22, 2020

View reviewed changes

huningxin added this to the Evaluation #1 milestone Jun 22, 2020

[Opencv.js doc] Make the code snippet interactive and put the functio…

f9596e0

…ns into code snippet.

akineeic force-pushed the gsoc_2020_dnn branch from fa0be45 to f9596e0 Compare June 29, 2020 03:53

huningxin requested changes Jul 1, 2020

View reviewed changes

[Opencv.js doc] Code modify and fixed layout issue.

bd785b9

[Opencv.js doc] Add a JSON file to store parameters for models and sh…

b277af1

…ow in the web page.

huningxin approved these changes Jul 7, 2020

View reviewed changes

doc/js_tutorials/js_assets/js_image_classification.html Outdated Show resolved Hide resolved

[Opencv.js doc] Change let to const.

fb342ec

huningxin merged commit 70fff50 into huningxin:gsoc_2020_dnn Jul 8, 2020

		@@ -0,0 +1,6 @@
		DNN Module application {#tutorial_js_table_of_contents_dnn}

Conversation

akineeic commented Jun 21, 2020

Pull Request Readiness Checklist

Uh oh!

akineeic commented Jun 21, 2020

Uh oh!

huningxin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

huningxin commented Jun 29, 2020

Uh oh!

akineeic commented Jun 29, 2020

Uh oh!

huningxin commented Jun 30, 2020

Uh oh!

akineeic commented Jun 30, 2020

Uh oh!

huningxin commented Jun 30, 2020

Uh oh!

huningxin commented Jul 1, 2020

Uh oh!

huningxin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akineeic commented Jul 3, 2020

Uh oh!

huningxin commented Jul 6, 2020

Uh oh!

akineeic commented Jul 6, 2020

Uh oh!

huningxin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

huningxin commented Jul 8, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants