yizhangliu commited on
Commit
04b15fa
1 Parent(s): c4a39f9

Upload utils.py

Browse files
Files changed (1) hide show
  1. utils.py +351 -0
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
+ }"""