파일 분리 리팩토링.

README.md

@@ -1,5 +1,5 @@
 ---
-title: Dk Image Worldcup
+title: 대교 AI 콘텐츠 이미지 월드컵
 emoji: 🐢
 colorFrom: yellow
 colorTo: green
@@ -7,12 +7,77 @@ sdk: gradio
 sdk_version: 5.20.0
 app_file: app.py
 pinned: false
-short_description: DK Image Content Generation Service
+short_description: 대교 AI 콘텐츠 이미지 생성 및 월드컵 서비스
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 대교 AI 콘텐츠 이미지 월드컵
 
-### Run the server
+이 애플리케이션은 사용자가 교재 지문을 입력하면 AI를 활용하여 이미지를 생성하고, 생성된 이미지들로 월드컵 형식의 대결을 진행할 수 있는 서비스입니다.
+
+## 프로젝트 구조
+
+```
+.
+├── app.py                # 메인 애플리케이션 파일
+├── config.py             # 설정 및 상수 정의
+├── image_generator.py    # 이미지 생성 관련 기능
+├── models.py             # 데이터 모델 정의
+├── requirements.txt      # 필요한 패키지 목록
+├── ui/                   # UI 컴포넌트
+│   ├── __init__.py       # UI 패키지 초기화
+│   ├── image_creation.py # 이미지 생성 UI
+│   ├── styles.py         # UI 스타일 정의
+│   └── worldcup.py       # 월드컵 기능 UI
+└── static/               # 정적 파일 (이미지 등)
+    ├── beauty/           # 예제 이미지
+    ├── examples/         # 예제 이미지
+    └── image/            # UI에 사용되는 이미지
+```
+
+## 기능
+
+1. **이미지 생성**: 교재 지문을 입력하면 AI를 활용하여 관련 이미지를 생성합니다.
+
+   - 다양한 이미지 스타일 선택 가능
+   - 이미지 비율 조정 가능
+   - 추가 희망사항 입력 가능
+
+2. **이미지 월드컵**: 생성된 이미지들을 토너먼트 방식으로 비교하여 최종 우승 이미지를 선정합니다.
+   - 4강, 8강, 16강 형식 지원
+   - 직관적인 UI로 쉽게 이미지 선택 가능
+
+## 서버 실행 방법
+
+```bash
+# 개발 모드
+uvicorn main:app --host 0.0.0.0 --port 8000 --reload
+
+# 서비스 실행
+./run-service.sh
+
+# 로그 확인
+tail -f nohup.out
+
+# 로그 파일 초기화
+> nohup.out
+```
+
+## 개발 환경 설정
+
+```bash
+# 가상 환경 생성 및 활성화
+python -m venv venv
+source venv/bin/activate  # Linux/Mac
+# 또는
+venv\Scripts\activate  # Windows
+
+# 의존성 설치
+pip install -r requirements.txt
+```
+
+## 추가 정보
+
+Hugging Face 설정 참조: https://huggingface.co/docs/hub/spaces-config-reference
 
 ```bash
 uvicorn main:app --host 0.0.0.0 --port 8000 --reload

app.py

@@ -1,923 +1,41 @@
-from dotenv import load_dotenv
-from dataclasses import dataclass
-from random import shuffle
-import os
-import gradio as gr
-import replicate
-import time
-
-# .env 파일 로드
-load_dotenv()
-
-gr.set_static_paths(paths=["static/"])
-
-
-def to_string(output):
-    """
-    output 을 하나의 문자열로 합치기.
-    """
-    combined_result = ""
-    for item in output:
-        combined_result += str(item)
-    return combined_result
-
-
-FINAL_ROUND = "## <center>결승전</center>"
-VS_IMAGE = "<img src='/gradio_api/file=static/image/vs.png' style='margin-top: 100px;'>"
-WORLDCUPABLE_IMAGE_CNT = [4, 8, 16]
-
-
-@dataclass
-class Worldcup:
-    """
-    이미지 월드컵 이미지 리스트를 받아서 참가 이미지들 리스트와 다음 승리자 리스트(다음 라운드 출전 리스트)를 가지고 있는 클래스.
-    이 클래스는 다음 메소드들을 가지고 있음.
-    getCurrentRoundImages (다음 대전 이미지 2개를 리스트로 반환함.)
-    winImage (0 또는 1을 입력 받아 승리자 리스트에 추가하고 다음 라운드를 위해 index를 증가시킴.)
-    처음에는 8강 이미지 (8개) 가 주어지고, 이 이미지들 중 getCurrentRoundImages 를 호출해서 그 둘 중 이긴 이미지에 대한  피드백을 winImage 에 전달하고, 이긴 이미지를 승리자 리스트에 추가함.
-    이렇게 해서 8강, 4강, 결승전 이미지들을 반환하며 대전을 진행할 수 있는 클래스
-
-    사용 예시:
-    worldcup = Worldcup(images=이미지_리스트)
-    """
-
-    images: list
-    winners: list = None
-    index: int = 0
-
-    def __post_init__(self):
-        if self.winners is None:
-            self.winners = []
-
-    def getCurrentRoundImages(self):
-        # 현재 라운드의 이미지가 모두 소진되었는지 확인
-        # 다음 대전할 이미지 2개 반환
-        return self.images[self.index : self.index + 2]
-
-    def winImage(self, winnerIndex):
-        print("winImage winnerIndex:", winnerIndex)
-        self.winners.append(self.images[self.index + winnerIndex])
-        self.index += 2
-
-        if self.getKangRound() == FINAL_ROUND:
-            return self.winners[0]
-
-        if self.index >= len(self.images):
-            print("winImage 다음 라운드로 진행", self.index, len(self.images))
-            # 다음 라운드로 진행: winners를 새로운 images로 설정
-            self.images = self.winners
-            self.winners = []
-            self.index = 0
-
-    # 현재 몇강인지 가져오는 함수
-    def getKang(self):
-        return len(self.images)
-
-    # 현재 라운드 가져오는 함수 (8강 2차전 할 때, 2에 해당 하는 값)
-    def getRound(self):
-        return self.index // 2 + 1
-
-    def getKangRound(self):
-        if self.getKang() == 2:
-            return FINAL_ROUND
-        return f"## <center>{self.getKang()}강 {self.getRound()}차전</center>"
-
-
-imageStyleMap = {
-    "알아서": "Something that you think is the best.",
-    "실사": "photo-realistic",
-    "2D애니": "Classic 90s Disney animation style, 2D hand-drawn aesthetic, rich color palette, traditional cel animation look, expressive character design, detailed painted backgrounds, dramatic lighting, Disney Renaissance era, vibrant scenery, soft shadows, cinematic composition, animated features, warm color tones, characterized by Glen Keane and Mark Henn artistic influence, Disney traditional animation techniques, theatrical quality.",
-    "일본2D애니": "Studio Ghibli style, Hayao Miyazaki aesthetic, hand-drawn animation, whimsical natural environments, soft pastel color palette, detailed background art, nostalgic lighting, ethereal atmosphere, fantastical elements blended with realism, delicate line work",
-    "3D애니메이션": "3d_animation, Disney Pixar",
-    "웹툰": "webtoon, manga",
-    "일러스트": "illustration, Hand-drawn art, Artwork",
-}
-
-HIGH_PRICE_OPTION = "비싼거(60원/장)"
-LOW_PRICE_OPTION = "싼거(5원/장)"
-HIGH_PRICE = 60
-LOW_PRICE = 5
-CUSTOM = "custom(비싼모델전용)"
-EXAMPLE_SPRING_URLS = [
-    "static/examples/out-1.webp",
-    "static/examples/out-2.webp",
-    "static/examples/out-3.webp",
-    "static/examples/out-4.webp",
-    "static/examples/out-5.webp",
-    "static/examples/out-6.webp",
-    "static/examples/out-7.webp",
-    "static/examples/out-0.webp",
-]
-
-EXAMPLE_BEAUTY_URLS = [
-    "static/beauty/out-1.webp",
-    "static/beauty/out-2.webp",
-    "static/beauty/out-3.webp",
-    "static/beauty/out-4.webp",
-    "static/beauty/out-5.webp",
-    "static/beauty/out-6.webp",
-    "static/beauty/out-7.webp",
-    "static/beauty/out-0.webp",
-]
-
-EXAMPLE_ENTRY_URLS = []
-# EXAMPLE_ENTRY_URLS = EXAMPLE_BEAUTY_URLS + EXAMPLE_SPRING_URLS
-# shuffle(EXAMPLE_ENTRY_URLS)
-
-examplePrompt = "A breathtaking beautiful Korean woman."
-
-
-def genFluxPrompt(userPrompt, additionalComment, ratio, imageStyle):
-    """
-    userPrompt 와 additionalComment 를 받아서 비율에 맞는 이미지 생성을 위한 prompt 생성.
-    """
-    imageStyle = imageStyleMap[imageStyle]
-    # print("genFluxPrompt ", userPrompt, ratio, imageStyle)
-    # The ibm-granite/granite-3.1-8b-instruct model can stream output as it's running.
-
-    additionalComment = (
-        f"\n# Important note: {additionalComment}\n" if additionalComment else ""
-    )
-
-    prompt = (
-        f"Please create a prompt that will generate a best quality image that can express the following sentence in English.(DO NOT INCLUDE ANY KOREAN LANGUAGE.)"
-        f"\n# Image generation info\n"
-        f"\n- Aspect ratio: {ratio}\n"
-        f"\n- Image style: {imageStyle}\n"
-        "\n# Description for the image.\n" + userPrompt + additionalComment
-    )
-
-    print("genFluxPrompt prompt:", prompt)
-
-    result = replicate.run(
-        "anthropic/claude-3.5-haiku",
-        input={
-            "top_k": 50,
-            "top_p": 0.9,
-            "prompt": prompt,
-            "max_tokens": 256,
-            "min_tokens": 0,
-            "temperature": 0.6,
-            "system_prompt": (
-                "You are a professional prompt engineer specializing in creating prompts for txt2img AI model."
-                "You always create prompts that can extract the impressive output."
-                "Make sure to emphasize the intention for 'Important note:' section in the prompts if it exists."
-                "Do not generate negative prompts!"
-            ),
-            "presence_penalty": 0,
-            "frequency_penalty": 0,
-        },
-    )
-    prompt = to_string(result)
-    print("genFluxPrompt prompt:", prompt)
-    return prompt
-
-
-imageModelMap = {
-    HIGH_PRICE_OPTION: "black-forest-labs/flux-1.1-pro",
-    LOW_PRICE_OPTION: "black-forest-labs/flux-schnell",
-}
-
-
-def genImage(prompt, ratio, imageModelKind, imgWidth, imgHeight, imageNum=1):
-    """
-    prompt 를 받아서 비율에 맞는 이미지 imageNum 만큼 생성.
-    """
-
-    imageModel = imageModelMap[imageModelKind]
-
-    if ratio == CUSTOM:
-        input = {
-            "prompt": prompt,
-            "aspect_ratio": ratio,  # gradio radio 버튼에서 선택된 값
-            "width": int(imgWidth),
-            "height": int(imgHeight),
-            "aspect_ratio": "custom",
-            "output_format": "webp",
-            "output_quality": 90,
-        }
-        # custom 일 때는 비싼 모델로 생성.
-        imageModel = imageModelMap[HIGH_PRICE_OPTION]
-    else:
-        input = {
-            "prompt": prompt,
-            "aspect_ratio": ratio,  # gradio radio 버튼에서 선택된 값
-            "output_format": "webp",
-            "output_quality": 90,
-            "num_outputs": imageNum,
-        }
-
-    print("genImage input:", input)
-
-    imageModel = imageModelMap[imageModelKind]
-    result = replicate.run(imageModel, input=input)
-
-    print("Generated Image Info:", result)
-    # imgUrls = [str(img) for img in result]
-    # imgUrl = str(result) if type(result) != list else str(result[0])
-    imgUrl = str(result) if not isinstance(result, list) else str(result[0])
-    if imageNum > 1:
-        imgUrls = [str(img) for img in result]
-        print("genImage imgUrls:", imgUrls)
-        return imgUrls
-    else:
-        print("genImage imgUrl:", imgUrl)
-        return imgUrl
-
-
-def reduxImage(prompt, url):
-    """
-    url 의 이미지를 재생성.
-
-    output = replicate.run(
-    "black-forest-labs/flux-1.1-pro",
-        input={
-            "width": 1024,
-            "height": 480,
-            "prompt": "one boy and 3 girls hands and hands playing in the school.",
-            "aspect_ratio": "custom",
-            "image_prompt": "https://replicate.delivery/xezq/CLKVkX1QXeXrMy1tH43zJmCk6RgBszqmQdK45AOUTedCkyUUA/tmpucuderjn.webp",
-            "output_format": "webp",
-            "output_quality": 80,
-            "safety_tolerance": 2,
-            "prompt_upsampling": True
-        }
-    )
-    """
-    result = replicate.run(
-        "black-forest-labs/flux-1.1-pro",
-        input={
-            "prompt": prompt,
-            "aspect_ratio": "16:9",
-            "image_prompt": url,
-            "output_format": "webp",
-            "output_quality": 80,
-            "safety_tolerance": 2,  # 1 is most strict and 6 is most permissive
-            "prompt_upsampling": True,
-        },
-    )
-    return str(result)
-
-
-def genPromptAndImage(
-    userPrompt,
-    additionalComment,
-    fluxPrompt,
-    ratio,
-    imageStyle,
-    imageModel,
-    highImageCnt,
-    lowImageCnt,
-    imgWidth,
-    imgHeight,
-):
-    """
-    fluxPrompt 가 빈 문자열이면 새로운 prompt 를 생성하고,
-    빈 문자열이 아니면 기존의 prompt 를 사용해서 이미지 생성.
-    """
-    print(
-        "genPromptAndImage:",
-        ratio,
-        imageStyle,
-        imageModel,
-        highImageCnt,
-        lowImageCnt,
-    )
-
-    if fluxPrompt == "":
-        fluxPrompt = genFluxPrompt(userPrompt, additionalComment, ratio, imageStyle)
-
-    imgUrl = genImage(fluxPrompt, ratio, imageModel, imgWidth, imgHeight)
-
-    highImageCnt = int(highImageCnt)
-    lowImageCnt = int(lowImageCnt)
-    if imageModel == HIGH_PRICE_OPTION:
-        highImageCnt += 1
-    else:
-        lowImageCnt += 1
-
-    totalPrice = highImageCnt * HIGH_PRICE + lowImageCnt * LOW_PRICE
-    return fluxPrompt, highImageCnt, lowImageCnt, totalPrice, imgUrl, None
-
-
-# def genImageWithOrgText(
-#     userPrompt, additionalComment, fluxPrompt, ratio, imageStyle, imageModel, highImageCnt, lowImageCnt
-# ):
-#     """
-#     userPrompt와 additionalComment 만으로 직접 image 를 생성.
-#     """
-#     fluxPrompt = (
-#         userPrompt
-#         + "\n\nImportant information: "
-#         + additionalComment
-#         + "\n\nImage style: "
-#         + imageStyle
-#     )
-#     return genPromptAndImage(userPrompt, additionalComment, fluxPrompt, ratio, imageStyle)
-
-
-APP_TITLE = """
-      <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
-          <div style="display: flex; align-items: center; gap: 10px">
-              <picture>
-                <source srcset="/gradio_api/file=static/image/daekyo_logo_kr_white.png" media="(prefers-color-scheme: dark)">
-                <img src="/gradio_api/file=static/image/daekyo_logo_kr.png" width='70' height='70'/>
-              </picture>
-              <span style="font-size: 40px; font-weight: bold; margin-left: 10px;"> 대교 AI 콘텐츠 이미지 월드컵 🏆</span>
-          </div>
-          <a href="/logout" style="text-decoration: none;">
-              <button style="padding: 8px 16px; font-size: 16px; background-color: #446699; color: white; border: none; border-radius: 4px; cursor: pointer;">Logout</button>
-          </a>
-      </div>
-    """
-
-GEN_IMAGE_DESC = """봄을 담은 정원
-It was the start of spring.
-Our teacher had a great idea.
-"Let's make a vegetable garden behind the school!"
-We all worked together.
-First, we dug holes.
-Next, we planted different seeds.
-After that, we watered the garden every day.
-Tiny plants soon appeared in the soil.
-Slowly, they got bigger and bigger.
-Finally, we picked the vegetables!
-There were tomatoes, lettuce, and carrots.
-We cut them into small pieces and made a colorful salad!
-It was fresh and delicious. """
-
-CSS = """
-footer {visibility: hidden}
-
-/* 이미지 클릭할 때, 포인터 커서로 변경 */
-.battle-image img { cursor: pointer !important; }
-
-.tiny-input {
-    width: '20px',
-}
-
-/***********************************************/
-/* 이미지 사라지는 애니메이션 */
-/***********************************************/
-/* CSS for fade-out animation */
-.fade-out {
-  animation: fadeOutAndShrink 1s forwards;
-  /* Add these properties to ensure smooth animation */
-  transform-origin: center;
-  display: inline-block;
-}
-
-@keyframes fadeOutAndShrink {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0);
-  }
-}
-
-/* Optional: Add this if you want to keep the layout space after element disappears */
-.fade-out.preserve-space {
-  visibility: hidden;
-  opacity: 0;
-  animation: fadeOutAndShrinkPreserve 1s forwards;
-}
-
-@keyframes fadeOutAndShrinkPreserve {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-    visibility: visible;
-  }
-  99% {
-    transform: scale(0.01);
-    opacity: 0;
-    visibility: visible;
-  }
-  100% {
-    transform: scale(0);
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-
-
-/***********************************************/
-/* 이미지 강조를 위해 키우는 애니메이션 */
-/***********************************************/
-/* CSS for fade-in animation with scale */
-.fade-in {
-  animation: fadeInAndScale 0.3s ease forwards;
-  /* Add these properties to ensure smooth animation */
-  transform-origin: center;
-  display: inline-block;
-  opacity: 0; /* Start with opacity 0 */
-}
-
-@keyframes fadeInAndScale {
-  0% {
-    opacity: 0;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1.15); /* Element grows to 1.15 times its original size */
-  }
-}
-
-
-/***********************************************/
-/* 처음에는 안보이다가 점점 나타나는 애니메이션 */
-/***********************************************/
-.fade-in-visibility {
-  /* 처음에는 보이지 않음 */
-  opacity: 0;
-  /* 애니메이션 설정 */
-  animation: fadeInVisibility 1s ease-in forwards;
-  /* 애니메이션을 부드럽게 만들기 위한 설정 */
-  will-change: opacity;
-}
-
-@keyframes fadeInVisibility {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-/***********************************************/
-/* 이미지 클릭 비활성화 */
-/***********************************************/
-.non-clickable {
-  pointer-events: none; /* 모든 포인터 이벤트(클릭, 호버 등)를 비활성화 */
-  user-select: none; /* 텍스트 선택 방지 */
-}
 """
+대교 AI 콘텐츠 이미지 월드컵 애플리케이션
 
-BATTLE_IMAGE_INIT = "battle-image fade-in-visibility"
+��� 애플리케이션은 사용자가 입력한 텍스트 기반으로 이미지를 생성하고,
+생성된 이미지들로 월드컵 형식의 대결을 진행할 수 있는 인터페이스를 제공합니다.
+"""
 
-# gr.set_static_paths(paths=["static/image/", "static/examples/"])
+import gradio as gr
+import os
+from config import APP_TITLE, EXAMPLE_ENTRY_URLS
+from ui import create_image_tab, create_worldcup_tab, CSS, theme
 
-# theme = "NoCrypt/miku"  # 하늘색 테마
-# theme = "JohnSmith9982/small_and_pretty"  # 연두색 테마
-# theme = "ParityError/Interstellar"  # 보라색 테마
-# theme = gr.themes.Ocean()  # 연두
-# theme = gr.themes.Origin() # Default 주황
-theme = gr.themes.Base()  # 파랑 테마 심플.
+gr.set_static_paths(paths=["static/"])
 
 
 def setup_demo():
+    """
+    Gradio 인터페이스를 설정하는 함수
+    """
     with gr.Blocks(theme=theme, css=CSS) as demo:
-        # VS_IMAGE = "<img src='/gradio_api/file=static/image/vs.png' style='margin-top: 100px;'>"
-        # gr.Image(value="static/examples/out-4.webp")
-        current_img_url = gr.State("")
-        selectedImageIndex = gr.State(0)
-        entryImageUrls = gr.State(EXAMPLE_ENTRY_URLS)  # 저장된 URL 목록
-        # entryImageUrls = gr.State([])  # 저장된 URL 목록
-
-        # gr.Markdown("# ![대교로고](/gradio_api/file=static/image/daekyo_logo_kr_white.png) 대교 콘텐츠 이미지 생성기")
+        # 상태 변수 초기화
         gr.Markdown(APP_TITLE)
-        with gr.Tab("이미지 생성"):
-            with gr.Column():  # Column을 사용하여 수직 배열
-                # with gr.Group():
-                with gr.Row():
-                    # 주: Hot reload 한 후 logout을 하면 "AttributeError: 'Blocks' object has no attribute 'auth_message'" 라는 메시지가 뜨면서 gradio 서버가 죽음.
-                    # logoutBtn = gr.Button("Logout", link="/logout")
-                    with gr.Column():  # Column을 사용하여 수직 배열
-                        userPrompt = gr.TextArea(
-                            label="교재 지문 (필수)",
-                            value=GEN_IMAGE_DESC,
-                            max_lines=5,
-                        )
-                        additionalComment = gr.Textbox(
-                            label="추가 희망사항 (옵셔널)", lines=2, value=""
-                        )
-                    with gr.Column():
-                        with gr.Accordion("상세 설정", open=False):
-                            with gr.Column():  # Column을 사용하여 수직 배열
-                                with gr.Row():
-                                    highImgCnt = gr.Textbox(
-                                        label="비싼 이미지",
-                                        value="0",
-                                        interactive=False,
-                                    )
-                                    lowImgCnt = gr.Textbox(
-                                        label="싼 이미지", value="0", interactive=False
-                                    )
-                                    totalPrice = gr.Textbox(
-                                        label="총 이미지 생성 비용(원)",
-                                        value="0",
-                                        interactive=False,
-                                    )
-                                genModelKind = gr.Radio(
-                                    [LOW_PRICE_OPTION, HIGH_PRICE_OPTION],
-                                    label="이미지 생성 모델",
-                                    value=LOW_PRICE_OPTION,
-                                )
-                                with gr.Row():
-                                    aspectRatio = gr.Radio(
-                                        ["1:1", "4:3", "16:9", CUSTOM],
-                                        label="이미지 비율",
-                                        value="16:9",
-                                        scale=4,
-                                    )
-                                    imgWidth = gr.Number(
-                                        label="너비 (32의배수)",
-                                        value=1440,
-                                        scale=1,
-                                        visible=False,
-                                        maximum=1440,
-                                        minimum=256,
-                                        step=32,
-                                    )
-                                    imgHeight = gr.Number(
-                                        label="높이 (32의배수)",
-                                        value=768,
-                                        scale=1,
-                                        visible=False,
-                                        maximum=1440,
-                                        minimum=256,
-                                        step=32,
-                                    )
-
-                                def custom_aspect_ratio(ratio):
-                                    if ratio == CUSTOM:
-                                        return (
-                                            # HIGH_PRICE_OPTION,
-                                            gr.update(
-                                                value=HIGH_PRICE_OPTION,
-                                                interactive=False,
-                                            ),
-                                            gr.update(visible=True),
-                                            gr.update(visible=True),
-                                        )
-                                    else:
-                                        return (
-                                            gr.update(interactive=True),
-                                            gr.update(visible=False),
-                                            gr.update(visible=False),
-                                        )
-
-                                # genModelKind HIGH_PRICE_OPTION 으로 바꿔주는 곳은 아래서 해주고 있음.
-                                aspectRatio.change(
-                                    fn=custom_aspect_ratio,
-                                    inputs=aspectRatio,
-                                    outputs=[genModelKind, imgWidth, imgHeight],
-                                )
-
-                                styleList = list(imageStyleMap.keys())
-                                imageStyle = gr.Radio(
-                                    styleList, label="이미지 스타일", value="알아서"
-                                )
-                                with gr.Accordion("Prompt info", open=False):
-                                    fluxPrompt = gr.Textbox(
-                                        label="Flux Prompt", value="", lines=10
-                                    )
-
-                with gr.Row():
-                    genSmartImage = gr.Button("교재 지문 삽화 이미지 생성!")
-                    removeEntryWorldcupBtn = gr.Button("현재 이미지 제거")
-
-                with gr.Column():
-                    # entryList = gr.State([])
-                    # outputImg = gr.Image(label="생성된 이미지")
-                    progressBar = gr.Image(
-                        label=None, interactive=False, visible=False, height=28
-                    )
-                    entryListGallery = gr.Gallery(
-                        label="이미지 월드컵 진출 이미지",
-                        preview=True,
-                        allow_preview=True,
-                        interactive=False,
-                        # height=768,
-                    )
-                    with gr.Row():
-                        entryCount = gr.Markdown("## 이미지 월드컵 진출 이미지 수: 0")
-                        goImageWorldCupBtn = gr.Button(
-                            "이미지 월드컵 하러가기", visible=False
-                        )
-
-                @entryListGallery.select(outputs=selectedImageIndex)
-                def setSelectedImageIndex(selection: gr.SelectData):
-                    return selection.index
-
-                def removeSelectedEntry(entryList, selectedIndex):
-                    if selectedIndex is None or len(entryList) == 0:
-                        return gr.update(value=entryList), entryList
-
-                    del entryList[selectedIndex]
-                    return (
-                        entryList,
-                        entryList,
-                        f"## 이미지 월드컵 진출 이미지 수: {len(entryList)}",
-                    )
-
-                # 왠지 모르게 마지막 요소를 지우면 preview=True 가 안되서 이렇게 함.
-                def reSelectedEntry(entryList):
-                    return gr.update(selected_index=len(entryList) - 1, preview=True)
-
-                removeEntryWorldcupBtn.click(
-                    fn=removeSelectedEntry,
-                    inputs=[entryImageUrls, selectedImageIndex],
-                    outputs=[entryListGallery, entryImageUrls, entryCount],
-                ).then(
-                    fn=reSelectedEntry,
-                    inputs=entryImageUrls,
-                    outputs=entryListGallery,
-                )
-
-                # 이벤트 처리.
-                # 입력값이 변경될 때마다 Flux Prompt 초기화
-                for component in [
-                    userPrompt,
-                    aspectRatio,
-                    imageStyle,
-                    additionalComment,
-                ]:
-                    component.change(
-                        fn=lambda x: "", inputs=fluxPrompt, outputs=fluxPrompt
-                    )
-                genImageInputs = [
-                    userPrompt,
-                    additionalComment,
-                    fluxPrompt,
-                    aspectRatio,
-                    imageStyle,
-                    genModelKind,
-                    highImgCnt,
-                    lowImgCnt,
-                    imgWidth,
-                    imgHeight,
-                ]
 
-                def show_progress():
-                    return gr.update(label="이미지 생성 중", visible=True)
+        # 이미지 생성 탭 생성
+        entryImageUrls = create_image_tab()
 
-                def hide_progress():
-                    return gr.update(visible=False)
-
-                genSmartImage.click(fn=show_progress, outputs=progressBar).then(
-                    fn=genPromptAndImage,
-                    inputs=genImageInputs,
-                    outputs=[
-                        fluxPrompt,
-                        highImgCnt,
-                        lowImgCnt,
-                        totalPrice,
-                        current_img_url,
-                        progressBar,
-                    ],
-                ).then(
-                    fn=lambda entryList, imgUrl: (
-                        gr.update(
-                            value=[*entryList, imgUrl],
-                            preview=True,
-                            selected_index=len(entryList),
-                        ),
-                        entryList + [imgUrl],
-                        len(entryList),
-                        gr.update(visible=False),
-                    ),
-                    inputs=[entryImageUrls, current_img_url],
-                    outputs=[
-                        entryListGallery,
-                        entryImageUrls,
-                        selectedImageIndex,
-                        progressBar,
-                    ],
-                ).then(
-                    fn=lambda entryImageUrls: f"## 이미지 월드컵 진출 이미지 수: {len(entryImageUrls)}",
-                    inputs=entryImageUrls,
-                    outputs=entryCount,
-                ).then(
-                    fn=lambda entryCountTxt, entryList: (
-                        [
-                            entryCountTxt + " (이미지 월드컵 가능!)",
-                            gr.update(visible=False),
-                            gr.Info(
-                                f"{len(entryList)}개의 이미지가 만들어졌습니다. '이미지 월드컵'을 시작하실 수 있습니다!",
-                                duration=5,
-                            ),
-                        ]
-                        if len(entryList) in WORLDCUPABLE_IMAGE_CNT
-                        else [entryCountTxt, gr.update(visible=False)]
-                    ),
-                    inputs=[entryCount, entryImageUrls],
-                    outputs=[entryCount, goImageWorldCupBtn],
-                )
-
-        with gr.Tab("이미지 월드컵"):
-            # vsIndex = gr.State(0)
-            # worldcupTitle = gr.Markdown("# 이미지 월드컵")
-            worldcup = gr.State()
-            with gr.Column():  # Column을 사용하여 수직 배열
-                startWorldcupBtn = gr.Button("월드컵 시작!")
-
-                with gr.Row():
-                    winImage1Btn = gr.Button("이미지 1 승리!", scale=5, visible=False)
-                    # worldcupTitle = gr.HTML("<span> </span>")
-                    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,
-                            ),
-                            gr.update(
-                                visible=winnerIndex == 1,
-                                elem_classes=BATTLE_IMAGE_INIT,
-                            ),
-                            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,
-                ]
-
-                # winImage1Btn_click = winImage1Btn.click
-                # winImage1Btn_click(
-                #     fn=lambda w: winImage0(0),
-                #     inputs=[battleImage1],
-                #     outputs=[battleImage1, battleImage2],
-                # ).then(fn=sleep, inputs=[], outputs=[]).then(
-                #     fn=lambda w: winImage(0, w), inputs=[worldcup], outputs=wOutputs
-                # )
-                # winImage2Btn.click(
-                #     fn=lambda w: winImage(1, w), inputs=[worldcup], outputs=wOutputs
-                # )
-                # battleImage1.select(
-                #     fn=lambda w: winImage(0, w), inputs=[worldcup], outputs=wOutputs
-                # )
-                # battleImage2.select(
-                #     fn=lambda w: winImage(1, w), inputs=[worldcup], outputs=wOutputs
-                # )
-
-                for event, winIndex in [
-                    (winImage1Btn.click, 0),
-                    (winImage2Btn.click, 1),
-                    (battleImage1.select, 0),
-                    (battleImage2.select, 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,
-                    )
-
-                @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,
-                            ),
-                            gr.update(
-                                value=twoImages[1],
-                                visible=True,
-                                elem_classes=BATTLE_IMAGE_INIT,
-                            ),
-                            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()
-
-                # load_example_btn = gr.Button("예제 이미지 4개 생성 (20원)")
-
-                # @load_example_btn.click(inputs=genImageInputs, outputs=entryImageUrls)
-                # def load_example_images(*args):
-                #     gr.Warning("예제 이미지 로드중...", duration=5)
-                #     imgUrls = genImage(
-                #         prompt=examplePrompt,
-                #         ratio="4:3",
-                #         imageModelKind=LOW_PRICE_OPTION,
-                #         imgWidth=1024,
-                #         imgHeight=768,
-                #         imageNum=4,
-                #     )
-                #     gr.Info(
-                #         "예제 이미지가 로드되었습니다. '월드컵 시작!' 버튼을 눌러주세요.",
-                #         duration=5,
-                #     )
-                #     return imgUrls
+        # 월드컵 탭 생성
+        create_worldcup_tab(entryImageUrls)
 
     return demo
 
 
-# hot reload 하려면 demo는 전역변수로 해야 함. (변수명도 demo 고정!)
+# 애플리케이션을 시작할 때 사용하는 데모 인스턴스
 demo = setup_demo()
 
-# print("os.environ.get(getenv('default_pw')):", os.environ.get("default_pw"))
-
 if __name__ == "__main__":
     demo.launch(
         auth=("daekyo", os.environ.get("DEFAULT_PW")),
         server_name="0.0.0.0",
         ssr_mode=False,
     )
-
-# TODO:
-# - 이미지 사이즈를 원하는대로 변경하는 기능. (flux 1.1 pro 에서 지원)
-# - 이미지를 제시해주고 그 이미지와 비슷한 이미지를 만드는 기능. (img2img)
-# - 특정 부분만 수정하는 기능. https://replicate.com/black-forest-labs/flux-fill-pro

config.py

@@ -0,0 +1,101 @@
+"""
+설정 및 상수 정의 파일
+"""
+
+from dotenv import load_dotenv
+import os
+
+# .env 파일 로드
+load_dotenv()
+
+# 월드컵 관련 상수
+FINAL_ROUND = "## <center>결승전</center>"
+VS_IMAGE = "<img src='/gradio_api/file=static/image/vs.png' style='margin-top: 100px;'>"
+WORLDCUPABLE_IMAGE_CNT = [4, 8, 16]
+BATTLE_IMAGE_INIT = "battle-image fade-in-visibility"
+
+# 이미지 생성 관련 상수
+HIGH_PRICE_OPTION = "비싼거(60원/장)"
+LOW_PRICE_OPTION = "싼거(5원/장)"
+HIGH_PRICE = 60
+LOW_PRICE = 5
+CUSTOM = "custom(비싼모델전용)"
+
+# 예제 이미지 URL
+EXAMPLE_SPRING_URLS = [
+    "static/examples/out-1.webp",
+    "static/examples/out-2.webp",
+    "static/examples/out-3.webp",
+    "static/examples/out-4.webp",
+    "static/examples/out-5.webp",
+    "static/examples/out-6.webp",
+    "static/examples/out-7.webp",
+    "static/examples/out-0.webp",
+]
+
+EXAMPLE_BEAUTY_URLS = [
+    "static/beauty/out-1.webp",
+    "static/beauty/out-2.webp",
+    "static/beauty/out-3.webp",
+    "static/beauty/out-4.webp",
+    "static/beauty/out-5.webp",
+    "static/beauty/out-6.webp",
+    "static/beauty/out-7.webp",
+    "static/beauty/out-0.webp",
+]
+
+EXAMPLE_ENTRY_URLS = []
+# EXAMPLE_ENTRY_URLS = EXAMPLE_BEAUTY_URLS + EXAMPLE_SPRING_URLS
+# shuffle(EXAMPLE_ENTRY_URLS)
+
+# 샘플 프롬프트
+examplePrompt = "A breathtaking beautiful Korean woman."
+
+# 이미지 스타일 맵핑
+imageStyleMap = {
+    "알아서": "Something that you think is the best.",
+    "실사": "photo-realistic",
+    "2D애니": "Classic 90s Disney animation style, 2D hand-drawn aesthetic, rich color palette, traditional cel animation look, expressive character design, detailed painted backgrounds, dramatic lighting, Disney Renaissance era, vibrant scenery, soft shadows, cinematic composition, animated features, warm color tones, characterized by Glen Keane and Mark Henn artistic influence, Disney traditional animation techniques, theatrical quality.",
+    "일본2D애니": "Studio Ghibli style, Hayao Miyazaki aesthetic, hand-drawn animation, whimsical natural environments, soft pastel color palette, detailed background art, nostalgic lighting, ethereal atmosphere, fantastical elements blended with realism, delicate line work",
+    "3D애니메이션": "3d_animation, Disney Pixar",
+    "웹툰": "webtoon, manga",
+    "일러스트": "illustration, Hand-drawn art, Artwork",
+}
+
+# 이미지 모델 맵핑
+imageModelMap = {
+    HIGH_PRICE_OPTION: "black-forest-labs/flux-1.1-pro",
+    LOW_PRICE_OPTION: "black-forest-labs/flux-schnell",
+}
+
+# 에플리케이션 UI 텍스트
+APP_TITLE = """
+      <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
+          <div style="display: flex; align-items: center; gap: 10px">
+              <picture>
+                <source srcset="/gradio_api/file=static/image/daekyo_logo_kr_white.png" media="(prefers-color-scheme: dark)">
+                <img src="/gradio_api/file=static/image/daekyo_logo_kr.png" width='70' height='70'/>
+              </picture>
+              <span style="font-size: 40px; font-weight: bold; margin-left: 10px;"> 대교 AI 콘텐츠 이미지 월드컵 🏆</span>
+          </div>
+          <a href="/logout" style="text-decoration: none;">
+              <button style="padding: 8px 16px; font-size: 16px; background-color: #446699; color: white; border: none; border-radius: 4px; cursor: pointer;">Logout</button>
+          </a>
+      </div>
+    """
+
+# 이미지 생성 샘플 텍스트
+GEN_IMAGE_DESC = """봄을 담은 정원
+It was the start of spring.
+Our teacher had a great idea.
+"Let's make a vegetable garden behind the school!"
+We all worked together.
+First, we dug holes.
+Next, we planted different seeds.
+After that, we watered the garden every day.
+Tiny plants soon appeared in the soil.
+Slowly, they got bigger and bigger.
+Finally, we picked the vegetables!
+There were tomatoes, lettuce, and carrots.
+We cut them into small pieces and made a colorful salad!
+It was fresh and delicious. """

image_generator.py

@@ -0,0 +1,190 @@
+"""
+이미지 생성 관련 기능을 담당하는 모듈
+"""
+
+import replicate
+from config import (
+    imageStyleMap,
+    imageModelMap,
+    HIGH_PRICE_OPTION,
+    LOW_PRICE_OPTION,
+    HIGH_PRICE,
+    LOW_PRICE,
+)
+
+
+def to_string(output):
+    """
+    output 을 하나의 문자열로 합치기.
+    """
+    combined_result = ""
+    for item in output:
+        combined_result += str(item)
+    return combined_result
+
+
+def genFluxPrompt(userPrompt, additionalComment, ratio, imageStyle):
+    """
+    userPrompt 와 additionalComment 를 받아서 비율에 맞는 이미지 생성을 위한 prompt 생성.
+    """
+    imageStyle = imageStyleMap[imageStyle]
+    # print("genFluxPrompt ", userPrompt, ratio, imageStyle)
+    # The ibm-granite/granite-3.1-8b-instruct model can stream output as it's running.
+
+    additionalComment = (
+        f"\n# Important note: {additionalComment}\n" if additionalComment else ""
+    )
+
+    prompt = (
+        f"Please create a prompt that will generate a best quality image that can express the following sentence in English.(DO NOT INCLUDE ANY KOREAN LANGUAGE.)"
+        f"\n# Image generation info\n"
+        f"\n- Aspect ratio: {ratio}\n"
+        f"\n- Image style: {imageStyle}\n"
+        "\n# Description for the image.\n" + userPrompt + additionalComment
+    )
+
+    print("genFluxPrompt prompt:", prompt)
+
+    result = replicate.run(
+        "anthropic/claude-3.5-haiku",
+        input={
+            "top_k": 50,
+            "top_p": 0.9,
+            "prompt": prompt,
+            "max_tokens": 256,
+            "min_tokens": 0,
+            "temperature": 0.6,
+            "system_prompt": (
+                "You are a professional prompt engineer specializing in creating prompts for txt2img AI model."
+                "You always create prompts that can extract the impressive output."
+                "Make sure to emphasize the intention for 'Important note:' section in the prompts if it exists."
+                "Do not generate negative prompts!"
+            ),
+            "presence_penalty": 0,
+            "frequency_penalty": 0,
+        },
+    )
+    prompt = to_string(result)
+    print("genFluxPrompt prompt:", prompt)
+    return prompt
+
+
+def genImage(prompt, ratio, imageModelKind, imgWidth, imgHeight, imageNum=1):
+    """
+    prompt 를 받아서 비율에 맞는 이미지 imageNum 만큼 생성.
+    """
+
+    imageModel = imageModelMap[imageModelKind]
+
+    if ratio == "custom":
+        input = {
+            "prompt": prompt,
+            "aspect_ratio": ratio,  # gradio radio 버튼에서 선택된 값
+            "width": int(imgWidth),
+            "height": int(imgHeight),
+            "aspect_ratio": "custom",
+            "output_format": "webp",
+            "output_quality": 90,
+        }
+        # custom 일 때는 비싼 모델로 생성.
+        imageModel = imageModelMap[HIGH_PRICE_OPTION]
+    else:
+        input = {
+            "prompt": prompt,
+            "aspect_ratio": ratio,  # gradio radio 버튼에서 선택된 값
+            "output_format": "webp",
+            "output_quality": 90,
+            "num_outputs": imageNum,
+        }
+
+    print("genImage input:", input)
+
+    imageModel = imageModelMap[imageModelKind]
+    result = replicate.run(imageModel, input=input)
+
+    print("Generated Image Info:", result)
+    # imgUrls = [str(img) for img in result]
+    # imgUrl = str(result) if type(result) != list else str(result[0])
+    imgUrl = str(result) if not isinstance(result, list) else str(result[0])
+    if imageNum > 1:
+        imgUrls = [str(img) for img in result]
+        print("genImage imgUrls:", imgUrls)
+        return imgUrls
+    else:
+        print("genImage imgUrl:", imgUrl)
+        return imgUrl
+
+
+def reduxImage(prompt, url):
+    """
+    url 의 이미지를 재생성.
+
+    output = replicate.run(
+    "black-forest-labs/flux-1.1-pro",
+        input={
+            "width": 1024,
+            "height": 480,
+            "prompt": "one boy and 3 girls hands and hands playing in the school.",
+            "aspect_ratio": "custom",
+            "image_prompt": "https://replicate.delivery/xezq/CLKVkX1QXeXrMy1tH43zJmCk6RgBszqmQdK45AOUTedCkyUUA/tmpucuderjn.webp",
+            "output_format": "webp",
+            "output_quality": 80,
+            "safety_tolerance": 2,
+            "prompt_upsampling": True
+        }
+    )
+    """
+    result = replicate.run(
+        "black-forest-labs/flux-1.1-pro",
+        input={
+            "prompt": prompt,
+            "aspect_ratio": "16:9",
+            "image_prompt": url,
+            "output_format": "webp",
+            "output_quality": 80,
+            "safety_tolerance": 2,  # 1 is most strict and 6 is most permissive
+            "prompt_upsampling": True,
+        },
+    )
+    return str(result)
+
+
+def genPromptAndImage(
+    userPrompt,
+    additionalComment,
+    fluxPrompt,
+    ratio,
+    imageStyle,
+    imageModel,
+    highImageCnt,
+    lowImageCnt,
+    imgWidth,
+    imgHeight,
+):
+    """
+    fluxPrompt 가 빈 문자열이면 새로운 prompt 를 생성하고,
+    빈 문자열이 아니면 기존의 prompt 를 사용해서 이미지 생성.
+    """
+    print(
+        "genPromptAndImage:",
+        ratio,
+        imageStyle,
+        imageModel,
+        highImageCnt,
+        lowImageCnt,
+    )
+
+    if fluxPrompt == "":
+        fluxPrompt = genFluxPrompt(userPrompt, additionalComment, ratio, imageStyle)
+
+    imgUrl = genImage(fluxPrompt, ratio, imageModel, imgWidth, imgHeight)
+
+    highImageCnt = int(highImageCnt)
+    lowImageCnt = int(lowImageCnt)
+    if imageModel == HIGH_PRICE_OPTION:
+        highImageCnt += 1
+    else:
+        lowImageCnt += 1
+
+    totalPrice = highImageCnt * HIGH_PRICE + lowImageCnt * LOW_PRICE
+    return fluxPrompt, highImageCnt, lowImageCnt, totalPrice, imgUrl, None

requirements.txt

@@ -1,27 +1,27 @@
 aiofiles==23.2.1
 annotated-types==0.7.0
-anyio==4.8.0
+anyio==4.9.0
 certifi==2025.1.31
 charset-normalizer==3.4.1
 click==8.1.8
 dotenv==0.9.9
 fastapi==0.115.11
 ffmpy==0.5.0
-filelock==3.17.0
-fsspec==2025.2.0
-gradio==5.20.0
-gradio_client==1.7.2
+filelock==3.18.0
+fsspec==2025.3.0
+gradio==5.22.0
+gradio_client==1.8.0
 groovy==0.1.2
 h11==0.14.0
 httpcore==1.0.7
 httpx==0.28.1
-huggingface-hub==0.29.1
+huggingface-hub==0.29.3
 idna==3.10
-Jinja2==3.1.5
+Jinja2==3.1.6
 markdown-it-py==3.0.0
 MarkupSafe==2.1.5
 mdurl==0.1.2
-numpy==2.2.3
+numpy==2.2.4
 orjson==3.10.15
 packaging==24.2
 pandas==2.2.3
@@ -32,18 +32,19 @@ pydub==0.25.1
 Pygments==2.19.1
 python-dateutil==2.9.0.post0
 python-dotenv==1.0.1
+python-multipart==0.0.20
 pytz==2025.1
 PyYAML==6.0.2
 replicate==1.0.4
 requests==2.32.3
 rich==13.9.4
-ruff==0.9.9
+ruff==0.11.2
 safehttpx==0.1.6
 semantic-version==2.10.0
 shellingham==1.5.4
 six==1.17.0
 sniffio==1.3.1
-starlette==0.46.0
+starlette==0.46.1
 tomlkit==0.13.2
 tqdm==4.67.1
 typer==0.15.2
@@ -51,4 +52,4 @@ typing_extensions==4.12.2
 tzdata==2025.1
 urllib3==2.3.0
 uvicorn==0.34.0
-websockets==15.0
+websockets==15.0.1

ui/__init__.py

@@ -0,0 +1,7 @@
+"""
+UI 패키지 초기화 파일
+"""
+
+from ui.image_gen_tab import create_image_tab
+from ui.worldcup_tab import create_worldcup_tab
+from ui.styles import CSS, theme

ui/css/base.css

@@ -0,0 +1,8 @@
+/* 기본 CSS 설정 */
+footer {
+  visibility: hidden;
+}
+
+.tiny-input {
+  width: "20px";
+}

ui/css/fade-in.css

@@ -0,0 +1,22 @@
+/***********************************************/
+/* 이미지 강조를 위해 키우는 애니메이션 */
+/***********************************************/
+/* CSS for fade-in animation with scale */
+.fade-in {
+  animation: fadeInAndScale 0.3s ease forwards;
+  /* Add these properties to ensure smooth animation */
+  transform-origin: center;
+  display: inline-block;
+  opacity: 0; /* Start with opacity 0 */
+}
+
+@keyframes fadeInAndScale {
+  0% {
+    opacity: 0;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1.15); /* Element grows to 1.15 times its original size */
+  }
+}

ui/css/fade-out.css

@@ -0,0 +1,46 @@
+/***********************************************/
+/* 이미지 사라지는 애니메이션 */
+/***********************************************/
+/* CSS for fade-out animation */
+.fade-out {
+  animation: fadeOutAndShrink 1s forwards;
+  /* Add these properties to ensure smooth animation */
+  transform-origin: center;
+  display: inline-block;
+}
+
+@keyframes fadeOutAndShrink {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+/* Optional: Add this if you want to keep the layout space after element disappears */
+.fade-out.preserve-space {
+  visibility: hidden;
+  opacity: 0;
+  animation: fadeOutAndShrinkPreserve 1s forwards;
+}
+
+@keyframes fadeOutAndShrinkPreserve {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    visibility: visible;
+  }
+  99% {
+    transform: scale(0.01);
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    transform: scale(0);
+    opacity: 0;
+    visibility: hidden;
+  }
+}

ui/css/fade-visibility.css

@@ -0,0 +1,20 @@
+/***********************************************/
+/* 처음에는 안보이다가 점점 나타나는 애니메이션 */
+/***********************************************/
+.fade-in-visibility {
+  /* 처음에는 보이지 않음 */
+  opacity: 0;
+  /* 애니메이션 설정 */
+  animation: fadeInVisibility 1s ease-in forwards;
+  /* 애니메이션을 부드럽게 만들기 위한 설정 */
+  will-change: opacity;
+}
+
+@keyframes fadeInVisibility {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

ui/css/interactions.css

@@ -0,0 +1,12 @@
+/* 이미지 클릭할 때, 포인터 커서로 변경 */
+.battle-image img {
+  cursor: pointer !important;
+}
+
+/***********************************************/
+/* 이미지 클릭 비활성화 */
+/***********************************************/
+.non-clickable {
+  pointer-events: none; /* 모든 포인터 이벤트(클릭, 호버 등)를 비활성화 */
+  user-select: none; /* 텍스트 선택 방지 */
+}

ui/image_gen_tab.py

@@ -0,0 +1,248 @@
+"""
+이미지 생성 UI 컴포넌트 및 기능
+"""
+
+import gradio as gr
+import time
+from config import (
+    HIGH_PRICE_OPTION,
+    LOW_PRICE_OPTION,
+    CUSTOM,
+    GEN_IMAGE_DESC,
+    WORLDCUPABLE_IMAGE_CNT,
+    imageStyleMap,
+)
+from image_generator import genPromptAndImage
+
+
+def create_image_tab():
+    """이미지 생성 탭 UI 생성 함수"""
+    with gr.Tab("이미지 생성"):
+        current_img_url = gr.State("")
+        selectedImageIndex = gr.State(0)
+        entryImageUrls = gr.State([])  # 저장된 URL 목록
+
+        with gr.Column():  # Column을 사용하여 수직 배열
+            with gr.Row():
+                with gr.Column():  # Column을 사용하여 수직 배열
+                    userPrompt = gr.TextArea(
+                        label="교재 지문 (필수)",
+                        value=GEN_IMAGE_DESC,
+                        max_lines=5,
+                    )
+                    additionalComment = gr.Textbox(
+                        label="추가 희망사항 (옵셔널)", lines=2, value=""
+                    )
+                with gr.Column():
+                    with gr.Accordion("상세 설정", open=False):
+                        with gr.Column():  # Column을 사용하여 수직 배열
+                            with gr.Row():
+                                highImgCnt = gr.Textbox(
+                                    label="비싼 이미지",
+                                    value="0",
+                                    interactive=False,
+                                )
+                                lowImgCnt = gr.Textbox(
+                                    label="싼 이미지", value="0", interactive=False
+                                )
+                                totalPrice = gr.Textbox(
+                                    label="총 이미지 생성 비용(원)",
+                                    value="0",
+                                    interactive=False,
+                                )
+                            genModelKind = gr.Radio(
+                                [LOW_PRICE_OPTION, HIGH_PRICE_OPTION],
+                                label="이미지 생성 모델",
+                                value=LOW_PRICE_OPTION,
+                            )
+                            with gr.Row():
+                                aspectRatio = gr.Radio(
+                                    ["1:1", "4:3", "16:9", CUSTOM],
+                                    label="이미지 비율",
+                                    value="16:9",
+                                    scale=4,
+                                )
+                                imgWidth = gr.Number(
+                                    label="너비 (32의배수)",
+                                    value=1440,
+                                    scale=1,
+                                    visible=False,
+                                    maximum=1440,
+                                    minimum=256,
+                                    step=32,
+                                )
+                                imgHeight = gr.Number(
+                                    label="높이 (32의배수)",
+                                    value=768,
+                                    scale=1,
+                                    visible=False,
+                                    maximum=1440,
+                                    minimum=256,
+                                    step=32,
+                                )
+
+                            def custom_aspect_ratio(ratio):
+                                if ratio == CUSTOM:
+                                    return (
+                                        gr.update(
+                                            value=HIGH_PRICE_OPTION,
+                                            interactive=False,
+                                        ),
+                                        gr.update(visible=True),
+                                        gr.update(visible=True),
+                                    )
+                                else:
+                                    return (
+                                        gr.update(interactive=True),
+                                        gr.update(visible=False),
+                                        gr.update(visible=False),
+                                    )
+
+                            aspectRatio.change(
+                                fn=custom_aspect_ratio,
+                                inputs=aspectRatio,
+                                outputs=[genModelKind, imgWidth, imgHeight],
+                            )
+
+                            styleList = list(imageStyleMap.keys())
+                            imageStyle = gr.Radio(
+                                styleList, label="이미지 스타일", value="알아서"
+                            )
+                            with gr.Accordion("Prompt info", open=False):
+                                fluxPrompt = gr.Textbox(
+                                    label="Flux Prompt", value="", lines=10
+                                )
+
+            with gr.Row():
+                genSmartImage = gr.Button("교재 지문 삽화 이미지 생성!")
+                removeEntryWorldcupBtn = gr.Button("현재 이미지 제거")
+
+            with gr.Column():
+                progressBar = gr.Image(
+                    label=None, interactive=False, visible=False, height=28
+                )
+                entryListGallery = gr.Gallery(
+                    label="이미지 월드컵 진출 이미지",
+                    preview=True,
+                    allow_preview=True,
+                    interactive=False,
+                )
+                with gr.Row():
+                    entryCount = gr.Markdown("## 이미지 월드컵 진출 이미지 수: 0")
+                    goImageWorldCupBtn = gr.Button(
+                        "이미지 월드컵 하러가기", visible=False
+                    )
+
+            @entryListGallery.select(outputs=selectedImageIndex)
+            def setSelectedImageIndex(evt: gr.SelectData, state=None):
+                try:
+                    if evt is None:
+                        return 0
+                    return evt.index
+                except:
+                    return 0
+
+            def removeSelectedEntry(entryList, selectedIndex):
+                if selectedIndex is None or len(entryList) == 0:
+                    return gr.update(value=entryList), entryList
+
+                del entryList[selectedIndex]
+                return (
+                    entryList,
+                    entryList,
+                    f"## 이미지 월드컵 진출 이미지 수: {len(entryList)}",
+                )
+
+            # 왠지 모르게 마지막 요소를 지우면 preview=True 가 안되서 이렇게 함.
+            def reSelectedEntry(entryList):
+                return gr.update(selected_index=len(entryList) - 1, preview=True)
+
+            removeEntryWorldcupBtn.click(
+                fn=removeSelectedEntry,
+                inputs=[entryImageUrls, selectedImageIndex],
+                outputs=[entryListGallery, entryImageUrls, entryCount],
+            ).then(
+                fn=reSelectedEntry,
+                inputs=entryImageUrls,
+                outputs=entryListGallery,
+            )
+
+            # 이벤트 처리.
+            # 입력값이 변경될 때마다 Flux Prompt 초기화
+            for component in [
+                userPrompt,
+                aspectRatio,
+                imageStyle,
+                additionalComment,
+            ]:
+                component.change(fn=lambda x: "", inputs=fluxPrompt, outputs=fluxPrompt)
+            genImageInputs = [
+                userPrompt,
+                additionalComment,
+                fluxPrompt,
+                aspectRatio,
+                imageStyle,
+                genModelKind,
+                highImgCnt,
+                lowImgCnt,
+                imgWidth,
+                imgHeight,
+            ]
+
+            def show_progress():
+                return gr.update(label="이미지 생성 중", visible=True)
+
+            def hide_progress():
+                return gr.update(visible=False)
+
+            genSmartImage.click(fn=show_progress, outputs=progressBar).then(
+                fn=genPromptAndImage,
+                inputs=genImageInputs,
+                outputs=[
+                    fluxPrompt,
+                    highImgCnt,
+                    lowImgCnt,
+                    totalPrice,
+                    current_img_url,
+                    progressBar,
+                ],
+            ).then(
+                fn=lambda entryList, imgUrl: (
+                    gr.update(
+                        value=[*entryList, imgUrl],
+                        preview=True,
+                        selected_index=len(entryList),
+                    ),
+                    entryList + [imgUrl],
+                    len(entryList),
+                    gr.update(visible=False),
+                ),
+                inputs=[entryImageUrls, current_img_url],
+                outputs=[
+                    entryListGallery,
+                    entryImageUrls,
+                    selectedImageIndex,
+                    progressBar,
+                ],
+            ).then(
+                fn=lambda entryImageUrls: f"## 이미지 월드컵 진출 이미지 수: {len(entryImageUrls)}",
+                inputs=entryImageUrls,
+                outputs=entryCount,
+            ).then(
+                fn=lambda entryCountTxt, entryList: (
+                    [
+                        entryCountTxt + " (이미지 월드컵 가능!)",
+                        gr.update(visible=False),
+                        gr.Info(
+                            f"{len(entryList)}개의 이미지가 만들어졌습니다. '이미지 월드컵'을 시작하실 수 있습니다!",
+                            duration=5,
+                        ),
+                    ]
+                    if len(entryList) in WORLDCUPABLE_IMAGE_CNT
+                    else [entryCountTxt, gr.update(visible=False)]
+                ),
+                inputs=[entryCount, entryImageUrls],
+                outputs=[entryCount, goImageWorldCupBtn],
+            )
+
+    return entryImageUrls

ui/styles.py

@@ -0,0 +1,53 @@
+"""
+UI 스타일 관련 정의
+"""
+
+import gradio as gr
+import os
+
+# UI 기본 테마 설정
+theme = "base"  # 기본 테마 사용
+
+# CSS 디렉토리 경로 설정
+css_dir = os.path.join(os.path.dirname(__file__), "css")
+
+
+def read_css_file(css_file):
+    """CSS 파일명을 받아 파일 내용을 반환하는 함수
+
+    Args:
+        css_file (str): CSS 파일 이름 (예: "base.css")
+
+    Returns:
+        str: CSS 파일 내용
+    """
+    try:
+        file_path = os.path.join(css_dir, css_file)
+        with open(file_path, "r", encoding="utf-8") as file:
+            return file.read()
+    except Exception as e:
+        print(f"CSS 파일 읽기 오류 ({css_file}): {e}")
+        return ""
+
+
+# CSS 파일 내용 가져오기
+base_css = read_css_file("base.css")
+interactions_css = read_css_file("interactions.css")
+
+# 애니메이션 CSS 파일 내용 가져오기
+fade_out_css = read_css_file("fade-out.css")
+fade_in_css = read_css_file("fade-in.css")
+fade_visibility_css = read_css_file("fade-visibility.css")
+
+# 모든 CSS 통합
+CSS = f"""
+{base_css}
+
+{interactions_css}
+
+{fade_out_css}
+
+{fade_in_css}
+
+{fade_visibility_css}
+"""

ui/worldcup_tab.py

@@ -0,0 +1,185 @@
+"""
+월드컵 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,
+                        ),
+                        gr.update(
+                            visible=winnerIndex == 1,
+                            elem_classes=BATTLE_IMAGE_INIT,
+                        ),
+                        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,
+                        ),
+                        gr.update(
+                            value=twoImages[1],
+                            visible=True,
+                            elem_classes=BATTLE_IMAGE_INIT,
+                        ),
+                        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()

worldcup.py

@@ -0,0 +1,62 @@
+"""
+데이터 모델 정의 파일
+"""
+
+from dataclasses import dataclass
+from config import FINAL_ROUND
+
+
+@dataclass
+class Worldcup:
+    """
+    이미지 월드컵 이미지 리스트를 받아서 참가 이미지들 리스트와 다음 승리자 리스트(다음 라운드 출전 리스트)를 가지고 있는 클래스.
+    이 클래스는 다음 메소드들을 가지고 있음.
+    getCurrentRoundImages (다음 대전 이미지 2개를 리스트로 반환함.)
+    winImage (0 또는 1을 입력 받아 승리자 리스트에 추가하고 다음 라운드를 위해 index를 증가시킴.)
+    처음에는 8강 이미지 (8개) 가 주어지고, 이 이미지들 중 getCurrentRoundImages 를 호출해서 그 둘 중 이긴 이미지에 대한  피드백을 winImage 에 전달하고, 이긴 이미지를 승리자 리스트에 추가함.
+    이렇게 해서 8강, 4강, 결승전 이미지들을 반환하며 대전을 진행할 수 있는 클래스
+
+    사용 예시:
+    worldcup = Worldcup(images=이미지_리스트)
+    """
+
+    images: list
+    winners: list = None
+    index: int = 0
+
+    def __post_init__(self):
+        if self.winners is None:
+            self.winners = []
+
+    def getCurrentRoundImages(self):
+        # 현재 라운드의 이미지가 모두 소진되었는지 확인
+        # 다음 대전할 이미지 2개 반환
+        return self.images[self.index : self.index + 2]
+
+    def winImage(self, winnerIndex):
+        print("winImage winnerIndex:", winnerIndex)
+        self.winners.append(self.images[self.index + winnerIndex])
+        self.index += 2
+
+        if self.getKangRound() == FINAL_ROUND:
+            return self.winners[0]
+
+        if self.index >= len(self.images):
+            print("winImage 다음 라운드로 진행", self.index, len(self.images))
+            # 다음 라운드로 진행: winners를 새로운 images로 설정
+            self.images = self.winners
+            self.winners = []
+            self.index = 0
+
+    # 현재 몇강인지 가져오는 함수
+    def getKang(self):
+        return len(self.images)
+
+    # 현재 라운드 가져오는 함수 (8강 2차전 할 때, 2에 해당 하는 값)
+    def getRound(self):
+        return self.index // 2 + 1
+
+    def getKangRound(self):
+        if self.getKang() == 2:
+            return FINAL_ROUND
+        return f"## <center>{self.getKang()}강 {self.getRound()}차전</center>"