yizhangliu commited on
Commit
12416bd
·
1 Parent(s): ccdb134

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +33 -36
app.py CHANGED
@@ -196,40 +196,40 @@ def predict(input, img_enhancer):
196
 
197
 
198
  css = '''
199
- .container {max-width: 100%;margin: auto;padding-top: 1.5rem}
200
- #begin-btn {color: blue; font-size:20px;}
201
- #work-container {min-width: min(160px, 100%) !important;flex-grow: 0 !important}
202
- #image_output{margin: 0 auto; text-align: center;width:640px}
203
- #erase-container{margin: 0 auto; text-align: center;width:150px;border-width:5px;border-color:#2c9748}
204
- #enhancer-checkbox{width:520px}
205
- #enhancer-tip{width:450px}
206
- #enhancer-tip-div{text-align: left}
207
- #prompt-container{margin: 0 auto; text-align: center;width:fit-content;min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}
208
- #image_upload .touch-none{display: flex}
209
- @keyframes spin {
210
- from {
211
- transform: rotate(0deg);
 
 
 
 
 
 
 
 
 
 
 
 
 
212
  }
213
- to {
214
- transform: rotate(360deg);
 
 
 
 
215
  }
216
- }
217
- #share-btn-container {
218
- 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;
219
- }
220
- #share-btn {
221
- 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;
222
- }
223
- #share-btn * {
224
- all: unset;
225
- }
226
- #share-btn-container div:nth-child(-n+2){
227
- width: auto !important;
228
- min-height: 0px !important;
229
- }
230
- #share-btn-container .wrap {
231
- display: none !important;
232
- }
233
  '''
234
  set_page_elements = """async() => {
235
  function isMobile() {
@@ -239,7 +239,6 @@ set_page_elements = """async() => {
239
  return false;
240
  }
241
  }
242
-
243
  var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
244
  if (!gradioEl) {
245
  gradioEl = document.querySelector('body > gradio-app');
@@ -250,7 +249,6 @@ set_page_elements = """async() => {
250
  const image_output = gradioEl.querySelectorAll('#image_output')[0];
251
  const data_image = gradioEl.querySelectorAll('#image_upload [data-testid="image"]')[0];
252
  const data_image_div = gradioEl.querySelectorAll('#image_upload [data-testid="image"] > div')[0];
253
-
254
  if (isMobile()) {
255
  const group1_width = group1.offsetWidth;
256
  image_upload.setAttribute('style', 'width:' + (group1_width - 13*2) + 'px; min-height:none;');
@@ -269,7 +267,6 @@ set_page_elements = """async() => {
269
  }
270
  group1.style.display = "none";
271
  group2.style.display = "block";
272
-
273
  }"""
274
 
275
  image_blocks = gr.Blocks(css=css, title='Image Cleaner')
@@ -326,4 +323,4 @@ with image_blocks as demo:
326
 
327
  begin_button.click(fn=None, inputs=[], outputs=[group_1, group_2], _js=set_page_elements)
328
 
329
- image_blocks.launch()
 
196
 
197
 
198
  css = '''
199
+ .container {max-width: 100%;margin: auto;padding-top: 1.5rem}
200
+ #begin-btn {color: blue; font-size:20px;}
201
+ #work-container {min-width: min(160px, 100%) !important;flex-grow: 0 !important}
202
+ #image_output{margin: 0 auto; text-align: center;width:640px}
203
+ #erase-container{margin: 0 auto; text-align: center;width:150px;border-width:5px;border-color:#2c9748}
204
+ #enhancer-checkbox{width:520px}
205
+ #enhancer-tip{width:450px}
206
+ #enhancer-tip-div{text-align: left}
207
+ #prompt-container{margin: 0 auto; text-align: center;width:fit-content;min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}
208
+ #image_upload .touch-none{display: flex}
209
+ @keyframes spin {
210
+ from {
211
+ transform: rotate(0deg);
212
+ }
213
+ to {
214
+ transform: rotate(360deg);
215
+ }
216
+ }
217
+ #share-btn-container {
218
+ 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;
219
+ }
220
+ #share-btn {
221
+ 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;
222
+ }
223
+ #share-btn * {
224
+ all: unset;
225
  }
226
+ #share-btn-container div:nth-child(-n+2){
227
+ width: auto !important;
228
+ min-height: 0px !important;
229
+ }
230
+ #share-btn-container .wrap {
231
+ display: none !important;
232
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
233
  '''
234
  set_page_elements = """async() => {
235
  function isMobile() {
 
239
  return false;
240
  }
241
  }
 
242
  var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
243
  if (!gradioEl) {
244
  gradioEl = document.querySelector('body > gradio-app');
 
249
  const image_output = gradioEl.querySelectorAll('#image_output')[0];
250
  const data_image = gradioEl.querySelectorAll('#image_upload [data-testid="image"]')[0];
251
  const data_image_div = gradioEl.querySelectorAll('#image_upload [data-testid="image"] > div')[0];
 
252
  if (isMobile()) {
253
  const group1_width = group1.offsetWidth;
254
  image_upload.setAttribute('style', 'width:' + (group1_width - 13*2) + 'px; min-height:none;');
 
267
  }
268
  group1.style.display = "none";
269
  group2.style.display = "block";
 
270
  }"""
271
 
272
  image_blocks = gr.Blocks(css=css, title='Image Cleaner')
 
323
 
324
  begin_button.click(fn=None, inputs=[], outputs=[group_1, group_2], _js=set_page_elements)
325
 
326
+ image_blocks.launch(server_name='0.0.0.0')