How can I convert my python slider to a javascript/jquery slider so I change my image dynamically?

Keywords´╝Ü javascript python jquery flask slider

Question: 

Right now I am using flask to display an uploaded image and using a python slider to adjust the value in the gamma functionality I have in my script.

The slider works successfully but I have to reload the page to see the results. I want to have a javascript slider that will change the image dynamically with the slider 0 value being the original value of the gamma when the image was first loaded, without having to refresh.

can you guys help me convert my python slider to a javascript/jquery one so my image can change dynamically?

thank you for reading

app.py:

    import os
    from flask import Flask, render_template, request, send_from_directory,url_for, session, redirect
    import numpy as np
    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')
    #session = {'image':'', 'fullpath':''}
    app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0

    @app.route("/")
    def index():
        session.clear()
        return render_template("upload.html")

    @app.route('/images/<filename>')
    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')
        #session['dest'] = target
        #print(target)

        if request.method == 'POST':

            if not os.path.isdir(target):
                os.mkdir(target)

            for file in request.files.getlist("file"):
                #print(file)

                #Getting the name of the file that was uploaded in the html form
                filename = file.filename

                #The destination puts file in the image directory
                destination = "/".join((target, filename))

                #Then it saves the the image
                file.save(destination)

                #makes the filename the actual path to the uploaded image
                filename = destination


                org = open(filename, 'rb')


                #assigns "base" to the file itself and not the full path
                base = os.path.basename(filename)

                #assigns the images folder to dir
                dir = os.path.dirname(filename)


                #Removes the .jpg from thr file
                filename_cp = os.path.splitext(base)[0]


                #Addes cp_ + (imagename) + .(extention)
                filename_cp = "cp_"+filename_cp+os.path.splitext(base)[1]



                #print(filename_cp+"\n")

                destination2 = dir+"/"+filename_cp
                file.save(destination2)


               # print(destination2+"\n")



                cpy = open (destination2, 'wb')
                shutil.copyfileobj(org, cpy)




                #filename = filename
                #session['fullpath'] = destination
                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/ga", methods=['post'])
def ga():

    image = cv2.imread(session['cpimg'])
    print("session", session)



    original = image
    imageLocation = session['cpimg']
    # loop over various values of gamma
    for gamma in np.arange(0.0, 3.5, 0.5):
        # ignore when gamma is 1 (there will be no change to the image)
        if gamma == 1:
            continue

        # apply gamma correction and show the images
        gamma = float(request.form['slider'])
        print(request.form)
        gamma = gamma if gamma > 0 else 0.1
        adjusted = adjust_gamma(original, gamma=gamma)
        print(imageLocation)


        '''cv2.putText(adjusted, "g={}".format(gamma), (10, 30),
                    cv2.FONT_HERSHEY_SIMPLEX, 0.8, (0, 0, 255), 3)'''
        cv2.imwrite(imageLocation, adjusted)

        session['message'] = "Gamma is done!"
        #cv2.imshow("Images", np.hstack([original, adjusted]))
        #cv2.waitKey(0)
        session['imgSrc'] = os.path.basename(imageLocation)
        return redirect(url_for('home', op = 'ga', max = 1.0, min =0.1))
        #return render_template("completed.html", imgSrc="images/" + session.get('imgSrc'))
        #redirect(url_for('home', op='sk'))

def adjust_gamma(image, gamma):
    invGamma = 1.0 / gamma
    table = np.array([((i / 255.0) ** invGamma) * 255
        for i in np.arange(0, 256)]).astype("uint8")

    return cv2.LUT(image, table)

if __name__ =="__main__":
    app.secret_key = "abcdefghijklmnopqrstuvwxyz"
    app.run(port = 4555, debug = True)

home.py

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SDG</title>
</head>
<body>


<form  action = "/uploader" method="post" enctype="multipart/form-data">
 <div>
   <label for="file">Please choose an image for SDG</label>
   <input type="file" id="file" name="file" multiple>
 </div>
 <div>
   <input type = "submit"/>
 </div>




</form>






</body>
</html>

completed.html (where the sliders are)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1> file uploaded</h1>
<img src="{{imgSrc}}" style="height:200px;width:300px;"/>
<h2>{{message}}</h2>

<form action="imgp/skew" method="post">
    <input value="Apply Skew" type="submit">
</form>

<form action="imgp/ga" method="post">
    <input value="Apply NR" type="submit">
</form>

<form action ="imgp/ga" method = "post">
<input type="range" min={{min}} max={{max}} value={{max}} class="slider" id="myRange" name="slider">
<input type="submit" value="Apply ga">
</form>

</body>
</html>

Answers: