Javascript 如何以html格式在弹出框中打印flask函数的输出？

我用逻辑回归建立了一个ML模型。我正在尝试使用Flask在本地计算机上部署它。我编写了html代码，通过表单从用户处获取输入值。我接受来自用户的输入，并将其输入到ML模型，该模型的输出将由烧瓶的预测功能返回，并且应该作为弹出框打印在屏幕上。简而言之，过程如下：

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

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

用户提交html表单

数据被传递到flask的预测函数，该函数包含经过训练的ML模型权重

Flask函数返回输出（它是一个字符串-一个声明患者是否为阳性的语句）

flask的predict函数返回的字符串需要作为弹出框打印在屏幕上，该框位于我们使用html表单从用户处收集数据的同一页面上。请注意，一旦按下“提交”按钮，弹出框就会弹出，因此所有这些都将在一瞬间发生。如果模型需要更多时间进行预测，则弹出框应显示“加载”，然后显示输出

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

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

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

这里，“OneHot_Encoder.sav”和“finalized_model.sav”是分别包含经过训练的一个热编码器模型权重和经过训练的逻辑回归模型权重的文件

弹出框的代码如下所示：

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

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

病人会在30天后重新入院吗？
不确定在这里写什么，我想在这里打印flask返回的输出

---

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

使用flask，您可以为预测输出编写另一个模板。比如说,

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

predict.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>

因此，无论何时predict完成运行，它都会呈现并显示带有弹出框的html。通过提供

predict\u content=final\u output

，这将用

final\u output

替换模板中的

{{predict\u content}}

---

或者，您可以使用javascript。因此，在表单中，不要让表单提交到

/predict

。您可以为

submit

按钮分配一个功能。比如说,

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

这将为您提供一个带有响应的弹出警报窗口。它还使用

id=“predict\u content”

设置

div

的内容

您也可以使用jQuery等。请参阅下面的源代码。

---

来源：

您可以在predict中再次渲染模板，但模板将包含弹出框。通过这种方式，您可以简单地通过模板传递输出。但您描述的内容听起来更像是javascript的工作。您可以使用javascript

fetch

调用predict函数并使用回调更新内容。@Tim您能用代码解释一下吗？我对Flask和javascript不太熟悉。