itk-wasm debugging example problem

sag · April 16, 2023, 4:34pm

Hi matt,

I have been reading about the WebAssembly and emscripten to understand how ITK-WASM works for last two months. two months ago I got stuck in build watershed segmentation 2d for node.js, it simply crashed despite following the InputsOutputs example which worked fine. I left the forum to read about webassembly/wasi/emscripten/… and wonder in webassembly platform, now i am back again to ITK-WASM examples to build for WASI and EMSCRIPTEN.
I decided to use the debugging example to debug watershed segmentation example built for Node.js and it crashed 2 months ago. I am refering to debugging example in tutorial. it fails in Node.js which i am interested in.

turorial > Debugging > Node.js fails when I reach to build for node.js section. the build for node release and debug works fine, but when I try to run them as instructed in tutorial it fails for both debug and release. it seems there is a problem with runEmscriptenNode.js, there is an import for runPipelineNode which i looked into the ´itk-wasm´ repository and that file is missing please look at the following screen shot.

Following is the screen shot for ITK-WASM repository

according to the file runEmscriptenNode.js there is import { runPipelineNode} from ./dist/node/index.js

if you look at the screen shot of repository i have pasted here, there is no such file there?! go to itk-wasm/disk/node ?! there is no node directory there
can you please investigate this, i need this to work because i am more into using the Emscripten build for web browser. part of ITK/VTK

following is the itkwasm/emscripten image is in the screen shot.

i think there is something wrong with the file runEmscriptenNode.js you provided in the example Debugging. have you commited the right version of itk-wasm repository or am i missing something here?
i tried to use import { runPipelineNode } from itk-wasm, but still it crashes`

please help to solve this issue.
I need to debug the watershed segmentation for Node.js/emscripten build so i can build it to a docker image and run it in a docker container on the webbrowser.

BR
@sag

matt.mccormick · April 17, 2023, 1:42pm

Hi @sag ,

With your persistence and hard work you will come to an understanding and get it running.

I will do what I can to help.

A few pointers:

Make sure to use the latest version of itk-wasm (check what version is found in node_modules/itk-wasm/package.json. At the time of this writing that is 1.0.0-b.94.
Try using the in-progress subcommand itk-wasm bindgen. Like itk-wasm build, this generates TypeScript/JavaScript bindings and the package build configuration. This may resolve issues in how runPipelineNode is set up or how dependencies or setup, etc. in your current configuration. More documentation is coming on this, but it is worthwhile trying it before then.
./dist/node/index.js is not in the itk-wasm source code repository because it is built as part of the itk-wasm build process.
Try debugging with the Chromium browser debugger (described in the documentation) instead of the Node.js debugger. The browser debugger is full-featured and refined.

Hope this helps,
Matt

sag · April 18, 2023, 9:33am

Hi,

Thanks for the replay.

I did install itk-wasm@1.0.0-b.94 but it did not fix the problem.
I built the emscripten-build-release as you suggested in your previous message as follows: npx itk-wasm --build-dir emscripten-build-release bindgen --package-name @itk-wasm/DebugMe --package-description “Example DebugMe”
it generates a typescript folder with files that contains no .wasm module in it, also created a Emscripten-build-release with just a env… file inside.
I executed : npm run emscripten-build-release. This fills previously almost empty emscripten-build-release folder with all wasm related files, such as DebugMe.wasm, DebugMe.umd.wasm, etc.
then I executed : npm run run-node-release script in tutorial instructions.
the same error.

Did I follow your instructions correctly if not could you please tell me what is that I am doing wrong?
can you tell me more about its-wasm bindgen , it generates typescript/javascript files, rust+wasm/emscripten has such script bindgen in rust language? anyways not to get out of my way, I need this to work.
I did also try the web browser approach in the instruction of DebugMe tutorial as you preferably suggested, but the same crash happened.

node.js v19.8.1
npm 9.6.3
itk-wasm: 1.0.0-b.94

I really appreciate this matt,

here is the screen shot of what I explained please check out the folder typescript and emscripten-build-release

BR,
@sag

sag · April 18, 2023, 11:44am

Hi matt,

I wanted to mention some facts I know about wasm/JS interaction via webassembly platform. I have seen using wasm-bingen as a dependency in rust to allow exchange of string, structures, classes, etc, despite that wasm stack machine only takes numbers like u32 and float.

npx itk-wasm --build-dir emscripten-build-debug bindgen --package-name @itk-wasm/DebugMe --package-description “Example DebugMe”
the above subcommand causes crash with error that H is not json in Hello debugger world in DebugMe.cxx??!! I commented out abort() form DebugMe.cxx, I think web workers or threads racing and abort happens faster than printing the Hello ... text, I don't know anyways because the command should generate typescript/javascript and configuration to allow runEmscriptenNode.js run the DebugMe.wasm module correct?
what is going on here? am I doing something wrong?
This is the sequence of commands I executed

build DebugMe program for emscripten debug
next >
execute npx itk-wasm … bindgen … to generate necessary typescript/javascript/configuration files like I wrote above. this generates typescript folder which know about the Emscripten-build-debug folder and DebugMe.wasm, both folders are connected now - right??
next >
npm run run-node-debug to run the DebugMe.wasm using javascript in node.js

which causes a crash and complains about Hello debugger world text, ‘H’ with error:
syntaxError: Unexpected token ‘H’, 'Hello debugging"… is not valid JSON at JSON-parse

no idea what is going on?

I appreciate it.

BR
@sag

matt.mccormick · April 20, 2023, 2:03pm

Good work generating the typescript/ package folder.

In JavaScript development, when:

Sharing a package as a library on npmjs.com
Using a project in the browser

There are typically a few build steps involved:

Transpile, process inputs, e.g. TypeScript type checking, transpilation, polyfill newer language features to work on older JavaScript runtimes
Bundle multiple modules into a single module for consumption
Optionally minify the bundle

itk-wasm bindgen provides all the configuration for this, but there are steps to build it:

cd typescript/
npm install
npm run build
# this serves the bundle for local testing and development
npm start

matt.mccormick · April 20, 2023, 2:06pm

Yes, this is related, and eventually itk-wasm bindgen will use this for rust, etc. bindings, too.

sag · April 24, 2023, 4:47pm

@matt.mccormick

Hi,
I did npm install && run build && start, it shows the ITK-wasm version of DebugMe which different than what is in the DebugMe tutorials. One error occurred though which complained about index-node.ts object is empty. exception asked to write export {} - and it launched the ITK-WASM/DebugMe on the server on chrome web browser I did though npm start - outside of typescript folder in root DebugMe and I got it to work with DebugMe tutorial version but I got an exception. eventually I got it to work, yet in dev tools the program does not stop at break points. I did the path substitution just like in tutorials but still not possible to stop in c++ code, just in javascript code the program stops.
I got the @itk-wasm/DebugMe from ITK company showing the package and functions to run as shown in the following screen shot:

I still don’t understand how the bindgen is going to help run the emscripten wasm module on the web browser/node ?
How to publish my own DebugMe on the e.g. npmjs.com site as you mentioned above?
secondly:
How this typescript is going to help me to run <run run-node-debug> on command line as mentioned in DebugMe example?

I really appreciate your help.

but I have a bigger question which I will send another message to you and explain. that is about a @sohrab123/segmentation-watershed

p.s.: I did manage to publish couple of packages on npmjs.com, so I know that.

BR
@sag

matt.mccormick · April 24, 2023, 8:25pm

ITK-wasm version of DebugMe which different than what is in the DebugMe tutorials. One error occurred though which complained about index-node.ts object is empty

Yes, to generate bindings for the pipeline, the code will need an itk::wasm::Pipeline declared and a call to ITK_WASM_PARSE. For example:

github.com

InsightSoftwareConsortium/itk-wasm/blob/1ceb67b93c4942aea6a03afc16237992fe5d627e/examples/hello-pipeline/hello-pipeline.cxx#L24


      
          *  See the License for the specific language governing permissions and
          *  limitations under the License.
          *
          *=========================================================================*/
          #include "itkPipeline.h"
          #include "itkInputImage.h"
          #include "itkImage.h"
          
          int main(int argc, char * argv[]) {
           // Create the pipeline for parsing arguments. Provide a description.
           itk::wasm::Pipeline pipeline("hello-pipeline", "A hello world itk::wasm::Pipeline", argc, argv);
          
           // Add a flag to the pipeline.
           bool quiet = false;
           pipeline.add_flag("-q,--quiet", quiet, "Do not print image information");
          
           constexpr unsigned int Dimension = 2;
           using PixelType = unsigned char;
           using ImageType = itk::Image<PixelType, Dimension>;
          
           // Add a input image argument.

github.com

InsightSoftwareConsortium/itk-wasm/blob/1ceb67b93c4942aea6a03afc16237992fe5d627e/examples/hello-pipeline/hello-pipeline.cxx#L42


      
          using ImageType = itk::Image<PixelType, Dimension>;
          
          // Add a input image argument.
          using InputImageType = itk::wasm::InputImage<ImageType>;
          InputImageType inputImage;
          pipeline.add_option("input-image", inputImage, "The input image")->required()->type_name("INPUT_IMAGE");
          
          // Parse the arguments. If `-q` or `--quiet` is set, the `quiet` variable will be set to `true`.
          // The `inputImage` variable is populated from the filesystem if built as a native executable.
          // When running in the browser or in a wrapped language, `inputImage` is read from WebAssembly memory without file IO.
          ITK_WASM_PARSE(pipeline);
          
          std::cout << "Hello pipeline world!\n" << std::endl;
          
          if (!quiet)
          {
            // Obtain the itk::Image * from the itk::wasm::InputImage with `.Get()`.
            std::cout << "Input image: " << *inputImage.Get() << std::endl;
          }
          
          return EXIT_SUCCESS;

eventually I got it to work, yet in dev tools the program does not stop at break points.

This could be because the module is not built with debugging symbols. In the build scripts defined in the package.json file, add -DCMAKE_BUILD_TYPE:STRING=Debug as described in the debugging tutorial.

How this typescript is going to help me to run on command line as mentioned in DebugMe example?

The bindings help to provide a way to get the WebAssembly code running in the browser as bundled JavaScript with a JavaScript interface so it can be debugged with Chrome’s WebAssembly debugging tooling.