0

I am deploying a machine learning model written in Python on a React JS project, using Flask.

However, it is required to display LIME or SHAP output. Has anyone got any ideas in how to render html or js output from Flask to React and then display it?

Below is my code that currently sends data as numbers, but not an image/html/js

@app.route('/api/v1', methods=['POST'])
def postTest():
    formData = request.json
    cols = ['TYPE','ORIG', 'DEST', 'DISTANCE']
    flight = []
    for a in cols:
        flight.append(formData[a])
    predic_son = formData['prediction']
    shap_values = explainer.shap_values(np.array(flight).reshape(1,-1))
    res = dict(zip(cols, shap_values[0])) 
    print(type(res))
    return res

Code to take the response on react:

 fetch('http://localhost:5000/api/v1', {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      method: 'POST',
      body: JSON.stringify(flight)
    }).then(response => response.json()).then(response => console.log(response));
  • Does your react app use this as an API endpoint? How are you performing the request? – trixn Mar 10 '20 at 15:53
  • Yes that’s correct. I get the response on react by fetching. –  Mar 10 '20 at 17:20
  • I can send a list of numbers, but I want to return an image to react –  Mar 10 '20 at 17:21
  • You are contradicting yourself very much with what you describe. In your question you said *how to render html or js output from Flask to React* now you say that you want to return an image? What is correct now? Where is that image generated? – trixn Mar 10 '20 at 17:24
  • Let’s say display a Jupyter notebook on a react page using flask? Any ideas? Or Is it still too vague? –  Mar 10 '20 at 20:06
  • On my code, I get some data from react, make the prediction based on that, and then I send it back to React. However I want to send a Jupyter notebook output, it does not matter if it’s an image or whatever, I just want to return an output to react so I can display the exact thing. –  Mar 10 '20 at 20:16
  • So the question is basically how to display the result data from a request in a react app? Please also show the code in your react app where you fetch the data from that endpoint. – trixn Mar 10 '20 at 21:35
  • I know how to display data. But I want to display something like a diagram. –  Mar 11 '20 at 10:14
  • Then use the dataset to render a diagram. There are plenty of charts libraries to render charts using react. Also why don't you mention that directly in your question that you want a diagram? Be precise about what you want, so that others don't have to ask over and over to get every bit of information required to answer the question. – trixn Mar 11 '20 at 10:18
  • I was precise enough in what I wanted. I want to display the exact jupyter notebook output. I do not want to render a chart, I want to show an output as it is, I want to render a front-end already made on jupyter notebook. If you search on Google about Jupyter Notebook, you can see that there is an output already displayed, you can make graphs on jupyter notebook. I want to display an exact graph of jupyter notebook on my react app. –  Mar 11 '20 at 10:49
  • try using [Dash](https://plot.ly/dash/) it is based on Flask and generates front end visualizations directly using react, the cool thing is you can write all your code in python and deploy it just like flask. – ESDAIRIM Mar 12 '20 at 09:59

1 Answers1

2

Here is the solution 

uf = BytesIO()
shap.force_plot(explainer.expected_value, 
                shap_values[0], 
                flight, 
                matplotlib = True, 
                show = False)
plt.savefig(buf,
            format = "png",
            dpi = 150,
            bbox_inches = 'tight')
dataToTake = base64.b64encode(buf.getbuffer()).decode("ascii")

With encoding with base 64, it can be used as an image source, once retrieved on javascript, just use dataToTake as an image source such as :

src = data:image/png;base64,{dataToTake}

louai98
  • 21
  • 2