ITK-WASM, VITE/REACT, VSCODE, OPEN VITE FOLDER, NPM INSTALL

Hi @thewtex ,
I think this requires attention from matt maccormic. I used vscode and opened example vite inside Examples folder of itk-wasm repo. I did (npm install) inside terminal of the vscode and it installed all the modules inside package.json. I assumed i set up the example correctly.
I tried to run the example inside the terminal of vscode using command (npm start) and it did run. then i clicked on the file button in webbrowser and it did open openfile dialog and i chose a file inside the cypress/features/thead1.png!? i gues but it did not open anything?!
i refered to the termianl and noticed some messages in yellow color that some import in line 2501… of some file encountered await and it mentioned this is not possible to be performed.
+++i did try vue example the same program and that one worked fine.
+++I know you wrote this elegant code and love the style and everything is perfect but what am i doing wrong?

I appreciate any help from matt or others in the ITK-JS group.

BR
@Sohrab_Azami

FYI this is more appropriate for the ITK discourse. Which example are you using? The Webpack one?

Oh sorry, I had checked out an earlier version of itk-wasm, so I didn’t see the Vite example. I tested that example with cthead1.png, and got JSON output. May you please post a screenshot of the terminal messages you were seeing? Additionally, were there any devtools error messages?

hi Forrest via VTK,

I did run the vite example and I got the JSON output but i did not see the image?

  1. cthead1-vite-png is the picture of the web browser which shows the JSON inside the box when i choose cthead.png image, but i does not show the head picture below the JSON window? why?

  2. In vscode-edi-screen.png you see an error related to await in some file inside the standard vite libraries. I have attached the vite version I have worked on (Vite.rar) so I hope you can unrar it and tell me what it is that I am doing wrong.

  3. I used the [npm start] command to launch the vite app and opened it inside the chrome web browser.

  4. I have a general question: when i search for itk.js i am forward to itk-wasm, Is there a standard template how to write a itk-wasm that i can use? lets say i want to write a loss pass filter to filter 64 slices of a ct DICOM series. i cannot find anything how to do that?

  5. Is there any itk-js javascript repo out there to spend time and learn javascript and write itk javascript react apps and deploy it on the internet?

I really appreciate your help.

Vite.rar

I don’t know how to help here. I was implwnenting a lowpass filter forslicer if get it to work i will posr it hwre

@Sohrab_Azami the Vite example doesn’t actually show the image. It just demonstrates loading an image and outputting the metadata. If you want to visualize your images, check out this vtk.js + itk-wasm integration example.

1 Like