static/js/main.js

class ImageHandler {
    constructor(
        maxImageSize = 10e6, //10MB
        clearOnInit = true
    ) {
        this.resultImg = document.getElementById('resultImg');
        this.maxImageSize = maxImageSize;
        this.validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];

        this.scDropZone = document.getElementById('scDropZone');
        this.scDropImages = document.getElementById('scDropImages');

        this.scRunBtn = document.getElementById('scRunBtn');
        this.scDeleteBtn = document.getElementById('scDeleteBtn');

        if (clearOnInit)
            this.clearImages();
        else {
            for (var i = 0; i < this.scDropImages.children.length; i++) {
                let child = this.scDropImages.children[i];
                if (child.tagName == 'IMG') {
                    if (child.className == "hoverDropImage")
                        child.className = "";
                    this.processNewImage(child);
                }
            }
        }

        this.initButtons();

        this.scDropZone.addEventListener('drop', e => this.processDrop(e));
        this.scDropZone.addEventListener('dragover', e => this.processDragOver(e));
    }

    initButtons() {
        var scBtnBox = document.getElementById('scBtnBox');
        for (var i = 0; i < scBtnBox.children.length; i++) {
            let child = scBtnBox.children[i];
            if (child.tagName == "BUTTON") {
                child.addEventListener(
                    'mouseover',
                    function () {
                        child.className = 'hoverScBtn';
                    }
                );
                child.addEventListener(
                    'mouseout',
                    function () {
                        child.className = '';
                    }
                );
            }
        }

        // TODO: scRunBtn
        this.scRunBtn.addEventListener(
            'mouseup',
            (e) => this.run()
        );

        // scDeleteBtn
        this.scDeleteBtn.addEventListener(
            'mouseup',
            (e) => this.deleteSelectedImage()
        );

    }

    deleteSelectedImage() {
        for (var i = this.scDropImages.children.length - 1; i >= 0; i--) {
            let child = this.scDropImages.children[i];
            if (child.tagName == 'IMG') {
                if (child.className == "selectedDropImage") {
                    this.scDropImages.removeChild(child);
                    break;
                }
            }
        }
    }

    clearImages() {
        this.scDropImages.innerHTML = "";
    }

    validateDroppedImage(image) {
        if (this.validTypes.indexOf(image.type) == -1) {
            console.log('Invalid File Type: ' + image.type);
            return false;
        }

        if (image.size > this.maxImageSize) {
            console.log('File is too large: ' + image.size);
            return false
        }

        return true;
    }

    processNewImage(img) {
        img.addEventListener(
            'mouseover',
            function () {
                if (img.className != "selectedDropImage")
                    img.className = "hoverDropImage";
            }
        );
        img.addEventListener(
            'mouseout',
            function () {
                if (img.className != "selectedDropImage")
                    img.className = "";
            }
        );
        img.addEventListener(
            'mouseup',
            function () {
                if (img.className == "hoverDropImage") {
                    var existingSelectedImages = document.getElementsByClassName("selectedDropImage");
                    for (var i = 0; i < existingSelectedImages.length; i++)
                        existingSelectedImages[i].className = "";
                    img.className = "selectedDropImage";
                }
            }
        )
    }

    /**
     * Refer to https://soshace.com/the-ultimate-guide-to-drag-and-drop-image-uploading-with-pure-javascript/
     * @param {object} event 
     */
    processDrop(event) {
        // Prevent default behavior (Prevent file from being opened)
        event.preventDefault();

        var dt = event.dataTransfer;
        var files = dt.files;
        if (files.length > 0) {
            for (var i = 0; i < files.length; i++) {
                if (this.validateDroppedImage(files[i])) {
                    var img = document.createElement('img');
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        img.src = e.target.result;
                        // imageNav.sources.push(e.target.result);
                    }
                    this.processNewImage(img);
                    reader.readAsDataURL(files[i]);
                    this.scDropImages.appendChild(img);
                }
            }
        }
        else {
            // console.log('Dropped ' + files.length + ' files.');
        }
    }

    processDragOver(event) {
        // console.log('File(s) in drop zone');

        // Prevent default behavior (Prevent file from being opened)
        event.preventDefault();
    }

    get maxSideLength() {
        var result = document.getElementById('scMaxSidePromptInput').value;
        return Number(result);
    }

    get numIterations() {
        var result = document.getElementById('scNumItersInput').value;
        return Number(result);
    }

    async infer(imgData) {
        try {
            let url = '../../superres?maxSideLength='
                + this.maxSideLength
                + '&&numIterations='
                + this.numIterations;
            let res = await fetch(
                url,
                {
                    method: 'POST',
                    body: imgData
                }
            );
            return await res.json();
        } catch (error) {
            console.log(error);
        }
    }

    async run() {
        let imgData = null;
        for (var i = this.scDropImages.children.length - 1; i >= 0; i--) {
            let child = this.scDropImages.children[i];
            if (child.tagName == 'IMG') {
                if (child.className == "selectedDropImage") {
                    imgData = child.src;
                    break;
                }
            }
        }
        if (imgData != null) {
            this.resultImg.src = '../static/img/loadingScreen.webp';
            let result = await this.infer(imgData);
            // result['isError']
            if (result == null) {
                this.resultImg.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_0fzX1q44MiXQupdeYQTpGd_vAHs9zvTTVLxkfJu6g0RL9oawDeC5Edf-kRt27ygD4ZQ&usqp=CAU';
            }
            else
                this.resultImg.src = result.data;
        }
    }
}

var imageHandler = new ImageHandler(
    maxImageSize = 10e6,
    clearOnInit = true
);