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!
- Sample an image and click "Send" to start a generation. 
- When the results are ready, click the buttons below to vote.
- Until all dimensions have been voted, the anonymous models are displayed.
- Click "Clear" to start a new round.

## 🏆 Arena Elo 
Find out who is the 🥇 image-to-3D 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.Column():
            with gr.Row():
                geo_left = gr.Image(label = "Geometry A", 
                    interactive=False, show_download_button=False)
                normal_left = gr.Image(label = "Normal A", 
                    interactive=False, show_download_button=False)
                rgb_left = gr.Image(label = "RGB A", 
                    interactive=False, show_download_button=False)
            with gr.Row():
                geo_right = gr.Image(label = "Geometry B", 
                    interactive=False, show_download_button=False)
                normal_right = gr.Image(label = "Normal B",
                    interactive=False, show_download_button=False,)
                rgb_right = gr.Image(label = "RGB B",
                    interactive=False, show_download_button=False,)

        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():
            with gr.Column():
                imagebox = gr.Image(
                    show_label=False,
                    visible=True,
                    interactive=False,   ## only support offline
                    label = "Prompt",
                    elem_id="input_box",
                )
                sample_btn = gr.Button(value="🎲 Sample", variant="primary")
            
            with gr.Column(scale=3.0):
                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 Details: ", 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
                    )

    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 = [geo_left, normal_left, rgb_left, geo_right, 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 an image and click "Send" to start a generation. 
- When the results are ready, click the buttons below to vote.
- 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.Column():
            with gr.Row():
                geo_left = gr.Image(label = "Geometry A", interactive=False, show_download_button=False)
                normal_left = gr.Image(label = "Normal A", interactive=False, show_download_button=False)
                rgb_left = gr.Image(label = "RGB A", interactive=False, show_download_button=False)
            with gr.Row():
                geo_right = gr.Image(label = "Geometry B", interactive=False, show_download_button=False)
                normal_right = gr.Image(label = "Normal B", interactive=False, show_download_button=False,)
                rgb_right = gr.Image(label = "RGB B", interactive=False, show_download_button=False,)

        with gr.Row():
            with gr.Column():
                imagebox = gr.Image(
                    show_label=False,
                    visible=True,
                    interactive=False,   ## only support offline
                    label = "Prompt",
                    elem_id="input_box",
                )
                sample_btn = gr.Button(value="🎲 Sample", variant="primary")
            
            with gr.Column(scale=3.0):
                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 Details: ", 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
                    )

        # 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 Details: ", 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 = [geo_left, normal_left, rgb_left, geo_right, 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
## 📜 Rules
- Generate with a selected models and vote!
- Sample an image and click "Send" to start a generation. 
- When the results are ready, click the buttons below to vote.
- Click "Clear" to start a new round.

## 🤖 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():
        geo = gr.Image(label="Geometry", interactive=False, show_download_button=False)
        normal = gr.Image(label="Normal", interactive=False, show_download_button=False)
        rgb = gr.Image(label="RGB", interactive=False, show_download_button=False)

    with gr.Row():
        with gr.Column():
            imagebox = gr.Image(
                show_label=False,
                visible=True,
                interactive=False,   ## only support offline
                label = "Prompt",
                elem_id="input_box",
            )
            sample_btn = gr.Button(value="🎲 Sample", variant="primary")
        
        with gr.Column(scale=2.0):
            plausive_md = gr.Markdown("Geometry Plausibility: ", elem_id="evaldim_markdown")
            with gr.Row(elem_id="Geometry Plausibility"):
                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)
                
            geo_md = gr.Markdown("Geometry Details: ", elem_id="evaldim_markdown")
            with gr.Row(elem_id="Geometry Details"):
                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)

            text_md = gr.Markdown("Texture Quality: ", elem_id="evaldim_markdown")
            with gr.Row(elem_id="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)
            
            coherence_md = gr.Markdown("Geometry-Texture Coherency: ", elem_id="evaldim_markdown")
            with gr.Row(elem_id="Geometry-Texture Coherency"):
                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)

            align_md = gr.Markdown("Visual Alignment: ", elem_id="evaldim_markdown")
            with gr.Row(elem_id="Visual Alignment"):
                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, geo, 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, geo, normal, rgb] + vote_btn_list + [regenerate_btn, clear_btn]
    )

    imagebox.upload(
        reset_state,
        state,
        [state, geo, normal, rgb] + vote_btn_list + [regenerate_btn, clear_btn]
    ).then(
        gen_func,
        [state, imagebox, model_selector],
        [state, geo, 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, geo, normal, rgb] + vote_btn_list + [regenerate_btn, clear_btn]
    ).then(
        gen_func,
        [state, imagebox, model_selector],
        [state, geo, 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, geo, 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, geo, normal, rgb] + vote_btn_list + [regenerate_btn, clear_btn]
    ).then(
        gen_func,
        [state, imagebox, model_selector],
        [state, geo, normal, rgb],
        api_name="regenerate_btn_single",
        show_progress = "full"
    ).then(
        enable_buttons, 
        None,  
        vote_btn_list + [regenerate_btn, clear_btn]
    )