DOCTYPE html html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title Denoising Autoencoder in TensorFlow js title script src https cdn jsdelivr net npm tensorflow tfjs script head body h1 Denoising Autoencoder Example h1 canvas id canvas width 128 height 128 canvas button onclick trainModel Train Model button button onclick denoiseImage Denoise Image button br br h3 Noisy Image h3 canvas id noisyCanvas width 128 height 128 canvas h3 Denoised Image h3 canvas id denoisedCanvas width 128 height 128 canvas script const canvas document getElementById canvas const noisyCanvas document getElementById noisyCanvas const denoisedCanvas document getElementById denoisedCanvas const ctx canvas getContext 2d const noisyCtx noisyCanvas getContext 2d const denoisedCtx denoisedCanvas getContext 2d const imageSize 128 const noiseFactor 0 3 noise level Function to generate a simple image with a circle pattern function generateImage const imgData ctx createImageData imageSize imageSize const data imgData data const center imageSize 2 const radius 20 for let y 0 y imageSize y for let x 0 x imageSize x const i y imageSize x 4 const dist Math sqrt x center 2 y center 2 if dist radius data i 255 Red data i 1 255 Green data i 2 255 Blue else data i 0 Red data i 1 0 Green data i 2 0 Blue data i 3 255 Alpha ctx putImageData imgData 0 0 Function to add noise to the generated image function addNoise imgData const data imgData data for let i 0 i data length i 4 const rand Math random if rand noiseFactor data i Math random 255 Random Red data i 1 Math random 255 Random Green data i 2 Math random 255 Random Blue return imgData Function to preprocess image and convert to tensor function preprocessImage imgData const imgArray new Float32Array imageSize imageSize for let y 0 y imageSize y for let x 0 x imageSize x const i y imageSize x 4 const gray 0 3 imgData data i 0 59 imgData data i 1 0 11 imgData data i 2 imgArray y imageSize x gray 255 Normalize to 0 1 return tf tensor imgArray 1 imageSize imageSize 1 Function to display image on canvas function displayImage imgData ctx ctx putImageData imgData 0 0 Define the model function createModel const model tf sequential Encoder model add tf layers conv2d filters 32 kernelSize 3 activation relu padding same inputShape imageSize imageSize 1 model add tf layers maxPooling2d poolSize 2 2 padding same model add tf layers conv2d filters 64 kernelSize 3 activation relu padding same Decoder model add tf layers conv2dTranspose filters 32 kernelSize 3 activation relu strides 2 padding same model add tf layers conv2dTranspose filters 1 kernelSize 3 activation sigmoid padding same model compile optimizer adam loss meanSquaredError return model Train the model async function trainModel generateImage Create a circle pattern const imgData ctx getImageData 0 0 imageSize imageSize const noisyImgData addNoise imgData Display the noisy image on the canvas displayImage noisyImgData noisyCtx const cleanImage preprocessImage imgData const noisyImage preprocessImage noisyImgData const model createModel await model fit noisyImage cleanImage epochs 150 batchSize 1 verbose 1 console log Training Complete Denoise the image async function denoiseImage const imgData ctx getImageData 0 0 imageSize imageSize const noisyImgData addNoise imgData Display the noisy image displayImage noisyImgData noisyCtx const noisyTensor preprocessImage noisyImgData const model createModel await model fit noisyTensor noisyTensor epochs 100 Training can be done here Denoise the image using the trained model const denoisedTensor model predict noisyTensor const denoisedImage denoisedTensor dataSync Convert tensor back to image for display const denoisedImgData new ImageData imageSize imageSize for let i 0 i denoisedImage length i const gray denoisedImage i 255 const idx i 4 denoisedImgData data idx gray R denoisedImgData data idx 1 gray G denoisedImgData data idx 2 gray B denoisedImgData data idx 3 255 A displayImage denoisedImgData denoisedCtx script body html
return tf tensor imgArray 1 imageSize imageSize 1 Function to display image on canvas function displayImage imgData ctx ctx putImageData imgData 0 0 Define the model function createModel const model tf sequential Encoder model add tf layers conv2d filters 32 kernelSize 3 activation relu padding same inputShape imageSize imageSize 1 model add tf layers maxPooling2d poolSize 2 2 padding same model add tf layers conv2d filters 64 kernelSize 3 activation relu padding same Decoder model add tf layers conv2dTranspose filters 32 kernelSize 3 activation relu strides 2 padding same model add tf layers conv2dTranspose filters 1 kernelSize 3 activation sigmoid padding same model compile optimizer adam loss meanSquaredError return model Train the model async function trainModel generateImage Create a circle pattern const imgData ctx getImageData 0 0 imageSize imageSize const noisyImgData addNoise imgData Display the noisy image on the canvas displayImage noisyImgData noisyCtx const cleanImage preprocessImage imgData const noisyImage preprocessImage noisyImgData const model createModel await model fit noisyImage cleanImage epochs 150 batchSize 1 verbose 1 console log Training Complete Denoise the image async function denoiseImage const imgData ctx getImageData 0 0 imageSize imageSize const noisyImgData addNoise imgData Display the noisy image displayImage noisyImgData noisyCtx const noisyTensor preprocessImage noisyImgData const model createModel await model fit noisyTensor noisyTensor epochs 100 Training can be done here Denoise the image using the trained model const denoisedTensor model predict noisyTensor const denoisedImage denoisedTensor dataSync Convert tensor back to image for display const denoisedImgData new ImageData imageSize imageSize for let i 0 i denoisedImage length i const gray denoisedImage i 255 const idx i 4 denoisedImgData data idx gray R denoisedImgData data idx 1 gray G denoisedImgData data idx 2 gray B denoisedImgData data idx 3 255 A displayImage denoisedImgData denoisedCtx script body html