feat: introduce DeviceType, PowerOptions, and DataType constants; refactor WebNN program structure and update input form fields

Author: caperaven

app/web-nn/web-nn.html

@@ -2,13 +2,13 @@ <h2>WebNN</h2>
 
 <form>
     <label>
-        <div>Value1</div>
-        <input id="value1" type="number" value="10">
+        <div>cloudiness</div>
+        <input id="cloudiness" type="number" value="50">
     </label>
 
     <label>
-        <div>Value2</div>
-        <input id="value2" type="number" value="20">
+        <div>humidity</div>
+        <input id="humidity" type="number" value="10">
     </label>
 
     <button type="button">Submit</button>    

app/web-nn/web-nn.js

@@ -1,11 +1,11 @@
 import { EventsManager } from "../../src/system/events-manager.js";
-import { WebNNProgram } from "../../src/modules/webnn/webnn-program.js";
+import { Program } from "../../src/webnn/program.js";
 
 export default class WebNNView extends HTMLElement {
     static tag = "webnn-view";
 
     #eventsManager = new EventsManager();
-    #program = new WebNNProgram();
+    #program = new Program();
 
     constructor() {
         super();
@@ -25,30 +25,35 @@ export default class WebNNView extends HTMLElement {
             await this.#program.init();
 
             // 2. build graph
-            const descriptor = {dataType: 'float32', shape: [1]};
-            const A = this.#program.addToGraph("input", "A", descriptor);
-            const B = this.#program.addToGraph("input", "B", descriptor);
-            const C = this.#program.addToGraph("add", A, B);
-            this.#program.build({C});
+            const features = this.#program.addToGraph("input", "features", {dataType: 'float32', shape: [1, 2]});
+            const weights = this.#program.addConstant({dataType: 'float32', shape: [2,1]}, [0.7, 0.3]);
+            const bias = this.#program.addConstant({dataType: 'float32', shape: [1]}, [-0.5]);
+
+            const weightedSum = this.#program.addToGraph("matmul", features, weights);
+            const output = this.#program.addToGraph("add", weightedSum, bias);
+
+            await this.#program.build({output});
 
             // 3. add input and output tensors
-            await this.#program.addInputTensor("A", A);
-            await this.#program.addInputTensor("B", B);
-            await this.#program.addOutputTensor("C", C);
+            await this.#program.addInputTensor("features", features);
+            await this.#program.addOutputTensor("output", output);
         })        
     }
 
     async disconnectedCallback() {
         this.#eventsManager = this.#eventsManager.dispose();
+        this.#program = this.#program.dispose();
     }
 
-    async #submit(event) {
-        const value1 = this.shadowRoot.querySelector("#value1").value;
-        const value2 = this.shadowRoot.querySelector("#value2").value;
+    async disconnectedCallback() {
+        this.#eventsManager = this.#eventsManager.dispose();
+    }
 
-        await this.#program.set("A", [value1]);
-        await this.#program.set("B", [value2]);
+    async #submit(event) {
+        const cloudiness = this.shadowRoot.querySelector("#cloudiness").value;
+        const humidity = this.shadowRoot.querySelector("#humidity").value;
 
+        await this.#program.set("features", [cloudiness, humidity]);
         this.shadowRoot.querySelector("#result").textContent = await this.#program.run();
     }
 }

src/modules/webnn.js

@@ -1,60 +0,0 @@
-/**
- * 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 = [1]) {
-        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,
-            shape: this.#shape
-        };
-    }
-}