Update the NSNet2 example and add its link

[huningxin]

Update the NSNet2 example code base on https://webmachinelearning.github.io/webnn-samples/nsnet2/ and add the link into the explainer.

@wchao1115 @anssiko , please take a look. Thanks!

[anssiko]

Thanks! Suggested some minor changes to the text.

I assume this code snippet is functionally equivalent to the JS module implementation https://github.com/webmachinelearning/webnn-samples/blob/master/nsnet2/nsnet2.js so I suggested linking to that from below the code snippet.

Alternatively, we could replace the current snippet with the nsnet2.js code to have symmetry between the explainer and the running code sample. This way, we'd avoid the need to maintain two code paths for the same. WDYT?

[anssiko]

Suggested change

There are many important [application use cases](https://webmachinelearning.github.io/webnn/#usecases-application) for high-performance neural network inference. One such use cases is deep-learning noise suppression (DNS) in web-based video conferencing. The following sample shows how the [NSNet2](https://github.com/microsoft/DNS-Challenge/tree/master/NSNet2-baseline) baseline implementation of deep learning-based noise suppression model may be implemented as WebNN calls.

There are many important [application use cases](https://webmachinelearning.github.io/webnn/#usecases-application) for high-performance neural network inference. One such use case is deep-learning noise suppression (DNS) in web-based video conferencing. The following sample shows how the [NSNet2](https://github.com/microsoft/DNS-Challenge/tree/master/NSNet2-baseline) baseline implementation of deep learning-based noise suppression model may be implemented using the WebNN API.

[huningxin]

Thanks for the suggestion. Added a commit to fix it.

[anssiko]

Suggested change

	Try the live version of the [WebNN NSNet2 example](https://webmachinelearning.github.io/webnn-samples/nsnet2/).
	Try the live version of the [WebNN NSNet2 example](https://webmachinelearning.github.io/webnn-samples/nsnet2/). This live version builds upon [nsnet2.js](https://github.com/webmachinelearning/webnn-samples/blob/master/nsnet2/nsnet2.js) that implements the above code snippet as a JS module.

[huningxin]

fixed in a new commit.

[huningxin]

I assume this code snippet is functionally equivalent to the JS module implementation https://github.com/webmachinelearning/webnn-samples/blob/master/nsnet2/nsnet2.js so I suggested linking to that from below the code snippet.

Good catch. Yes, they are functionally equivalent.

The major difference is that the nsnet2.js creates constants by loading the pre-trained data and dimensions from .npy files (buildConstantByNpy). The .npy files are dumped from the original onnx model.

On the other hand, the explainer sample code uses a more straightforward way to load pre-trained data from plain bin files. I think it might be simpler to read and have less dependency. Actually, to verify the code of this PR, I created another version of nsnet2.js that has the exact same implementation.

Alternatively, we could replace the current snippet with the nsnet2.js code to have symmetry between the explainer and the running code sample. This way, we'd avoid the need to maintain two code paths for the same. WDYT?

+1 to maintain the same code path.

There are two options:

1. loading constants from .npy files (code of nsnet2.js)
2. loading constants from plain bin files (code of this PR).

If you like #2, we can merge this PR and I can create another PR to update webnn-samples/nsnet2.

[anssiko]

I was actually thinking the JS module implementation https://github.com/webmachinelearning/webnn-samples/blob/master/nsnet2/nsnet2.js (with .npy files and buildConstantByNpy) could be the code in the explainer as well, even if it is a bit longer and has some deps. I feel it has a more modern style and its encapsulation yields in more readable code.

But I'm fine either way, and don't feel strongly about this. Also, someone else might feel the opposite about these style aspects :-)

@wchao1115 thoughts?

@huningxin we can merge this to bake in the minor text updates and review the explainer code snippet as a JS module in a separate PR.

[wchao1115]

@anssiko Instead of replicating the same code in two places, we could copy just a small important excerpt e.g. the graph builder code from the JS module to the explainer, and accompanying it with a link to the full source code. Would that work?

[anssiko]

@wchao1115 yes! That sounds like the best of both worlds approach.

[huningxin]

@anssiko @wchao1115 , thanks for your suggestions. I optimized the implementation of NSNet2 example code and now it has only 60 lines of code. I also created a PR to webnn-samples webmachinelearning/webnn-samples#26. So the explainer and webnn-samples would use the exact same code.

Please take another look. Thanks!

[huningxin]

Thanks for the review and approval.