Update app.py

app.py

@@ -124,8 +124,71 @@ footer {
 }
 """
 
+
+def create_snow_effect():
+    # CSS 스타일 정의
+    snow_css = """
+    @keyframes snowfall {
+        0% {
+            transform: translateY(-10vh) translateX(0);
+            opacity: 1;
+        }
+        100% {
+            transform: translateY(100vh) translateX(100px);
+            opacity: 0.3;
+        }
+    }
+    .snowflake {
+        position: fixed;
+        color: white;
+        font-size: 1.5em;
+        user-select: none;
+        z-index: 1000;
+        pointer-events: none;
+        animation: snowfall linear infinite;
+    }
+    """
+
+    # JavaScript 코드 정의
+    snow_js = """
+    function createSnowflake() {
+        const snowflake = document.createElement('div');
+        snowflake.innerHTML = '❄';
+        snowflake.className = 'snowflake';
+        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, 200);
+    """
+
+    # CSS와 JavaScript를 결합한 HTML 
+    snow_html = f"""
+    <style>
+        {snow_css}
+    </style>
+    <script>
+        {snow_js}
+    </script>
+    """
+    
+    return gr.HTML(snow_html)
+
+# Gradio 앱에서 사용할 때:
+# with app:  아래에
+
+
+    
 # Gradio UI 구성
 with gr.Blocks(theme="Yntec/HaleyCH_Theme_Orange", css=css) as demo:
+    
+    create_snow_effect()    
+    
     with gr.Column(elem_id="app-container"):
         with gr.Row():
             with gr.Column(scale=3):