Spaces:
Running
Running
yizhangliu
commited on
Commit
·
12416bd
1
Parent(s):
ccdb134
Update app.py
Browse files
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 |
-
|
211 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
212 |
}
|
213 |
-
|
214 |
-
|
|
|
|
|
|
|
|
|
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')
|