如何在 ZFC35FDC7830D5FC69D4A957646Z function 的弹出框中打印 flask 的 output？

Question

我使用逻辑回归创建了一个 ML model。 我正在尝试使用 Flask 在本地机器上部署它。 我编写了 html 代码来通过表单从用户那里获取输入值。 我正在接受用户的输入并将其提供给 ML model，其 output 将由烧瓶的预测 function 返回，它应该作为弹出框打印在屏幕上。 简而言之，过程如下：

1. 用户提交 html 表格
2. 数据被传递给烧瓶的预测 function ，其中包含经过训练的 ML model 权重
3. Flask function 返回 output（它是一个字符串 - 说明患者是否为阳性的语句）
4. 这个由烧瓶的预测 function 返回的字符串需要在屏幕上作为弹出框打印在我们使用 html 表单从用户那里收集数据的同一页面上。 请注意，一旦按下“提交”按钮，弹出框就会弹出，所以这一切都会在瞬间发生。 如果 model 需要更多时间来预测，则弹出框应显示“正在加载”，然后显示 output。

我已经使用在线资源和代码片段编写了预测 function 的代码和弹出框的代码。 但是，我不知道如何获取 flask 的 output 并将其提供给 html 弹出框。 predict function 的代码如下：

@app.route('/index')
def index():
    return flask.render_template('index.html')

@app.route('/predict', methods=['POST'])
def predict():
    input_values = request.form.to_dict()
    X_datapoint = list(input_values.values())
    encoder = pickle.load(open('OneHot_Encoder.sav', 'rb'))
    X_datapoint = encoder.transform(X_datapoint.values.reshape(1,-1))
    model = pickle.load(open('finalized_model.sav', 'rb'))
    y = model.predict(X_datapoint)[0]
    if y == 0 :
        y_proba = round(model.predict_proba(X_datapoint)[0][0]*100)
        final_output = "We are {} sure that the patient will NOT be readmitted in 30 days".format(y_proba)
    else :
        y_proba = round(model.predict_proba(X_datapoint)[0][1]*100)
        final_output = "We are {} sure that the patient will be readmitted in 30 days".format(y_proba)

    return final_output 
    
if __name__ == '__main__':
    app.debug = True
    app.run(host='0.0.0.0', port=8080)

在这里，“OneHot_Encoder.sav”和“finalized_model.sav”分别是包含训练过的 One Hot 编码器 model 权重和训练过的逻辑回归 model 权重的文件。

弹出框代码如下：

            <div id="popup1" class="overlay">
                <div class="popup">
                    <h2>Will the patient be readmitted in 30 days ?</h2>
                    <a class="close" href="#">&times;</a>
                    <div class="content">
                    <script>Not sure what to write here, I want to print the output returned by flask here  </script>
                    </div>
                </div>
            </div>

我的问题是，如何在按下表单的“提交”按钮后立即弹出的弹出框中打印预测 function 返回的值。 我不确定，这是否是正确的方法。

Answer 1

使用 flask，您可以为预测 output 编写另一个模板。 例如，

预测.html

...
<div id="popup1" class="overlay">
    <div class="popup">
        <h2>Will the patient be readmitted in 30 days ?</h2>
        <a class="close" href="#">&times;</a>
        <div id="predict_content" class="content">
            {{ predict_content }}
        </div>
    </div>
</div>

然后，在预测 function 中，你可以像下面这样渲染这个模板

@app.route('/predict', methods=['POST'])
def predict():
    ...
    return flask.render_template('predict.html', predict_content=final_output )

因此，无论何时 predict 完成运行，它都会渲染并显示 html 和弹出框。 通过提供predict_content=final_output ，这将用final_output替换模板中的{{ predict_content }} 。

---

或者，您可以使用 javascript。 所以在你的表单中，而不是让表单提交到/predict 。 您可以将 function 分配给submit按钮。 例如，

<form id='myForm'>
...
</form>
<button onClick='submit_function()'>Submit</button>

您可以定义 javascript submit_function如下（vanilla javascript）：

<script>
function submit() {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/predict"); 
    xhr.onload = function(event){ 
        alert("Success, server responded with: " + event.target.response); // raw response in alert popup
        document.getElementById("predict_content").innerHTML = event.target.response; // set content of the div with id "predict_content" to the server response.
    }; 
    // or onerror, onabort
    var formData = new FormData(document.getElementById("myForm")); 
    xhr.send(formData);
}
</script>

这会为您提供一个带有响应的弹出警报 window。 它还使用id="predict_content"设置div的内容。

您也可以使用 jQuery 等。请参阅下面的源代码。
资料来源： 如何捕获 form.submit 的响应