feat: add WebNN module and integrate WebNN view component with routing

Author: caperaven

app/home/home.html

@@ -10,4 +10,5 @@ <h2>Home</h2>
     <li><a href="/main-menu">Main Menu</a></li>
     <li><a href="/material-icons">Material Icons</a></li>
     <li><a href="/activity-state">Activity State</a></li>
+    <li><a href="/web-nn">Web NN</a></li>
 </ul>

app/routes.js

@@ -6,5 +6,6 @@ export const routes = Object.freeze({
 	"dynamic-columns": "/dynamic-layout",
 	"main-menu": "/main-menu",
 	"material-icons": "/material-icons",
-	"activity-state": "/activity-state"
+	"activity-state": "/activity-state",
+	"web-nn": "/web-nn"
 });

app/web-nn/web-nn.css

@@ -0,0 +1 @@
+<h2>WebNN</h2>

app/web-nn/web-nn.html

@@ -0,0 +1,26 @@
+import { WebNNModule, OperandDescriptorBuilder } from "../../src/modules/webnn.js";
+
+export default class WebNNView extends HTMLElement {
+    static tag = "webnn-view";
+
+    #context;
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+
+    async connectedCallback() {
+		this.shadowRoot.innerHTML = await api.call("component", "load_html", {
+			url: import.meta.url,
+		});  
+        
+        const operandType = await WebNNModule.createOperandType({ dimensions: [2, 2]});
+        const graphBuilder = await WebNNModule.createGraph();
+
+        const constant2 = graphBuilder.constant(new OperandDescriptorBuilder().build(), new Float32Array([0.2]));
+        console.log(constant2);
+    }
+}
+
+customElements.define(WebNNView.tag, WebNNView);

app/web-nn/web-nn.js

@@ -0,0 +1,44 @@
+import DeviceType from "./webnn/device-type.js";
+import PowerOptions from "./webnn/power-options.js";
+import DataType from "./webnn/data-type.js";
+import OperandDescriptorBuilder from "./webnn/builders/operand-descriptor-builder.js";
+
+class WebNNModule {
+    static async available() {
+        return navigator.ml !== undefined;
+    }
+
+    static createOperandDescriptor(args = {}) {
+        const { dataType = DataType.FLOAT32, shape = [] } = args;
+        return { dataType, shape };
+    }
+
+    static createOperandType(args= {}) {
+        const { dataType = DataType.FLOAT32, dimensions = [] } = args;
+        return { dataType, dimensions };
+    }
+
+    static async createContextOption(args = {}) {
+        const { deviceType = DeviceType.GPU, powerPreference = PowerOptions.DEFAULt } = args;
+        return { deviceType, powerPreference };
+    }
+
+    static async createContext(args = {}) {
+        const options = await this.createContextOption(args.options);
+        return await navigator.ml.createContext(options);
+    }
+
+    static async createGraph(args = {}) {
+        // https://www.w3.org/TR/webnn/#mlgraphbuilder
+        const { context = await this.createContext() } = args;
+        return new MLGraphBuilder(context);
+    }
+}
+
+export { 
+    WebNNModule, 
+    DeviceType, 
+    PowerOptions, 
+    DataType,
+    OperandDescriptorBuilder
+};

src/modules/webnn.js

@@ -0,0 +1,28 @@
+import DataType  from "./../data-type.js";
+
+export default class OperandDescriptorBuilder {
+    #dataType;
+    #shape;
+
+    constructor(dataType = DataType.FLOAT32, shape = []) {
+        this.#dataType = dataType;
+        this.#shape = shape;
+    }
+
+    setDataType(dataType) {
+        this.#dataType = dataType;
+        return this;
+    }
+
+    setShape(shape) {
+        this.#shape = shape;
+        return this;
+    }
+
+    build() {
+        return {
+            dataType: this.#dataType,
+            shape: this.#shape
+        };
+    }
+}

src/modules/webnn/builders/operand-descriptor-builder.js

@@ -0,0 +1,12 @@
+const DataType = Object.freeze({
+    FLOAT16 : "float16",
+    FLOAT32 : "float32",
+    INT32   : "int32",
+    UINT32  : "uint32",
+    INT64   : "int64",
+    UINT64  : "uint64",
+    INT8    : "int8",
+    UINT8   : "uint8"
+});
+
+export default DataType;

src/modules/webnn/data-type.js

@@ -0,0 +1,7 @@
+const DeviceType = Object.freeze({
+    CPU: "cpu",
+    GPU: "gpu",
+    NPU: "npu"
+});
+
+export default DeviceType;

src/modules/webnn/device-type.js

@@ -0,0 +1,7 @@
+const PowerOptions = Object.freeze({
+    DEFAULt : "default",
+    LOW     : "low-power",
+    HIGH    : "high-performance"
+});
+
+export default PowerOptions;