diff --git a/doc/js_tutorials/js_assets/js_dnn_example_helper.js b/doc/js_tutorials/js_assets/js_dnn_example_helper.js
new file mode 100644
index 0000000000..06baa6760b
--- /dev/null
+++ b/doc/js_tutorials/js_assets/js_dnn_example_helper.js
@@ -0,0 +1,119 @@
+getBlobFromImage = function(inputSize, mean, std, swapRB, image) {
+ let mat;
+ if (typeof(image) === 'string') {
+ mat = cv.imread(image);
+ } else {
+ mat = image;
+ }
+
+ let matC3 = new cv.Mat(mat.matSize[0], mat.matSize[1], cv.CV_8UC3);
+ cv.cvtColor(mat, matC3, cv.COLOR_RGBA2BGR);
+ let input = cv.blobFromImage(matC3, std, new cv.Size(inputSize[0], inputSize[1]),
+ new cv.Scalar(mean[0], mean[1], mean[2]), swapRB);
+
+ matC3.delete();
+ return input;
+}
+
+loadLables = async function(labelsUrl) {
+ let response = await fetch(labelsUrl);
+ let label = await response.text();
+ label = label.split('\n');
+ return label;
+}
+
+loadModel = async function(e) {
+ return new Promise((resolve) => {
+ let file = e.target.files[0];
+ let path = file.name;
+ let reader = new FileReader();
+ reader.readAsArrayBuffer(file);
+ reader.onload = function(ev) {
+ if (reader.readyState === 2) {
+ let buffer = reader.result;
+ let data = new Uint8Array(buffer);
+ cv.FS_createDataFile('/', path, data, true, false, false);
+ resolve(path);
+ }
+ }
+ });
+}
+
+getTopClasses = function(probs, labels, topK = 3) {
+ probs = Array.from(probs);
+ let indexes = probs.map((prob, index) => [prob, index]);
+ let sorted = indexes.sort((a, b) => {
+ if (a[0] === b[0]) {return 0;}
+ return a[0] < b[0] ? -1 : 1;
+ });
+ sorted.reverse();
+ let classes = [];
+ for (let i = 0; i < topK; ++i) {
+ let prob = sorted[i][0];
+ let index = sorted[i][1];
+ let c = {
+ label: labels[index],
+ prob: (prob * 100).toFixed(2)
+ }
+ classes.push(c);
+ }
+ return classes;
+}
+
+loadImageToCanvas = function(e, canvasId) {
+ let files = e.target.files;
+ let imgUrl = URL.createObjectURL(files[0]);
+ let canvas = document.getElementById(canvasId);
+ let ctx = canvas.getContext('2d');
+ let img = new Image();
+ img.crossOrigin = 'anonymous';
+ img.src = imgUrl;
+ img.onload = function() {
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+ };
+}
+
+drawInfoTable = async function(jsonUrl, divId) {
+ let response = await fetch(jsonUrl);
+ let json = await response.json();
+
+ let appendix = document.getElementById(divId);
+ for (key of Object.keys(json)) {
+ let h3 = document.createElement('h3');
+ h3.textContent = key + " model";
+ appendix.appendChild(h3);
+
+ let table = document.createElement('table');
+ let head_tr = document.createElement('tr');
+ for (head of Object.keys(json[key][0])) {
+ let th = document.createElement('th');
+ th.textContent = head;
+ th.style.border = "1px solid black";
+ head_tr.appendChild(th);
+ }
+ table.appendChild(head_tr)
+
+ for (model of json[key]) {
+ let tr = document.createElement('tr');
+ for (params of Object.keys(model)) {
+ let td = document.createElement('td');
+ td.style.border = "1px solid black";
+ if (params !== "modelUrl" && params !== "configUrl" && params !== "labelsUrl") {
+ td.textContent = model[params];
+ tr.appendChild(td);
+ } else {
+ let a = document.createElement('a');
+ let link = document.createTextNode('link');
+ a.append(link);
+ a.href = model[params];
+ td.appendChild(a);
+ tr.appendChild(td);
+ }
+ }
+ table.appendChild(tr);
+ }
+ table.style.width = "800px";
+ table.style.borderCollapse = "collapse";
+ appendix.appendChild(table);
+ }
+}
diff --git a/doc/js_tutorials/js_assets/js_image_classification.html b/doc/js_tutorials/js_assets/js_image_classification.html
new file mode 100644
index 0000000000..656f2720b6
--- /dev/null
+++ b/doc/js_tutorials/js_assets/js_image_classification.html
@@ -0,0 +1,263 @@
+
+
+
+
+
+ Image Classification Example
+
+
+
+
+
Image Classification Example
+
+ This tutorial shows you how to write an image classification example with OpenCV.js.
+ To try the example you should click the modelFile button(and configFile button if needed) to upload inference model.
+ You can find the model URLs and parameters in the model info section.
+ Then You should change the parameters in the first code snippet according to the uploaded model.
+ Finally click Try it button to see the result. You can choose any other images.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
#
+
Label
+
Probability
+
+
+
+
+
1
+
+
+
+
+
2
+
+
+
+
+
3
+
+
+
+
+
+
+
+
+
+
+
+ canvasInput
+
+
+
+
+
+
+
+ modelFile
+
+
+
+
+
+
+ configFile
+
+
+
+
+
+
+
+
+
+
+
+
Help function
+
1.The parameters for model inference which you can modify to investigate more models.
+
+
2.Main loop in which will read the image from canvas and do inference once.
+
+
3.Load labels from txt file and process it into an array.
+
+
4.Get blob from image as input for net, and standardize it with mean and std.
+
+
5.Fetch model file and save to emscripten file system once click the input button.
+
+
6.The post-processing, including softmax if needed and get the top classes from the output vector.
+ This tutorial shows you how to write an image classification example with camera.
+ To try the example you should click the modelFile button(and configFile button if needed) to upload inference model.
+ You can find the model URLs and parameters in the model info section.
+ Then You should change the parameters in the first code snippet according to the uploaded model.
+ Finally click Start/Stop button to start or stop the camera capture.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
#
+
Label
+
Probability
+
+
+
+
+
1
+
+
+
+
+
2
+
+
+
+
+
3
+
+
+
+
+
+
+
+
+
+
+
+ videoInput
+
+
+
+
+
+
+
+ modelFile
+
+
+
+
+
+
+ configFile
+
+
+
+
+
+
+
+
+
+
+
+
Help function
+
1.The parameters for model inference which you can modify to investigate more models.
+
+
2.The function to capture video from camera, and the main loop in which will do inference once.
+
+
3.Load labels from txt file and process it into an array.
+
+
4.Get blob from image as input for net, and standardize it with mean and std.
+
+
5.Fetch model file and save to emscripten file system once click the input button.
+
+
6.The post-processing, including softmax if needed and get the top classes from the output vector.
+
+
+
+
+
Model Info:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/doc/js_tutorials/js_assets/js_object_detection.html b/doc/js_tutorials/js_assets/js_object_detection.html
new file mode 100644
index 0000000000..53f1e48639
--- /dev/null
+++ b/doc/js_tutorials/js_assets/js_object_detection.html
@@ -0,0 +1,387 @@
+
+
+
+
+
+ Object Detection Example
+
+
+
+
+
Object Detection Example
+
+ This tutorial shows you how to write an object detection example with OpenCV.js.
+ To try the example you should click the modelFile button(and configFile button if needed) to upload inference model.
+ You can find the model URLs and parameters in the model info section.
+ Then You should change the parameters in the first code snippet according to the uploaded model.
+ Finally click Try it button to see the result. You can choose any other images.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ canvasInput
+
+
+
+
+
+
+
+
+
+ modelFile
+
+
+
+
+
+
+ configFile
+
+
+
+
+
+
+
+
+
+
+
+
Help function
+
1.The parameters for model inference which you can modify to investigate more models.
+
+
2.Main loop in which will read the image from canvas and do inference once.
+
+
3.Load labels from txt file and process it into an array.
+
+
4.Get blob from image as input for net, and standardize it with mean and std.
+
+
5.Fetch model file and save to emscripten file system once click the input button.
+
+
6.The post-processing, including get boxes from output and draw boxes into the image.
+ This tutorial shows you how to write an object detection example with camera.
+ To try the example you should click the modelFile button(and configInput button if needed) to upload inference model.
+ You can find the model URLs and parameters in the model info section.
+ Then You should change the parameters in the first code snippet according to the uploaded model.
+ Finally click Start/Stop button to start or stop the camera capture.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ videoInput
+
+
+
+
+
+
+
+
+
+ modelFile
+
+
+
+
+
+
+ configFile
+
+
+
+
+
+
+
+
+
+
+
+
Help function
+
1.The parameters for model inference which you can modify to investigate more models.
+
+
2.The function to capture video from camera, and the main loop in which will do inference once.
+
+
3.Load labels from txt file and process it into an array.
+
+
4.Get blob from image as input for net, and standardize it with mean and std.
+
+
5.Fetch model file and save to emscripten file system once click the input button.
+
+
6.The post-processing, including get boxes from output and draw boxes into the image.
+
+
+
+
+
Model Info:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/doc/js_tutorials/js_assets/js_pose_estimation.html b/doc/js_tutorials/js_assets/js_pose_estimation.html
new file mode 100644
index 0000000000..19c64663d1
--- /dev/null
+++ b/doc/js_tutorials/js_assets/js_pose_estimation.html
@@ -0,0 +1,327 @@
+
+
+
+
+
+ Pose Estimation Example
+
+
+
+
+
Pose Estimation Example
+
+ This tutorial shows you how to write an pose estimation example with OpenCV.js.
+ To try the example you should click the modelFile button(and configInput button if needed) to upload inference model.
+ You can find the model URLs and parameters in the model info section.
+ Then You should change the parameters in the first code snippet according to the uploaded model.
+ Finally click Try it button to see the result. You can choose any other images.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ canvasInput
+
+
+
+
+
+
+
+
+
+ modelFile
+
+
+
+
+
+
+ configFile
+
+
+
+
+
+
+
+
+
+
+
+
Help function
+
1.The parameters for model inference which you can modify to investigate more models.
+
+
2.Main loop in which will read the image from canvas and do inference once.
+
+
3.Get blob from image as input for net, and standardize it with mean and std.
+
+
4.Fetch model file and save to emscripten file system once click the input button.
+
+
5.The pairs of keypoints of different dataset.
+
+
6.The post-processing, including get the predicted points and draw lines into the image.
+ This tutorial shows you how to write an semantic segmentation example with OpenCV.js.
+ To try the example you should click the modelFile button(and configInput button if needed) to upload inference model.
+ You can find the model URLs and parameters in the model info section.
+ Then You should change the parameters in the first code snippet according to the uploaded model.
+ Finally click Try it button to see the result. You can choose any other images.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ canvasInput
+
+
+
+
+
+
+
+
+
+ modelFile
+
+
+
+
+
+
+ configFile
+
+
+
+
+
+
+
+
+
+
+
+
Help function
+
1.The parameters for model inference which you can modify to investigate more models.
+
+
2.Main loop in which will read the image from canvas and do inference once.
+
+
3.Get blob from image as input for net, and standardize it with mean and std.
+
+
4.Fetch model file and save to emscripten file system once click the input button.
+
+
5.The post-processing, including gengerate colors for different classes and argmax to get the classes for each pixel.
+
+
+
+
+
Model Info:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/doc/js_tutorials/js_assets/js_semantic_segmentation_model_info.json b/doc/js_tutorials/js_assets/js_semantic_segmentation_model_info.json
new file mode 100644
index 0000000000..ef0016af1d
--- /dev/null
+++ b/doc/js_tutorials/js_assets/js_semantic_segmentation_model_info.json
@@ -0,0 +1,12 @@
+{
+ "tensorflow": [
+ {
+ "model": "deeplabv3",
+ "inputSize": "513, 513",
+ "mean": "127.5, 127.5, 127.5",
+ "std": "0.007843",
+ "swapRB": "false",
+ "modelUrl": "https://drive.google.com/uc?id=1v-hfGenaE9tiGOzo5qdgMNG_gqQ5-Xn4&export=download"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/doc/js_tutorials/js_assets/js_style_transfer.html b/doc/js_tutorials/js_assets/js_style_transfer.html
new file mode 100644
index 0000000000..91422e1344
--- /dev/null
+++ b/doc/js_tutorials/js_assets/js_style_transfer.html
@@ -0,0 +1,228 @@
+
+
+
+
+
+ Style Transfer Example
+
+
+
+
+
Style Transfer Example
+
+ This tutorial shows you how to write an style transfer example with OpenCV.js.
+ To try the example you should click the modelFile button(and configFile button if needed) to upload inference model.
+ You can find the model URLs and parameters in the model info section.
+ Then You should change the parameters in the first code snippet according to the uploaded model.
+ Finally click Try it button to see the result. You can choose any other images.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ canvasInput
+
+
+
+
+
+
+
+
+
+ modelFile
+
+
+
+
+
+
+ configFile
+
+
+
+
+
+
+
+
+
+
+
+
Help function
+
1.The parameters for model inference which you can modify to investigate more models.
+
+
2.Main loop in which will read the image from canvas and do inference once.
+
+
3.Get blob from image as input for net, and standardize it with mean and std.
+
+
4.Fetch model file and save to emscripten file system once click the input button.
+
+
5.The post-processing, including scaling and reordering.
+
+
+
+
+
Model Info:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/doc/js_tutorials/js_assets/js_style_transfer_model_info.json b/doc/js_tutorials/js_assets/js_style_transfer_model_info.json
new file mode 100644
index 0000000000..9cc66018a0
--- /dev/null
+++ b/doc/js_tutorials/js_assets/js_style_transfer_model_info.json
@@ -0,0 +1,76 @@
+{
+ "torch": [
+ {
+ "model": "candy.t7",
+ "inputSize": "224, 224",
+ "mean": "104, 117, 123",
+ "std": "1",
+ "swapRB": "false",
+ "modelUrl": "https://cs.stanford.edu/people/jcjohns/fast-neural-style/models//instance_norm/candy.t7"
+ },
+ {
+ "model": "composition_vii.t7",
+ "inputSize": "224, 224",
+ "mean": "104, 117, 123",
+ "std": "1",
+ "swapRB": "false",
+ "modelUrl": "https://cs.stanford.edu/people/jcjohns/fast-neural-style/models//eccv16/composition_vii.t7"
+ },
+ {
+ "model": "feathers.t7",
+ "inputSize": "224, 224",
+ "mean": "104, 117, 123",
+ "std": "1",
+ "swapRB": "false",
+ "modelUrl": "https://cs.stanford.edu/people/jcjohns/fast-neural-style/models//instance_norm/feathers.t7"
+ },
+ {
+ "model": "la_muse.t7",
+ "inputSize": "224, 224",
+ "mean": "104, 117, 123",
+ "std": "1",
+ "swapRB": "false",
+ "modelUrl": "https://cs.stanford.edu/people/jcjohns/fast-neural-style/models//instance_norm/la_muse.t7"
+ },
+ {
+ "model": "mosaic.t7",
+ "inputSize": "224, 224",
+ "mean": "104, 117, 123",
+ "std": "1",
+ "swapRB": "false",
+ "modelUrl": "https://cs.stanford.edu/people/jcjohns/fast-neural-style/models//instance_norm/mosaic.t7"
+ },
+ {
+ "model": "starry_night.t7",
+ "inputSize": "224, 224",
+ "mean": "104, 117, 123",
+ "std": "1",
+ "swapRB": "false",
+ "modelUrl": "https://cs.stanford.edu/people/jcjohns/fast-neural-style/models//eccv16/starry_night.t7"
+ },
+ {
+ "model": "the_scream.t7",
+ "inputSize": "224, 224",
+ "mean": "104, 117, 123",
+ "std": "1",
+ "swapRB": "false",
+ "modelUrl": "https://cs.stanford.edu/people/jcjohns/fast-neural-style/models//instance_norm/the_scream.t7"
+ },
+ {
+ "model": "the_wave.t7",
+ "inputSize": "224, 224",
+ "mean": "104, 117, 123",
+ "std": "1",
+ "swapRB": "false",
+ "modelUrl": "https://cs.stanford.edu/people/jcjohns/fast-neural-style/models//eccv16/the_wave.t7"
+ },
+ {
+ "model": "udnie.t7",
+ "inputSize": "224, 224",
+ "mean": "104, 117, 123",
+ "std": "1",
+ "swapRB": "false",
+ "modelUrl": "https://cs.stanford.edu/people/jcjohns/fast-neural-style/models//instance_norm/udnie.t7"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/doc/js_tutorials/js_assets/utils.js b/doc/js_tutorials/js_assets/utils.js
index 4d5deb0b51..65f6d1782d 100644
--- a/doc/js_tutorials/js_assets/utils.js
+++ b/doc/js_tutorials/js_assets/utils.js
@@ -7,7 +7,7 @@ function Utils(errorOutputId) { // eslint-disable-line no-unused-vars
let script = document.createElement('script');
script.setAttribute('async', '');
script.setAttribute('type', 'text/javascript');
- script.addEventListener('load', () => {
+ script.addEventListener('load', async () => {
if (cv.getBuildInformation)
{
console.log(cv.getBuildInformation());
@@ -16,9 +16,15 @@ function Utils(errorOutputId) { // eslint-disable-line no-unused-vars
else
{
// WASM
- cv['onRuntimeInitialized']=()=>{
+ if (cv instanceof Promise) {
+ cv = await cv;
console.log(cv.getBuildInformation());
onloadCallback();
+ } else {
+ cv['onRuntimeInitialized']=()=>{
+ console.log(cv.getBuildInformation());
+ onloadCallback();
+ }
}
}
});
diff --git a/doc/js_tutorials/js_dnn/js_image_classification/js_image_classification.markdown b/doc/js_tutorials/js_dnn/js_image_classification/js_image_classification.markdown
new file mode 100644
index 0000000000..1a94f8d14a
--- /dev/null
+++ b/doc/js_tutorials/js_dnn/js_image_classification/js_image_classification.markdown
@@ -0,0 +1,13 @@
+Image Classification Example {#tutorial_js_image_classification}
+=======================================
+
+Goal
+----
+
+- In this tutorial you will learn how to use OpenCV.js dnn module for image classification.
+
+\htmlonly
+
+\endhtmlonly
\ No newline at end of file
diff --git a/doc/js_tutorials/js_dnn/js_image_classification/js_image_classification_with_camera.markdown b/doc/js_tutorials/js_dnn/js_image_classification/js_image_classification_with_camera.markdown
new file mode 100644
index 0000000000..bdf11161fc
--- /dev/null
+++ b/doc/js_tutorials/js_dnn/js_image_classification/js_image_classification_with_camera.markdown
@@ -0,0 +1,15 @@
+Image Classification Example with Camera {#tutorial_js_image_classification_with_camera}
+=======================================
+
+Goal
+----
+
+- In this tutorial you will learn how to use OpenCV.js dnn module for image classification example with camera.
+
+@note If you don't know how to capture video from camera, please review @ref tutorial_js_video_display.
+
+\htmlonly
+
+\endhtmlonly
\ No newline at end of file
diff --git a/doc/js_tutorials/js_dnn/js_object_detection/js_object_detection.markdown b/doc/js_tutorials/js_dnn/js_object_detection/js_object_detection.markdown
new file mode 100644
index 0000000000..980b45c236
--- /dev/null
+++ b/doc/js_tutorials/js_dnn/js_object_detection/js_object_detection.markdown
@@ -0,0 +1,13 @@
+Object Detection Example {#tutorial_js_object_detection}
+=======================================
+
+Goal
+----
+
+- In this tutorial you will learn how to use OpenCV.js dnn module for object detection.
+
+\htmlonly
+
+\endhtmlonly
\ No newline at end of file
diff --git a/doc/js_tutorials/js_dnn/js_object_detection/js_object_detection_with_camera.markdown b/doc/js_tutorials/js_dnn/js_object_detection/js_object_detection_with_camera.markdown
new file mode 100644
index 0000000000..e6e8f6f957
--- /dev/null
+++ b/doc/js_tutorials/js_dnn/js_object_detection/js_object_detection_with_camera.markdown
@@ -0,0 +1,13 @@
+Object Detection Example with Camera{#tutorial_js_object_detection_with_camera}
+=======================================
+
+Goal
+----
+
+- In this tutorial you will learn how to use OpenCV.js dnn module for object detection with camera.
+
+\htmlonly
+
+\endhtmlonly
\ No newline at end of file
diff --git a/doc/js_tutorials/js_dnn/js_pose_estimation/js_pose_estimation.markdown b/doc/js_tutorials/js_dnn/js_pose_estimation/js_pose_estimation.markdown
new file mode 100644
index 0000000000..b090ff2cfb
--- /dev/null
+++ b/doc/js_tutorials/js_dnn/js_pose_estimation/js_pose_estimation.markdown
@@ -0,0 +1,13 @@
+Pose Estimation Example {#tutorial_js_pose_estimation}
+=======================================
+
+Goal
+----
+
+- In this tutorial you will learn how to use OpenCV.js dnn module for pose estimation.
+
+\htmlonly
+
+\endhtmlonly
\ No newline at end of file
diff --git a/doc/js_tutorials/js_dnn/js_semantic_segmentation/js_semantic_segmentation.markdown b/doc/js_tutorials/js_dnn/js_semantic_segmentation/js_semantic_segmentation.markdown
new file mode 100644
index 0000000000..50177fb549
--- /dev/null
+++ b/doc/js_tutorials/js_dnn/js_semantic_segmentation/js_semantic_segmentation.markdown
@@ -0,0 +1,13 @@
+Semantic Segmentation Example {#tutorial_js_semantic_segmentation}
+=======================================
+
+Goal
+----
+
+- In this tutorial you will learn how to use OpenCV.js dnn module for semantic segmentation.
+
+\htmlonly
+
+\endhtmlonly
\ No newline at end of file
diff --git a/doc/js_tutorials/js_dnn/js_style_transfer/js_style_transfer.markdown b/doc/js_tutorials/js_dnn/js_style_transfer/js_style_transfer.markdown
new file mode 100644
index 0000000000..7c1799ac6a
--- /dev/null
+++ b/doc/js_tutorials/js_dnn/js_style_transfer/js_style_transfer.markdown
@@ -0,0 +1,13 @@
+Style Transfer Example {#tutorial_js_style_transfer}
+=======================================
+
+Goal
+----
+
+- In this tutorial you will learn how to use OpenCV.js dnn module for style transfer.
+
+\htmlonly
+
+\endhtmlonly
\ No newline at end of file
diff --git a/doc/js_tutorials/js_dnn/js_table_of_contents_dnn.markdown b/doc/js_tutorials/js_dnn/js_table_of_contents_dnn.markdown
new file mode 100644
index 0000000000..e008dc81d1
--- /dev/null
+++ b/doc/js_tutorials/js_dnn/js_table_of_contents_dnn.markdown
@@ -0,0 +1,30 @@
+Deep Neural Networks (dnn module) {#tutorial_js_table_of_contents_dnn}
+============
+
+- @subpage tutorial_js_image_classification
+
+ Image classification example
+
+- @subpage tutorial_js_image_classification_with_camera
+
+ Image classification example with camera
+
+- @subpage tutorial_js_object_detection
+
+ Object detection example
+
+- @subpage tutorial_js_object_detection_with_camera
+
+ Object detection example with camera
+
+- @subpage tutorial_js_semantic_segmentation
+
+ Semantic segmentation example
+
+- @subpage tutorial_js_style_transfer
+
+ Style transfer example
+
+- @subpage tutorial_js_pose_estimation
+
+ Pose estimation example
diff --git a/doc/js_tutorials/js_tutorials.markdown b/doc/js_tutorials/js_tutorials.markdown
index c8a8f92a31..73e69daa98 100644
--- a/doc/js_tutorials/js_tutorials.markdown
+++ b/doc/js_tutorials/js_tutorials.markdown
@@ -26,3 +26,7 @@ OpenCV.js Tutorials {#tutorial_js_root}
In this section you
will object detection techniques like face detection etc.
+
+- @subpage tutorial_js_table_of_contents_dnn
+
+ These tutorials show how to use dnn module in JavaScript