i have this code but has issu and not working model load successfuly but other thing not working , what i want is i want load image and use with custom trainer in vuejs application this is my code "<template>
  <v-app>
    <v-main>
      <input type="file" @change="onFileChange" accept="image/*" />
      <div v-if="imageTensor">
        <p>Image tensor loaded! Shape: {{ tensorShape }}</p>
      </div>

      <v-btn @click="start">Test</v-btn>
    </v-main>

    <AppFooter />
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      imageTensor: null,

    }
  },
  computed: {
    tensorShape() {
      // Get the shape of the tensor for display
      return this.imageTensor ? this.imageTensor.shape : null;
    },
  },
  mounted() {
    console.log("ok")
  },
  methods: {
    async start() {
      const modelPath = 'src/assets/model/best_web_model/model.json';
      const imagePath = '/home/ali/Desktop/tfvue/tfvue/src/assets/11.jpg'; // Input image path
      const outputImagePath = 'output.jpg'; // Output image path
      const targetHeight = 640;
      const targetWidth = 640;
      const detectionThreshold = 0.5; // Confidence threshold for detections

      // Load the model
      const model = await tf.loadGraphModel(modelPath);
      console.log('Model successfully loaded.');
      // Load and preprocess the input image
      var inputTensor = this.imageTensor;// await this.loadImageTensor(imagePath, targetHeight, targetWidth);

      // Make predictions
      const predictionTensor = model.execute(inputTensor); // Expecting single tensor
      const predictionArray = predictionTensor.arraySync(); // Get raw output array
      tf.dispose(predictionTensor); // Free memory from prediction tensor

      // Parse model output (shape: [1, 8, 8400])
      const detections = predictionArray[0]; // Remove batch dimension
      const boxes = [];
      const scores = [];
      const classes = [];


      detections.forEach(detection => {
        const [y1, x1, y2, x2, confidence, ...classProbs] = detection; // Decompose detection into values
        const maxClassIndex = classProbs.indexOf(Math.max(...classProbs)); // Get class with highest probability
        const score = confidence * classProbs[maxClassIndex]; // Calculate final score (confidence * class probability)

        console.log(score);

        if (score > detectionThreshold) { // Filter by detection threshold
          boxes.push([y1, x1, y2, x2]); // Bounding box
          scores.push(score); // Detection score
          classes.push(maxClassIndex); // Detected class label
        }
      });

      // Load original image tensor for drawing
      const originalImageTensor = tf.node.decodeImage(fs.readFileSync(imagePath), 3);

      // Draw bounding boxes
      const modifiedImageTensor = drawBoxOnImage(
        originalImageTensor, boxes, scores, classes, detectionThreshold, targetWidth, targetHeight
      );

      // Encode the modified tensor back into an image format (JPEG)
      const encodedImage = await tf.node.encodeJpeg(modifiedImageTensor); // Await here to resolve the promise

      // Save the modified image
      //fs.writeFileSync(outputImagePath, encodedImage);
      console.log('Modified image saved to', outputImagePath);

      // Clean up tensors
      tf.dispose([inputTensor, originalImageTensor, modifiedImageTensor]);
    },
    //---------------------------
    onFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.loadImageTensorFromFile(file, 640, 640) // Specify target dimensions
          .then((tensor) => {
            this.imageTensor = tensor; // Store the resulting tensor
            console.log('Tensor created:', tensor);
          })
          .catch((err) => {
            console.error('Error processing file:', err);
          });
      }
    },
    loadImageTensorFromFile(file, targetHeight, targetWidth) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = (event) => {
          const img = new Image();
          img.src = event.target.result; // Use the file content as a data URL

          img.onload = () => {
            // Create a canvas to extract image data
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = targetWidth;
            canvas.height = targetHeight;

            // Draw and resize the image on the canvas
            ctx.drawImage(img, 0, 0, targetWidth, targetHeight);

            // Convert canvas pixels to TensorFlow.js tensor
            const imageData = ctx.getImageData(0, 0, targetWidth, targetHeight);
            const imageTensor = tf.browser.fromPixels(imageData);

            // Normalize and batch the tensor
            const normalizedTensor = imageTensor.div(255.0); // Normalize to [0, 1]
            const batchedTensor = normalizedTensor.expandDims(0); // Add batch dimension
            resolve(batchedTensor);

            // Clean up (dispose of the intermediate tensor)
            tf.dispose(imageTensor);
          };

          img.onerror = () => {
            reject('Failed to load image');
          };
        };

        reader.onerror = () => reject('Error reading file with FileReader');

        // Read the file as a data URL
        reader.readAsDataURL(file);
      });
    },
  },
  //---------------------------
  drawBoxOnImage(imageTensor, boxes, scores, classes, threshold, width, height) {
    const pixelData = imageTensor.arraySync(); // Access raw pixel array

    boxes.forEach((box, idx) => {
      const [y1, x1, y2, x2] = box; // [top, left, bottom, right]
      const score = scores[idx];
      const classId = classes[idx];

      if (score > threshold) {
        const startX = Math.floor(x1 * width);  // Scale normalized value to pixel coordinates
        const startY = Math.floor(y1 * height);
        const endX = Math.floor(x2 * width);
        const endY = Math.floor(y2 * height);

        // Define bounding box color (based on class ID, optional customization)
        const color = [255, 0, 0]; // Red

        // Draw top and bottom edges
        for (let x = startX; x <= endX; x++) {
          if (startY >= 0 && startY < height) pixelData[startY][x] = color; // Top
          if (endY >= 0 && endY < height) pixelData[endY][x] = color; // Bottom
        }

        // Draw left and right edges
        for (let y = startY; y <= endY; y++) {
          if (startX >= 0 && startX < width) pixelData[y][startX] = color; // Left
          if (endX >= 0 && endX < width) pixelData[y][endX] = color; // Right
        }
      }
    });

    return tf.tensor(pixelData, imageTensor.shape, imageTensor.dtype);
  },

}

</script>
"