Hugging Face's logo

Spaces:
Geek7
/
dl
Running

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

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +82 -322
app.py CHANGED
@@ -1,4 +1,5 @@
1
  import streamlit as st
 
2
  from streamlit.components.v1 import html
3
 
4
  html(
@@ -9,339 +10,98 @@ html(
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
- )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  import streamlit as st
2
+ from pytube import YouTube
3
  from streamlit.components.v1 import html
4
 
5
  html(
 
10
  <meta charset="UTF-8">
11
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
12
  <title>Document</title>
13
+ <style>
14
+ .m{
15
+ background-image: linear-gradient(115deg,#FFAF00,#FFC500,#FFD600,#FCED00,#F9F380,#F6F7CD);
16
+ animation: rotate 7s linear infinite;
17
+
18
+ }
19
+ @keyframes rotate {
20
+ 100%{
21
+ filter: hue-rotate(-360deg)
22
+ }
23
+ }
24
+ </style>
25
  </head>
26
  <body>
27
+ <div class="m">
28
+
29
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  </body>
31
+ </html>
32
+ """
33
+ )
34
+
35
+
36
+
37
+
38
+ hide_streamlit_style = """
39
  <style>
40
+ #MainMenu {visibility: hidden;}
41
+ footer {visibility: hidden;}
 
 
 
42
 
 
 
 
 
 
 
 
 
 
 
43
 
44
+ </style>
45
+ """
 
 
 
 
 
 
 
 
 
46
 
47
+ st.markdown(hide_streamlit_style, unsafe_allow_html=True)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
 
49
+ class YouTubeDownloader:
50
+ @staticmethod
51
+ def run():
52
+ st.header("YouTube Video Downloader")
53
+ url = st.text_input("Enter YouTube URL to download:")
54
+ start_button = st.button("Start Download")
 
 
 
 
 
 
 
55
 
56
+ if start_button:
57
+ if url:
58
+ YouTubeDownloader.validate_url(url)
59
+ with st.expander("preview video"):
60
+ st.video(url)
61
+ YouTubeDownloader.cleanup()
62
+ file_ = YouTubeDownloader.download_video(url)
63
+ st.video(file_)
64
+ YouTubeDownloader.helper_message()
 
 
 
 
 
65
 
66
+ st.markdown("YouTube Video Download Help")
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
 
68
+ @staticmethod
69
+ def download_video(url):
70
+ with st.spinner("Downloading..."):
71
+ local_file = (
72
+ YouTube(url)
73
+ .streams.filter(progressive=True, file_extension="mp4")
74
+ .first()
75
+ .download()
76
+ )
77
+ st.success("Downloaded")
78
+ return local_file
 
 
 
 
 
 
 
 
 
79
 
80
+ @staticmethod
81
+ def validate_url(url):
82
+ import validators
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
 
84
+ if not validators.url(url):
85
+ st.error("Hi there 👋 URL seems invalid 👽")
86
+ st.stop()
 
 
87
 
88
+ @classmethod
89
+ def cleanup(cls):
90
+ import pathlib
91
+ import glob
92
+
93
+ junks = glob.glob("*.mp4")
94
+ for junk in junks:
95
+ pathlib.Path(junk).unlink()
96
+
97
+ @classmethod
98
+ def helper_message(cls):
99
+ st.write(
100
+ "> To save the video to the local computer, "
101
+ "click the vertical ... icon (aka hamburger button) in the bottom-right corner (in the video above) and click download."
102
+ )
103
+
104
+
105
+ if __name__ == "__main__":
106
+ YouTubeDownloader.run()
107
+