Image Super Sampling tool using the Tensorflow library to upscale image in browser - tensorflow

Question

I am unable to generate a super-sampled image and would like some advice.
The HTML, CSS, and JS are below for your review. As you can see, the goal is to enable a webpage visitor to upload a low-resolution image and generate and auto-download an enhanced image. This is meant to be done in the browser without using a database. The image will be stored in the browser, and the user should have a seamless experience.
HTML
<!-- HTML form that allows the user to select and upload an image file -->
<form>
<label for="image">Select an image:</label>
<input type="file" id="image" name="image" accept="image/jpeg, image/png">
<button class="upload-button" onclick="processImage()">Super Sample</button>
</form>
<!-- Canvas element to display the enhanced image -->
<canvas id="canvas"></canvas>
CSS
/* Global styles */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans- serif;
margin: 0;
background-color: #f3f3f3;
}
/* Styles for the form and canvas elements */
form {
display: flex;
flex-direction: column;
align-items: center;
margin: 50px;
}
label {
color: #333;
font-size: 16px;
}
input[type="file"] {
margin: 10px;
}
button {
margin: 10px;
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
canvas {
border: 1px solid #333;
margin: 10px;
display: block;
}
/* Center the canvas element */
form, canvas {
text-align: center;
}
JS
// Load the TensorFlow.js library
import * as tf from '#tensorflow/tfjs';
// Load the MobileNet model
const model = await tf.loadLayersModel('https://storage.googleapis.com/tfjs- models/tfjs/mobilenet_v1_1.0_224/model.json');
// JavaScript function to process the image and update the download link
async function processImage() {
// Get the selected file from the input element
var file = document.getElementById("image").files[0];
// Check if the file is an image
if (!file.type.match("image.*")) {
alert("Please select an image file");
return;
}
// Create an image element to display the selected image
var image = new Image();
image.src = URL.createObjectURL(file);
// Set the canvas dimensions to the dimensions of the image
var canvas = document.getElementById("canvas");
canvas.width = image.width;
canvas.height = image.height;
// Draw the image on the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
// Convert the canvas to a tensor
var tensor = tf.browser.fromPixels(canvas);
// Resize the tensor to the size expected by the MobileNet model
var resized