Spaces:
Running
on
Zero
Running
on
Zero
Update app.py
Browse files
app.py
CHANGED
@@ -189,6 +189,62 @@ div[class*="examples"] {
|
|
189 |
}
|
190 |
"""
|
191 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
192 |
with gr.Blocks(theme="Yntec/HaleyCH_Theme_Orange", css=css) as demo:
|
193 |
gr.HTML("""
|
194 |
<div style="text-align: center; max-width: 800px; margin: 0 auto;">
|
@@ -200,7 +256,7 @@ with gr.Blocks(theme="Yntec/HaleyCH_Theme_Orange", css=css) as demo:
|
|
200 |
</p>
|
201 |
</div>
|
202 |
""")
|
203 |
-
|
204 |
with gr.Column(elem_id="col-container"):
|
205 |
with gr.Row():
|
206 |
prompt = gr.Text(
|
|
|
189 |
}
|
190 |
"""
|
191 |
|
192 |
+
|
193 |
+
def create_snow_effect():
|
194 |
+
# CSS 스타일 정의
|
195 |
+
snow_css = """
|
196 |
+
@keyframes snowfall {
|
197 |
+
0% {
|
198 |
+
transform: translateY(-10vh) translateX(0);
|
199 |
+
opacity: 1;
|
200 |
+
}
|
201 |
+
100% {
|
202 |
+
transform: translateY(100vh) translateX(100px);
|
203 |
+
opacity: 0.3;
|
204 |
+
}
|
205 |
+
}
|
206 |
+
.snowflake {
|
207 |
+
position: fixed;
|
208 |
+
color: white;
|
209 |
+
font-size: 1.5em;
|
210 |
+
user-select: none;
|
211 |
+
z-index: 1000;
|
212 |
+
pointer-events: none;
|
213 |
+
animation: snowfall linear infinite;
|
214 |
+
}
|
215 |
+
"""
|
216 |
+
|
217 |
+
# JavaScript 코드 정의
|
218 |
+
snow_js = """
|
219 |
+
function createSnowflake() {
|
220 |
+
const snowflake = document.createElement('div');
|
221 |
+
snowflake.innerHTML = '❄';
|
222 |
+
snowflake.className = 'snowflake';
|
223 |
+
snowflake.style.left = Math.random() * 100 + 'vw';
|
224 |
+
snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
|
225 |
+
snowflake.style.opacity = Math.random();
|
226 |
+
document.body.appendChild(snowflake);
|
227 |
+
|
228 |
+
setTimeout(() => {
|
229 |
+
snowflake.remove();
|
230 |
+
}, 5000);
|
231 |
+
}
|
232 |
+
setInterval(createSnowflake, 200);
|
233 |
+
"""
|
234 |
+
|
235 |
+
# CSS와 JavaScript를 결합한 HTML
|
236 |
+
snow_html = f"""
|
237 |
+
<style>
|
238 |
+
{snow_css}
|
239 |
+
</style>
|
240 |
+
<script>
|
241 |
+
{snow_js}
|
242 |
+
</script>
|
243 |
+
"""
|
244 |
+
|
245 |
+
return gr.HTML(snow_html)
|
246 |
+
|
247 |
+
|
248 |
with gr.Blocks(theme="Yntec/HaleyCH_Theme_Orange", css=css) as demo:
|
249 |
gr.HTML("""
|
250 |
<div style="text-align: center; max-width: 800px; margin: 0 auto;">
|
|
|
256 |
</p>
|
257 |
</div>
|
258 |
""")
|
259 |
+
create_snow_effect()
|
260 |
with gr.Column(elem_id="col-container"):
|
261 |
with gr.Row():
|
262 |
prompt = gr.Text(
|