Как использовать python и opencv в браузере с хорошей производительностью

Question

Привет всем, что я использую python 3 с библиотекой opencv, он работает хорошо, но я заметил, что рендеринг отображается в новом окне с

cv2.imshow('image',img)
cv2.waitKey(0)
cv2.destroyAllWindows()

Я просто хочу разрешить пользователю изменять яркость в браузере, но у меня задержка

Поэтому я решил создать

• python API, используя flask
• интерфейс, используя express сервер которые отображают индекс. html страница

Я не знаю, подходит ли это для обработки изображений с хорошей производительностью.

Вот мой API, который хорошо работает

@cross_origin()
@app.route('/brigtness', methods=['GET'])
def brigtness():
    image = cv.imread(cv.samples.findFile(MEDIA_PATH + "50cent.jpg"))
    if image is None:
        print('Could not open or find the image')
        exit('error')

    new_image = np.zeros(image.shape, image.dtype)

    alpha = 1.0                             # Simple contrast control
    beta = int(request.args.get('id'))      # Simple brightness control

    # Do the operation new_image(i,j) = alpha*image(i,j) + beta
    # Instead of these 'for' loops we could have used simply:
    new_image = cv.convertScaleAbs(image, alpha=alpha, beta=beta)
    cv.imwrite(MEDIA_PATH + "50cent-custom.jpg", new_image)

    _, data     =  cv.imencode('.jpeg', new_image)
    jpeg_base64 = base64.b64encode(data.tostring())

    return jpeg_base64

Вот мой скрипт для обновления яркости интерфейса

const axios = require('axios').default;
var $ = require( "jquery" );
require("bootstrap-slider");

$(document).ready(function() {
    $("#ex6").slider();
    //$("#ex6").on("slideStop", function(slideEvt) {
    $("#ex6").on("slide", function(slideEvt) {
        $("#ex6SliderVal").text(slideEvt.value);
        //createImage(slideEvt.value.toString());
        updateBrightness(slideEvt.value.toString());
    });
})

function updateBrightness(value) {
    axios.get('http://localhost:5000/brigtness?id=' + value)
    .then(function (response) {
        var base64 = response.data;
        refreshImage(base64);
    })
    .catch(function (error) {
        console.log(error);
    })
}

function refreshImage(base64) {
    $(".img").attr("src", "data:image/jpeg;base64," + base64)
}

Мои скрипты работают хорошо, но когда я решил обновить яркость, когда ползунок запускается событием «слайд», я получил задержку. Как я могу обновить яркость с меньшей задержкой? Как использовать python и opencv в браузере?