Hugging Face's logo

Spaces:
amphora
/
econai
Running

App Files Community
amphora commited on
Commit
0baaab6
·
verified ·
1 Parent(s): 37d2dc0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1322 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Econai
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: econai
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,1322 @@
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>EconAI - Scenario Generation Platform</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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ .sidebar-item.active {
12
+ background-color: #f0f9ff;
13
+ border-left: 4px solid #0ea5e9;
14
+ }
15
+ .sidebar-item.active .sidebar-icon {
16
+ color: #0ea5e9;
17
+ }
18
+ .sidebar-item:hover:not(.active) {
19
+ background-color: #f8fafc;
20
+ }
21
+ .chart-container {
22
+ height: 300px;
23
+ background-color: #f8fafc;
24
+ border-radius: 0.5rem;
25
+ position: relative;
26
+ }
27
+ .scenario-card:hover {
28
+ transform: translateY(-2px);
29
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
30
+ }
31
+ .fade-in {
32
+ animation: fadeIn 0.3s ease-in-out;
33
+ }
34
+ @keyframes fadeIn {
35
+ from { opacity: 0; }
36
+ to { opacity: 1; }
37
+ }
38
+ .progress-bar {
39
+ height: 6px;
40
+ border-radius: 3px;
41
+ background-color: #e0f2fe;
42
+ overflow: hidden;
43
+ }
44
+ .progress-bar-fill {
45
+ height: 100%;
46
+ background-color: #0ea5e9;
47
+ transition: width 0.3s ease;
48
+ }
49
+ .toggle-switch {
50
+ position: relative;
51
+ display: inline-block;
52
+ width: 50px;
53
+ height: 24px;
54
+ }
55
+ .toggle-switch input {
56
+ opacity: 0;
57
+ width: 0;
58
+ height: 0;
59
+ }
60
+ .toggle-slider {
61
+ position: absolute;
62
+ cursor: pointer;
63
+ top: 0;
64
+ left: 0;
65
+ right: 0;
66
+ bottom: 0;
67
+ background-color: #cbd5e1;
68
+ transition: .4s;
69
+ border-radius: 24px;
70
+ }
71
+ .toggle-slider:before {
72
+ position: absolute;
73
+ content: "";
74
+ height: 16px;
75
+ width: 16px;
76
+ left: 4px;
77
+ bottom: 4px;
78
+ background-color: white;
79
+ transition: .4s;
80
+ border-radius: 50%;
81
+ }
82
+ input:checked + .toggle-slider {
83
+ background-color: #0ea5e9;
84
+ }
85
+ input:checked + .toggle-slider:before {
86
+ transform: translateX(26px);
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="bg-gray-50 font-sans flex h-screen overflow-hidden">
91
+ <!-- Sidebar Navigation -->
92
+ <div class="w-64 bg-white border-r border-gray-200 flex flex-col">
93
+ <div class="p-4 border-b border-gray-200">
94
+ <div class="flex items-center space-x-2">
95
+ <i class="fas fa-chart-line text-2xl text-blue-500"></i>
96
+ <span class="text-xl font-bold text-gray-800">EconAI</span>
97
+ </div>
98
+ </div>
99
+ <nav class="flex-1 overflow-y-auto">
100
+ <div class="p-2">
101
+ <div class="sidebar-item active px-4 py-3 rounded-lg mb-1 cursor-pointer flex items-center">
102
+ <i class="sidebar-icon fas fa-cogs text-gray-500 mr-3"></i>
103
+ <span class="text-gray-700 font-medium">Generator</span>
104
+ </div>
105
+ <div class="sidebar-item px-4 py-3 rounded-lg mb-1 cursor-pointer flex items-center">
106
+ <i class="sidebar-icon fas fa-search text-gray-500 mr-3"></i>
107
+ <span class="text-gray-700 font-medium">Inspector</span>
108
+ </div>
109
+ <div class="sidebar-item px-4 py-3 rounded-lg mb-1 cursor-pointer flex items-center">
110
+ <i class="sidebar-icon fas fa-pen-fancy text-gray-500 mr-3"></i>
111
+ <span class="text-gray-700 font-medium">Composer</span>
112
+ </div>
113
+ <div class="sidebar-item px-4 py-3 rounded-lg mb-1 cursor-pointer flex items-center">
114
+ <i class="sidebar-icon fas fa-folder text-gray-500 mr-3"></i>
115
+ <span class="text-gray-700 font-medium">Scenario Library</span>
116
+ </div>
117
+ <div class="sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center">
118
+ <i class="sidebar-icon fas fa-cog text-gray-500 mr-3"></i>
119
+ <span class="text-gray-700 font-medium">Settings</span>
120
+ </div>
121
+ </div>
122
+ </nav>
123
+ <div class="p-4 border-t border-gray-200">
124
+ <div class="flex items-center">
125
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
126
+ <i class="fas fa-user text-blue-500"></i>
127
+ </div>
128
+ <div>
129
+ <div class="text-sm font-medium text-gray-700">John Doe</div>
130
+ <div class="text-xs text-gray-500">Analyst</div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Main Content -->
137
+ <div class="flex-1 flex flex-col overflow-hidden">
138
+ <!-- Top Bar -->
139
+ <div class="bg-white border-b border-gray-200 p-4 flex justify-between items-center">
140
+ <h1 class="text-2xl font-bold text-gray-800">Synthetic Scenario Generator</h1>
141
+ <div class="flex items-center space-x-4">
142
+ <div class="relative">
143
+ <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
144
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
145
+ </div>
146
+ <button class="bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition flex items-center">
147
+ <i class="fas fa-plus mr-2"></i> New Scenario
148
+ </button>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Main Panel Content -->
153
+ <div class="flex-1 overflow-y-auto p-6">
154
+ <!-- Generator Section -->
155
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
156
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
157
+ <!-- Generation Settings -->
158
+ <div class="md:col-span-2">
159
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Generation Parameters</h2>
160
+
161
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
162
+ <div>
163
+ <label class="block text-sm font-medium text-gray-700 mb-1">Generation Method</label>
164
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
165
+ <option>Brownian Motion</option>
166
+ <option>GARCH</option>
167
+ <option>Copula + Marginals</option>
168
+ <option>Custom (Upload Parameters)</option>
169
+ </select>
170
+ </div>
171
+ <div>
172
+ <label class="block text-sm font-medium text-gray-700 mb-1">Number of Scenarios</label>
173
+ <input type="number" value="100" min="1" max="1000" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
174
+ </div>
175
+ <div>
176
+ <label class="block text-sm font-medium text-gray-700 mb-1">Time Horizon</label>
177
+ <div class="flex space-x-2">
178
+ <input type="number" value="12" class="w-20 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
179
+ <select class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
180
+ <option>Months</option>
181
+ <option>Days</option>
182
+ <option>Years</option>
183
+ </select>
184
+ </div>
185
+ </div>
186
+ <div>
187
+ <label class="block text-sm font-medium text-gray-700 mb-1">Number of Assets</label>
188
+ <input type="number" value="5" min="1" max="20" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
189
+ </div>
190
+ </div>
191
+
192
+ <div class="flex items-center justify-between mb-6">
193
+ <div class="flex items-center">
194
+ <label class="block text-sm font-medium text-gray-700 mr-3">Advanced Settings</label>
195
+ <label class="toggle-switch">
196
+ <input type="checkbox">
197
+ <span class="toggle-slider"></span>
198
+ </label>
199
+ </div>
200
+ <button id="generateBtn" class="bg-blue-500 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-600 transition flex items-center">
201
+ <i class="fas fa-bolt mr-2"></i> Generate Scenarios
202
+ </button>
203
+ </div>
204
+
205
+ <!-- Advanced Settings (Hidden by default) -->
206
+ <div id="advancedSettings" class="hidden bg-gray-50 p-4 rounded-lg mb-6">
207
+ <h3 class="text-md font-medium text-gray-700 mb-3">Advanced Parameters</h3>
208
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
209
+ <div>
210
+ <label class="block text-sm font-medium text-gray-700 mb-1">Volatility</label>
211
+ <input type="range" min="0" max="1" step="0.01" value="0.2" class="w-full">
212
+ </div>
213
+ <div>
214
+ <label class="block text-sm font-medium text-gray-700 mb-1">Drift</label>
215
+ <input type="range" min="-0.1" max="0.1" step="0.01" value="0.02" class="w-full">
216
+ </div>
217
+ <div>
218
+ <label class="block text-sm font-medium text-gray-700 mb-1">Correlation Strength</label>
219
+ <input type="range" min="0" max="1" step="0.1" value="0.5" class="w-full">
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Generation Progress -->
225
+ <div id="generationProgress" class="hidden">
226
+ <div class="flex items-center justify-between mb-2">
227
+ <span class="text-sm font-medium text-gray-700">Generating scenarios...</span>
228
+ <span class="text-sm text-gray-500" id="progressPercent">0%</span>
229
+ </div>
230
+ <div class="progress-bar">
231
+ <div class="progress-bar-fill" id="progressFill" style="width: 0%"></div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Asset Selection -->
237
+ <div>
238
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Selected Assets</h2>
239
+ <div class="bg-gray-50 p-4 rounded-lg h-full">
240
+ <div class="space-y-3">
241
+ <div class="flex items-center justify-between p-2 bg-white rounded-lg border border-gray-200">
242
+ <div class="flex items-center">
243
+ <i class="fas fa-dollar-sign text-blue-500 mr-3"></i>
244
+ <span>USD/EUR</span>
245
+ </div>
246
+ <i class="fas fa-times text-gray-400 hover:text-red-500 cursor-pointer"></i>
247
+ </div>
248
+ <div class="flex items-center justify-between p-2 bg-white rounded-lg border border-gray-200">
249
+ <div class="flex items-center">
250
+ <i class="fas fa-chart-bar text-green-500 mr-3"></i>
251
+ <span>S&P 500</span>
252
+ </div>
253
+ <i class="fas fa-times text-gray-400 hover:text-red-500 cursor-pointer"></i>
254
+ </div>
255
+ <div class="flex items-center justify-between p-2 bg-white rounded-lg border border-gray-200">
256
+ <div class="flex items-center">
257
+ <i class="fas fa-oil-can text-yellow-500 mr-3"></i>
258
+ <span>Crude Oil</span>
259
+ </div>
260
+ <i class="fas fa-times text-gray-400 hover:text-red-500 cursor-pointer"></i>
261
+ </div>
262
+ <div class="flex items-center justify-between p-2 bg-white rounded-lg border border-gray-200">
263
+ <div class="flex items-center">
264
+ <i class="fas fa-home text-purple-500 mr-3"></i>
265
+ <span>Housing Index</span>
266
+ </div>
267
+ <i class="fas fa-times text-gray-400 hover:text-red-500 cursor-pointer"></i>
268
+ </div>
269
+ <div class="flex items-center justify-between p-2 bg-white rounded-lg border border-gray-200">
270
+ <div class="flex items-center">
271
+ <i class="fas fa-percentage text-red-500 mr-3"></i>
272
+ <span>Inflation Rate</span>
273
+ </div>
274
+ <i class="fas fa-times text-gray-400 hover:text-red-500 cursor-pointer"></i>
275
+ </div>
276
+ </div>
277
+ <button class="mt-4 text-blue-500 hover:text-blue-700 text-sm font-medium flex items-center">
278
+ <i class="fas fa-plus-circle mr-1"></i> Add Asset
279
+ </button>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Results Preview -->
286
+ <div id="resultsPreview" class="hidden fade-in">
287
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
288
+ <div class="flex justify-between items-center mb-6">
289
+ <h2 class="text-xl font-semibold text-gray-800">Generated Scenarios Preview</h2>
290
+ <div class="flex space-x-3">
291
+ <button class="border border-gray-300 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 flex items-center">
292
+ <i class="fas fa-download mr-1"></i> Export All
293
+ </button>
294
+ <button class="border border-gray-300 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 flex items-center">
295
+ <i class="fas fa-filter mr-1"></i> Filter
296
+ </button>
297
+ </div>
298
+ </div>
299
+
300
+ <div class="chart-container mb-6">
301
+ <canvas id="previewChart"></canvas>
302
+ </div>
303
+
304
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
305
+ <div class="scenario-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer">
306
+ <div class="flex justify-between items-start mb-3">
307
+ <h3 class="font-medium">Scenario #42</h3>
308
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Validated</span>
309
+ </div>
310
+ <div class="h-24 mb-2">
311
+ <canvas id="miniChart1"></canvas>
312
+ </div>
313
+ <div class="text-sm text-gray-600">
314
+ <div class="flex items-center mb-1">
315
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
316
+ <span>4.2/5</span>
317
+ </div>
318
+ <div class="text-xs text-gray-500 truncate">Moderate growth with stable inflation</div>
319
+ </div>
320
+ </div>
321
+ <div class="scenario-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer">
322
+ <div class="flex justify-between items-start mb-3">
323
+ <h3 class="font-medium">Scenario #17</h3>
324
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Validated</span>
325
+ </div>
326
+ <div class="h-24 mb-2">
327
+ <canvas id="miniChart2"></canvas>
328
+ </div>
329
+ <div class="text-sm text-gray-600">
330
+ <div class="flex items-center mb-1">
331
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
332
+ <span>3.8/5</span>
333
+ </div>
334
+ <div class="text-xs text-gray-500 truncate">Tech rally with rate hikes</div>
335
+ </div>
336
+ </div>
337
+ <div class="scenario-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer">
338
+ <div class="flex justify-between items-start mb-3">
339
+ <h3 class="font-medium">Scenario #89</h3>
340
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Review</span>
341
+ </div>
342
+ <div class="h-24 mb-2">
343
+ <canvas id="miniChart3"></canvas>
344
+ </div>
345
+ <div class="text-sm text-gray-600">
346
+ <div class="flex items-center mb-1">
347
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
348
+ <span>2.5/5</span>
349
+ </div>
350
+ <div class="text-xs text-gray-500 truncate">Extreme volatility in commodities</div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <!-- Inspector Section (Hidden by default) -->
358
+ <div id="inspectorSection" class="hidden bg-white rounded-xl shadow-md p-6 mb-6">
359
+ <div class="flex items-center mb-6">
360
+ <i class="fas fa-robot text-blue-500 text-2xl mr-3"></i>
361
+ <h2 class="text-xl font-semibold text-gray-800">LLM Inspector – Scenario Vetting</h2>
362
+ </div>
363
+
364
+ <div class="bg-blue-50 p-4 rounded-lg mb-6">
365
+ <p class="text-blue-800">
366
+ These scenarios are semantically evaluated and filtered for economic realism by our LLM Inspector.
367
+ The system identifies implausible correlations, unrealistic trajectories, and inconsistent narratives.
368
+ </p>
369
+ </div>
370
+
371
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
372
+ <div>
373
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Raw Scenarios (Pre-Vetting)</h3>
374
+ <div class="chart-container">
375
+ <canvas id="rawScenariosChart"></canvas>
376
+ </div>
377
+ </div>
378
+ <div>
379
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Filtered Scenarios (Post-Vetting)</h3>
380
+ <div class="chart-container">
381
+ <canvas id="filteredScenariosChart"></canvas>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Scenario Evaluation</h3>
387
+ <div class="overflow-x-auto">
388
+ <table class="min-w-full bg-white rounded-lg overflow-hidden">
389
+ <thead class="bg-gray-50">
390
+ <tr>
391
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scenario ID</th>
392
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Summary</th>
393
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Inspector Score</th>
394
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tags</th>
395
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
396
+ </tr>
397
+ </thead>
398
+ <tbody class="divide-y divide-gray-200">
399
+ <tr>
400
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SC-2023-42</td>
401
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Soft landing with tech outperformance</td>
402
+ <td class="px-6 py-4 whitespace-nowrap">
403
+ <div class="flex">
404
+ <i class="fas fa-star text-yellow-400"></i>
405
+ <i class="fas fa-star text-yellow-400"></i>
406
+ <i class="fas fa-star text-yellow-400"></i>
407
+ <i class="fas fa-star text-yellow-400"></i>
408
+ <i class="fas fa-star text-yellow-400"></i>
409
+ </div>
410
+ </td>
411
+ <td class="px-6 py-4 whitespace-nowrap">
412
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full mr-1">plausible</span>
413
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">tech</span>
414
+ </td>
415
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
416
+ <button class="text-blue-500 hover:text-blue-700 mr-3">
417
+ <i class="fas fa-eye"></i>
418
+ </button>
419
+ <button class="text-blue-500 hover:text-blue-700">
420
+ <i class="fas fa-download"></i>
421
+ </button>
422
+ </td>
423
+ </tr>
424
+ <tr>
425
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SC-2023-17</td>
426
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Inflation shock with Fed overreaction</td>
427
+ <td class="px-6 py-4 whitespace-nowrap">
428
+ <div class="flex">
429
+ <i class="fas fa-star text-yellow-400"></i>
430
+ <i class="fas fa-star text-yellow-400"></i>
431
+ <i class="fas fa-star text-yellow-400"></i>
432
+ <i class="fas fa-star text-yellow-400"></i>
433
+ <i class="fas fa-star text-gray-300"></i>
434
+ </div>
435
+ </td>
436
+ <td class="px-6 py-4 whitespace-nowrap">
437
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full mr-1">plausible</span>
438
+ <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">inflation</span>
439
+ </td>
440
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
441
+ <button class="text-blue-500 hover:text-blue-700 mr-3">
442
+ <i class="fas fa-eye"></i>
443
+ </button>
444
+ <button class="text-blue-500 hover:text-blue-700">
445
+ <i class="fas fa-download"></i>
446
+ </button>
447
+ </td>
448
+ </tr>
449
+ <tr>
450
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SC-2023-89</td>
451
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Commodity boom with dollar collapse</td>
452
+ <td class="px-6 py-4 whitespace-nowrap">
453
+ <div class="flex">
454
+ <i class="fas fa-star text-yellow-400"></i>
455
+ <i class="fas fa-star text-yellow-400"></i>
456
+ <i class="fas fa-star text-gray-300"></i>
457
+ <i class="fas fa-star text-gray-300"></i>
458
+ <i class="fas fa-star text-gray-300"></i>
459
+ </div>
460
+ </td>
461
+ <td class="px-6 py-4 whitespace-nowrap">
462
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full mr-1">questionable</span>
463
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">commodities</span>
464
+ </td>
465
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
466
+ <button class="text-blue-500 hover:text-blue-700 mr-3">
467
+ <i class="fas fa-eye"></i>
468
+ </button>
469
+ <button class="text-blue-500 hover:text-blue-700">
470
+ <i class="fas fa-download"></i>
471
+ </button>
472
+ </td>
473
+ </tr>
474
+ </tbody>
475
+ </table>
476
+ </div>
477
+ </div>
478
+
479
+ <!-- Composer Section (Hidden by default) -->
480
+ <div id="composerSection" class="hidden bg-white rounded-xl shadow-md p-6 mb-6">
481
+ <div class="flex items-center mb-6">
482
+ <i class="fas fa-pen-fancy text-blue-500 text-2xl mr-3"></i>
483
+ <h2 class="text-xl font-semibold text-gray-800">Text-to-Scenario Composer</h2>
484
+ </div>
485
+
486
+ <div class="bg-blue-50 p-6 rounded-lg mb-6 text-center">
487
+ <textarea class="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="3" placeholder="Describe your desired scenario...&#10;Example: 'Tech stocks rally 20% while interest rates stay low, under a soft-landing macro environment.'"></textarea>
488
+
489
+ <div class="flex flex-wrap justify-center mt-4 space-x-4">
490
+ <div class="mb-3">
491
+ <label class="block text-sm font-medium text-gray-700 mb-1">Severity Level</label>
492
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
493
+ <option>Mild</option>
494
+ <option selected>Moderate</option>
495
+ <option>Extreme</option>
496
+ </select>
497
+ </div>
498
+ <div class="mb-3">
499
+ <label class="block text-sm font-medium text-gray-700 mb-1">Time Horizon</label>
500
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
501
+ <option>Short-term (1-3 months)</option>
502
+ <option selected>Medium-term (6-12 months)</option>
503
+ <option>Long-term (1-3 years)</option>
504
+ </select>
505
+ </div>
506
+ <div class="mb-3">
507
+ <label class="block text-sm font-medium text-gray-700 mb-1">Asset Focus</label>
508
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
509
+ <option>All Assets</option>
510
+ <option selected>Equities</option>
511
+ <option>Fixed Income</option>
512
+ <option>Commodities</option>
513
+ <option>Currencies</option>
514
+ </select>
515
+ </div>
516
+ </div>
517
+
518
+ <button class="bg-blue-500 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-600 transition mt-4">
519
+ <i class="fas fa-magic mr-2"></i> Generate Matching Scenarios
520
+ </button>
521
+ </div>
522
+
523
+ <h3 class="text-lg font-medium text-gray-700 mb-4">Matching Scenarios</h3>
524
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
525
+ <div class="scenario-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer">
526
+ <div class="h-32 mb-3">
527
+ <canvas id="composerChart1"></canvas>
528
+ </div>
529
+ <div class="text-sm text-gray-600 mb-2">
530
+ "Tech sector outperforms while broader market stagnates under moderate rate environment."
531
+ </div>
532
+ <div class="flex justify-between items-center">
533
+ <div class="flex items-center">
534
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
535
+ <span class="text-xs">87% match</span>
536
+ </div>
537
+ <div>
538
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">tech</span>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ <div class="scenario-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer">
543
+ <div class="h-32 mb-3">
544
+ <canvas id="composerChart2"></canvas>
545
+ </div>
546
+ <div class="text-sm text-gray-600 mb-2">
547
+ "Growth stocks rally as Fed pauses hikes, while value lags due to yield curve flattening."
548
+ </div>
549
+ <div class="flex justify-between items-center">
550
+ <div class="flex items-center">
551
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
552
+ <span class="text-xs">79% match</span>
553
+ </div>
554
+ <div>
555
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">growth</span>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ <div class="scenario-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer">
560
+ <div class="h-32 mb-3">
561
+ <canvas id="composerChart3"></canvas>
562
+ </div>
563
+ <div class="text-sm text-gray-600 mb-2">
564
+ "Sector rotation into tech as earnings surprise to upside despite macro headwinds."
565
+ </div>
566
+ <div class="flex justify-between items-center">
567
+ <div class="flex items-center">
568
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
569
+ <span class="text-xs">72% match</span>
570
+ </div>
571
+ <div>
572
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">earnings</span>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+
579
+ <!-- Scenario Library Section (Hidden by default) -->
580
+ <div id="librarySection" class="hidden bg-white rounded-xl shadow-md p-6">
581
+ <div class="flex items-center mb-6">
582
+ <i class="fas fa-folder text-blue-500 text-2xl mr-3"></i>
583
+ <h2 class="text-xl font-semibold text-gray-800">Scenario Library</h2>
584
+ </div>
585
+
586
+ <div class="flex flex-wrap justify-between mb-6">
587
+ <div class="flex flex-wrap space-x-3 mb-3">
588
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
589
+ <option>All Tags</option>
590
+ <option>Plausible</option>
591
+ <option>Inflation</option>
592
+ <option>Tech</option>
593
+ <option>Recession</option>
594
+ </select>
595
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
596
+ <option>All Risk Levels</option>
597
+ <option>Low</option>
598
+ <option>Medium</option>
599
+ <option>High</option>
600
+ </select>
601
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
602
+ <option>All Methods</option>
603
+ <option>Brownian Motion</option>
604
+ <option>GARCH</option>
605
+ <option>Copula</option>
606
+ <option>Custom</option>
607
+ </select>
608
+ </div>
609
+ <div class="relative mb-3">
610
+ <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
611
+ <input type="text" placeholder="Search scenarios..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
612
+ </div>
613
+ </div>
614
+
615
+ <div class="overflow-x-auto">
616
+ <table class="min-w-full bg-white rounded-lg overflow-hidden">
617
+ <thead class="bg-gray-50">
618
+ <tr>
619
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scenario ID</th>
620
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">LLM Summary</th>
621
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date Created</th>
622
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tags</th>
623
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
624
+ </tr>
625
+ </thead>
626
+ <tbody class="divide-y divide-gray-200">
627
+ <tr>
628
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SC-2023-42</td>
629
+ <td class="px-6 py-4 text-sm text-gray-500">Soft landing with tech outperformance</td>
630
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 15, 2023</td>
631
+ <td class="px-6 py-4 whitespace-nowrap">
632
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full mr-1">plausible</span>
633
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">tech</span>
634
+ </td>
635
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
636
+ <button class="text-blue-500 hover:text-blue-700 mr-3" title="View">
637
+ <i class="fas fa-file-alt"></i>
638
+ </button>
639
+ <button class="text-blue-500 hover:text-blue-700 mr-3" title="Export CSV">
640
+ <i class="fas fa-download"></i>
641
+ </button>
642
+ <button class="text-blue-500 hover:text-blue-700" title="Share">
643
+ <i class="fas fa-share-alt"></i>
644
+ </button>
645
+ </td>
646
+ </tr>
647
+ <tr>
648
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SC-2023-17</td>
649
+ <td class="px-6 py-4 text-sm text-gray-500">Inflation shock with Fed overreaction</td>
650
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 28, 2023</td>
651
+ <td class="px-6 py-4 whitespace-nowrap">
652
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full mr-1">plausible</span>
653
+ <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">inflation</span>
654
+ </td>
655
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
656
+ <button class="text-blue-500 hover:text-blue-700 mr-3" title="View">
657
+ <i class="fas fa-file-alt"></i>
658
+ </button>
659
+ <button class="text-blue-500 hover:text-blue-700 mr-3" title="Export CSV">
660
+ <i class="fas fa-download"></i>
661
+ </button>
662
+ <button class="text-blue-500 hover:text-blue-700" title="Share">
663
+ <i class="fas fa-share-alt"></i>
664
+ </button>
665
+ </td>
666
+ </tr>
667
+ <tr>
668
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SC-2023-89</td>
669
+ <td class="px-6 py-4 text-sm text-gray-500">Commodity boom with dollar collapse</td>
670
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Apr 10, 2023</td>
671
+ <td class="px-6 py-4 whitespace-nowrap">
672
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full mr-1">questionable</span>
673
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">commodities</span>
674
+ </td>
675
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
676
+ <button class="text-blue-500 hover:text-blue-700 mr-3" title="View">
677
+ <i class="fas fa-file-alt"></i>
678
+ </button>
679
+ <button class="text-blue-500 hover:text-blue-700 mr-3" title="Export CSV">
680
+ <i class="fas fa-download"></i>
681
+ </button>
682
+ <button class="text-blue-500 hover:text-blue-700" title="Share">
683
+ <i class="fas fa-share-alt"></i>
684
+ </button>
685
+ </td>
686
+ </tr>
687
+ </tbody>
688
+ </table>
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </div>
693
+
694
+ <!-- Scenario Detail Modal (Hidden by default) -->
695
+ <div id="scenarioModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50">
696
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-screen overflow-y-auto">
697
+ <div class="p-6">
698
+ <div class="flex justify-between items-start mb-4">
699
+ <div>
700
+ <h3 class="text-xl font-semibold text-gray-800">Scenario SC-2023-42</h3>
701
+ <p class="text-sm text-gray-500">Generated on Jun 15, 2023</p>
702
+ </div>
703
+ <button id="closeModal" class="text-gray-400 hover:text-gray-500">
704
+ <i class="fas fa-times"></i>
705
+ </button>
706
+ </div>
707
+
708
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
709
+ <div>
710
+ <h4 class="text-lg font-medium text-gray-700 mb-3">Scenario Overview</h4>
711
+ <div class="bg-blue-50 p-4 rounded-lg mb-4">
712
+ <p class="text-blue-800">
713
+ "This scenario depicts a soft landing environment where the tech sector outperforms the broader market.
714
+ The Fed maintains a moderate stance while inflation gradually declines to target levels.
715
+ The S&P 500 gains 15% over 12 months with tech up 25%."
716
+ </p>
717
+ </div>
718
+ <div class="grid grid-cols-2 gap-4">
719
+ <div>
720
+ <label class="block text-sm font-medium text-gray-700 mb-1">LLM Score</label>
721
+ <div class="flex items-center">
722
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
723
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
724
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
725
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
726
+ <i class="fas fa-star text-yellow-400"></i>
727
+ <span class="ml-2 text-sm text-gray-600">5.0</span>
728
+ </div>
729
+ </div>
730
+ <div>
731
+ <label class="block text-sm font-medium text-gray-700 mb-1">Risk Level</label>
732
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Low</span>
733
+ </div>
734
+ <div>
735
+ <label class="block text-sm font-medium text-gray-700 mb-1">Generation Method</label>
736
+ <span class="text-sm text-gray-600">GAN</span>
737
+ </div>
738
+ <div>
739
+ <label class="block text-sm font-medium text-gray-700 mb-1">Time Horizon</label>
740
+ <span class="text-sm text-gray-600">12 months</span>
741
+ </div>
742
+ </div>
743
+ </div>
744
+ <div>
745
+ <h4 class="text-lg font-medium text-gray-700 mb-3">Asset Performance</h4>
746
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
747
+ <table class="min-w-full divide-y divide-gray-200">
748
+ <thead class="bg-gray-50">
749
+ <tr>
750
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset</th>
751
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start</th>
752
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End</th>
753
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Change</th>
754
+ </tr>
755
+ </thead>
756
+ <tbody class="divide-y divide-gray-200">
757
+ <tr>
758
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">S&P 500</td>
759
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">4,200</td>
760
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">4,830</td>
761
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-green-500">+15.0%</td>
762
+ </tr>
763
+ <tr>
764
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">NASDAQ</td>
765
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">13,200</td>
766
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">16,500</td>
767
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-green-500">+25.0%</td>
768
+ </tr>
769
+ <tr>
770
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">10Y Yield</td>
771
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">3.75%</td>
772
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">3.25%</td>
773
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-red-500">-50bps</td>
774
+ </tr>
775
+ <tr>
776
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">USD/EUR</td>
777
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">0.92</td>
778
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">0.95</td>
779
+ <td class="px-4 py-2 whitespace-nowrap text-sm text-red-500">+3.3%</td>
780
+ </tr>
781
+ </tbody>
782
+ </table>
783
+ </div>
784
+ </div>
785
+ </div>
786
+
787
+ <h4 class="text-lg font-medium text-gray-700 mb-3">Scenario Timeline</h4>
788
+ <div class="chart-container mb-6">
789
+ <canvas id="modalChart"></canvas>
790
+ </div>
791
+
792
+ <h4 class="text-lg font-medium text-gray-700 mb-3">LLM Validation Notes</h4>
793
+ <div class="bg-gray-50 p-4 rounded-lg">
794
+ <div class="flex items-start mb-3">
795
+ <div class="flex-shrink-0">
796
+ <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
797
+ <i class="fas fa-robot text-purple-500"></i>
798
+ </div>
799
+ </div>
800
+ <div class="ml-3">
801
+ <div class="text-sm font-medium text-gray-800">LLM Validator</div>
802
+ <div class="mt-1 text-sm text-gray-600">
803
+ "This scenario presents a coherent narrative of a soft landing environment. The tech outperformance
804
+ is consistent with historical patterns during periods of moderating inflation and stable rates.
805
+ The correlation structure between assets is economically plausible."
806
+ </div>
807
+ </div>
808
+ </div>
809
+ <div class="flex items-start">
810
+ <div class="flex-shrink-0">
811
+ <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
812
+ <i class="fas fa-robot text-purple-500"></i>
813
+ </div>
814
+ </div>
815
+ <div class="ml-3">
816
+ <div class="text-sm font-medium text-gray-800">LLM Validator</div>
817
+ <div class="mt-1 text-sm text-gray-600">
818
+ "The magnitude of tech outperformance (25%) relative to the broad market (15%) is at the upper end
819
+ of historical ranges but remains plausible given current sector valuations and growth expectations."
820
+ </div>
821
+ </div>
822
+ </div>
823
+ </div>
824
+
825
+ <div class="mt-6 flex justify-end space-x-3">
826
+ <button class="border border-gray-300 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50">
827
+ <i class="fas fa-download mr-1"></i> Export CSV
828
+ </button>
829
+ <button class="bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600">
830
+ <i class="fas fa-share-alt mr-1"></i> Share Scenario
831
+ </button>
832
+ </div>
833
+ </div>
834
+ </div>
835
+ </div>
836
+
837
+ <script>
838
+ // Generate random walk data
839
+ function generateRandomWalk(steps, startValue, volatility) {
840
+ const data = [startValue];
841
+ for (let i = 1; i < steps; i++) {
842
+ const change = (Math.random() - 0.5) * volatility;
843
+ data.push(data[i-1] + change);
844
+ }
845
+ return data;
846
+ }
847
+
848
+ // Generate correlated data
849
+ function generateCorrelatedData(baseData, correlation) {
850
+ return baseData.map((value, i) => {
851
+ const noise = (Math.random() - 0.5) * 2 * (1 - Math.abs(correlation));
852
+ return value * correlation + noise * 5;
853
+ });
854
+ }
855
+
856
+ // Generate time labels
857
+ function generateTimeLabels(count) {
858
+ const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
859
+ const labels = [];
860
+ for (let i = 0; i < count; i++) {
861
+ labels.push(`${months[i % 12]} ${2023 + Math.floor(i/12)}`);
862
+ }
863
+ return labels;
864
+ }
865
+
866
+ // Common chart options
867
+ function getChartOptions(title) {
868
+ return {
869
+ responsive: true,
870
+ maintainAspectRatio: false,
871
+ plugins: {
872
+ title: {
873
+ display: !!title,
874
+ text: title,
875
+ font: {
876
+ size: 14
877
+ }
878
+ },
879
+ tooltip: {
880
+ mode: 'index',
881
+ intersect: false,
882
+ backgroundColor: 'rgba(0, 0, 0, 0.7)',
883
+ titleFont: {
884
+ size: 12,
885
+ weight: 'bold'
886
+ },
887
+ bodyFont: {
888
+ size: 12
889
+ },
890
+ callbacks: {
891
+ label: function(context) {
892
+ let label = context.dataset.label || '';
893
+ if (label) {
894
+ label += ': ';
895
+ }
896
+ if (context.parsed.y !== null) {
897
+ label += context.parsed.y.toFixed(2);
898
+ if (context.dataset.label.includes('%')) {
899
+ label += '%';
900
+ } else if (context.dataset.label.includes('$')) {
901
+ label = '$' + label;
902
+ }
903
+ }
904
+ return label;
905
+ }
906
+ }
907
+ },
908
+ legend: {
909
+ position: 'bottom',
910
+ labels: {
911
+ boxWidth: 12,
912
+ padding: 20
913
+ }
914
+ }
915
+ },
916
+ scales: {
917
+ x: {
918
+ grid: {
919
+ display: false
920
+ }
921
+ },
922
+ y: {
923
+ type: 'linear',
924
+ display: true,
925
+ position: 'left',
926
+ grid: {
927
+ drawOnChartArea: false
928
+ }
929
+ }
930
+ },
931
+ interaction: {
932
+ mode: 'nearest',
933
+ axis: 'x',
934
+ intersect: false
935
+ }
936
+ };
937
+ }
938
+
939
+ // Render preview chart
940
+ function renderPreviewChart() {
941
+ const timeLabels = generateTimeLabels(12);
942
+ const baseData = generateRandomWalk(12, 100, 5);
943
+
944
+ const datasets = [];
945
+ for (let i = 0; i < 5; i++) {
946
+ datasets.push({
947
+ label: `Scenario ${i+1}`,
948
+ data: generateCorrelatedData(baseData, 0.7 + i*0.05),
949
+ borderColor: `hsl(${i * 60}, 70%, 50%)`,
950
+ backgroundColor: `hsla(${i * 60}, 70%, 50%, 0.1)`,
951
+ borderWidth: 1,
952
+ tension: 0.3
953
+ });
954
+ }
955
+
956
+ new Chart(document.getElementById('previewChart'), {
957
+ type: 'line',
958
+ data: {
959
+ labels: timeLabels,
960
+ datasets: datasets
961
+ },
962
+ options: getChartOptions('Sample Scenario Paths')
963
+ });
964
+ }
965
+
966
+ // Render mini charts
967
+ function renderMiniCharts() {
968
+ const timeLabels = generateTimeLabels(12);
969
+
970
+ // Mini Chart 1
971
+ new Chart(document.getElementById('miniChart1'), {
972
+ type: 'line',
973
+ data: {
974
+ labels: timeLabels,
975
+ datasets: [{
976
+ label: 'S&P 500',
977
+ data: generateRandomWalk(12, 4200, 50),
978
+ borderColor: '#10b981',
979
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
980
+ borderWidth: 1,
981
+ tension: 0.3
982
+ }]
983
+ },
984
+ options: getChartOptions()
985
+ });
986
+
987
+ // Mini Chart 2
988
+ new Chart(document.getElementById('miniChart2'), {
989
+ type: 'line',
990
+ data: {
991
+ labels: timeLabels,
992
+ datasets: [{
993
+ label: 'Tech Index',
994
+ data: generateRandomWalk(12, 13200, 100),
995
+ borderColor: '#3b82f6',
996
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
997
+ borderWidth: 1,
998
+ tension: 0.3
999
+ }]
1000
+ },
1001
+ options: getChartOptions()
1002
+ });
1003
+
1004
+ // Mini Chart 3
1005
+ new Chart(document.getElementById('miniChart3'), {
1006
+ type: 'line',
1007
+ data: {
1008
+ labels: timeLabels,
1009
+ datasets: [{
1010
+ label: 'Oil Price',
1011
+ data: generateRandomWalk(12, 80, 3),
1012
+ borderColor: '#f59e0b',
1013
+ backgroundColor: 'rgba(245, 158, 11, 0.1)',
1014
+ borderWidth: 1,
1015
+ tension: 0.3
1016
+ }]
1017
+ },
1018
+ options: getChartOptions()
1019
+ });
1020
+ }
1021
+
1022
+ // Render inspector charts
1023
+ function renderInspectorCharts() {
1024
+ const timeLabels = generateTimeLabels(12);
1025
+
1026
+ // Raw scenarios chart
1027
+ const rawDatasets = [];
1028
+ for (let i = 0; i < 20; i++) {
1029
+ rawDatasets.push({
1030
+ label: `Scenario ${i+1}`,
1031
+ data: generateRandomWalk(12, 100, 10),
1032
+ borderColor: 'rgba(100, 100, 100, 0.3)',
1033
+ backgroundColor: 'rgba(100, 100, 100, 0.05)',
1034
+ borderWidth: 1,
1035
+ tension: 0.1
1036
+ });
1037
+ }
1038
+
1039
+ new Chart(document.getElementById('rawScenariosChart'), {
1040
+ type: 'line',
1041
+ data: {
1042
+ labels: timeLabels,
1043
+ datasets: rawDatasets
1044
+ },
1045
+ options: getChartOptions('Raw Scenarios (Pre-Vetting)')
1046
+ });
1047
+
1048
+ // Filtered scenarios chart
1049
+ const baseData = generateRandomWalk(12, 100, 5);
1050
+ const filteredDatasets = [
1051
+ {
1052
+ label: 'Scenario #42 (Validated)',
1053
+ data: generateCorrelatedData(baseData, 0.9),
1054
+ borderColor: '#10b981',
1055
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
1056
+ borderWidth: 2,
1057
+ tension: 0.3
1058
+ },
1059
+ {
1060
+ label: 'Scenario #17 (Validated)',
1061
+ data: generateCorrelatedData(baseData, 0.8),
1062
+ borderColor: '#3b82f6',
1063
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
1064
+ borderWidth: 2,
1065
+ tension: 0.3
1066
+ },
1067
+ {
1068
+ label: 'Scenario #89 (Review)',
1069
+ data: generateCorrelatedData(baseData, 0.5),
1070
+ borderColor: '#f59e0b',
1071
+ backgroundColor: 'rgba(245, 158, 11, 0.1)',
1072
+ borderWidth: 2,
1073
+ tension: 0.3
1074
+ }
1075
+ ];
1076
+
1077
+ new Chart(document.getElementById('filteredScenariosChart'), {
1078
+ type: 'line',
1079
+ data: {
1080
+ labels: timeLabels,
1081
+ datasets: filteredDatasets
1082
+ },
1083
+ options: getChartOptions('Filtered Scenarios (Post-Vetting)')
1084
+ });
1085
+ }
1086
+
1087
+ // Render composer charts
1088
+ function renderComposerCharts() {
1089
+ const timeLabels = generateTimeLabels(12);
1090
+ const baseData = generateRandomWalk(12, 100, 4);
1091
+
1092
+ // Composer Chart 1
1093
+ new Chart(document.getElementById('composerChart1'), {
1094
+ type: 'line',
1095
+ data: {
1096
+ labels: timeLabels,
1097
+ datasets: [{
1098
+ label: 'Tech Index',
1099
+ data: generateCorrelatedData(baseData, 0.9).map(v => v * 1.2),
1100
+ borderColor: '#3b82f6',
1101
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
1102
+ borderWidth: 1,
1103
+ tension: 0.3
1104
+ }]
1105
+ },
1106
+ options: getChartOptions()
1107
+ });
1108
+
1109
+ // Composer Chart 2
1110
+ new Chart(document.getElementById('composerChart2'), {
1111
+ type: 'line',
1112
+ data: {
1113
+ labels: timeLabels,
1114
+ datasets: [{
1115
+ label: 'Growth Index',
1116
+ data: generateCorrelatedData(baseData, 0.85),
1117
+ borderColor: '#8b5cf6',
1118
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
1119
+ borderWidth: 1,
1120
+ tension: 0.3
1121
+ }]
1122
+ },
1123
+ options: getChartOptions()
1124
+ });
1125
+
1126
+ // Composer Chart 3
1127
+ new Chart(document.getElementById('composerChart3'), {
1128
+ type: 'line',
1129
+ data: {
1130
+ labels: timeLabels,
1131
+ datasets: [{
1132
+ label: 'Earnings Growth',
1133
+ data: generateCorrelatedData(baseData, 0.8).map(v => v * 0.8),
1134
+ borderColor: '#ec4899',
1135
+ backgroundColor: 'rgba(236, 72, 153, 0.1)',
1136
+ borderWidth: 1,
1137
+ tension: 0.3
1138
+ }]
1139
+ },
1140
+ options: getChartOptions()
1141
+ });
1142
+ }
1143
+
1144
+ // Render modal chart
1145
+ function renderModalChart() {
1146
+ const timeLabels = generateTimeLabels(12);
1147
+ const baseData = generateRandomWalk(12, 100, 3);
1148
+
1149
+ new Chart(document.getElementById('modalChart'), {
1150
+ type: 'line',
1151
+ data: {
1152
+ labels: timeLabels,
1153
+ datasets: [
1154
+ {
1155
+ label: 'S&P 500 (Normalized)',
1156
+ data: baseData,
1157
+ borderColor: '#10b981',
1158
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
1159
+ borderWidth: 2,
1160
+ tension: 0.3
1161
+ },
1162
+ {
1163
+ label: 'Tech Index (Normalized)',
1164
+ data: generateCorrelatedData(baseData, 0.9).map(v => v * 1.2),
1165
+ borderColor: '#3b82f6',
1166
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
1167
+ borderWidth: 2,
1168
+ tension: 0.3
1169
+ },
1170
+ {
1171
+ label: '10Y Yield (%)',
1172
+ data: generateCorrelatedData(baseData, -0.7).map(v => v * -0.05 + 4),
1173
+ borderColor: '#8b5cf6',
1174
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
1175
+ borderWidth: 2,
1176
+ tension: 0.3,
1177
+ yAxisID: 'y1'
1178
+ }
1179
+ ]
1180
+ },
1181
+ options: {
1182
+ responsive: true,
1183
+ maintainAspectRatio: false,
1184
+ plugins: {
1185
+ title: {
1186
+ display: true,
1187
+ text: 'Scenario Timeline',
1188
+ font: {
1189
+ size: 16
1190
+ }
1191
+ },
1192
+ tooltip: {
1193
+ mode: 'index',
1194
+ intersect: false
1195
+ },
1196
+ legend: {
1197
+ position: 'bottom'
1198
+ }
1199
+ },
1200
+ scales: {
1201
+ x: {
1202
+ grid: {
1203
+ display: false
1204
+ }
1205
+ },
1206
+ y: {
1207
+ type: 'linear',
1208
+ display: true,
1209
+ position: 'left',
1210
+ title: {
1211
+ display: true,
1212
+ text: 'Index Value'
1213
+ }
1214
+ },
1215
+ y1: {
1216
+ type: 'linear',
1217
+ display: true,
1218
+ position: 'right',
1219
+ title: {
1220
+ display: true,
1221
+ text: 'Yield (%)'
1222
+ },
1223
+ grid: {
1224
+ drawOnChartArea: false
1225
+ }
1226
+ }
1227
+ }
1228
+ }
1229
+ });
1230
+ }
1231
+
1232
+ // Toggle advanced settings
1233
+ document.querySelector('.toggle-switch input').addEventListener('change', function() {
1234
+ document.getElementById('advancedSettings').classList.toggle('hidden');
1235
+ });
1236
+
1237
+ // Generate button handler
1238
+ document.getElementById('generateBtn').addEventListener('click', function() {
1239
+ // Show loading state
1240
+ this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...';
1241
+ this.disabled = true;
1242
+
1243
+ // Show progress bar
1244
+ document.getElementById('generationProgress').classList.remove('hidden');
1245
+
1246
+ // Simulate generation progress
1247
+ let progress = 0;
1248
+ const progressInterval = setInterval(() => {
1249
+ progress += Math.random() * 10;
1250
+ if (progress >= 100) {
1251
+ progress = 100;
1252
+ clearInterval(progressInterval);
1253
+
1254
+ // Show results
1255
+ document.getElementById('resultsPreview').classList.remove('hidden');
1256
+
1257
+ // Render charts
1258
+ renderPreviewChart();
1259
+ renderMiniCharts();
1260
+
1261
+ // Reset button
1262
+ this.innerHTML = '<i class="fas fa-bolt mr-2"></i> Generate Scenarios';
1263
+ this.disabled = false;
1264
+
1265
+ // Hide progress bar
1266
+ document.getElementById('generationProgress').classList.add('hidden');
1267
+ }
1268
+ document.getElementById('progressFill').style.width = `${progress}%`;
1269
+ document.getElementById('progressPercent').textContent = `${Math.round(progress)}%`;
1270
+ }, 200);
1271
+ });
1272
+
1273
+ // Sidebar navigation
1274
+ document.querySelectorAll('.sidebar-item').forEach(item => {
1275
+ item.addEventListener('click', function() {
1276
+ document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
1277
+ this.classList.add('active');
1278
+
1279
+ // Hide all sections
1280
+ document.getElementById('resultsPreview').classList.add('hidden');
1281
+ document.getElementById('inspectorSection').classList.add('hidden');
1282
+ document.getElementById('composerSection').classList.add('hidden');
1283
+ document.getElementById('librarySection').classList.add('hidden');
1284
+
1285
+ // Show selected section
1286
+ const text = this.querySelector('span').textContent;
1287
+ if (text === 'Generator') {
1288
+ document.getElementById('resultsPreview').classList.remove('hidden');
1289
+ } else if (text === 'Inspector') {
1290
+ document.getElementById('inspectorSection').classList.remove('hidden');
1291
+ renderInspectorCharts();
1292
+ } else if (text === 'Composer') {
1293
+ document.getElementById('composerSection').classList.remove('hidden');
1294
+ renderComposerCharts();
1295
+ } else if (text === 'Scenario Library') {
1296
+ document.getElementById('librarySection').classList.remove('hidden');
1297
+ }
1298
+ });
1299
+ });
1300
+
1301
+ // Scenario card click handler
1302
+ document.querySelectorAll('.scenario-card').forEach(card => {
1303
+ card.addEventListener('click', function() {
1304
+ document.getElementById('scenarioModal').classList.remove('hidden');
1305
+ renderModalChart();
1306
+ });
1307
+ });
1308
+
1309
+ // Close modal handler
1310
+ document.getElementById('closeModal').addEventListener('click', function() {
1311
+ document.getElementById('scenarioModal').classList.add('hidden');
1312
+ });
1313
+
1314
+ // Initialize
1315
+ document.addEventListener('DOMContentLoaded', function() {
1316
+ // Render initial charts when the page loads
1317
+ renderPreviewChart();
1318
+ renderMiniCharts();
1319
+ });
1320
+ </script>
1321
+ <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=amphora/econai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1322
+ </html>