Hugging Face's logo

Spaces:
Geek7
/
dl
Running

App Files Community
Geek7 commited on
Commit
133d36d
·
1 Parent(s): d81e399

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +334 -73
app.py CHANGED
@@ -1,86 +1,347 @@
1
  import streamlit as st
2
- from pytube import YouTube
3
 
4
- with open('style.css') as f:
5
- st.markdown(f'<style>{f.read()}</style>',unsafe_allow_html=True)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
 
 
 
 
 
 
 
 
7
 
 
 
 
 
 
 
 
 
 
 
8
 
 
 
 
 
 
 
 
 
 
 
 
9
 
10
- # Load Animation
11
- animation_symbol = "❄"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
 
13
- st.markdown(
14
- f"""
15
- <div class="snowflake">{animation_symbol}</div>
16
- <div class="snowflake">{animation_symbol}</div>
17
- <div class="snowflake">{animation_symbol}</div>
18
- <div class="snowflake">{animation_symbol}</div>
19
- <div class="snowflake">{animation_symbol}</div>
20
- <div class="snowflake">{animation_symbol}</div>
21
- <div class="snowflake">{animation_symbol}</div>
22
- <div class="snowflake">{animation_symbol}</div>
23
- <div class="snowflake">{animation_symbol}</div>
24
- """,
25
- unsafe_allow_html=True,
26
- )
27
 
28
- class YouTubeDownloader:
29
- @staticmethod
30
- def run():
31
- st.header("YouTube Video Downloader")
32
- url = st.text_input("Enter YouTube URL to download:")
33
- start_button = st.button("Start Download")
 
 
 
 
 
 
 
 
34
 
35
- if start_button:
36
- if url:
37
- YouTubeDownloader.validate_url(url)
38
- with st.expander("preview video"):
39
- st.video(url)
40
- YouTubeDownloader.cleanup()
41
- file_ = YouTubeDownloader.download_video(url)
42
- st.video(file_)
43
- YouTubeDownloader.helper_message()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
 
45
- st.markdown("YouTube Video Download Help")
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
 
47
- @staticmethod
48
- def download_video(url):
49
- with st.spinner("Downloading..."):
50
- local_file = (
51
- YouTube(url)
52
- .streams.filter(progressive=True, file_extension="mp4")
53
- .first()
54
- .download()
55
- )
56
- st.success("Downloaded")
57
- return local_file
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
 
59
- @staticmethod
60
- def validate_url(url):
61
- import validators
 
 
62
 
63
- if not validators.url(url):
64
- st.error("Hi there 👋 URL seems invalid 👽")
65
- st.stop()
66
-
67
- @classmethod
68
- def cleanup(cls):
69
- import pathlib
70
- import glob
71
-
72
- junks = glob.glob("*.mp4")
73
- for junk in junks:
74
- pathlib.Path(junk).unlink()
75
-
76
- @classmethod
77
- def helper_message(cls):
78
- st.write(
79
- "> To save the video to the local computer, "
80
- "click the vertical ... icon (aka hamburger button) in the bottom-right corner (in the video above) and click download."
81
- )
82
-
83
-
84
- if __name__ == "__main__":
85
- YouTubeDownloader.run()
86
-
 
1
  import streamlit as st
2
+ from streamlit.components.v1 import html
3
 
4
+ html(
5
+ """
6
+ <!DOCTYPE html>
7
+ <html lang="en">
8
+ <head>
9
+ <meta charset="UTF-8">
10
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+ <title>Document</title>
12
+ </head>
13
+ <body>
14
+ <div id="retrobg">
15
+ <div id="retrobg-sky">
16
+ <div id="retrobg-stars">
17
+ <div class="retrobg-star" style="left: 5%; top: 55%; transform: scale( 2 );"></div>
18
+ <div class="retrobg-star" style="left: 7%; top: 5%; transform: scale( 2 );"></div>
19
+ <div class="retrobg-star" style="left: 10%; top: 45%; transform: scale( 1 );"></div>
20
+ <div class="retrobg-star" style="left: 12%; top: 35%; transform: scale( 1 );"></div>
21
+ <div class="retrobg-star" style="left: 15%; top: 39%; transform: scale( 1 );"></div>
22
+ <div class="retrobg-star" style="left: 20%; top: 10%; transform: scale( 1 );"></div>
23
+ <div class="retrobg-star" style="left: 35%; top: 50%; transform: scale( 2 );"></div>
24
+ <div class="retrobg-star" style="left: 40%; top: 16%; transform: scale( 2 );"></div>
25
+ <div class="retrobg-star" style="left: 43%; top: 28%; transform: scale( 1 );"></div>
26
+ <div class="retrobg-star" style="left: 45%; top: 30%; transform: scale( 3 );"></div>
27
+ <div class="retrobg-star" style="left: 55%; top: 18%; transform: scale( 1 );"></div>
28
+ <div class="retrobg-star" style="left: 60%; top: 23%; transform: scale( 1 );"></div>
29
+ <div class="retrobg-star" style="left: 62%; top: 44%; transform: scale( 2 );"></div>
30
+ <div class="retrobg-star" style="left: 67%; top: 27%; transform: scale( 1 );"></div>
31
+ <div class="retrobg-star" style="left: 75%; top: 10%; transform: scale( 2 );"></div>
32
+ <div class="retrobg-star" style="left: 80%; top: 25%; transform: scale( 1 );"></div>
33
+ <div class="retrobg-star" style="left: 83%; top: 57%; transform: scale( 1 );"></div>
34
+ <div class="retrobg-star" style="left: 90%; top: 29%; transform: scale( 2 );"></div>
35
+ <div class="retrobg-star" style="left: 95%; top: 5%; transform: scale( 1 );"></div>
36
+ <div class="retrobg-star" style="left: 96%; top: 72%; transform: scale( 1 );"></div>
37
+ <div class="retrobg-star" style="left: 98%; top: 70%; transform: scale( 3 );"></div>
38
+ </div>
39
+ <div id="retrobg-sunWrap">
40
+ <div id="retrobg-sun"></div>
41
+ </div>
42
+ <div id="retrobg-mountains">
43
+ <div id="retrobg-mountains-left" class="retrobg-mountain"></div>
44
+ <div id="retrobg-mountains-right" class="retrobg-mountain"></div>
45
+ </div>
46
+ <div id="retrobg-cityWrap">
47
+ <div id="retrobg-city">
48
+ <div style="left: 4.0%; height: 20%; width: 3.0%;" class="retrobg-building"></div>
49
+ <div style="left: 6.0%; height: 50%; width: 1.5%;" class="retrobg-building"></div>
50
+ <div style="left: 8.0%; height: 25%; width: 4.0%;" class="retrobg-building"></div>
51
+ <div style="left: 12.0%; height: 30%; width: 3.0%;" class="retrobg-building"></div>
52
+ <div style="left: 13.0%; height: 55%; width: 3.0%;" class="retrobg-building retrobg-antenna"></div>
53
+ <div style="left: 17.0%; height: 20%; width: 4.0%;" class="retrobg-building"></div>
54
+ <div style="left: 18.5%; height: 70%; width: 1.5%;" class="retrobg-building"></div>
55
+ <div style="left: 20.0%; height: 30%; width: 4.0%;" class="retrobg-building"></div>
56
+ <div style="left: 21.5%; height: 80%; width: 2.0%;" class="retrobg-building retrobg-antenna"></div>
57
+ <div style="left: 25.0%; height: 60%; width: 4.0%;" class="retrobg-building"></div>
58
+ <div style="left: 28.0%; height: 40%; width: 4.0%;" class="retrobg-building"></div>
59
+ <div style="left: 30.0%; height: 70%; width: 4.0%;" class="retrobg-building"></div>
60
+ <div style="left: 35.0%; height: 65%; width: 4.0%;" class="retrobg-building retrobg-antenna"></div>
61
+ <div style="left: 38.0%; height: 40%; width: 3.0%;" class="retrobg-building"></div>
62
+ <div style="left: 42.0%; height: 60%; width: 2.0%;" class="retrobg-building"></div>
63
+ <div style="left: 43.0%; height: 85%; width: 4.0%;" class="retrobg-building retrobg-antenna"></div>
64
+ <div style="left: 45.0%; height: 40%; width: 3.0%;" class="retrobg-building"></div>
65
+ <div style="left: 48.0%; height: 25%; width: 3.0%;" class="retrobg-building"></div>
66
+ <div style="left: 50.0%; height: 80%; width: 4.0%;" class="retrobg-building"></div>
67
+ <div style="left: 52.0%; height: 32%; width: 5.0%;" class="retrobg-building"></div>
68
+ <div style="left: 55.0%; height: 55%; width: 3.0%;" class="retrobg-building retrobg-antenna"></div>
69
+ <div style="left: 58.0%; height: 45%; width: 4.0%;" class="retrobg-building"></div>
70
+ <div style="left: 61.0%; height: 90%; width: 4.0%;" class="retrobg-building"></div>
71
+ <div style="left: 66.0%; height: 99%; width: 4.0%;" class="retrobg-building retrobg-antenna"></div>
72
+ <div style="left: 69.0%; height: 30%; width: 4.0%;" class="retrobg-building"></div>
73
+ <div style="left: 73.5%; height: 90%; width: 2.0%;" class="retrobg-building"></div>
74
+ <div style="left: 72.0%; height: 70%; width: 4.0%;" class="retrobg-building"></div>
75
+ <div style="left: 75.0%; height: 60%; width: 4.0%;" class="retrobg-building"></div>
76
+ <div style="left: 80.0%; height: 40%; width: 4.0%;" class="retrobg-building"></div>
77
+ <div style="left: 83.0%; height: 70%; width: 4.0%;" class="retrobg-building retrobg-antenna"></div>
78
+ <div style="left: 87.0%; height: 60%; width: 3.0%;" class="retrobg-building retrobg-antenna"></div>
79
+ <div style="left: 93.0%; height: 50%; width: 3.0%;" class="retrobg-building"></div>
80
+ <div style="left: 91.0%; height: 30%; width: 4.0%;" class="retrobg-building"></div>
81
+ <div style="left: 94.0%; height: 20%; width: 3.0%;" class="retrobg-building"></div>
82
+ <div style="left: 98.0%; height: 35%; width: 2.0%;" class="retrobg-building"></div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ <div id="retrobg-ground">
87
+ <div id="retrobg-linesWrap">
88
+ <div id="retrobg-lines">
89
+ <div id="retrobg-vlines">
90
+ <div class="retrobg-vline"></div>
91
+ <div class="retrobg-vline"></div>
92
+ <div class="retrobg-vline"></div>
93
+ <div class="retrobg-vline"></div>
94
+ <div class="retrobg-vline"></div>
95
+ <div class="retrobg-vline"></div>
96
+ <div class="retrobg-vline"></div>
97
+ <div class="retrobg-vline"></div>
98
+ <div class="retrobg-vline"></div>
99
+ <div class="retrobg-vline"></div>
100
+ <div class="retrobg-vline"></div>
101
+ <div class="retrobg-vline"></div>
102
+ <div class="retrobg-vline"></div>
103
+ <div class="retrobg-vline"></div>
104
+ <div class="retrobg-vline"></div>
105
+ <div class="retrobg-vline"></div>
106
+ <div class="retrobg-vline"></div>
107
+ <div class="retrobg-vline"></div>
108
+ <div class="retrobg-vline"></div>
109
+ <div class="retrobg-vline"></div>
110
+ <div class="retrobg-vline"></div>
111
+ <div class="retrobg-vline"></div>
112
+ <div class="retrobg-vline"></div>
113
+ <div class="retrobg-vline"></div>
114
+ <div class="retrobg-vline"></div>
115
+ <div class="retrobg-vline"></div>
116
+ <div class="retrobg-vline"></div>
117
+ <div class="retrobg-vline"></div>
118
+ <div class="retrobg-vline"></div>
119
+ <div class="retrobg-vline"></div>
120
+ <div class="retrobg-vline"></div>
121
+ <div class="retrobg-vline"></div>
122
+ <div class="retrobg-vline"></div>
123
+ <div class="retrobg-vline"></div>
124
+ <div class="retrobg-vline"></div>
125
+ <div class="retrobg-vline"></div>
126
+ <div class="retrobg-vline"></div>
127
+ <div class="retrobg-vline"></div>
128
+ <div class="retrobg-vline"></div>
129
+ <div class="retrobg-vline"></div>
130
+ <div class="retrobg-vline"></div>
131
+ <div class="retrobg-vline"></div>
132
+ <div class="retrobg-vline"></div>
133
+ <div class="retrobg-vline"></div>
134
+ <div class="retrobg-vline"></div>
135
+ <div class="retrobg-vline"></div>
136
+ <div class="retrobg-vline"></div>
137
+ <div class="retrobg-vline"></div>
138
+ <div class="retrobg-vline"></div>
139
+ <div class="retrobg-vline"></div>
140
+ <div class="retrobg-vline"></div>
141
+ <div class="retrobg-vline"></div>
142
+ <div class="retrobg-vline"></div>
143
+ </div>
144
+ <div id="retrobg-hlines">
145
+ <div class="retrobg-hline"></div>
146
+ <div class="retrobg-hline"></div>
147
+ <div class="retrobg-hline"></div>
148
+ <div class="retrobg-hline"></div>
149
+ <div class="retrobg-hline"></div>
150
+ <div class="retrobg-hline"></div>
151
+ <div class="retrobg-hline"></div>
152
+ <div class="retrobg-hline"></div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ <div id="retrobg-groundShadow"></div>
157
+ </div>
158
+ <div>
159
 
160
+ </body>
161
+ <style>
162
+ html,
163
+ body {
164
+ margin: 0;
165
+ height: 100%;
166
+ }
167
 
168
+ /* ............................................................... */
169
+ /* ............................................................... */
170
+ /* ............................................................... */
171
+ #retrobg {
172
+ position: relative;
173
+ overflow: hidden;
174
+ height: 100%;
175
+ color: #a3c;
176
+ background-color: #000;
177
+ }
178
 
179
+ /* ............................................................... */
180
+ #retrobg-sky {
181
+ position: absolute;
182
+ display: flex;
183
+ align-items: flex-end;
184
+ justify-content: center;
185
+ top: 0;
186
+ width: 100%;
187
+ height: 55%;
188
+ background: linear-gradient( #214 75%, #249 );
189
+ }
190
 
191
+ /* ............................................................... */
192
+ #retrobg-sunWrap {
193
+ position: relative;
194
+ width: 40%;
195
+ margin-bottom: -15%;
196
+ }
197
+ #retrobg-sun {
198
+ --glow-color: #d44;
199
+ padding-top: 100%;
200
+ border-radius: 50%;
201
+ background-image: linear-gradient( #fcdf11, #ff623f, #fe2085 50% );
202
+ box-shadow: 0 0 160px 80px var( --glow-color );
203
+ animation: 2s ease infinite alternate retrobg-sun-glow-anim;
204
+ }
205
+ .retrobg-shutdown #retrobg-sun {
206
+ background-image: linear-gradient( #000, #000 40% );
207
+ --glow-color: #000;
208
+ }
209
+ @keyframes retrobg-sun-glow-anim {
210
+ from { box-shadow: 0 0 160px 80px var( --glow-color ); }
211
+ to { box-shadow: 0 0 200px 95px var( --glow-color ); }
212
+ }
213
 
214
+ /* ............................................................... */
215
+ #retrobg-stars {
216
+ position: absolute;
217
+ width: 100%;
218
+ height: 100%;
219
+ }
220
+ .retrobg-star {
221
+ position: absolute;
222
+ border-radius: 50%;
223
+ width: 2px;
224
+ height: 2px;
225
+ background-color: #fff;
226
+ }
 
227
 
228
+ /* ............................................................... */
229
+ #retrobg-mountains {
230
+ position: absolute;
231
+ width: 100%;
232
+ height: 30%;
233
+ }
234
+ .retrobg-mountain {
235
+ position: absolute;
236
+ width: 30%;
237
+ height: 100%;
238
+ background-image: linear-gradient( #000 70%, #111 85%, #fff1 );
239
+ }
240
+ #retrobg-mountains-left { left: 0; clip-path: polygon( 0% 100%,0% 55%,5% 60%,10% 55%,20% 50%,25% 42%,30% 38%,33% 35%,40% 45%,50% 50%,60% 70%,70% 85%,75% 82%,80% 91%,85% 90%,90% 95%,95% 98%,100% 100% ); }
241
+ #retrobg-mountains-right { right: 0; clip-path: polygon( 0% 100%,5% 95%,10% 85%,15% 87%,20% 80%,25% 78%,30% 65%,40% 70%,50% 57%,60% 53%,67% 68%,70% 70%,75% 66%,80% 55%,90% 50%,95% 60%,100% 57%,100% 100% ); }
242
 
243
+ /* ............................................................... */
244
+ #retrobg-cityWrap {
245
+ position: absolute;
246
+ width: 50%;
247
+ margin-left: -1%;
248
+ }
249
+ #retrobg-city {
250
+ padding-top: 20%;
251
+ }
252
+ .retrobg-building {
253
+ position: absolute;
254
+ width: 5%;
255
+ height: 100%;
256
+ bottom: 0;
257
+ border-radius: 4px 4px 0 0;
258
+ background-image: linear-gradient( 0deg, rgba( 17, 17, 34, 0 ), #112 30px, #000 );
259
+ }
260
+ .retrobg-building:nth-child( odd ) {
261
+ background-image: linear-gradient( 0deg, rgba( 24, 24, 42, 0 ), #223 30px, #000 );
262
+ }
263
+ .retrobg-antenna::after {
264
+ content: "";
265
+ position: absolute;
266
+ left: 50%;
267
+ margin-left: calc( -1px - 5% );
268
+ bottom: 100%;
269
+ width: 10%;
270
+ min-width: 2px;
271
+ height: 33%;
272
+ background-color: #000;
273
+ }
274
 
275
+ /* ............................................................... */
276
+ #retrobg-ground {
277
+ position: absolute;
278
+ overflow: hidden;
279
+ width: 100%;
280
+ height: 45%;
281
+ bottom: 0;
282
+ border-top: 2px solid #bf578c;
283
+ background-color: #000;
284
+ }
285
+ .retrobg-shutdown #retrobg-ground {
286
+ border-color: #000;
287
+ }
288
+ #retrobg-groundShadow {
289
+ position: absolute;
290
+ top: 0;
291
+ width: 100%;
292
+ height: 100%;
293
+ background-image: linear-gradient( #000 0%, transparent );
294
+ }
295
 
296
+ /* ............................................................... */
297
+ #retrobg-linesWrap {
298
+ height: 100%;
299
+ perspective: 1000px;
300
+ perspective-origin: center top;
301
+ }
302
+ #retrobg-lines {
303
+ position: absolute;
304
+ width: 100%;
305
+ height: 100%;
306
+ transform-origin: top center;
307
+ animation: .35s linear infinite retrobg-lines-anim;
308
+ }
309
+ .retrobg-shutdown #retrobg-lines {
310
+ animation-duration: 5s;
311
+ }
312
+ @keyframes retrobg-lines-anim {
313
+ from { transform: rotateX( 84deg ) translateY( 0 ); }
314
+ to { transform: rotateX( 84deg ) translateY( 100px ); }
315
+ }
316
+ #retrobg-hlines,
317
+ #retrobg-vlines {
318
+ position: absolute;
319
+ left: calc( ( 900% - 100% ) / -2 );
320
+ width: 900%;
321
+ height: 500%;
322
+ }
323
+ #retrobg-vlines {
324
+ display: flex;
325
+ justify-content: center;
326
+ }
327
+ .retrobg-hline,
328
+ .retrobg-vline {
329
+ width: 100%;
330
+ height: 100%;
331
+ background-color: currentColor;
332
+ }
333
+ .retrobg-hline { height: 3px; }
334
+ .retrobg-vline { width: 3px; }
335
+ .retrobg-hline + .retrobg-hline { margin-top: 98px; }
336
+ .retrobg-vline + .retrobg-vline { margin-left: 48px; }
337
 
338
+ </style>
339
+ <script>
340
+ document.querySelector( "#retrobg-sun" ).onclick = () => {
341
+ document.querySelector( "#retrobg" ).classList.toggle( "retrobg-shutdown" );
342
+ };
343
 
344
+ </script>
345
+ </html>
346
+ """
347
+ )