Приложение Flask возвращает значение в html в функции javascript

Я хотел бы вернуть два значения, прогноз модели и точность в моем приложении фляги, однако второй элемент (точность RMSE не возвращается). Я хотел бы вернуть прогноз в первой строке, а затем точность во второй - как я могу вернуть два значения из приложения в функцию js?

код в приложении фляги


from flask import Flask, render_template, request
import numpy as np
import pandas as pd
import pickle

app = Flask(__name__)
df = pd.read_csv("Cleaned_data_Wien.csv")
# pipe = pickle.load(open("RandomForestModel.pkl", "rb"))

@app.route('/')
def index():

    locations = sorted(df['location'].unique())
    rooms = sorted(df['rooms'].unique())
    return render_template('index.html', locations=locations, rooms=rooms)

@app.route('/predict', methods=['POST'])
def predict():
    location = request.form.get('location') # name
    room = request.form.get('room')
    m2 = request.form.get('m2')

    print(location, room, m2)

    # Splitting
    X = df.drop(columns=['price'])
    y = df.price

    from sklearn.model_selection import train_test_split
    X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=0)

    # Preprocessing
    from sklearn.compose import make_column_transformer
    from sklearn.preprocessing import OneHotEncoder
    column_trans = make_column_transformer((OneHotEncoder(sparse=False), ['location']), # non-numeric
                                        remainder='passthrough')

    from sklearn.preprocessing import StandardScaler
    scaler = StandardScaler()

    # Random forest regression
    from sklearn.ensemble import RandomForestRegressor
    model = RandomForestRegressor(n_estimators=500, random_state=0)

    from sklearn.pipeline import make_pipeline
    pipe = make_pipeline(column_trans, scaler, model)
    pipe.fit(X_train, y_train)

    y_pred = pipe.predict(X_test)

    from sklearn.metrics import mean_absolute_error, mean_squared_error, r2_score
    outcome = pd.DataFrame({'y_test':y_test, 'y_pred':y_pred})
    outcome['difference'] = outcome['y_test'] - outcome['y_pred']
    outcome['difference_percentage'] = round(outcome.difference/(outcome.y_test/100),6)

    PROC = round(outcome.difference_percentage.abs().mean(), 2)
    MAE = round(mean_absolute_error(y_test, y_pred),4)
    RMSE = round(np.sqrt(mean_squared_error(y_test, y_pred)),4)
    R2 = round(r2_score(y_test, y_pred),4)

    # sample
    input = pd.DataFrame([[room, m2, location]], columns=['rooms', 'm2', 'location'])
    input.location = input.location.astype(int) # if pickle --> must be str
    input.rooms = input.rooms.astype(int)
    input.m2 = input.m2.astype(float)
    prediction = round(pipe.predict(input)[0],2)
    
    return str(prediction), str(RMSE) #THE OUTPUT
if __name__ == "__main__":
    app.run(debug=True, port=5001)

индексная функция

     function send_data()
        {
            document.querySelector('form').addEventListener("submit", form_handler);

            var fd= new FormData(document.querySelector('form'));

            var xhr= new XMLHttpRequest();

            xhr.open('POST', '/predict', true);
            document.getElementById("prediction").innerHTML = "Please wait predicting price...";

            xhr.onreadystatechange = function(){
                if (xhr.readyState == XMLHttpRequest.DONE){
                    document.getElementById('prediction').innerHTML = "Prediction: EUR "+xhr.responseText
                    document.getElementById('model').innerHTML = "Model: Random Forest Regression"
                    document.getElementById('RMSE').innerHTML = "RMSE: "+xhr.responseText;
                };
            
            };

            xhr.onload = function(){};
            xhr.send(fd);

Приложение Flask возвращает значение в html в функции javascript

return str(prediction), str(RMSE) Возврат нескольких переменных — это то, чего вы не должны ожидать. Я предлагаю вам вернуть объект JSON (используя jsonify()) и проанализировать его с помощью JSON.parse(xhr.responseText).
Olvin Roght 15.03.2022 22:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
44
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не должны возвращать кортеж из своего маршрута predict. Прочтите здесь, как Flask интерпретирует ответ функции представления.

Вы должны вернуть словарь, содержащий два значения, например.

return {'prediction': prediction, 'RMSE': RMSE}

Это будет автоматически JSONified. Во внешнем интерфейсе вы должны декодировать объект JSON и соответствующим образом отображать два значения (теперь вы показываете весь ответ в обоих элементах), например.

let result = JSON.parse(xhr.responseText);
document.getElementById('prediction').innerHTML = `Prediction: EUR ${result.prediction}`;
document.getElementById('RMSE').innerHTML = `RMSE: ${result.RMSE}`;

Большое спасибо, вы сделали мой день, когда я впервые использовал javascript в таком случае - это действительно хорошее решение, и оно имеет смысл. СПАСИБО большое и хорошего дня :) :)

Jaroslav Kotrba 16.03.2022 08:11

Другие вопросы по теме