index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>YOLOv8 Object Detection</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        color: #333;
      }
      canvas {
        display: block;
        border: 1px solid black;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        display: block;
      }
      #uploadInput {
        display: block;
        margin: 20px auto;
        padding: 10px 20px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      #uploadInput:hover {
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <input id="uploadInput" type="file" />
    <canvas></canvas>
    <script>
      /**
       * "Upload" button onClick handler: uploads selected
       * image file to backend, receives an array of
       * detected objects and draws them on top of image
       */
      const input = document.getElementById("uploadInput");
      input.addEventListener("change", async (event) => {
        const file = event.target.files[0];
        const data = new FormData();
        data.append("image_file", file, "image_file");
        const response = await fetch("/detect", {
          method: "post",
          body: data,
        });
        const boxes = await response.json();
        draw_image_and_boxes(file, boxes);
      });

      /**
       * Function draws the image from provided file
       * and bounding boxes of detected objects on
       * top of the image
       * @param file Uploaded file object
       * @param boxes Array of bounding boxes in format
         [[x1,y1,x2,y2,object_type,probability],...]
       */
      function draw_image_and_boxes(file, boxes) {
        const img = new Image();
        img.src = URL.createObjectURL(file);
        img.onload = () => {
          const canvas = document.querySelector("canvas");
          canvas.width = img.width;
          canvas.height = img.height;
          const ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0);
          ctx.strokeStyle = "#00FF00";
          ctx.lineWidth = 3;
          ctx.font = "18px serif";
          boxes.forEach(([x1, y1, x2, y2, label]) => {
            ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
            ctx.fillStyle = "#00ff00";
            const width = ctx.measureText(label).width;
            ctx.fillRect(x1, y1, width + 10, 25);
            ctx.fillStyle = "#000000";
            ctx.fillText(label, x1, y1 + 18);
          });
        };
      }
    </script>
  </body>
</html>