first commit

function createTableFromData(data) {

  let table = '<table>';

  // Table header row

  table += '<tr><th></th>';

  for (let key in data) {

      table += '<th>' + key + '</th>';

  }

  table += '</tr>';

  // Table body

  let maxRows = getMaxRows(data);

  for (let i = 0; i < maxRows; i++) {

      table += '<tr>';

      table += '<td>' + i + '</td>';

      for (let key in data) {

          let row = data[key][i] || [];

          table += '<td>' + row.join(', ') + '</td>';

      }

      table += '</tr>';

  }

  table += '</table>';

  return table;

}

// Function to get the maximum number of rows in the data

function getMaxRows(data) {

  let max = 0;

  for (let key in data) {

      let numRows = Object.keys(data[key]).length;

      if (numRows > max) {

          max = numRows;

      }

  }

  return max;

}

function displayJSON(){

  $.getJSON("http://127.0.0.1:5000/getJSON", function (data) {

    console.log(data);

    // Create the table

  let tableHtml = createTableFromData(data);

  // Display the table

  document.getElementById('container').innerHTML = tableHtml;

  });

}

// listen for mouse events

$("#canvas").mousedown(function (e) {

  handleMouseDown(e);

});

$("#canvas").mousemove(function (e) {

  handleMouseMove(e);

});

$("#canvas").mouseup(function (e) {

  handleMouseUp(e);

});

$("#canvas").mouseout(function (e) {

  handleMouseOut(e);

});

function detect() {

    for(let i=0; i < items.length; i++){

        var bbox = items[i]["bbox"];

        drawBox(bbox[0], bbox[1], bbox[2], bbox[3]);

    }

}

const img = document.getElementById('img');

var items;

// Load the model.

cocoSsd.load().then(model => {

  // detect objects in the image.

  model.detect(img).then(predictions => {

    items = predictions;

    console.log('Predictions: ', predictions);

  });

});

 No newline at end of file

var canvas = document.getElementById("canvas");

var overlay = document.getElementById("overlay");

var ctx = canvas.getContext("2d");

var ctxo = overlay.getContext("2d");

var $canvas = $("#canvas");

var canvasOffset = $canvas.offset();

var offsetX = canvasOffset.left;

var offsetY = canvasOffset.top;

var scrollX = $canvas.scrollLeft();

var scrollY = $canvas.scrollTop();

var isDown = false;

var startX;

var startY;

var prevStartX = 0;

var prevStartY = 0;

var prevWidth  = 0;

var prevHeight = 0;

ctx.canvas.width = img.width;

ctxo.canvas.width= img.width;

ctx.canvas.height = img.height;

ctxo.canvas.height = img.height;

ctxo.drawImage(img, 0, 0);

// style the context

ctx.strokeStyle = "red";

ctx.lineWidth = 3;

ctxo.strokeStyle = "red";

ctxo.lineWidth = 3;

// Draw a box from existing x:y coordinates

function drawBox(x, y, w, h) {

    if(w / img.width < 0.2){

        ctxo.strokeRect(x, y, w, h);

    }

}

function handleMouseDown(e) {

    e.preventDefault();

    e.stopPropagation();

    // save the starting x/y of the rectangle

    startX = parseInt(e.clientX - offsetX);

    startY = parseInt(e.clientY - offsetY);

    // set a flag indicating the drag has begun

    isDown = true;

}

function handleMouseUp(e) {

    e.preventDefault();

    e.stopPropagation();

    // the drag is over, clear the dragging flag

    isDown = false;

    ctxo.strokeRect(prevStartX, prevStartY, prevWidth, prevHeight);

}

function handleMouseOut(e) {

    e.preventDefault();

    e.stopPropagation();

    // the drag is over, clear the dragging flag

    isDown = false;

}

function handleMouseMove(e) {

    e.preventDefault();

    e.stopPropagation();

    // if we're not dragging, just return

    if (!isDown) {

        return;

    }

    // get the current mouse position

    mouseX = parseInt(e.clientX - offsetX);

    mouseY = parseInt(e.clientY - offsetY);

    var width = mouseX - startX;

    var height = mouseY - startY;

		// clear the canvas

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // draw a new rect from the start position 

    // to the current mouse position

    ctx.strokeRect(startX, startY, width, height);

		prevStartX = startX;

		prevStartY = startY;

		prevWidth  = width;

		prevHeight = height;

}

// remove current boxes

function clearCanvas(){

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctxo.clearRect(0, 0, canvas.width, canvas.height);

    ctxo.drawImage(img, 0, 0);

}

 No newline at end of file