승리 이미지 선택할 때, 애니메이션 추가.

.cursorrules

@@ -0,0 +1,129 @@
+You are an expert in Python project development, specializing in building well-structured, maintainable Python applications.
+
+Core Expertise:
+
+- Python Development
+- Project Architecture
+- Testing Strategies
+- Code Quality
+- Package Management
+- Gradio
+
+Development Guidelines:
+
+1. Project Structure
+   ALWAYS:
+
+- Use proper package layout
+- Implement modular design
+- Follow Python standards
+- Use proper configuration
+- Maintain documentation
+
+NEVER:
+
+- Mix package boundaries
+- Skip project structure
+- Ignore Python standards
+- Use flat structure
+
+2. Code Organization
+   ALWAYS:
+
+- Use proper imports
+- Implement clean architecture
+- Follow SOLID principles
+- Use type hints
+- Document code properly
+
+NEVER:
+
+- Use circular imports
+- Mix responsibilities
+- Skip type annotations
+- Ignore documentation
+
+3. Dependency Management
+   ALWAYS:
+
+- Use virtual environments
+- Pin dependencies
+- Use requirements files
+- Handle dev dependencies
+- Update regularly
+
+NEVER:
+
+- Mix environment dependencies
+- Use global packages
+- Skip version pinning
+- Ignore security updates
+
+4. Testing Strategy
+   ALWAYS:
+
+- Write unit tests
+- Implement integration tests
+- Use proper fixtures
+- Test edge cases
+- Measure coverage
+
+NEVER:
+
+- Skip test documentation
+- Mix test types
+- Ignore test isolation
+- Skip error scenarios
+
+Code Quality:
+
+- Use proper linting
+- Implement formatting
+- Follow style guides
+- Use static analysis
+- Monitor complexity
+
+Documentation:
+
+- Write clear docstrings
+- Maintain README
+- Document APIs
+- Include examples
+- Keep docs updated
+
+Development Tools:
+
+- Use proper IDE
+- Configure debugger
+- Use version control
+- Implement CI/CD
+- Use code analysis
+
+Best Practices:
+
+- Follow PEP standards
+- Keep code clean
+- Handle errors properly
+- Use proper logging
+- Implement monitoring
+
+Package Distribution:
+
+- Use proper packaging
+- Handle versioning
+- Write setup files
+- Include metadata
+- Document installation
+
+Remember:
+
+- Focus on maintainability
+- Keep code organized
+- Handle errors properly
+- Document thoroughly
+
+Gradio Integration:
+
+- Create interactive demos using Gradio for model inference and visualization.
+- Design user-friendly interfaces that showcase model capabilities.
+- Implement proper error handling and input validation in Gradio apps.

app.py

@@ -4,6 +4,7 @@ from random import shuffle
 import os
 import gradio as gr
 import replicate
+import time
 
 # .env 파일 로드
 load_dotenv()
@@ -354,8 +355,111 @@ footer {visibility: hidden}
 .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; /* 텍스트 선택 방지 */
+}
 """
 
+BATTLE_IMAGE_INIT = "battle-image fade-in-visibility"
+
 # gr.set_static_paths(paths=["static/image/", "static/examples/"])
 
 # theme = "NoCrypt/miku"  # 하늘색 테마
@@ -491,6 +595,7 @@ def setup_demo():
                         interactive=False,
                         # height=768,
                     )
+                    entryCount = gr.Markdown("## 이미지 월드컵 진출 이미지 수: 0")
 
                 @entryListGallery.select(outputs=selectedImageIndex)
                 def setSelectedImageIndex(selection: gr.SelectData):
@@ -501,7 +606,11 @@ def setup_demo():
                         return gr.update(value=entryList), entryList
 
                     del entryList[selectedIndex]
-                    return entryList, entryList
+                    return (
+                        entryList,
+                        entryList,
+                        f"## 이미지 월드컵 진출 이미지 수: {len(entryList)}",
+                    )
 
                 # 왠지 모르게 마지막 요소를 지우면 preview=True 가 안되서 이렇게 함.
                 def reSelectedEntry(entryList):
@@ -510,7 +619,7 @@ def setup_demo():
                 removeEntryWorldcupBtn.click(
                     fn=removeSelectedEntry,
                     inputs=[entryImageUrls, selectedImageIndex],
-                    outputs=[entryListGallery, entryImageUrls],
+                    outputs=[entryListGallery, entryImageUrls, entryCount],
                 ).then(
                     fn=reSelectedEntry,
                     inputs=entryImageUrls,
@@ -576,6 +685,10 @@ def setup_demo():
                         selectedImageIndex,
                         progressBar,
                     ],
+                ).then(
+                    fn=lambda entryImageUrls: f"## 이미지 월드컵 진출 이미지 수: {len(entryImageUrls)}",
+                    inputs=entryImageUrls,
+                    outputs=entryCount,
                 ).then(
                     fn=lambda entryList: (
                         gr.Info(
@@ -586,7 +699,6 @@ def setup_demo():
                         else None
                     ),
                     inputs=[entryImageUrls],
-                    outputs=[],
                 )
 
         with gr.Tab("이미지 월드컵"):
@@ -604,13 +716,35 @@ def setup_demo():
 
                 with gr.Row():  # 이미지 수�� 배열.
                     battleImage1 = gr.Image(
-                        show_label=False, scale=5, elem_classes="battle-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"
+                        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)
@@ -618,8 +752,14 @@ def setup_demo():
                     battleTitle = worldcup.getKangRound()
                     if finalWinner:
                         return (
-                            gr.update(visible=winnerIndex == 0),
-                            gr.update(visible=winnerIndex == 1),
+                            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),
@@ -628,9 +768,16 @@ def setup_demo():
                             gr.update(visible=False),
                         )
                     nextMatchImages = worldcup.getCurrentRoundImages()
+                    print("nextMatchImages:", nextMatchImages)
                     return (
-                        nextMatchImages[0],
-                        nextMatchImages[1],
+                        gr.update(
+                            value=nextMatchImages[0],
+                            elem_classes=BATTLE_IMAGE_INIT,
+                        ),
+                        gr.update(
+                            value=nextMatchImages[1],
+                            elem_classes=BATTLE_IMAGE_INIT,
+                        ),
                         worldcup,
                         battleTitle,
                         gr.skip(),
@@ -649,18 +796,41 @@ def setup_demo():
                     winImage1Btn,
                     winImage2Btn,
                 ]
-                winImage1Btn.click(
-                    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
-                )
+
+                # 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),
+                ]:
+                    print("winIndex:", winIndex)
+                    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],
@@ -682,8 +852,16 @@ def setup_demo():
                         twoImages = worldcup.getCurrentRoundImages()
                         return (
                             worldcup,
-                            gr.update(value=twoImages[0], visible=True),
-                            gr.update(value=twoImages[1], visible=True),
+                            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),