app.py

import gradio as gr
from pops import PopsPipelines
import spaces

BLOCK_WIDTH = 250
BLOCK_HEIGHT = 270
FONT_SIZE = 3.5

pops_pipelines = PopsPipelines()

@spaces.GPU
def run_equation_1(object_path, text, texture_path):
    image = pops_pipelines.run_instruct_texture(object_path, text, texture_path)
    return image

@spaces.GPU
def run_equation_2(object_path, texture_path, scene_path):
    image = pops_pipelines.run_texture_scene(object_path, texture_path, scene_path)
    return image

with gr.Blocks(css='style.css') as demo:
    gr.HTML('''<h1>p<span class="o-pops">O</span>ps: Photo-Inspired Diffusion <span class="o-operators">O</span>perators</h1>''')
    gr.HTML('<div style="text-align: center;"><h3><a href="https://popspaper.github.io/pOps/">https://popspaper.github.io/pOps/</a></h3></div>')
    gr.HTML(
        '<div style="text-align: center;">Our method learns operators that are applied directly in the image embedding space, resulting in a variety of semantic operations that can then be realized as images using an image diffusion model.</div>')
    with gr.Row(equal_height=True,elem_classes='justified-element'):
        with gr.Column(scale=0,min_width=BLOCK_WIDTH):
            object_path_eq_1 = gr.Image(label="Upload object image", type="filepath",width=BLOCK_WIDTH,height=BLOCK_HEIGHT)
        with gr.Column(scale=0,min_width=50):
            gr.HTML(f'''<div  style="justify-content: center; align-items: center;min-height:{BLOCK_HEIGHT}px"><span class="vertical-center" style="color:#82cf8e;font-size:{FONT_SIZE}rem;font-family:'Google Sans', sans-serif";>O</span></div>''')
        with gr.Column(scale=0,min_width=200):
            with gr.Group(elem_classes='instruct'):
                text_eq_1 = gr.Textbox(value="",label="Enter adjective",max_lines=1,placeholder='e.g. melting, shiny, spiky',elem_classes='vertical-center')
        with gr.Column(scale=0,min_width=50):
            gr.HTML(f'''<div  style="justify-content: center; align-items: center;min-height:{BLOCK_HEIGHT}px"><span class="vertical-center" style="color:#efa241;font-size:{FONT_SIZE}rem;font-family:'Google Sans', sans-serif";>O</span></div>''')
        with gr.Column(scale=0,min_width=BLOCK_WIDTH):
            texture_path_eq_1 = gr.Image(label="Upload texture image", type="filepath",width=BLOCK_WIDTH,height=BLOCK_HEIGHT)
        with gr.Column(scale=0,min_width=50):
            gr.HTML(f'''<div  style="justify-content: center; align-items: center;min-height:{BLOCK_HEIGHT}px"><span class="vertical-center" style="color:#efa241;font-size:{FONT_SIZE}rem;font-family:'Google Sans', sans-serif";>=</span></div>''')
        with gr.Column(scale=0,min_width=BLOCK_WIDTH):
            output_eq_1 = gr.Image(label="Output",width=BLOCK_WIDTH,height=BLOCK_HEIGHT)
    with gr.Row(equal_height=True, elem_classes='justified-element'):
        run_button_eq_1 = gr.Button("Run Instruct and Texture Equation",elem_classes='small-elem')
        run_button_eq_1.click(fn=run_equation_1,inputs=[object_path_eq_1, text_eq_1, texture_path_eq_1],outputs=[output_eq_1])
    with gr.Row(equal_height=True, elem_classes='justified-element'):
        pass
    with gr.Row(equal_height=True,elem_classes='justified-element'):
        with gr.Column(scale=0,min_width=BLOCK_WIDTH):
            object_path_eq_2 = gr.Image(label="Upload object image", type="filepath",width=BLOCK_WIDTH,height=BLOCK_HEIGHT)
        with gr.Column(scale=0,min_width=50):
            gr.HTML(f'''<div  style="justify-content: center; align-items: center;min-height:{BLOCK_HEIGHT}px"><span class="vertical-center" style="color:#efa241;font-size:{FONT_SIZE}rem;font-family:'Google Sans', sans-serif";>O</span></div>''')
        with gr.Column(scale=0,min_width=BLOCK_WIDTH):
            texture_path_eq_2 = gr.Image(label="Upload texture image", type="filepath",width=BLOCK_WIDTH,height=BLOCK_HEIGHT)
            # texture_path = gr.Image(label="Upload texture image", type="filepath",width=BLOCK_WIDTH,height=BLOCK_HEIGHT)
        with gr.Column(scale=0,min_width=50):
            gr.HTML(f'''<div  style="justify-content: center; align-items: center;min-height:{BLOCK_HEIGHT}px"><span class="vertical-center" style="color:#A085FF;font-size:{FONT_SIZE}rem;font-family:'Google Sans', sans-serif";>O</span></div>''')
        with gr.Column(scale=0,min_width=BLOCK_WIDTH):
            scene_path_eq_2 = gr.Image(label="Upload scene image", type="filepath",width=BLOCK_WIDTH,height=BLOCK_HEIGHT)
        with gr.Column(scale=0,min_width=50):
            gr.HTML(f'''<div  style="justify-content: center; align-items: center;min-height:{BLOCK_HEIGHT}px"><span class="vertical-center" style="color:#A085FF;font-size:{FONT_SIZE}rem;font-family:'Google Sans', sans-serif";>=</span></div>''')
        with gr.Column(scale=0,min_width=BLOCK_WIDTH):
            output_eq_2 = gr.Image(label="Output",width=BLOCK_WIDTH,height=BLOCK_HEIGHT)
    with gr.Row(equal_height=True, elem_classes='justified-element'):
        run_button_eq_2 = gr.Button("Run Texture and Scene Equation",elem_classes='small-elem')
        run_button_eq_2.click(fn=run_equation_2,inputs=[object_path_eq_2, texture_path_eq_2, scene_path_eq_2],outputs=[output_eq_2])


    with gr.Row(equal_height=True, elem_classes='justified-element'):
        with gr.Column(scale=1):
            examples = [
                ['inputs/birmingham-museums-trust-q2OwlfXAYfo-unsplash.jpg', 'enormous',
                 'inputs/mihaly-varga-AQFfdEY3X4Q-unsplash.jpg'],
                ['inputs/r-n-tyfqOL1FAQc-unsplash.jpg', 'group', 'inputs/george-webster-p1VZ5IbT2Tg-unsplash.jpg'],
            ]
            gr.Examples(examples=examples,
                        inputs=[object_path_eq_1, text_eq_1, texture_path_eq_1],
                        outputs=[output_eq_1],
                        fn=run_equation_1,
                        cache_examples=False)
            examples_2 = [
                ['inputs/hannah-pemberton-3d82e5_ylGo-unsplash.jpg', 'inputs/engin-akyurt-aXVro7lQyUM-unsplash.jpg', 'inputs/alexandra-zelena-phskyemu_c4-unsplash.jpg'],
            ]
            gr.Examples(examples=examples_2,
                        inputs=[object_path_eq_2, texture_path_eq_2, scene_path_eq_2],
                        outputs=[output_eq_2],
                        fn=run_equation_2,
                        cache_examples=False)
        with gr.Column(scale=1):
            gr.HTML('''
                    <div class="column">
                    <h2 class="">🎶  Learn More  🎶</h2>
                    <div class="">
                              <div height="100%">
                                <video src="https://github.com/pOpsPaper/pOps/raw/gh-pages/static/figures/teaser_video.mp4" controls ></video>
                            </div>
                    </div>
                    <div class=""><small>
                      Audio track for the teaser video was generated with the help of <a href="https://suno.com/">suno</a>.
                    </small>
                    </div>

            ''')

demo.queue().launch()