Update app.py

app.py

@@ -5,6 +5,9 @@ from PIL import Image
 from diffusers import DiffusionPipeline
 import random
 from transformers import pipeline
+import pygame
+import os
+import threading
 
 torch.backends.cudnn.deterministic = True
 torch.backends.cudnn.benchmark = False
@@ -22,6 +25,23 @@ pipe.load_lora_weights(lora_repo)
 
 pipe.to("cuda")
 
+# pygame 초기화 및 음악 설정
+pygame.mixer.init()
+def play_music():
+    pygame.mixer.music.load("1.mp3")
+    pygame.mixer.music.play()
+    pygame.mixer.music.queue("2.mp3")
+    pygame.mixer.music.set_endevent(pygame.USEREVENT)
+    while True:
+        for event in pygame.event.get():
+            if event.type == pygame.USEREVENT:
+                pygame.mixer.music.queue("1.mp3")
+                pygame.mixer.music.queue("2.mp3")
+
+# 배경음악 재생 시작 (별도 스레드에서 실행)
+music_thread = threading.Thread(target=play_music, daemon=True)
+music_thread.start()
+
 MAX_SEED = 2**32-1
 
 @spaces.GPU()
@@ -73,42 +93,126 @@ def load_example():
     example_image = Image.open(example_image_path)
     return example_prompt, example_cfg_scale, example_steps, True, example_seed, example_width, example_height, example_lora_scale, example_image
 
-
 css = """
-.container {max-width: 1400px; margin: auto; padding: 20px;}
-.header {text-align: center; margin-bottom: 30px;}
-.generate-btn {background-color: #2ecc71 !important; color: white !important; margin: 20px auto !important; display: block !important; width: 200px !important;}
-.generate-btn:hover {background-color: #27ae60 !important;}
-.parameter-box {background-color: #f5f6fa; padding: 20px; border-radius: 10px; margin: 10px 0;}
-.result-box {background-color: #f5f6fa; padding: 20px; border-radius: 10px; margin: 0 auto 20px auto; text-align: center;}
-.image-output {margin: 0 auto; display: block; max-width: 800px !important;}
-.accordion {margin-top: 20px;}
+.container {
+    max-width: 1400px; 
+    margin: auto; 
+    padding: 20px;
+    position: relative;
+    background-image: url('file/example0.webp');
+    background-size: cover;
+    background-position: center;
+    min-height: 100vh;
+}
+.header {
+    text-align: center; 
+    margin-bottom: 30px;
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
+}
+.generate-btn {
+    background-color: #2ecc71 !important; 
+    color: white !important; 
+    margin: 20px auto !important; 
+    display: block !important; 
+    width: 200px !important;
+}
+.generate-btn:hover {
+    background-color: #27ae60 !important;
+}
+.parameter-box {
+    background-color: rgba(245, 246, 250, 0.9);
+    padding: 20px; 
+    border-radius: 10px; 
+    margin: 10px 0;
+}
+.result-box {
+    background-color: rgba(245, 246, 250, 0.9);
+    padding: 20px; 
+    border-radius: 10px; 
+    margin: 0 auto 20px auto; 
+    text-align: center;
+}
+.image-output {
+    margin: 0 auto; 
+    display: block; 
+    max-width: 800px !important;
+}
+.accordion {
+    margin-top: 20px;
+}
+.prompt-box {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    width: 300px;
+    background-color: rgba(245, 246, 250, 0.9);
+    padding: 20px;
+    border-radius: 10px;
+    z-index: 1000;
+}
+
+@keyframes snow {
+    0% {
+        transform: translateY(0) translateX(0);
+    }
+    100% {
+        transform: translateY(100vh) translateX(100px);
+    }
+}
+
+.snowflake {
+    position: fixed;
+    top: -10px;
+    color: white;
+    font-size: 20px;
+    animation: snow 5s linear infinite;
+}
+"""
+
+js_code = """
+function createSnowflake() {
+    const snowflake = document.createElement('div');
+    snowflake.classList.add('snowflake');
+    snowflake.innerHTML = '❄';
+    snowflake.style.left = Math.random() * 100 + 'vw';
+    snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
+    snowflake.style.opacity = Math.random();
+    document.body.appendChild(snowflake);
+    
+    setTimeout(() => {
+        snowflake.remove();
+    }, 5000);
+}
+
+setInterval(createSnowflake, 100);
 """
 
 with gr.Blocks(css=css) as app:
+    gr.HTML(f"<script>{js_code}</script>")
+    
     with gr.Column(elem_classes="container"):
-        gr.Markdown("# 🎨 X-MAS LoRA", elem_classes="header")
+        gr.Markdown("# 🎄 X-MAS LoRA", elem_classes="header")
         
-        # 이미지 출력 영역을 먼저 배치
+        # 프롬프트 입력 박스를 별도로 배치
+        with gr.Group(elem_classes="prompt-box"):
+            prompt = gr.TextArea(
+                label="✍️ Your Prompt (한글 또는 영어)",
+                placeholder="이미지를 설명하세요...",
+                lines=5
+            )
+            generate_button = gr.Button(
+                "🚀 Generate Image",
+                elem_classes="generate-btn"
+            )
+        
+        # 이미지 출력 영역
         with gr.Group(elem_classes="result-box"):
             gr.Markdown("### 🖼️ Generated Image")
             result = gr.Image(label="Result", elem_classes="image-output")
-            
-        # 생성 버튼
-        generate_button = gr.Button(
-            "🚀 Generate Image",
-            elem_classes="generate-btn"
-        )
         
         # 옵션들을 아코디언으로 구성
-        with gr.Accordion("🎨 Generation Options", open=False, elem_classes="accordion"):
-            with gr.Group(elem_classes="parameter-box"):
-                prompt = gr.TextArea(
-                    label="✍️ Your Prompt (한글 또는 영어)",
-                    placeholder="이미지를 설명하세요... (한글 입력시 자동으로 영어로 번역됩니다)",
-                    lines=5
-                )
-                
+        with gr.Accordion("🎨 Advanced Options", open=False, elem_classes="accordion"):
             with gr.Group(elem_classes="parameter-box"):
                 gr.Markdown("### 🎛️ Generation Parameters")
                 with gr.Row():
@@ -181,4 +285,4 @@ with gr.Blocks(css=css) as app:
     )
 
 app.queue()
-app.launch()
+app.launch(js=js_code)