feat: added webgpu tensorflow example

examples/components/webgpu-tensorflow/.gitignore

@@ -0,0 +1,10 @@
+# JS build output
+/dist/
+
+/node_modules/
+/keys/
+
+# wash build output
+/build/*
+
+wit/deps/

examples/components/webgpu-tensorflow/.nvmrc

@@ -0,0 +1 @@
+v22.12.0

examples/components/webgpu-tensorflow/.wash/config.yaml

@@ -0,0 +1,12 @@
+version: 2.0.0-rc.8
+
+new:
+  command: npm install
+
+build:
+  # command: npm run build
+  command: npm run build
+  component_path: dist/component.wasm
+
+dev:
+  wasi_webgpu: true

examples/components/webgpu-tensorflow/README.md

@@ -0,0 +1,93 @@
+# TypeScript WebGPU TensorFlow HTTP component
+
+This repository contains a WebAssembly component written in [TypeScript][ts], which:
+
+- Uses [TensorFlow.js][tfjs] and the [WebGPU backend][tfjs-webgpu]
+- Implements [`wasi:http`][wasi-http] for incoming HTTP requests
+- Uses [`wasi:webgpu`][wasi-webgpu] and [`wasi:graphics-context`][wasi-graphics-context]
+- Exposes `POST /stylize` to run neural style transfer on JPEG images
+- Serves a small browser UI at `/index.html` for interactive testing
+
+Model artifacts under `models/` are third-party files licensed under Apache-2.0.
+See `models/ATTRIBUTION.md` for source and licensing details.
+
+[ts]: https://www.typescriptlang.org/
+[tfjs]: https://www.tensorflow.org/js
+[tfjs-webgpu]: https://www.npmjs.com/package/@tensorflow/tfjs-backend-webgpu
+[wasi-http]: https://github.com/WebAssembly/wasi-http
+[wasi-webgpu]: https://github.com/WebAssembly/wasi-webgpu
+[wasi-graphics-context]: https://github.com/WebAssembly/wasi-graphics-context
+[wash]: https://github.com/wasmCloud/wasmCloud/tree/main/crates/wash-cli
+[node]: https://nodejs.org
+[npm]: https://github.com/npm/cli
+[wasm-pkg-tools]: https://github.com/bytecodealliance/wasm-pkg-tools
+
+# Dependencies
+
+> ![WARN]
+> When building this project, ensure you are using a stable NodeJS release.
+>
+> Use of node version management tools (ex. [`nvm`](https://github.com/nvm-sh/nvm) or more newer NVM
+> compatible tools like [`fnm`](https://github.com/Schniz/fnm)) are recommended -- a `.nvmrc` file is
+> included for easy use.
+
+Building this project relies on the following installed software:
+
+| Name   | Description                                                                                                 |
+| ------ | ----------------------------------------------------------------------------------------------------------- |
+| `wash` | [Wasmcloud Shell][wash] controls your [wasmcloud][wasmcloud] host instances and enables building components |
+| `npm`  | [Node Package Manager (NPM)][npm] which manages packages for for the NodeJS ecosystem                       |
+| `node` | [NodeJS runtime][node] (see `.nvmrc` for version)                                                           |
+| `wkg`  | (optional) [wasm-pkg-tools][wasm-pkg-tools] project that makes it easy to pull down WIT definitions         |
+
+[wasmcloud]: https://wasmcloud.com/docs/intro
+
+# Quickstart
+
+## With `wash`
+
+To build the project into a runnable WebAssembly component, you can use `wash`:
+
+```console
+wash build
+```
+
+To get into a rapid development loop, run `wash dev`:
+
+```console
+wash dev
+```
+
+`wash dev` does many things for you:
+
+- Starts a local wasmCloud host that can run your WebAssembly component
+- Builds this project (including necessary `npm` script targets)
+- Deploys the component locally
+- Watches your code for changes and re-deploys when necessary
+
+## Send a request to the running component
+
+Once `wash dev` is serving your component, send a request to the health endpoint:
+
+```console
+curl localhost:8000
+```
+
+You should receive:
+
+```json
+{"msg":"Hello World!"}
+```
+
+To try image stylization, open:
+
+```text
+http://localhost:8000/index.html
+```
+
+Then upload a content JPEG and a style JPEG and click **Stylize**.
+
+## Adding Capabilities
+
+To learn how to extend this example with additional capabilities, see the [Adding Capabilities](https://wasmcloud.com/docs/tour/adding-capabilities?lang=typescript) section of the wasmCloud documentation.
+

examples/components/webgpu-tensorflow/generated/types/interfaces/wasi-clocks-monotonic-clock.d.ts

@@ -0,0 +1,34 @@
+/** @module Interface wasi:clocks/monotonic-clock@0.2.3 **/
+/**
+ * Read the current value of the clock.
+ * 
+ * The clock is monotonic, therefore calling this function repeatedly will
+ * produce a sequence of non-decreasing values.
+ */
+export function now(): Instant;
+/**
+ * Query the resolution of the clock. Returns the duration of time
+ * corresponding to a clock tick.
+ */
+export function resolution(): Duration;
+/**
+ * Create a `pollable` which will resolve once the specified instant
+ * has occurred.
+ */
+export function subscribeInstant(when: Instant): Pollable;
+/**
+ * Create a `pollable` that will resolve after the specified duration has
+ * elapsed from the time this function is invoked.
+ */
+export function subscribeDuration(when: Duration): Pollable;
+export type Pollable = import('./wasi-io-poll.js').Pollable;
+/**
+ * An instant in time, in nanoseconds. An instant is relative to an
+ * unspecified initial value, and can only be compared to instances from
+ * the same monotonic-clock.
+ */
+export type Instant = bigint;
+/**
+ * A duration of time, in nanoseconds.
+ */
+export type Duration = bigint;

examples/components/webgpu-tensorflow/generated/types/interfaces/wasi-graphics-context-graphics-context.d.ts

@@ -0,0 +1,17 @@
+/** @module Interface wasi:graphics-context/graphics-context@0.0.1 **/
+
+export class AbstractBuffer {
+  /**
+   * This type does not have a public constructor.
+   */
+  private constructor();
+}
+
+export class Context {
+  constructor()
+  getCurrentBuffer(): AbstractBuffer;
+  /**
+  * TODO: might want to remove this.
+  */
+  present(): void;
+}

examples/components/webgpu-tensorflow/generated/types/interfaces/wasi-http-incoming-handler.d.ts

@@ -0,0 +1,16 @@
+/** @module Interface wasi:http/incoming-handler@0.2.3 **/
+/**
+ * This function is invoked with an incoming HTTP Request, and a resource
+ * `response-outparam` which provides the capability to reply with an HTTP
+ * Response. The response is sent by calling the `response-outparam.set`
+ * method, which allows execution to continue after the response has been
+ * sent. This enables both streaming to the response body, and performing other
+ * work.
+ * 
+ * The implementor of this function must write a response to the
+ * `response-outparam` before returning, or else the caller will respond
+ * with an error on its behalf.
+ */
+export function handle(request: IncomingRequest, responseOut: ResponseOutparam): void;
+export type IncomingRequest = import('./wasi-http-types.js').IncomingRequest;
+export type ResponseOutparam = import('./wasi-http-types.js').ResponseOutparam;