feat: add form for input values and display result in WebNN component

Author: caperaven

app/web-nn/web-nn.css

@@ -0,0 +1,4 @@
+:host {
+    padding: var(--padding);
+    display: block;
+}

app/web-nn/web-nn.html

@@ -1 +1,20 @@
-<h2>WebNN</h2>
+<h2>WebNN</h2>
+
+<form>
+    <label>
+        <div>Value1</div>
+        <input id="value1" type="number" value="10">
+    </label>
+    
+    <label>
+        <div>Value2</div>
+        <input id="value2" type="number" value="20">
+    </label>
+    
+    <button type="button">Submit</button>    
+</form>
+
+<div>
+    <span>Result: </span>
+    <span id="result"></span>
+</div>

app/web-nn/web-nn.js

@@ -1,11 +1,16 @@
+import { EventsManager } from "../../src/system/events-manager.js";
 import { 
     WebNNModule, 
     OperandDescriptorBuilder } from "../../src/modules/webnn.js";
 
 export default class WebNNView extends HTMLElement {
     static tag = "webnn-view";
 
+    #eventsManager = new EventsManager();
+    #graphBuilder
+    #graph;
     #context;
+    #tensors;
 
     constructor() {
         super();
@@ -16,10 +21,66 @@ export default class WebNNView extends HTMLElement {
 		this.shadowRoot.innerHTML = await api.call("component", "load_html", {
 			url: import.meta.url,
 		});  
+
+        requestAnimationFrame(() => {
+            const button = this.shadowRoot.querySelector("button");
+            this.#eventsManager.addEvent(button, "click", this.#submit.bind(this));
+        })
 
-        const graphBuilder = await WebNNModule.createGraph();
-        const constant2 = graphBuilder.constant(new OperandDescriptorBuilder().build(), new Float32Array([0.2]));
-        console.log(constant2);
+        this.#context = await WebNNModule.createContext();
+        this.#graphBuilder = await WebNNModule.createGraph( { context: this.#context } );
+        const operands = await this.#createGraph();
+        await this.#createTensors(operands.A, operands.B, operands.C);
+    }
+
+    async disconnectedCallback() {
+        this.#eventsManager = this.#eventsManager.dispose();
+    }
+
+    async #createGraph() {
+        const descriptor = new OperandDescriptorBuilder().build();
+        const A = this.#graphBuilder.input("A", descriptor);
+        const B = this.#graphBuilder.input("B", descriptor);
+        const C = this.#graphBuilder.add(A, B);  
+
+        this.#graph = await this.#graphBuilder.build({C});
+        return { A, B, C };
+    }
+
+    async #createTensors(inputA, inputB, outputC) {
+        this.#tensors = { 
+            inputA: await this.#createTensor(this.#context, inputA, true, true), 
+            inputB: await this.#createTensor(this.#context, inputB, true, true), 
+            outputC: await this.#createTensor(this.#context, outputC, false, true)
+        };
+    }
+
+    async #createTensor(context, operand, writable, readable) {
+        return context.createTensor({
+            dataType: operand.dataType, shape: operand.shape, writable, readable
+        })
+    }
+
+    async #submit(event) {
+        const value1 = this.shadowRoot.querySelector("#value1").value;
+        const value2 = this.shadowRoot.querySelector("#value2").value;
+
+        this.#context.writeTensor(this.#tensors.inputA, new Float32Array([value1]));
+        this.#context.writeTensor(this.#tensors.inputB, new Float32Array([value2]));
+
+        const inputs = {
+            'A': this.#tensors.inputA,
+            'B': this.#tensors.inputB
+        };
+
+        const outputs = {
+            'C': this.#tensors.outputC
+        };
+
+        this.#context.dispatch(this.#graph, inputs, outputs);
+        const output = await this.#context.readTensor(this.#tensors.outputC); 
+        const result = new Float32Array(output)[0];
+        this.shadowRoot.querySelector("#result").textContent = result;
     }
 }
 

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

@@ -13,7 +13,7 @@ export default class 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 = []) {
+    constructor(dataType = DataType.FLOAT32, shape = [1]) {
         this.#dataType = dataType;
         this.#shape = shape;
     }