So I have a frontend that has a box class that stores x and y in an image and when the user hits a predict button the image,x,y are sent to the backend where a flask app takes them and then converts the image to a numpy array for tensorflow. The image is encoded as utf8 however I can't seem to have it load or decode it with opencv or tensorflow's encode jpeg. Any help would be nice.
Frontend:
async predict() {
//Get the image of the box
const response = await fetch(document.getElementById('image').src);
const data = await response.text();
const response2 = await fetch('/predict', {
headers: { 'Content-Type': 'application/json' },
method: 'POST',
body: JSON.stringify({
x: this.x,
y: this.y,
data,
}),
})
const json = await response2.json();
return json;
}
@app.route("/predict", methods=['POST'])
def predict():
#get image from blob image
#Get image from url
args = request.get_json()
x = args['x']
y = args['y']
#Get url but filter the blob: part
image = args['data']
#Decode string to image here.
#read utf-8 encoded string into image
return json({"prediction":enhance.predict(image,enhance.model,x,y)})
Using base64 encoding:
async predict() { //Get the image of the box const response = await fetch(document.getElementById('image').src); let data = await response.arrayBuffer(); data = btoa(data); // base64 encode const response2 = await fetch('/predict', { headers: { 'Content-Type': 'application/json' }, method: 'POST', body: JSON.stringify({ x: this.x, y: this.y, data, }), }) const json = await response2.json(); return json; } import base64 @app.route("/predict", methods=['POST']) def predict(): #get image from blob image #Get image from url args = request.get_json() x = args['x'] y = args['y'] #Get url but filter the blob: part image = args['data'] # base64 decode image = base64.b64decode(image) return json({"prediction": enhance.predict(image, enhance.model, x, y)})