webnn_workshop/getting-started/05_webnn_compute_large.html at main · IntelSoftware/webnn_workshop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
<body>
  <h1>WebNN</h1>
  <h3>WebNN Computation</h3>

  <script type="module">

(async () => {
  // Check WebNN support
  var msg = "";
  if (!navigator.ml) {
    msg = "<p>WebNN not enabled in browser</p>";
    msg += "<p>Open URL chrome://flags/, search for webnn, and set to enable</p>";
    document.getElementsByTagName('body')[0].innerHTML += msg;
    return;
  }

  // Select device for computation
  var devices = ['gpu', 'cpu'];
  var context;
  for (const device of devices) {
    try {
      context = await navigator.ml.createContext({ deviceType: device });
      document.getElementsByTagName('body')[0].innerHTML += "<p>WebNN "+ device + " selected</p>";
      break;
    } catch (e) {}
  }

  document.getElementsByTagName('body')[0].innerHTML += "<p>Starting Computation...</p>";

  const builder = new MLGraphBuilder(context);
  const input = {dataType: 'float32', shape: [10000, 10000], writable: true};
  const output = {dataType: 'float32', shape: [10000, 10000], readable: true};
  // Step 1: Create a computational graph calculating `c = a * b`.
  const a = builder.input('a', input);
  const b = builder.input('b', input);
  const c = builder.matmul(a, b);
  // Step 2: Compile it into an executable graph.
  const graph = await builder.build({c});
  // Step 3: Bind input and output buffers to the graph and execute.
  const tensorA = await context.createTensor(input);
  const tensorB = await context.createTensor(input);
  const tensorC = await context.createTensor(output);
  context.writeTensor(tensorA, new Float32Array(10000*10000).fill(1.0));
  context.writeTensor(tensorB, new Float32Array(10000*10000).fill(2.0));
  context.dispatch(graph, {a: tensorA, b: tensorB}, {c: tensorC});
  const results = await context.readTensor(tensorC);
  document.getElementsByTagName('body')[0].innerHTML += "Done, C[0,0] = " + new Float32Array(results)[0,0];
})();

  </script>
</body>
</html>