├── .gitignore
├── README.md
├── api
├── cowboy.png
├── functions
│ └── image-grayscale
│ │ ├── Cargo.lock
│ │ ├── Cargo.toml
│ │ └── src
│ │ └── main.rs
├── grayscale.wasm
├── hello.js
├── package.json
└── pre.sh
├── package.json
├── pages
├── _app.js
└── index.js
├── public
├── favicon.ico
└── vercel.svg
├── styles
├── Home.module.css
└── globals.css
├── vercel-wasmedge-runtime.gif
├── vercel.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
36 | *.swp
37 |
38 | **/target
39 | **/pkg
40 | pages/api
41 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## [Tutorial](https://thenewstack.io/rust-and-webassembly-serverless-functions-in-vercel/) | [Demo for image processing](https://vercel-wasm-runtime.vercel.app/) | [Demo for tensorflow](https://vercel-wasm-runtime-cozpr5z84-wangshishuo1.vercel.app/)
2 |
3 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
4 |
5 | This project is aimed to demonstrate how to implement a Serverless Functions working with Webassembly in Vercel. The [main branch](https://github.com/second-state/vercel-wasm-runtime/tree/main) showcases an image processing function, and the [tensorflow branch](https://github.com/second-state/vercel-wasm-runtime/tree/tensorflow) showcases an AI inference function. Both written in simple Rust and runs in the [WasmEdge runtime](https://github.com/WasmEdge/WasmEdge) for WebAssembly.
6 |
7 | ## Overview
8 |
9 | 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.
10 |
11 | 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](https://github.com/WasmEdge/WasmEdge) command.
12 |
13 | 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.
14 |
15 | We define [Custom Build](https://vercel.com/docs/runtimes?query=vercel-build#advanced-usage/advanced-node-js-usage/custom-build-step-for-node-js) in `api/pre.sh` to download the [WasmEdge command](https://github.com/WasmEdge/WasmEdge/releases/tag/0.8.1).
16 |
17 | 
18 |
19 |
20 | ## Learn More
21 |
22 | A code walk-through for this template project is available in [this tutorial on the TNS](https://thenewstack.io/rust-and-webassembly-serverless-functions-in-vercel/).
23 |
24 | To learn more about Next.js, take a look at the following resources:
25 |
26 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
27 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
28 |
29 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
30 |
31 | To learn more about Serverless Functions in Vercel, take a look at the following resources:
32 |
33 | - [Serverless Functions](https://vercel.com/docs/serverless-functions/introduction) - how to write your Serverless Functions.
34 | - [Runtime](https://vercel.com/docs/runtimes) - the modules that lift Serverless Functions.
35 |
36 | ## Deploy on Vercel
37 |
38 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
39 |
40 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
41 |
--------------------------------------------------------------------------------
/api/cowboy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/second-state/vercel-wasm-runtime/e4629e0652222420c1bedbf67ba5046d35330851/api/cowboy.png
--------------------------------------------------------------------------------
/api/functions/image-grayscale/Cargo.lock:
--------------------------------------------------------------------------------
1 | # This file is automatically @generated by Cargo.
2 | # It is not intended for manual editing.
3 | [[package]]
4 | name = "adler32"
5 | version = "1.2.0"
6 | source = "registry+https://github.com/rust-lang/crates.io-index"
7 | checksum = "aae1277d39aeec15cb388266ecc24b11c80469deae6067e17a1a7aa9e5c1f234"
8 |
9 | [[package]]
10 | name = "autocfg"
11 | version = "1.0.1"
12 | source = "registry+https://github.com/rust-lang/crates.io-index"
13 | checksum = "cdb031dd78e28731d87d56cc8ffef4a8f36ca26c38fe2de700543e627f8a464a"
14 |
15 | [[package]]
16 | name = "bitflags"
17 | version = "1.2.1"
18 | source = "registry+https://github.com/rust-lang/crates.io-index"
19 | checksum = "cf1de2fe8c75bc145a2f577add951f8134889b4795d47466a54a5c846d691693"
20 |
21 | [[package]]
22 | name = "bytemuck"
23 | version = "1.7.0"
24 | source = "registry+https://github.com/rust-lang/crates.io-index"
25 | checksum = "9966d2ab714d0f785dbac0a0396251a35280aeb42413281617d0209ab4898435"
26 |
27 | [[package]]
28 | name = "byteorder"
29 | version = "1.4.3"
30 | source = "registry+https://github.com/rust-lang/crates.io-index"
31 | checksum = "14c189c53d098945499cdfa7ecc63567cf3886b3332b312a5b4585d8d3a6a610"
32 |
33 | [[package]]
34 | name = "cfg-if"
35 | version = "1.0.0"
36 | source = "registry+https://github.com/rust-lang/crates.io-index"
37 | checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
38 |
39 | [[package]]
40 | name = "color_quant"
41 | version = "1.1.0"
42 | source = "registry+https://github.com/rust-lang/crates.io-index"
43 | checksum = "3d7b894f5411737b7867f4827955924d7c254fc9f4d91a6aad6b097804b1018b"
44 |
45 | [[package]]
46 | name = "crc32fast"
47 | version = "1.2.1"
48 | source = "registry+https://github.com/rust-lang/crates.io-index"
49 | checksum = "81156fece84ab6a9f2afdb109ce3ae577e42b1228441eded99bd77f627953b1a"
50 | dependencies = [
51 | "cfg-if",
52 | ]
53 |
54 | [[package]]
55 | name = "deflate"
56 | version = "0.8.6"
57 | source = "registry+https://github.com/rust-lang/crates.io-index"
58 | checksum = "73770f8e1fe7d64df17ca66ad28994a0a623ea497fa69486e14984e715c5d174"
59 | dependencies = [
60 | "adler32",
61 | "byteorder",
62 | ]
63 |
64 | [[package]]
65 | name = "gif"
66 | version = "0.11.2"
67 | source = "registry+https://github.com/rust-lang/crates.io-index"
68 | checksum = "5a668f699973d0f573d15749b7002a9ac9e1f9c6b220e7b165601334c173d8de"
69 | dependencies = [
70 | "color_quant",
71 | "weezl",
72 | ]
73 |
74 | [[package]]
75 | name = "hex"
76 | version = "0.4.3"
77 | source = "registry+https://github.com/rust-lang/crates.io-index"
78 | checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
79 |
80 | [[package]]
81 | name = "image"
82 | version = "0.23.14"
83 | source = "registry+https://github.com/rust-lang/crates.io-index"
84 | checksum = "24ffcb7e7244a9bf19d35bf2883b9c080c4ced3c07a9895572178cdb8f13f6a1"
85 | dependencies = [
86 | "bytemuck",
87 | "byteorder",
88 | "color_quant",
89 | "gif",
90 | "jpeg-decoder",
91 | "num-iter",
92 | "num-rational",
93 | "num-traits",
94 | "png",
95 | ]
96 |
97 | [[package]]
98 | name = "jpeg-decoder"
99 | version = "0.1.22"
100 | source = "registry+https://github.com/rust-lang/crates.io-index"
101 | checksum = "229d53d58899083193af11e15917b5640cd40b29ff475a1fe4ef725deb02d0f2"
102 |
103 | [[package]]
104 | name = "miniz_oxide"
105 | version = "0.3.7"
106 | source = "registry+https://github.com/rust-lang/crates.io-index"
107 | checksum = "791daaae1ed6889560f8c4359194f56648355540573244a5448a83ba1ecc7435"
108 | dependencies = [
109 | "adler32",
110 | ]
111 |
112 | [[package]]
113 | name = "num-integer"
114 | version = "0.1.44"
115 | source = "registry+https://github.com/rust-lang/crates.io-index"
116 | checksum = "d2cc698a63b549a70bc047073d2949cce27cd1c7b0a4a862d08a8031bc2801db"
117 | dependencies = [
118 | "autocfg",
119 | "num-traits",
120 | ]
121 |
122 | [[package]]
123 | name = "num-iter"
124 | version = "0.1.42"
125 | source = "registry+https://github.com/rust-lang/crates.io-index"
126 | checksum = "b2021c8337a54d21aca0d59a92577a029af9431cb59b909b03252b9c164fad59"
127 | dependencies = [
128 | "autocfg",
129 | "num-integer",
130 | "num-traits",
131 | ]
132 |
133 | [[package]]
134 | name = "num-rational"
135 | version = "0.3.2"
136 | source = "registry+https://github.com/rust-lang/crates.io-index"
137 | checksum = "12ac428b1cb17fce6f731001d307d351ec70a6d202fc2e60f7d4c5e42d8f4f07"
138 | dependencies = [
139 | "autocfg",
140 | "num-integer",
141 | "num-traits",
142 | ]
143 |
144 | [[package]]
145 | name = "num-traits"
146 | version = "0.2.14"
147 | source = "registry+https://github.com/rust-lang/crates.io-index"
148 | checksum = "9a64b1ec5cda2586e284722486d802acf1f7dbdc623e2bfc57e65ca1cd099290"
149 | dependencies = [
150 | "autocfg",
151 | ]
152 |
153 | [[package]]
154 | name = "png"
155 | version = "0.16.8"
156 | source = "registry+https://github.com/rust-lang/crates.io-index"
157 | checksum = "3c3287920cb847dee3de33d301c463fba14dda99db24214ddf93f83d3021f4c6"
158 | dependencies = [
159 | "bitflags",
160 | "crc32fast",
161 | "deflate",
162 | "miniz_oxide",
163 | ]
164 |
165 | [[package]]
166 | name = "wasi_vercel_example"
167 | version = "0.1.0"
168 | dependencies = [
169 | "hex",
170 | "image",
171 | ]
172 |
173 | [[package]]
174 | name = "weezl"
175 | version = "0.1.5"
176 | source = "registry+https://github.com/rust-lang/crates.io-index"
177 | checksum = "d8b77fdfd5a253be4ab714e4ffa3c49caf146b4de743e97510c0656cf90f1e8e"
178 |
--------------------------------------------------------------------------------
/api/functions/image-grayscale/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "wasi_vercel_example"
3 | version = "0.1.0"
4 | authors = ["ubuntu"]
5 | edition = "2018"
6 |
7 | [[bin]]
8 | name = "grayscale"
9 | path = "src/main.rs"
10 |
11 | [dependencies]
12 | hex = "0.4"
13 | image = { version = "0.23.0", default-features = false, features = ["jpeg", "png", "gif"] }
14 |
15 |
--------------------------------------------------------------------------------
/api/functions/image-grayscale/src/main.rs:
--------------------------------------------------------------------------------
1 | use std::io::{self, Read, Write};
2 | use image::{ImageOutputFormat, ImageFormat};
3 |
4 | fn main() {
5 | let mut buf = Vec::new();
6 | io::stdin().read_to_end(&mut buf).unwrap();
7 |
8 | let image_format_detected: ImageFormat = image::guess_format(&buf).unwrap();
9 | let img = image::load_from_memory(&buf).unwrap();
10 | let filtered = img.grayscale();
11 | let mut buf = vec![];
12 | match image_format_detected {
13 | ImageFormat::Gif => {
14 | filtered.write_to(&mut buf, ImageOutputFormat::Gif).unwrap();
15 | },
16 | _ => {
17 | filtered.write_to(&mut buf, ImageOutputFormat::Png).unwrap();
18 | },
19 | };
20 | io::stdout().write_all(&buf).unwrap();
21 | io::stdout().flush().unwrap();
22 | }
23 |
24 |
--------------------------------------------------------------------------------
/api/grayscale.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/second-state/vercel-wasm-runtime/e4629e0652222420c1bedbf67ba5046d35330851/api/grayscale.wasm
--------------------------------------------------------------------------------
/api/hello.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const { spawn } = require('child_process');
3 | const path = require('path');
4 |
5 | module.exports = (req, res) => {
6 | const wasmedge = spawn(path.join(__dirname, 'wasmedge'), [path.join(__dirname, 'grayscale.so')]);
7 |
8 | let d = [];
9 | wasmedge.stdout.on('data', (data) => {
10 | d.push(data);
11 | });
12 |
13 | wasmedge.on('close', (code) => {
14 | let buf = Buffer.concat(d);
15 |
16 | res.setHeader('Content-Type', req.headers['image-type']);
17 | res.send(buf);
18 | });
19 |
20 | wasmedge.stdin.write(req.body);
21 | wasmedge.stdin.end('');
22 | }
23 |
24 |
--------------------------------------------------------------------------------
/api/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "vercel-build": "./pre.sh"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/api/pre.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # get wasmedge & wasmedgec
4 | curl -sSfL https://github.com/WasmEdge/WasmEdge/releases/download/0.8.2-rc.2/WasmEdge-0.8.2-rc.2-manylinux2014_x86_64.tar.gz -o ./WasmEdge.tar.gz
5 | tar --strip-components 2 -xzvf WasmEdge.tar.gz WasmEdge-0.8.2-rc.2-Linux/bin
6 | rm WasmEdge.tar.gz
7 |
8 | # compile all .wasm to .so
9 | for file in *.wasm; do
10 | [ -f "$file" ] || continue
11 | ./wasmedgec --generic-binary "$file" "${file/.wasm/.so}"
12 | rm "$file"
13 | done
14 |
15 | # clean
16 | rm wasmedgec
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nextjs",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start"
9 | },
10 | "dependencies": {
11 | "next": "10.x",
12 | "react": "17.x",
13 | "react-dom": "17.x"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 |
3 | function MyApp({ Component, pageProps }) {
4 | return
5 | }
6 |
7 | export default MyApp
8 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import Head from 'next/head'
3 | import styles from '../styles/Home.module.css'
4 |
5 | export default function Home() {
6 | const [enableWasm, setEnableWasm] = useState(false);
7 | const [origImg, setOrigImg] = useState(null);
8 | const [resImg, setResImg] = useState(null);
9 | const [loading, setLoading] = useState(false);
10 |
11 | return (
12 |
13 |
14 |
Vercel Wasm Runtime
15 |
16 |
17 |
18 |
19 |
20 | Welcome to WasmEdge!
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | {origImg &&
}
29 |
30 |
31 |
32 |
33 |
34 | {resImg &&
}
35 |
36 |
37 |
39 |
40 |
50 |