Hugging Face's logo

Spaces:
jayare562
/
datasets
Running

App Files Community
jayare562 commited on
Commit
8b1db82
·
verified ·
1 Parent(s): 4d24504

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +929 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Datasets
3
- emoji: 😻
4
- colorFrom: yellow
5
- colorTo: blue
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: datasets
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
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,929 @@
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>ComicLab - Advanced Research Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ fontFamily: {
14
+ mono: ['IBM Plex Mono', 'monospace'],
15
+ },
16
+ colors: {
17
+ lab: {
18
+ dark: '#121212',
19
+ panel: '#1e1e1e',
20
+ border: '#333333',
21
+ accent: '#00ff88',
22
+ highlight: '#0088ff',
23
+ warning: '#ff6600',
24
+ danger: '#ff0033',
25
+ teal: '#00f5d4',
26
+ purple: '#9b5de5'
27
+ }
28
+ }
29
+ }
30
+ }
31
+ }
32
+ </script>
33
+ <style>
34
+ body {
35
+ background-color: #121212;
36
+ color: #e0e0e0;
37
+ font-family: 'IBM Plex Mono', monospace;
38
+ }
39
+ .data-panel {
40
+ border: 1px solid #333;
41
+ background-color: #1e1e1e;
42
+ }
43
+ .data-header {
44
+ border-bottom: 1px solid #333;
45
+ background-color: #1a1a1a;
46
+ }
47
+ .data-table {
48
+ font-size: 0.875rem;
49
+ }
50
+ .data-table th {
51
+ font-weight: 600;
52
+ text-transform: uppercase;
53
+ font-size: 0.75rem;
54
+ letter-spacing: 0.05em;
55
+ }
56
+ .data-table td, .data-table th {
57
+ padding: 0.5rem 1rem;
58
+ border-bottom: 1px solid #333333;
59
+ }
60
+ .data-value {
61
+ font-family: 'IBM Plex Mono', monospace;
62
+ font-weight: 600;
63
+ }
64
+ .positive-trend {
65
+ color: #00ff88;
66
+ }
67
+ .negative-trend {
68
+ color: #ff0033;
69
+ }
70
+ .neutral-trend {
71
+ color: #0088ff;
72
+ }
73
+ .status-indicator {
74
+ width: 10px;
75
+ height: 10px;
76
+ border-radius: 50%;
77
+ display: inline-block;
78
+ margin-right: 6px;
79
+ }
80
+ .trend-icon {
81
+ margin-right: 4px;
82
+ }
83
+ .section-divider {
84
+ border: none;
85
+ border-top: 1px solid #333;
86
+ margin: 1.5rem 0;
87
+ }
88
+ .metric-card {
89
+ background-color: #252525;
90
+ border-left: 4px solid;
91
+ padding: 0.75rem 1rem;
92
+ }
93
+ .metric-title {
94
+ font-size: 0.75rem;
95
+ text-transform: uppercase;
96
+ letter-spacing: 0.05em;
97
+ opacity: 0.7;
98
+ }
99
+ .metric-value {
100
+ font-size: 1.5rem;
101
+ line-height: 1;
102
+ margin: 0.25rem 0 0.5rem;
103
+ }
104
+ .chart-container {
105
+ position: relative;
106
+ height: 250px;
107
+ width: 100%;
108
+ }
109
+ .progress-bar {
110
+ height: 4px;
111
+ background-color: #333;
112
+ border-radius: 2px;
113
+ overflow: hidden;
114
+ }
115
+ .progress-value {
116
+ height: 100%;
117
+ }
118
+ .grid-point {
119
+ width: 8px;
120
+ height: 8px;
121
+ border-radius: 50%;
122
+ display: inline-block;
123
+ margin-right: 6px;
124
+ }
125
+ .kpi-badge {
126
+ font-size: 0.7rem;
127
+ padding: 2px 6px;
128
+ border-radius: 10px;
129
+ display: inline-flex;
130
+ align-items: center;
131
+ }
132
+ </style>
133
+ </head>
134
+ <body class="bg-lab-dark text-gray-300 font-mono">
135
+ <header class="border-b border-lab-border bg-lab-dark sticky top-0 z-10">
136
+ <div class="container mx-auto px-4 py-3">
137
+ <div class="flex items-center justify-between">
138
+ <div class="flex items-center space-x-2">
139
+ <span class="text-lab-accent font-bold text-xl">COMIC</span>
140
+ <span class="text-lab-highlight font-bold text-xl">RESEARCH</span>
141
+ <span class="text-xs px-2 py-1 bg-lab-panel rounded">v3.1.0</span>
142
+ </div>
143
+ <div class="text-xs text-gray-400">
144
+ <span class="mr-4">Last updated: <span class="text-gray-100">2023-11-16 09:42:18 UTC</span></span>
145
+ <span>Data source: <span class="text-gray-100">research_api/v3</span></span>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </header>
150
+
151
+ <main class="container mx-auto px-4 py-6">
152
+ <!-- Executive Analysis -->
153
+ <section class="mb-8">
154
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
155
+ <!-- Market Growth Chart -->
156
+ <div class="data-panel rounded-lg p-4">
157
+ <div class="flex justify-between items-center mb-3">
158
+ <h3 class="font-semibold">MARKET GROWTH PROJECTIONS</h3>
159
+ <span class="text-xs bg-lab-panel px-2 py-1 rounded">by genre</span>
160
+ </div>
161
+ <div class="chart-container">
162
+ <canvas id="marketGrowthChart"></canvas>
163
+ </div>
164
+ <div class="mt-3 text-xs grid grid-cols-4 gap-2">
165
+ <div class="flex items-center"><span class="grid-point bg-[#00ff88]"></span> Action</div>
166
+ <div class="flex items-center"><span class="grid-point bg-[#0088ff]"></span> Fantasy</div>
167
+ <div class="flex items-center"><span class="grid-point bg-[#9b5de5]"></span> Romance</div>
168
+ <div class="flex items-center"><span class="grid-point bg-[#ff6600]"></span> Horror</div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Demographic Breakdown -->
173
+ <div class="data-panel rounded-lg p-4">
174
+ <div class="flex justify-between items-center mb-3">
175
+ <h3 class="font-semibold">READER DEMOGRAPHICS</h3>
176
+ <span class="text-xs bg-lab-panel px-2 py-1 rounded">latest survey</span>
177
+ </div>
178
+ <div class="chart-container">
179
+ <canvas id="demographicChart"></canvas>
180
+ </div>
181
+ <div class="grid grid-cols-3 gap-2 mt-2 text-xs text-center">
182
+ <div>
183
+ <div class="font-bold">Gender</div>
184
+ <div>Male: 48%</div>
185
+ <div>Female: 49%</div>
186
+ <div>Other: 3%</div>
187
+ </div>
188
+ <div>
189
+ <div class="font-bold">Age Groups</div>
190
+ <div>13-17: 22%</div>
191
+ <div>18-24: 41%</div>
192
+ <div>25-34: 28%</div>
193
+ </div>
194
+ <div>
195
+ <div class="font-bold">Engagement</div>
196
+ <div>Daily: 34%</div>
197
+ <div>Weekly: 52%</div>
198
+ <div>Monthly: 14%</div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
205
+ <!-- Key Performance Indicators -->
206
+ <div class="data-panel rounded-lg p-3">
207
+ <div class="text-xs mb-2">MARKET SHARE GROWTH</div>
208
+ <div class="flex justify-between items-end mb-1">
209
+ <span class="text-xl data-value">17.2%</span>
210
+ <span class="text-xs positive-trend">+3.4% YoY</span>
211
+ </div>
212
+ <div class="progress-bar">
213
+ <div class="progress-value bg-lab-accent" style="width: 70%"></div>
214
+ </div>
215
+ <div class="text-xs mt-1 flex justify-between">
216
+ <span>2022: 13.8%</span>
217
+ <span>Forecast: 21%</span>
218
+ </div>
219
+ </div>
220
+
221
+ <div class="data-panel rounded-lg p-3">
222
+ <div class="text-xs mb-2">AVG. REVENUE/USER</div>
223
+ <div class="flex justify-between items-end mb-1">
224
+ <span class="text-xl data-value">$3.42</span>
225
+ <span class="text-xs positive-trend">+11.1% YoY</span>
226
+ </div>
227
+ <div class="progress-bar">
228
+ <div class="progress-value bg-lab-highlight" style="width: 65%"></div>
229
+ </div>
230
+ <div class="text-xs mt-1 flex justify-between">
231
+ <span>2022: $2.89</span>
232
+ <span>Forecast: $4.15</span>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="data-panel rounded-lg p-3">
237
+ <div class="text-xs mb-2">CONTENT RETENTION</div>
238
+ <div class="flex justify-between items-end mb-1">
239
+ <span class="text-xl data-value">87%</span>
240
+ <span class="text-xs positive-trend">+2.8% YoY</span>
241
+ </div>
242
+ <div class="progress-bar">
243
+ <div class="progress-value bg-lab-teal" style="width: 87%"></div>
244
+ </div>
245
+ <div class="text-xs mt-1 flex justify-between">
246
+ <span>2022: 84.2%</span>
247
+ <span>Forecast: 89%</span>
248
+ </div>
249
+ </div>
250
+
251
+ <div class="data-panel rounded-lg p-3">
252
+ <div class="text-xs mb-2">NEW READER ACQUISITION</div>
253
+ <div class="flex justify-between items-end mb-1">
254
+ <span class="text-xl data-value">28.4K</span>
255
+ <span class="text-xs negative-trend">-4.2% YoY</span>
256
+ </div>
257
+ <div class="progress-bar">
258
+ <div class="progress-value bg-lab-warning" style="width: 45%"></div>
259
+ </div>
260
+ <div class="text-xs mt-1 flex justify-between">
261
+ <span>2022: 29.7K</span>
262
+ <span>Forecast: 25K</span>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </section>
267
+
268
+ <hr class="section-divider">
269
+
270
+ <!-- Deep Demographic Analysis -->
271
+ <section class="mb-8">
272
+ <h2 class="text-xl font-semibold mb-4">DEMOGRAPHIC DEEP DIVE</h2>
273
+
274
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
275
+ <!-- Age Distribution by Genre -->
276
+ <div class="data-panel rounded-lg p-4">
277
+ <div class="mb-4">
278
+ <h3 class="font-semibold">AGE DISTRIBUTION BY GENRE</h3>
279
+ <div class="text-xs text-gray-400 mt-1">Average reader age with engagement</div>
280
+ </div>
281
+ <div class="chart-container">
282
+ <canvas id="ageGenreChart"></canvas>
283
+ </div>
284
+ <div class="text-xs mt-3 grid grid-cols-2 gap-1">
285
+ <div><span class="text-lab-highlight">Action:</span> Avg. age 21.4 | Peak 18-24</div>
286
+ <div><span class="text-lab-teal">Fantasy:</span> Avg. age 22.7 | Peak 18-24</div>
287
+ <div><span class="text-lab-purple">Romance:</span> Avg. age 24.2 | Peak 18-30</div>
288
+ <div><span class="text-lab-warning">Horror:</span> Avg. age 25.1 | Peak 22-30</div>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Gender Preferences -->
293
+ <div class="data-panel rounded-lg p-4">
294
+ <div class="mb-4">
295
+ <h3 class="font-semibold">GENDER PREFERENCES</h3>
296
+ <div class="text-xs text-gray-400 mt-1">Content consumption by gender</div>
297
+ </div>
298
+ <div class="chart-container">
299
+ <canvas id="genderPreferenceChart"></canvas>
300
+ </div>
301
+ <div class="text-xs mt-3">
302
+ <div>
303
+ <span class="text-lab-highlight">Male:</span> 72% Action, 14% Fantasy, 8% Sci-Fi, 6% Others
304
+ </div>
305
+ <div>
306
+ <span class="text-lab-purple">Female:</span> 58% Romance, 22% Fantasy, 12% Drama, 8% Others
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Geographic Heatmap Preview -->
312
+ <div class="data-panel rounded-lg p-4">
313
+ <div class="mb-4">
314
+ <h3 class="font-semibold">GEOGRAPHIC CONCENTRATION</h3>
315
+ <div class="text-xs text-gray-400 mt-1">Top regions by readership</div>
316
+ </div>
317
+ <table class="w-full text-xs">
318
+ <thead>
319
+ <tr>
320
+ <th class="text-left">Region</th>
321
+ <th class="text-right">Readers</th>
322
+ <th class="text-right">Growth</th>
323
+ </tr>
324
+ </thead>
325
+ <tbody>
326
+ <tr>
327
+ <td class="text-left">East Asia</td>
328
+ <td class="text-right data-value">421,892</td>
329
+ <td class="text-right positive-trend">+8.7%</td>
330
+ </tr>
331
+ <tr>
332
+ <td class="text-left">Southeast Asia</td>
333
+ <td class="text-right data-value">387,562</td>
334
+ <td class="text-right positive-trend">+12.4%</td>
335
+ </tr>
336
+ <tr>
337
+ <td class="text-left">North America</td>
338
+ <td class="text-right data-value">234,789</td>
339
+ <td class="text-right positive-trend">+5.3%</td>
340
+ </tr>
341
+ <tr>
342
+ <td class="text-left">Europe</td>
343
+ <td class="text-right data-value">187,654</td>
344
+ <td class="text-right neutral-trend">+1.8%</td>
345
+ </tr>
346
+ </tbody>
347
+ </table>
348
+ <div class="text-xs mt-2 text-amber-300">
349
+ Emerging markets: South America (+17.2%), Middle East (+9.8%)
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- Behavioral Segmentation -->
355
+ <div class="data-panel rounded-lg mb-6 p-4">
356
+ <div class="flex justify-between items-center mb-4">
357
+ <h3 class="font-semibold">READER BEHAVIOR SEGMENTATION</h3>
358
+ <div class="text-xs bg-lab-panel px-2 py-1 rounded">cluster analysis</div>
359
+ </div>
360
+
361
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
362
+ <div class="p-3 bg-[#003153] rounded">
363
+ <div class="text-xs mb-1 font-bold">Power Readers (18%)</div>
364
+ <div class="text-xs mb-1">Daily readers, high spend</div>
365
+ <div class="flex flex-wrap gap-1">
366
+ <span class="kpi-badge bg-blue-900">LTV: $128</span>
367
+ <span class="kpi-badge bg-green-900">Engage: 94%</span>
368
+ </div>
369
+ </div>
370
+ <div class="p-3 bg-[#1a1a2e] rounded">
371
+ <div class="text-xs mb-1 font-bold">Casual Enjoyers (42%)</div>
372
+ <div class="text-xs mb-1">2-3x weekly, medium spend</div>
373
+ <div class="flex flex-wrap gap-1">
374
+ <span class="kpi-badge bg-blue-900">LTV: $64</span>
375
+ <span class="kpi-badge bg-green-900">Engage: 82%</span>
376
+ </div>
377
+ </div>
378
+ <div class="p-3 bg-[#3a0a2e] rounded">
379
+ <div class="text-xs mb-1 font-bold">Series Followers (28%)</div>
380
+ <div class="text-xs mb-1">Weekly, only favorite titles</div>
381
+ <div class="flex flex-wrap gap-1">
382
+ <span class="kpi-badge bg-blue-900">LTV: $43</span>
383
+ <span class="kpi-badge bg-green-900">Engage: 78%</span>
384
+ </div>
385
+ </div>
386
+ <div class="p-3 bg-[#4a0100] rounded">
387
+ <div class="text-xs mb-1 font-bold">Drop-off Risks (12%)</div>
388
+ <div class="text-xs mb-1">Declining engagement</div>
389
+ <div class="flex flex-wrap gap-1">
390
+ <span class="kpi-badge bg-blue-900">LTV: $12</span>
391
+ <span class="kpi-badge bg-red-900">Engage: 34%</span>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </section>
397
+
398
+ <hr class="section-divider">
399
+
400
+ <!-- Predictive Analytics -->
401
+ <section class="mb-8">
402
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
403
+ <span class="status-indicator bg-lab-purple"></span>
404
+ <span>PREDICTIVE ANALYTICS</span>
405
+ </h2>
406
+
407
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
408
+ <!-- Content Trend Forecast -->
409
+ <div class="data-panel rounded-lg p-4">
410
+ <div class="mb-3">
411
+ <h3 class="font-semibold">CONTENT TREND PROJECTIONS</h3>
412
+ <div class="text-xs text-gray-400">6-month forecast based on current patterns</div>
413
+ </div>
414
+ <div class="chart-container">
415
+ <canvas id="trendForecastChart"></canvas>
416
+ </div>
417
+ <div class="text-xs mt-3 grid grid-cols-2 gap-1">
418
+ <div><span class="text-lab-accent">Rising:</span> Isekai (+14%), Slice-of-Life (+9%)</div>
419
+ <div><span class="text-lab-warning">Declining:</span> Traditional Fantasy (-7%), Vampire (-12%)</div>
420
+ </div>
421
+ </div>
422
+
423
+ <!-- Revenue Prediction -->
424
+ <div class="data-panel rounded-lg p-4">
425
+ <div class="mb-3">
426
+ <h3 class="font-semibold">REVENUE FORECAST MODEL</h3>
427
+ <div class="text-xs text-gray-400">Quarterly projections with confidence intervals</div>
428
+ </div>
429
+ <div class="chart-container">
430
+ <canvas id="revenueForecastChart"></canvas>
431
+ </div>
432
+ <div class="text-xs mt-3">
433
+ <div class="grid grid-cols-3 gap-2">
434
+ <div>
435
+ <div>Q1 2024</div>
436
+ <div class="data-value">$2.4M</div>
437
+ </div>
438
+ <div>
439
+ <div>Q2 2024</div>
440
+ <div class="data-value">$2.7M</div>
441
+ </div>
442
+ <div>
443
+ <div>Q3 2024</div>
444
+ <div class="data-value">$2.9M</div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <!-- Churn Prediction -->
452
+ <div class="data-panel rounded-lg p-4">
453
+ <div class="flex justify-between items-center mb-3">
454
+ <h3 class="font-semibold">CHURN RISK ANALYSIS</h3>
455
+ <span class="text-xs bg-lab-panel px-2 py-1 rounded">machine learning model</span>
456
+ </div>
457
+
458
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
459
+ <div class="p-3">
460
+ <div class="text-xs mb-1">Overall Churn Probability</div>
461
+ <div class="text-2xl data-value">3.8%</div>
462
+ <div class="text-xs"><span class="neutral-trend">→</span> Stable (no significant change)</div>
463
+ </div>
464
+ <div class="p-3">
465
+ <div class="text-xs mb-1">At-Risk Titles</div>
466
+ <div class="text-2xl data-value">87</div>
467
+ <div class="text-xs"><span class="positive-trend">↘</span> 12 less than last month</div>
468
+ </div>
469
+ <div class="p-3">
470
+ <div class="text-xs mb-1">High-Risk Segments</div>
471
+ <div class="text-2xl data-value">3</div>
472
+ <div class="text-xs">
473
+ <span class="negative-trend">Vampire (27%)</span>,
474
+ <span class="negative-trend">Western (19%)</span>
475
+ </div>
476
+ </div>
477
+ <div class="p-3">
478
+ <div class="text-xs mb-1">Intervention Success Rate</div>
479
+ <div class="text-2xl data-value positive-trend">68%</div>
480
+ <div class="text-xs">(+9% from Q2)</div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </section>
485
+
486
+ <hr class="section-divider">
487
+
488
+ <!-- Genre Performance Detail -->
489
+ <section class="mb-8">
490
+ <h2 class="text-xl font-semibold mb-4">GENRE PERFORMANCE MATRIX</h2>
491
+
492
+ <div class="overflow-x-auto">
493
+ <table class="w-full data-table">
494
+ <thead>
495
+ <tr>
496
+ <th class="text-left">Genre</th>
497
+ <th class="text-right">Market Share</th>
498
+ <th class="text-right">Reader Growth</th>
499
+ <th class="text-right">Revenue/Reader</th>
500
+ <th class="text-right">Age Skew</th>
501
+ <th class="text-right">Gender Ratio</th>
502
+ <th class="text-right">Series Length</th>
503
+ <th class="text-right">Health Index</th>
504
+ </tr>
505
+ </thead>
506
+ <tbody>
507
+ <tr>
508
+ <td class="text-left font-semibold">Action (Shounen)</td>
509
+ <td class="text-right data-value">34.2%</td>
510
+ <td class="text-right positive-trend">+8.7%</td>
511
+ <td class="text-right">$2.87</td>
512
+ <td class="text-right">21.4</td>
513
+ <td class="text-right">68/32</td>
514
+ <td class="text-right">72.4</td>
515
+ <td class="text-right positive-trend">89/100</td>
516
+ </tr>
517
+ <tr>
518
+ <td class="text-left font-semibold">Fantasy (Isekai)</td>
519
+ <td class="text-right data-value">27.8%</td>
520
+ <td class="text-right positive-trend">+14.2%</td>
521
+ <td class="text-right">$3.12</td>
522
+ <td class="text-right">22.1</td>
523
+ <td class="text-right">59/41</td>
524
+ <td class="text-right">45.7</td>
525
+ <td class="text-right positive-trend">92/100</td>
526
+ </tr>
527
+ <tr>
528
+ <td class="text-left font-semibold">Romance</td>
529
+ <td class="text-right data-value">15.3%</td>
530
+ <td class="text-right neutral-trend">+2.1%</td>
531
+ <td class="text-right">$4.21</td>
532
+ <td class="text-right">24.2</td>
533
+ <td class="text-right">22/78</td>
534
+ <td class="text-right">28.5</td>
535
+ <td class="text-right">75/100</td>
536
+ </tr>
537
+ <tr>
538
+ <td class="text-left font-semibold">Horror</td>
539
+ <td class="text-right data-value">7.8%</td>
540
+ <td class="text-right negative-trend">-3.4%</td>
541
+ <td class="text-right">$2.45</td>
542
+ <td class="text-right">25.1</td>
543
+ <td class="text-right">54/46</td>
544
+ <td class="text-right">34.2</td>
545
+ <td class="text-right negative-trend">61/100</td>
546
+ </tr>
547
+ <tr>
548
+ <td class="text-left font-semibold">Sports</td>
549
+ <td class="text-right data-value">6.2%</td>
550
+ <td class="text-right neutral-trend">+0.7%</td>
551
+ <td class="text-right">$1.98</td>
552
+ <td class="text-right">23.8</td>
553
+ <td class="text-right">82/18</td>
554
+ <td class="text-right">62.4</td>
555
+ <td class="text-right">68/100</td>
556
+ </tr>
557
+ </tbody>
558
+ </table>
559
+ </div>
560
+ </section>
561
+ </main>
562
+
563
+ <footer class="border-t border-lab-border py-4 mt-8 bg-lab-panel">
564
+ <div class="container mx-auto px-4">
565
+ <div class="flex flex-col md:flex-row justify-between items-center text-xs text-gray-400">
566
+ <div class="mb-2 md:mb-0">
567
+ <span class="mr-4">COMICLAB RESEARCH v3.1.0</span>
568
+ <span>ANALYTICS ENGINE v2.0.1</span>
569
+ </div>
570
+ <div>
571
+ <span class="mr-4">Last scan: 2023-11-16T09:42:18Z</span>
572
+ <span>Next model refresh: 2023-11-17T03:00:00Z</span>
573
+ </div>
574
+ </div>
575
+ <div class="mt-2 text-xxs text-gray-500 text-center">
576
+ Predictive models have 87-92% accuracy on historical data | Confidence intervals at 95%
577
+ </div>
578
+ </div>
579
+ </footer>
580
+
581
+ <script>
582
+ // Market Growth Chart
583
+ const marketGrowthCtx = document.getElementById('marketGrowthChart').getContext('2d');
584
+ const marketGrowthChart = new Chart(marketGrowthCtx, {
585
+ type: 'line',
586
+ data: {
587
+ labels: ['2021', '2022', '2023', '2024F', '2025F', '2026F'],
588
+ datasets: [
589
+ {
590
+ label: 'Action',
591
+ data: [120, 145, 180, 215, 250, 290],
592
+ borderColor: '#00ff88',
593
+ backgroundColor: 'rgba(0, 255, 136, 0.1)',
594
+ tension: 0.3,
595
+ borderWidth: 2
596
+ },
597
+ {
598
+ label: 'Fantasy',
599
+ data: [100, 130, 165, 200, 240, 280],
600
+ borderColor: '#0088ff',
601
+ backgroundColor: 'rgba(0, 136, 255, 0.1)',
602
+ tension: 0.3,
603
+ borderWidth: 2
604
+ },
605
+ {
606
+ label: 'Romance',
607
+ data: [80, 95, 110, 125, 140, 155],
608
+ borderColor: '#9b5de5',
609
+ backgroundColor: 'rgba(155, 93, 229, 0.1)',
610
+ tension: 0.3,
611
+ borderWidth: 2
612
+ },
613
+ {
614
+ label: 'Horror',
615
+ data: [65, 70, 72, 68, 65, 62],
616
+ borderColor: '#ff6600',
617
+ backgroundColor: 'rgba(255, 102, 0, 0.1)',
618
+ tension: 0.3,
619
+ borderWidth: 2
620
+ }
621
+ ]
622
+ },
623
+ options: {
624
+ responsive: true,
625
+ maintainAspectRatio: false,
626
+ plugins: {
627
+ legend: {
628
+ display: false
629
+ },
630
+ tooltip: {
631
+ mode: 'index',
632
+ intersect: false,
633
+ callbacks: {
634
+ label: function(context) {
635
+ return context.dataset.label + ': ' + context.raw + 'M';
636
+ }
637
+ }
638
+ }
639
+ },
640
+ scales: {
641
+ y: {
642
+ beginAtZero: true,
643
+ grid: {
644
+ color: 'rgba(51, 51, 51, 0.5)'
645
+ },
646
+ ticks: {
647
+ callback: function(value) {
648
+ return value + 'M';
649
+ }
650
+ }
651
+ },
652
+ x: {
653
+ grid: {
654
+ display: false
655
+ }
656
+ }
657
+ }
658
+ }
659
+ });
660
+
661
+ // Demographic Chart
662
+ const demographicCtx = document.getElementById('demographicChart').getContext('2d');
663
+ const demographicChart = new Chart(demographicCtx, {
664
+ type: 'doughnut',
665
+ data: {
666
+ labels: ['Age 13-17', 'Age 18-24', 'Age 25-34', 'Age 35+'],
667
+ datasets: [{
668
+ data: [22, 41, 28, 9],
669
+ backgroundColor: [
670
+ '#00f5d4',
671
+ '#0088ff',
672
+ '#9b5de5',
673
+ '#ff006e'
674
+ ],
675
+ borderWidth: 0
676
+ }]
677
+ },
678
+ options: {
679
+ responsive: true,
680
+ maintainAspectRatio: false,
681
+ cutout: '70%',
682
+ plugins: {
683
+ legend: {
684
+ display: false
685
+ }
686
+ }
687
+ }
688
+ });
689
+
690
+ // Age by Genre Chart
691
+ const ageGenreCtx = document.getElementById('ageGenreChart').getContext('2d');
692
+ const ageGenreChart = new Chart(ageGenreCtx, {
693
+ type: 'bar',
694
+ data: {
695
+ labels: ['13-17', '18-20', '21-24', '25-30', '31-40', '41+'],
696
+ datasets: [
697
+ {
698
+ label: 'Action',
699
+ data: [18, 25, 32, 15, 7, 3],
700
+ backgroundColor: 'rgba(0, 136, 255, 0.7)'
701
+ },
702
+ {
703
+ label: 'Fantasy',
704
+ data: [15, 22, 35, 18, 8, 2],
705
+ backgroundColor: 'rgba(0, 245, 212, 0.7)'
706
+ },
707
+ {
708
+ label: 'Romance',
709
+ data: [12, 18, 25, 30, 12, 3],
710
+ backgroundColor: 'rgba(155, 93, 229, 0.7)'
711
+ },
712
+ {
713
+ label: 'Horror',
714
+ data: [8, 15, 28, 35, 12, 2],
715
+ backgroundColor: 'rgba(255, 102, 0, 0.7)'
716
+ }
717
+ ]
718
+ },
719
+ options: {
720
+ responsive: true,
721
+ maintainAspectRatio: false,
722
+ plugins: {
723
+ legend: {
724
+ display: false
725
+ }
726
+ },
727
+ scales: {
728
+ x: {
729
+ stacked: false,
730
+ grid: {
731
+ display: false
732
+ }
733
+ },
734
+ y: {
735
+ stacked: false,
736
+ grid: {
737
+ color: 'rgba(51, 51, 51, 0.5)'
738
+ },
739
+ ticks: {
740
+ callback: function(value) {
741
+ return value + '%';
742
+ }
743
+ }
744
+ }
745
+ }
746
+ }
747
+ });
748
+
749
+ // Gender Preference Chart
750
+ const genderPreferenceCtx = document.getElementById('genderPreferenceChart').getContext('2d');
751
+ const genderPreferenceChart = new Chart(genderPreferenceCtx, {
752
+ type: 'radar',
753
+ data: {
754
+ labels: ['Action', 'Fantasy', 'Romance', 'Horror', 'Sci-Fi', 'Sports', 'Comedy', 'Drama'],
755
+ datasets: [
756
+ {
757
+ label: 'Male Readers',
758
+ data: [72, 14, 5, 8, 12, 15, 18, 6],
759
+ backgroundColor: 'rgba(0, 136, 255, 0.2)',
760
+ borderColor: '#0088ff',
761
+ borderWidth: 2
762
+ },
763
+ {
764
+ label: 'Female Readers',
765
+ data: [18, 22, 58, 12, 8, 3, 15, 12],
766
+ backgroundColor: 'rgba(155, 93, 229, 0.2)',
767
+ borderColor: '#9b5de5',
768
+ borderWidth: 2
769
+ }
770
+ ]
771
+ },
772
+ options: {
773
+ responsive: true,
774
+ maintainAspectRatio: false,
775
+ plugins: {
776
+ legend: {
777
+ display: false
778
+ }
779
+ },
780
+ scales: {
781
+ r: {
782
+ angleLines: {
783
+ color: 'rgba(51, 51, 51, 0.5)'
784
+ },
785
+ grid: {
786
+ color: 'rgba(51, 51, 51, 0.5)'
787
+ },
788
+ suggestedMin: 0,
789
+ suggestedMax: 80
790
+ }
791
+ }
792
+ }
793
+ });
794
+
795
+ // Trend Forecast Chart
796
+ const trendForecastCtx = document.getElementById('trendForecastChart').getContext('2d');
797
+ const trendForecastChart = new Chart(trendForecastCtx, {
798
+ type: 'line',
799
+ data: {
800
+ labels: ['Current', '+1M', '+2M', '+3M', '+4M', '+5M', '+6M'],
801
+ datasets: [
802
+ {
803
+ label: 'Isekai',
804
+ data: [100, 108, 116, 124, 131, 139, 147],
805
+ borderColor: '#00ff88',
806
+ backgroundColor: 'rgba(0, 255, 136, 0.1)',
807
+ tension: 0.4,
808
+ borderWidth: 2
809
+ },
810
+ {
811
+ label: 'Sports',
812
+ data: [100, 102, 103, 104, 103, 102, 101],
813
+ borderColor: '#0088ff',
814
+ backgroundColor: 'rgba(0, 136, 255, 0.1)',
815
+ tension: 0.4,
816
+ borderWidth: 2
817
+ },
818
+ {
819
+ label: 'Traditional Fantasy',
820
+ data: [100, 97, 94, 91, 87, 84, 81],
821
+ borderColor: '#ff6600',
822
+ backgroundColor: 'rgba(255, 102, 0, 0.1)',
823
+ tension: 0.4,
824
+ borderWidth: 2
825
+ },
826
+ {
827
+ label: 'Slice-of-Life',
828
+ data: [100, 103, 107, 110, 113, 117, 120],
829
+ borderColor: '#9b5de5',
830
+ backgroundColor: 'rgba(155, 93, 229, 0.1)',
831
+ tension: 0.4,
832
+ borderWidth: 2
833
+ }
834
+ ]
835
+ },
836
+ options: {
837
+ responsive: true,
838
+ maintainAspectRatio: false,
839
+ plugins: {
840
+ legend: {
841
+ display: false
842
+ },
843
+ tooltip: {
844
+ callbacks: {
845
+ label: function(context) {
846
+ return context.dataset.label + ': ' + (context.raw - 100) + '% change';
847
+ }
848
+ }
849
+ }
850
+ },
851
+ scales: {
852
+ y: {
853
+ beginAtZero: false,
854
+ min: 80,
855
+ grid: {
856
+ color: 'rgba(51, 51, 51, 0.5)'
857
+ },
858
+ ticks: {
859
+ callback: function(value) {
860
+ return (value - 100) + '%';
861
+ }
862
+ }
863
+ },
864
+ x: {
865
+ grid: {
866
+ display: false
867
+ }
868
+ }
869
+ }
870
+ }
871
+ });
872
+
873
+ // Revenue Forecast Chart
874
+ const revenueForecastCtx = document.getElementById('revenueForecastChart').getContext('2d');
875
+ const revenueForecastChart = new Chart(revenueForecastCtx, {
876
+ type: 'bar',
877
+ data: {
878
+ labels: ['Q4 2023', 'Q1 2024', 'Q2 2024', 'Q3 2024', 'Q4 2024'],
879
+ datasets: [{
880
+ label: 'Revenue',
881
+ data: [2200, 2400, 2700, 2900, 3200],
882
+ backgroundColor: [
883
+ 'rgba(0, 136, 255, 0.8)',
884
+ 'rgba(0, 136, 255, 0.8)',
885
+ 'rgba(0, 245, 212, 0.8)',
886
+ 'rgba(0, 245, 212, 0.8)',
887
+ 'rgba(0, 255, 136, 0.8)'
888
+ ],
889
+ borderWidth: 0
890
+ }]
891
+ },
892
+ options: {
893
+ responsive: true,
894
+ maintainAspectRatio: false,
895
+ plugins: {
896
+ legend: {
897
+ display: false
898
+ },
899
+ tooltip: {
900
+ callbacks: {
901
+ label: function(context) {
902
+ return '$' + context.raw + 'K';
903
+ }
904
+ }
905
+ }
906
+ },
907
+ scales: {
908
+ y: {
909
+ beginAtZero: true,
910
+ grid: {
911
+ color: 'rgba(51, 51, 51, 0.5)'
912
+ },
913
+ ticks: {
914
+ callback: function(value) {
915
+ return '$' + value + 'K';
916
+ }
917
+ }
918
+ },
919
+ x: {
920
+ grid: {
921
+ display: false
922
+ }
923
+ }
924
+ }
925
+ }
926
+ });
927
+ </script>
928
+ <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=jayare562/datasets" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
929
+ </html>
prompts.txt ADDED
File without changes