WebNN with Synaptic js Going to build and train a neworking using synaptic js we ll then save the result trained network values we ll then load the network values and build a WebNN network setup the weights biases Synatpic js XOR network build the network train it and save the weights biases etc to a json file Store in local storage so it can be accessed in the next step let sp await fetch https cdnjs cloudflare com ajax libs synaptic 1 1 4 synaptic js let st await sp text let synapticlibrary document createElement script synapticlibrary innerHTML st document body appendChild synapticlibrary const Layer Network Trainer synaptic Create the layers const inputLayer new Layer 2 const hiddenLayer new Layer 3 const outputLayer new Layer 1 Connect the layers inputLayer project hiddenLayer hiddenLayer project outputLayer Create the network const myNetwork new Network input inputLayer hidden hiddenLayer output outputLayer Training data const trainingSet input 0 0 output 0 input 0 1 output 1 input 1 0 output 1 input 1 1 output 0 Train the network const trainer new Trainer myNetwork trainer train trainingSet rate 0 2 iterations 20000 error 0 005 shuffle true log 1000 cost Trainer cost CROSS_ENTROPY Get the trained network JSON const trainedNetworkJSON myNetwork toJSON console log trainedNetworkJSON Save the trained network JSON for later use localStorage setItem trainedXORNetwork JSON stringify trainedNetworkJSON console log finished building training and saving xor using synaptic js This is whaat the json file looks like that we saved out from the synatpic js const trainedNetworkJSON neurons bias 0 squash LOGISTIC bias 0 squash LOGISTIC bias 1 9161856128464938 squash LOGISTIC bias 7 800569287153675 squash LOGISTIC bias 2 855484363201624 squash LOGISTIC bias 6 2824414258821815 squash LOGISTIC connections from 0 to 2 weight 4 874716835319492 from 0 to 3 weight 5 174847897175317 from 0 to 4 weight 6 614910780182805 from 1 to 2 weight 4 8880964776615565 from 1 to 3 weight 5 178397838699644 from 1 to 4 weight 6 627869792271866 from 2 to 5 weight 4 466847840684589 from 3 to 5 weight 12 747217749402143 from 4 to 5 weight 8 501598114378476 Code to parse and extract weights biases const trainedNetworkJSON neurons bias 0 squash LOGISTIC bias 0 squash LOGISTIC bias 1 9161856128464938 squash LOGISTIC bias 7 800569287153675 squash LOGISTIC bias 2 855484363201624 squash LOGISTIC bias 6 2824414258821815 squash LOGISTIC connections from 0 to 2 weight 4 874716835319492 from 0 to 3 weight 5 174847897175317 from 0 to 4 weight 6 614910780182805 from 1 to 2 weight 4 8880964776615565 from 1 to 3 weight 5 178397838699644 from 1 to 4 weight 6 627869792271866 from 2 to 5 weight 4 466847840684589 from 3 to 5 weight 12 747217749402143 from 4 to 5 weight 8 501598114378476 const networkStructure 2 3 1 Initialize arrays for weights and biases let weights1 let bias1 let weights2 let bias2 Extract weights and biases for let i 0 i networkStructure 0 i for let j networkStructure 0 j networkStructure 0 networkStructure 1 j const connection trainedNetworkJSON connections find conn conn from i conn to j weights1 push connection weight for let i networkStructure 0 i networkStructure 0 networkStructure 1 i bias1 push trainedNetworkJSON neurons i bias for let i networkStructure 0 networkStructure 1 i trainedNetworkJSON neurons length i bias2 push trainedNetworkJSON neurons i bias for let i networkStructure 0 i networkStructure 0 networkStructure 1 i for let j networkStructure 0 networkStructure 1 j trainedNetworkJSON neurons length j const connection trainedNetworkJSON connections find conn conn from i conn to j weights2 push connection weight console log Weights1 weights1 console log Bias1 bias1 console log Weights2 weights2 console log Bias2 bias2 Build WebNN with the correct sizes and weights biases const context await navigator ml createContext const builder new MLGraphBuilder context Extracted weights and biases const weights1 4 874716835319492 5 174847897175317 6 614910780182805 4 8880964776615565 5 178397838699644 6 627869792271866 const bias1 1 9161856128464938 7 800569287153675 2 855484363201624 const weights2 4 466847840684589 12 747217749402143 8 501598114378476 const bias2 6 2824414258821815 Tensors are multidimensional arrays and the shape of a tensor defines its dimensions A tensor with shape 1 is a 1D array with a single element while a tensor with shape 1 1 is a 2D array with 1 row and 1 column Define input placeholders const inputShape 1 2 Input shape should be 1 2 for 2 input neurons as it s a 1d array const inputType float32 const outputShape 1 1 Output shape 1 for single output const input builder input input dataType inputType shape inputShape Create weights and biases as constants const W1 builder constant dataType inputType shape 2 3 new Float32Array weights1 const b1 builder constant dataType inputType shape 1 3 new Float32Array bias1 const W2 builder constant dataType inputType shape 3 1 new Float32Array weights2 const b2 builder constant dataType inputType shape 1 1 new Float32Array bias2 Create the network const hiddenLayer builder sigmoid builder add builder matmul input W1 b1 const outputLayer builder sigmoid builder add builder matmul hiddenLayer W2 b2 Build the graph const graph await builder build output outputLayer Create reusable tensors for inputs and output const inputTensor await context createTensor dataType inputType shape inputShape writable true const outputTensor await context createTensor dataType inputType shape outputShape readable true Define different input values for testing const inputValuesList new Float32Array 0 0 0 0 new Float32Array 0 0 1 0 new Float32Array 1 0 0 0 new Float32Array 1 0 1 0 new Float32Array 0 5 1 0 new Float32Array 1 0 1 5 new Float32Array 1 5 2 0 Execute the graph with different input values for const inputValues of inputValuesList Write the input values to the tensor await context writeTensor inputTensor inputValues Execute the graph const inputs input inputTensor const outputs output outputTensor await context dispatch graph inputs outputs Read and print the result const result await context readTensor outputTensor const out new Float32Array result console log Input Object values inputValues Output Object values out const trainingSet input 0 0 output 0 input 0 1 output 1 input 1 0 output 1 input 1 1 output 0
for let j networkStructure 0 j networkStructure 0 networkStructure 1 j const connection trainedNetworkJSON connections find conn conn from i conn to j weights1 push connection weight for let i networkStructure 0 i networkStructure 0 networkStructure 1 i bias1 push trainedNetworkJSON neurons i bias for let i networkStructure 0 networkStructure 1 i trainedNetworkJSON neurons length i bias2 push trainedNetworkJSON neurons i bias for let i networkStructure 0 i networkStructure 0 networkStructure 1 i for let j networkStructure 0 networkStructure 1 j trainedNetworkJSON neurons length j const connection trainedNetworkJSON connections find conn conn from i conn to j weights2 push connection weight console log Weights1 weights1 console log Bias1 bias1 console log Weights2 weights2 console log Bias2 bias2 Build WebNN with the correct sizes and weights biases const context await navigator ml createContext const builder new MLGraphBuilder context Extracted weights and biases const weights1 4 874716835319492 5 174847897175317 6 614910780182805 4 8880964776615565 5 178397838699644 6 627869792271866 const bias1 1 9161856128464938 7 800569287153675 2 855484363201624 const weights2 4 466847840684589 12 747217749402143 8 501598114378476 const bias2 6 2824414258821815 Tensors are multidimensional arrays and the shape of a tensor defines its dimensions A tensor with shape 1 is a 1D array with a single element while a tensor with shape 1 1 is a 2D array with 1 row and 1 column Define input placeholders const inputShape 1 2 Input shape should be 1 2 for 2 input neurons as it s a 1d array const inputType float32 const outputShape 1 1 Output shape 1 for single output const input builder input input dataType inputType shape inputShape Create weights and biases as constants const W1 builder constant dataType inputType shape 2 3 new Float32Array weights1 const b1 builder constant dataType inputType shape 1 3 new Float32Array bias1 const W2 builder constant dataType inputType shape 3 1 new Float32Array weights2 const b2 builder constant dataType inputType shape 1 1 new Float32Array bias2 Create the network const hiddenLayer builder sigmoid builder add builder matmul input W1 b1 const outputLayer builder sigmoid builder add builder matmul hiddenLayer W2 b2 Build the graph const graph await builder build output outputLayer Create reusable tensors for inputs and output const inputTensor await context createTensor dataType inputType shape inputShape writable true const outputTensor await context createTensor dataType inputType shape outputShape readable true Define different input values for testing const inputValuesList new Float32Array 0 0 0 0 new Float32Array 0 0 1 0 new Float32Array 1 0 0 0 new Float32Array 1 0 1 0 new Float32Array 0 5 1 0 new Float32Array 1 0 1 5 new Float32Array 1 5 2 0 Execute the graph with different input values for const inputValues of inputValuesList Write the input values to the tensor await context writeTensor inputTensor inputValues Execute the graph const inputs input inputTensor const outputs output outputTensor await context dispatch graph inputs outputs Read and print the result const result await context readTensor outputTensor const out new Float32Array result console log Input Object values inputValues Output Object values out const trainingSet input 0 0 output 0 input 0 1 output 1 input 1 0 output 1 input 1 1 output 0