reactjs - 有没有办法将 Flask 的 SHAP 或 LIME 输出渲染到 React？

Question

我正在使用 Flask 在 React JS 项目上部署用 Python 编写的机器学习模型。

但是，需要显示 LIME 或 SHAP 输出。有没有人对如何将 Flask 的 html 或 js 输出渲染到 React 并显示它有任何想法？

下面是我目前以数字形式发送数据的代码，但不是图像/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

获取响应的代码：

 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));

Answer 1

这是解决方案

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")

使用 base 64 编码，它可以用作图像源，一旦在 javascript 上检索，只需使用 dataToTake 作为图像源，例如：

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