How to send a 2D array of floats from javascript to python with flask

Question

I am building a web app that will allow the user to draw an MNIST style digit in a 28*28 p5 canvas and uses a CNN that I built in python to classify the digit. I have a function that takes the canvas and turns it into a 2d array of floats.

function savedigit() {
  vals = create2DArray(w, w); //function to create a 2d array with rows and columns
  for (let i = 0; i < w; i++) {
    for (let j = 0; j < w; j++) {
      let p = Pixels[i][j];
      vals[i][j]=(round((1-p.value)*100));
    }
  }
  reset(); //resets the canvas
  return vals
}

I want to send that 2D array that is generated to the flask app so the CNN can classify it. I have no idea how to do this because im a beginner to flask and i couldn't find any help for this on google. the program for drawing on the canvas and generating the array is found here

Ito Pakito · Accepted Answer · 2019-08-02 22:55:42Z

You are looking for ajax request: the client sends a request to the backend which returns a response. From the client's point of view, the backend is just a black box. Here is a code to show you the principle. You may have to adapt it to your case.

// Browser side
(async () => {
  const rawResponse = await fetch('http://localhost:5000/api/mnist', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(YOUR_2D_ARRAY)
  });
  const content = await rawResponse.json();

  console.log(content);
  // alert(content); // uncomment this line if you do not know how to read logs.
})();

The flask application receives a post request which can be handled this way:

from flask import Flask, request

@app.route('/api/mnist', methods=['POST'])
def mnist():
    data = request.get_json()
    # you may want to convert the type here
    number_predicted = clf.predict(data)
    return number_predicted, 200

Collectives™ on Stack Overflow

How to send a 2D array of floats from javascript to python with flask

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related