second-state/vercel-wasm-runtime

A template project for building high-performance, portable, and safe serverless functions in Vercel.

Tutorial | Demo for image processing | Demo for tensorflow

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

This project is aimed to demonstrate how to implement a Serverless Functions working with Webassembly in Vercel. The main branch showcases an image processing function, and the tensorflow branch showcases an AI inference function. Both written in simple Rust and runs in the WasmEdge runtime for WebAssembly.

Overview

The Serverless Functions endpoint is located at api/hello.js to meet the requirement of Vercel, but not to the Next.js. So if you want to develop on you local machine, you should put it into pages/api/ and make some change.

The only function in api/hello.js is grayscaling an image. It receives a png file and pass it as stdin stream to a spawned child process. The child process runs using the WasmEdge command.

File api/functions/image-grayscale/src/main.rs implements the grayscaling logic. You can build it with the Rust cargo command with the -target wasm32-wasi option to get the grayscale.wasm file.

We define Custom Build in api/pre.sh to download the WasmEdge command.

Learn More

A code walk-through for this template project is available in this tutorial on the TNS.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

To learn more about Serverless Functions in Vercel, take a look at the following resources:

• Serverless Functions - how to write your Serverless Functions.
• Runtime - the modules that lift Serverless Functions.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

vercel-wasm-runtime's Issues

Demo failing on Vercel - Runtime.UnhandledPromiseRejection

Would love to get this working - hitting this error on Vercel:

[GET] /api/hello
20:36:29:56
2021-09-11T13:36:30.095Z	be9096ad-e534-4368-943b-9c6fee2dd916	ERROR	Unhandled Promise Rejection 	{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"TypeError [ERR_INVALID_ARG_TYPE]: The \"chunk\" argument must be of type string or an instance of Buffer or Uint8Array. Received undefined","reason":{"errorType":"TypeError","errorMessage":"The \"chunk\" argument must be of type string or an instance of Buffer or Uint8Array. Received undefined","code":"ERR_INVALID_ARG_TYPE","stack":["TypeError [ERR_INVALID_ARG_TYPE]: The \"chunk\" argument must be of type string or an instance of Buffer or Uint8Array. Received undefined","    at Socket.Writable.write (internal/streams/writable.js:285:13)","    at module.exports (/var/task/api/hello.js:20:18)","    at Server.<anonymous> (/var/task/___vc/__helpers.js:813:19)","    at Server.emit (events.js:400:28)","    at parserOnIncoming (_http_server.js:897:12)","    at HTTPParser.parserOnHeadersComplete (_http_common.js:126:17)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: TypeError [ERR_INVALID_ARG_TYPE]: The \"chunk\" argument must be of type string or an instance of Buffer or Uint8Array. Received undefined","    at process.<anonymous> (/var/runtime/index.js:35:15)","    at process.emit (events.js:412:35)","    at processPromiseRejections (internal/process/promises.js:245:33)","    at processTicksAndRejections (internal/process/task_queues.js:96:32)"]}
Unknown application error occurred

TensorFlow Demo no longer working

Demo for tensorflow is no longer working.

Can't Get Local Dev Environment Working - Error: spawn /wasmedge ENOENT

What's happening

I can't seem to get this working in a local WSL dev environment. It deploys to Vercel / Netlify and processes the image as expected. On the loca side, the server crashes as soon as you click "run wasm"

These are the steps I've taken:

1. wasmedge runtime installed per WASM Edge Book

2. Ran the ./pre.sh file with success / no errors

3. yarn dev Brings up the front end no problem

Troubleshooting

• updated WSL
• updated / upgraded distro (Ubuntu 20.04.3 LTS)
• completely removed and reinstall wasmedge
• deleted and cloned repo

This is when it happens:

Uploading image works just fine. Once you click "Run WASM" nextjs / node crashes with the error below. On the FE it just shows the little broken image.

Environment:

• Node v16.3.0
• Ubuntu 20.04.3 LTS
• Chrome 97.0.4692.99 (Windows x64)

event - compiled successfully
API resolved without sending a response for /api/hello, this may result in stalled requests.
Error: spawn /wasmedge ENOENT

    at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
    at onErrorNT (node:internal/child_process:480:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn /wasmedge',
  path: '/wasmedge',
  spawnargs: [ '/grayscale.wasm' ]
}
node:_http_outgoing:574
    throw new ERR_HTTP_HEADERS_SENT('set');
    ^

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at new NodeError (node:internal/errors:363:5)
    at ServerResponse.setHeader (node:_http_outgoing:574:11)
    at ChildProcess.<anonymous> (/home/chris/Coding/vercel-wasm-runtime/.next/server/pages/api/hello.js:119:9)
    at ChildProcess.emit (node:events:394:28)
    at maybeClose (node:internal/child_process:1067:16)
    at Socket.<anonymous> (node:internal/child_process:453:11)
    at Socket.emit (node:events:394:28)
    at Pipe.<anonymous> (node:net:661:12) {
  code: 'ERR_HTTP_HEADERS_SENT'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.```

Nextjs /pages/api doesn't work

Hi, I am trying to adopt this example in my nextjs project and once I am adding /api to the root of project - it works,
but /pages/api stops working.
Moving all the /pages/api to /api is not an option - it doesn't work properly (nextjs api work differently then vercel api)
Should we instead move rust api to /pages/api?
Could you provide working example?

I expect this potential issues:

• package.json / vercel-build may be ignored under /pages so we will need to use package.json from the root of project
• wasm/.so files will not be deployed by default, this in theory is possible through nextjs config / webpack options.