How will I insert our own picture?

[alaosion2019]

How will I insert our own picture? Convert the image to JSON format. When inserting, it can't be uploaded too much.

[cBogdan96]

Hi @alaosion2019,

A cool aproach can be this:
First upload an image in an image html element (I named it results )

let canvas = document.getElementById('canvas');
let imageSnap = document.getElementById('results');
let context = canvas.getContext( '2d' );
context.drawImage(imageSnap,0,0, canvas.width, canvas.height);   // you can draw the image in a canvas and after to get the data from the image 
let imgData = context.getImageData( 0, 0, canvas.width, canvas.height );
context.putImageData(imgData,0,0);

let cameraImage = [];
let size = imgData.width * imgData.height *4; // get the size of the image (is multiplied by 4 because we have 4 channels  RGBA )

let maxR = 0;
let minR = 255;

let maxG = 0;
let minG = 255;

let maxB = 0;
let minB = 255;
// for normalization method we need to take the max and min of each channel  and ignore Alfa chanel
for (let i = 0, dx = 0; dx < size; i++, dx = i << 2) {
    cameraImage.push( imgData.data[dx]);
    if(imgData.data[dx] > maxR){
        maxR= imgData.data[dx];
    }
    if(imgData.data[dx] < minR){
        minR= imgData.data[dx];
    }
    cameraImage.push( imgData.data[dx+1]);
    if(imgData.data[dx] > maxG){
        maxG= imgData.data[dx];
    }
    if(imgData.data[dx] < minG){
        minG= imgData.data[dx];
    }
    cameraImage.push( imgData.data[dx+2]);
    if(imgData.data[dx] > maxB){
        maxB= imgData.data[dx];
    }
    if(imgData.data[dx] < minB){
        minB= imgData.data[dx];
    }

}
// normalize the data  in order to fit in as an input in model.predict()
for(let j =0 ; j< cameraImage.length;j+=3){
    cameraImage[j] = 2*(cameraImage[j] - minR) / (maxR - minR)
    cameraImage[j+1] = 2*(cameraImage[j+1] - minG) / (maxG - minG)
    cameraImage[j+2] = 2*(cameraImage[j+2] - minB) / (maxB - minB)
}

// camera image is now an array with values betwwen -1 and 1 that can be interpreted by the network
model.predict(cameraImage, function (finalResult) {

    generateInference(finalResult)

});

[AirMarty]

Hi @cBogdan96,
thank you for your proposal, i coded it in python and it's fine.
Be carefull because there's errors in your code, each 'imgData.data[dx]' must correspond to the related color channel for R, B and G while in your code it always access the 'R' channel value.
Lines 'if(imgData.data[dx] > maxG){' and 'if(imgData.data[dx] < minG){' for example must be 'imgData.data[dx+1]' and so on for the rest 'imgData.data[dx+2]' for the 'B' color value channel.

We assume that we have image from imagenet here 'helico.jpg', it generates intermediate 'png' file (may be useless) and 'json' file with RGB values. The 'json' file can be used with tensorspace model predict.

from PIL import Image
import json 
# Normally select img_file_path image 
        image = Image.open('helico.jpg')
       #to be used with alexnet trained model in tensorspace
        new_image = image.resize((227,227))
        new_image.save('helico.png')
        rgb_image = new_image.convert('RGB')
        rgb_value = list(rgb_image.getdata())
        dest_image = []

        maxR = 0
        minR = 255

        maxG = 0
        minG = 255

        maxB = 0
        minB = 255
        for rgb in rgb_value:
            # Red
            if rgb[0] > maxR: 
                maxR= rgb[0]
            if rgb[0] < minR:
                minR= rgb[0]
            # Green
            if rgb[1] > maxG:
                maxG= rgb[1]
            if rgb[1] < minG:
                minG= rgb[1]
            # Blue
            if rgb[2] > maxB:
                maxB= rgb[2]
            if rgb[2] < minB:
                minB= rgb[2]

        for rgb in rgb_value:
            dest_image.append(2*(rgb[0] - minR) / (maxR - minR))
            dest_image.append(2*(rgb[1] - minG) / (maxG - minG))
            dest_image.append(2*(rgb[2] - minB) / (maxB - minB))

        #normally use img_file_path
        with open('helico.json', 'w') as outfile:
            json.dump(dest_image, outfile)

I used it with tensorspace alexnet NN example and it works fine.