Spaces:
Running
Running
yizhangliu
commited on
Commit
•
04b15fa
1
Parent(s):
c4a39f9
Upload utils.py
Browse files
utils.py
ADDED
@@ -0,0 +1,351 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
css = '''
|
2 |
+
.container {max-width: 1150px; margin: auto;padding-top: 1.5rem}
|
3 |
+
#begin-btn {color: blue; font-size:20px;}
|
4 |
+
#work-container {min-width: min(160px, 100%) !important;flex-grow: 0 !important}
|
5 |
+
|
6 |
+
#scroll_x_row {height:20px;}
|
7 |
+
#op-container{margin: 0 auto; text-align: center;width:fit-content;min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}
|
8 |
+
#erase-btn-container{margin: 0 auto; text-align: center;width:150px;border-width:3px;border-color:#2c9748}
|
9 |
+
#erase-btn {padding:0;}
|
10 |
+
#enhancer-checkbox{width:520px}
|
11 |
+
#enhancer-tip{width:450px}
|
12 |
+
#enhancer-tip-div{text-align: left}
|
13 |
+
|
14 |
+
#image_output{margin: 0 auto; text-align: center;width:640px}
|
15 |
+
|
16 |
+
#download-container{margin: 0 auto; text-align: center;width:fit-content; min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}
|
17 |
+
|
18 |
+
#download-btn-container{margin: 0 auto; text-align: center;width: 100px;border-width:1px;border-color:#2c9748}
|
19 |
+
#download-btn {padding:0;}
|
20 |
+
|
21 |
+
#share-container{margin: 0 auto; text-align: center;width:fit-content; min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}
|
22 |
+
|
23 |
+
#image_upload .touch-none{display: flex}
|
24 |
+
@keyframes spin {
|
25 |
+
from {
|
26 |
+
transform: rotate(0deg);
|
27 |
+
}
|
28 |
+
to {
|
29 |
+
transform: rotate(360deg);
|
30 |
+
}
|
31 |
+
}
|
32 |
+
#share-btn-container {
|
33 |
+
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;
|
34 |
+
}
|
35 |
+
#share-btn {
|
36 |
+
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;
|
37 |
+
}
|
38 |
+
#share-btn * {
|
39 |
+
all: unset;
|
40 |
+
}
|
41 |
+
#share-btn-container div:nth-child(-n+2){
|
42 |
+
width: auto !important;
|
43 |
+
min-height: 0px !important;
|
44 |
+
}
|
45 |
+
#share-btn-container .wrap {
|
46 |
+
display: none !important;
|
47 |
+
}
|
48 |
+
|
49 |
+
.scrollbar_x {
|
50 |
+
height: 15px;
|
51 |
+
width: 50px;
|
52 |
+
border-radius: 10px;
|
53 |
+
background: #ccc;
|
54 |
+
position: absolute;
|
55 |
+
top: 0px;
|
56 |
+
}
|
57 |
+
'''
|
58 |
+
|
59 |
+
start_cleaner = """async() => {
|
60 |
+
function isMobile() {
|
61 |
+
try {
|
62 |
+
document.createEvent("TouchEvent"); return true;
|
63 |
+
} catch(e) {
|
64 |
+
return false;
|
65 |
+
}
|
66 |
+
}
|
67 |
+
|
68 |
+
function getClientHeight()
|
69 |
+
{
|
70 |
+
var clientHeight=0;
|
71 |
+
if(document.body.clientHeight&&document.documentElement.clientHeight) {
|
72 |
+
var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
|
73 |
+
} else {
|
74 |
+
var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
|
75 |
+
}
|
76 |
+
return clientHeight;
|
77 |
+
}
|
78 |
+
|
79 |
+
var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
|
80 |
+
if (!gradioEl) {
|
81 |
+
gradioEl = document.querySelector('body > gradio-app');
|
82 |
+
}
|
83 |
+
|
84 |
+
const page1 = gradioEl.querySelectorAll('#page_1')[0];
|
85 |
+
const page2 = gradioEl.querySelectorAll('#page_2')[0];
|
86 |
+
const image_upload = gradioEl.querySelectorAll('#image_upload')[0];
|
87 |
+
const image_output = gradioEl.querySelectorAll('#image_output')[0];
|
88 |
+
const image_output_container = gradioEl.querySelectorAll('#image-output-container')[0];
|
89 |
+
const data_image = gradioEl.querySelectorAll('#image_upload [data-testid="image"]')[0];
|
90 |
+
const data_image_div = gradioEl.querySelectorAll('#image_upload [data-testid="image"] > div')[0];
|
91 |
+
|
92 |
+
const scroll_x_container = gradioEl.querySelectorAll('#scroll_x_container')[0];
|
93 |
+
|
94 |
+
image_output_container.setAttribute('style', 'width: 0px; height:0px; display:none;');
|
95 |
+
var clientHeight = getClientHeight();
|
96 |
+
if (isMobile()) {
|
97 |
+
window.devicePixelRatio = 1;
|
98 |
+
const page1_width = page1.offsetWidth;
|
99 |
+
min_height = (clientHeight - 150) + 'px;';
|
100 |
+
|
101 |
+
image_upload.setAttribute('style', 'width:' + (page1_width - 13*2) + 'px; min-height:' + min_height);
|
102 |
+
data_image.setAttribute('style', 'width: ' + (page1_width - 14*2) + 'px; min-height:' + min_height);
|
103 |
+
data_image_div.setAttribute('style', 'width: ' + (page1_width - 14*2) + 'px; min-height:' + min_height);
|
104 |
+
scroll_x_container.setAttribute('style', 'width: ' + (page1_width - 14*2) + 'px;height:20px;');
|
105 |
+
image_output.setAttribute('style', 'width: ' + (page1_width - 13*2) + 'px; min-height:none;');
|
106 |
+
|
107 |
+
const enhancer = gradioEl.querySelectorAll('#enhancer-checkbox')[0];
|
108 |
+
enhancer.style.display = "none";
|
109 |
+
|
110 |
+
} else {
|
111 |
+
max_height = clientHeight - 150; //800;
|
112 |
+
|
113 |
+
const container = gradioEl.querySelectorAll('.container')[0];
|
114 |
+
container.setAttribute('style', 'max-width: 100%;');
|
115 |
+
|
116 |
+
data_image.setAttribute('style', 'height: ' + max_height + 'px');
|
117 |
+
data_image_div.setAttribute('style', 'min-height: ' + max_height + 'px');
|
118 |
+
}
|
119 |
+
if (!(gradioEl.parentNode)) {
|
120 |
+
const share_btn_container = gradioEl.querySelectorAll('#share-btn-container')[0];
|
121 |
+
share_btn_container.setAttribute('style', 'width: 0px; height:0px;');
|
122 |
+
const share_btn_share_icon = gradioEl.querySelectorAll('#share-btn-share-icon')[0];
|
123 |
+
share_btn_share_icon.setAttribute('style', 'width: 0px; height:0px;');
|
124 |
+
}
|
125 |
+
page1.style.display = "none";
|
126 |
+
page2.style.display = "block";
|
127 |
+
|
128 |
+
window['gradioEl'] = gradioEl;
|
129 |
+
window['doCheckGallery'] = 0;
|
130 |
+
window['checkGallery'] = function checkGallery() {
|
131 |
+
try {
|
132 |
+
if (window['doCheckGallery'] == 0) {
|
133 |
+
var gallery_items = window['gradioEl'].querySelectorAll('#gallery .gallery-item');
|
134 |
+
if (gallery_items && gallery_items.length == 2) {
|
135 |
+
window.clearInterval(window['checkGallery_interval']);
|
136 |
+
window['doCheckGallery'] = 1;
|
137 |
+
gallery_items[gallery_items.length-1].click();
|
138 |
+
}
|
139 |
+
}
|
140 |
+
} catch(e) {
|
141 |
+
}
|
142 |
+
}
|
143 |
+
window['checkGallery_interval'] = window.setInterval("window.checkGallery()", 500);
|
144 |
+
|
145 |
+
window['start_workshop'] = function(workshop) {
|
146 |
+
var scroll_x_container = window['gradioEl'].querySelector('#scroll_x_container');
|
147 |
+
var scrollbar_x = scroll_x_container.querySelector('#scrollbar_x');
|
148 |
+
if (!scrollbar_x) {
|
149 |
+
var bar_height = 20;
|
150 |
+
var bar_width = 50;
|
151 |
+
var scrollbar_x = document.createElement('div');
|
152 |
+
var css_x = `height: ${bar_height}px; width: 50px; border-radius: 10px; background: #007ACC;position: absolute; top: 0px;z-index:45;display:none;`;
|
153 |
+
scrollbar_x.style.cssText = css_x;
|
154 |
+
scrollbar_x.id = 'scrollbar_x';
|
155 |
+
|
156 |
+
scroll_x_container.appendChild(scrollbar_x);
|
157 |
+
scrollbar_x = scroll_x_container.querySelector('#scrollbar_x');
|
158 |
+
}
|
159 |
+
if (scrollbar_x) {
|
160 |
+
scrollbar_x.style.top = '0px';
|
161 |
+
scrollbar_x.style.left = '0px';
|
162 |
+
scroll_x_container.ratio_x = (workshop.scrollWidth - workshop.offsetWidth) / (workshop.offsetWidth - bar_width);
|
163 |
+
window['put_log']('scrollbar_x_1_' + '/' + workshop.scrollWidth + '/' + workshop.offsetWidth + '/' + bar_width + '/' + scroll_x_container.ratio_x);
|
164 |
+
if (workshop.scrollWidth - workshop.offsetWidth > 0) {
|
165 |
+
scrollbar_x.style.display = 'block';
|
166 |
+
}
|
167 |
+
}
|
168 |
+
|
169 |
+
scroll_x_container.scrollbar_x = scrollbar_x;
|
170 |
+
scroll_x_container.workshop = workshop;
|
171 |
+
|
172 |
+
|
173 |
+
if (isMobile()) {
|
174 |
+
mousedown = 'touchstart';
|
175 |
+
mousemove = 'touchmove';
|
176 |
+
mouseup = 'touchend';
|
177 |
+
} else {
|
178 |
+
mousedown = 'mousedown';
|
179 |
+
mouseup = 'mouseup';
|
180 |
+
mousemove = 'mousemove';
|
181 |
+
}
|
182 |
+
|
183 |
+
scroll_x_container.addEventListener(mousedown, function (e) {
|
184 |
+
if (this.scrollbar_x && e.target === this.scrollbar_x) {
|
185 |
+
if (isMobile()) {
|
186 |
+
e = e.touches[0];
|
187 |
+
}
|
188 |
+
this.prevX = e.pageX;
|
189 |
+
}
|
190 |
+
});
|
191 |
+
scroll_x_container.addEventListener(mouseup, function (e) {
|
192 |
+
if (this.scrollbar_x && e.target === this.scrollbar_x) {
|
193 |
+
this.prevX = null;
|
194 |
+
}
|
195 |
+
this.prevX = null;
|
196 |
+
});
|
197 |
+
|
198 |
+
scroll_x_container.addEventListener(mousemove, function (e) {
|
199 |
+
if (this.scrollbar_x && e.target === this.scrollbar_x) {
|
200 |
+
if (isMobile()) {
|
201 |
+
e = e.touches[0];
|
202 |
+
}
|
203 |
+
if (this.prevX) {
|
204 |
+
offset = (e.pageX - this.prevX) * this.ratio_x;
|
205 |
+
this.workshop.scrollLeft = this.workshop.scrollLeft + offset;
|
206 |
+
scrollbar_left_x = this.scrollbar_x.offsetLeft + (e.pageX - this.prevX);
|
207 |
+
temp_x = this.scrollWidth - scrollbar_left_x - this.scrollbar_x.clientWidth;
|
208 |
+
if (temp_x >= 0 && temp_x <= (this.scrollWidth - this.scrollbar_x.clientWidth)) {
|
209 |
+
this.scrollbar_x.style.left = scrollbar_left_x + 'px';
|
210 |
+
this.prevX = e.pageX;
|
211 |
+
}
|
212 |
+
}
|
213 |
+
}
|
214 |
+
if (!isMobile()) {
|
215 |
+
e.preventDefault();
|
216 |
+
}
|
217 |
+
});
|
218 |
+
|
219 |
+
}
|
220 |
+
|
221 |
+
window['move_nodes'] = function(node1, node2, selectors){
|
222 |
+
var children = node1.querySelectorAll(selectors);
|
223 |
+
for (var i = 0; i < children.length; i++) {
|
224 |
+
node2.appendChild(children[i]);
|
225 |
+
}
|
226 |
+
}
|
227 |
+
|
228 |
+
function get_time(){
|
229 |
+
var myDate = new Date();
|
230 |
+
var Y = myDate.getFullYear();
|
231 |
+
var M = myDate.getMonth() + 1;
|
232 |
+
var D = myDate.getDate();
|
233 |
+
var H = myDate.getHours();
|
234 |
+
var i = myDate.getMinutes();
|
235 |
+
var s = myDate.getSeconds();
|
236 |
+
if(M < 10){M = '0' + M;}
|
237 |
+
if(D < 10){D = '0' + D;}
|
238 |
+
if(H < 10){H = '0' + H;}
|
239 |
+
if(i < 10){i = '0' + i;}
|
240 |
+
if(s < 10){s = '0' +s;}
|
241 |
+
var nowTime = Y+'-'+M+'-'+D+' '+H+':'+i+':'+s;
|
242 |
+
return nowTime;
|
243 |
+
}
|
244 |
+
window['log_container'] = gradioEl.querySelectorAll('#log_container')[0];
|
245 |
+
window['put_log'] = function(log_info) {
|
246 |
+
if (window.location.href.indexOf(':7860') < 0) {return;}
|
247 |
+
window['log_container'].innerHTML += '<br>';
|
248 |
+
window['log_container'].innerHTML += get_time() + '-' + log_info;
|
249 |
+
}
|
250 |
+
|
251 |
+
window['doCheckCanvas'] = 0;
|
252 |
+
window['checkCanvas'] = function checkCanvas() {
|
253 |
+
try {
|
254 |
+
var workshop = window['gradioEl'].querySelectorAll('#image_upload [data-testid="image"] > div >div')[0];
|
255 |
+
if (workshop) {
|
256 |
+
var canvas = workshop.querySelectorAll('canvas');
|
257 |
+
if (canvas.length === 5) {
|
258 |
+
if (window['doCheckCanvas'] === 0) {
|
259 |
+
window['put_log']('_0_' + window['doCheckCanvas']);
|
260 |
+
|
261 |
+
window['doCheckCanvas'] = 1;
|
262 |
+
|
263 |
+
var work_layer = document.createElement('div');
|
264 |
+
var css_workshop = "width: 100%;height: 100%;padding: 0rem;box-sizing: border-box;overflow: hidden;position: relative;white-space:nowrap;z-index:45;";
|
265 |
+
workshop.insertBefore(work_layer, canvas[0]);
|
266 |
+
work_layer.style.cssText = css_workshop;
|
267 |
+
work_layer.id = 'work_layer';
|
268 |
+
work_layer.style.display = 'block';
|
269 |
+
|
270 |
+
window['put_log']('_1_' + window['doCheckCanvas'] + '/' + canvas[0].style.cssText);
|
271 |
+
|
272 |
+
setTimeout(function(){
|
273 |
+
window['put_log']('_2_' + window['doCheckCanvas']);
|
274 |
+
window['move_nodes'](workshop, work_layer, 'canvas');
|
275 |
+
window['put_log']('_3_' + window['doCheckCanvas']);
|
276 |
+
window['start_workshop'](work_layer);
|
277 |
+
window['put_log']('_4_' + window['doCheckCanvas']);
|
278 |
+
setTimeout(function(){
|
279 |
+
var image_upload = window['gradioEl'].querySelectorAll('#image_upload')[0];
|
280 |
+
var btns = image_upload.querySelectorAll('button');
|
281 |
+
window['put_log']('_5_' + btns.length);
|
282 |
+
if (btns.length == 3) {
|
283 |
+
window['put_log']('_6_' + btns.length);
|
284 |
+
btns[0].click();
|
285 |
+
}
|
286 |
+
}, 100);
|
287 |
+
}, 200);
|
288 |
+
|
289 |
+
return;
|
290 |
+
}
|
291 |
+
} else {
|
292 |
+
window['log_container'].innerHTML = '';
|
293 |
+
|
294 |
+
window['doCheckCanvas'] = 0;
|
295 |
+
var scrollbar_x = window['gradioEl'].querySelector('#scrollbar_x');
|
296 |
+
if (scrollbar_x) {
|
297 |
+
scrollbar_x.parentNode.removeChild(scrollbar_x);
|
298 |
+
}
|
299 |
+
}
|
300 |
+
} else {
|
301 |
+
window['log_container'].innerHTML = '';
|
302 |
+
|
303 |
+
window['doCheckCanvas'] = 0;
|
304 |
+
var scrollbar_x = window['gradioEl'].querySelector('#scrollbar_x');
|
305 |
+
if (scrollbar_x) {
|
306 |
+
scrollbar_x.parentNode.removeChild(scrollbar_x);
|
307 |
+
}
|
308 |
+
}
|
309 |
+
} catch(e) {
|
310 |
+
}
|
311 |
+
}
|
312 |
+
window['checkCanvas_interval'] = window.setInterval("window.checkCanvas()", 100);
|
313 |
+
}"""
|
314 |
+
|
315 |
+
download_img = """async() => {
|
316 |
+
Date.prototype.Format = function (fmt) {
|
317 |
+
var o = {
|
318 |
+
"M+": this.getMonth() + 1,
|
319 |
+
"d+": this.getDate(),
|
320 |
+
"h+": this.getHours(),
|
321 |
+
"m+": this.getMinutes(),
|
322 |
+
"s+": this.getSeconds(),
|
323 |
+
"q+": Math.floor((this.getMonth() + 3) / 3),
|
324 |
+
"S": this.getMilliseconds()
|
325 |
+
};
|
326 |
+
if (/(y+)/.test(fmt))
|
327 |
+
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
328 |
+
for (var k in o)
|
329 |
+
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
330 |
+
return fmt;
|
331 |
+
}
|
332 |
+
|
333 |
+
var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
|
334 |
+
if (!gradioEl) {
|
335 |
+
gradioEl = document.querySelector('body > gradio-app');
|
336 |
+
}
|
337 |
+
const out_image = gradioEl.querySelectorAll('#image_output img')[0];
|
338 |
+
if (out_image) {
|
339 |
+
var x=new XMLHttpRequest();
|
340 |
+
x.open("GET", out_image.src, true);
|
341 |
+
x.responseType = 'blob';
|
342 |
+
x.onload = function(e){
|
343 |
+
var url = window.URL.createObjectURL(x.response)
|
344 |
+
var a = document.createElement('a');
|
345 |
+
a.href = url;
|
346 |
+
a.download = (new Date()).Format("yyyyMMdd_hhmmss");
|
347 |
+
a.click();
|
348 |
+
}
|
349 |
+
x.send();
|
350 |
+
}
|
351 |
+
}"""
|