title: Flask and HTML: Redirect json response to be displayed at the bottom of the same page instead showing response on a separate page
body: <p>Super new to web development.. I'm deploying an <em>sklearn</em> Machine Learning model using Flask. </p>
  
  <p>I'm able to correctly return the response prediction as a JSON, but it is showing up on a separate page.. I would like to alter my HTML and Flask <code>app.py</code> in such a way that, the prediction response appears in a newly created container element right at the bottom of the <code>form</code> in HTML</p>
  
  <p>Here is my <code>index.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href= "{{ url_for('static',filename='css/style.css') }}"&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class = 'intro'&gt;
    This is a simple website that hosts a Machine Learning model trained using &lt;i&gt;sklearn&lt;/i&gt; to predict one of three authors:
    &lt;b&gt;HP Lovecraft&lt;/b&gt;, &lt;b&gt;Edgar Allan Poe&lt;/b&gt; and &lt;b&gt;Mary Shelley&lt;/b&gt;. Simply enter a passage of one of those three authors and you will get a prediction.
  
  
  &lt;/div&gt;
  
  &lt;div class="authorimage"&gt;
    &lt;div class="row"&gt;
    &lt;div class="column"&gt;
      &lt;h2&gt;Mary Shelley&lt;/h2&gt;
      &lt;p&gt;&lt;img src = "{{ url_for('static',filename='img/mary.jpeg') }}"&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;h2&gt;H.P Lovecraft&lt;/h2&gt;
  
      &lt;p&gt;&lt;img src = "{{ url_for('static',filename='img/lovecraft.jpeg') }}"&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;h2&gt;Edgar Allan Poe&lt;/h2&gt;
      &lt;p&gt;&lt;img src = "{{ url_for('static',filename='img/eap.jpeg') }}"&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;div class = 'input'&gt;
    &lt;form action="/api" method="POST"&gt;
      &lt;textarea name = "passage_input" cols="35" wrap="soft"&gt;&lt;/textarea&gt;
      &lt;input type="submit"&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  
  &lt;div class = "prediction"&gt;
  Not sure how to collect the response from app.py into a box here..
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my <code>app.py</code></p>
  
  <pre><code>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)
  </code></pre>