html progress bar for python image processing code

24 Views Asked by At

I'm rather new, inexperienced, and need some help. I want to implement a progress bar for my image processing python code to return to an HTML page, but I've been having issues getting the progress bar to update to reflect the status of the image. I've used json to send the data but at best I get the bar starting and staying at 25%, even as the image is done being processed.

Here are the relevent functioning python, html, and css parts of the code.

@app.route('/upload', methods=['POST'])
def upload():
    if 'file' not in request.files:
        return 'No file part'

    file = request.files['file']

    if file.filename == '':
        return 'No selected file'

    if file:
        try:
            with tempfile.NamedTemporaryFile(delete=False, suffix='.jpg') as input_temp:
                input_path = input_temp.name
                file.save(input_path)

                with open(input_path, 'rb') as i:
                    input_data = i.read()
                    output_data = remove(input_data)

            with tempfile.NamedTemporaryFile(delete=False, suffix='.png') as output_temp:
                output_path = output_temp.name
                with open(output_path, 'wb') as o:
                    o.write(output_data)

                with Image.open(io.BytesIO(output_data)) as img:
                    img = img.convert("RGBA")
                    bg_color = (213, 214, 216)
                    new_bg = Image.new("RGBA", img.size, bg_color)
                    result = Image.alpha_composite(new_bg, img)
                    result = result.convert("RGB")

            cropped_image = portrait_crop(np.array(result))

            if cropped_image is not None:
                new_height = 413
                resized_image_bytes = resize_image(cropped_image, new_height)

                with tempfile.NamedTemporaryFile(delete=False, suffix='.jpg') as output_temp:
                    output_path = output_temp.name
                    resized_image_bytes.seek(0)
                    with open(output_path, 'wb') as o:
                        o.write(resized_image_bytes.read())

                return send_file(output_path, mimetype='image/jpeg', as_attachment=True)
            else:
                return "No faces detected."
        finally:
            os.unlink(input_path)
            os.unlink(output_path)
        <form id="uploadForm" action="http://127.0.0.1:5000/upload" method="post" enctype="multipart/form-data">
            <label for="fileInput" class="button">Clean
                 <input type="file" id="fileInput" name="file" accept="image/*" style="display: none;" onchange="this.form.submit();" required>
            </label>
        </form>
        <div class="progress-bar" data-label="Processing..."></div>
        <script>
            document.getElementById('fileInput').addEventListener('change', function() {
                document.getElementById('uploadForm').submit();
            });
        </script>
.progress-bar::before {
  content: attr(data-label);
  display: flex;
  align-items: center;
  position: absolute;
  left: .5em;
  top: .5em;
  bottom: .5em;
  width: calc(var(--width, 0) * 1%);
  min-width: 2rem;
  max-width: calc(100% -1em);
  background-color: #069;
  border-radius: 1em;
  padding: 1em;
}

What I want is for the progress bar to change after removing the background (remove(input_data)), after filling in the transparent background, after portrait_crop, and finally after resize_image. If anyone could explain how to properly implement something like that, I'd be very grateful.

As I've said, I tried using json, as I can successfully fetch data from it using @app.route('/json') and fetch('http://127.0.0.1:5000/json') specifically, as that's what I managed to make work. I've also tried using sse, but either I don't know enough to use it right or it just doesn't work, because it seems to get denied even with CORS(app). I'm honestly feeling blocked, and can't find any good explanations for what I'm trying to do. I've also tried using yield, but I keep getting errors and no progress when I do.

0

There are 0 best solutions below