2b:null 2c:["$","title",null,{"children":"Frontend Parallelization On Your GPU | Rob Sutcliffe | Observable"}] 31:T41f,This notebook is used to **benchmark running the same matrix multiplication function on your CPU and GPU** to identify how many computations need to take place before it becomes optimal to run calculations on the GPU. (*for my machine it's around 80,000 concurrent computations before the GPU becomes the optimal processor*) The matrixes are generated as part of the same function so we can test against running the same computations on a server (*without having to send huge amounts of data both ways*) with the added delay of network time. This is hidden by default as it is obviously much slower (using a standard AWS Lambda function running [this python script](https://github.com/robsutcliffe/lambda-benchmark-functions/blob/main/multiplyMatrix.py)) you can switch this on with the toggle below. *Note: the GPU can run far more concurrent computations but I caped it at half-a-million because the CPU and lambda can't* **Move the computation size side slider and click `Run Calculations`** **Run a few times to create a new scatter Plot**32:T340b,placeholderPerformanceEntries = [ { method: "GPU", durration: 27.100000023841858, size: 1, computations: 1 }, { method: "CPU", durration: 0.10000002384185791, size: 1, computations: 1 }, { method: "GPU", durration: 61.799999952316284, size: 23, computations: 529 }, { method: "CPU", durration: 0.5, size: 23, computations: 529 }, { method: "GPU", durration: 72.10000002384186, size: 56, computations: 3136 }, { method: "CPU", durration: 1.399999976158142, size: 56, computations: 3136 }, { method: "GPU", durration: 65.5, size: 81, computations: 6561 }, { method: "CPU", durration: 4.700000047683716, size: 81, computations: 6561 }, { method: "GPU", durration: 71.79999995231628, size: 112, computations: 12544 }, { method: "CPU", durration: 5.400000035762787, size: 112, computations: 12544 }, { method: "GPU", durration: 75.19999998807907, size: 218, computations: 47524 }, { method: "CPU", durration: 33.80000001192093, size: 218, computations: 47524 }, { method: "GPU", durration: 75, size: 329, computations: 108241 }, { method: "CPU", durration: 51, size: 329, computations: 108241 }, { method: "GPU", durration: 83.89999997615814, size: 393, computations: 154449 }, { method: "CPU", durration: 89.59999996423721, size: 393, computations: 154449 }, { method: "GPU", durration: 35.59999996423721, size: 393, computations: 154449 }, { method: "CPU", durration: 100.80000001192093, size: 393, computations: 154449 }, { method: "GPU", durration: 40.5, size: 393, computations: 154449 }, { method: "CPU", durration: 102.40000003576279, size: 393, computations: 154449 }, { method: "GPU", durration: 31.299999952316284, size: 393, computations: 154449 }, { method: "CPU", durration: 98.80000001192093, size: 393, computations: 154449 }, { method: "GPU", durration: 37.5, size: 393, computations: 154449 }, { method: "CPU", durration: 100.20000004768372, size: 393, computations: 154449 }, { method: "GPU", durration: 37.10000002384186, size: 393, computations: 154449 }, { method: "CPU", durration: 100.19999998807907, size: 393, computations: 154449 }, { method: "GPU", durration: 35.799999952316284, size: 393, computations: 154449 }, { method: "CPU", durration: 99.20000004768372, size: 393, computations: 154449 }, { method: "GPU", durration: 71.19999998807907, size: 265, computations: 70225 }, { method: "CPU", durration: 29.69999998807907, size: 265, computations: 70225 }, { method: "GPU", durration: 14.700000047683716, size: 160, computations: 25600 }, { method: "CPU", durration: 9.399999976158142, size: 160, computations: 25600 }, { method: "GPU", durration: 18.30000001192093, size: 160, computations: 25600 }, { method: "CPU", durration: 11.300000011920929, size: 160, computations: 25600 }, { method: "GPU", durration: 18.599999964237213, size: 160, computations: 25600 }, { method: "CPU", durration: 14.200000047683716, size: 160, computations: 25600 }, { method: "GPU", durration: 68.80000001192093, size: 220, computations: 48400 }, { method: "CPU", durration: 17.399999976158142, size: 220, computations: 48400 }, { method: "GPU", durration: 20.899999976158142, size: 220, computations: 48400 }, { method: "CPU", durration: 25.100000023841858, size: 220, computations: 48400 }, { method: "GPU", durration: 12.699999988079071, size: 220, computations: 48400 }, { method: "CPU", durration: 15.599999964237213, size: 220, computations: 48400 }, { method: "GPU", durration: 21.5, size: 220, computations: 48400 }, { method: "CPU", durration: 25.400000035762787, size: 220, computations: 48400 }, { method: "GPU", durration: 62.80000001192093, size: 58, computations: 3364 }, { method: "CPU", durration: 0.40000003576278687, size: 58, computations: 3364 }, { method: "GPU", durration: 15.599999964237213, size: 58, computations: 3364 }, { method: "CPU", durration: 0.699999988079071, size: 58, computations: 3364 }, { method: "GPU", durration: 40.10000002384186, size: 459, computations: 210681 }, { method: "CPU", durration: 147.80000001192093, size: 459, computations: 210681 }, { method: "GPU", durration: 72.60000002384186, size: 321, computations: 103041 }, { method: "CPU", durration: 49.30000001192093, size: 321, computations: 103041 }, { method: "GPU", durration: 28.899999976158142, size: 321, computations: 103041 }, { method: "CPU", durration: 64.90000003576279, size: 321, computations: 103041 }, { method: "GPU", durration: 59.80000001192093, size: 341, computations: 116281 }, { method: "CPU", durration: 56.799999952316284, size: 341, computations: 116281 }, { method: "GPU", durration: 27.30000001192093, size: 341, computations: 116281 }, { method: "CPU", durration: 75.30000001192093, size: 341, computations: 116281 }, { method: "GPU", durration: 65.19999998807907, size: 109, computations: 11881 }, { method: "CPU", durration: 2.199999988079071, size: 109, computations: 11881 }, { method: "GPU", durration: 17.5, size: 109, computations: 11881 }, { method: "CPU", durration: 4.199999988079071, size: 109, computations: 11881 }, { method: "GPU", durration: 58.60000002384186, size: 164, computations: 26896 }, { method: "CPU", durration: 7.5, size: 164, computations: 26896 }, { method: "GPU", durration: 60.60000002384186, size: 172, computations: 29584 }, { method: "CPU", durration: 7.900000035762787, size: 172, computations: 29584 }, { method: "GPU", durration: 18.600000023841858, size: 172, computations: 29584 }, { method: "CPU", durration: 13.100000023841858, size: 172, computations: 29584 }, { method: "GPU", durration: 67.89999997615814, size: 207, computations: 42849 }, { method: "CPU", durration: 13.599999964237213, size: 207, computations: 42849 }, { method: "GPU", durration: 19.5, size: 207, computations: 42849 }, { method: "CPU", durration: 20.599999964237213, size: 207, computations: 42849 }, { method: "GPU", durration: 61.69999998807907, size: 174, computations: 30276 }, { method: "CPU", durration: 7.800000011920929, size: 174, computations: 30276 }, { method: "GPU", durration: 16.5, size: 174, computations: 30276 }, { method: "CPU", durration: 13.100000023841858, size: 174, computations: 30276 }, { method: "GPU", durration: 72.39999997615814, size: 333, computations: 110889 }, { method: "CPU", durration: 54.69999998807907, size: 333, computations: 110889 }, { method: "GPU", durration: 65.10000002384186, size: 278, computations: 77284 }, { method: "CPU", durration: 33.40000003576279, size: 278, computations: 77284 }, { method: "GPU", durration: 22.399999976158142, size: 278, computations: 77284 }, { method: "CPU", durration: 41.40000003576279, size: 278, computations: 77284 }, { method: "GPU", durration: 23.400000035762787, size: 308, computations: 94864 }, { method: "CPU", durration: 56.90000003576279, size: 308, computations: 94864 }, { method: "GPU", durration: 24.30000001192093, size: 308, computations: 94864 }, { method: "CPU", durration: 53.69999998807907, size: 308, computations: 94864 }, { method: "GPU", durration: 61.39999997615814, size: 191, computations: 36481 }, { method: "CPU", durration: 11.199999988079071, size: 191, computations: 36481 }, { method: "GPU", durration: 17.600000023841858, size: 220, computations: 48400 }, { method: "CPU", durration: 25.799999952316284, size: 220, computations: 48400 }, { method: "GPU", durration: 17.600000023841858, size: 220, computations: 48400 }, { method: "CPU", durration: 25.80000001192093, size: 220, computations: 48400 }, { method: "GPU", durration: 52.200000047683716, size: 387, computations: 149769 }, { method: "CPU", durration: 91.29999995231628, size: 387, computations: 149769 }, { method: "GPU", durration: 36.40000003576279, size: 387, computations: 149769 }, { method: "CPU", durration: 98, size: 387, computations: 149769 }, { method: "GPU", durration: 26.099999964237213, size: 317, computations: 100489 }, { method: "CPU", durration: 58.80000001192093, size: 317, computations: 100489 }, { method: "GPU", durration: 47.09999996423721, size: 326, computations: 106276 }, { method: "CPU", durration: 65.19999998807907, size: 326, computations: 106276 }, { method: "GPU", durration: 83.89999997615814, size: 377, computations: 142129 }, { method: "CPU", durration: 78.19999998807907, size: 377, computations: 142129 }, { method: "GPU", durration: 34.5, size: 377, computations: 142129 }, { method: "CPU", durration: 90.5, size: 377, computations: 142129 }, { method: "GPU", durration: 74.39999997615814, size: 344, computations: 118336 }, { method: "CPU", durration: 59.5, size: 344, computations: 118336 }, { method: "GPU", durration: 46.80000001192093, size: 461, computations: 212521 }, { method: "CPU", durration: 162.10000002384186, size: 461, computations: 212521 }, { method: "GPU", durration: 50.19999998807907, size: 425, computations: 180625 }, { method: "CPU", durration: 114.10000002384186, size: 425, computations: 180625 }, { method: "GPU", durration: 34.60000002384186, size: 425, computations: 180625 }, { method: "CPU", durration: 119.39999997615814, size: 425, computations: 180625 }, { method: "GPU", durration: 34.30000001192093, size: 424, computations: 179776 }, { method: "CPU", durration: 124.89999997615814, size: 424, computations: 179776 }, { method: "GPU", durration: 72.89999997615814, size: 421, computations: 177241 }, { method: "CPU", durration: 117.5, size: 421, computations: 177241 }, { method: "GPU", durration: 80, size: 418, computations: 174724 }, { method: "CPU", durration: 108, size: 418, computations: 174724 }, { method: "GPU", durration: 38.89999997615814, size: 418, computations: 174724 }, { method: "CPU", durration: 110.89999997615814, size: 418, computations: 174724 }, { method: "GPU", durration: 34, size: 415, computations: 172225 }, { method: "CPU", durration: 114.79999995231628, size: 415, computations: 172225 }, { method: "GPU", durration: 31.400000035762787, size: 415, computations: 172225 }, { method: "CPU", durration: 110.39999997615814, size: 415, computations: 172225 }, { method: "GPU", durration: 70.39999997615814, size: 411, computations: 168921 }, { method: "CPU", durration: 97.80000001192093, size: 411, computations: 168921 }, { method: "GPU", durration: 37.80000001192093, size: 411, computations: 168921 }, { method: "CPU", durration: 108, size: 411, computations: 168921 }, { method: "GPU", durration: 32, size: 411, computations: 168921 }, { method: "CPU", durration: 105, size: 411, computations: 168921 }, { method: "GPU", durration: 79.59999996423721, size: 404, computations: 163216 }, { method: "CPU", durration: 95.19999998807907, size: 404, computations: 163216 }, { method: "GPU", durration: 30, size: 404, computations: 163216 }, { method: "CPU", durration: 98.89999997615814, size: 404, computations: 163216 }, { method: "GPU", durration: 36.30000001192093, size: 404, computations: 163216 }, { method: "CPU", durration: 106.60000002384186, size: 404, computations: 163216 }, { method: "GPU", durration: 74.30000001192093, size: 402, computations: 161604 }, { method: "CPU", durration: 90.30000001192093, size: 402, computations: 161604 }, { method: "GPU", durration: 75, size: 388, computations: 150544 }, { method: "CPU", durration: 82, size: 388, computations: 150544 } ]33:[] 2f:{"id":"54f85fb7eb40ac69","slug":"frontend-parallelization-with-gpu-js","title":"Frontend Parallelization On Your GPU","thumbnail":"35109e57afd4ef40f591c6a9e33f9f83f1cd835d9db98c908e7967e12f57d8ee","access_level":"public","create_time":"$D2023-12-21T11:57:05.324Z","update_time":"$D2024-06-14T09:48:40.707Z","view_time":null,"first_public_time":"$D2023-12-22T14:54:47.569Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e876a28c3c37eb33","login":"robsutcliffe","name":"Rob Sutcliffe","avatar_url":"https://avatars-next.observableusercontent.com/d7a357e4e25d54fa6a52b416893300deadf980e06ff734b8aab218dc0d1e197f","tier":"starter_2024"},"version":844,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c301483060dd40d","login":"robsutcliffe","name":"Rob Sutcliffe","avatar_url":"https://avatars-next.observableusercontent.com/d7a357e4e25d54fa6a52b416893300deadf980e06ff734b8aab218dc0d1e197f","tier":null}],"members":[{"type":"individual","id":"4c301483060dd40d","login":"robsutcliffe","name":"Rob Sutcliffe","avatar_url":"https://avatars-next.observableusercontent.com/d7a357e4e25d54fa6a52b416893300deadf980e06ff734b8aab218dc0d1e197f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Frontend Parallelization On Your GPU","cells":[{"id":0,"value":"# Frontend Parallelization On Your GPU","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":529,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":648,"value":"viewof computationSize = Inputs.range([1, 500000], {\n label: \"computation size\",\n step: 1,\n value: 10000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":466,"value":"viewof runOnServer = Inputs.toggle({\n label: \"Run/Show server\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"viewof trigger = html`

${Object.assign(\n html`