refactor: enhance WebNN module with ContextOptionsBuilder and improve OperandDescriptorBuilder documentation

Author: caperaven

app/web-nn/web-nn.js

@@ -1,4 +1,6 @@
-import { WebNNModule, OperandDescriptorBuilder } from "../../src/modules/webnn.js";
+import { 
+    WebNNModule, 
+    OperandDescriptorBuilder } from "../../src/modules/webnn.js";
 
 export default class WebNNView extends HTMLElement {
     static tag = "webnn-view";
@@ -15,9 +17,7 @@ export default class WebNNView extends HTMLElement {
 			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);
     }

src/modules/webnn.js

@@ -2,29 +2,15 @@ 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";
+import ContextOptionsBuilder from "./webnn/builders/context-options-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);
+        const options = new ContextOptionsBuilder(args.deviceType, args.powerPreference).build();
         return await navigator.ml.createContext(options);
     }
 
@@ -40,5 +26,6 @@ export {
     DeviceType, 
     PowerOptions, 
     DataType,
-    OperandDescriptorBuilder
+    OperandDescriptorBuilder,
+    ContextOptionsBuilder
 };

src/modules/webnn/builders/context-options-builder.js

@@ -0,0 +1,29 @@
+import PowerOptions from "./../power-options.js";
+import DeviceType from "../device-type.js";
+
+export default class ContextOptionsBuilder {
+    #contextType;
+    #powerPreference;
+
+    constructor(contextType = DeviceType.GPU, powerPreference = PowerOptions.DEFAULt) {
+        this.#contextType = contextType;
+        this.#powerPreference = powerPreference;
+    }
+
+    setContextType(contextType) {
+        this.#contextType = contextType;
+        return this;
+    }
+
+    setPowerPreference(powerPreference) {
+        this.#powerPreference = powerPreference;
+        return this;
+    }
+
+    build() {
+        return {
+            deviceType: this.#contextType,
+            powerPreference: this.#powerPreference
+        };
+    }
+}

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

@@ -1,24 +1,56 @@
-import DataType  from "./../data-type.js";
+/**
+ * OperandDescriptorBuilder class to build MLOperandDescriptor objects.
+ * @see https://www.w3.org/TR/webnn/#dictdef-mloperanddescriptor
+ */
+import DataType from "./../data-type.js";
 
 export default class OperandDescriptorBuilder {
     #dataType;
     #shape;
 
+    /**
+     * Creates an instance of OperandDescriptorBuilder.
+     * @param {string} [dataType=DataType.FLOAT32] - The data type of the operand.
+     * @param {number[]} [shape=[]] - The shape of the operand.
+     */
     constructor(dataType = DataType.FLOAT32, shape = []) {
         this.#dataType = dataType;
         this.#shape = shape;
     }
 
+    /**
+     * Sets the data type of the operand.
+     * @param {string} dataType - The data type of the operand.
+     * @returns {OperandDescriptorBuilder} The builder instance.
+     * @example
+     * const builder = new OperandDescriptorBuilder().setDataType(DataType.INT16);
+     */
     setDataType(dataType) {
         this.#dataType = dataType;
         return this;
     }
 
+    /**
+     * Sets the shape of the operand.
+     * @param {number[]} shape - The shape of the operand.
+     * @returns {OperandDescriptorBuilder} The builder instance.
+     * @example
+     * const builder = new OperandDescriptorBuilder().setShape([1, 2, 3]);
+     */
     setShape(shape) {
         this.#shape = shape;
         return this;
     }
 
+    /**
+     * Builds the MLOperandDescriptor object.
+     * @returns {{dataType: string, shape: number[]}} The operand descriptor.
+     * @example
+     * const descriptor = new OperandDescriptorBuilder()
+     *     .setDataType(DataType.FLOAT32)
+     *     .setShape([1, 2, 3])
+     *     .build();
+     */
     build() {
         return {
             dataType: this.#dataType,