serve/gradio_web_video_generation.py

from .utils import *
from .vote_utils import (
    upvote_last_response_vg as upvote_last_response,
    downvote_last_response_vg as downvote_last_response,
    flag_last_response_vg as flag_last_response,
    leftvote_last_response_vgm as leftvote_last_response,
    rightvote_last_response_vgm as rightvote_last_response,
    tievote_last_response_vgm as tievote_last_response,
    bothbad_vote_last_response_vgm as bothbad_vote_last_response,
    # share_click_vgm as share_click,
    generate_vg,
    generate_vg_museum,
    generate_vgm,
    generate_vgm_museum,
    generate_vgm_annoy,
    generate_vgm_annoy_museum,
    share_js
)
from functools import partial


def build_side_by_side_ui_anony_vg(models):
    notice_markdown = """
# ⚔️  GenAI-Arena ⚔️ : Benchmarking Visual Generative Models in the Wild
| [Code](https://huggingface.co/spaces/TIGER-Lab/GenAI-Arena/tree/main) | [Paper](https://arxiv.org/abs/2406.04485v1) | [Dataset](https://huggingface.co/datasets/TIGER-Lab/GenAI-Bench) | 
## 📜 Rules
- Input prompt to two anonymous models in same area (e.g., AnimateDiff, AnimateDiff-Turbo) 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 "New Round" to start a new round.

## ⚠️ Data Collection Consent
- Your input and votes will be collected for research purposes only. 
- By using this service, you agree to the collection of your input and votes for research purposes. 
- Your data will be anonymized and will not be used for commercial purposes.

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

## 👇 Generating now!

"""

    model_list = models.model_vg_list

    state0 = gr.State()
    state1 = gr.State()
    gen_func = partial(generate_vgm_annoy, models.generate_video_vg_parallel_anony)
    gen_func_random = partial(generate_vgm_annoy_museum, models.generate_video_vg_museum_parallel_anony)

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

    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():
                chatbot_left = gr.Video(width=512, label="Model A", autoplay=True)
            with gr.Column():
                chatbot_right = gr.Video(width=512, label="Model B", autoplay=True)

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

        with gr.Row():
            leftvote_btn = gr.Button(
                value="👈  A is better", visible=False, interactive=False
            )
            rightvote_btn = gr.Button(
                value="👉  B is better", visible=False, interactive=False
            )
            tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
            bothbad_btn = gr.Button(
                value="👎  Both are bad", visible=False, interactive=False
            )

    with gr.Row():
        textbox = gr.Textbox(
            show_label=False,
            placeholder="👉 Enter your prompt and press ENTER",
            container=True,
            elem_id="input_box",
        )
        send_btn = gr.Button(value="Send", variant="primary", scale=0)
        draw_btn = gr.Button(value="🎲 Random sample", variant="primary", scale=0)


    with gr.Row():
        clear_btn = gr.Button(value="🎲 New Round", interactive=False)
        regenerate_btn = gr.Button(value="🔄  Regenerate", interactive=False)
        # share_btn = gr.Button(value="📷  Share")

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

    dummy_video_output = gr.Video(width=512, visible=False)
    gr.Examples(
        examples=[["a cute dog is playing a ball", 'https://fal-cdn.batuhan-941.workers.dev/files/lion/BFcM30vpeyRHFfdhbfFoY.mp4'],
                  ["Buildings on fire, old film still", 'https://fal-cdn.batuhan-941.workers.dev/files/zebra/r4NeCgXTkpzIBCF0DDHqJ.mp4'],
                  ["A serene underwater scene featuring a sea turtle swimming through a coral reef.",
                   'https://fal-cdn.batuhan-941.workers.dev/files/tiger/cBHesvgUzjonNUEL1FQGw.mp4'],
                  ["A futuristic hopeful busy city, purple and green color scheme",
                   'https://fal-cdn.batuhan-941.workers.dev/files/monkey/5-vUtY4_bHAhTtevZx16K.mp4']],
        inputs=[textbox, dummy_video_output])

    btn_list = [leftvote_btn, rightvote_btn, tie_btn, bothbad_btn, regenerate_btn, clear_btn, ]

    textbox.submit(
        gen_func,
        inputs=[state0, state1, textbox, model_selector_left, model_selector_right],
        outputs=[state0, state1, chatbot_left, chatbot_right, model_selector_left, model_selector_right],
        api_name="submit_btn_annony"
    ).then(
        enable_buttons_side_by_side,
        inputs=None,
        outputs=btn_list
    )
    send_btn.click(
        gen_func,
        inputs=[state0, state1, textbox, model_selector_left, model_selector_right],
        outputs=[state0, state1, chatbot_left, chatbot_right, model_selector_left, model_selector_right],
        api_name="send_btn_annony"
    ).then(
        enable_buttons_side_by_side,
        inputs=None,
        outputs=btn_list
    )

    draw_btn.click(
        gen_func_random,
        inputs=[state0, state1, model_selector_left, model_selector_right],
        outputs=[state0, state1, chatbot_left, chatbot_right, textbox, model_selector_left, model_selector_right],
        api_name="draw_btn_annony"
    ).then(
        enable_buttons_side_by_side,
        inputs=None,
        outputs=btn_list
    )

    clear_btn.click(
        clear_history_side_by_side_anony,
        inputs=None,
        outputs=[state0, state1, textbox, chatbot_left, chatbot_right, model_selector_left, model_selector_right],
        api_name="clear_btn_annony"
    ).then(
        disable_buttons_side_by_side,
        inputs=None,
        outputs=btn_list
    )

    regenerate_btn.click(
        gen_func,
        inputs=[state0, state1, textbox, model_selector_left, model_selector_right],
        outputs=[state0, state1, chatbot_left, chatbot_right, model_selector_left, model_selector_right],
        api_name="regenerate_btn_annony"
    ).then(
        enable_buttons_side_by_side,
        inputs=None,
        outputs=btn_list
    )
    dummy_left_model = gr.State("")
    dummy_right_model = gr.State("")
    leftvote_btn.click(
        leftvote_last_response,
        inputs=[state0, state1, dummy_left_model, dummy_right_model],
        outputs=[textbox, leftvote_btn, rightvote_btn, tie_btn, bothbad_btn, model_selector_left, model_selector_right]
    )
    rightvote_btn.click(
        rightvote_last_response,
        inputs=[state0, state1, dummy_left_model, dummy_right_model],
        outputs=[textbox, leftvote_btn, rightvote_btn, tie_btn, bothbad_btn, model_selector_left, model_selector_right]
    )
    tie_btn.click(
        tievote_last_response,
        inputs=[state0, state1, dummy_left_model, dummy_right_model],
        outputs=[textbox, leftvote_btn, rightvote_btn, tie_btn, bothbad_btn, model_selector_left, model_selector_right]
    )
    bothbad_btn.click(
        bothbad_vote_last_response,
        inputs=[state0, state1, dummy_left_model, dummy_right_model],
        outputs=[textbox, leftvote_btn, rightvote_btn, tie_btn, bothbad_btn, model_selector_left, model_selector_right]
    )

    # share_btn.click(
    #     share_click,
    #     inputs=[state0, state1, model_selector_left, model_selector_right],
    #     outputs=[],
    #     js=share_js
    # )


def build_side_by_side_ui_named_vg(models):
    notice_markdown = """
# ⚔️  GenAI-Arena ⚔️ : Benchmarking Visual Generative Models in the Wild
| [Code](https://huggingface.co/spaces/TIGER-Lab/GenAI-Arena/tree/main) | [Paper](https://arxiv.org/abs/2406.04485v1) | [Dataset](https://huggingface.co/datasets/TIGER-Lab/GenAI-Bench) |

## 📜 Rules
- Generate with any two selected models side-by-side and vote!
- Input prompt you want to generate.
- Click "Send" to submit the prompt.
- Click "Clear history" to start a new round.

## ⚠️ Data Collection Consent
- Your input and votes will be collected for research purposes only. 
- By using this service, you agree to the collection of your input and votes for research purposes. 
- Your data will be anonymized and will not be used for commercial purposes.

## 🤖 Choose two models to compare
"""
    model_list = models.model_vg_list

    state0 = gr.State()
    state1 = gr.State()
    gen_func = partial(generate_vgm, models.generate_video_vg_parallel)
    gen_func_random = partial(generate_vgm_museum, models.generate_video_vg_museum_parallel)
    gr.Markdown(notice_markdown, elem_id="notice_markdown")

    with gr.Group(elem_id="share-region-named"):
        with gr.Row():
            with gr.Column():
                model_selector_left = gr.Dropdown(
                    choices=model_list,
                    value=model_list[0] if len(model_list) > 0 else "",
                    interactive=True,
                    show_label=False,
                    container=False,
                )
            with gr.Column():
                model_selector_right = gr.Dropdown(
                    choices=model_list,
                    value=model_list[1] if len(model_list) > 1 else "",
                    interactive=True,
                    show_label=False,
                    container=False,
                )
        with gr.Row():
            with gr.Accordion("🔍 Expand to see all model descriptions", 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():
                chatbot_left = gr.Video(width=512, label="Model A", autoplay=True)
            with gr.Column():
                chatbot_right = gr.Video(width=512, label="Model B", autoplay=True)
        with gr.Row():
            leftvote_btn = gr.Button(
                value="👈  A is better", visible=False, interactive=False
            )
            rightvote_btn = gr.Button(
                value="👉  B is better", visible=False, interactive=False
            )
            tie_btn = gr.Button(value="🤝  Tie", visible=False, interactive=False)
            bothbad_btn = gr.Button(
                value="👎  Both are bad", visible=False, interactive=False
            )

    with gr.Row():
        textbox = gr.Textbox(
            show_label=False,
            placeholder="👉 Enter your prompt and press ENTER",
            elem_id="input_box"
        )
        send_btn = gr.Button(value="Send", variant="primary", scale=0)
        draw_btn = gr.Button(value="🎲 Random sample", variant="primary", scale=0)


    with gr.Row():
        clear_btn = gr.Button(value="🗑️  Clear history", interactive=False)
        regenerate_btn = gr.Button(value="🔄  Regenerate", interactive=False)
        # share_btn = gr.Button(value="📷  Share")

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

    dummy_video_output = gr.Video(width=512, visible=False)
    gr.Examples(
        examples=[["a cute dog is playing a ball",
                   'https://fal-cdn.batuhan-941.workers.dev/files/lion/BFcM30vpeyRHFfdhbfFoY.mp4'],
                  ["Buildings on fire, old film still",
                   'https://fal-cdn.batuhan-941.workers.dev/files/zebra/r4NeCgXTkpzIBCF0DDHqJ.mp4'],
                  ["A serene underwater scene featuring a sea turtle swimming through a coral reef.",
                   'https://fal-cdn.batuhan-941.workers.dev/files/tiger/cBHesvgUzjonNUEL1FQGw.mp4'],
                  ["A futuristic hopeful busy city, purple and green color scheme",
                   'https://fal-cdn.batuhan-941.workers.dev/files/monkey/5-vUtY4_bHAhTtevZx16K.mp4']],
        inputs=[textbox, dummy_video_output])

    # model_selector_left.change(clear_history_side_by_side, inputs=None,
    #                            outputs=[state0, state1, textbox, chatbot_left, chatbot_right],
    #                            api_name="model_selector_left_side_by_side")
    # model_selector_right.change(clear_history_side_by_side, inputs=None,
    #                             outputs=[state0, state1, textbox, chatbot_left, chatbot_right],
    #                             api_name="model_selector_right_side_by_side")

    btn_list = [leftvote_btn, rightvote_btn, tie_btn, bothbad_btn, regenerate_btn, clear_btn]

    textbox.submit(
        gen_func,
        inputs=[state0, state1, textbox, model_selector_left, model_selector_right],
        outputs=[state0, state1, chatbot_left, chatbot_right],
        api_name="textbox_side_by_side"
    ).then(
        enable_buttons_side_by_side,
        inputs=None,
        outputs=btn_list
    )

    send_btn.click(
        gen_func,
        inputs=[state0, state1, textbox, model_selector_left, model_selector_right],
        outputs=[state0, state1, chatbot_left, chatbot_right],
        api_name="send_side_by_side"
    ).then(
        enable_buttons_side_by_side,
        inputs=None,
        outputs=btn_list
    )
    draw_btn.click(
        gen_func_random,
        inputs=[state0, state1, model_selector_left, model_selector_right],
        outputs=[state0, state1, chatbot_left, chatbot_right, textbox],
        api_name="draw_side_by_side"
    ).then(
        enable_buttons_side_by_side,
        inputs=None,
        outputs=btn_list
    )

    regenerate_btn.click(
        gen_func,
        inputs=[state0, state1, textbox, model_selector_left, model_selector_right],
        outputs=[state0, state1, chatbot_left, chatbot_right],
        api_name="regenerate_side_by_side"
    ).then(
        enable_buttons_side_by_side,
        inputs=None,
        outputs=btn_list
    )

    clear_btn.click(
        clear_history_side_by_side,
        inputs=None,
        outputs=[state0, state1, textbox, chatbot_left, chatbot_right],
        api_name="clear_btn_side_by_side"
    ).then(
        disable_buttons_side_by_side,
        inputs=None,
        outputs=btn_list
    )

    leftvote_btn.click(
        leftvote_last_response,
        inputs=[state0, state1, model_selector_left, model_selector_right],
        outputs=[textbox, leftvote_btn, rightvote_btn, tie_btn, bothbad_btn, model_selector_left, model_selector_right]
    )
    rightvote_btn.click(
        rightvote_last_response,
        inputs=[state0, state1, model_selector_left, model_selector_right],
        outputs=[textbox, leftvote_btn, rightvote_btn, tie_btn, bothbad_btn, model_selector_left, model_selector_right]
    )
    tie_btn.click(
        tievote_last_response,
        inputs=[state0, state1, model_selector_left, model_selector_right],
        outputs=[textbox, leftvote_btn, rightvote_btn, tie_btn, bothbad_btn, model_selector_left, model_selector_right]
    )
    bothbad_btn.click(
        bothbad_vote_last_response,
        inputs=[state0, state1, model_selector_left, model_selector_right],
        outputs=[textbox, leftvote_btn, rightvote_btn, tie_btn, bothbad_btn, model_selector_left, model_selector_right]
    )

    # share_btn.click(
    #     share_click,
    #     inputs=[state0, state1, model_selector_left, model_selector_right],
    #     outputs=[],
    #     js=share_js
    # )


def build_single_model_ui_vg(models, add_promotion_links=False):
    promotion = (
        """
- | [Code](https://huggingface.co/spaces/TIGER-Lab/GenAI-Arena/tree/main) | [Paper](https://arxiv.org/abs/2406.04485v1) | [Dataset](https://huggingface.co/datasets/TIGER-Lab/GenAI-Bench) |
"""
        if add_promotion_links
        else ""
    )

    notice_markdown = f"""
# 🏔️ Play with Video Generation Models
{promotion}

## 🤖 Choose any model to generate
"""

    state = gr.State()
    gen_func = partial(generate_vg, models.generate_video_vg)
    gen_func_random = partial(generate_vg_museum, models.generate_video_vg_museum)
    gr.Markdown(notice_markdown, elem_id="notice_markdown")

    model_list = models.model_vg_list

    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.Accordion(
                "🔍 Expand to see all model descriptions",
                open=False,
                elem_id="model_description_accordion",
        ):
            model_description_md = get_model_description_md(model_list)
            gr.Markdown(model_description_md, elem_id="model_description_markdown")

    with gr.Row():
        textbox = gr.Textbox(
            show_label=False,
            placeholder="👉 Enter your prompt and press ENTER",
            elem_id="input_box"
        )

        send_btn = gr.Button(value="Send", variant="primary", scale=0)
        draw_btn = gr.Button(value="🎲 Random sample", variant="primary", scale=0)


    with gr.Row():
        chatbot = gr.Video(width=512, autoplay=True)

    with gr.Row() as button_row:
        upvote_btn = gr.Button(value="👍  Upvote", interactive=False)
        downvote_btn = gr.Button(value="👎  Downvote", interactive=False)
        flag_btn = gr.Button(value="⚠️  Flag", interactive=False)
        regenerate_btn = gr.Button(value="🔄  Regenerate", interactive=False)
        clear_btn = gr.Button(value="🗑️  Clear history", interactive=False)

    if add_promotion_links:
        #gr.Markdown(acknowledgment_md, elem_id="ack_markdown")
        pass

    dummy_video_output = gr.Video(width=512, visible=False)
    gr.Examples(
        examples=[["a cute dog is playing a ball",
                   'https://fal-cdn.batuhan-941.workers.dev/files/lion/BFcM30vpeyRHFfdhbfFoY.mp4'],
                  ["Buildings on fire, old film still",
                   'https://fal-cdn.batuhan-941.workers.dev/files/zebra/r4NeCgXTkpzIBCF0DDHqJ.mp4'],
                  ["A serene underwater scene featuring a sea turtle swimming through a coral reef.",
                   'https://fal-cdn.batuhan-941.workers.dev/files/tiger/cBHesvgUzjonNUEL1FQGw.mp4'],
                  ["A futuristic hopeful busy city, purple and green color scheme",
                   'https://fal-cdn.batuhan-941.workers.dev/files/monkey/5-vUtY4_bHAhTtevZx16K.mp4']],
        inputs=[textbox, dummy_video_output])

    model_selector.change(clear_history, inputs=None, outputs=[state, textbox, chatbot],
                          api_name="model_selector_single")

    btn_list = [upvote_btn, downvote_btn, flag_btn, regenerate_btn, clear_btn]

    textbox.submit(
        gen_func,
        inputs=[state, textbox, model_selector],
        outputs=[state, chatbot],
        api_name="submit_btn_single",
        show_progress="full"
    ).success(
        enable_buttons,
        inputs=None,
        outputs=btn_list
    )
    send_btn.click(
        gen_func,
        inputs=[state, textbox, model_selector],
        outputs=[state, chatbot],
        api_name="send_btn_single",
        show_progress="full"
    ).success(
        enable_buttons,
        inputs=None,
        outputs=btn_list
    )

    draw_btn.click(
        gen_func_random,
        inputs=[state, model_selector],
        outputs=[state, chatbot, textbox],
        api_name="draw_btn_single",
        show_progress="full"
    ).success(
        enable_buttons,
        inputs=None,
        outputs=btn_list
    )

    upvote_btn.click(
        upvote_last_response,
        inputs=[state, model_selector],
        outputs=[textbox, upvote_btn, downvote_btn, flag_btn]
    )

    downvote_btn.click(
        downvote_last_response,
        inputs=[state, model_selector],
        outputs=[textbox, upvote_btn, downvote_btn, flag_btn]
    )
    flag_btn.click(
        flag_last_response,
        inputs=[state, model_selector],
        outputs=[textbox, upvote_btn, downvote_btn, flag_btn]
    )
    regenerate_btn.click(
        gen_func,
        inputs=[state, textbox, model_selector],
        outputs=[state, chatbot],
        api_name="regenerate_btn_single",
        show_progress="full"
    ).success(
        enable_buttons,
        inputs=None,
        outputs=btn_list
    )
    clear_btn.click(
        clear_history,
        inputs=None,
        outputs=[state, textbox, chatbot],
        api_name="clear_history_single",
        show_progress="full"
    ).then(
        disable_buttons,
        inputs=None,
        outputs=btn_list
    )