Hugging Face's logo

Spaces:
Felguk
/
a-russian-youtube-ai-example
Running

App Files Community
Felguk commited on
Commit
2cc5a90
·
verified ·
1 Parent(s): ba14d3b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +329 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: A Russian Youtube Ai Example
3
- emoji: 🏆
4
- colorFrom: red
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: a-russian-youtube-ai-example
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,329 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI News - YouTube</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .sidebar {
11
+ scrollbar-width: thin;
12
+ scrollbar-color: #606060 #0f0f0f;
13
+ }
14
+ .sidebar::-webkit-scrollbar {
15
+ width: 8px;
16
+ }
17
+ .sidebar::-webkit-scrollbar-track {
18
+ background: #0f0f0f;
19
+ }
20
+ .sidebar::-webkit-scrollbar-thumb {
21
+ background-color: #606060;
22
+ border-radius: 4px;
23
+ }
24
+ .video-grid {
25
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
26
+ }
27
+ .search-bar {
28
+ background-color: #121212;
29
+ border: 1px solid #303030;
30
+ }
31
+ .search-bar:focus-within {
32
+ border-color: #1c62b9;
33
+ background-color: #181818;
34
+ }
35
+ .video-card:hover .video-thumbnail {
36
+ border-radius: 0;
37
+ transition: border-radius 0.2s ease;
38
+ }
39
+ .channel-icon {
40
+ transition: transform 0.2s ease;
41
+ }
42
+ .video-card:hover .channel-icon {
43
+ transform: scale(1.1);
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-black text-white">
48
+ <!-- Header -->
49
+ <header class="fixed top-0 left-0 right-0 bg-black bg-opacity-90 z-50 px-4 py-2 flex items-center justify-between border-b border-gray-800">
50
+ <div class="flex items-center">
51
+ <div class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-700 cursor-pointer mr-2">
52
+ <i class="fas fa-bars text-xl"></i>
53
+ </div>
54
+ <div class="flex items-center cursor-pointer">
55
+ <i class="fab fa-youtube text-red-600 text-3xl mr-2"></i>
56
+ <span class="text-xl font-semibold">YouTube</span>
57
+ </div>
58
+ </div>
59
+
60
+ <div class="flex items-center flex-1 max-w-2xl mx-4">
61
+ <div class="search-bar flex items-center flex-1 rounded-3xl overflow-hidden">
62
+ <input type="text" placeholder="Искать" class="bg-transparent px-4 py-2 w-full focus:outline-none">
63
+ <button class="px-5 py-2 bg-gray-700 text-gray-300 hover:bg-gray-600">
64
+ <i class="fas fa-search"></i>
65
+ </button>
66
+ </div>
67
+ <button class="ml-4 w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
68
+ <i class="fas fa-microphone"></i>
69
+ </button>
70
+ </div>
71
+
72
+ <div class="flex items-center">
73
+ <button class="w-10 h-10 rounded-full hover:bg-gray-700 flex items-center justify-center mx-1">
74
+ <i class="fas fa-video"></i>
75
+ </button>
76
+ <button class="w-10 h-10 rounded-full hover:bg-gray-700 flex items-center justify-center mx-1">
77
+ <i class="fas fa-bell"></i>
78
+ </button>
79
+ <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center ml-2 cursor-pointer">
80
+ <span class="text-sm font-medium">И</span>
81
+ </div>
82
+ </div>
83
+ </header>
84
+
85
+ <!-- Main Content -->
86
+ <div class="flex pt-16">
87
+ <!-- Sidebar -->
88
+ <aside class="sidebar w-60 h-screen overflow-y-auto fixed bg-black hidden md:block">
89
+ <div class="px-4 py-3">
90
+ <div class="mb-2">
91
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800">
92
+ <i class="fas fa-home mr-4 text-lg"></i>
93
+ <span>Главная</span>
94
+ </a>
95
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800">
96
+ <i class="fas fa-compass mr-4 text-lg"></i>
97
+ <span>Навигатор</span>
98
+ </a>
99
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800">
100
+ <i class="fas fa-newspaper mr-4 text-lg"></i>
101
+ <span>Новости</span>
102
+ </a>
103
+ </div>
104
+
105
+ <div class="border-t border-gray-800 pt-2 mt-2">
106
+ <h3 class="px-3 py-1 text-sm font-medium text-gray-400">ИЗБРАННОЕ</h3>
107
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800">
108
+ <i class="fas fa-clock mr-4 text-lg"></i>
109
+ <span>История</span>
110
+ </a>
111
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800">
112
+ <i class="fas fa-thumbs-up mr-4 text-lg"></i>
113
+ <span>Понравилось</span>
114
+ </a>
115
+ </div>
116
+
117
+ <div class="border-t border-gray-800 pt-2 mt-2">
118
+ <h3 class="px-3 py-1 text-sm font-medium text-gray-400">ПОДПИСКИ</h3>
119
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800">
120
+ <div class="w-6 h-6 rounded-full bg-red-500 mr-4"></div>
121
+ <span>AI News Russia</span>
122
+ </a>
123
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800">
124
+ <div class="w-6 h-6 rounded-full bg-blue-500 mr-4"></div>
125
+ <span>Технологии будущего</span>
126
+ </a>
127
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800">
128
+ <div class="w-6 h-6 rounded-full bg-green-500 mr-4"></div>
129
+ <span>Нейросети</span>
130
+ </a>
131
+ </div>
132
+
133
+ <div class="border-t border-gray-800 pt-2 mt-2">
134
+ <h3 class="px-3 py-1 text-sm font-medium text-gray-400">ТЕМЫ</h3>
135
+ <div class="flex flex-wrap px-2">
136
+ <span class="bg-gray-800 rounded-full px-3 py-1 text-sm m-1">Искусственный интеллект</span>
137
+ <span class="bg-gray-800 rounded-full px-3 py-1 text-sm m-1">ChatGPT</span>
138
+ <span class="bg-gray-800 rounded-full px-3 py-1 text-sm m-1">Нейросети</span>
139
+ <span class="bg-gray-800 rounded-full px-3 py-1 text-sm m-1">Машинное обучение</span>
140
+ <span class="bg-gray-800 rounded-full px-3 py-1 text-sm m-1">Deep Learning</span>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </aside>
145
+
146
+ <!-- Videos Section -->
147
+ <main class="flex-1 ml-0 md:ml-60 p-4">
148
+ <!-- Category Tabs -->
149
+ <div class="flex overflow-x-auto pb-2 mb-4 scrollbar-hide">
150
+ <button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">Все</button>
151
+ <button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">Новинки</button>
152
+ <button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">Последние новости</button>
153
+ <button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">Искусственный интеллект</button>
154
+ <button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">ChatGPT</button>
155
+ <button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">Нейросети</button>
156
+ <button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">Машинное обучение</button>
157
+ </div>
158
+
159
+ <!-- Featured Video -->
160
+ <div class="mb-8">
161
+ <h2 class="text-xl font-bold mb-4">🔥 Последние новости об ИИ</h2>
162
+ <div class="w-full aspect-video bg-gray-900 rounded-xl overflow-hidden">
163
+ <iframe width="100%" height="100%" src="https://www.youtube.com/embed/3q3FV65ZrUs?autoplay=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
164
+ </div>
165
+ <div class="mt-3">
166
+ <h3 class="text-lg font-semibold">Последние новости искусственного интеллекта | Июнь 2023</h3>
167
+ <div class="flex items-center mt-2 text-sm text-gray-400">
168
+ <span>AI News Russia</span>
169
+ <span class="mx-2">•</span>
170
+ <span>125 тыс. просмотров</span>
171
+ <span class="mx-2">•</span>
172
+ <span>3 дня назад</span>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Video Grid -->
178
+ <h2 class="text-xl font-bold mb-4">Рекомендуем посмотреть</h2>
179
+ <div class="video-grid grid gap-4">
180
+ <!-- Video Card 1 -->
181
+ <div class="video-card cursor-pointer">
182
+ <div class="video-thumbnail relative rounded-xl overflow-hidden aspect-video bg-gray-800">
183
+ <img src="https://i.ytimg.com/vi/7Y32dXH5T_c/hqdefault.jpg" alt="Video thumbnail" class="w-full h-full object-cover">
184
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-80 px-1.5 py-0.5 text-xs rounded">12:34</span>
185
+ </div>
186
+ <div class="flex mt-3">
187
+ <div class="w-9 h-9 rounded-full bg-blue-500 mr-3 overflow-hidden channel-icon">
188
+ <img src="https://yt3.googleusercontent.com/ytc/APkrFKaqca-x0g2ZJ6VQ9DpXvXp5X5Q5Q5Q5Q5Q5Q5Q5Q=s176-c-k-c0x00ffffff-no-rj" alt="Channel icon" class="w-full h-full object-cover">
189
+ </div>
190
+ <div>
191
+ <h3 class="font-medium line-clamp-2">Как ChatGPT изменит мир? Интервью с экспертом по ИИ</h3>
192
+ <div class="text-sm text-gray-400 mt-1">
193
+ <span>Технологии будущего</span>
194
+ <span class="mx-1">•</span>
195
+ <span>245 тыс. просмотров</span>
196
+ <span class="mx-1">•</span>
197
+ <span>1 неделю назад</span>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Video Card 2 -->
204
+ <div class="video-card cursor-pointer">
205
+ <div class="video-thumbnail relative rounded-xl overflow-hidden aspect-video bg-gray-800">
206
+ <img src="https://i.ytimg.com/vi/9dA8Z5JZg5I/hqdefault.jpg" alt="Video thumbnail" class="w-full h-full object-cover">
207
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-80 px-1.5 py-0.5 text-xs rounded">8:45</span>
208
+ </div>
209
+ <div class="flex mt-3">
210
+ <div class="w-9 h-9 rounded-full bg-red-500 mr-3 overflow-hidden channel-icon">
211
+ <img src="https://yt3.googleusercontent.com/ytc/APkrFKZWeMCsx4Q9e_Hm6nhOOUQ3fv96QGUXiMr1-pPP=s176-c-k-c0x00ffffff-no-rj" alt="Channel icon" class="w-full h-full object-cover">
212
+ </div>
213
+ <div>
214
+ <h3 class="font-medium line-clamp-2">Новый ИИ от Google - революция в поиске</h3>
215
+ <div class="text-sm text-gray-400 mt-1">
216
+ <span>AI News Russia</span>
217
+ <span class="mx-1">•</span>
218
+ <span>189 тыс. просмотров</span>
219
+ <span class="mx-1">•</span>
220
+ <span>5 дней назад</span>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Video Card 3 -->
227
+ <div class="video-card cursor-pointer">
228
+ <div class="video-thumbnail relative rounded-xl overflow-hidden aspect-video bg-gray-800">
229
+ <iframe width="100%" height="100%" src="https://www.youtube.com/embed/5Z8j0j1J0Y0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
230
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-80 px-1.5 py-0.5 text-xs rounded">15:22</span>
231
+ </div>
232
+ <div class="flex mt-3">
233
+ <div class="w-9 h-9 rounded-full bg-green-500 mr-3 overflow-hidden channel-icon">
234
+ <img src="https://yt3.googleusercontent.com/ytc/APkrFKb4hW3W0g0g0g0g0g0g0g0g0g0g0g0g0g0g0g=s176-c-k-c0x00ffffff-no-rj" alt="Channel icon" class="w-full h-full object-cover">
235
+ </div>
236
+ <div>
237
+ <h3 class="font-medium line-clamp-2">Как нейросети создают искусственное искусство</h3>
238
+ <div class="text-sm text-gray-400 mt-1">
239
+ <span>Нейросети</span>
240
+ <span class="mx-1">•</span>
241
+ <span>312 тыс. просмотров</span>
242
+ <span class="mx-1">•</span>
243
+ <span>2 недели назад</span>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Video Card 4 -->
250
+ <div class="video-card cursor-pointer">
251
+ <div class="video-thumbnail relative rounded-xl overflow-hidden aspect-video bg-gray-800">
252
+ <img src="https://i.ytimg.com/vi/2Z8j0j1J0Y0/hqdefault.jpg" alt="Video thumbnail" class="w-full h-full object-cover">
253
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-80 px-1.5 py-0.5 text-xs rounded">22:18</span>
254
+ </div>
255
+ <div class="flex mt-3">
256
+ <div class="w-9 h-9 rounded-full bg-purple-500 mr-3 overflow-hidden channel-icon">
257
+ <img src="https://yt3.googleusercontent.com/ytc/APkrFKb4hW3W0g0g0g0g0g0g0g0g0g0g0g0g0g0g0g=s176-c-k-c0x00ffffff-no-rj-mo" alt="Channel icon" class="w-full h-full object-cover">
258
+ </div>
259
+ <div>
260
+ <h3 class="font-medium line-clamp-2">ИИ в медицине: как алгоритмы спасают жизни</h3>
261
+ <div class="text-sm text-gray-400 mt-1">
262
+ <span>AI в медицине</span>
263
+ <span class="mx-1">•</span>
264
+ <span>98 тыс. просмотров</span>
265
+ <span class="mx-1">•</span>
266
+ <span>3 недели назад</span>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Video Card 5 -->
273
+ <div class="video-card cursor-pointer">
274
+ <div class="video-thumbnail relative rounded-xl overflow-hidden aspect-video bg-gray-800">
275
+ <iframe width="100%" height="100%" src="https://www.youtube.com/embed/1Z8j0j1J0Y0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
276
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-80 px-1.5 py-0.5 text-xs rounded">10:05</span>
277
+ </div>
278
+ <div class="flex mt-3">
279
+ <div class="w-9 h-9 rounded-full bg-yellow-500 mr-3 overflow-hidden channel-icon">
280
+ <img src="https://yt3.googleusercontent.com/ytc/APkrFKb4hW3W0g0g0g0g0g0g0g0g0g0g0g0g0g0g0g=s176-c-k-c0x00ffffff-no-rj-mo" alt="Channel icon" class="w-full h-full object-cover">
281
+ </div>
282
+ <div>
283
+ <h3 class="font-medium line-clamp-2">Российские разработки в области искусственного интеллекта</h3>
284
+ <div class="text-sm text-gray-400 mt-1">
285
+ <span>Русские технологии</span>
286
+ <span class="mx-1">•</span>
287
+ <span>156 тыс. просмотров</span>
288
+ <span class="mx-1">•</span>
289
+ <span>1 месяц назад</span>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Video Card 6 -->
296
+ <div class="video-card cursor-pointer">
297
+ <div class="video-thumbnail relative rounded-xl overflow-hidden aspect-video bg-gray-800">
298
+ <img src="https://i.ytimg.com/vi/3Z8j0j1J0Y0/hqdefault.jpg" alt="Video thumbnail" class="w-full h-full object-cover">
299
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-80 px-1.5 py-0.5 text-xs rounded">18:37</span>
300
+ </div>
301
+ <div class="flex mt-3">
302
+ <div class="w-9 h-9 rounded-full bg-pink-500 mr-3 overflow-hidden channel-icon">
303
+ <img src="https://yt3.googleusercontent.com/ytc/APkrFKb4hW3W0g0g0g0g0g0g0g0g0g0g0g0g0g0g0g=s176-c-k-c0x00ffffff-no-rj-mo" alt="Channel icon" class="w-full h-full object-cover">
304
+ </div>
305
+ <div>
306
+ <h3 class="font-medium line-clamp-2">Этика ИИ: какие проблемы нас ждут в будущем?</h3>
307
+ <div class="text-sm text-gray-400 mt-1">
308
+ <span>Философия технологий</span>
309
+ <span class="mx-1">•</span>
310
+ <span>87 тыс. просмотров</span>
311
+ <span class="mx-1">•</span>
312
+ <span>2 месяца назад</span>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </main>
319
+ </div>
320
+
321
+ <script>
322
+ // Simple script to handle mobile menu toggle if needed
323
+ document.addEventListener('DOMContentLoaded', function() {
324
+ // You can add any interactive functionality here
325
+ console.log('YouTube AI News page loaded');
326
+ });
327
+ </script>
328
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Felguk/a-russian-youtube-ai-example" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
329
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Generate a youtube page.Add a url videos in youtube theme:ai news(russian)