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 = """
# ⚔️  3DGen-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(scale=0.8):
                imagebox = gr.Image(
                    width=512,
                    show_label=False,
                    visible=True,
                    interactive=False,   ## only support offline
                    label = "Prompt",
                    elem_id="input_box",
                )        
                
                plausive_md = gr.Markdown("Geometry Plausibility: ", visible=False, elem_id="evaldim_markdown")
                with gr.Row(elem_id="Geometry Plausibility"):
                    plausive_leftvote_btn = gr.Button(
                        value="👈  A is better", visible=False, interactive=False
                    )
                    plausive_rightvote_btn = gr.Button(
                        value="👉  B is better", visible=False, interactive=False
                    )
                    plausive_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
                    plausive_bothbad_btn = gr.Button(
                        value="👎  Both are bad", visible=False, interactive=False
                    )

                geo_md = gr.Markdown("Geometry Quality: ", visible=False, elem_id="evaldim_markdown")
                with gr.Row(elem_id="Geometry Details"):
                    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
                    )

                text_md = gr.Markdown("Texture Quality: ", visible=False, elem_id="evaldim_markdown")
                with gr.Row(elem_id="Texture Quality"):
                    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
                    )
                
                coherence_md = gr.Markdown("Geometry-Texture Coherency: ", visible=False, elem_id="evaldim_markdown")
                with gr.Row(elem_id="Geometry-Texture Coherency"):
                    coherence_leftvote_btn = gr.Button(
                        value="👈  A is better", visible=False, interactive=False
                    )
                    coherence_rightvote_btn = gr.Button(
                        value="👉  B is better", visible=False, interactive=False
                    )
                    coherence_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
                    coherence_bothbad_btn = gr.Button(
                        value="👎  Both are bad", visible=False, interactive=False
                    )

                align_md = gr.Markdown("Visual Alignment: ", visible=False, elem_id="evaldim_markdown")
                with gr.Row(elem_id="Visual Alignment"):
                    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
                    )


                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")    
            with gr.Column():
                normal_left = gr.Image(label = "Normal A", 
                    interactive=False, show_download_button=True)
                rgb_left = gr.Image(label = "RGB A", 
                    interactive=False, show_download_button=True)
            with gr.Column():
                normal_right = gr.Image(label = "Normal B",
                    interactive=False, show_download_button=True,)
                rgb_right = gr.Image(label = "RGB B",
                    interactive=False, show_download_button=True,)

        with gr.Row():
            with gr.Column(scale=0.8):
                gr.Markdown("", visible=False)
            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 Plausibility"):
        #     plausive_md = gr.Markdown("Geometry Plausibility: ", visible=False, elem_id="evaldim_markdown")
        #     plausive_leftvote_btn = gr.Button(
        #         value="👈  A is better", visible=False, interactive=False
        #     )
        #     plausive_rightvote_btn = gr.Button(
        #         value="👉  B is better", visible=False, interactive=False
        #     )
        #     plausive_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
        #     plausive_bothbad_btn = gr.Button(
        #         value="👎  Both are bad", visible=False, interactive=False
        #     )

        # with gr.Row(elem_id="Geometry Details"):
        #     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="Geometry-Texture Coherency"):
        #     coherence_md = gr.Markdown("Geometry-Texture Coherency: ", visible=False, elem_id="evaldim_markdown")
        #     coherence_leftvote_btn = gr.Button(
        #         value="👈  A is better", visible=False, interactive=False
        #     )
        #     coherence_rightvote_btn = gr.Button(
        #         value="👉  B is better", visible=False, interactive=False
        #     )
        #     coherence_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
        #     coherence_bothbad_btn = gr.Button(
        #         value="👎  Both are bad", visible=False, interactive=False
        #     )

        # with gr.Row(elem_id="Visual Alignment"):
        #     align_md = gr.Markdown("Visual Alignment: ", 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():
        # sample_btn = gr.Button(value="🎲 Sample", variant="primary")
        clear_btn = gr.Button(value="🗑️ Clear", interactive=False)
        regenerate_btn = gr.Button(value="🔄  Regenerate", interactive=False)
        share_btn = gr.Button(value="📷  Share")
        send_btn = gr.Button(value="📤 Send", variant="primary")

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

    states = [state_0, state_1]
    model_selectors = [model_selector_left, model_selector_right]
    results = [normal_left, rgb_left, normal_right, rgb_right]

    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]
    plausive_btn_list = [plausive_leftvote_btn, plausive_rightvote_btn, plausive_tie_btn, plausive_bothbad_btn]
    coherence_btn_list = [coherence_leftvote_btn, coherence_rightvote_btn, coherence_tie_btn, coherence_bothbad_btn]
    dim_md_list = [geo_md, text_md, align_md, plausive_md, coherence_md]
    vote_btn_list = geo_btn_list + text_btn_list + align_btn_list + plausive_btn_list + coherence_btn_list

    for dim_md, btn_list in zip(dim_md_list, [geo_btn_list, text_btn_list, align_btn_list, plausive_btn_list, coherence_btn_list]):
        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"
    ).then(
        reset_states_side_by_side_anony,
        states,
        states + model_selectors + results + vote_btn_list + [regenerate_btn, clear_btn] + dim_md_list
    )

    imagebox.upload(
        reset_states_side_by_side_anony,
        states,
        states + model_selectors + results + vote_btn_list + [regenerate_btn, clear_btn] + dim_md_list
    ).then(
        gen_func,
        states + [imagebox] + model_selectors,
        states + results + model_selectors,
        api_name="submit_btn_named"
    ).then(
        enable_mds,
        None,
        dim_md_list
    ).then(
        enable_buttons_side_by_side,
        None,
        vote_btn_list + [regenerate_btn, clear_btn]
    )

    send_btn.click(
        reset_states_side_by_side_anony,
        states,
        states + model_selectors + results + vote_btn_list + [regenerate_btn, clear_btn] + dim_md_list
    ).then(
        gen_func,
        states + [imagebox] + model_selectors,
        states + results + model_selectors,
        api_name="send_btn_anony"
    ).then(
        enable_mds,
        None,
        dim_md_list
    ).then(
        enable_buttons_side_by_side,
        None,
        vote_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,
        dim_md_list
    ).then(
        disable_buttons_side_by_side,
        None,
        vote_btn_list + [regenerate_btn, clear_btn]
    )

    regenerate_btn.click(
        reset_states_side_by_side_anony,
        states,
        states + model_selectors + results + vote_btn_list + [regenerate_btn, clear_btn] + dim_md_list
    ).then(
        gen_func,
        states + [imagebox] + model_selectors,
        states + results + model_selectors,
        api_name="regenerate_btn_anony"
    ).then(
        enable_mds,
        None,
        dim_md_list
    ).then(
        enable_buttons_side_by_side,
        None,
        vote_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 = """
# ⚔️  3DGen-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(scale=0.8):
                gr.Markdown("Select Players:", elem_id="evaldim_markdown")
            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(scale=0.8):
                imagebox = gr.Image(
                    width=512,
                    show_label=False,
                    visible=True,
                    interactive=False,   ## only support offline
                    elem_id="input_box",
                )

                plausive_md = gr.Markdown("Geometry Plausibility: ", visible=False, elem_id="evaldim_markdown")
                with gr.Row(elem_id="Geometry Plausibility"):
                    plausive_leftvote_btn = gr.Button(
                        value="👈  A is better", visible=False, interactive=False
                    )
                    plausive_rightvote_btn = gr.Button(
                        value="👉  B is better", visible=False, interactive=False
                    )
                    plausive_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
                    plausive_bothbad_btn = gr.Button(
                        value="👎  Both are bad", visible=False, interactive=False
                    )

                geo_md = gr.Markdown("Geometry Quality: ", visible=False, elem_id="evaldim_markdown")
                with gr.Row(elem_id="Geometry Quality"):
                    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
                    )

                text_md = gr.Markdown("Texture Quality: ", visible=False, elem_id="evaldim_markdown")
                with gr.Row(elem_id="Texture Quality"):
                    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
                    )
                
                coherence_md = gr.Markdown("Geometry-Texture Coherency: ", visible=False, elem_id="evaldim_markdown")
                with gr.Row(elem_id="Geometry-Texture Coherency"):
                    coherence_leftvote_btn = gr.Button(
                        value="👈  A is better", visible=False, interactive=False
                    )
                    coherence_rightvote_btn = gr.Button(
                        value="👉  B is better", visible=False, interactive=False
                    )
                    coherence_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
                    coherence_bothbad_btn = gr.Button(
                        value="👎  Both are bad", visible=False, interactive=False
                    )

                align_md = gr.Markdown("Visual Alignment: ", visible=False, elem_id="evaldim_markdown")
                with gr.Row(elem_id="Visual Alignment"):
                    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
                    )

                sample_btn = gr.Button(value="🎲 Sample", variant="primary")

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

        # with gr.Row(elem_id="Geometry Plausibility"):
        #     plausive_md = gr.Markdown("Geometry Plausibility: ", visible=False, elem_id="evaldim_markdown")
        #     plausive_leftvote_btn = gr.Button(
        #         value="👈  A is better", visible=False, interactive=False
        #     )
        #     plausive_rightvote_btn = gr.Button(
        #         value="👉  B is better", visible=False, interactive=False
        #     )
        #     plausive_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
        #     plausive_bothbad_btn = gr.Button(
        #         value="👎  Both are bad", visible=False, interactive=False
        #     )

        # 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="Geometry-Texture Coherency"):
        #     coherence_md = gr.Markdown("Geometry-Texture Coherency: ", visible=False, elem_id="evaldim_markdown")
        #     coherence_leftvote_btn = gr.Button(
        #         value="👈  A is better", visible=False, interactive=False
        #     )
        #     coherence_rightvote_btn = gr.Button(
        #         value="👉  B is better", visible=False, interactive=False
        #     )
        #     coherence_tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
        #     coherence_bothbad_btn = gr.Button(
        #         value="👎  Both are bad", visible=False, interactive=False
        #     )

        # with gr.Row(elem_id="Visual Alignment"):
        #     align_md = gr.Markdown("Visual Alignment: ", 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():
        clear_btn = gr.Button(value="🗑️ Clear", interactive=False)
        regenerate_btn = gr.Button(value="🔄  Regenerate", interactive=False)
        share_btn = gr.Button(value="📷  Share")
        send_btn = gr.Button(value="📤 Send", variant="primary")

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

    states = [state_0, state_1]
    model_selectors = [model_selector_left, model_selector_right]
    results = [normal_left, rgb_left, normal_right, rgb_right]

    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]
    plausive_btn_list = [plausive_leftvote_btn, plausive_rightvote_btn, plausive_tie_btn, plausive_bothbad_btn]
    coherence_btn_list = [coherence_leftvote_btn, coherence_rightvote_btn, coherence_tie_btn, coherence_bothbad_btn]
    dim_md_list = [geo_md, text_md, align_md, plausive_md, coherence_md]
    vote_btn_list = geo_btn_list + text_btn_list + align_btn_list + plausive_btn_list + coherence_btn_list

    model_selector_left.change(
        clear_i2s_history_side_by_side, 
        None, 
        states + [imagebox] + results, 
        api_name="model_selector_left"
    ).then(
        disable_mds,
        None,
        dim_md_list
    ).then(
        disable_buttons_side_by_side,
        None,
        vote_btn_list + [regenerate_btn, clear_btn]
    )

    model_selector_right.change(
        clear_i2s_history_side_by_side, 
        None, 
        states + [imagebox] + results, 
        api_name="model_selector_right"
    ).then(
        disable_mds,
        None,
        dim_md_list
    ).then(
        disable_buttons_side_by_side,
        None,
        vote_btn_list + [regenerate_btn, clear_btn]
    )

    for  dim_md, btn_list in zip(dim_md_list, [geo_btn_list, text_btn_list, align_btn_list, plausive_btn_list, coherence_btn_list]):
        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"
    ).then(
        reset_states_side_by_side,
        states,
        states + results + vote_btn_list + [regenerate_btn, clear_btn] + dim_md_list
    )

    imagebox.upload(
        reset_states_side_by_side,
        states,
        states + results + vote_btn_list + [regenerate_btn, clear_btn] + dim_md_list
    ).then(
        gen_func,
        states + [imagebox] + model_selectors,
        states + results,
        api_name="submit_btn_named"
    ).then(
        enable_mds,
        None,
        dim_md_list
    ).then(
        enable_buttons_side_by_side,
        None,
        vote_btn_list + [regenerate_btn, clear_btn]
    )

    send_btn.click(
        reset_states_side_by_side,
        states,
        states + results + vote_btn_list + [regenerate_btn, clear_btn] + dim_md_list
    ).then(
        gen_func,
        states + [imagebox] + model_selectors,
        states + results,
        api_name="send_btn_named"
    ).then(
        enable_mds,
        None,
        dim_md_list
    ).then(
        enable_buttons_side_by_side,
        None,
        vote_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,
        dim_md_list
    ).then(
        disable_buttons_side_by_side,
        None,
        vote_btn_list + [regenerate_btn, clear_btn]
    )

    regenerate_btn.click(
        reset_states_side_by_side,
        states,
        states + results + vote_btn_list + [regenerate_btn, clear_btn] + dim_md_list
    ).then(
        gen_func,
        states + [imagebox] + model_selectors,
        states + results + model_selectors,
        api_name="regenerate_btn_named"
    ).then(
        enable_mds,
        None,
        dim_md_list
    ).then(
        enable_buttons_side_by_side,
        None,
        vote_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-to-3D Generation Models

## 🤖 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():
        with gr.Column():
            imagebox = gr.Image(
                show_label=False,
                visible=True,
                interactive=False,   ## only support offline
                elem_id="input_box",
                label="Prompt",
            )
            sample_btn = gr.Button(value="🎲 Sample", variant="primary")
        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 Plausibility"):
        plausive_md = gr.Markdown("Geometry Plausibility: ", elem_id="evaldim_markdown")
        plausive_upvote_btn = gr.Button(value="👍  Upvote", interactive=False)
        plausive_downvote_btn = gr.Button(value="👎  Downvote", interactive=False)
        plausive_flag_btn = gr.Button(value="⚠️  Flag", interactive=False)
        
    with gr.Row(elem_id="Geometry Quality"):
        geo_md = gr.Markdown("Geometry Quality: ", elem_id="evaldim_markdown")
        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: ", elem_id="evaldim_markdown")
        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="Geometry-Texture Coherency"):
        coherence_md = gr.Markdown("Geometry-Texture Coherency: ", elem_id="evaldim_markdown")
        coherence_upvote_btn = gr.Button(value="👍  Upvote", interactive=False)
        coherence_downvote_btn = gr.Button(value="👎  Downvote", interactive=False)
        coherence_flag_btn = gr.Button(value="⚠️  Flag", interactive=False)

    with gr.Row(elem_id="Visual Alignment"):
        align_md = gr.Markdown("Visual Alignment: ", elem_id="evaldim_markdown")
        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():
        clear_btn = gr.Button(value="🗑️ Clear", interactive=False)
        regenerate_btn = gr.Button(value="🔄  Regenerate", interactive=False)
        send_btn = gr.Button(value="📤 Send", variant="primary")

    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]
    plausive_btn_list = [plausive_upvote_btn, plausive_downvote_btn, plausive_flag_btn]
    coherence_btn_list = [coherence_upvote_btn, coherence_downvote_btn, coherence_flag_btn]
    dim_md_list = [geo_md, text_md, align_md, plausive_md, coherence_md]
    vote_btn_list = geo_btn_list + text_btn_list + align_btn_list + plausive_btn_list + coherence_btn_list

    for dim_md, btn_list in zip(dim_md_list, [geo_btn_list, text_btn_list, align_btn_list, plausive_btn_list, coherence_btn_list]):
        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
        )

    model_selector.change(
        clear_i2s_history, 
        None, 
        [state, imagebox, normal, rgb], 
        api_name="clear_history_single",
        show_progress="full"
    ).then(
        disable_buttons, 
        None,  
        vote_btn_list + [regenerate_btn, clear_btn]
    )

    sample_btn.click(
        sample_image,
        [state, model_selector],
        [state, imagebox],
        api_name="sample_btn_single"
    ).then(
        reset_state,
        state,
        [state, normal, rgb] + vote_btn_list + [regenerate_btn, clear_btn]
    )

    imagebox.upload(
        reset_state,
        state,
        [state, normal, rgb] + vote_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,  
        vote_btn_list + [regenerate_btn, clear_btn]
    )

    send_btn.click(
        reset_state,
        state,
        [state, normal, rgb] + vote_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,  
        vote_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,  
        vote_btn_list + [regenerate_btn, clear_btn]
    )

    regenerate_btn.click(
        reset_state,
        state,
        [state, normal, rgb] + vote_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,  
        vote_btn_list + [regenerate_btn, clear_btn]
    )