css = '''    
    .container {max-width: 1150px; margin: auto;padding-top: 1.5rem}
    #begin-btn {color: blue; font-size:20px;}
    #work-container {min-width: min(160px, 100%) !important;flex-grow: 0 !important}
   
    #scroll_x_row {height:20px;}
    #op-container{margin: 0 auto; text-align: center;width:fit-content;min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}
    #erase-btn-container{margin: 0 auto; text-align: center;width:150px;border-width:3px;border-color:#2c9748}
    #erase-btn {padding:0;}
    #enhancer-checkbox{width:520px}
    #enhancer-tip{width:450px}
    #enhancer-tip-div{text-align: left}

    #image_output{margin: 0 auto; text-align: center;width:640px}

    #download-container{margin: 0 auto; text-align: center;width:fit-content; min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}

    #download-btn-container{margin: 0 auto; text-align: center;width: 100px;border-width:1px;border-color:#2c9748}
    #download-btn {padding:0;}

    #share-container{margin: 0 auto; text-align: center;width:fit-content; min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}

    #image_upload .touch-none{display: flex}
    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    #share-btn-container {
        display: flex; padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; width: 13rem;
    }
    #share-btn {
        all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;
    }
    #share-btn * {
        all: unset;
    }
    #share-btn-container div:nth-child(-n+2){
        width: auto !important;
        min-height: 0px !important;
    }
    #share-btn-container .wrap {
        display: none !important;
    }

    .scrollbar_x {
        height: 15px;
        width: 50px;
        border-radius: 10px;
        background: #ccc;
        position: absolute;
        top: 0px;
    }    
'''

start_cleaner = """async() => {
    function isMobile() {
        try {
            document.createEvent("TouchEvent"); return true;
        } catch(e) {
            return false; 
        }
    }

	function getClientHeight()
	{
	  var clientHeight=0;
	  if(document.body.clientHeight&&document.documentElement.clientHeight) {
		var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
	  } else {
		var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
	  }
	  return clientHeight;
	}

    var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
    if (!gradioEl) {
        gradioEl = document.querySelector('body > gradio-app');
    }
    
    const page1 = gradioEl.querySelectorAll('#page_1')[0];
    const page2 = gradioEl.querySelectorAll('#page_2')[0];    
    const image_upload = gradioEl.querySelectorAll('#image_upload')[0];
    const image_output = gradioEl.querySelectorAll('#image_output')[0];
    const image_output_container = gradioEl.querySelectorAll('#image-output-container')[0];
    const data_image = gradioEl.querySelectorAll('#image_upload [data-testid="image"]')[0];
    const data_image_div = gradioEl.querySelectorAll('#image_upload [data-testid="image"] > div')[0];

    const scroll_x_container = gradioEl.querySelectorAll('#scroll_x_container')[0];

    image_output_container.setAttribute('style', 'width: 0px; height:0px; display:none;');
    var clientHeight = getClientHeight();
    if (isMobile()) {
        window.devicePixelRatio = 1;
        const page1_width = page1.offsetWidth;
        min_height = (clientHeight - 100) + 'px;';

        image_upload.setAttribute('style', 'width:' + (page1_width - 13*2) + 'px; min-height:' + min_height);
        data_image.setAttribute('style', 'width: ' + (page1_width - 14*2) + 'px; min-height:' + min_height);
        data_image_div.setAttribute('style', 'width: ' + (page1_width - 14*2) + 'px; min-height:' + min_height);
        scroll_x_container.setAttribute('style', 'width: ' + (page1_width - 14*2) + 'px;height:20px;');
        image_output.setAttribute('style', 'width: ' + (page1_width - 13*2) + 'px; min-height:none;'); 

        const enhancer = gradioEl.querySelectorAll('#enhancer-checkbox')[0];  
        enhancer.style.display = "none";

    } else {
        max_height = clientHeight - 150; //800;
        
        const container = gradioEl.querySelectorAll('.container')[0];
        container.setAttribute('style', 'max-width: 100%;');

        data_image.setAttribute('style', 'height: ' + max_height + 'px');
        data_image_div.setAttribute('style', 'min-height: ' + max_height + 'px');
    }
    if (!(gradioEl.parentNode)) {
        const share_btn_container = gradioEl.querySelectorAll('#share-btn-container')[0];  
        share_btn_container.setAttribute('style', 'width: 0px; height:0px;'); 
        const share_btn_share_icon = gradioEl.querySelectorAll('#share-btn-share-icon')[0];  
        share_btn_share_icon.setAttribute('style', 'width: 0px; height:0px;'); 
    }
    page1.style.display = "none";
    page2.style.display = "block";
    
    window['gradioEl'] = gradioEl;
    window['doCheckGallery'] = 0;
    window['checkGallery'] = function checkGallery() {
        try {
            if (window['doCheckGallery'] == 0) {
                var gallery_items = window['gradioEl'].querySelectorAll('#gallery .gallery-item');
                if (gallery_items && gallery_items.length == 2) {
                    window.clearInterval(window['checkGallery_interval']);
                    window['doCheckGallery'] = 1;
                    gallery_items[gallery_items.length-1].click();
                }
            }
        } catch(e) {
        }        
    }
    window['checkGallery_interval'] = window.setInterval("window.checkGallery()", 500); 

    window['start_workshop'] = function(workshop) {
        var scroll_x_container = window['gradioEl'].querySelector('#scroll_x_container');
        var scrollbar_x = scroll_x_container.querySelector('#scrollbar_x');
		if (!scrollbar_x) {
			var bar_height = 20;
            var bar_width = 50;
			var scrollbar_x = document.createElement('div');
			var css_x = `height: ${bar_height}px; width: 50px; border-radius: 10px; background: #007ACC;position: absolute; top: 0px;z-index:45;display:none;`;			
			scrollbar_x.style.cssText = css_x;
			scrollbar_x.id = 'scrollbar_x';

            scroll_x_container.appendChild(scrollbar_x);
			scrollbar_x = scroll_x_container.querySelector('#scrollbar_x');
		}
		if (scrollbar_x) {
            scrollbar_x.style.top = '0px';
			scrollbar_x.style.left = '0px';
			scroll_x_container.ratio_x = (workshop.scrollWidth - workshop.offsetWidth) / (workshop.offsetWidth - bar_width);
            window['put_log']('scrollbar_x_1_' + '/' + workshop.scrollWidth + '/' + workshop.offsetWidth + '/' + bar_width + '/' + scroll_x_container.ratio_x);
			if (workshop.scrollWidth - workshop.offsetWidth > 0) {
				scrollbar_x.style.display = 'block';
			}
		}

        scroll_x_container.scrollbar_x = scrollbar_x;
        scroll_x_container.workshop = workshop;


		if (isMobile()) {
			mousedown = 'touchstart';
			mousemove = 'touchmove';  
			mouseup = 'touchend';
		} else {
			mousedown = 'mousedown';
			mouseup = 'mouseup';
			mousemove = 'mousemove';
		}

        scroll_x_container.addEventListener(mousedown, function (e) {
            if (this.scrollbar_x && e.target === this.scrollbar_x) {
				if (isMobile()) {
					e = e.touches[0];
				}
                this.prevX = e.pageX;
            }
        });
		scroll_x_container.addEventListener(mouseup, function (e) {
			if (this.scrollbar_x && e.target === this.scrollbar_x) {
				this.prevX = null;
			}
			this.prevX = null;
        });

        scroll_x_container.addEventListener(mousemove, function (e) {
			if (this.scrollbar_x && e.target === this.scrollbar_x) {
				if (isMobile()) {
					e = e.touches[0];
				}
				if (this.prevX) {
                    offset = (e.pageX - this.prevX) * this.ratio_x;
                    this.workshop.scrollLeft = this.workshop.scrollLeft + offset;                    
                    scrollbar_left_x = this.scrollbar_x.offsetLeft + (e.pageX - this.prevX);
                    temp_x = this.scrollWidth - scrollbar_left_x - this.scrollbar_x.clientWidth;
                    if (temp_x >= 0 && temp_x <= (this.scrollWidth - this.scrollbar_x.clientWidth)) {
						this.scrollbar_x.style.left = scrollbar_left_x + 'px';						
						this.prevX = e.pageX;
					}
				}
			}
			if (!isMobile()) {
				e.preventDefault();
			}
        });

    }

	window['move_nodes'] = function(node1, node2, selectors){
		var children = node1.querySelectorAll(selectors);
		for (var i = 0; i < children.length; i++) {
			node2.appendChild(children[i]);
		}
	}

    function get_time(){
        var myDate = new Date();
        var Y = myDate.getFullYear(); 
        var M = myDate.getMonth() + 1; 
        var D = myDate.getDate();  
        var H = myDate.getHours(); 
        var i = myDate.getMinutes(); 
        var s = myDate.getSeconds(); 
        if(M < 10){M = '0' + M;}
        if(D < 10){D = '0' + D;}
        if(H < 10){H = '0' + H;}
        if(i < 10){i = '0' + i;}
        if(s < 10){s = '0' +s;}
        var nowTime = Y+'-'+M+'-'+D+' '+H+':'+i+':'+s;
        return nowTime;
    }
    window['log_container'] = gradioEl.querySelectorAll('#log_container')[0];
    window['put_log'] = function(log_info) {
        if (window.location.href.indexOf(':7860') < 0) {return;}
        window['log_container'].innerHTML += '<br>';
        window['log_container'].innerHTML += get_time() + '-' + log_info;
    }

    window['doCheckCanvas'] = 0;
    window['checkCanvas'] = function checkCanvas() {
        try {
            var workshop = window['gradioEl'].querySelectorAll('#image_upload [data-testid="image"] > div >div')[0];
            if (workshop) {
                var canvas = workshop.querySelectorAll('canvas');
                if (canvas.length === 5) {
                    if (window['doCheckCanvas'] === 0) {
                        window['put_log']('_0_' + window['doCheckCanvas']);

                        window['doCheckCanvas'] = 1;

                        var work_layer = document.createElement('div');
                        var css_workshop = "width: 100%;height: 100%;padding: 0rem;box-sizing: border-box;overflow: hidden;position: relative;white-space:nowrap;z-index:45;";
                        workshop.insertBefore(work_layer, canvas[0]);
                        work_layer.style.cssText = css_workshop;
                        work_layer.id = 'work_layer';
                        work_layer.style.display = 'block';
 
                        window['put_log']('_1_' +  window['doCheckCanvas'] + '/' + canvas[0].style.cssText);

                        setTimeout(function(){
                            window['put_log']('_2_' + window['doCheckCanvas']);
                            window['move_nodes'](workshop, work_layer, 'canvas');
                            window['put_log']('_3_' + window['doCheckCanvas']);  
                            window['start_workshop'](work_layer); 
                            window['put_log']('_4_' + window['doCheckCanvas']);
                            setTimeout(function(){
                                    var image_upload = window['gradioEl'].querySelectorAll('#image_upload')[0]; 
                                    var btns = image_upload.querySelectorAll('button'); 
                                    window['put_log']('_5_' + btns.length);
                                    if (btns.length == 3) {
                                        window['put_log']('_6_' + btns.length);
                                        btns[0].click();
                                    }
                            }, 100);                            
                        }, 200); 
     
                        return;
                    }
                } else {
                    window['log_container'].innerHTML = '';

                    window['doCheckCanvas'] = 0;
                    var scrollbar_x = window['gradioEl'].querySelector('#scrollbar_x');
                    if (scrollbar_x) { 
                        scrollbar_x.parentNode.removeChild(scrollbar_x);
                    }
                }
            } else {
                window['log_container'].innerHTML = '';

                window['doCheckCanvas'] = 0;
                var scrollbar_x = window['gradioEl'].querySelector('#scrollbar_x');
                if (scrollbar_x) { 
                    scrollbar_x.parentNode.removeChild(scrollbar_x);
                }               
            }
        } catch(e) {
        }        
    }
    if (isMobile()) {
        window['checkCanvas_interval'] = window.setInterval("window.checkCanvas()", 100);
    }
}"""

download_img = """async() => {
    Date.prototype.Format = function (fmt) { 
        var o = {
            "M+": this.getMonth() + 1, 
            "d+": this.getDate(), 
            "h+": this.getHours(), 
            "m+": this.getMinutes(),
            "s+": this.getSeconds(),
            "q+": Math.floor((this.getMonth() + 3) / 3), 
            "S": this.getMilliseconds()
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
    }   

    var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
    if (!gradioEl) {
        gradioEl = document.querySelector('body > gradio-app');
    }  
    const out_image = gradioEl.querySelectorAll('#image_output img')[0]; 
    if (out_image) {
        var x=new XMLHttpRequest();
        x.open("GET", out_image.src, true);
        x.responseType = 'blob';
        x.onload = function(e){
            var url = window.URL.createObjectURL(x.response)
            var a = document.createElement('a');
            a.href = url;
            a.download = (new Date()).Format("yyyyMMdd_hhmmss");
            a.click();
        }
        x.send();
    }
}"""