hughpearse · January 3, 2023 14:38
diff --git a/tfjs-tflite-cartoongan.html b/tfjs-tflite-cartoongan.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Image Transform with TensorFlow.js</title>
    <!-- Load TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/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>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Image Transform with TensorFlow.js</title>
	<!-- Load TensorFlow.js library -->
	<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/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>