Hugging Face's logo

Spaces:
sagar007
/
Indian_flag
Sleeping

App Files Community
sagar007 commited on
Commit
f6b5575
·
verified ·
1 Parent(s): 5a02909

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +102 -124
app.py CHANGED
@@ -1,144 +1,122 @@
1
  import gradio as gr
2
  import base64
3
 
4
- def generate_flag_svg(wave_speed, wind_intensity, time_of_day):
5
- sky_color = "#87CEEB" if time_of_day == "day" else "#191970"
6
- cloud_opacity = "0.7" if time_of_day == "day" else "0.3"
7
- sun_moon = f'''<circle cx="800" cy="100" r="40" fill="{('#FFD700' if time_of_day == 'day' else '#FFFFFF')}" />''' if time_of_day != "sunset" else f'''
8
- <linearGradient id="sunsetGradient" x1="0%" y1="0%" x2="100%" y2="0%">
9
- <stop offset="0%" style="stop-color:#FF4500;stop-opacity:1" />
10
- <stop offset="100%" style="stop-color:#FFD700;stop-opacity:1" />
11
- </linearGradient>
12
- <circle cx="800" cy="100" r="40" fill="url(#sunsetGradient)" />
13
- '''
14
 
15
- wave_duration = f"{5/wave_speed}s"
16
- wind_transform = f"scale({1 + wind_intensity * 0.1}) skewX({-wind_intensity * 5})"
17
-
18
- flag_svg = f'''
19
- <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">
20
- <defs>
21
- <clipPath id="flag-clip">
22
- <path d="M0,0 Q450,{40 + wind_intensity * 10} 900,0 Q900,300 900,600 Q450,{560 + wind_intensity * 10} 0,600" />
23
- </clipPath>
24
- </defs>
25
-
26
- <!-- Sky background -->
27
- <rect width="900" height="600" fill="{sky_color}" />
28
-
29
- {sun_moon}
30
-
31
- <!-- Moving clouds -->
32
- <g>
33
- <path d="M-300,100 Q-150,50 0,100 T300,100" fill="#ffffff" opacity="{cloud_opacity}">
34
- <animateTransform attributeName="transform" type="translate" from="0 0" to="1200 0" dur="{60/wave_speed}s" repeatCount="indefinite" />
35
- </path>
36
- <path d="M-300,200 Q-150,150 0,200 T300,200" fill="#ffffff" opacity="{float(cloud_opacity) - 0.2}">
37
- <animateTransform attributeName="transform" type="translate" from="0 0" to="1200 0" dur="{45/wave_speed}s" repeatCount="indefinite" />
38
- </path>
39
- </g>
40
 
41
- <!-- Flagpole -->
42
- <rect x="50" y="50" width="20" height="500" fill="#8B4513" />
43
- <circle cx="60" cy="50" r="15" fill="#FFD700" />
44
-
45
- <!-- Animated flag -->
46
- <g transform="translate(70, 50)">
47
- <g clip-path="url(#flag-clip)" transform="{wind_transform}">
48
- <rect width="830" height="200" fill="#FF9933">
49
- <animate attributeName="y" values="0;{10 + wind_intensity * 2};0" dur="{wave_duration}" repeatCount="indefinite" />
50
- </rect>
51
- <rect y="200" width="830" height="200" fill="#FFFFFF">
52
- <animate attributeName="y" values="200;{210 + wind_intensity * 2};200" dur="{wave_duration}" repeatCount="indefinite" />
53
- </rect>
54
- <rect y="400" width="830" height="200" fill="#138808">
55
- <animate attributeName="y" values="400;{410 + wind_intensity * 2};400" dur="{wave_duration}" repeatCount="indefinite" />
56
- </rect>
57
- <g transform="translate(415,300) scale(3.5)">
58
- <circle r="20" fill="#000080" />
59
- <circle r="17.5" fill="#FFFFFF" />
60
- <circle r="3.5" fill="#000080" />
61
- <g id="d">
62
- <g id="c">
63
- <g id="b">
64
- <g id="a">
65
- <circle r="0.875" fill="#000080" transform="rotate(7.5) translate(17.5)" />
66
- <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">
67
- <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="{60/wave_speed}s" repeatCount="indefinite" />
68
- </path>
69
- </g>
70
- <use xlink:href="#a" transform="rotate(15)"/>
71
  </g>
72
- <use xlink:href="#b" transform="rotate(30)"/>
73
  </g>
74
- <use xlink:href="#c" transform="rotate(60)"/>
75
  </g>
76
- <use xlink:href="#d" transform="rotate(120)"/>
77
- <use xlink:href="#d" transform="rotate(-120)"/>
78
  </g>
 
 
79
  </g>
80
  </g>
81
- </svg>
82
- '''
83
- return base64.b64encode(flag_svg.encode('utf-8')).decode('utf-8')
84
 
85
- def update_flag(wave_speed, wind_intensity, time_of_day):
86
- encoded_flag = generate_flag_svg(wave_speed, wind_intensity, time_of_day)
87
-
88
- html = f'''
89
- <html>
90
- <head>
91
- <style>
92
- body {{
93
- display: flex;
94
- justify-content: center;
95
- align-items: center;
96
- height: 100vh;
97
- margin: 0;
98
- background-color: #f0f0f0;
99
- overflow: hidden;
100
- }}
101
- .flag-container {{
102
- width: 900px;
103
- height: 600px;
104
- perspective: 1000px;
105
- }}
106
- .flag {{
107
- width: 100%;
108
- height: 100%;
109
- transform-style: preserve-3d;
110
- animation: wave {5/wave_speed}s ease-in-out infinite;
111
- }}
112
- @keyframes wave {{
113
- 0%, 100% {{ transform: rotateY(0deg) rotateX(0deg); }}
114
- 25% {{ transform: rotateY({5 + wind_intensity}deg) rotateX({2 + wind_intensity/2}deg); }}
115
- 50% {{ transform: rotateY(0deg) rotateX(0deg); }}
116
- 75% {{ transform: rotateY({-5 - wind_intensity}deg) rotateX({-2 - wind_intensity/2}deg); }}
117
- }}
118
- </style>
119
- </head>
120
- <body>
121
- <div class="flag-container">
122
- <div class="flag">
123
- <img src="data:image/svg+xml;base64,{encoded_flag}" alt="Animated Indian Flag">
124
- </div>
125
  </div>
126
- </body>
127
- </html>
128
- '''
 
 
 
129
  return html
130
 
131
  iface = gr.Interface(
132
- fn=update_flag,
133
- inputs=[
134
- gr.Slider(minimum=0.5, maximum=2, value=1, step=0.1, label="Wave Speed"),
135
- gr.Slider(minimum=0, maximum=10, value=0, step=1, label="Wind Intensity"),
136
- gr.Radio(["day", "sunset", "night"], label="Time of Day", value="day"),
137
- ],
138
  outputs=gr.HTML(),
139
- title="Interactive Animated Indian Flag",
140
- description="Control the wave speed, wind intensity, and time of day of the animated Indian flag.",
141
- live=True
142
  )
143
 
144
  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
+ '''
66
 
67
+ encoded_flag = base64.b64encode(flag_svg.encode('utf-8')).decode('utf-8')
68
+
69
+ html = f'''
70
+ <html>
71
+ <head>
72
+ <style>
73
+ body {{
74
+ display: flex;
75
+ justify-content: center;
76
+ align-items: center;
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 {{
88
+ width: 100%;
89
+ height: 100%;
90
+ transform-style: preserve-3d;
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>
101
+ <body>
102
+ <div class="flag-container">
103
+ <div class="flag">
104
+ <img src="data:image/svg+xml;base64,{encoded_flag}" alt="Animated Indian Flag">
 
 
105
  </div>
106
+ </div>
107
+ </body>
108
+ </html>
109
+ '''
110
+
111
+ def show_flag():
112
  return html
113
 
114
  iface = gr.Interface(
115
+ fn=show_flag,
116
+ inputs=[],
 
 
 
 
117
  outputs=gr.HTML(),
118
+ title="Animated Indian Flag",
119
+ description=" Happy 78th Independence Day."
 
120
  )
121
 
122
  if __name__ == "__main__":