import json
from functools import partial

from .utils import *
from .vote_utils import (
    upvote_last_response_t2s as upvote_last_response,
    downvote_last_response_t2s as downvote_last_response,
    flag_last_response_t2s as flag_last_response,
    leftvote_last_response_t2s_anony as leftvote_last_response_anony,
    rightvote_last_response_t2s_anony as rightvote_last_response_anony,
    tievote_last_response_t2s_anony as tievote_last_response_anony,
    bothbad_vote_last_response_t2s_anony as bothbad_vote_last_response_anony,
    leftvote_last_response_t2s_named as leftvote_last_response_named,
    rightvote_last_response_t2s_named as rightvote_last_response_named,
    tievote_last_response_t2s_named as tievote_last_response_named,
    bothbad_vote_last_response_t2s_named as bothbad_vote_last_response_named,
    share_click_t2s_multi as share_click,
    share_js
)
from .inference import(
    sample_t2s_model as sample_model,
    sample_prompt,
    sample_prompt_side_by_side,
    generate_t2s,
    generate_t2s_multi,
    generate_t2s_multi_annoy
)


def build_t2s_ui_side_by_side_anony(models):
    notice_markdown = """
# ⚔️  3DGen-Arena ⚔️ : Benchmarking Text-to-3D generative models 
## 📜 Rules
- Input prompt to two anonymous models in same area and vote for the better one!
- Sample a prompt 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 🥇 text-to-3D generation models! More models are going to be supported.
\n The Leaderboard is coming soon
## 👇 Generating now!

"""
    model_list = models.get_t2s_models()
    gen_func = partial(generate_t2s_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="model 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():
            #     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 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="Semantic Alignment"):
            align_md = gr.Markdown("Semantic 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():
        textbox = gr.Textbox(
            show_label=False,
            placeholder='👉 Sample a random prompt, and press "Send" to start a generation',
            container=True,
            elem_id="input_box",
            interactive=False,      ## only support offline
        )
        sample_btn = gr.Button(value="🎲 Sample", variant="primary", scale=0)
        send_btn = gr.Button(value="📤 Send", variant="primary", scale=0)

    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

    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_prompt_side_by_side,
        states + model_selectors,
        states + [textbox],
        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
    )

    textbox.submit(
        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 + [textbox] + model_selectors,
        states + results + model_selectors,
        api_name="submit_btn_anony"
    ).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 + [textbox] + 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_t2s_history_side_by_side_anony, 
        None, 
        states + [textbox] + 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 + [textbox] + 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_t2s_ui_side_by_side_named(models):
    notice_markdown = """
# ⚔️  3DGen-Arena ⚔️ : Benchmarking Text-to-3D generative models 
## 📜 Rules
- Generate with any two selected models side-by-side and vote!
- Sample a prompt 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_t2s_models()
    gen_func = partial(generate_t2s_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():
            #     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():
            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 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="Semantic Alignment"):
            align_md = gr.Markdown("Semantic 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():
        textbox = gr.Textbox(
            show_label=False,
            placeholder='👉 Sample a random prompt, and press "Send" to start a generation',
            container=True,
            elem_id="input_box",
            interactive=False,   ## only support offline
        )   
        sample_btn = gr.Button(value="🎲 Sample", variant="primary", scale=0)
        send_btn = gr.Button(value="📤 Send", variant="primary", scale=0)

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

    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_t2s_history_side_by_side, 
        None, 
        states + [textbox] + 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_t2s_history_side_by_side, 
        None, 
        states + [textbox] + 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_prompt_side_by_side,
        states + model_selectors,
        states + [textbox],
        api_name="sample_btn_named"
    ).then(
        reset_states_side_by_side,
        states,
        states + results + vote_btn_list + [regenerate_btn, clear_btn] + dim_md_list
    )

    textbox.submit(
        reset_states_side_by_side,
        states,
        states + results + vote_btn_list + [regenerate_btn, clear_btn] + dim_md_list
    ).then(
        gen_func,
        states + [textbox] + 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 + [textbox] + 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_t2s_history_side_by_side, 
        None, 
        states + [textbox] + 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 + [textbox] + model_selectors,
        states + results,
        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_t2s_ui_single_model(models):
    notice_markdown = """
# 🏔️ Play with Text-to-3D Generation Models

## 📜 Rules
- Generate with a selected model and vote!
- Sample a prompt 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_t2s_models()
    gen_func = partial(generate_t2s, 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(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 Details"):
        geo_md = gr.Markdown("Geometry Details: ", 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="Semantic Alignment"):
        align_md = gr.Markdown("Semantic 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():
        textbox = gr.Textbox(
            show_label=False,
            placeholder='👉 Sample a random prompt, and press "Send" to start a generation',
            container=True,
            elem_id="input_box",
            interactive=False,   ## only support offline
        )
        sample_btn = gr.Button(value="🎲 Sample", variant="primary", scale=0)
        send_btn = gr.Button(value="📤 Send", variant="primary",scale=0)

    with gr.Row():
        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]
    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_t2s_history, 
        None, 
        [state, textbox, 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_prompt,
        [state, model_selector],
        [state, textbox],
        api_name="sample_btn_single"
    ).then(
        reset_state,
        state,
        [state, geo, normal, rgb] + vote_btn_list + [regenerate_btn, clear_btn]
    )

    textbox.submit(
        reset_state,
        state,
        [state, geo, normal, rgb] + vote_btn_list + [regenerate_btn, clear_btn]
    ).then(
        gen_func,
        [state, textbox, 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, textbox, 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_t2s_history, 
        None, 
        [state, textbox, 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, textbox, 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]
    )