Untitled

app.py
_____________________

from flask import Flask, jsonify, render_template, request

app = Flask(__name__)

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

@app.route('/generate', methods=['GET'])
def generate():
    prefix = request.args.get('prefix')
    urls = []
    for number in range(1, 8):
        urls.append('https://img.tenniswarehouse-europe.com/new_big/{p}-{n}.jpg'.format(p=prefix, n=number))
    return jsonify(result=urls)

___________

index.html
_______________

<!doctype html>
<html lang="en">
<html>
<head>
   <title>Image Grabber v1.0</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.min.js"></script>
</head>
<body>
<center>
<script>
var urls = [];
var zipFilename = "zipFilename";
//The function is called
compressed_img(urls,zipFilename);

function compressed_img(urls,zipFilename) {
  var zip = new JSZip();
  var count = 0;
  var name = zipFilename+".zip";
  urls.forEach(function(url){
    JSZipUtils.getBinaryContent(url, function (err, data) {
      if(err) {
         throw err;
      }
       var filename = url.replace(/.*\//g, "");
       zip.file(filename, data, { binary: true, createFolders: true });
       count++;
       if (count == urls.length) {
         zip.generateAsync({type:'blob'}).then(function(content) {
            saveAs(content, name);
         });
       }
      });
  });
}
</script>
<script type=text/javascript>
  $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
  $( document ).ready(function() {
    $('#button').bind('click', function() {
      $.getJSON($SCRIPT_ROOT + '/generate', {
        prefix: $('input[name="prefix"]').val()
      }, function(data) {
        $("#result").text(data.result);
      });
      return false;
    });
  });
</script><br>
 <h2>Image Grabber v1.0</h2>
<p><input type=text size=45 name=prefix><br>
   <span id=result></span><br>
<p><button type="submit" id=button>Download</button></p>
</center>
</body>
</html>