如何在 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 的響應