title: How to update image in real time with flask?
body: <p>I am using flask (python) to host a interface that allows the user to upload an image, and use a slider to change the value of a variable in a function that reduces noise in an image. </p>
  
  <p>The slider works but the problem is I have to reload the page every time that I want to see the change in value on the updated image.</p>
  
  <p>how can I add a slider that will update the image in real time so I won't have to continuously reload the page to see the changes?</p>
  
  <p>(If the slider is at 0 I want it to to look how the image did when it first uploaded)</p>
  
  <p>I'm doing some searching and it looks like I would use jquery or something but I don't know how to implement it</p>
  
  <p>thanks for reading </p>
  
  <p>app.py: </p>
  
  <pre><code>import os
  from flask import Flask, render_template, request, send_from_directory,url_for, session, redirect
  import cv2
  import shutil
  
  
  app = Flask(__name__)
  
  APP_ROOT = os.path.dirname(os.path.abspath(__file__))
  
  
  app.config['UPLOAD_FOLDER'] = os.path.join(APP_ROOT, 'images')
  app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
  
  @app.route("/")
  def index():
      session.clear()
      return render_template("upload.html")
  
  @app.route('/images/&lt;filename&gt;')
  def uploadfile(filename):
      return send_from_directory(app.config['UPLOAD_FOLDER'],filename)
  
  @app.route('/home')
  def home():
      return render_template("completed.html", imgSrc="images/" + session.get('imgSrc') , message=session.get('message'))
  
  @app.route("/upload" , methods = ['POST'])
  def upload():
      target = os.path.join(APP_ROOT, 'images')
  
      if request.method == 'POST':
  
          if not os.path.isdir(target):
              os.mkdir(target)
  
          for file in request.files.getlist("file"):
              filename = file.filename
  
              destination = "/".join((target, filename))
  
              file.save(destination)
  
              filename = destination
  
              org = open(filename, 'rb')
  
              base = os.path.basename(filename)
  
              dir = os.path.dirname(filename)
  
              filename_cp = os.path.splitext(base)[0]
  
              filename_cp = "cp_"+filename_cp+os.path.splitext(base)[1]
  
              destination2 = dir+"/"+filename_cp
              file.save(destination2)
  
              cpy = open (destination2, 'wb')
              shutil.copyfileobj(org, cpy)
  
              session['image'] = filename
              session['filename'] = filename
              session['imgSrc'] = os.path.basename(destination)
              session['cimgsrc'] = os.path.basename(destination2)
              session['cpimg'] = destination2
  
              print("session", session)
  
      return render_template("completed.html",imgSrc="images/"+session.get('imgSrc'))
  
  @app.route("/imgp/nr", methods=['post'])
  def nr():
      print(session)
  
      img = cv2.imread(session.get('cpimg'), 0)
      #threshold = 40
      threshold = float(request.form['slider'])
      cv2.threshold(img, threshold, 255, cv2.THRESH_BINARY, img)
      print (session['cpimg'])
      cv2.imwrite(session.get('cpimg'),img)
      session['message'] = "NR is done!"
      session['imgSrc'] = os.path.basename(session['cpimg'])
      return redirect(url_for('home', op='nr'))
  
  if __name__ =="__main__":
      app.secret_key = "abcdefghijklmnopqrstuvwxyz"
      app.run(port = 4555, debug = True)
  </code></pre>
  
  <p>upload.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Upload&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;form id ="upload-form" action="{{ url_for ('upload') }}" method = "POST" enctype="multipart/form-data"&gt;
      &lt;input type="file" name="file" accept = image/* multiple&gt;
      &lt;p&gt;Drag your files here or click in this area.&lt;/p&gt;
      &lt;button type ="submit" value="Upload"&gt; Upload&lt;/button&gt;
  
  
  &lt;/form&gt;
  
  
  &lt;body&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>completed.hmtl (where the slider and uploaded image is):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt; file uploaded&lt;/h1&gt;
  &lt;img src="{{imgSrc}}" style="height:200px;width:300px;"/&gt;
  &lt;h2&gt;{{message}}&lt;/h2&gt;
  
  
  &lt;form action ="imgp/nr" method = "post"&gt;
      &lt;input type="range" min={{min}} max={{max}} value={{max}} class="slider" id="myRange" name="slider"&gt;
      &lt;input type="submit" value="Apply ga"&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>