utils/gradio_utils.py

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>
"""