Update app.py

app.py

@@ -153,14 +153,58 @@ body {
 .audio-btn:hover {
     background: rgba(39, 174, 96, 0.9);
 }
-[같은 snow 관련 CSS...]
-"""
+@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;
+}
+@keyframes snow {
+    0% {
+        transform: translateY(0) translateX(0);
+    }
+    100% {
+        transform: translateY(100vh) translateX(100px);
+    }
+}
 
-with gr.Blocks(css=css) as app:
-    gr.HTML(f"<script>{js_code}</script>")
+.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")
@@ -182,53 +226,6 @@ with gr.Blocks(css=css) as app:
                 elem_classes="generate-btn"
             )
         
-
-# HTML5 오디오 요소 추가
-gr.HTML("""
-    <div class="audio-controls">
-        <button class="audio-btn" onclick="toggleAudio(1)">Play Music 1</button>
-        <button class="audio-btn" onclick="toggleAudio(2)">Play Music 2</button>
-        <button class="audio-btn" onclick="stopAllAudio()">Stop All</button>
-    </div>
-    <audio id="bgMusic1" loop style="display: none;">
-        <source src="file/1.mp3" type="audio/mp3">
-    </audio>
-    <audio id="bgMusic2" loop style="display: none;">
-        <source src="file/2.mp3" type="audio/mp3">
-    </audio>
-    <script>
-        let currentlyPlaying = null;
-        
-        function toggleAudio(num) {
-            const audio = document.getElementById('bgMusic' + num);
-            const otherAudio = document.getElementById('bgMusic' + (num === 1 ? 2 : 1));
-            
-            if (currentlyPlaying === audio) {
-                audio.pause();
-                currentlyPlaying = null;
-            } else {
-                if (currentlyPlaying) {
-                    currentlyPlaying.pause();
-                }
-                otherAudio.pause();
-                audio.play();
-                currentlyPlaying = audio;
-            }
-        }
-        
-        function stopAllAudio() {
-            document.getElementById('bgMusic1').pause();
-            document.getElementById('bgMusic2').pause();
-            currentlyPlaying = null;
-        }
-    </script>
-""") 
-        
-        # 이미지 출력 영역
-        with gr.Group(elem_classes="result-box"):
-            gr.Markdown("### 🖼️ Generated Image")
-            result = gr.Image(label="Result", elem_classes="image-output")
-        
         # 옵션들을 아코디언으로 구성
         with gr.Accordion("🎨 Advanced Options", open=False, elem_classes="accordion"):
             with gr.Group(elem_classes="parameter-box"):
@@ -290,6 +287,47 @@ gr.HTML("""
                         value=example_seed
                     )
 
+    # 오디오 컨트롤 - 컨테이너 밖에 배치
+    gr.HTML("""
+        <div class="audio-controls">
+            <button class="audio-btn" onclick="toggleAudio(1)">Play Music 1</button>
+            <button class="audio-btn" onclick="toggleAudio(2)">Play Music 2</button>
+            <button class="audio-btn" onclick="stopAllAudio()">Stop All</button>
+        </div>
+        <audio id="bgMusic1" loop style="display: none;">
+            <source src="file/1.mp3" type="audio/mp3">
+        </audio>
+        <audio id="bgMusic2" loop style="display: none;">
+            <source src="file/2.mp3" type="audio/mp3">
+        </audio>
+        <script>
+            let currentlyPlaying = null;
+            
+            function toggleAudio(num) {
+                const audio = document.getElementById('bgMusic' + num);
+                const otherAudio = document.getElementById('bgMusic' + (num === 1 ? 2 : 1));
+                
+                if (currentlyPlaying === audio) {
+                    audio.pause();
+                    currentlyPlaying = null;
+                } else {
+                    if (currentlyPlaying) {
+                        currentlyPlaying.pause();
+                    }
+                    otherAudio.pause();
+                    audio.play();
+                    currentlyPlaying = audio;
+                }
+            }
+            
+            function stopAllAudio() {
+                document.getElementById('bgMusic1').pause();
+                document.getElementById('bgMusic2').pause();
+                currentlyPlaying = null;
+            }
+        </script>
+    """)
+
     app.load(
         load_example,
         inputs=[],
@@ -302,7 +340,5 @@ gr.HTML("""
         outputs=[result, seed]
     )
 
-
-# 마지막 부분을 다음과 같이 수정
 app.queue()
-app.launch()  # js=js_code 제거
+app.launch()