Last active
January 3, 2023 14:38
-
-
Save hughpearse/a5554b252a5e418bb76a534c2385a836 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Image Transform with TensorFlow.js</title> | |
| <!-- Load TensorFlow.js library --> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.1.0/dist/tf.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite@0.0.1-alpha.6/dist/tf-tflite.min.js"></script> | |
| </head> | |
| <body> | |
| <h1>Image Transform with TensorFlow.js</h1> | |
| <!-- Load the image to be transformed --> | |
| <img id="input-image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png" crossorigin="anonymous" alt="Original image"> | |
| <br> | |
| <!-- Button to trigger image transform --> | |
| <button id="transform-button">Transform</button> | |
| <!-- Display the transformed image --> | |
| <h1>Transformed Image</h1> | |
| <canvas id="output-image"></canvas> | |
| <!-- Script to perform the transformation --> | |
| <script> | |
| const transformButton = document.getElementById('transform-button'); | |
| const inputImage = document.getElementById('input-image'); | |
| const canvas = document.getElementById('output-image'); | |
| async function transform(inputImageData, tfliteModel) { | |
| // Prepare the input tensors from the image. | |
| const inputTensor = tf.image | |
| // Resize. | |
| .resizeBilinear(tf.browser.fromPixels(inputImageData), [ | |
| 224, | |
| 224 | |
| ]) | |
| // Normalize. | |
| .expandDims().div(127.5).sub(1); | |
| // Run the inference and get the output tensors. | |
| const outputTensor = tfliteModel.predict(inputTensor); | |
| // De-normalize. | |
| const data = outputTensor.add(1).mul(127.5); | |
| // Convert from RGB to RGBA, and create and return ImageData. | |
| const rgb = Array.from(data.dataSync()); | |
| const rgba = []; | |
| for (let i = 0; i < rgb.length / 3; i++) { | |
| for (let c = 0; c < 3; c++) { | |
| rgba.push(rgb[i * 3 + c]); | |
| } | |
| rgba.push(255); | |
| } | |
| // Draw on canvas. | |
| const imageData = new ImageData(Uint8ClampedArray.from(rgba), 224, 224); | |
| return imageData; | |
| } | |
| // When the button is clicked, update the image | |
| transformButton.addEventListener('click', async () => { | |
| const tfliteModel = await tflite.loadTFLiteModel("https://storage.googleapis.com/tfweb/models/cartoongan_fp16.tflite", ); | |
| // Get the canvas element | |
| const canvas = document.querySelector("canvas"); | |
| const ctx = canvas.getContext('2d'); | |
| // Set the canvas size to the size of the original image | |
| canvas.width = inputImage.width; | |
| canvas.height = inputImage.height; | |
| // Draw the original image on the canvas | |
| ctx.drawImage(inputImage, 0, 0); | |
| // Get the image data from the canvas | |
| const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); | |
| const result = await transform(imageData, tfliteModel); | |
| // Update the image data on the canvas | |
| canvas.width = result.width; | |
| canvas.height = result.height; | |
| ctx.putImageData(result, 0, 0); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment