Spaces:
Running
Running
| 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(); | |
| } | |
| }""" | |