WebNN Training Example Hack in a training loop to get step by step information about the training html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title xbdev net Neural Network Training Example title script src https cdn jsdelivr net npm chart js script style canvas max width 90 margin 20px auto display block style head body h2 style text align center Neural Network Training Sine Wave h2 canvas id trainingChart canvas script async function trainNeuralNetwork 1 Generate Sine Wave Data const numPoints 100 const x Array from length numPoints _ i i 10 const sineInput new Float32Array x map v Math sin v const targetOutput new Float32Array x map v Math sin v 0 8 0 2 Scaled and shifted sine wave 2 Define Initial Weights and Bias let weight 0 5 Random initial weight let bias 0 1 Random initial bias Training parameters const learningRate 0 01 const maxEpochs 1000 const maxTime 2000 Maximum training time in milliseconds const startTime performance now Arrays to store training history const epochHistory const lossHistory Training loop for let epoch 0 epoch maxEpochs epoch Check elapsed time const elapsedTime performance now startTime if elapsedTime maxTime console log Training stopped due to time limit break 3 Predict Output using Current Weight and Bias const predictedOutput sineInput map v v weight bias 4 Compute Loss Mean Squared Error let loss 0 for let i 0 i numPoints i loss Math pow predictedOutput i targetOutput i 2 loss numPoints 5 Compute Gradients for weight and bias let weightGradient 0 let biasGradient 0 for let i 0 i numPoints i const error predictedOutput i targetOutput i weightGradient 2 error sineInput i biasGradient 2 error weightGradient numPoints biasGradient numPoints 6 Update Weight and Bias Gradient Descent weight learningRate weightGradient bias learningRate biasGradient Log progress epochHistory push epoch lossHistory push loss if epoch 30 0 only every 30 steps console log Epoch epoch 1 Loss loss toFixed 4 Optional Break if loss is sufficiently small if loss 1e 5 console log Training stopped due to convergence break console log Training completed console log Final Weight weight toFixed 4 Final Bias bias toFixed 4 Visualize Training Results plotTrainingHistory epochHistory lossHistory sineInput targetOutput weight bias function plotTrainingHistory epochs losses input target finalWeight finalBias const ctx document getElementById trainingChart getContext 2d Final predictions using trained weight and bias const finalPredictions input map v v finalWeight finalBias new Chart ctx type line data labels epochs datasets label Training Loss data losses borderColor orange fill false yAxisID y label Target Output Ground Truth data Array from target borderColor blue fill false yAxisID y1 label Final Predictions data Array from finalPredictions borderColor green fill false yAxisID y1 options responsive true plugins legend position top scales y title display true text Loss position left y1 title display true text Output Values position right grid drawOnChartArea false x title display true text Epochs Run the training example trainNeuralNetwork script body html Pass the trained weight and bias to the webnn network WebNN Training Example Hack in a training loop to get step by step information about the training html lang en head style body min height 700px style meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title xbdev net Neural Network Training Example title script src https cdn jsdelivr net npm chart js script style canvas max width 90 margin 20px auto display block style head body h2 style text align center Neural Network Training Sine Wave h2 canvas id trainingChart width 700 canvas canvas id sineWaveChart width 700 height 700 canvas script async function trainNeuralNetwork 1 Generate Sine Wave Data const numPoints 100 const x Array from length numPoints _ i i 10 const sineInput new Float32Array x map v Math sin v const targetOutput new Float32Array x map v Math sin v 0 8 0 2 Scaled and shifted sine wave 2 Define Initial Weights and Bias let weight 0 1 Random initial weight let bias 0 1 Random initial bias Training parameters const learningRate 0 01 const maxEpochs 1000 const maxTime 2000 Maximum training time in milliseconds const startTime performance now Arrays to store training history const epochHistory const lossHistory Training loop for let epoch 0 epoch maxEpochs epoch Check elapsed time const elapsedTime performance now startTime if elapsedTime maxTime console log Training stopped due to time limit break 3 Predict Output using Current Weight and Bias const predictedOutput sineInput map v v weight bias 4 Compute Loss Mean Squared Error let loss 0 for let i 0 i numPoints i loss Math pow predictedOutput i targetOutput i 2 loss numPoints 5 Compute Gradients for weight and bias let weightGradient 0 let biasGradient 0 for let i 0 i numPoints i const error predictedOutput i targetOutput i weightGradient 2 error sineInput i biasGradient 2 error weightGradient numPoints biasGradient numPoints 6 Update Weight and Bias Gradient Descent weight learningRate weightGradient bias learningRate biasGradient Log progress epochHistory push epoch lossHistory push loss if epoch 30 0 console log Epoch epoch 1 Loss loss toFixed 4 Optional Break if loss is sufficiently small if loss 1e 5 console log Training stopped due to convergence break console log Training completed console log Final Weight weight toFixed 4 Final Bias bias toFixed 4 Visualize Training Results plotTrainingHistory epochHistory lossHistory sineInput targetOutput weight bias second part use the trained weight bias for the webnn use the trained weight bias for our webnn network const context await navigator ml createContext const builder new MLGraphBuilder context 1 Use the Generate Sine Wave Input fromTraining 2 Define Neural Network Layers const inputShape numPoints 1 const input builder input input dataType float32 shape inputShape const bweights builder constant dataType float32 shape 1 1 new Float32Array weight Weight for scaling const bbias builder constant dataType float32 shape 1 new Float32Array bias Bias Linear transformation y x weight bias const output builder add builder matmul input bweights bbias 3 Build and Initialize Graph const graph await builder build output const inputTensor await context createTensor dataType float32 shape inputShape writable true const outputTensor await context createTensor dataType float32 shape inputShape readable true 4 Write Input and Execute the Graph context writeTensor inputTensor sineInput const inputs input inputTensor const outputs output outputTensor context dispatch graph inputs outputs 5 Read the Output const outputBuffer await context readTensor outputTensor const outputArray new Float32Array outputBuffer 6 Plot the Input vs Output plotSineWave x sineInput outputArray function plotSineWave x input output const ctx document getElementById sineWaveChart getContext 2d new Chart ctx type line data labels x datasets label Sine Wave Input data Array from input borderColor blue fill false tension 0 1 label Neural Network Output data Array from output borderColor red fill false tension 0 1 options responsive true plugins legend position top scales x title display true text X Time y title display true text Y Value function plotTrainingHistory epochs losses input target finalWeight finalBias const ctx document getElementById trainingChart getContext 2d Final predictions using trained weight and bias const finalPredictions input map v v finalWeight finalBias new Chart ctx type line data labels epochs datasets label Training Loss data losses borderColor orange fill false yAxisID y label Target Output Ground Truth data Array from target borderColor blue fill false yAxisID y1 label Final Predictions data Array from finalPredictions borderColor green fill false yAxisID y1 options responsive true plugins legend position top scales y title display true text Loss position left y1 title display true text Output Values position right grid drawOnChartArea false x title display true text Epochs Run the training example trainNeuralNetwork script body html
ore training history const epochHistory const lossHistory Training loop for let epoch 0 epoch maxEpochs epoch Check elapsed time const elapsedTime performance now startTime if elapsedTime maxTime console log Training stopped due to time limit break 3 Predict Output using Current Weight and Bias const predictedOutput sineInput map v v weight bias 4 Compute Loss Mean Squared Error let loss 0 for let i 0 i numPoints i loss Math pow predictedOutput i targetOutput i 2 loss numPoints 5 Compute Gradients for weight and bias let weightGradient 0 let biasGradient 0 for let i 0 i numPoints i const error predictedOutput i targetOutput i weightGradient 2 error sineInput i biasGradient 2 error weightGradient numPoints biasGradient numPoints 6 Update Weight and Bias Gradient Descent weight learningRate weightGradient bias learningRate biasGradient Log progress epochHistory push epoch lossHistory push loss if epoch 30 0 console log Epoch epoch 1 Loss loss toFixed 4 Optional Break if loss is sufficiently small if loss 1e 5 console log Training stopped due to convergence break console log Training completed console log Final Weight weight toFixed 4 Final Bias bias toFixed 4 Visualize Training Results plotTrainingHistory epochHistory lossHistory sineInput targetOutput weight bias second part use the trained weight bias for the webnn use the trained weight bias for our webnn network const context await navigator ml createContext const builder new MLGraphBuilder context 1 Use the Generate Sine Wave Input fromTraining 2 Define Neural Network Layers const inputShape numPoints 1 const input builder input input dataType float32 shape inputShape const bweights builder constant dataType float32 shape 1 1 new Float32Array weight Weight for scaling const bbias builder constant dataType float32 shape 1 new Float32Array bias Bias Linear transformation y x weight bias const output builder add builder matmul input bweights bbias 3 Build and Initialize Graph const graph await builder build output const inputTensor await context createTensor dataType float32 shape inputShape writable true const outputTensor await context createTensor dataType float32 shape inputShape readable true 4 Write Input and Execute the Graph context writeTensor inputTensor sineInput const inputs input inputTensor const outputs output outputTensor context dispatch graph inputs outputs 5 Read the Output const outputBuffer await context readTensor outputTensor const outputArray new Float32Array outputBuffer 6 Plot the Input vs Output plotSineWave x sineInput outputArray function plotSineWave x input output const ctx document getElementById sineWaveChart getContext 2d new Chart ctx type line data labels x datasets label Sine Wave Input data Array from input borderColor blue fill false tension 0 1 label Neural Network Output data Array from output borderColor red fill false tension 0 1 options responsive true plugins legend position top scales x title display true text X Time y title display true text Y Value function plotTrainingHistory epochs losses input target finalWeight finalBias const ctx document getElementById trainingChart getContext 2d Final predictions using trained weight and bias const finalPredictions input map v v finalWeight finalBias new Chart ctx type line data labels epochs datasets label Training Loss data losses borderColor orange fill false yAxisID y label Target Output Ground Truth data Array from target borderColor blue fill false yAxisID y1 label Final Predictions data Array from finalPredictions borderColor green fill false yAxisID y1 options responsive true plugins legend position top scales y title display true text Loss position left y1 title display true text Output Values position right grid drawOnChartArea false x title display true text Epochs Run the training example trainNeuralNetwork script body html