Update app.py

app.py

@@ -82,10 +82,15 @@ css = """
     margin: auto; 
     padding: 20px;
     position: relative;
+    min-height: 100vh;
+}
+body {
     background-image: url('file/example0.webp');
     background-size: cover;
     background-position: center;
-    min-height: 100vh;
+    background-attachment: fixed;
+    margin: 0;
+    padding: 0;
 }
 .header {
     text-align: center; 
@@ -103,112 +108,69 @@ css = """
 .generate-btn:hover {
     background-color: #27ae60 !important;
 }
-.parameter-box {
-    background-color: rgba(245, 246, 250, 0.9);
+.parameter-box, .result-box, .prompt-box, .audio-controls {
+    background-color: rgba(245, 246, 250, 0.8);
     padding: 20px; 
     border-radius: 10px; 
     margin: 10px 0;
+    backdrop-filter: blur(5px);
 }
 .result-box {
-    background-color: rgba(245, 246, 250, 0.9);
-    padding: 20px; 
-    border-radius: 10px; 
-    margin: 0 auto 20px auto; 
-    text-align: center;
+    width: 90%;
+    margin: 20px auto;
 }
 .image-output {
     margin: 0 auto; 
     display: block; 
     max-width: 800px !important;
 }
+.prompt-box {
+    width: 90%;
+    margin: 20px auto;
+}
 .accordion {
     margin-top: 20px;
+    background-color: rgba(245, 246, 250, 0.8);
+    backdrop-filter: blur(5px);
 }
-.prompt-box {
+.audio-controls {
     position: fixed;
-    top: 20px;
+    bottom: 20px;
     right: 20px;
-    width: 300px;
-    background-color: rgba(245, 246, 250, 0.9);
-    padding: 20px;
-    border-radius: 10px;
     z-index: 1000;
+    display: flex;
+    gap: 10px;
+    align-items: center;
 }
-
-@keyframes snow {
-    0% {
-        transform: translateY(0) translateX(0);
-    }
-    100% {
-        transform: translateY(100vh) translateX(100px);
-    }
-}
-
-.snowflake {
-    position: fixed;
-    top: -10px;
+.audio-btn {
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: none;
+    background: rgba(46, 204, 113, 0.9);
     color: white;
-    font-size: 20px;
-    animation: snow 5s linear infinite;
+    cursor: pointer;
 }
-"""
-
-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);
+.audio-btn:hover {
+    background: rgba(39, 174, 96, 0.9);
 }
-
-setInterval(createSnowflake, 100);
+[같은 snow 관련 CSS...]
 """
 
+
 with gr.Blocks(css=css) as app:
-    # JavaScript 눈 효과
     gr.HTML(f"<script>{js_code}</script>")
     
-    # HTML5 오디오 요소 추가
-    gr.HTML("""
-        <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>
-            window.addEventListener('load', function() {
-                const audio1 = document.getElementById('bgMusic1');
-                const audio2 = document.getElementById('bgMusic2');
-                
-                audio1.addEventListener('ended', function() {
-                    audio2.play();
-                });
-                
-                audio2.addEventListener('ended', function() {
-                    audio1.play();
-                });
-                
-                // 자동 재생 시작
-                audio1.play().catch(function(error) {
-                    console.log("Audio playback failed:", error);
-                });
-            });
-        </script>
-    """)
+
     
     with gr.Column(elem_classes="container"):
-
         gr.Markdown("# 🎄 X-MAS LoRA", elem_classes="header")
         
-        # 프롬프트 입력 박스를 별도로 배치
+        # 이미지 출력 영역
+        with gr.Group(elem_classes="result-box"):
+            gr.Markdown("### 🖼️ Generated Image")
+            result = gr.Image(label="Result", elem_classes="image-output")
+        
+        # 프롬프트 입력 박스
         with gr.Group(elem_classes="prompt-box"):
             prompt = gr.TextArea(
                 label="✍️ Your Prompt (한글 또는 영어)",
@@ -220,6 +182,48 @@ 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")