tensorspace-team / tensorspace

Neural network 3D visualization framework, build interactive and intuitive model in browsers, support pre-trained deep learning models from TensorFlow, Keras, TensorFlow.js
https://tensorspace.org
Apache License 2.0
5.06k stars 445 forks source link

Using own images on YOLO model #221

Closed trile83 closed 5 years ago

trile83 commented 5 years ago

Hi, I have been trying to deployed YOLO model on my local web server and it successfully displayed the images within the examples. However, I would like to use my images for the model and I do not have the json version of the images. Is there anyway I can fit my images in the model for visualization purposes? Thank you so much.

syt123450 commented 5 years ago

Hi @trile83 , the .json data is the same as the prediction data in python, just in .json format.

I use the following script to generate input data from .jpg image (make sure resize input image to 416 * 416 before applying the following script):

<canvas id="container" width="416" height="416"></canvas>

<script>

var context = document.getElementById('container').getContext("2d");

var img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
  let dataArray = context.getImageData(0, 0, 416, 416).data;
  let array = [];
  for (let i = 0; i < dataArray.length; i++) {
    if (i % 4 !== 3) {
      array.push((dataArray[i] / 255).toFixed(4));
    }
  }
  console.log(array.toString());
};
img.src = "PATH/TO/IMAGE/predict_image.jpg";
</script>

If you have already prepared a dataset in python, you can reproduce the above function in Python to generate the JSON format input data .

trile83 commented 5 years ago

Thank you so much for your help. I was able to use my image in the model using the script to process the image. However, I am new to python and I hope you can help me understand the function in python. I am planning to process an array of image and put into the model.

syt123450 commented 5 years ago

Hi @trile83 , for YOLOv2-tiny demo, each JSON data is an array [R, G, B, R, G, B ....., R, G, B], the array length is 3 * 416 * 416. To reproduce it in Python, get out RGB of each point (416 * 416 in total) from input image, normalize the RGB value to 0-1, and then generate JSON array.

As you have an array of images, you can apply this strategy to images one by one, and generate a folder of JSON files to be the input data of your model, or generate a matrix: [ [R, G, B, R, G, B ....., R, G, B], [R, G, B, R, G, B ....., R, G, B], ... [R, G, B, R, G, B ....., R, G, B] ]

To fully understand how YOLO pre-process input data and post-process network result, YOLO website may help.