ui/worldcup_tab.py

"""
월드컵 UI 컴포넌트 및 기능
"""

import gradio as gr
import time
from worldcup import Worldcup
from config import VS_IMAGE, BATTLE_IMAGE_INIT, WORLDCUPABLE_IMAGE_CNT


def create_worldcup_tab(entryImageUrls):
    """월드컵 탭 UI 생성 함수"""
    with gr.Tab("이미지 월드컵"):
        worldcup = gr.State()
        with gr.Column():  # Column을 사용하여 수직 배열
            startWorldcupBtn = gr.Button("월드컵 시작!")

            with gr.Row():
                winImage1Btn = gr.Button("이미지 1 승리!", scale=5, visible=False)
                worldcupTitle = gr.Markdown("# ")
                winImage2Btn = gr.Button("이미지 2 승리!", scale=5, visible=False)

            with gr.Row():  # 이미지 수평 배열.
                battleImage1 = gr.Image(
                    show_label=False,
                    scale=5,
                    elem_classes="battle-image",
                    interactive=False,
                    show_download_button=False,
                )
                vsImage = gr.HTML(VS_IMAGE)
                battleImage2 = gr.Image(
                    show_label=False,
                    scale=5,
                    elem_classes="battle-image",
                    interactive=False,
                    show_download_button=False,
                )

            def winImage0(winnerIndex):
                print("winImage0 winnerIndex:", winnerIndex)
                if winnerIndex == 0:
                    return gr.update(elem_classes="fade-in non-clickable"), gr.update(
                        elem_classes="fade-out"
                    )
                else:
                    return gr.update(elem_classes="fade-out"), gr.update(
                        elem_classes="fade-in non-clickable"
                    )

            def sleep():
                time.sleep(1)

            def winImage(winnerIndex, worldcup):
                print("winnerIndex:", winnerIndex)
                print("worldcup:", worldcup)
                finalWinner = worldcup.winImage(winnerIndex)
                battleTitle = worldcup.getKangRound()
                if finalWinner:
                    return (
                        gr.update(
                            visible=winnerIndex == 0,
                            elem_classes=BATTLE_IMAGE_INIT,
                            show_download_button=True,  # 우승 이미지는 다운로드 가능하게 설정
                        ),
                        gr.update(
                            visible=winnerIndex == 1,
                            elem_classes=BATTLE_IMAGE_INIT,
                            show_download_button=True,  # 우승 이미지는 다운로드 가능하게 설정
                        ),
                        worldcup,
                        "## <center>🎉 우승 🎊</center>",
                        gr.update(visible=False),
                        gr.update(visible=True),
                        gr.update(visible=False),
                        gr.update(visible=False),
                    )
                nextMatchImages = worldcup.getCurrentRoundImages()
                print("nextMatchImages:", nextMatchImages)
                return (
                    gr.update(
                        value=nextMatchImages[0],
                        elem_classes=BATTLE_IMAGE_INIT,
                    ),
                    gr.update(
                        value=nextMatchImages[1],
                        elem_classes=BATTLE_IMAGE_INIT,
                    ),
                    worldcup,
                    battleTitle,
                    gr.skip(),
                    gr.skip(),
                    gr.skip(),
                    gr.skip(),
                )

            wOutputs = [
                battleImage1,
                battleImage2,
                worldcup,
                worldcupTitle,
                vsImage,
                startWorldcupBtn,
                winImage1Btn,
                winImage2Btn,
            ]

            for event, winIndex in [
                (winImage1Btn.click, 0),
                (winImage2Btn.click, 1),
            ]:
                event(
                    fn=lambda w, i=winIndex: winImage0(i),
                    inputs=[battleImage1],
                    outputs=[battleImage1, battleImage2],
                ).then(fn=sleep).then(
                    fn=lambda w, i=winIndex: winImage(i, w),
                    inputs=[worldcup],
                    outputs=wOutputs,
                )

            def handle_image_select(evt, image_index):
                try:
                    return winImage0(image_index)
                except:
                    return gr.skip(), gr.skip()

            battleImage1.select(
                fn=lambda evt: handle_image_select(evt, 0),
                outputs=[battleImage1, battleImage2],
            ).then(fn=sleep).then(
                fn=lambda w: winImage(0, w),
                inputs=[worldcup],
                outputs=wOutputs,
            )

            battleImage2.select(
                fn=lambda evt: handle_image_select(evt, 1),
                outputs=[battleImage1, battleImage2],
            ).then(fn=sleep).then(
                fn=lambda w: winImage(1, w),
                inputs=[worldcup],
                outputs=wOutputs,
            )

            @startWorldcupBtn.click(
                inputs=[entryImageUrls],
                outputs=[
                    worldcup,
                    battleImage1,
                    battleImage2,
                    startWorldcupBtn,
                    winImage1Btn,
                    winImage2Btn,
                    vsImage,
                    worldcupTitle,
                ],
            )
            def startWorldcupBtn(entryImageUrls):
                print("startWorldcupBtn entryImageUrls:", entryImageUrls)
                if len(entryImageUrls) in WORLDCUPABLE_IMAGE_CNT:
                    worldcup = Worldcup(images=entryImageUrls)
                    twoImages = worldcup.getCurrentRoundImages()
                    return (
                        worldcup,
                        gr.update(
                            value=twoImages[0],
                            visible=True,
                            elem_classes=BATTLE_IMAGE_INIT,
                            show_download_button=False,
                        ),
                        gr.update(
                            value=twoImages[1],
                            visible=True,
                            elem_classes=BATTLE_IMAGE_INIT,
                            show_download_button=False,
                        ),
                        gr.update(visible=False),
                        gr.update(visible=True),
                        gr.update(visible=True),
                        gr.update(visible=True),
                        worldcup.getKangRound(),
                    )
                else:
                    gr.Warning(
                        "월드컵 참가 이미지 수는 4개, 8개 또는 16개여야 합니다.",
                        duration=5,
                    )
                    return gr.skip()