debug this code "<template>
  <v-app>
    <v-main>
      <!-- Input for image upload -->
      <input type="file" @change="onFileChange" accept="image/*" />
      <div v-if="imageTensor">
        <p>Image tensor loaded! Shape: {{ tensorShape }}</p>
      </div>

      <!-- Button to trigger predictions -->
      <v-btn @click="predict">Run Prediction</v-btn>
      
      <!-- Display uploaded image -->
      <div v-if="imageSrc">
        <img :src="imageSrc" alt="Input Image" style="max-width: 400px" />
      </div>
    </v-main>
  </v-app>
</template>

<script>
import * as tf from '@tensorflow/tfjs';

export default {
  data() {
    return {
      model: null, // Loaded model
      imageTensor: null, // Tensor representation of the input image
      imageSrc: null, // Source URL for displaying the uploaded image
    };
  },
  computed: {
    tensorShape() {
      // Show the loaded tensor's shape
      return this.imageTensor ? this.imageTensor.shape : 'No Tensor';
    },
  },
  async mounted() {
    try {
      // Wait for TensorFlow.js to be ready
      await tf.ready();
      
      // Set the backend to 'cpu'
      await tf.setBackend('cpu');
      
      console.log('Backend initialized:', tf.getBackend()); // Confirm backend

      // Load the model
      const modelPath = 'src/assets/model/best_web_model/model.json'; // Adjusted to public folder
      this.model = await tf.loadGraphModel(modelPath);
      console.log('Model successfully loaded.');
    } catch (err) {
      console.error('Error initializing TensorFlow.js or loading the model:', err);
    }
  },
  methods: {
    onFileChange(event) {
      // Handle the image upload
      const file = event.target.files[0];
      if (file) {
        // Display the image in the UI
        this.imageSrc = URL.createObjectURL(file);

        // Convert image to a tensor
        this.loadImageTensorFromFile(file, 640, 640)
          .then((tensor) => {
            this.imageTensor = tensor;
            console.log('Tensor created:', tensor);
          })
          .catch((error) => {
            console.error('Error processing image:', error);
          });
      }
    },

    async loadImageTensorFromFile(file, targetHeight, targetWidth) {
      // Convert an uploaded file into a preprocessed tensor
      return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = (event) => {
          const img = new Image();
          img.src = event.target.result; // Load the image

          img.onload = () => {
            // Resize image using canvas
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = targetWidth;
            canvas.height = targetHeight;

            ctx.drawImage(img, 0, 0, targetWidth, targetHeight);

            // Convert the canvas data to a tensor
            const imageData = ctx.getImageData(0, 0, targetWidth, targetHeight);
            const imageTensor = tf.browser.fromPixels(imageData)
              .div(255.0) // Normalize pixel values to range [0, 1]
              .expandDims(0); // Add batch dimension

            resolve(imageTensor);
          };

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

        reader.onerror = () => reject('Error reading file.');
        reader.readAsDataURL(file); // Read the file as a data URL
      });
    },

    async predict() {
      if (!this.model) {
        console.error('Error: Model is not loaded.');
        return;
      }
      if (!this.imageTensor) {
        console.error('Error: No tensor available for prediction!');
        return;
      }

      console.log('Image Tensor Shape:', this.imageTensor.shape);

      try {
        console.log('Running prediction...');
        const predictions = await this.model.executeAsync(this.imageTensor); // Run inference
        console.log('Raw Prediction Results:', predictions);

        // Post-process the prediction results
        if (Array.isArray(predictions)) {
          predictions.forEach((tensor, idx) => {
            console.log(`Prediction Output [${idx}]:`, tensor.arraySync()); // Log each output tensor
            tf.dispose(tensor); // Dispose tensor to free resources
          });
        } else {
          console.log('Prediction Output:', predictions.arraySync());
          tf.dispose(predictions); // Dispose tensor if single output
        }
      } catch (err) {
        console.error('Error running prediction:', err);
      }
    },
  },
};
</script>
"