Hugging Face's logo

Spaces:
gozlukluon
/
youtbe
Running

App Files Community
gozlukluon commited on
Commit
304fe6a
·
verified ·
1 Parent(s): fde2142

cretate a web site as a %100 working reals data. Sitenin Özellikleri (Başlık Başlık) Kapsam ve Platformlar Platform desteği: YouTube ve X Spaces Bu sayfada sunulan tüm örnekler ve paneller YouTube odağında Giriş ve Erişim YouTube URL / Video ID ile analiz başlatma Watch ve Analiz et aksiyonları YouTube Data API Anahtarı: Anahtar tarayıcıda yerel olarak saklanır Kaydet ve Test Et seçenekleri İpucu: Google Cloud Console → APIs & Services → Credentials → Create API key Hızlı İçgörüler (Heuristics) Clickbait skoru, başlık uzunluğu, SEO ipuçları Not: Heuristikler hızlı sezgisel değerlendirmedir; kesin analiz için kanal/izlenme metrikleriyle zenginleştirme önerilir Video Detayları Paneli Başlık, Kanal, Yayın tarihi, Süre Kategori, Dil, Ses dili, Altyazı durumu İstatistikler: İzlenme, Beğeni, Yorum Durum: public/embeddable/istatistik paylaşımı vb. Etiketler: Hashtag/keyword listesi Açıklama: Video açıklama metni (tam metin görünümü) Canlı Yayın Paneli Durum tespiti: Canlı yayında olup olmadığını gösterir Canlı video seçildiğinde eşzamanlı panel aktif olur Metrikler (Anlık) Toplam İzlenme, Beğeni, Yorum sayıları Not: YouTube Data API geçmişe dönük zaman serisi sağlamaz Zaman Serisi (Beta) Gereksinim: Backend + yönetici token Ortam değişkenleri: NEXT_PUBLIC_API_URL, ACCESS_TOKEN Çözüm: Backend’de periyodik snapshot job (ör. 5 dk) veya YouTube Analytics API (OAuth) Snapshot verisi yoksa bilgilendirici yönergeler gösterilir Yorum Analizi (Canlı) Video ve Mod bilgisi: Video ID, kayıt sayısı (ör. 500), mod: live Toplama: “Tümünü Çek” ile yorumları getirme Arama ve Filtreleme: Serbest metin arama RegExp modu (büyük/küçük harf duyarlı seçeneği; thanks|teşekkür gibi çoklu kalıp) Dışa aktarma: CSV ve “Copy” kısayolları Kelime Bulutu ve N‑gram’lar Duygu analizi: Özet skor (ör. Olumlu) 1g/2g/3g n‑gram görünümü Bulut/Liste modları Min tekrar eşiği Not: Stopword temizliği + TR gövdeleme uygulanır Katılımcı Analizi En aktif katılımcılar listesi: Yazar, yorum sayısı, beğeni, son aktivite zamanı Sağ panel: profil ve heuristik sinyaller (aşağıdaki profil bölümü) Kullanıcı Profili (Heuristik Panel) Metri̇kler: Toplam yorum, toplam/ortalama beğeni, ort. uzunluk, en aktif saat Sinyaller: Toxicity oranı, tekrarlılık, URL oranı, emoji yoğunluğu Karakter/İletişim analizi: İletişim stili, duygu tonu, ilgi alanları, etkileşim paterni Öne çıkan kelimeler ve yorum geçmişi (zaman, beğeni, metin) Uyarı: Tamamı otomatik ve tahmini; kesin yargı içermez İhracat ve Kopyalama Çeşitli panellerde CSV ve Copy seçenekleri ile veri dışa aktarma Güvenlik ve Gizlilik API anahtarı yalnızca tarayıcıda saklanır; sunucuya gönderilmez (belirtilen akışa göre) Yönetici token gerektiren kısımlar: yalnızca yetkili erişimle çalışır Entegrasyon ve Geliştirme Notları YouTube Data API: Anlık veri YouTube Analytics API (OAuth): Tarihsel zaman serileri için önerilir Backend snapshot job: Zaman serisi grafiği için periyodik veri kaydı Ortam değişkenleri: NEXT_PUBLIC_API_URL, ACCESS_TOKEN (Beta özellikler için) - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +676 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Youtbe
3
- emoji: 👁
4
- colorFrom: blue
5
- colorTo: indigo
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: youtbe
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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,676 @@
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="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>YouTube & X Spaces Video Analytics</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#FF0000',
15
+ secondary: '#1DA1F2',
16
+ accent: '#FFD700',
17
+ dark: '#1a1a1a',
18
+ light: '#f8f9fa'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ /* Custom styles for specific elements */
26
+ .gradient-bg {
27
+ background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
28
+ }
29
+
30
+ .card-hover {
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .card-hover:hover {
35
+ transform: translateY(-5px);
36
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
37
+ }
38
+
39
+ .tab-active {
40
+ border-bottom: 3px solid #FF0000;
41
+ font-weight: 600;
42
+ }
43
+
44
+ .word-cloud {
45
+ display: flex;
46
+ flex-wrap: wrap;
47
+ justify-content: center;
48
+ align-items: center;
49
+ gap: 10px;
50
+ padding: 20px;
51
+ }
52
+
53
+ .word {
54
+ padding: 5px 10px;
55
+ border-radius: 20px;
56
+ background-color: #f1f1f1;
57
+ transition: all 0.2s ease;
58
+ }
59
+
60
+ .word:hover {
61
+ transform: scale(1.1);
62
+ background-color: #FFD700;
63
+ }
64
+
65
+ .stat-card {
66
+ border-left: 4px solid #FF0000;
67
+ }
68
+
69
+ .live-badge {
70
+ animation: pulse 2s infinite;
71
+ }
72
+
73
+ @keyframes pulse {
74
+ 0% { opacity: 1; }
75
+ 50% { opacity: 0.5; }
76
+ 100% { opacity: 1; }
77
+ }
78
+
79
+ /* Scrollbar styling */
80
+ ::-webkit-scrollbar {
81
+ width: 8px;
82
+ }
83
+
84
+ ::-webkit-scrollbar-track {
85
+ background: #f1f1f1;
86
+ }
87
+
88
+ ::-webkit-scrollbar-thumb {
89
+ background: #888;
90
+ border-radius: 4px;
91
+ }
92
+
93
+ ::-webkit-scrollbar-thumb:hover {
94
+ background: #555;
95
+ }
96
+
97
+ /* Responsive adjustments */
98
+ @media (max-width: 768px) {
99
+ .responsive-grid {
100
+ grid-template-columns: 1fr;
101
+ }
102
+
103
+ .side-panel {
104
+ order: 2;
105
+ }
106
+
107
+ .main-panel {
108
+ order: 1;
109
+ }
110
+ }
111
+ </style>
112
+ </head>
113
+ <body class="bg-gray-100 text-gray-800 font-sans">
114
+ <!-- Header Section -->
115
+ <header class="gradient-bg text-white p-4 shadow-md">
116
+ <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
117
+ <div class="flex items-center mb-4 md:mb-0">
118
+ <i class="fab fa-youtube text-primary text-3xl mr-2"></i>
119
+ <h1 class="text-2xl font-bold">Video Analytics Platform</h1>
120
+ </div>
121
+
122
+ <div class="flex items-center space-x-4">
123
+ <div class="relative">
124
+ <input type="text" id="apiKeyInput" placeholder="YouTube API Key"
125
+ class="bg-gray-700 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary w-full md:w-64">
126
+ <button onclick="saveApiKey()" class="absolute right-2 top-2 text-gray-400 hover:text-white">
127
+ <i class="fas fa-save"></i>
128
+ </button>
129
+ </div>
130
+
131
+ <button class="bg-primary hover:bg-red-700 px-4 py-2 rounded-lg flex items-center">
132
+ <i class="fas fa-key mr-2"></i> API Key Al
133
+ </button>
134
+ </div>
135
+ </div>
136
+ </header>
137
+
138
+ <!-- Main Content -->
139
+ <main class="container mx-auto p-4 mt-6">
140
+ <!-- Input Section -->
141
+ <section class="bg-white rounded-xl shadow-lg p-6 mb-8">
142
+ <h2 class="text-2xl font-bold mb-4 text-gray-800">Video Analiz Başlat</h2>
143
+
144
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
145
+ <div class="md:col-span-2">
146
+ <input type="text" id="videoUrl" placeholder="YouTube URL veya Video ID girin"
147
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
148
+ </div>
149
+
150
+ <div class="flex space-x-2">
151
+ <button onclick="analyzeVideo()" class="bg-primary hover:bg-red-700 text-white px-6 py-3 rounded-lg flex items-center justify-center w-full">
152
+ <i class="fas fa-play-circle mr-2"></i> Analiz Et
153
+ </button>
154
+
155
+ <button class="bg-secondary hover:bg-blue-700 text-white px-4 py-3 rounded-lg flex items-center justify-center">
156
+ <i class="fab fa-x-twitter"></i>
157
+ </button>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="mt-4 text-sm text-gray-600 flex items-center">
162
+ <i class="fas fa-info-circle mr-2"></i>
163
+ <span>API anahtarınız tarayıcınızda yerel olarak saklanır, sunucuya gönderilmez.</span>
164
+ </div>
165
+ </section>
166
+
167
+ <!-- Quick Stats Section -->
168
+ <section class="bg-white rounded-xl shadow-lg p-6 mb-8">
169
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">Hızlı İçgörüler</h2>
170
+
171
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
172
+ <div class="stat-card bg-gray-50 p-4 rounded-lg">
173
+ <div class="text-sm text-gray-500">Clickbait Skoru</div>
174
+ <div class="text-2xl font-bold">%32</div>
175
+ <div class="text-xs text-gray-500 mt-1">Orta Seviye</div>
176
+ </div>
177
+
178
+ <div class="stat-card bg-gray-50 p-4 rounded-lg">
179
+ <div class="text-sm text-gray-500">Başlık Uzunluğu</div>
180
+ <div class="text-2xl font-bold">64</div>
181
+ <div class="text-xs text-gray-500 mt-1">Karakter</div>
182
+ </div>
183
+
184
+ <div class="stat-card bg-gray-50 p-4 rounded-lg">
185
+ <div class="text-sm text-gray-500">SEO Skoru</div>
186
+ <div class="text-2xl font-bold">78/100</div>
187
+ <div class="text-xs text-gray-500 mt-1">İyi</div>
188
+ </div>
189
+
190
+ <div class="stat-card bg-gray-50 p-4 rounded-lg">
191
+ <div class="text-sm text-gray-500">Etkileşim Oranı</div>
192
+ <div class="text-2xl font-bold">%4.7</div>
193
+ <div class="text-xs text-gray-500 mt-1">Yüksek</div>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- Video Details & Live Analysis -->
199
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8 responsive-grid">
200
+ <!-- Video Details Panel -->
201
+ <div class="lg:col-span-2 bg-white rounded-xl shadow-lg p-6 main-panel">
202
+ <div class="flex justify-between items-center mb-6">
203
+ <h2 class="text-2xl font-bold text-gray-800">Video Detayları</h2>
204
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Public</span>
205
+ </div>
206
+
207
+ <div class="mb-4">
208
+ <h3 class="text-xl font-semibold mb-2">Teknoloji Dünyasında Son Gelişmeler | Yapay Zeka ve Gelecek</h3>
209
+ <div class="flex items-center text-gray-600 text-sm mb-3">
210
+ <span class="mr-4"><i class="fas fa-user mr-1"></i> Teknoloji Kanalı</span>
211
+ <span class="mr-4"><i class="fas fa-calendar mr-1"></i> 12.10.2023</span>
212
+ <span><i class="fas fa-clock mr-1"></i> 15:42</span>
213
+ </div>
214
+
215
+ <div class="flex flex-wrap gap-2 mb-4">
216
+ <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">#teknoloji</span>
217
+ <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">#yapayzeka</span>
218
+ <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">#teknolojihaber</span>
219
+ <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">#teknoloji</span>
220
+ </div>
221
+
222
+ <div class="bg-gray-50 p-4 rounded-lg max-h-40 overflow-y-auto">
223
+ <p class="text-sm">Bu videoda teknoloji dünyasındaki son gelişmeleri inceliyoruz. Yapay zekanın geleceği, yeni çıkan ürünler ve sektör haberleri hakkında detaylı bilgiler paylaşıyoruz. Abone olmayı ve bildirimleri açmayı unutmayın!</p>
224
+ </div>
225
+ </div>
226
+
227
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
228
+ <div class="bg-blue-50 p-3 rounded-lg text-center">
229
+ <div class="text-2xl font-bold text-blue-700">245K</div>
230
+ <div class="text-xs text-blue-600">İzlenme</div>
231
+ </div>
232
+
233
+ <div class="bg-green-50 p-3 rounded-lg text-center">
234
+ <div class="text-2xl font-bold text-green-700">8.7K</div>
235
+ <div class="text-xs text-green-600">Beğeni</div>
236
+ </div>
237
+
238
+ <div class="bg-purple-50 p-3 rounded-lg text-center">
239
+ <div class="text-2xl font-bold text-purple-700">1.2K</div>
240
+ <div class="text-xs text-purple-600">Yorum</div>
241
+ </div>
242
+
243
+ <div class="bg-yellow-50 p-3 rounded-lg text-center">
244
+ <div class="text-2xl font-bold text-yellow-700">94%</div>
245
+ <div class="text-xs text-yellow-600">Olumlu</div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Live Analysis Panel -->
251
+ <div class="bg-white rounded-xl shadow-lg p-6 side-panel">
252
+ <div class="flex items-center justify-between mb-6">
253
+ <h2 class="text-2xl font-bold text-gray-800">Canlı Analiz</h2>
254
+ <span class="live-badge bg-red-600 text-white text-xs px-2 py-1 rounded-full flex items-center">
255
+ <i class="fas fa-circle mr-1"></i> CANLI
256
+ </span>
257
+ </div>
258
+
259
+ <div class="mb-6">
260
+ <div class="flex justify-between items-center mb-2">
261
+ <span class="text-gray-600">İzleyici Sayısı</span>
262
+ <span class="font-bold">1,245</span>
263
+ </div>
264
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
265
+ <div class="bg-primary h-2.5 rounded-full" style="width: 65%"></div>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="mb-6">
270
+ <div class="flex justify-between items-center mb-2">
271
+ <span class="text-gray-600">Beğeni Sayısı</span>
272
+ <span class="font-bold">347</span>
273
+ </div>
274
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
275
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 45%"></div>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="mb-6">
280
+ <div class="flex justify-between items-center mb-2">
281
+ <span class="text-gray-600">Yorum Sayısı</span>
282
+ <span class="font-bold">128</span>
283
+ </div>
284
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
285
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 30%"></div>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="bg-gray-50 p-4 rounded-lg mt-4">
290
+ <h3 class="font-semibold mb-2">Anlık Katılım</h3>
291
+ <p class="text-sm text-gray-600">Video şu anda yayında. Veriler 30 saniyede bir güncelleniyor.</p>
292
+ <button class="mt-3 bg-primary hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm w-full">
293
+ Verileri Yenile
294
+ </button>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Comment Analysis Section -->
300
+ <section class="bg-white rounded-xl shadow-lg p-6 mb-8">
301
+ <div class="flex justify-between items-center mb-6">
302
+ <h2 class="text-2xl font-bold text-gray-800">Yorum Analizi</h2>
303
+
304
+ <div class="flex space-x-2">
305
+ <button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg text-sm">
306
+ <i class="fas fa-download mr-1"></i> CSV
307
+ </button>
308
+ <button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg text-sm">
309
+ <i class="fas fa-copy mr-1"></i> Kopyala
310
+ </button>
311
+ <button class="bg-primary hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm">
312
+ <i class="fas fa-sync mr-1"></i> Tümünü Çek
313
+ </button>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="mb-6 flex flex-col md:flex-row md:items-center space-y-2 md:space-y-0 md:space-x-4">
318
+ <input type="text" placeholder="Yorumlarda ara..."
319
+ class="flex-grow px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
320
+
321
+ <div class="flex items-center">
322
+ <input type="checkbox" id="regexMode" class="mr-2">
323
+ <label for="regexMode" class="text-sm">RegExp Modu</label>
324
+ </div>
325
+
326
+ <div class="flex items-center">
327
+ <input type="checkbox" id="caseSensitive" class="mr-2">
328
+ <label for="caseSensitive" class="text-sm">Büyük/Küçük Harf Duyarlı</label>
329
+ </div>
330
+ </div>
331
+
332
+ <div class="border rounded-lg overflow-hidden">
333
+ <div class="overflow-x-auto">
334
+ <table class="min-w-full divide-y divide-gray-200">
335
+ <thead class="bg-gray-50">
336
+ <tr>
337
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kullanıcı</th>
338
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Yorum</th>
339
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Beğeni</th>
340
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Zaman</th>
341
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duygu</th>
342
+ </tr>
343
+ </thead>
344
+ <tbody class="bg-white divide-y divide-gray-200">
345
+ <tr>
346
+ <td class="px-6 py-4 whitespace-nowrap">
347
+ <div class="flex items-center">
348
+ <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-800 font-bold mr-2">A</div>
349
+ <div>Ahmet Y.</div>
350
+ </div>
351
+ </td>
352
+ <td class="px-6 py-4">
353
+ <div class="text-sm">Harika bir video olmuş, elinize sağlık!</div>
354
+ </td>
355
+ <td class="px-6 py-4 whitespace-nowrap">
356
+ <div class="text-sm">24</div>
357
+ </td>
358
+ <td class="px-6 py-4 whitespace-nowrap">
359
+ <div class="text-sm">2 saat önce</div>
360
+ </td>
361
+ <td class="px-6 py-4 whitespace-nowrap">
362
+ <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">Pozitif</span>
363
+ </td>
364
+ </tr>
365
+ <tr>
366
+ <td class="px-6 py-4 whitespace-nowrap">
367
+ <div class="flex items-center">
368
+ <div class="h-8 w-8 rounded-full bg-red-100 flex items-center justify-center text-red-800 font-bold mr-2">M</div>
369
+ <div>Mehmet K.</div>
370
+ </div>
371
+ </td>
372
+ <td class="px-6 py-4">
373
+ <div class="text-sm">Bence bu konuda yanılıyorsunuz, şöyle ki...</div>
374
+ </td>
375
+ <td class="px-6 py-4 whitespace-nowrap">
376
+ <div class="text-sm">5</div>
377
+ </td>
378
+ <td class="px-6 py-4 whitespace-nowrap">
379
+ <div class="text-sm">3 saat önce</div>
380
+ </td>
381
+ <td class="px-6 py-4 whitespace-nowrap">
382
+ <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">Nötr</span>
383
+ </td>
384
+ </tr>
385
+ <tr>
386
+ <td class="px-6 py-4 whitespace-nowrap">
387
+ <div class="flex items-center">
388
+ <div class="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-800 font-bold mr-2">Z</div>
389
+ <div>Zeynep T.</div>
390
+ </div>
391
+ </td>
392
+ <td class="px-6 py-4">
393
+ <div class="text-sm">Çok faydalı bilgiler, teşekkürler 👍</div>
394
+ </td>
395
+ <td class="px-6 py-4 whitespace-nowrap">
396
+ <div class="text-sm">17</div>
397
+ </td>
398
+ <td class="px-6 py-4 whitespace-nowrap">
399
+ <div class="text-sm">4 saat önce</div>
400
+ </td>
401
+ <td class="px-6 py-4 whitespace-nowrap">
402
+ <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">Pozitif</span>
403
+ </td>
404
+ </tr>
405
+ </tbody>
406
+ </table>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="mt-4 flex justify-between items-center">
411
+ <div class="text-sm text-gray-600">Toplam 128 yorum gösteriliyor</div>
412
+ <div class="flex space-x-2">
413
+ <button class="px-3 py-1 border border-gray-300 rounded text-sm">Önceki</button>
414
+ <button class="px-3 py-1 bg-primary text-white rounded text-sm">Sonraki</button>
415
+ </div>
416
+ </div>
417
+ </section>
418
+
419
+ <!-- Word Cloud & Participant Analysis -->
420
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
421
+ <!-- Word Cloud -->
422
+ <div class="bg-white rounded-xl shadow-lg p-6">
423
+ <div class="flex justify-between items-center mb-6">
424
+ <h2 class="text-2xl font-bold text-gray-800">Kelime Bulutu</h2>
425
+ <div class="flex space-x-2">
426
+ <button class="px-3 py-1 bg-gray-100 rounded text-sm">1g</button>
427
+ <button class="px-3 py-1 bg-primary text-white rounded text-sm">2g</button>
428
+ <button class="px-3 py-1 bg-gray-100 rounded text-sm">3g</button>
429
+ </div>
430
+ </div>
431
+
432
+ <div class="word-cloud">
433
+ <span class="word text-xl font-bold">teknoloji</span>
434
+ <span class="word text-lg font-semibold">yapay zeka</span>
435
+ <span class="word text-base">gelişme</span>
436
+ <span class="word text-xl font-bold">gelecek</span>
437
+ <span class="word text-base">üniversite</span>
438
+ <span class="word text-lg font-semibold">teşekkürler</span>
439
+ <span class="word text-base">harika</span>
440
+ <span class="word text-lg font-semibold">android</span>
441
+ <span class="word text-base">ios</span>
442
+ <span class="word text-lg font-semibold">yazılım</span>
443
+ <span class="word text-base">donanım</span>
444
+ <span class="word text-base">öneri</span>
445
+ </div>
446
+
447
+ <div class="mt-6 flex items-center text-sm text-gray-600">
448
+ <i class="fas fa-info-circle mr-2"></i>
449
+ <span>Stopword temizliği ve Türkçe gövdeleme uygulanmıştır.</span>
450
+ </div>
451
+ </div>
452
+
453
+ <!-- Participant Analysis -->
454
+ <div class="bg-white rounded-xl shadow-lg p-6">
455
+ <div class="flex justify-between items-center mb-6">
456
+ <h2 class="text-2xl font-bold text-gray-800">Katılımcı Analizi</h2>
457
+ <button class="px-3 py-1 bg-gray-100 rounded text-sm flex items-center">
458
+ <i class="fas fa-download mr-1"></i> CSV
459
+ </button>
460
+ </div>
461
+
462
+ <div class="space-y-4">
463
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
464
+ <div class="flex items-center">
465
+ <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-800 font-bold mr-3">A</div>
466
+ <div>
467
+ <div class="font-semibold">Ahmet Yılmaz</div>
468
+ <div class="text-sm text-gray-600">12 yorum • Son: 2 saat önce</div>
469
+ </div>
470
+ </div>
471
+ <div class="text-right">
472
+ <div class="font-semibold">84 beğeni</div>
473
+ <div class="text-sm text-green-600">%92 pozitif</div>
474
+ </div>
475
+ </div>
476
+
477
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
478
+ <div class="flex items-center">
479
+ <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-800 font-bold mr-3">Z</div>
480
+ <div>
481
+ <div class="font-semibold">Zeynep Tekin</div>
482
+ <div class="text-sm text-gray-600">8 yorum • Son: 4 saat önce</div>
483
+ </div>
484
+ </div>
485
+ <div class="text-right">
486
+ <div class="font-semibold">56 beğeni</div>
487
+ <div class="text-sm text-green-600">%88 pozitif</div>
488
+ </div>
489
+ </div>
490
+
491
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
492
+ <div class="flex items-center">
493
+ <div class="h-10 w-10 rounded-full bg-red-100 flex items-center justify-center text-red-800 font-bold mr-3">M</div>
494
+ <div>
495
+ <div class="font-semibold">Mehmet Kaya</div>
496
+ <div class="text-sm text-gray-600">5 yorum • Son: 3 saat önce</div>
497
+ </div>
498
+ </div>
499
+ <div class="text-right">
500
+ <div class="font-semibold">12 beğeni</div>
501
+ <div class="text-sm text-yellow-600">%45 pozitif</div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+
508
+ <!-- User Profile Section -->
509
+ <section class="bg-white rounded-xl shadow-lg p-6 mb-8">
510
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">Kullanıcı Profili - Ahmet Yılmaz</h2>
511
+
512
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
513
+ <div class="md:col-span-2">
514
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
515
+ <h3 class="font-semibold mb-3">Profil Metrikleri</h3>
516
+
517
+ <div class="grid grid-cols-2 gap-4">
518
+ <div>
519
+ <div class="text-sm text-gray-600">Toplam Yorum</div>
520
+ <div class="text-xl font-bold">42</div>
521
+ </div>
522
+
523
+ <div>
524
+ <div class="text-sm text-gray-600">Ort. Beğeni</div>
525
+ <div class="text-xl font-bold">7.2</div>
526
+ </div>
527
+
528
+ <div>
529
+ <div class="text-sm text-gray-600">Ort. Yorum Uzunluğu</div>
530
+ <div class="text-xl font-bold">64</div>
531
+ </div>
532
+
533
+ <div>
534
+ <div class="text-sm text-gray-600">En Aktif Saat</div>
535
+ <div class="text-xl font-bold">19:00-21:00</div>
536
+ </div>
537
+ </div>
538
+ </div>
539
+
540
+ <div class="bg-gray-50 p-4 rounded-lg">
541
+ <h3 class="font-semibold mb-3">Sinyaller</h3>
542
+
543
+ <div class="grid grid-cols-2 gap-4">
544
+ <div>
545
+ <div class="text-sm text-gray-600">Toxicity Oranı</div>
546
+ <div class="text-xl font-bold">%4</div>
547
+ </div>
548
+
549
+ <div>
550
+ <div class="text-sm text-gray-600">Tekrarlılık</div>
551
+ <div class="text-xl font-bold">%12</div>
552
+ </div>
553
+
554
+ <div>
555
+ <div class="text-sm text-gray-600">URL Oranı</div>
556
+ <div class="text-xl font-bold">%2</div>
557
+ </div>
558
+
559
+ <div>
560
+ <div class="text-sm text-gray-600">Emoji Yoğunluğu</div>
561
+ <div class="text-xl font-bold">%18</div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </div>
566
+
567
+ <div>
568
+ <div class="bg-gray-50 p-4 rounded-lg h-full">
569
+ <h3 class="font-semibold mb-3">İletişim Analizi</h3>
570
+
571
+ <div class="space-y-3">
572
+ <div>
573
+ <div class="text-sm text-gray-600">İletişim Stili</div>
574
+ <div class="font-medium">Dostane & Destekleyici</div>
575
+ </div>
576
+
577
+ <div>
578
+ <div class="text-sm text-gray-600">Duygu Tonu</div>
579
+ <div class="font-medium">Pozitif & Yapıcı</div>
580
+ </div>
581
+
582
+ <div>
583
+ <div class="text-sm text-gray-600">İlgi Alanları</div>
584
+ <div class="font-medium">Teknoloji, Bilim, Eğitim</div>
585
+ </div>
586
+
587
+ <div>
588
+ <div class="text-sm text-gray-600">Etkileşim Paterni</div>
589
+ <div class="font-medium">Soru-Cevap & Tartışma</div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+
596
+ <div class="mt-6 bg-yellow-50 p-4 rounded-lg">
597
+ <div class="flex">
598
+ <i class="fas fa-exclamation-triangle text-yellow-600 mr-2 mt-1"></i>
599
+ <div>
600
+ <div class="font-semibold text-yellow-800">Uyarı</div>
601
+ <div class="text-sm text-yellow-700">Bu analiz tamamen otomatik ve tahminidir; kesin yargı içermez.</div>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </section>
606
+ </main>
607
+
608
+ <!-- Footer -->
609
+ <footer class="gradient-bg text-white p-6 mt-8">
610
+ <div class="container mx-auto">
611
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
612
+ <div>
613
+ <h3 class="text-lg font-semibold mb-4">Video Analytics Platform</h3>
614
+ <p class="text-gray-300 text-sm">YouTube ve X Spaces içerikleri için gelişmiş analiz ve içgörü araçları.</p>
615
+ </div>
616
+
617
+ <div>
618
+ <h3 class="text-lg font-semibold mb-4">Bağlantılar</h3>
619
+ <ul class="space-y-2 text-sm text-gray-300">
620
+ <li><a href="#" class="hover:text-white">Ana Sayfa</a></li>
621
+ <li><a href="#" class="hover:text-white">API Dokümantasyonu</a></li>
622
+ <li><a href="#" class="hover:text-white">Gizlilik Politikası</a></li>
623
+ <li><a href="#" class="hover:text-white">Kullanım Koşulları</a></li>
624
+ </ul>
625
+ </div>
626
+
627
+ <div>
628
+ <h3 class="text-lg font-semibold mb-4">İletişim</h3>
629
+ <p class="text-gray-300 text-sm">Sorularınız için bize ulaşın:</p>
630
+ <p class="text-gray-300 text-sm mt-2">info@videoanalytics.com</p>
631
+ <div class="flex space-x-4 mt-4">
632
+ <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-twitter"></i></a>
633
+ <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-github"></i></a>
634
+ <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-linkedin"></i></a>
635
+ </div>
636
+ </div>
637
+ </div>
638
+
639
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-400">
640
+ <p>© 2023 Video Analytics Platform. Tüm hakları saklıdır.</p>
641
+ </div>
642
+ </div>
643
+ </footer>
644
+
645
+ <script>
646
+ // Basic functionality for demo purposes
647
+ function saveApiKey() {
648
+ const apiKey = document.getElementById('apiKeyInput').value;
649
+ if (apiKey) {
650
+ localStorage.setItem('youtubeApiKey', apiKey);
651
+ alert('API anahtarı kaydedildi!');
652
+ } else {
653
+ alert('Lütfen geçerli bir API anahtarı girin.');
654
+ }
655
+ }
656
+
657
+ function analyzeVideo() {
658
+ const videoUrl = document.getElementById('videoUrl').value;
659
+ if (videoUrl) {
660
+ alert(`"${videoUrl}" analiz ediliyor... (Demo)`);
661
+ // In a real application, this would call the YouTube API
662
+ } else {
663
+ alert('Lütfen geçerli bir YouTube URL veya Video ID girin.');
664
+ }
665
+ }
666
+
667
+ // Load saved API key if exists
668
+ document.addEventListener('DOMContentLoaded', function() {
669
+ const savedApiKey = localStorage.getItem('youtubeApiKey');
670
+ if (savedApiKey) {
671
+ document.getElementById('apiKeyInput').value = savedApiKey;
672
+ }
673
+ });
674
+ </script>
675
+ <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=gozlukluon/youtbe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
676
+ </html>