Hugging Face's logo

Spaces:
privateuserh
/
smstrm-anaylsis-vbeta1-01
Running

App Files Community
privateuserh commited on
Commit
0a5b96f
·
verified ·
1 Parent(s): 2caa450

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1305 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Smstrm Anaylsis Vbeta1 01
3
- emoji: 🚀
4
- colorFrom: red
5
- colorTo: yellow
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: smstrm-anaylsis-vbeta1-01
3
+ emoji: 🐳
4
+ colorFrom: green
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,1305 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>STREAMIQ - OTT & AI Analytics Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ fontFamily: {
15
+ sans: ['Inter', 'sans-serif'],
16
+ mono: ['IBM Plex Mono', 'monospace'],
17
+ },
18
+ colors: {
19
+ stream: {
20
+ dark: '#0f0f1a',
21
+ panel: '#1a1a2e',
22
+ border: '#2a2a4a',
23
+ accent: '#00d1ff',
24
+ highlight: '#7b2cbf',
25
+ warning: '#ff9e00',
26
+ danger: '#ff3d47',
27
+ teal: '#00f5d4',
28
+ purple: '#9b5de5',
29
+ ai: '#00ff9d'
30
+ }
31
+ }
32
+ }
33
+ }
34
+ }
35
+ </script>
36
+ <style>
37
+ body {
38
+ background-color: #0f0f1a;
39
+ color: #e0e0e0;
40
+ font-family: 'Inter', sans-serif;
41
+ }
42
+ .data-panel {
43
+ border: 1px solid #2a2a4a;
44
+ background-color: #1a1a2e;
45
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
46
+ }
47
+ .data-header {
48
+ border-bottom: 1px solid #2a2a4a;
49
+ background-color: #161627;
50
+ }
51
+ .data-table {
52
+ font-size: 0.875rem;
53
+ }
54
+ .data-table th {
55
+ font-weight: 600;
56
+ text-transform: uppercase;
57
+ font-size: 0.75rem;
58
+ letter-spacing: 0.05em;
59
+ }
60
+ .data-table td, .data-table th {
61
+ padding: 0.75rem 1rem;
62
+ border-bottom: 1px solid #2a2a4a;
63
+ }
64
+ .data-value {
65
+ font-family: 'IBM Plex Mono', monospace;
66
+ font-weight: 600;
67
+ }
68
+ .positive-trend {
69
+ color: #00ff9d;
70
+ }
71
+ .negative-trend {
72
+ color: #ff3d47;
73
+ }
74
+ .neutral-trend {
75
+ color: #00d1ff;
76
+ }
77
+ .status-indicator {
78
+ width: 10px;
79
+ height: 10px;
80
+ border-radius: 50%;
81
+ display: inline-block;
82
+ margin-right: 6px;
83
+ }
84
+ .trend-icon {
85
+ margin-right: 4px;
86
+ }
87
+ .section-divider {
88
+ border: none;
89
+ border-top: 1px solid #2a2a4a;
90
+ margin: 1.5rem 0;
91
+ }
92
+ .metric-card {
93
+ background-color: #252538;
94
+ border-left: 4px solid;
95
+ padding: 1rem;
96
+ transition: all 0.3s ease;
97
+ }
98
+ .metric-card:hover {
99
+ transform: translateY(-2px);
100
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
101
+ }
102
+ .metric-title {
103
+ font-size: 0.75rem;
104
+ text-transform: uppercase;
105
+ letter-spacing: 0.05em;
106
+ opacity: 0.7;
107
+ }
108
+ .metric-value {
109
+ font-size: 1.75rem;
110
+ line-height: 1;
111
+ margin: 0.5rem 0;
112
+ }
113
+ .chart-container {
114
+ position: relative;
115
+ height: 250px;
116
+ width: 100%;
117
+ }
118
+ .progress-bar {
119
+ height: 6px;
120
+ background-color: #2a2a4a;
121
+ border-radius: 3px;
122
+ overflow: hidden;
123
+ }
124
+ .progress-value {
125
+ height: 100%;
126
+ }
127
+ .grid-point {
128
+ width: 10px;
129
+ height: 10px;
130
+ border-radius: 50%;
131
+ display: inline-block;
132
+ margin-right: 6px;
133
+ }
134
+ .kpi-badge {
135
+ font-size: 0.7rem;
136
+ padding: 3px 8px;
137
+ border-radius: 12px;
138
+ display: inline-flex;
139
+ align-items: center;
140
+ }
141
+ .ai-agent-card {
142
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
143
+ border: 1px solid #2a2a4a;
144
+ }
145
+ .glow-effect {
146
+ box-shadow: 0 0 10px rgba(0, 209, 255, 0.3);
147
+ }
148
+ .nav-tab {
149
+ border-bottom: 3px solid transparent;
150
+ transition: all 0.3s ease;
151
+ }
152
+ .nav-tab.active {
153
+ border-bottom-color: #00d1ff;
154
+ color: #00d1ff;
155
+ }
156
+ .nav-tab:hover:not(.active) {
157
+ border-bottom-color: #7b2cbf;
158
+ }
159
+ </style>
160
+ </head>
161
+ <body class="bg-stream-dark text-gray-300">
162
+ <header class="border-b border-stream-border bg-stream-dark sticky top-0 z-20">
163
+ <div class="container mx-auto px-4 py-3">
164
+ <div class="flex items-center justify-between">
165
+ <div class="flex items-center space-x-3">
166
+ <div class="flex items-center">
167
+ <i class="fas fa-play-circle text-stream-accent text-2xl mr-2"></i>
168
+ <span class="text-xl font-bold bg-gradient-to-r from-stream-accent to-stream-highlight bg-clip-text text-transparent">STREAMIQ</span>
169
+ </div>
170
+ <span class="text-xs px-2 py-1 bg-stream-panel rounded-full flex items-center">
171
+ <i class="fas fa-brain text-stream-ai mr-1"></i>
172
+ AI ANALYTICS v4.2
173
+ </span>
174
+ </div>
175
+ <div class="flex items-center space-x-4">
176
+ <div class="hidden md:flex items-center space-x-4 text-sm">
177
+ <div class="flex items-center">
178
+ <span class="status-indicator bg-stream-accent"></span>
179
+ <span>Live Data</span>
180
+ </div>
181
+ <div class="text-xs bg-stream-panel px-3 py-1 rounded-full flex items-center">
182
+ <i class="fas fa-sync-alt mr-1 text-stream-accent"></i>
183
+ <span>Last updated: <span class="font-mono">2023-11-16 09:42:18 UTC</span></span>
184
+ </div>
185
+ </div>
186
+ <button class="bg-stream-highlight hover:bg-opacity-90 text-white px-3 py-1 rounded-full text-sm flex items-center">
187
+ <i class="fas fa-robot mr-1"></i>
188
+ AI Assist
189
+ </button>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="mt-4 flex space-x-6 overflow-x-auto pb-1 hide-scrollbar">
194
+ <div class="flex space-x-6">
195
+ <a href="#" class="nav-tab active text-sm font-medium pb-2 whitespace-nowrap">
196
+ <i class="fas fa-tv mr-1"></i> Streaming Dashboard
197
+ </a>
198
+ <a href="#" class="nav-tab text-sm font-medium pb-2 whitespace-nowrap">
199
+ <i class="fas fa-robot mr-1"></i> AI Agents
200
+ </a>
201
+ <a href="#" class="nav-tab text-sm font-medium pb-2 whitespace-nowrap">
202
+ <i class="fas fa-users mr-1"></i> Subscriber Insights
203
+ </a>
204
+ <a href="#" class="nav-tab text-sm font-medium pb-2 whitespace-nowrap">
205
+ <i class="fas fa-film mr-1"></i> Content Library
206
+ </a>
207
+ <a href="#" class="nav-tab text-sm font-medium pb-2 whitespace-nowrap">
208
+ <i class="fas fa-chart-line mr-1"></i> Performance
209
+ </a>
210
+ <a href="#" class="nav-tab text-sm font-medium pb-2 whitespace-nowrap">
211
+ <i class="fas fa-lightbulb mr-1"></i> Recommendations
212
+ </a>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </header>
217
+
218
+ <main class="container mx-auto px-4 py-6">
219
+ <!-- Executive Summary -->
220
+ <section class="mb-8">
221
+ <div class="flex justify-between items-center mb-6">
222
+ <h1 class="text-2xl font-bold flex items-center">
223
+ <span class="bg-gradient-to-r from-stream-accent to-stream-highlight bg-clip-text text-transparent">OTT Streaming Analytics</span>
224
+ <span class="ml-2 text-xs bg-stream-panel px-2 py-1 rounded-full">Real-time + Predictive</span>
225
+ </h1>
226
+ <div class="flex space-x-2">
227
+ <button class="text-xs bg-stream-panel hover:bg-stream-border px-3 py-1 rounded-full flex items-center">
228
+ <i class="fas fa-calendar-alt mr-1 text-stream-accent"></i>
229
+ Last 30 Days
230
+ </button>
231
+ <button class="text-xs bg-stream-panel hover:bg-stream-border px-3 py-1 rounded-full flex items-center">
232
+ <i class="fas fa-filter mr-1 text-stream-highlight"></i>
233
+ Filters
234
+ </button>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
239
+ <!-- Total Subscribers -->
240
+ <div class="metric-card rounded-lg border-l-stream-accent glow-effect">
241
+ <div class="flex justify-between items-start">
242
+ <div>
243
+ <div class="metric-title">TOTAL SUBSCRIBERS</div>
244
+ <div class="metric-value data-value">12.4M</div>
245
+ <div class="text-xs flex items-center">
246
+ <span class="positive-trend mr-1">+8.2% YoY</span>
247
+ <i class="fas fa-caret-up text-stream-ai"></i>
248
+ </div>
249
+ </div>
250
+ <i class="fas fa-users text-stream-accent opacity-30 text-2xl"></i>
251
+ </div>
252
+ <div class="progress-bar mt-2">
253
+ <div class="progress-value bg-stream-accent" style="width: 82%"></div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Avg. Watch Time -->
258
+ <div class="metric-card rounded-lg border-l-stream-highlight">
259
+ <div class="flex justify-between items-start">
260
+ <div>
261
+ <div class="metric-title">AVG. WATCH TIME</div>
262
+ <div class="metric-value data-value">3.2h</div>
263
+ <div class="text-xs flex items-center">
264
+ <span class="positive-trend mr-1">+12.7% YoY</span>
265
+ <i class="fas fa-caret-up text-stream-ai"></i>
266
+ </div>
267
+ </div>
268
+ <i class="fas fa-clock text-stream-highlight opacity-30 text-2xl"></i>
269
+ </div>
270
+ <div class="progress-bar mt-2">
271
+ <div class="progress-value bg-stream-highlight" style="width: 76%"></div>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Content Retention -->
276
+ <div class="metric-card rounded-lg border-l-stream-teal">
277
+ <div class="flex justify-between items-start">
278
+ <div>
279
+ <div class="metric-title">CONTENT RETENTION</div>
280
+ <div class="metric-value data-value">89%</div>
281
+ <div class="text-xs flex items-center">
282
+ <span class="positive-trend mr-1">+4.5% YoY</span>
283
+ <i class="fas fa-caret-up text-stream-ai"></i>
284
+ </div>
285
+ </div>
286
+ <i class="fas fa-percentage text-stream-teal opacity-30 text-2xl"></i>
287
+ </div>
288
+ <div class="progress-bar mt-2">
289
+ <div class="progress-value bg-stream-teal" style="width: 89%"></div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Churn Rate -->
294
+ <div class="metric-card rounded-lg border-l-stream-danger">
295
+ <div class="flex justify-between items-start">
296
+ <div>
297
+ <div class="metric-title">CHURN RATE</div>
298
+ <div class="metric-value data-value">2.8%</div>
299
+ <div class="text-xs flex items-center">
300
+ <span class="negative-trend mr-1">+0.3% MoM</span>
301
+ <i class="fas fa-caret-down text-stream-danger"></i>
302
+ </div>
303
+ </div>
304
+ <i class="fas fa-running text-stream-danger opacity-30 text-2xl"></i>
305
+ </div>
306
+ <div class="progress-bar mt-2">
307
+ <div class="progress-value bg-stream-danger" style="width: 28%"></div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
313
+ <!-- Streaming Growth -->
314
+ <div class="data-panel rounded-lg p-4 col-span-2">
315
+ <div class="flex justify-between items-center mb-3">
316
+ <h3 class="font-semibold text-lg flex items-center">
317
+ <i class="fas fa-chart-line text-stream-accent mr-2"></i>
318
+ STREAMING GROWTH TRENDS
319
+ </h3>
320
+ <div class="flex space-x-2">
321
+ <button class="text-xs bg-stream-panel hover:bg-stream-border px-2 py-1 rounded">
322
+ Subscribers
323
+ </button>
324
+ <button class="text-xs bg-stream-border px-2 py-1 rounded">
325
+ Watch Time
326
+ </button>
327
+ <button class="text-xs bg-stream-panel hover:bg-stream-border px-2 py-1 rounded">
328
+ Revenue
329
+ </button>
330
+ </div>
331
+ </div>
332
+ <div class="chart-container">
333
+ <canvas id="streamingGrowthChart"></canvas>
334
+ </div>
335
+ <div class="mt-3 text-xs grid grid-cols-4 gap-2">
336
+ <div class="flex items-center"><span class="grid-point bg-stream-accent"></span> Total Subs</div>
337
+ <div class="flex items-center"><span class="grid-point bg-stream-highlight"></span> Premium</div>
338
+ <div class="flex items-center"><span class="grid-point bg-stream-ai"></span> Ad-Supported</div>
339
+ <div class="flex items-center"><span class="grid-point bg-stream-teal"></span> Trials</div>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Top Content -->
344
+ <div class="data-panel rounded-lg p-4">
345
+ <div class="flex justify-between items-center mb-3">
346
+ <h3 class="font-semibold text-lg flex items-center">
347
+ <i class="fas fa-trophy text-stream-warning mr-2"></i>
348
+ TOP PERFORMING CONTENT
349
+ </h3>
350
+ <span class="text-xs bg-stream-panel px-2 py-1 rounded">by watch time</span>
351
+ </div>
352
+ <div class="space-y-3">
353
+ <div class="flex items-center justify-between p-2 hover:bg-stream-panel rounded cursor-pointer">
354
+ <div class="flex items-center">
355
+ <div class="w-8 h-8 bg-stream-highlight rounded flex items-center justify-center text-xs font-bold mr-2">1</div>
356
+ <div>
357
+ <div class="text-sm font-medium">The Last Kingdom</div>
358
+ <div class="text-xs text-gray-400">Action Drama</div>
359
+ </div>
360
+ </div>
361
+ <div class="text-right">
362
+ <div class="text-sm data-value">12.4M</div>
363
+ <div class="text-xs positive-trend">+24% WoW</div>
364
+ </div>
365
+ </div>
366
+ <div class="flex items-center justify-between p-2 hover:bg-stream-panel rounded cursor-pointer">
367
+ <div class="flex items-center">
368
+ <div class="w-8 h-8 bg-stream-border rounded flex items-center justify-center text-xs font-bold mr-2">2</div>
369
+ <div>
370
+ <div class="text-sm font-medium">AI Revolution</div>
371
+ <div class="text-xs text-gray-400">Documentary</div>
372
+ </div>
373
+ </div>
374
+ <div class="text-right">
375
+ <div class="text-sm data-value">9.7M</div>
376
+ <div class="text-xs positive-trend">+42% WoW</div>
377
+ </div>
378
+ </div>
379
+ <div class="flex items-center justify-between p-2 hover:bg-stream-panel rounded cursor-pointer">
380
+ <div class="flex items-center">
381
+ <div class="w-8 h-8 bg-stream-border rounded flex items-center justify-center text-xs font-bold mr-2">3</div>
382
+ <div>
383
+ <div class="text-sm font-medium">Cyberpunk 2077</div>
384
+ <div class="text-xs text-gray-400">Anime</div>
385
+ </div>
386
+ </div>
387
+ <div class="text-right">
388
+ <div class="text-sm data-value">8.2M</div>
389
+ <div class="text-xs negative-trend">-7% WoW</div>
390
+ </div>
391
+ </div>
392
+ <div class="flex items-center justify-between p-2 hover:bg-stream-panel rounded cursor-pointer">
393
+ <div class="flex items-center">
394
+ <div class="w-8 h-8 bg-transparent rounded flex items-center justify-center text-xs font-bold mr-2">4</div>
395
+ <div>
396
+ <div class="text-sm font-medium">Love in Seoul</div>
397
+ <div class="text-xs text-gray-400">Romance</div>
398
+ </div>
399
+ </div>
400
+ <div class="text-right">
401
+ <div class="text-sm data-value">7.5M</div>
402
+ <div class="text-xs positive-trend">+15% WoW</div>
403
+ </div>
404
+ </div>
405
+ <div class="flex items-center justify-between p-2 hover:bg-stream-panel rounded cursor-pointer">
406
+ <div class="flex items-center">
407
+ <div class="w-8 h-8 bg-transparent rounded flex items-center justify-center text-xs font-bold mr-2">5</div>
408
+ <div>
409
+ <div class="text-sm font-medium">Dark Matter</div>
410
+ <div class="text-xs text-gray-400">Sci-Fi</div>
411
+ </div>
412
+ </div>
413
+ <div class="text-right">
414
+ <div class="text-sm data-value">6.8M</div>
415
+ <div class="text-xs neutral-trend">+3% WoW</div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </section>
422
+
423
+ <hr class="section-divider">
424
+
425
+ <!-- AI Agent Analytics -->
426
+ <section class="mb-8">
427
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
428
+ <i class="fas fa-robot text-stream-ai mr-2"></i>
429
+ <span class="bg-gradient-to-r from-stream-ai to-stream-accent bg-clip-text text-transparent">AI AGENT PERFORMANCE</span>
430
+ </h2>
431
+
432
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
433
+ <!-- Personalization Accuracy -->
434
+ <div class="ai-agent-card rounded-lg p-4">
435
+ <div class="flex items-center justify-between mb-2">
436
+ <div class="text-sm font-medium">Personalization Accuracy</div>
437
+ <div class="text-xs bg-stream-panel px-2 py-1 rounded-full">AI Model v3.2</div>
438
+ </div>
439
+ <div class="flex items-end justify-between">
440
+ <div class="metric-value data-value">87.4%</div>
441
+ <div class="text-xs positive-trend flex items-center">
442
+ <i class="fas fa-caret-up mr-1"></i>
443
+ +2.8% from v3.1
444
+ </div>
445
+ </div>
446
+ <div class="progress-bar mt-2">
447
+ <div class="progress-value bg-stream-ai" style="width: 87%"></div>
448
+ </div>
449
+ <div class="text-xs mt-2 text-gray-400">
450
+ Measures how accurately AI predicts user preferences
451
+ </div>
452
+ </div>
453
+
454
+ <!-- Content Moderation -->
455
+ <div class="ai-agent-card rounded-lg p-4">
456
+ <div class="flex items-center justify-between mb-2">
457
+ <div class="text-sm font-medium">Content Moderation</div>
458
+ <div class="text-xs bg-stream-panel px-2 py-1 rounded-full">AI Model v2.9</div>
459
+ </div>
460
+ <div class="flex items-end justify-between">
461
+ <div class="metric-value data-value">92.1%</div>
462
+ <div class="text-xs positive-trend flex items-center">
463
+ <i class="fas fa-caret-up mr-1"></i>
464
+ +1.2% from v2.8
465
+ </div>
466
+ </div>
467
+ <div class="progress-bar mt-2">
468
+ <div class="progress-value bg-stream-teal" style="width: 92%"></div>
469
+ </div>
470
+ <div class="text-xs mt-2 text-gray-400">
471
+ Accuracy in detecting inappropriate content
472
+ </div>
473
+ </div>
474
+
475
+ <!-- Churn Prevention -->
476
+ <div class="ai-agent-card rounded-lg p-4">
477
+ <div class="flex items-center justify-between mb-2">
478
+ <div class="text-sm font-medium">Churn Prevention</div>
479
+ <div class="text-xs bg-stream-panel px-2 py-1 rounded-full">AI Model v4.1</div>
480
+ </div>
481
+ <div class="flex items-end justify-between">
482
+ <div class="metric-value data-value">78.3%</div>
483
+ <div class="text-xs negative-trend flex items-center">
484
+ <i class="fas fa-caret-down mr-1"></i>
485
+ -1.5% from v4.0
486
+ </div>
487
+ </div>
488
+ <div class="progress-bar mt-2">
489
+ <div class="progress-value bg-stream-highlight" style="width: 78%"></div>
490
+ </div>
491
+ <div class="text-xs mt-2 text-gray-400">
492
+ Success rate in retaining at-risk subscribers
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
498
+ <!-- AI Recommendation Impact -->
499
+ <div class="data-panel rounded-lg p-4">
500
+ <div class="flex justify-between items-center mb-3">
501
+ <h3 class="font-semibold text-lg flex items-center">
502
+ <i class="fas fa-lightbulb text-stream-warning mr-2"></i>
503
+ AI RECOMMENDATION IMPACT
504
+ </h3>
505
+ <span class="text-xs bg-stream-panel px-2 py-1 rounded">30-day period</span>
506
+ </div>
507
+ <div class="chart-container">
508
+ <canvas id="aiImpactChart"></canvas>
509
+ </div>
510
+ <div class="grid grid-cols-3 gap-2 mt-3 text-xs">
511
+ <div>
512
+ <div class="font-medium">Content Discovered</div>
513
+ <div class="data-value">3.2M</div>
514
+ </div>
515
+ <div>
516
+ <div class="font-medium">Watch Time</div>
517
+ <div class="data-value">+18.7%</div>
518
+ </div>
519
+ <div>
520
+ <div class="font-medium">Retention</div>
521
+ <div class="data-value positive-trend">+9.2%</div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+
526
+ <!-- AI Agent Distribution -->
527
+ <div class="data-panel rounded-lg p-4">
528
+ <div class="flex justify-between items-center mb-3">
529
+ <h3 class="font-semibold text-lg flex items-center">
530
+ <i class="fas fa-network-wired text-stream-purple mr-2"></i>
531
+ AI AGENT DISTRIBUTION
532
+ </h3>
533
+ <div class="text-xs bg-stream-panel px-2 py-1 rounded">by function</div>
534
+ </div>
535
+ <div class="chart-container">
536
+ <canvas id="aiDistributionChart"></canvas>
537
+ </div>
538
+ <div class="grid grid-cols-4 gap-1 mt-3 text-xs">
539
+ <div class="flex items-center"><span class="grid-point bg-stream-accent"></span> Personalization</div>
540
+ <div class="flex items-center"><span class="grid-point bg-stream-highlight"></span> Moderation</div>
541
+ <div class="flex items-center"><span class="grid-point bg-stream-ai"></span> Support</div>
542
+ <div class="flex items-center"><span class="grid-point bg-stream-teal"></span> Analytics</div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+
547
+ <!-- AI Agent Performance -->
548
+ <div class="data-panel rounded-lg mb-6 p-4">
549
+ <div class="flex justify-between items-center mb-4">
550
+ <h3 class="font-semibold text-lg flex items-center">
551
+ <i class="fas fa-tachometer-alt text-stream-accent mr-2"></i>
552
+ AI AGENT PERFORMANCE METRICS
553
+ </h3>
554
+ <div class="text-xs bg-stream-panel px-2 py-1 rounded">real-time monitoring</div>
555
+ </div>
556
+
557
+ <div class="overflow-x-auto">
558
+ <table class="w-full data-table">
559
+ <thead>
560
+ <tr>
561
+ <th class="text-left">Agent Name</th>
562
+ <th class="text-left">Function</th>
563
+ <th class="text-right">Accuracy</th>
564
+ <th class="text-right">Latency</th>
565
+ <th class="text-right">Uptime</th>
566
+ <th class="text-right">Impact</th>
567
+ <th class="text-right">Status</th>
568
+ </tr>
569
+ </thead>
570
+ <tbody>
571
+ <tr>
572
+ <td class="text-left font-medium">Rec-Engine-v3</td>
573
+ <td class="text-left">Personalization</td>
574
+ <td class="text-right data-value">87.4%</td>
575
+ <td class="text-right">142ms</td>
576
+ <td class="text-right data-value">99.98%</td>
577
+ <td class="text-right positive-trend">+12.7%</td>
578
+ <td class="text-right">
579
+ <span class="status-indicator bg-stream-ai"></span>
580
+ <span>Optimal</span>
581
+ </td>
582
+ </tr>
583
+ <tr>
584
+ <td class="text-left font-medium">Content-Mod-v2</td>
585
+ <td class="text-left">Moderation</td>
586
+ <td class="text-right data-value">92.1%</td>
587
+ <td class="text-right">87ms</td>
588
+ <td class="text-right data-value">99.99%</td>
589
+ <td class="text-right positive-trend">+8.3%</td>
590
+ <td class="text-right">
591
+ <span class="status-indicator bg-stream-ai"></span>
592
+ <span>Optimal</span>
593
+ </td>
594
+ </tr>
595
+ <tr>
596
+ <td class="text-left font-medium">Churn-Shield-v4</td>
597
+ <td class="text-left">Retention</td>
598
+ <td class="text-right data-value">78.3%</td>
599
+ <td class="text-right">210ms</td>
600
+ <td class="text-right data-value">99.95%</td>
601
+ <td class="text-right negative-trend">-1.5%</td>
602
+ <td class="text-right">
603
+ <span class="status-indicator bg-stream-warning"></span>
604
+ <span>Needs Tuning</span>
605
+ </td>
606
+ </tr>
607
+ <tr>
608
+ <td class="text-left font-medium">Support-Bot-v5</td>
609
+ <td class="text-left">Customer Service</td>
610
+ <td class="text-right data-value">81.7%</td>
611
+ <td class="text-right">320ms</td>
612
+ <td class="text-right data-value">99.93%</td>
613
+ <td class="text-right positive-trend">+5.2%</td>
614
+ <td class="text-right">
615
+ <span class="status-indicator bg-stream-ai"></span>
616
+ <span>Optimal</span>
617
+ </td>
618
+ </tr>
619
+ <tr>
620
+ <td class="text-left font-medium">Trend-Spotter-v1</td>
621
+ <td class="text-left">Content Analysis</td>
622
+ <td class="text-right data-value">72.8%</td>
623
+ <td class="text-right">450ms</td>
624
+ <td class="text-right data-value">99.91%</td>
625
+ <td class="text-right neutral-trend">+0.8%</td>
626
+ <td class="text-right">
627
+ <span class="status-indicator bg-stream-warning"></span>
628
+ <span>Needs Tuning</span>
629
+ </td>
630
+ </tr>
631
+ </tbody>
632
+ </table>
633
+ </div>
634
+ </div>
635
+ </section>
636
+
637
+ <hr class="section-divider">
638
+
639
+ <!-- Content & Subscriber Analytics -->
640
+ <section class="mb-8">
641
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
642
+ <i class="fas fa-film text-stream-highlight mr-2"></i>
643
+ CONTENT & SUBSCRIBER ANALYTICS
644
+ </h2>
645
+
646
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
647
+ <!-- Genre Performance -->
648
+ <div class="data-panel rounded-lg p-4">
649
+ <div class="flex justify-between items-center mb-3">
650
+ <h3 class="font-semibold">GENRE PERFORMANCE</h3>
651
+ <span class="text-xs bg-stream-panel px-2 py-1 rounded">by watch hours</span>
652
+ </div>
653
+ <div class="chart-container">
654
+ <canvas id="genrePerformanceChart"></canvas>
655
+ </div>
656
+ <div class="text-xs mt-3 grid grid-cols-2 gap-1">
657
+ <div><span class="text-stream-accent">Top Genre:</span> Action (32.4%)</div>
658
+ <div><span class="text-stream-highlight">Fastest Growing:</span> Sci-Fi (+18.2%)</div>
659
+ <div><span class="text-stream-warning">Declining:</span> Reality (-7.4%)</div>
660
+ <div><span class="text-stream-ai">Highest ARPU:</span> Documentary ($4.12)</div>
661
+ </div>
662
+ </div>
663
+
664
+ <!-- Device Distribution -->
665
+ <div class="data-panel rounded-lg p-4">
666
+ <div class="flex justify-between items-center mb-3">
667
+ <h3 class="font-semibold">DEVICE DISTRIBUTION</h3>
668
+ <span class="text-xs bg-stream-panel px-2 py-1 rounded">last 7 days</span>
669
+ </div>
670
+ <div class="chart-container">
671
+ <canvas id="deviceDistributionChart"></canvas>
672
+ </div>
673
+ <div class="grid grid-cols-2 gap-2 mt-3 text-xs">
674
+ <div>
675
+ <div class="font-medium">Mobile</div>
676
+ <div class="data-value">42.3%</div>
677
+ </div>
678
+ <div>
679
+ <div class="font-medium">TV</div>
680
+ <div class="data-value">34.7%</div>
681
+ </div>
682
+ <div>
683
+ <div class="font-medium">Desktop</div>
684
+ <div class="data-value">18.2%</div>
685
+ </div>
686
+ <div>
687
+ <div class="font-medium">Tablet</div>
688
+ <div class="data-value">4.8%</div>
689
+ </div>
690
+ </div>
691
+ </div>
692
+
693
+ <!-- Geographic Heatmap -->
694
+ <div class="data-panel rounded-lg p-4">
695
+ <div class="flex justify-between items-center mb-3">
696
+ <h3 class="font-semibold">GEOGRAPHIC CONCENTRATION</h3>
697
+ <span class="text-xs bg-stream-panel px-2 py-1 rounded">top regions</span>
698
+ </div>
699
+ <div class="h-48 bg-gradient-to-br from-stream-panel to-stream-dark rounded flex items-center justify-center mb-3">
700
+ <i class="fas fa-globe-americas text-4xl opacity-20"></i>
701
+ </div>
702
+ <table class="w-full text-xs">
703
+ <thead>
704
+ <tr>
705
+ <th class="text-left">Region</th>
706
+ <th class="text-right">Subscribers</th>
707
+ <th class="text-right">Growth</th>
708
+ </tr>
709
+ </thead>
710
+ <tbody>
711
+ <tr>
712
+ <td class="text-left">North America</td>
713
+ <td class="text-right data-value">4.2M</td>
714
+ <td class="text-right positive-trend">+8.7%</td>
715
+ </tr>
716
+ <tr>
717
+ <td class="text-left">Europe</td>
718
+ <td class="text-right data-value">3.8M</td>
719
+ <td class="text-right positive-trend">+12.4%</td>
720
+ </tr>
721
+ <tr>
722
+ <td class="text-left">Asia Pacific</td>
723
+ <td class="text-right data-value">2.9M</td>
724
+ <td class="text-right positive-trend">+15.2%</td>
725
+ </tr>
726
+ <tr>
727
+ <td class="text-left">Latin America</td>
728
+ <td class="text-right data-value">1.5M</td>
729
+ <td class="text-right neutral-trend">+1.8%</td>
730
+ </tr>
731
+ </tbody>
732
+ </table>
733
+ </div>
734
+ </div>
735
+
736
+ <!-- Subscriber Segmentation -->
737
+ <div class="data-panel rounded-lg mb-6 p-4">
738
+ <div class="flex justify-between items-center mb-4">
739
+ <h3 class="font-semibold text-lg">SUBSCRIBER SEGMENTATION</h3>
740
+ <div class="text-xs bg-stream-panel px-2 py-1 rounded">AI-powered clusters</div>
741
+ </div>
742
+
743
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
744
+ <div class="p-3 bg-gradient-to-br from-blue-900 to-stream-dark rounded-lg">
745
+ <div class="text-xs mb-1 font-bold">Power Streamers (18%)</div>
746
+ <div class="text-xs mb-1">Daily viewers, multiple devices</div>
747
+ <div class="flex flex-wrap gap-1 mt-2">
748
+ <span class="kpi-badge bg-blue-800">LTV: $248</span>
749
+ <span class="kpi-badge bg-green-900">Engage: 94%</span>
750
+ <span class="kpi-badge bg-purple-900">Watch: 22h/wk</span>
751
+ </div>
752
+ </div>
753
+ <div class="p-3 bg-gradient-to-br from-stream-panel to-stream-dark rounded-lg">
754
+ <div class="text-xs mb-1 font-bold">Weekend Bingers (32%)</div>
755
+ <div class="text-xs mb-1">Heavy weekend consumption</div>
756
+ <div class="flex flex-wrap gap-1 mt-2">
757
+ <span class="kpi-badge bg-blue-800">LTV: $124</span>
758
+ <span class="kpi-badge bg-green-900">Engage: 82%</span>
759
+ <span class="kpi-badge bg-purple-900">Watch: 12h/wk</span>
760
+ </div>
761
+ </div>
762
+ <div class="p-3 bg-gradient-to-br from-purple-900 to-stream-dark rounded-lg">
763
+ <div class="text-xs mb-1 font-bold">Genre Loyalists (28%)</div>
764
+ <div class="text-xs mb-1">Watch only specific genres</div>
765
+ <div class="flex flex-wrap gap-1 mt-2">
766
+ <span class="kpi-badge bg-blue-800">LTV: $87</span>
767
+ <span class="kpi-badge bg-green-900">Engage: 78%</span>
768
+ <span class="kpi-badge bg-purple-900">Watch: 8h/wk</span>
769
+ </div>
770
+ </div>
771
+ <div class="p-3 bg-gradient-to-br from-red-900 to-stream-dark rounded-lg">
772
+ <div class="text-xs mb-1 font-bold">At-Risk (22%)</div>
773
+ <div class="text-xs mb-1">Declining engagement</div>
774
+ <div class="flex flex-wrap gap-1 mt-2">
775
+ <span class="kpi-badge bg-blue-800">LTV: $32</span>
776
+ <span class="kpi-badge bg-red-900">Engage: 34%</span>
777
+ <span class="kpi-badge bg-purple-900">Watch: 3h/wk</span>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ </div>
782
+ </section>
783
+
784
+ <hr class="section-divider">
785
+
786
+ <!-- Predictive Analytics -->
787
+ <section>
788
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
789
+ <i class="fas fa-crystal-ball text-stream-purple mr-2"></i>
790
+ PREDICTIVE ANALYTICS
791
+ </h2>
792
+
793
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
794
+ <!-- Content Trend Forecast -->
795
+ <div class="data-panel rounded-lg p-4">
796
+ <div class="flex justify-between items-center mb-3">
797
+ <h3 class="font-semibold text-lg">CONTENT TREND PROJECTIONS</h3>
798
+ <div class="text-xs bg-stream-panel px-2 py-1 rounded">AI forecast model</div>
799
+ </div>
800
+ <div class="chart-container">
801
+ <canvas id="trendForecastChart"></canvas>
802
+ </div>
803
+ <div class="text-xs mt-3 grid grid-cols-2 gap-1">
804
+ <div><span class="text-stream-ai">Rising:</span> AI Documentaries (+24%), Cyberpunk (+18%)</div>
805
+ <div><span class="text-stream-warning">Declining:</span> Vampire (-12%), Cooking (-9%)</div>
806
+ </div>
807
+ </div>
808
+
809
+ <!-- Churn Prediction -->
810
+ <div class="data-panel rounded-lg p-4">
811
+ <div class="flex justify-between items-center mb-3">
812
+ <h3 class="font-semibold text-lg">CHURN RISK ANALYSIS</h3>
813
+ <div class="text-xs bg-stream-panel px-2 py-1 rounded">machine learning</div>
814
+ </div>
815
+ <div class="chart-container">
816
+ <canvas id="churnPredictionChart"></canvas>
817
+ </div>
818
+ <div class="grid grid-cols-3 gap-2 mt-3 text-xs">
819
+ <div>
820
+ <div class="font-medium">High Risk</div>
821
+ <div class="data-value">12.4%</div>
822
+ </div>
823
+ <div>
824
+ <div class="font-medium">Medium Risk</div>
825
+ <div class="data-value">24.7%</div>
826
+ </div>
827
+ <div>
828
+ <div class="font-medium">Low Risk</div>
829
+ <div class="data-value">62.9%</div>
830
+ </div>
831
+ </div>
832
+ </div>
833
+ </div>
834
+
835
+ <!-- Revenue Prediction -->
836
+ <div class="data-panel rounded-lg p-4">
837
+ <div class="flex justify-between items-center mb-3">
838
+ <h3 class="font-semibold text-lg">REVENUE FORECAST</h3>
839
+ <div class="flex items-center space-x-2">
840
+ <div class="text-xs bg-stream-panel px-2 py-1 rounded">Q4 2023 - Q4 2024</div>
841
+ <button class="text-xs bg-stream-panel hover:bg-stream-border px-2 py-1 rounded flex items-center">
842
+ <i class="fas fa-download mr-1"></i>
843
+ Export
844
+ </button>
845
+ </div>
846
+ </div>
847
+ <div class="chart-container">
848
+ <canvas id="revenueForecastChart"></canvas>
849
+ </div>
850
+ <div class="grid grid-cols-4 gap-2 mt-3 text-xs text-center">
851
+ <div>
852
+ <div>Q4 2023</div>
853
+ <div class="data-value">$142M</div>
854
+ </div>
855
+ <div>
856
+ <div>Q1 2024</div>
857
+ <div class="data-value">$158M</div>
858
+ </div>
859
+ <div>
860
+ <div>Q2 2024</div>
861
+ <div class="data-value">$172M</div>
862
+ </div>
863
+ <div>
864
+ <div>Q3 2024</div>
865
+ <div class="data-value">$187M</div>
866
+ </div>
867
+ </div>
868
+ </div>
869
+ </section>
870
+ </main>
871
+
872
+ <footer class="border-t border-stream-border py-4 mt-8 bg-stream-panel">
873
+ <div class="container mx-auto px-4">
874
+ <div class="flex flex-col md:flex-row justify-between items-center text-xs text-gray-400">
875
+ <div class="mb-2 md:mb-0">
876
+ <span class="mr-4">STREAMIQ ANALYTICS v4.2</span>
877
+ <span>AI ENGINE v3.1.2</span>
878
+ </div>
879
+ <div class="flex items-center space-x-4">
880
+ <span class="flex items-center">
881
+ <span class="status-indicator bg-stream-ai mr-1"></span>
882
+ <span>AI Models: 87% accuracy</span>
883
+ </span>
884
+ <span>Last scan: 2023-11-16T09:42:18Z</span>
885
+ <span>Next refresh: 2023-11-16T15:00:00Z</span>
886
+ </div>
887
+ </div>
888
+ <div class="mt-2 text-xxs text-gray-500 text-center">
889
+ Predictive models have 89-93% accuracy on historical data | Confidence intervals at 95% | Not financial advice
890
+ </div>
891
+ </div>
892
+ </footer>
893
+
894
+ <script>
895
+ // Streaming Growth Chart
896
+ const streamingGrowthCtx = document.getElementById('streamingGrowthChart').getContext('2d');
897
+ const streamingGrowthChart = new Chart(streamingGrowthCtx, {
898
+ type: 'line',
899
+ data: {
900
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
901
+ datasets: [
902
+ {
903
+ label: 'Total Subscribers',
904
+ data: [9.2, 9.5, 9.8, 10.1, 10.4, 10.8, 11.2, 11.5, 11.7, 12.1, 12.4],
905
+ borderColor: '#00d1ff',
906
+ backgroundColor: 'rgba(0, 209, 255, 0.1)',
907
+ tension: 0.3,
908
+ borderWidth: 2
909
+ },
910
+ {
911
+ label: 'Premium',
912
+ data: [6.1, 6.2, 6.4, 6.5, 6.7, 6.9, 7.1, 7.3, 7.4, 7.6, 7.8],
913
+ borderColor: '#7b2cbf',
914
+ backgroundColor: 'rgba(123, 44, 191, 0.1)',
915
+ tension: 0.3,
916
+ borderWidth: 2
917
+ },
918
+ {
919
+ label: 'Ad-Supported',
920
+ data: [2.8, 3.0, 3.1, 3.3, 3.4, 3.6, 3.8, 3.9, 4.0, 4.2, 4.3],
921
+ borderColor: '#00ff9d',
922
+ backgroundColor: 'rgba(0, 255, 157, 0.1)',
923
+ tension: 0.3,
924
+ borderWidth: 2
925
+ },
926
+ {
927
+ label: 'Trials',
928
+ data: [0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3],
929
+ borderColor: '#00f5d4',
930
+ backgroundColor: 'rgba(0, 245, 212, 0.1)',
931
+ tension: 0.3,
932
+ borderWidth: 2
933
+ }
934
+ ]
935
+ },
936
+ options: {
937
+ responsive: true,
938
+ maintainAspectRatio: false,
939
+ plugins: {
940
+ legend: {
941
+ display: false
942
+ },
943
+ tooltip: {
944
+ mode: 'index',
945
+ intersect: false,
946
+ callbacks: {
947
+ label: function(context) {
948
+ return context.dataset.label + ': ' + context.raw + 'M';
949
+ }
950
+ }
951
+ }
952
+ },
953
+ scales: {
954
+ y: {
955
+ beginAtZero: false,
956
+ min: 8,
957
+ grid: {
958
+ color: 'rgba(42, 42, 74, 0.5)'
959
+ },
960
+ ticks: {
961
+ callback: function(value) {
962
+ return value + 'M';
963
+ }
964
+ }
965
+ },
966
+ x: {
967
+ grid: {
968
+ display: false
969
+ }
970
+ }
971
+ }
972
+ }
973
+ });
974
+
975
+ // AI Impact Chart
976
+ const aiImpactCtx = document.getElementById('aiImpactChart').getContext('2d');
977
+ const aiImpactChart = new Chart(aiImpactCtx, {
978
+ type: 'bar',
979
+ data: {
980
+ labels: ['Content Discovered', 'Watch Time', 'Retention', 'Revenue'],
981
+ datasets: [
982
+ {
983
+ label: 'Without AI',
984
+ data: [2.1, 100, 100, 100],
985
+ backgroundColor: 'rgba(42, 42, 74, 0.8)',
986
+ borderRadius: 4
987
+ },
988
+ {
989
+ label: 'With AI',
990
+ data: [3.2, 118.7, 109.2, 112.4],
991
+ backgroundColor: 'rgba(0, 255, 157, 0.8)',
992
+ borderRadius: 4
993
+ }
994
+ ]
995
+ },
996
+ options: {
997
+ responsive: true,
998
+ maintainAspectRatio: false,
999
+ plugins: {
1000
+ legend: {
1001
+ display: false
1002
+ },
1003
+ tooltip: {
1004
+ callbacks: {
1005
+ label: function(context) {
1006
+ if (context.datasetIndex === 0) {
1007
+ return 'Baseline: ' + (context.raw === 100 ? '100%' : context.raw + 'M');
1008
+ } else {
1009
+ if (context.dataIndex === 0) return context.raw + 'M discoveries';
1010
+ return context.raw + '% of baseline';
1011
+ }
1012
+ }
1013
+ }
1014
+ }
1015
+ },
1016
+ scales: {
1017
+ x: {
1018
+ grid: {
1019
+ display: false
1020
+ }
1021
+ },
1022
+ y: {
1023
+ beginAtZero: true,
1024
+ grid: {
1025
+ color: 'rgba(42, 42, 74, 0.5)'
1026
+ },
1027
+ ticks: {
1028
+ callback: function(value) {
1029
+ return value === 100 ? 'Baseline' : value + (value > 10 ? '%' : '');
1030
+ }
1031
+ }
1032
+ }
1033
+ }
1034
+ }
1035
+ });
1036
+
1037
+ // AI Distribution Chart
1038
+ const aiDistributionCtx = document.getElementById('aiDistributionChart').getContext('2d');
1039
+ const aiDistributionChart = new Chart(aiDistributionCtx, {
1040
+ type: 'doughnut',
1041
+ data: {
1042
+ labels: ['Personalization', 'Content Moderation', 'Customer Support', 'Data Analytics'],
1043
+ datasets: [{
1044
+ data: [42, 28, 18, 12],
1045
+ backgroundColor: [
1046
+ '#00d1ff',
1047
+ '#7b2cbf',
1048
+ '#00ff9d',
1049
+ '#00f5d4'
1050
+ ],
1051
+ borderWidth: 0
1052
+ }]
1053
+ },
1054
+ options: {
1055
+ responsive: true,
1056
+ maintainAspectRatio: false,
1057
+ cutout: '70%',
1058
+ plugins: {
1059
+ legend: {
1060
+ display: false
1061
+ }
1062
+ }
1063
+ }
1064
+ });
1065
+
1066
+ // Genre Performance Chart
1067
+ const genrePerformanceCtx = document.getElementById('genrePerformanceChart').getContext('2d');
1068
+ const genrePerformanceChart = new Chart(genrePerformanceCtx, {
1069
+ type: 'bar',
1070
+ data: {
1071
+ labels: ['Action', 'Sci-Fi', 'Drama', 'Comedy', 'Documentary', 'Romance', 'Horror', 'Reality'],
1072
+ datasets: [{
1073
+ label: 'Watch Hours',
1074
+ data: [32.4, 18.7, 15.2, 12.8, 9.5, 8.3, 6.2, 4.9],
1075
+ backgroundColor: [
1076
+ 'rgba(0, 209, 255, 0.8)',
1077
+ 'rgba(123, 44, 191, 0.8)',
1078
+ 'rgba(0, 255, 157, 0.8)',
1079
+ 'rgba(0, 245, 212, 0.8)',
1080
+ 'rgba(255, 158, 0, 0.8)',
1081
+ 'rgba(155, 93, 229, 0.8)',
1082
+ 'rgba(255, 61, 71, 0.8)',
1083
+ 'rgba(42, 42, 74, 0.8)'
1084
+ ],
1085
+ borderRadius: 4
1086
+ }]
1087
+ },
1088
+ options: {
1089
+ responsive: true,
1090
+ maintainAspectRatio: false,
1091
+ plugins: {
1092
+ legend: {
1093
+ display: false
1094
+ }
1095
+ },
1096
+ scales: {
1097
+ y: {
1098
+ beginAtZero: true,
1099
+ grid: {
1100
+ color: 'rgba(42, 42, 74, 0.5)'
1101
+ },
1102
+ ticks: {
1103
+ callback: function(value) {
1104
+ return value + '%';
1105
+ }
1106
+ }
1107
+ },
1108
+ x: {
1109
+ grid: {
1110
+ display: false
1111
+ }
1112
+ }
1113
+ }
1114
+ }
1115
+ });
1116
+
1117
+ // Device Distribution Chart
1118
+ const deviceDistributionCtx = document.getElementById('deviceDistributionChart').getContext('2d');
1119
+ const deviceDistributionChart = new Chart(deviceDistributionCtx, {
1120
+ type: 'pie',
1121
+ data: {
1122
+ labels: ['Mobile', 'TV', 'Desktop', 'Tablet'],
1123
+ datasets: [{
1124
+ data: [42.3, 34.7, 18.2, 4.8],
1125
+ backgroundColor: [
1126
+ 'rgba(0, 209, 255, 0.8)',
1127
+ 'rgba(123, 44, 191, 0.8)',
1128
+ 'rgba(0, 255, 157, 0.8)',
1129
+ 'rgba(0, 245, 212, 0.8)'
1130
+ ],
1131
+ borderWidth: 0
1132
+ }]
1133
+ },
1134
+ options: {
1135
+ responsive: true,
1136
+ maintainAspectRatio: false,
1137
+ plugins: {
1138
+ legend: {
1139
+ display: false
1140
+ }
1141
+ }
1142
+ }
1143
+ });
1144
+
1145
+ // Trend Forecast Chart
1146
+ const trendForecastCtx = document.getElementById('trendForecastChart').getContext('2d');
1147
+ const trendForecastChart = new Chart(trendForecastCtx, {
1148
+ type: 'line',
1149
+ data: {
1150
+ labels: ['Current', '+1M', '+2M', '+3M', '+4M', '+5M', '+6M'],
1151
+ datasets: [
1152
+ {
1153
+ label: 'AI Documentaries',
1154
+ data: [100, 108, 116, 124, 131, 139, 147],
1155
+ borderColor: '#00ff9d',
1156
+ backgroundColor: 'rgba(0, 255, 157, 0.1)',
1157
+ tension: 0.4,
1158
+ borderWidth: 2
1159
+ },
1160
+ {
1161
+ label: 'Cyberpunk',
1162
+ data: [100, 106, 112, 117, 122, 126, 130],
1163
+ borderColor: '#7b2cbf',
1164
+ backgroundColor: 'rgba(123, 44, 191, 0.1)',
1165
+ tension: 0.4,
1166
+ borderWidth: 2
1167
+ },
1168
+ {
1169
+ label: 'Vampire',
1170
+ data: [100, 97, 94, 91, 87, 84, 81],
1171
+ borderColor: '#ff3d47',
1172
+ backgroundColor: 'rgba(255, 61, 71, 0.1)',
1173
+ tension: 0.4,
1174
+ borderWidth: 2
1175
+ },
1176
+ {
1177
+ label: 'Cooking',
1178
+ data: [100, 97, 94, 91, 88, 85, 82],
1179
+ borderColor: '#ff9e00',
1180
+ backgroundColor: 'rgba(255, 158, 0, 0.1)',
1181
+ tension: 0.4,
1182
+ borderWidth: 2
1183
+ }
1184
+ ]
1185
+ },
1186
+ options: {
1187
+ responsive: true,
1188
+ maintainAspectRatio: false,
1189
+ plugins: {
1190
+ legend: {
1191
+ display: false
1192
+ },
1193
+ tooltip: {
1194
+ callbacks: {
1195
+ label: function(context) {
1196
+ return context.dataset.label + ': ' + (context.raw - 100) + '% change';
1197
+ }
1198
+ }
1199
+ }
1200
+ },
1201
+ scales: {
1202
+ y: {
1203
+ beginAtZero: false,
1204
+ min: 80,
1205
+ grid: {
1206
+ color: 'rgba(42, 42, 74, 0.5)'
1207
+ },
1208
+ ticks: {
1209
+ callback: function(value) {
1210
+ return (value - 100) + '%';
1211
+ }
1212
+ }
1213
+ },
1214
+ x: {
1215
+ grid: {
1216
+ display: false
1217
+ }
1218
+ }
1219
+ }
1220
+ }
1221
+ });
1222
+
1223
+ // Churn Prediction Chart
1224
+ const churnPredictionCtx = document.getElementById('churnPredictionChart').getContext('2d');
1225
+ const churnPredictionChart = new Chart(churnPredictionCtx, {
1226
+ type: 'doughnut',
1227
+ data: {
1228
+ labels: ['High Risk', 'Medium Risk', 'Low Risk'],
1229
+ datasets: [{
1230
+ data: [12.4, 24.7, 62.9],
1231
+ backgroundColor: [
1232
+ '#ff3d47',
1233
+ '#ff9e00',
1234
+ '#00ff9d'
1235
+ ],
1236
+ borderWidth: 0
1237
+ }]
1238
+ },
1239
+ options: {
1240
+ responsive: true,
1241
+ maintainAspectRatio: false,
1242
+ cutout: '70%',
1243
+ plugins: {
1244
+ legend: {
1245
+ display: false
1246
+ }
1247
+ }
1248
+ }
1249
+ });
1250
+
1251
+ // Revenue Forecast Chart
1252
+ const revenueForecastCtx = document.getElementById('revenueForecastChart').getContext('2d');
1253
+ const revenueForecastChart = new Chart(revenueForecastCtx, {
1254
+ type: 'line',
1255
+ data: {
1256
+ labels: ['Q4 2023', 'Q1 2024', 'Q2 2024', 'Q3 2024', 'Q4 2024'],
1257
+ datasets: [{
1258
+ label: 'Revenue',
1259
+ data: [142, 158, 172, 187, 203],
1260
+ borderColor: '#00d1ff',
1261
+ backgroundColor: 'rgba(0, 209, 255, 0.1)',
1262
+ tension: 0.3,
1263
+ borderWidth: 2,
1264
+ fill: true
1265
+ }]
1266
+ },
1267
+ options: {
1268
+ responsive: true,
1269
+ maintainAspectRatio: false,
1270
+ plugins: {
1271
+ legend: {
1272
+ display: false
1273
+ },
1274
+ tooltip: {
1275
+ callbacks: {
1276
+ label: function(context) {
1277
+ return '$' + context.raw + 'M';
1278
+ }
1279
+ }
1280
+ }
1281
+ },
1282
+ scales: {
1283
+ y: {
1284
+ beginAtZero: false,
1285
+ min: 130,
1286
+ grid: {
1287
+ color: 'rgba(42, 42, 74, 0.5)'
1288
+ },
1289
+ ticks: {
1290
+ callback: function(value) {
1291
+ return '$' + value + 'M';
1292
+ }
1293
+ }
1294
+ },
1295
+ x: {
1296
+ grid: {
1297
+ display: false
1298
+ }
1299
+ }
1300
+ }
1301
+ }
1302
+ });
1303
+ </script>
1304
+ <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=nmtalhp/comic-datat" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p><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=privateuserh/smstrm-anaylsis-vbeta1-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1305
+ </html>