Как правильно отобразить данные словаря Python на веб-странице Flask?

Question

Я тренирую модель CNN от KERAS. Я хочу показать прогнозируемые результаты модели на веб-странице Flask. Проблема в том, что я хочу вернуть данные словаря из моей локальной программы на Python и показать данные на веб-странице Flask, но я не могу правильно проанализировать JSON и показать элементы по линии. Потому что у меня мало знаний в JS :(

Я хочу, чтобы веб-страница отображалась следующим образом

笔迹最相似的5个书写人: 

top5_index[0] top5_prob[0]

top5_index[1] top5_prob[1]

top5_index[2] top5_prob[2]

top5_index[3]:top5_prob[3]

top5_index[4] top5_prob[4]

однако веб-страница ничего не показывает ... (я думаю, код детали JS пошёл не так)

Есть мои коды, и они не работают.

питон

@app.route('/predict', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        # Get the file from post request
        f = request.files['file']

        # Save the file to ./uploads
        basepath = os.path.dirname(__file__)
        file_path = os.path.join(
            basepath, 'uploads', secure_filename(f.filename))
        f.save(file_path)

        # Make prediction
        top5_index, top5_prob = model_predict(file_path, model)

        wr_dict = {top5_index[0]:top5_prob[0], top5_index[1]:top5_prob[1],
                   top5_index[2]:top5_prob[2], top5_index[3]:top5_prob[3],
                   top5_index[4]:top5_prob[4]}

        return json.dumps(wr_dict)
    return None

JS

    // Predict
    $('#btn-predict').click(function () {
        var form_data = new FormData($('#upload-file')[0]);
        $(this).hide();
        $('.loader').show();

        // Make prediction by calling api /predict/
        $.ajax({
            type: 'POST',
            url: '/predict',
            data: JSON.parse(form_data),
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            cache: false,
            processData: false,
            async: true,
            success: function (data) {
                // Get and display the result
                $('.loader').hide();
                $('#result').fadeIn(600);
                $('#result').text(' 笔迹最相似的5个书写人: ');
                $('#value1').text(data[0]);
                $('#value2').text(data[1]);
                $('#value3').text(data[2]);
                $('#value4').text(data[3]);
                $('#value5').text(data[4]);
                console.log('Success!');
            },
        });
    });

Как изменить код детали JS для отображения словарных данных в правильном формате.

Любая помощь будет оценена.

Answer 1

Спасибо @AdamGold:)

Я попробовал ваши коды, однако на веб-странице не было данных.Я проверил консоль браузера, но она не сообщала об ошибке, и коды успешно завершены: функция (данные) {} не была выполнена.

Я полагаю, что он также не может проанализировать данные (возврат через flask.jsonify).Сегодня я нахожу способ правильно проанализировать данные JSONstring и отобразить их на веб-странице.Тем не менее я использую json.dumps в моем файле python, и словарь немного изменен.И в моем файле я изменяю код следующим образом:

        ...
        # Make prediction
        top5_index, top5_prob = model_predict(file_path, model)
        wr_dict = {"index1":top5_index[0], "prob1":top5_prob[0],
                   "index2":top5_index[1], "prob2":top5_prob[1],
                   "index3":top5_index[2], "prob3":top5_prob[2],
                   "index4":top5_index[3], "prob4":top5_prob[3],
                   "index5":top5_index[4], "prob5":top5_prob[4]}

        return json.dumps(wr_dict)
    return None

    // Predict
    $('#btn-predict').click(function () {
        var form_data = new FormData($('#upload-file')[0]);
        // Show loading animation
        $(this).hide();
        $('.loader').show();

        // Make prediction by calling api /predict
        $.ajax({
            type: 'POST',
            url: '/predict',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            async: true,
            success: function (data) {
                var data_obj = $.parseJSON(data);
                $('.loader').hide();
                $('#result').fadeIn(600);
                $('#result').text('笔迹最相似的5个书写人:');
                $('#value1').text('编号及概率:'+data_obj["index1"]+'------'+data_obj["prob1"]);
                $('#value2').text('编号及概率:'+data_obj["index2"]+'------'+data_obj["prob2"]);
                $('#value3').text('编号及概率:'+data_obj["index3"]+'------'+data_obj["prob3"]);
                $('#value4').text('编号及概率:'+data_obj["index4"]+'------'+data_obj["prob4"]);
                $('#value5').text('编号及概率:'+data_obj["index5"]+'------'+data_obj["prob5"]);
                console.log('Success!');
            },
        });
    });

Спасибо.Я узнаю больше знаний JS.

Answer 2

Вы должны использовать flask.jsonify для ответов:

import flask

return flask.jsonify(**wr_dict)

Это немного больше, чем dumps, в соответствии с документацией:

Эта функция упаковывает дампы () добавить несколько улучшений, которые облегчают жизнь.Он превращает вывод JSON в объект Response с mimetype application / json.

И на вашем JS-конце вы должны stringify данные и не анализировать их (dict -> string), затемразобрать ответ (строка -> dict):

// Make prediction by calling api /predict/
$.ajax({
    type: 'POST',
    url: '/predict',
    data: JSON.stringify(form_data), // CHANGED HERE
    contentType: 'application/json;charset=utf-8',
    dataType: 'json',
    cache: false,
    processData: false,
    async: true,
    success: function(data) {
        data = JSON.parse(data); // CHANGED HERE
        // Get and display the result
        $('.loader').hide();
        $('#result').fadeIn(600);
        $('#result').text(' 笔迹最相似的5个书写人: ');
        $('#value1').text(data[0]);
        $('#value2').text(data[1]);
        $('#value3').text(data[2]);
        $('#value4').text(data[3]);
        $('#value5').text(data[4]);
        console.log('Success!');
    },
});