Giter Club home page Giter Club logo

onnxruntime-web-demo's Introduction

ONNX Runtime Web Demo

ONNX Runtime Web demo is an interactive demo portal showing real use cases running ONNX Runtime Web in VueJS. It currently supports four examples for you to quickly experience the power of ONNX Runtime Web.

The demo is available here ONNX Runtime Web demo website.

NOTE: Currently, the supported platforms are Edge/Chrome/Firefox/Electron/Node.js (support for other platforms is coming soon).

Use Cases

The demo provides four scenarios based on four different ONNX pre-trained deep learning models.

1. MobileNet

MobileNet models perform image classification - they take images as input and classify the major object in the image into a set of pre-defined classes. They are trained on ImageNet dataset which contains images from 1000 classes. MobileNet models are also very efficient in terms of speed and size and hence are ideal for embedded and mobile applications.

2. SqueezeNet

SqueezeNet is a light-weight convolutional network for image classification. In the demo, you can select or upload an image and see which category it's from in miliseconds.

3. FER+ Emotion Recognition

Emotion Ferplus is a deep convolutional neural network for emotion recognition in faces. In the demo, you can choose to either select an image with any human face or to start a webcam and see what emotion it's showing.

4. Yolo

Yolo is a real-time neural network for object detection. It can detect 20 different objects such as person, potted plant and chair. In the demo, you can choose to either select an image or start a webcam to see what objects are in it.

5. MNIST

MNIST is a convolutional neural network that predicts handwritten digits. In the demo, you can draw any number on the canvas and the model will tell you what number it is!

Run ONNX Runtime Web Demo

Install Dependencies

npm install

Serve the demo

Serve the demo in localhost

npm run serve

This will start a dev server and run ONNX Runtime Web demo on your localhost.

Deploy the demo

npm run build

This will pack the source files into /docs folder and be ready for deployment.

- Electron support

ONNX Runtime Web demo can also serve as a Windows desktop app using Electron.

First create a developer build of the app by running

npm run build -- --mode developer

Then run

npm run electron-packager

This will create a new /ONNXRuntimeWeb-demo-win32-x64 folder. Run /ONNXRuntimeWeb-demo-win32-x64/ONNXRuntimeWeb-demo.exe to enjoy Electron desktop app.

Credits

This demo is adapted from keras.js demo. Modifications have been made to the UI and the backend uses ONNX Runtime Web.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

onnxruntime-web-demo's People

Contributors

dependabot[bot] avatar fs-eire avatar huningxin avatar microsoft-github-operations[bot] avatar microsoftopensource avatar tkat0 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

onnxruntime-web-demo's Issues

Is this project still alive?

Can't work through it.

 npm run serve


> [email protected] serve
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
10% building 2/5 modules 3 active /Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/webpack/hot/dev-server.jsError: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/@vue/cli-service/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
10% building 2/6 modules 4 active /Users/sun/StudioProjects/onnxruntime-web-demo/node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.jsnode:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);

Web Worker Incompatibility with Vite Bundler

When using Vite to bundle onnxruntime-web into my project, I face the following error when attempting to import it.

✘ [ERROR] Could not resolve "worker-loader?inline=no-fallback!./proxy-worker/main"

    .yarn/cache/onnxruntime-web-npm-1.11.0-a6a06c5230-b03ff8acb3.zip/node_modules/onnxruntime-web/lib/wasm/proxy-wrapper.js:123:34:
      123 │ ... proxyWorker = require('worker-loader?inline=no-fallback!./proxy-worker/main').default();~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "worker-loader?inline=no-fallback!./proxy-worker/main" as external to
  exclude it from the bundle, which will remove this error. You can also surround this "require"
  call with a try/catch block to handle this failure at run-time instead of bundle-time.

error when starting dev server:
Error: Build failed with 1 error:
.yarn/cache/onnxruntime-web-npm-1.11.0-a6a06c5230-b03ff8acb3.zip/node_modules/onnxruntime-web/lib/wasm/proxy-wrapper.js:123:34: ERROR: Could not resolve "worker-loader?inline=no-fallback!./proxy-worker/main"
    at failureErrorWithLog (/home/user/Documents/Projects/onnx-test/.yarn/unplugged/esbuild-npm-0.14.28-c2ae07b619/node_modules/esbuild/lib/main.js:1599:15)
    at /home/user/Documents/Projects/onnx-test/.yarn/unplugged/esbuild-npm-0.14.28-c2ae07b619/node_modules/esbuild/lib/main.js:1245:28
    at runOnEndCallbacks (/home/user/Documents/Projects/onnx-test/.yarn/unplugged/esbuild-npm-0.14.28-c2ae07b619/node_modules/esbuild/lib/main.js:1030:63)
    at buildResponseToResult (/home/user/Documents/Projects/onnx-test/.yarn/unplugged/esbuild-npm-0.14.28-c2ae07b619/node_modules/esbuild/lib/main.js:1243:7)
    at /home/user/Documents/Projects/onnx-test/.yarn/unplugged/esbuild-npm-0.14.28-c2ae07b619/node_modules/esbuild/lib/main.js:1352:14
    at /home/user/Documents/Projects/onnx-test/.yarn/unplugged/esbuild-npm-0.14.28-c2ae07b619/node_modules/esbuild/lib/main.js:662:9
    at handleIncomingPacket (/home/user/Documents/Projects/onnx-test/.yarn/unplugged/esbuild-npm-0.14.28-c2ae07b619/node_modules/esbuild/lib/main.js:759:9)
    at Socket.readFromStdout (/home/user/Documents/Projects/onnx-test/.yarn/unplugged/esbuild-npm-0.14.28-c2ae07b619/node_modules/esbuild/lib/main.js:629:7)
    at Socket.emit (node:events:526:28)
    at addChunk (node:internal/streams/readable:315:12)

From what I can tell, worker-loader seems to be a Webpack-specific method for loading web workers. Would it be possible to fix this? If not, I think Webpack should be added as a peer dependency to make it clearer that specifically Webpack must be used. Thanks.

Updates for YOLOv5

Hi. Hope someone is still looking at this.

I updated this demo to use onnxruntime-web in my public fork... https://github.com/jkassis/onnxjs-demo.

I then extracted the yolo pieces to get this working with an onnx model of yolov5 exported from the ultralytics project: https://github.com/ultralytics/yolov5.

I'm having some problems with the post-processing phase as detailed in a ticket against the ultralytics repo...

Please see... ultralytics/yolov5#5595

Hoping that someone here might be able to take a look.

Failed to run `npm run electron`

Run npm run electron throws error on Windows. The error is reported "Windows Script Host" as

image

It looks like the "Windows Script Host" would like to run electron.js.

Renaming electron.js to other, e.g. main.js, fixes this issue.

In electron.js, the WEB_FOLDER should be docs instead of dist.

Demo deployment on Ubuntu 20.04 with web server configured with Nginx got error with wasm streaming

Hi,

Thank you for the demo example so I can experiment the onnx model.

I've been trying to deploy the built demo app to remote server (i.e AWS EC2, Ubuntu 20.04). But, I got an error message in the follwoing:

wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'. 
falling back to ArrayBuffer instantiation

Screen Shot 2021-12-26 at 4 26 48 PM

But, some part of the app work except camera. I thought it might be caused by above error. Apparently, official demo works pretty well.

So far, I'm still searching for a solution, and if you could help point out the problem I really appreciate that.

Thanks in advance.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.