Spaces:
Sleeping
Sleeping
File size: 4,282 Bytes
77e3856 f6b5575 8a98deb f6b5575 5a02909 f6b5575 8a98deb f6b5575 8a98deb f6b5575 77e3856 f6b5575 77e3856 f6b5575 77e3856 f6b5575 77e3856 f6b5575 77e3856 f6b5575 77e3856 f6b5575 77e3856 97d80aa 77e3856 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
import gradio as gr
import base64
# Base64 encoded Indian flag SVG with enhanced animation
flag_svg = '''
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 900 600" width="900" height="600">
<defs>
<clipPath id="flag-clip">
<path d="M0,0 Q450,40 900,0 Q900,300 900,600 Q450,560 0,600" />
</clipPath>
</defs>
<!-- Sky background -->
<rect width="900" height="600" fill="#87CEEB" />
<!-- Moving clouds -->
<g>
<path d="M-300,100 Q-150,50 0,100 T300,100" fill="#ffffff" opacity="0.7">
<animateTransform attributeName="transform" type="translate" from="0 0" to="1200 0" dur="60s" repeatCount="indefinite" />
</path>
<path d="M-300,200 Q-150,150 0,200 T300,200" fill="#ffffff" opacity="0.5">
<animateTransform attributeName="transform" type="translate" from="0 0" to="1200 0" dur="45s" repeatCount="indefinite" />
</path>
</g>
<!-- Flagpole -->
<rect x="50" y="50" width="20" height="500" fill="#8B4513" />
<circle cx="60" cy="50" r="15" fill="#FFD700" />
<!-- Animated flag -->
<g transform="translate(70, 50)">
<g clip-path="url(#flag-clip)">
<rect width="830" height="200" fill="#FF9933">
<animate attributeName="y" values="0;10;0" dur="3s" repeatCount="indefinite" />
</rect>
<rect y="200" width="830" height="200" fill="#FFFFFF">
<animate attributeName="y" values="200;210;200" dur="3s" repeatCount="indefinite" />
</rect>
<rect y="400" width="830" height="200" fill="#138808">
<animate attributeName="y" values="400;410;400" dur="3s" repeatCount="indefinite" />
</rect>
<g transform="translate(415,300) scale(3.5)">
<circle r="20" fill="#000080" />
<circle r="17.5" fill="#FFFFFF" />
<circle r="3.5" fill="#000080" />
<g id="d">
<g id="c">
<g id="b">
<g id="a">
<circle r="0.875" fill="#000080" transform="rotate(7.5) translate(17.5)" />
<path fill="#000080" d="M 0,17.5 0.6,7 C 0.6,7 0,2 0,2 0,2 -0.6,7 -0.6,7 L 0,17.5 z" />
</g>
<use xlink:href="#a" transform="rotate(15)"/>
</g>
<use xlink:href="#b" transform="rotate(30)"/>
</g>
<use xlink:href="#c" transform="rotate(60)"/>
</g>
<use xlink:href="#d" transform="rotate(120)"/>
<use xlink:href="#d" transform="rotate(-120)"/>
</g>
</g>
</g>
</svg>
'''
encoded_flag = base64.b64encode(flag_svg.encode('utf-8')).decode('utf-8')
html = f'''
<html>
<head>
<style>
body {{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
overflow: hidden;
}}
.flag-container {{
width: 900px;
height: 600px;
perspective: 1000px;
}}
.flag {{
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: wave 5s ease-in-out infinite;
}}
@keyframes wave {{
0%, 100% {{ transform: rotateY(0deg) rotateX(0deg); }}
25% {{ transform: rotateY(5deg) rotateX(2deg); }}
50% {{ transform: rotateY(0deg) rotateX(0deg); }}
75% {{ transform: rotateY(-5deg) rotateX(-2deg); }}
}}
</style>
</head>
<body>
<div class="flag-container">
<div class="flag">
<img src="data:image/svg+xml;base64,{encoded_flag}" alt="Animated Indian Flag">
</div>
</div>
</body>
</html>
'''
def show_flag():
return html
iface = gr.Interface(
fn=show_flag,
inputs=[],
outputs=gr.HTML(),
title="Happy 78th Independence Day",
#description=" Happy 78th Independence Day."
)
if __name__ == "__main__":
iface.launch() |