Flask и HTML: перенаправьте ответ json, чтобы он отображался внизу той же страницы, вместо этого показывая ответ на отдельной странице - PullRequest
Новая
       25

Flask и HTML: перенаправьте ответ json, чтобы он отображался внизу той же страницы, вместо этого показывая ответ на отдельной странице

0 голосов
/ 01 октября 2018

Супер новый для веб-разработки .. Я развертываю sklearn Модель машинного обучения с использованием Flask.

Я могу правильно вернуть прогноз ответа в виде JSON, но он отображается на отдельной странице ... Я хотел бы изменить свой HTML и Flask app.py таким образом, чтобыответ предсказания появляется во вновь созданном элементе контейнера прямо в нижней части form в HTML

Вот мой index.html

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href= "{{ url_for('static',filename='css/style.css') }}">


</head>
<body>
<div class = 'intro'>
  This is a simple website that hosts a Machine Learning model trained using <i>sklearn</i> to predict one of three authors:
  <b>HP Lovecraft</b>, <b>Edgar Allan Poe</b> and <b>Mary Shelley</b>. Simply enter a passage of one of those three authors and you will get a prediction.


</div>

<div class="authorimage">
  <div class="row">
  <div class="column">
    <h2>Mary Shelley</h2>
    <p><img src = "{{ url_for('static',filename='img/mary.jpeg') }}"></p>
  </div>
  <div class="column">
    <h2>H.P Lovecraft</h2>

    <p><img src = "{{ url_for('static',filename='img/lovecraft.jpeg') }}"></p>
  </div>
  <div class="column">
    <h2>Edgar Allan Poe</h2>
    <p><img src = "{{ url_for('static',filename='img/eap.jpeg') }}"></p>
  </div>
</div>


</div>


<div class = 'input'>
  <form action="/api" method="POST">
    <textarea name = "passage_input" cols="35" wrap="soft"></textarea>
    <input type="submit">
</form>
</div>


<div class = "prediction">
Not sure how to collect the response from app.py into a box here..
</div>

</body>
</html>

Вот мой app.py

import numpy as np
import pandas as pd
from flask import Flask, render_template, abort, jsonify, request
import pickle
from vectorspace import VectorSpace
import json

with open('/Users/abhishekbabuji/Desktop/spooky_author_model.pkl', 'rb') as fid:
     pkl_model_loaded = pickle.load(fid)


app = Flask(__name__, static_url_path='')

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


@app.route('/api', methods = ['POST'])
def predict():
  text_input = request.form['passage_input']
  return parse(pd.Series([text_input]))

def parse(input_passage):

    reduction_type = 'lemmatize'
    trans_input_passage = VectorSpace(input_passage, reduction = reduction_type).apply_reduction()


    return json.dumps(pkl_model_loaded.predict(trans_input_passage)[0])




if __name__ == '__main__':
  app.run(port = 9000, debug = True)

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

Вы должны использовать jquery для динамического обновления страницы: 

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href= "{{ url_for('static',filename='css/style.css') }}">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
 <body>
   ...
 <div class = 'input_wrapper'>
    <textarea name = "passage_input" cols="35" wrap="soft" class="paragraph"></textarea>
    <button class='predict'>Predict</button>
 </form>
 </div>
<div class = "prediction"></div>
</body>
<script> 
$(document).ready(function(){
   $('.input_wrapper').on('click', '.predict', function(){
      var data = $('.paragraph').val();
      $.ajax({
       url: "/api",
      type: "get",
      data: {text:data},
      success: function(response) {
        $(".prediction").html(response.name);
       }
    });
   });
});
</script>
</html>

В приложении: 

@app.route('/api')
def predict():
  text_input = request.args.get('text')
  return flask.jsonify({'name':parse(pd.Series([text_input]))})

Теперь, когда нажата кнопка «Предсказать»,javascript берет введенный текст из textarea и динамически вызывает маршрут '/api' и обновляет div prediction с результатом.

0 голосов
/ 01 октября 2018

Вы можете использовать for в jinja для анализа вашего результата json в html-формате: 

{% for key, value in results %}        
  <span>{{key}} : {{value}}</span>
{% endfor %}

и в вашем приложении для колб: 

return render_template("index.html", results = your result)
...