serve/gradio_web_i2s.py

import json
from functools import partial

from .utils import *
from .vote_utils import (
    upvote_last_response_i2s as upvote_last_response,
    downvote_last_response_i2s as downvote_last_response,
    flag_last_response_i2s as flag_last_response,
    leftvote_last_response_i2s_anony as leftvote_last_response_anony,
    rightvote_last_response_i2s_anony as rightvote_last_response_anony,
    tievote_last_response_i2s_anony as tievote_last_response_anony,
    bothbad_vote_last_response_i2s_anony as bothbad_vote_last_response_anony,
    leftvote_last_response_i2s_named as leftvote_last_response_named,
    rightvote_last_response_i2s_named as rightvote_last_response_named,
    tievote_last_response_i2s_named as tievote_last_response_named,
    bothbad_vote_last_response_i2s_named as bothbad_vote_last_response_named,
    share_click_i2s_multi as share_click,
    share_js
)
from .inference import(
    sample_i2s_model as sample_model,
    sample_image,
    sample_image_side_by_side,
    generate_i2s,
    generate_i2s_multi,
    generate_i2s_multi_annoy
)


def build_i2s_ui_side_by_side_anony(models):
    notice_markdown = """
# ⚔️  GenAI-Arena ⚔️ : Benchmarking Image-to-3D generative models 
## 📜 Rules
- Upload image to two anonymous models in same area and vote for the better one!
- When the results are ready, click the button below to vote.
- Vote won't be counted if model identity is revealed during conversation.
- Click "Clear" to start a new round.

## 🏆 Arena Elo 
Find out who is the 🥇conditional image generation models! More models are going to be supported.

## 👇 Generating now!

"""
    model_list = models.get_i2s_models()
    gen_func = partial(generate_i2s_multi_annoy, models.inference_parallel_anony, models.render_parallel)

    state_0 = gr.State()
    state_1 = gr.State()

    gr.Markdown(notice_markdown, elem_id="notice_markdown")
    model_str = gr.Markdown(str(model_list), visible=False, elem_id="moedl list string")

    with gr.Group(elem_id="share-region-anony"):
        with gr.Accordion("🔍 Expand to see all Arena players", open=False):
            model_description_md = get_model_description_md(model_list)
            gr.Markdown(model_description_md, elem_id="model_description_markdown")

        with gr.Row():    
            with gr.Column():
                normal_left = gr.Image(width=512, label = "Model A", 
                    interactive=False, show_download_button=True)
                rgb_left = gr.Image(width=512, label = "Model A", 
                    interactive=False, show_download_button=True)
            with gr.Column():
                normal_right = gr.Image(width=512, label = "Model B",
                    interactive=False, show_download_button=True,)
                rgb_right = gr.Image(width=512, label = "Model B",
                    interactive=False, show_download_button=True,)

        with gr.Row():
            with gr.Column():
                model_selector_left =gr.Markdown("", visible=False)
            with gr.Column():
                model_selector_right = gr.Markdown("", visible=False)
        with gr.Row():
            slow_warning = gr.Markdown("", elem_id="notice_markdown")

        with gr.Row(elem_id="Geometry Quality"):
            geo_md = gr.Markdown("Geometry Quality: ", visible=False, elem_id="evaldim_markdown")
            geo_leftvote_btn = gr.Button(
                value="👈  A is better", visible=False, interactive=False
            )
            geo_rightvote_btn = gr.Button(
                value="👉  B is better", visible=False, interactive=False
            )
            geo_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
            geo_bothbad_btn = gr.Button(
                value="👎  Both are bad", visible=False, interactive=False
            )

        with gr.Row(elem_id="Texture Quality"):
            text_md = gr.Markdown("Texture Quality: ", visible=False, elem_id="evaldim_markdown")
            text_leftvote_btn = gr.Button(
                value="👈  A is better", visible=False, interactive=False
            )
            text_rightvote_btn = gr.Button(
                value="👉  B is better", visible=False, interactive=False
            )
            text_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
            text_bothbad_btn = gr.Button(
                value="👎  Both are bad", visible=False, interactive=False
            )
        
        with gr.Row(elem_id="Alignment Quality"):
            align_md = gr.Markdown("Alignment Quality: ", visible=False, elem_id="evaldim_markdown")
            align_leftvote_btn = gr.Button(
                value="👈  A is better", visible=False, interactive=False
            )
            align_rightvote_btn = gr.Button(
                value="👉  B is better", visible=False, interactive=False
            )
            align_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
            align_bothbad_btn = gr.Button(
                value="👎  Both are bad", visible=False, interactive=False
            )

    with gr.Row():
        imagebox = gr.Image(
            width=512,
            show_label=False,
            visible=True,
            interactive=True,
            elem_id="input_box",
        )
        with gr.Column():
            sample_btn = gr.Button(value="🎲 Sample", variant="primary")
            send_btn = gr.Button(value="📤 Send", variant="primary")
            clear_btn = gr.Button(value="🗑️ Clear", interactive=False)
            regenerate_btn = gr.Button(value="🔄  Regenerate", interactive=False)
            share_btn = gr.Button(value="📷  Share")

    gr.Markdown(acknowledgment_md, elem_id="ack_markdown")


    geo_btn_list = [geo_leftvote_btn, geo_rightvote_btn, geo_tie_btn, geo_bothbad_btn]
    text_btn_list = [text_leftvote_btn, text_rightvote_btn, text_tie_btn, text_bothbad_btn]
    align_btn_list = [align_leftvote_btn, align_rightvote_btn, align_tie_btn, align_bothbad_btn]
    states = [state_0, state_1]
    model_selectors = [model_selector_left, model_selector_right]
    results = [normal_left, rgb_left, normal_right, rgb_right]

    for btn_list, dim_md in zip([geo_btn_list, text_btn_list, align_btn_list], 
                                [geo_md, text_md, align_md]):
        leftvote_btn, rightvote_btn, tie_btn, bothbad_btn = btn_list

        leftvote_btn.click(
            leftvote_last_response_anony,
            states + model_selectors + [dim_md],
            states + btn_list + model_selectors
        )
        rightvote_btn.click(
            rightvote_last_response_anony,
            states + model_selectors + [dim_md],
            states + btn_list + model_selectors
        )
        tie_btn.click(
            tievote_last_response_anony,
            states + model_selectors + [dim_md],
            states + btn_list + model_selectors
        )
        bothbad_btn.click(
            bothbad_vote_last_response_anony,
            states + model_selectors + [dim_md],
            states + btn_list + model_selectors
        )

    sample_btn.click(
        sample_image_side_by_side,
        states + model_selectors,
        states + [imagebox],
        api_name="sample_btn_anony"
    )

    imagebox.upload(
        reset_states_side_by_side_anony,
        states,
        states + model_selectors + geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn, geo_md, text_md, align_md]
    ).then(
        gen_func,
        states + [imagebox] + model_selectors,
        states + results + model_selectors,
        api_name="submit_btn_named"
    ).then(
        enable_mds,
        None,
        [geo_md, text_md, align_md]
    ).then(
        enable_buttons_side_by_side,
        None,
        geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    )

    send_btn.click(
        reset_states_side_by_side_anony,
        states,
        states + model_selectors + geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn, geo_md, text_md, align_md]
    ).then(
        gen_func,
        states + [imagebox] + model_selectors,
        states + results + model_selectors,
        api_name="send_btn_anony"
    ).then(
        enable_mds,
        None,
        [geo_md, text_md, align_md]
    ).then(
        enable_buttons_side_by_side,
        None,
        geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    )

    clear_btn.click(
        clear_i2s_history_side_by_side_anony, 
        None, 
        states + [imagebox] + results + model_selectors,
        api_name="clear_btn_anony"
    ).then(
        disable_mds,
        None,
        [geo_md, text_md, align_md]
    ).then(
        disable_buttons_side_by_side,
        None,
        geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    )

    regenerate_btn.click(
        reset_states_side_by_side_anony,
        states,
        states + model_selectors + geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn, geo_md, text_md, align_md]
    ).then(
        gen_func,
        states + [imagebox] + model_selectors,
        states + results + model_selectors,
        api_name="regenerate_btn_anony"
    ).then(
        enable_mds,
        None,
        [geo_md, text_md, align_md]
    ).then(
        enable_buttons_side_by_side,
        None,
        geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    )

    share_btn.click(
        share_click,
        states + model_selectors,
        [],
        js=share_js
    )


def build_i2s_ui_side_by_side_named(models):
    notice_markdown = """
# ⚔️  GenAI-Arena ⚔️ : Benchmarking Image-to-3D generative models 
## 📜 Rules
- Generate with any two selected models side-by-side and vote!
- Sample or Input prompt you want to generate.
- Click "Send" to submit the prompt.
- Click "Clear" to start a new round.

## 🏆 Arena Elo 
Find out who is the 🥇conditional image generation models! More models are going to be supported.

## 👇 Generating now!

"""
    model_list = models.get_i2s_models()
    gen_func = partial(generate_i2s_multi, models.inference_parallel, models.render_parallel)

    state_0 = gr.State()
    state_1 = gr.State()

    gr.Markdown(notice_markdown, elem_id="notice_markdown")

    with gr.Group(elem_id="share-region-named"):
        with gr.Accordion("🔍 Expand to see all Arena players", open=False):
            model_description_md = get_model_description_md(model_list)
            gr.Markdown(model_description_md, elem_id="model_description_markdown")

        with gr.Row():
            with gr.Column():
                model_selector_left = gr.Dropdown(
                    choices=model_list,
                    value=model_list[0] if len(model_list) > 0 else "",
                    interactive=True,
                    show_label=False,
                    container=False,
                    )
            with gr.Column():
                model_selector_right = gr.Dropdown(
                    choices=model_list,
                    value=model_list[1] if len(model_list) > 1 else "",
                    interactive=True,
                    show_label=False,
                    container=False,
                    )

        with gr.Row():

            with gr.Column():
                normal_left = gr.Image(width=512, label = "Model A", show_download_button=True)
                rgb_left = gr.Image(width=512, label = "Model A", show_download_button=True)
            with gr.Column():
                normal_right = gr.Image(width=512, label = "Model B", show_download_button=True,)
                rgb_right = gr.Image(width=512, label = "Model B", show_download_button=True,)

        with gr.Row(elem_id="Geometry Quality"):
            geo_md = gr.Markdown("Geometry Quality: ", visible=False, elem_id="evaldim_markdown")
            geo_leftvote_btn = gr.Button(
                value="👈  A is better", visible=False, interactive=False
            )
            geo_rightvote_btn = gr.Button(
                value="👉  B is better", visible=False, interactive=False
            )
            geo_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
            geo_bothbad_btn = gr.Button(
                value="👎  Both are bad", visible=False, interactive=False
            )

        with gr.Row(elem_id="Texture Quality"):
            text_md = gr.Markdown("Texture Quality: ", visible=False, elem_id="evaldim_markdown")
            text_leftvote_btn = gr.Button(
                value="👈  A is better", visible=False, interactive=False
            )
            text_rightvote_btn = gr.Button(
                value="👉  B is better", visible=False, interactive=False
            )
            text_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
            text_bothbad_btn = gr.Button(
                value="👎  Both are bad", visible=False, interactive=False
            )
        
        with gr.Row(elem_id="Alignment Quality"):
            align_md = gr.Markdown("Alignment Quality: ", visible=False, elem_id="evaldim_markdown")
            align_leftvote_btn = gr.Button(
                value="👈  A is better", visible=False, interactive=False
            )
            align_rightvote_btn = gr.Button(
                value="👉  B is better", visible=False, interactive=False
            )
            align_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
            align_bothbad_btn = gr.Button(
                value="👎  Both are bad", visible=False, interactive=False
            )

    with gr.Row():
        imagebox = gr.Image(
            width=512,
            show_label=False,
            visible=True,
            interactive=True,
            elem_id="input_box",
        )

        with gr.Column():
            sample_btn = gr.Button(value="🎲 Sample", variant="primary")
            send_btn = gr.Button(value="📤 Send", variant="primary")
            clear_btn = gr.Button(value="🗑️ Clear", interactive=False)
            regenerate_btn = gr.Button(value="🔄  Regenerate", interactive=False)
            share_btn = gr.Button(value="📷  Share")

    gr.Markdown(acknowledgment_md, elem_id="ack_markdown")

    geo_btn_list = [geo_leftvote_btn, geo_rightvote_btn, geo_tie_btn, geo_bothbad_btn]
    text_btn_list = [text_leftvote_btn, text_rightvote_btn, text_tie_btn, text_bothbad_btn]
    align_btn_list = [align_leftvote_btn, align_rightvote_btn, align_tie_btn, align_bothbad_btn]
    states = [state_0, state_1]
    model_selectors = [model_selector_left, model_selector_right]
    results = [normal_left, rgb_left, normal_right, rgb_right]

    model_selector_left.change(
        clear_i2s_history_side_by_side, 
        None, 
        states + [imagebox] + results, 
        api_name="model_selector_left"
    )
    model_selector_right.change(
        clear_i2s_history_side_by_side, 
        None, 
        states + [imagebox] + results, 
        api_name="model_selector_right"
    )

    for btn_list, dim_md in zip([geo_btn_list, text_btn_list, align_btn_list], 
                                [geo_md, text_md, align_md]):
        leftvote_btn, rightvote_btn, tie_btn, bothbad_btn = btn_list

        leftvote_btn.click(
            leftvote_last_response_named,
            states + model_selectors + [dim_md],
            states + btn_list
        )
        rightvote_btn.click(
            rightvote_last_response_named,
            states + model_selectors + [dim_md],
            states + btn_list
        )
        tie_btn.click(
            tievote_last_response_named,
            states + model_selectors + [dim_md],
            states + btn_list
        )
        bothbad_btn.click(
            bothbad_vote_last_response_named,
            states + model_selectors + [dim_md],
            states + btn_list
        )

    sample_btn.click(
        sample_image_side_by_side,
        states + model_selectors,
        states + [imagebox],
        api_name="sample_btn_named"
    )

    imagebox.upload(
        reset_states_side_by_side,
        states,
        states + geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn, geo_md, text_md, align_md]
    ).then(
        gen_func,
        states + [imagebox] + model_selectors,
        states + results,
        api_name="submit_btn_named"
    ).then(
        enable_mds,
        None,
        [geo_md, text_md, align_md]
    ).then(
        enable_buttons_side_by_side,
        None,
        geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    )

    send_btn.click(
        reset_states_side_by_side,
        states,
        states + geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn, geo_md, text_md, align_md]
    ).then(
        gen_func,
        states + [imagebox] + model_selectors,
        states + results,
        api_name="send_btn_named"
    ).then(
        enable_mds,
        None,
        [geo_md, text_md, align_md]
    ).then(
        enable_buttons_side_by_side,
        None,
        geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    )

    clear_btn.click(
        clear_i2s_history_side_by_side, 
        None, 
        states + [imagebox] + results,
        api_name="clear_btn_named"
    ).then(
        disable_mds,
        None,
        [geo_md, text_md, align_md]
    ).then(
        disable_buttons_side_by_side,
        None,
        geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    )

    regenerate_btn.click(
        reset_states_side_by_side,
        states,
        states + geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn, geo_md, text_md, align_md]
    ).then(
        gen_func,
        states + [imagebox] + model_selectors,
        states + results + model_selectors,
        api_name="regenerate_btn_named"
    ).then(
        enable_mds,
        None,
        [geo_md, text_md, align_md]
    ).then(
        enable_buttons_side_by_side,
        None,
        geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    )

    share_btn.click(
        share_click,
        states + model_selectors,
        [],
        js=share_js
    )


def build_i2s_ui_single_model(models):
    notice_markdown = """
# 🏔️ Play with Image Generation Models
{promotion}

## 🤖 Choose any model to generate

"""
    model_list = models.get_i2s_models()
    gen_func = partial(generate_i2s, models.inference, models.render)

    gr.Markdown(notice_markdown, elem_id="notice_markdown")

    with gr.Row():
        with gr.Accordion("🔍 Expand to see all Arena players", open=False):
            model_description_md = get_model_description_md(model_list)
            gr.Markdown(model_description_md, elem_id="model_description_markdown")

    with gr.Row(elem_id="model_selector_row"):
        model_selector = gr.Dropdown(
            choices=model_list,
            value=model_list[0] if len(model_list) > 0 else "",
            interactive=True,
            show_label=False
        )

    with gr.Row():
        normal = gr.Image(width=512, label = "Normal", show_download_button=True)
        rgb = gr.Image(width=512, label = "RGB", show_download_button=True,)

    with gr.Row(elem_id="Geometry Quality"):
        geo_md = gr.Markdown("Geometry Quality: ")
        geo_upvote_btn = gr.Button(value="👍  Upvote", interactive=False)
        geo_downvote_btn = gr.Button(value="👎  Downvote", interactive=False)
        geo_flag_btn = gr.Button(value="⚠️  Flag", interactive=False)

    with gr.Row(elem_id="Texture Quality"):
        text_md = gr.Markdown("Texture Quality: ")
        text_upvote_btn = gr.Button(value="👍  Upvote", interactive=False)
        text_downvote_btn = gr.Button(value="👎  Downvote", interactive=False)
        text_flag_btn = gr.Button(value="⚠️  Flag", interactive=False)
    
    with gr.Row(elem_id="Alignment Quality"):
        align_md = gr.Markdown("Alignment Quality: ")
        align_upvote_btn = gr.Button(value="👍  Upvote", interactive=False)
        align_downvote_btn = gr.Button(value="👎  Downvote", interactive=False)
        align_flag_btn = gr.Button(value="⚠️  Flag", interactive=False)

    with gr.Row():
        imagebox = gr.Image(
            width=512,
            show_label=False,
            visible=True,
            interactive=True,
            elem_id="input_box",
        )
        with gr.Column():
            # with gr.Row():
            sample_btn = gr.Button(value="🎲 Sample", variant="primary")
            send_btn = gr.Button(value="📤 Send", variant="primary")
            clear_btn = gr.Button(value="🗑️ Clear", interactive=False)
            regenerate_btn = gr.Button(value="🔄  Regenerate", interactive=False)

    gr.Markdown(acknowledgment_md, elem_id="ack_markdown")

    state = gr.State()
    geo_btn_list = [geo_upvote_btn, geo_downvote_btn, geo_flag_btn]
    text_btn_list = [text_upvote_btn, text_downvote_btn, text_flag_btn]
    align_btn_list = [align_upvote_btn, align_downvote_btn, align_flag_btn]

    for btn_list, dim_md in zip([geo_btn_list, text_btn_list, align_btn_list], 
                                [geo_md, text_md, align_md]):
        upvote_btn, downvote_btn, flag_btn = btn_list

        upvote_btn.click(
            upvote_last_response,
            [state, model_selector, dim_md],
            [state] + btn_list
        )
            
        downvote_btn.click(
            downvote_last_response,
            [state, model_selector, dim_md],
            [state] + btn_list
        )
        flag_btn.click(
            flag_last_response,
            [state, model_selector, dim_md],
            [state] + btn_list
        )

    sample_btn.click(
        sample_image,
        [state, model_selector],
        [state, imagebox],
        api_name="sample_btn_single"
    )

    imagebox.upload(
        reset_state,
        state,
        [state] + geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    ).then(
        gen_func,
        [state, imagebox, model_selector],
        [state, normal, rgb],
        api_name="submit_btn_single",
        show_progress = "full"
    ).then(
        enable_buttons, 
        None,  
        geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    )

    send_btn.click(
        reset_state,
        state,
        [state] + geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    ).then(
        gen_func,
        [state, imagebox, model_selector],
        [state, normal, rgb],
        api_name="send_btn_single",
        show_progress = "full"
    ).then(
        enable_buttons, 
        None,  
        geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    )

    clear_btn.click(
        clear_i2s_history, 
        None, 
        [state, imagebox, normal, rgb], 
        api_name="clear_history_single",
        show_progress="full"
    ).then(
        disable_buttons, 
        None,  
        geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    )

    regenerate_btn.click(
        reset_state,
        state,
        [state] + geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    ).then(
        gen_func,
        [state, imagebox, model_selector],
        [state, normal, rgb],
        api_name="regenerate_btn_single",
        show_progress = "full"
    ).then(
        enable_buttons, 
        None,  
        geo_btn_list + text_btn_list + align_btn_list + [regenerate_btn, clear_btn]
    )