microsoft / onnxruntime-nextjs-template

NextJS ONNX Runtime Web Template

This is a NextJS template that is meant to be used to give you a starting point to doing inferencing on the client with PyTorch using ONNX Runtime web. This react template has all the helper functions and logic needed to process images and run inference in the browser for imagenet models like squeezenet, resnet and mobilenet.

This template is configured with webpack, onnxruntime-web, react, typescript and dev environments for testing.

Run the development server:

First, run the development server:

npm run start
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Deploy on Azure with Static Web Apps

Deploy your site with Azure. Checkout the docs for deploying to a Static Web Apps resource.

• Deploy with Static Web Apps

Credits/Resources

This is a Next.js project bootstrapped with create-next-app.

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.

• ONNX Runtime Web Demo for more models

How to Run Machine-Learning Models in the Browser using ONNX

In this tutorial we will dive into onnxruntime-web by deploying a pre-trained PyTorch model to the browser.

• How to Run Machine-Learning Models in the Browser using ONNX

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.opensource.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., status check, 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.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

onnxruntime-nextjs-template's Issues

`yarn dev` throws a `digital envelope` error

Without any modification to the code distributed in this repo. Steps to reproduce:

1. yarn
2. yarn dev

Node.JS v18.12.0

Traceback:

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:138971:18)
    at BulkUpdateDecorator.update (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:138872:50)
    at OriginalSource.updateHash (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack-sources3/index.js:1:10264)
    at NormalModule._initBuildHash (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68468:17)
    at handleParseResult (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68534:10)
    at /home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68628:4
    at processResult (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68343:11)
    at /home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68407:5
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:138971:18)
    at BulkUpdateDecorator.update (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:138872:50)
    at OriginalSource.updateHash (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack-sources3/index.js:1:10264)
    at NormalModule._initBuildHash (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68468:17)
    at handleParseResult (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68534:10)
    at /home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68628:4
    at processResult (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68343:11)
    at /home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68407:5
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:138971:18)
    at BulkUpdateDecorator.update (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:138872:50)
    at OriginalSource.updateHash (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack-sources3/index.js:1:10264)
    at NormalModule._initBuildHash (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68468:17)
    at handleParseResult (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68534:10)
    at /home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68628:4
    at processResult (/home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68343:11)
    at /home/chris/onnx_demo/node_modules/next/dist/compiled/webpack/bundle5.js:68407:5 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Template for NEXT JS 13

Pleasse adding

/api routes not callable on deployment

When I deploy this template to Vercel, only with the following changes to handle the digital envelope error,

    "build": "NODE_OPTIONS=--openssl-legacy-provider next build && next export",
    "start": "NODE_OPTIONS=--openssl-legacy-provider next start",

My /api routes are not callable anymore. Does anyone know why this may be the case?

lockfile

Thanks for the template it looks amazing. Why is there no lockfile though?

Yolov5 converted model throws error during detection

I have followed the YOLOv5-Custom-Training tutorial and trained a model to detect some custom objects.
The object works properly detecting objects.

I then exported the model to onnx using the following command:
python export.py --include onnx --weight ./runs/train/exp/weights/best.pt --data {dataset.location}/data.yaml --img 640

The exported onnx model also properly detects objects.

I then took the onnxruntime-nextjs-template and I am trying to adjust it to run my YOLO model.

I adjusted the model name and the image size in utils/predict.ts, and I'm getting the following error:

Uncaught (in promise) Error: resize (packed) does not support mode: 'nearest'
    at l (ort-web.min.js?f1d4:formatted:18144:282536)
    at Object.get (ort-web.min.js?f1d4:formatted:18144:281666)
    at t.WebGLInferenceHandler.executeProgram (ort-web.min.js?f1d4:formatted:18144:209391)
    at t.WebGLInferenceHandler.run (ort-web.min.js?f1d4:formatted:18144:209690)
    at Object.t.resize [as impl] (ort-web.min.js?f1d4:formatted:18144:281598)
    at eval (ort-web.min.js?f1d4:formatted:18144:350066)
    at t.Profiler.event (ort-web.min.js?f1d4:formatted:18144:365260)
    at eval (ort-web.min.js?f1d4:formatted:18144:350026)

Any thing to do to work around this?