Hugging Face's logo

Spaces:
sagar007
/
Indian_flag
Sleeping

App Files Community
sagar007 commited on
Commit
8a98deb
·
verified ·
1 Parent(s): 77e3856

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +62 -41
app.py CHANGED
@@ -1,47 +1,65 @@
1
  import gradio as gr
2
  import base64
3
 
4
- # Base64 encoded Indian flag SVG with animation
5
  flag_svg = '''
6
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 150" width="900" height="600">
7
- <rect width="225" height="150" fill="#f93">
8
- <animate attributeName="y" values="0;5;0" dur="2s" repeatCount="indefinite" />
9
- </rect>
10
- <rect y="50" width="225" height="50" fill="#fff">
11
- <animate attributeName="y" values="50;55;50" dur="2s" repeatCount="indefinite" />
12
- </rect>
13
- <rect y="100" width="225" height="50" fill="#128807">
14
- <animate attributeName="y" values="100;105;100" dur="2s" repeatCount="indefinite" />
15
- </rect>
16
- <g transform="translate(112.5,75)">
17
- <circle r="20" fill="#008">
18
- <animate attributeName="cy" values="0;5;0" dur="2s" repeatCount="indefinite" />
19
- </circle>
20
- <circle r="17.5" fill="#fff">
21
- <animate attributeName="cy" values="0;5;0" dur="2s" repeatCount="indefinite" />
22
- </circle>
23
- <circle r="3.5" fill="#008">
24
- <animate attributeName="cy" values="0;5;0" dur="2s" repeatCount="indefinite" />
25
- </circle>
26
- <g id="d">
27
- <g id="c">
28
- <g id="b">
29
- <g id="a">
30
- <circle r="0.875" fill="#008" transform="rotate(7.5) translate(17.5)">
31
- <animate attributeName="cy" values="0;0.5;0" dur="2s" repeatCount="indefinite" />
32
- </circle>
33
- <path fill="#008" 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">
34
- <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite" />
35
- </path>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  </g>
37
- <use xlink:href="#a" transform="rotate(15)"/>
38
  </g>
39
- <use xlink:href="#b" transform="rotate(30)"/>
 
40
  </g>
41
- <use xlink:href="#c" transform="rotate(60)"/>
42
  </g>
43
- <use xlink:href="#d" transform="rotate(120)"/>
44
- <use xlink:href="#d" transform="rotate(-120)"/>
45
  </g>
46
  </svg>
47
  '''
@@ -59,10 +77,11 @@ html = f'''
59
  height: 100vh;
60
  margin: 0;
61
  background-color: #f0f0f0;
 
62
  }}
63
  .flag-container {{
64
- width: 300px;
65
- height: 200px;
66
  perspective: 1000px;
67
  }}
68
  .flag {{
@@ -72,8 +91,10 @@ html = f'''
72
  animation: wave 5s ease-in-out infinite;
73
  }}
74
  @keyframes wave {{
75
- 0%, 100% {{ transform: rotateY(0deg); }}
76
- 50% {{ transform: rotateY(10deg); }}
 
 
77
  }}
78
  </style>
79
  </head>
@@ -95,7 +116,7 @@ iface = gr.Interface(
95
  inputs=[],
96
  outputs=gr.HTML(),
97
  title="Animated Indian Flag",
98
- description="An animated Indian flag waving in the air."
99
  )
100
 
101
  if __name__ == "__main__":
 
1
  import gradio as gr
2
  import base64
3
 
4
+ # Base64 encoded Indian flag SVG with enhanced animation
5
  flag_svg = '''
6
+ <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">
7
+ <defs>
8
+ <clipPath id="flag-clip">
9
+ <path d="M0,0 Q450,40 900,0 Q900,300 900,600 Q450,560 0,600" />
10
+ </clipPath>
11
+ </defs>
12
+
13
+ <!-- Sky background -->
14
+ <rect width="900" height="600" fill="#87CEEB" />
15
+
16
+ <!-- Moving clouds -->
17
+ <g>
18
+ <path d="M-300,100 Q-150,50 0,100 T300,100" fill="#ffffff" opacity="0.7">
19
+ <animateTransform attributeName="transform" type="translate" from="0 0" to="1200 0" dur="60s" repeatCount="indefinite" />
20
+ </path>
21
+ <path d="M-300,200 Q-150,150 0,200 T300,200" fill="#ffffff" opacity="0.5">
22
+ <animateTransform attributeName="transform" type="translate" from="0 0" to="1200 0" dur="45s" repeatCount="indefinite" />
23
+ </path>
24
+ </g>
25
+
26
+ <!-- Flagpole -->
27
+ <rect x="50" y="50" width="20" height="500" fill="#8B4513" />
28
+ <circle cx="60" cy="50" r="15" fill="#FFD700" />
29
+
30
+ <!-- Animated flag -->
31
+ <g transform="translate(70, 50)">
32
+ <g clip-path="url(#flag-clip)">
33
+ <rect width="830" height="200" fill="#FF9933">
34
+ <animate attributeName="y" values="0;10;0" dur="3s" repeatCount="indefinite" />
35
+ </rect>
36
+ <rect y="200" width="830" height="200" fill="#FFFFFF">
37
+ <animate attributeName="y" values="200;210;200" dur="3s" repeatCount="indefinite" />
38
+ </rect>
39
+ <rect y="400" width="830" height="200" fill="#138808">
40
+ <animate attributeName="y" values="400;410;400" dur="3s" repeatCount="indefinite" />
41
+ </rect>
42
+ <g transform="translate(415,300) scale(3.5)">
43
+ <circle r="20" fill="#000080" />
44
+ <circle r="17.5" fill="#FFFFFF" />
45
+ <circle r="3.5" fill="#000080" />
46
+ <g id="d">
47
+ <g id="c">
48
+ <g id="b">
49
+ <g id="a">
50
+ <circle r="0.875" fill="#000080" transform="rotate(7.5) translate(17.5)" />
51
+ <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" />
52
+ </g>
53
+ <use xlink:href="#a" transform="rotate(15)"/>
54
+ </g>
55
+ <use xlink:href="#b" transform="rotate(30)"/>
56
  </g>
57
+ <use xlink:href="#c" transform="rotate(60)"/>
58
  </g>
59
+ <use xlink:href="#d" transform="rotate(120)"/>
60
+ <use xlink:href="#d" transform="rotate(-120)"/>
61
  </g>
 
62
  </g>
 
 
63
  </g>
64
  </svg>
65
  '''
 
77
  height: 100vh;
78
  margin: 0;
79
  background-color: #f0f0f0;
80
+ overflow: hidden;
81
  }}
82
  .flag-container {{
83
+ width: 900px;
84
+ height: 600px;
85
  perspective: 1000px;
86
  }}
87
  .flag {{
 
91
  animation: wave 5s ease-in-out infinite;
92
  }}
93
  @keyframes wave {{
94
+ 0%, 100% {{ transform: rotateY(0deg) rotateX(0deg); }}
95
+ 25% {{ transform: rotateY(5deg) rotateX(2deg); }}
96
+ 50% {{ transform: rotateY(0deg) rotateX(0deg); }}
97
+ 75% {{ transform: rotateY(-5deg) rotateX(-2deg); }}
98
  }}
99
  </style>
100
  </head>
 
116
  inputs=[],
117
  outputs=gr.HTML(),
118
  title="Animated Indian Flag",
119
+ description="An enhanced animated Indian flag waving in the sky."
120
  )
121
 
122
  if __name__ == "__main__":