Spaces:
Sleeping
Sleeping
import gradio as gr | |
def set_visible_true(): | |
return gr.update(visible=True) | |
def set_visible_false(): | |
return gr.update(visible=False) | |
# HTML_header = f""" | |
# <style> | |
# {CSS_main} | |
# </style> | |
# <div style="text-align: center; max-width: 700px; margin: 0 auto;"> | |
# <div style=" display: inline-flex; align-items: center; gap: 0.8rem; font-size: 1.75rem;"> | |
# <h1 style="font-weight: 900; margin-bottom: 7px; margin-top: 5px;"> | |
# Zero-shot Image-to-Image Translation | |
# </h1> | |
# </div> | |
# <p style="margin-bottom: 10px; font-size: 94%"> | |
# This is the demo for <a href="https://pix2pixzero.github.io/" target="_blank">pix2pix-zero</a>. | |
# Please visit our <a href="https://pix2pixzero.github.io/"> website</a> and <a href="https://github.com/pix2pixzero/pix2pix-zero" target="_blank">github</a> for more details. | |
# </p> | |
# <p style="margin-bottom: 10px; font-size: 94%"> | |
# pix2pix-zero is a diffusion-based image-to-image approach that allows users to specify the edit direction on-the-fly | |
# (e.g., cat to dog). Our method can directly use pre-trained text-to-image diffusion models, such as Stable Diffusion, | |
# for editing real and synthetic images while preserving the input image's structure. Our method is training-free and prompt-free, | |
# as it requires neither manual text prompting for each input image nor costly fine-tuning for each task. | |
# </p> | |
# </div> | |
# """ | |
CSS_main = """ | |
body { | |
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | |
font-weight:300; | |
font-size:18px; | |
margin-left: auto; | |
margin-right: auto; | |
padding-left: 10px; | |
padding-right: 10px; | |
width: 800px; | |
} | |
h1 { | |
font-size:32px; | |
font-weight:300; | |
text-align: center; | |
} | |
h2 { | |
font-size:32px; | |
font-weight:300; | |
text-align: center; | |
} | |
#lbl_gallery_input{ | |
font-family: 'Helvetica', 'Arial', sans-serif; | |
text-align: center; | |
color: #fff; | |
font-size: 28px; | |
display: inline | |
} | |
#lbl_gallery_comparision{ | |
font-family: 'Helvetica', 'Arial', sans-serif; | |
text-align: center; | |
color: #fff; | |
font-size: 28px; | |
} | |
.disclaimerbox { | |
background-color: #eee; | |
border: 1px solid #eeeeee; | |
border-radius: 10px ; | |
-moz-border-radius: 10px ; | |
-webkit-border-radius: 10px ; | |
padding: 20px; | |
} | |
video.header-vid { | |
height: 140px; | |
border: 1px solid black; | |
border-radius: 10px ; | |
-moz-border-radius: 10px ; | |
-webkit-border-radius: 10px ; | |
} | |
img.header-img { | |
height: 140px; | |
border: 1px solid black; | |
border-radius: 10px ; | |
-moz-border-radius: 10px ; | |
-webkit-border-radius: 10px ; | |
} | |
img.rounded { | |
border: 1px solid #eeeeee; | |
border-radius: 10px ; | |
-moz-border-radius: 10px ; | |
-webkit-border-radius: 10px ; | |
} | |
a:link | |
{ | |
color: #941120; | |
text-decoration: none; | |
} | |
a:visited | |
{ | |
color: #941120; | |
text-decoration: none; | |
} | |
a:hover { | |
color: #941120; | |
} | |
td.dl-link { | |
height: 160px; | |
text-align: center; | |
font-size: 22px; | |
} | |
.layered-paper-big { /* modified from: http://css-tricks.com/snippets/css/layered-paper/ */ | |
box-shadow: | |
0px 0px 1px 1px rgba(0,0,0,0.35), /* The top layer shadow */ | |
5px 5px 0 0px #fff, /* The second layer */ | |
5px 5px 1px 1px rgba(0,0,0,0.35), /* The second layer shadow */ | |
10px 10px 0 0px #fff, /* The third layer */ | |
10px 10px 1px 1px rgba(0,0,0,0.35), /* The third layer shadow */ | |
15px 15px 0 0px #fff, /* The fourth layer */ | |
15px 15px 1px 1px rgba(0,0,0,0.35), /* The fourth layer shadow */ | |
20px 20px 0 0px #fff, /* The fifth layer */ | |
20px 20px 1px 1px rgba(0,0,0,0.35), /* The fifth layer shadow */ | |
25px 25px 0 0px #fff, /* The fifth layer */ | |
25px 25px 1px 1px rgba(0,0,0,0.35); /* The fifth layer shadow */ | |
margin-left: 10px; | |
margin-right: 45px; | |
} | |
.paper-big { /* modified from: http://css-tricks.com/snippets/css/layered-paper/ */ | |
box-shadow: | |
0px 0px 1px 1px rgba(0,0,0,0.35); /* The top layer shadow */ | |
margin-left: 10px; | |
margin-right: 45px; | |
} | |
.layered-paper { /* modified from: http://css-tricks.com/snippets/css/layered-paper/ */ | |
box-shadow: | |
0px 0px 1px 1px rgba(0,0,0,0.35), /* The top layer shadow */ | |
5px 5px 0 0px #fff, /* The second layer */ | |
5px 5px 1px 1px rgba(0,0,0,0.35), /* The second layer shadow */ | |
10px 10px 0 0px #fff, /* The third layer */ | |
10px 10px 1px 1px rgba(0,0,0,0.35); /* The third layer shadow */ | |
margin-top: 5px; | |
margin-left: 10px; | |
margin-right: 30px; | |
margin-bottom: 5px; | |
} | |
.vert-cent { | |
position: relative; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
hr | |
{ | |
border: 0; | |
height: 1px; | |
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); | |
} | |
.card { | |
/* width: 130px; | |
height: 195px; | |
width: 1px; | |
height: 1px; */ | |
position: relative; | |
display: inline-block; | |
/* margin: 50px; */ | |
} | |
.card .img-top { | |
display: none; | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: 99; | |
} | |
.card:hover .img-top { | |
display: inline; | |
} | |
details { | |
user-select: none; | |
} | |
details>summary span.icon { | |
width: 24px; | |
height: 24px; | |
transition: all 0.3s; | |
margin-left: auto; | |
} | |
details[open] summary span.icon { | |
transform: rotate(180deg); | |
} | |
summary { | |
display: flex; | |
cursor: pointer; | |
} | |
summary::-webkit-details-marker { | |
display: none; | |
} | |
ul { | |
display: table; | |
margin: 0 auto; | |
text-align: left; | |
} | |
.dark { | |
padding: 1em 2em; | |
background-color: #333; | |
box-shadow: 3px 3px 3px #333; | |
border: 1px #333; | |
} | |
.column { | |
float: left; | |
width: 20%; | |
padding: 0.5%; | |
} | |
.galleryImg { | |
transition: opacity 0.3s; | |
-webkit-transition: opacity 0.3s; | |
filter: grayscale(100%); | |
/* filter: blur(2px); */ | |
-webkit-transition : -webkit-filter 250ms linear; | |
/* opacity: 0.5; */ | |
cursor: pointer; | |
} | |
.selected { | |
/* outline: 100px solid var(--hover-background) !important; */ | |
/* outline-offset: -100px; */ | |
filter: grayscale(0%); | |
-webkit-transition : -webkit-filter 250ms linear; | |
/*opacity: 1.0 !important; */ | |
} | |
.galleryImg:hover { | |
filter: grayscale(0%); | |
-webkit-transition : -webkit-filter 250ms linear; | |
} | |
.row { | |
margin-bottom: 1em; | |
padding: 0px 1em; | |
} | |
/* Clear floats after the columns */ | |
.row:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
/* The expanding image container */ | |
#gallery { | |
position: relative; | |
/*display: none;*/ | |
} | |
#section_comparison{ | |
position: relative; | |
width: 100%; | |
height: max-content; | |
} | |
/* SLIDER | |
-------------------------------------------------- */ | |
.slider-container { | |
position: relative; | |
height: 384px; | |
width: 512px; | |
cursor: grab; | |
overflow: hidden; | |
margin: auto; | |
} | |
.slider-after { | |
display: block; | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
} | |
.slider-before { | |
display: block; | |
position: absolute; | |
top: 0; | |
/* right: 0; */ | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
z-index: 15; | |
overflow: hidden; | |
} | |
.slider-before-inset { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
} | |
.slider-after img, | |
.slider-before img { | |
object-fit: cover; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
object-position: 50% 50%; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
-webkit-user-select: none; | |
-khtml-user-select: none; | |
-moz-user-select: none; | |
-o-user-select: none; | |
user-select: none; | |
} | |
#lbl_inset_left{ | |
text-align: center; | |
position: absolute; | |
top: 384px; | |
width: 150px; | |
left: calc(50% - 256px); | |
z-index: 11; | |
font-size: 16px; | |
color: #fff; | |
margin: 10px; | |
} | |
.inset-before { | |
position: absolute; | |
width: 150px; | |
height: 150px; | |
box-shadow: 3px 3px 3px #333; | |
border: 1px #333; | |
border-style: solid; | |
z-index: 16; | |
top: 410px; | |
left: calc(50% - 256px); | |
margin: 10px; | |
font-size: 1em; | |
background-repeat: no-repeat; | |
pointer-events: none; | |
} | |
#lbl_inset_right{ | |
text-align: center; | |
position: absolute; | |
top: 384px; | |
width: 150px; | |
right: calc(50% - 256px); | |
z-index: 11; | |
font-size: 16px; | |
color: #fff; | |
margin: 10px; | |
} | |
.inset-after { | |
position: absolute; | |
width: 150px; | |
height: 150px; | |
box-shadow: 3px 3px 3px #333; | |
border: 1px #333; | |
border-style: solid; | |
z-index: 16; | |
top: 410px; | |
right: calc(50% - 256px); | |
margin: 10px; | |
font-size: 1em; | |
background-repeat: no-repeat; | |
pointer-events: none; | |
} | |
#lbl_inset_input{ | |
text-align: center; | |
position: absolute; | |
top: 384px; | |
width: 150px; | |
left: calc(50% - 256px + 150px + 20px); | |
z-index: 11; | |
font-size: 16px; | |
color: #fff; | |
margin: 10px; | |
} | |
.inset-target { | |
position: absolute; | |
width: 150px; | |
height: 150px; | |
box-shadow: 3px 3px 3px #333; | |
border: 1px #333; | |
border-style: solid; | |
z-index: 16; | |
top: 410px; | |
right: calc(50% - 256px + 150px + 20px); | |
margin: 10px; | |
font-size: 1em; | |
background-repeat: no-repeat; | |
pointer-events: none; | |
} | |
.slider-beforePosition { | |
background: #121212; | |
color: #fff; | |
left: 0; | |
pointer-events: none; | |
border-radius: 0.2rem; | |
padding: 2px 10px; | |
} | |
.slider-afterPosition { | |
background: #121212; | |
color: #fff; | |
right: 0; | |
pointer-events: none; | |
border-radius: 0.2rem; | |
padding: 2px 10px; | |
} | |
.beforeLabel { | |
position: absolute; | |
top: 0; | |
margin: 1rem; | |
font-size: 1em; | |
-webkit-user-select: none; | |
-khtml-user-select: none; | |
-moz-user-select: none; | |
-o-user-select: none; | |
user-select: none; | |
} | |
.afterLabel { | |
position: absolute; | |
top: 0; | |
margin: 1rem; | |
font-size: 1em; | |
-webkit-user-select: none; | |
-khtml-user-select: none; | |
-moz-user-select: none; | |
-o-user-select: none; | |
user-select: none; | |
} | |
.slider-handle { | |
height: 41px; | |
width: 41px; | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
margin-left: -20px; | |
margin-top: -21px; | |
border: 2px solid #fff; | |
border-radius: 1000px; | |
z-index: 20; | |
pointer-events: none; | |
box-shadow: 0 0 10px rgb(12, 12, 12); | |
} | |
.handle-left-arrow, | |
.handle-right-arrow { | |
width: 0; | |
height: 0; | |
border: 6px inset transparent; | |
position: absolute; | |
top: 50%; | |
margin-top: -6px; | |
} | |
.handle-left-arrow { | |
border-right: 6px solid #fff; | |
left: 50%; | |
margin-left: -17px; | |
} | |
.handle-right-arrow { | |
border-left: 6px solid #fff; | |
right: 50%; | |
margin-right: -17px; | |
} | |
.slider-handle::before { | |
bottom: 50%; | |
margin-bottom: 20px; | |
box-shadow: 0 0 10px rgb(12, 12, 12); | |
} | |
.slider-handle::after { | |
top: 50%; | |
margin-top: 20.5px; | |
box-shadow: 0 0 5px rgb(12, 12, 12); | |
} | |
.slider-handle::before, | |
.slider-handle::after { | |
content: " "; | |
display: block; | |
width: 2px; | |
background: #fff; | |
height: 9999px; | |
position: absolute; | |
left: 50%; | |
margin-left: -1.5px; | |
} | |
/* | |
------------------------------------------------- | |
The editing results shown below inversion results | |
------------------------------------------------- | |
*/ | |
.edit_labels{ | |
font-weight:500; | |
font-size: 24px; | |
color: #fff; | |
height: 20px; | |
margin-left: 20px; | |
position: relative; | |
top: 20px; | |
} | |
.open > a:hover { | |
color: #555; | |
background-color: red; | |
} | |
#directions { padding-top:30; padding-bottom:0; margin-bottom: 0px; height: 20px; } | |
#custom_task { padding-top:0; padding-bottom:0; margin-bottom: 0px; height: 20px; } | |
#slider_ddim {accent-color: #941120;} | |
#slider_ddim::-webkit-slider-thumb {background-color: #941120;} | |
#slider_xa {accent-color: #941120;} | |
#slider_xa::-webkit-slider-thumb {background-color: #941120;} | |
#slider_edit_mul {accent-color: #941120;} | |
#slider_edit_mul::-webkit-slider-thumb {background-color: #941120;} | |
#input_image [data-testid="image"]{ | |
height: unset; | |
} | |
#input_image_synth [data-testid="image"]{ | |
height: unset; | |
} | |
""" | |
HTML_header = f""" | |
<body> | |
<center> | |
<span style="font-size:36px">Zero-shot Image-to-Image Translation</span> | |
<table align=center> | |
<tr> | |
<td align=center> | |
<center> | |
<span style="font-size:24px; margin-left: 0px;"><a href='https://pix2pixzero.github.io/'>[Website]</a></span> | |
<span style="font-size:24px; margin-left: 20px;"><a href='https://github.com/pix2pixzero/pix2pix-zero'>[Code]</a></span> | |
</center> | |
</td> | |
</tr> | |
</table> | |
</center> | |
<center> | |
<div align=center> | |
<p align=left> | |
This is a demo for <span style="font-weight: bold;">pix2pix-zero</span>, a diffusion-based image-to-image approach that allows users to | |
specify the edit direction on-the-fly (e.g., cat to dog). Our method can directly use pre-trained text-to-image diffusion models, such as Stable Diffusion, for editing real and synthetic images while preserving the input image's structure. Our method is training-free and prompt-free, as it requires neither manual text prompting for each input image nor costly fine-tuning for each task. | |
<br> | |
<span style="font-weight: 800;">TL;DR:</span> <span style=" color: #941120;"> no finetuning</span> required; <span style=" color: #941120;"> no text input</span> needed; input <span style=" color: #941120;"> structure preserved</span>. | |
</p> | |
</div> | |
</center> | |
<hr> | |
</body> | |
""" | |
HTML_input_header = f""" | |
<p style="font-size:150%; padding: 0px"> | |
<span font-weight: 800; style=" color: #941120;"> Step 1: </span> select a real input image. | |
</p> | |
""" | |
HTML_middle_header = f""" | |
<p style="font-size:150%;"> | |
<span font-weight: 800; style=" color: #941120;"> Step 2: </span> select the editing options. | |
</p> | |
""" | |
HTML_output_header = f""" | |
<p style="font-size:150%;"> | |
<span font-weight: 800; style=" color: #941120;"> Step 3: </span> translated image! | |
</p> | |
""" |