|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>EconAI - Scenario Generation Platform</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
<style> |
|
.sidebar-item.active { |
|
background-color: #f0f9ff; |
|
border-left: 4px solid #0ea5e9; |
|
} |
|
.sidebar-item.active .sidebar-icon { |
|
color: #0ea5e9; |
|
} |
|
.sidebar-item:hover:not(.active) { |
|
background-color: #f8fafc; |
|
} |
|
.chart-container { |
|
height: 300px; |
|
background-color: #f8fafc; |
|
border-radius: 0.5rem; |
|
position: relative; |
|
} |
|
.scenario-card:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
} |
|
.fade-in { |
|
animation: fadeIn 0.3s ease-in-out; |
|
} |
|
@keyframes fadeIn { |
|
from { opacity: 0; } |
|
to { opacity: 1; } |
|
} |
|
.progress-bar { |
|
height: 6px; |
|
border-radius: 3px; |
|
background-color: #e0f2fe; |
|
overflow: hidden; |
|
} |
|
.progress-bar-fill { |
|
height: 100%; |
|
background-color: #0ea5e9; |
|
transition: width 0.3s ease; |
|
} |
|
.toggle-switch { |
|
position: relative; |
|
display: inline-block; |
|
width: 50px; |
|
height: 24px; |
|
} |
|
.toggle-switch input { |
|
opacity: 0; |
|
width: 0; |
|
height: 0; |
|
} |
|
.toggle-slider { |
|
position: absolute; |
|
cursor: pointer; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
background-color: #cbd5e1; |
|
transition: .4s; |
|
border-radius: 24px; |
|
} |
|
.toggle-slider:before { |
|
position: absolute; |
|
content: ""; |
|
height: 16px; |
|
width: 16px; |
|
left: 4px; |
|
bottom: 4px; |
|
background-color: white; |
|
transition: .4s; |
|
border-radius: 50%; |
|
} |
|
input:checked + .toggle-slider { |
|
background-color: #0ea5e9; |
|
} |
|
input:checked + .toggle-slider:before { |
|
transform: translateX(26px); |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50 font-sans flex h-screen overflow-hidden"> |
|
|
|
<div class="w-64 bg-white border-r border-gray-200 flex flex-col"> |
|
<div class="p-4 border-b border-gray-200"> |
|
<div class="flex items-center space-x-2"> |
|
<i class="fas fa-chart-line text-2xl text-blue-500"></i> |
|
<span class="text-xl font-bold text-gray-800">EconAI</span> |
|
</div> |
|
</div> |
|
<nav class="flex-1 overflow-y-auto"> |
|
<div class="p-2"> |
|
<div class="sidebar-item active px-4 py-3 rounded-lg mb-1 cursor-pointer flex items-center"> |
|
<i class="sidebar-icon fas fa-cogs text-gray-500 mr-3"></i> |
|
<span class="text-gray-700 font-medium">Generator</span> |
|
</div> |
|
<div class="sidebar-item px-4 py-3 rounded-lg mb-1 cursor-pointer flex items-center"> |
|
<i class="sidebar-icon fas fa-search text-gray-500 mr-3"></i> |
|
<span class="text-gray-700 font-medium">Inspector</span> |
|
</div> |
|
<div class="sidebar-item px-4 py-3 rounded-lg mb-1 cursor-pointer flex items-center"> |
|
<i class="sidebar-icon fas fa-pen-fancy text-gray-500 mr-3"></i> |
|
<span class="text-gray-700 font-medium">Composer</span> |
|
</div> |
|
<div class="sidebar-item px-4 py-3 rounded-lg mb-1 cursor-pointer flex items-center"> |
|
<i class="sidebar-icon fas fa-folder text-gray-500 mr-3"></i> |
|
<span class="text-gray-700 font-medium">Scenario Library</span> |
|
</div> |
|
<div class="sidebar-item px-4 py-3 rounded-lg cursor-pointer flex items-center"> |
|
<i class="sidebar-icon fas fa-cog text-gray-500 mr-3"></i> |
|
<span class="text-gray-700 font-medium">Settings</span> |
|
</div> |
|
</div> |
|
</nav> |
|
<div class="p-4 border-t border-gray-200"> |
|
<div class="flex items-center"> |
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
|
<i class="fas fa-user text-blue-500"></i> |
|
</div> |
|
<div> |
|
<div class="text-sm font-medium text-gray-700">John Doe</div> |
|
<div class="text-xs text-gray-500">Analyst</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
<div class="bg-white border-b border-gray-200 p-4 flex justify-between items-center"> |
|
<h1 class="text-2xl font-bold text-gray-800">Synthetic Scenario Generator</h1> |
|
<div class="flex items-center space-x-4"> |
|
<div class="relative"> |
|
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
|
<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"> |
|
</div> |
|
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition flex items-center"> |
|
<i class="fas fa-plus mr-2"></i> New Scenario |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-y-auto p-6"> |
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 mb-6"> |
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
<div class="md:col-span-2"> |
|
<h2 class="text-xl font-semibold text-gray-800 mb-4">Generation Parameters</h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Generation Method</label> |
|
<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"> |
|
<option>Brownian Motion</option> |
|
<option>GARCH</option> |
|
<option>Copula + Marginals</option> |
|
<option>Custom (Upload Parameters)</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Number of Scenarios</label> |
|
<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"> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Time Horizon</label> |
|
<div class="flex space-x-2"> |
|
<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"> |
|
<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"> |
|
<option>Months</option> |
|
<option>Days</option> |
|
<option>Years</option> |
|
</select> |
|
</div> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Number of Assets</label> |
|
<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"> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-center justify-between mb-6"> |
|
<div class="flex items-center"> |
|
<label class="block text-sm font-medium text-gray-700 mr-3">Advanced Settings</label> |
|
<label class="toggle-switch"> |
|
<input type="checkbox"> |
|
<span class="toggle-slider"></span> |
|
</label> |
|
</div> |
|
<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"> |
|
<i class="fas fa-bolt mr-2"></i> Generate Scenarios |
|
</button> |
|
</div> |
|
|
|
|
|
<div id="advancedSettings" class="hidden bg-gray-50 p-4 rounded-lg mb-6"> |
|
<h3 class="text-md font-medium text-gray-700 mb-3">Advanced Parameters</h3> |
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Volatility</label> |
|
<input type="range" min="0" max="1" step="0.01" value="0.2" class="w-full"> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Drift</label> |
|
<input type="range" min="-0.1" max="0.1" step="0.01" value="0.02" class="w-full"> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Correlation Strength</label> |
|
<input type="range" min="0" max="1" step="0.1" value="0.5" class="w-full"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="generationProgress" class="hidden"> |
|
<div class="flex items-center justify-between mb-2"> |
|
<span class="text-sm font-medium text-gray-700">Generating scenarios...</span> |
|
<span class="text-sm text-gray-500" id="progressPercent">0%</span> |
|
</div> |
|
<div class="progress-bar"> |
|
<div class="progress-bar-fill" id="progressFill" style="width: 0%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<h2 class="text-xl font-semibold text-gray-800 mb-4">Selected Assets</h2> |
|
<div class="bg-gray-50 p-4 rounded-lg h-full"> |
|
<div class="space-y-3"> |
|
<div class="flex items-center justify-between p-2 bg-white rounded-lg border border-gray-200"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-dollar-sign text-blue-500 mr-3"></i> |
|
<span>USD/EUR</span> |
|
</div> |
|
<i class="fas fa-times text-gray-400 hover:text-red-500 cursor-pointer"></i> |
|
</div> |
|
<div class="flex items-center justify-between p-2 bg-white rounded-lg border border-gray-200"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-chart-bar text-green-500 mr-3"></i> |
|
<span>S&P 500</span> |
|
</div> |
|
<i class="fas fa-times text-gray-400 hover:text-red-500 cursor-pointer"></i> |
|
</div> |
|
<div class="flex items-center justify-between p-2 bg-white rounded-lg border border-gray-200"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-oil-can text-yellow-500 mr-3"></i> |
|
<span>Crude Oil</span> |
|
</div> |
|
<i class="fas fa-times text-gray-400 hover:text-red-500 cursor-pointer"></i> |
|
</div> |
|
<div class="flex items-center justify-between p-2 bg-white rounded-lg border border-gray-200"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-home text-purple-500 mr-3"></i> |
|
<span>Housing Index</span> |
|
</div> |
|
<i class="fas fa-times text-gray-400 hover:text-red-500 cursor-pointer"></i> |
|
</div> |
|
<div class="flex items-center justify-between p-2 bg-white rounded-lg border border-gray-200"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-percentage text-red-500 mr-3"></i> |
|
<span>Inflation Rate</span> |
|
</div> |
|
<i class="fas fa-times text-gray-400 hover:text-red-500 cursor-pointer"></i> |
|
</div> |
|
</div> |
|
<button class="mt-4 text-blue-500 hover:text-blue-700 text-sm font-medium flex items-center"> |
|
<i class="fas fa-plus-circle mr-1"></i> Add Asset |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="resultsPreview" class="hidden fade-in"> |
|
<div class="bg-white rounded-xl shadow-md p-6 mb-6"> |
|
<div class="flex justify-between items-center mb-6"> |
|
<h2 class="text-xl font-semibold text-gray-800">Generated Scenarios Preview</h2> |
|
<div class="flex space-x-3"> |
|
<button class="border border-gray-300 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 flex items-center"> |
|
<i class="fas fa-download mr-1"></i> Export All |
|
</button> |
|
<button class="border border-gray-300 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 flex items-center"> |
|
<i class="fas fa-filter mr-1"></i> Filter |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="chart-container mb-6"> |
|
<canvas id="previewChart"></canvas> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
<div class="scenario-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer"> |
|
<div class="flex justify-between items-start mb-3"> |
|
<h3 class="font-medium">Scenario #42</h3> |
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Validated</span> |
|
</div> |
|
<div class="h-24 mb-2"> |
|
<canvas id="miniChart1"></canvas> |
|
</div> |
|
<div class="text-sm text-gray-600"> |
|
<div class="flex items-center mb-1"> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<span>4.2/5</span> |
|
</div> |
|
<div class="text-xs text-gray-500 truncate">Moderate growth with stable inflation</div> |
|
</div> |
|
</div> |
|
<div class="scenario-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer"> |
|
<div class="flex justify-between items-start mb-3"> |
|
<h3 class="font-medium">Scenario #17</h3> |
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Validated</span> |
|
</div> |
|
<div class="h-24 mb-2"> |
|
<canvas id="miniChart2"></canvas> |
|
</div> |
|
<div class="text-sm text-gray-600"> |
|
<div class="flex items-center mb-1"> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<span>3.8/5</span> |
|
</div> |
|
<div class="text-xs text-gray-500 truncate">Tech rally with rate hikes</div> |
|
</div> |
|
</div> |
|
<div class="scenario-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer"> |
|
<div class="flex justify-between items-start mb-3"> |
|
<h3 class="font-medium">Scenario #89</h3> |
|
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Review</span> |
|
</div> |
|
<div class="h-24 mb-2"> |
|
<canvas id="miniChart3"></canvas> |
|
</div> |
|
<div class="text-sm text-gray-600"> |
|
<div class="flex items-center mb-1"> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<span>2.5/5</span> |
|
</div> |
|
<div class="text-xs text-gray-500 truncate">Extreme volatility in commodities</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="inspectorSection" class="hidden bg-white rounded-xl shadow-md p-6 mb-6"> |
|
<div class="flex items-center mb-6"> |
|
<i class="fas fa-robot text-blue-500 text-2xl mr-3"></i> |
|
<h2 class="text-xl font-semibold text-gray-800">LLM Inspector – Scenario Vetting</h2> |
|
</div> |
|
|
|
<div class="bg-blue-50 p-4 rounded-lg mb-6"> |
|
<p class="text-blue-800"> |
|
These scenarios are semantically evaluated and filtered for economic realism by our LLM Inspector. |
|
The system identifies implausible correlations, unrealistic trajectories, and inconsistent narratives. |
|
</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
|
<div> |
|
<h3 class="text-lg font-medium text-gray-700 mb-3">Raw Scenarios (Pre-Vetting)</h3> |
|
<div class="chart-container"> |
|
<canvas id="rawScenariosChart"></canvas> |
|
</div> |
|
</div> |
|
<div> |
|
<h3 class="text-lg font-medium text-gray-700 mb-3">Filtered Scenarios (Post-Vetting)</h3> |
|
<div class="chart-container"> |
|
<canvas id="filteredScenariosChart"></canvas> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<h3 class="text-lg font-medium text-gray-700 mb-3">Scenario Evaluation</h3> |
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full bg-white rounded-lg overflow-hidden"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scenario ID</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Summary</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Inspector Score</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tags</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
</tr> |
|
</thead> |
|
<tbody class="divide-y divide-gray-200"> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SC-2023-42</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Soft landing with tech outperformance</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex"> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full mr-1">plausible</span> |
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">tech</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
<button class="text-blue-500 hover:text-blue-700 mr-3"> |
|
<i class="fas fa-eye"></i> |
|
</button> |
|
<button class="text-blue-500 hover:text-blue-700"> |
|
<i class="fas fa-download"></i> |
|
</button> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SC-2023-17</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Inflation shock with Fed overreaction</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex"> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-gray-300"></i> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full mr-1">plausible</span> |
|
<span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">inflation</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
<button class="text-blue-500 hover:text-blue-700 mr-3"> |
|
<i class="fas fa-eye"></i> |
|
</button> |
|
<button class="text-blue-500 hover:text-blue-700"> |
|
<i class="fas fa-download"></i> |
|
</button> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SC-2023-89</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Commodity boom with dollar collapse</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex"> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<i class="fas fa-star text-gray-300"></i> |
|
<i class="fas fa-star text-gray-300"></i> |
|
<i class="fas fa-star text-gray-300"></i> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full mr-1">questionable</span> |
|
<span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">commodities</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
<button class="text-blue-500 hover:text-blue-700 mr-3"> |
|
<i class="fas fa-eye"></i> |
|
</button> |
|
<button class="text-blue-500 hover:text-blue-700"> |
|
<i class="fas fa-download"></i> |
|
</button> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="composerSection" class="hidden bg-white rounded-xl shadow-md p-6 mb-6"> |
|
<div class="flex items-center mb-6"> |
|
<i class="fas fa-pen-fancy text-blue-500 text-2xl mr-3"></i> |
|
<h2 class="text-xl font-semibold text-gray-800">Text-to-Scenario Composer</h2> |
|
</div> |
|
|
|
<div class="bg-blue-50 p-6 rounded-lg mb-6 text-center"> |
|
<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... Example: 'Tech stocks rally 20% while interest rates stay low, under a soft-landing macro environment.'"></textarea> |
|
|
|
<div class="flex flex-wrap justify-center mt-4 space-x-4"> |
|
<div class="mb-3"> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Severity Level</label> |
|
<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"> |
|
<option>Mild</option> |
|
<option selected>Moderate</option> |
|
<option>Extreme</option> |
|
</select> |
|
</div> |
|
<div class="mb-3"> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Time Horizon</label> |
|
<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"> |
|
<option>Short-term (1-3 months)</option> |
|
<option selected>Medium-term (6-12 months)</option> |
|
<option>Long-term (1-3 years)</option> |
|
</select> |
|
</div> |
|
<div class="mb-3"> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Asset Focus</label> |
|
<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"> |
|
<option>All Assets</option> |
|
<option selected>Equities</option> |
|
<option>Fixed Income</option> |
|
<option>Commodities</option> |
|
<option>Currencies</option> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
<button class="bg-blue-500 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-600 transition mt-4"> |
|
<i class="fas fa-magic mr-2"></i> Generate Matching Scenarios |
|
</button> |
|
</div> |
|
|
|
<h3 class="text-lg font-medium text-gray-700 mb-4">Matching Scenarios</h3> |
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
<div class="scenario-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer"> |
|
<div class="h-32 mb-3"> |
|
<canvas id="composerChart1"></canvas> |
|
</div> |
|
<div class="text-sm text-gray-600 mb-2"> |
|
"Tech sector outperforms while broader market stagnates under moderate rate environment." |
|
</div> |
|
<div class="flex justify-between items-center"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<span class="text-xs">87% match</span> |
|
</div> |
|
<div> |
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">tech</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="scenario-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer"> |
|
<div class="h-32 mb-3"> |
|
<canvas id="composerChart2"></canvas> |
|
</div> |
|
<div class="text-sm text-gray-600 mb-2"> |
|
"Growth stocks rally as Fed pauses hikes, while value lags due to yield curve flattening." |
|
</div> |
|
<div class="flex justify-between items-center"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<span class="text-xs">79% match</span> |
|
</div> |
|
<div> |
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">growth</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="scenario-card bg-white border border-gray-200 rounded-lg p-4 transition cursor-pointer"> |
|
<div class="h-32 mb-3"> |
|
<canvas id="composerChart3"></canvas> |
|
</div> |
|
<div class="text-sm text-gray-600 mb-2"> |
|
"Sector rotation into tech as earnings surprise to upside despite macro headwinds." |
|
</div> |
|
<div class="flex justify-between items-center"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<span class="text-xs">72% match</span> |
|
</div> |
|
<div> |
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">earnings</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="librarySection" class="hidden bg-white rounded-xl shadow-md p-6"> |
|
<div class="flex items-center mb-6"> |
|
<i class="fas fa-folder text-blue-500 text-2xl mr-3"></i> |
|
<h2 class="text-xl font-semibold text-gray-800">Scenario Library</h2> |
|
</div> |
|
|
|
<div class="flex flex-wrap justify-between mb-6"> |
|
<div class="flex flex-wrap space-x-3 mb-3"> |
|
<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"> |
|
<option>All Tags</option> |
|
<option>Plausible</option> |
|
<option>Inflation</option> |
|
<option>Tech</option> |
|
<option>Recession</option> |
|
</select> |
|
<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"> |
|
<option>All Risk Levels</option> |
|
<option>Low</option> |
|
<option>Medium</option> |
|
<option>High</option> |
|
</select> |
|
<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"> |
|
<option>All Methods</option> |
|
<option>Brownian Motion</option> |
|
<option>GARCH</option> |
|
<option>Copula</option> |
|
<option>Custom</option> |
|
</select> |
|
</div> |
|
<div class="relative mb-3"> |
|
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
|
<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"> |
|
</div> |
|
</div> |
|
|
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full bg-white rounded-lg overflow-hidden"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scenario ID</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">LLM Summary</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date Created</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tags</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
</tr> |
|
</thead> |
|
<tbody class="divide-y divide-gray-200"> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SC-2023-42</td> |
|
<td class="px-6 py-4 text-sm text-gray-500">Soft landing with tech outperformance</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 15, 2023</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full mr-1">plausible</span> |
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">tech</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
<button class="text-blue-500 hover:text-blue-700 mr-3" title="View"> |
|
<i class="fas fa-file-alt"></i> |
|
</button> |
|
<button class="text-blue-500 hover:text-blue-700 mr-3" title="Export CSV"> |
|
<i class="fas fa-download"></i> |
|
</button> |
|
<button class="text-blue-500 hover:text-blue-700" title="Share"> |
|
<i class="fas fa-share-alt"></i> |
|
</button> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SC-2023-17</td> |
|
<td class="px-6 py-4 text-sm text-gray-500">Inflation shock with Fed overreaction</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 28, 2023</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full mr-1">plausible</span> |
|
<span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">inflation</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
<button class="text-blue-500 hover:text-blue-700 mr-3" title="View"> |
|
<i class="fas fa-file-alt"></i> |
|
</button> |
|
<button class="text-blue-500 hover:text-blue-700 mr-3" title="Export CSV"> |
|
<i class="fas fa-download"></i> |
|
</button> |
|
<button class="text-blue-500 hover:text-blue-700" title="Share"> |
|
<i class="fas fa-share-alt"></i> |
|
</button> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SC-2023-89</td> |
|
<td class="px-6 py-4 text-sm text-gray-500">Commodity boom with dollar collapse</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Apr 10, 2023</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full mr-1">questionable</span> |
|
<span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">commodities</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
<button class="text-blue-500 hover:text-blue-700 mr-3" title="View"> |
|
<i class="fas fa-file-alt"></i> |
|
</button> |
|
<button class="text-blue-500 hover:text-blue-700 mr-3" title="Export CSV"> |
|
<i class="fas fa-download"></i> |
|
</button> |
|
<button class="text-blue-500 hover:text-blue-700" title="Share"> |
|
<i class="fas fa-share-alt"></i> |
|
</button> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="scenarioModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50"> |
|
<div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-screen overflow-y-auto"> |
|
<div class="p-6"> |
|
<div class="flex justify-between items-start mb-4"> |
|
<div> |
|
<h3 class="text-xl font-semibold text-gray-800">Scenario SC-2023-42</h3> |
|
<p class="text-sm text-gray-500">Generated on Jun 15, 2023</p> |
|
</div> |
|
<button id="closeModal" class="text-gray-400 hover:text-gray-500"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
|
<div> |
|
<h4 class="text-lg font-medium text-gray-700 mb-3">Scenario Overview</h4> |
|
<div class="bg-blue-50 p-4 rounded-lg mb-4"> |
|
<p class="text-blue-800"> |
|
"This scenario depicts a soft landing environment where the tech sector outperforms the broader market. |
|
The Fed maintains a moderate stance while inflation gradually declines to target levels. |
|
The S&P 500 gains 15% over 12 months with tech up 25%." |
|
</p> |
|
</div> |
|
<div class="grid grid-cols-2 gap-4"> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">LLM Score</label> |
|
<div class="flex items-center"> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<i class="fas fa-star text-yellow-400"></i> |
|
<span class="ml-2 text-sm text-gray-600">5.0</span> |
|
</div> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Risk Level</label> |
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Low</span> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Generation Method</label> |
|
<span class="text-sm text-gray-600">GAN</span> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-700 mb-1">Time Horizon</label> |
|
<span class="text-sm text-gray-600">12 months</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div> |
|
<h4 class="text-lg font-medium text-gray-700 mb-3">Asset Performance</h4> |
|
<div class="bg-white border border-gray-200 rounded-lg overflow-hidden"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset</th> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start</th> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End</th> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Change</th> |
|
</tr> |
|
</thead> |
|
<tbody class="divide-y divide-gray-200"> |
|
<tr> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">S&P 500</td> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">4,200</td> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">4,830</td> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-green-500">+15.0%</td> |
|
</tr> |
|
<tr> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">NASDAQ</td> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">13,200</td> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">16,500</td> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-green-500">+25.0%</td> |
|
</tr> |
|
<tr> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">10Y Yield</td> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">3.75%</td> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">3.25%</td> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-red-500">-50bps</td> |
|
</tr> |
|
<tr> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">USD/EUR</td> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">0.92</td> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">0.95</td> |
|
<td class="px-4 py-2 whitespace-nowrap text-sm text-red-500">+3.3%</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<h4 class="text-lg font-medium text-gray-700 mb-3">Scenario Timeline</h4> |
|
<div class="chart-container mb-6"> |
|
<canvas id="modalChart"></canvas> |
|
</div> |
|
|
|
<h4 class="text-lg font-medium text-gray-700 mb-3">LLM Validation Notes</h4> |
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
<div class="flex items-start mb-3"> |
|
<div class="flex-shrink-0"> |
|
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center"> |
|
<i class="fas fa-robot text-purple-500"></i> |
|
</div> |
|
</div> |
|
<div class="ml-3"> |
|
<div class="text-sm font-medium text-gray-800">LLM Validator</div> |
|
<div class="mt-1 text-sm text-gray-600"> |
|
"This scenario presents a coherent narrative of a soft landing environment. The tech outperformance |
|
is consistent with historical patterns during periods of moderating inflation and stable rates. |
|
The correlation structure between assets is economically plausible." |
|
</div> |
|
</div> |
|
</div> |
|
<div class="flex items-start"> |
|
<div class="flex-shrink-0"> |
|
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center"> |
|
<i class="fas fa-robot text-purple-500"></i> |
|
</div> |
|
</div> |
|
<div class="ml-3"> |
|
<div class="text-sm font-medium text-gray-800">LLM Validator</div> |
|
<div class="mt-1 text-sm text-gray-600"> |
|
"The magnitude of tech outperformance (25%) relative to the broad market (15%) is at the upper end |
|
of historical ranges but remains plausible given current sector valuations and growth expectations." |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 flex justify-end space-x-3"> |
|
<button class="border border-gray-300 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50"> |
|
<i class="fas fa-download mr-1"></i> Export CSV |
|
</button> |
|
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600"> |
|
<i class="fas fa-share-alt mr-1"></i> Share Scenario |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
function generateRandomWalk(steps, startValue, volatility) { |
|
const data = [startValue]; |
|
for (let i = 1; i < steps; i++) { |
|
const change = (Math.random() - 0.5) * volatility; |
|
data.push(data[i-1] + change); |
|
} |
|
return data; |
|
} |
|
|
|
|
|
function generateCorrelatedData(baseData, correlation) { |
|
return baseData.map((value, i) => { |
|
const noise = (Math.random() - 0.5) * 2 * (1 - Math.abs(correlation)); |
|
return value * correlation + noise * 5; |
|
}); |
|
} |
|
|
|
|
|
function generateTimeLabels(count) { |
|
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; |
|
const labels = []; |
|
for (let i = 0; i < count; i++) { |
|
labels.push(`${months[i % 12]} ${2023 + Math.floor(i/12)}`); |
|
} |
|
return labels; |
|
} |
|
|
|
|
|
function getChartOptions(title) { |
|
return { |
|
responsive: true, |
|
maintainAspectRatio: false, |
|
plugins: { |
|
title: { |
|
display: !!title, |
|
text: title, |
|
font: { |
|
size: 14 |
|
} |
|
}, |
|
tooltip: { |
|
mode: 'index', |
|
intersect: false, |
|
backgroundColor: 'rgba(0, 0, 0, 0.7)', |
|
titleFont: { |
|
size: 12, |
|
weight: 'bold' |
|
}, |
|
bodyFont: { |
|
size: 12 |
|
}, |
|
callbacks: { |
|
label: function(context) { |
|
let label = context.dataset.label || ''; |
|
if (label) { |
|
label += ': '; |
|
} |
|
if (context.parsed.y !== null) { |
|
label += context.parsed.y.toFixed(2); |
|
if (context.dataset.label.includes('%')) { |
|
label += '%'; |
|
} else if (context.dataset.label.includes('$')) { |
|
label = '$' + label; |
|
} |
|
} |
|
return label; |
|
} |
|
} |
|
}, |
|
legend: { |
|
position: 'bottom', |
|
labels: { |
|
boxWidth: 12, |
|
padding: 20 |
|
} |
|
} |
|
}, |
|
scales: { |
|
x: { |
|
grid: { |
|
display: false |
|
} |
|
}, |
|
y: { |
|
type: 'linear', |
|
display: true, |
|
position: 'left', |
|
grid: { |
|
drawOnChartArea: false |
|
} |
|
} |
|
}, |
|
interaction: { |
|
mode: 'nearest', |
|
axis: 'x', |
|
intersect: false |
|
} |
|
}; |
|
} |
|
|
|
|
|
function renderPreviewChart() { |
|
const timeLabels = generateTimeLabels(12); |
|
const baseData = generateRandomWalk(12, 100, 5); |
|
|
|
const datasets = []; |
|
for (let i = 0; i < 5; i++) { |
|
datasets.push({ |
|
label: `Scenario ${i+1}`, |
|
data: generateCorrelatedData(baseData, 0.7 + i*0.05), |
|
borderColor: `hsl(${i * 60}, 70%, 50%)`, |
|
backgroundColor: `hsla(${i * 60}, 70%, 50%, 0.1)`, |
|
borderWidth: 1, |
|
tension: 0.3 |
|
}); |
|
} |
|
|
|
new Chart(document.getElementById('previewChart'), { |
|
type: 'line', |
|
data: { |
|
labels: timeLabels, |
|
datasets: datasets |
|
}, |
|
options: getChartOptions('Sample Scenario Paths') |
|
}); |
|
} |
|
|
|
|
|
function renderMiniCharts() { |
|
const timeLabels = generateTimeLabels(12); |
|
|
|
|
|
new Chart(document.getElementById('miniChart1'), { |
|
type: 'line', |
|
data: { |
|
labels: timeLabels, |
|
datasets: [{ |
|
label: 'S&P 500', |
|
data: generateRandomWalk(12, 4200, 50), |
|
borderColor: '#10b981', |
|
backgroundColor: 'rgba(16, 185, 129, 0.1)', |
|
borderWidth: 1, |
|
tension: 0.3 |
|
}] |
|
}, |
|
options: getChartOptions() |
|
}); |
|
|
|
|
|
new Chart(document.getElementById('miniChart2'), { |
|
type: 'line', |
|
data: { |
|
labels: timeLabels, |
|
datasets: [{ |
|
label: 'Tech Index', |
|
data: generateRandomWalk(12, 13200, 100), |
|
borderColor: '#3b82f6', |
|
backgroundColor: 'rgba(59, 130, 246, 0.1)', |
|
borderWidth: 1, |
|
tension: 0.3 |
|
}] |
|
}, |
|
options: getChartOptions() |
|
}); |
|
|
|
|
|
new Chart(document.getElementById('miniChart3'), { |
|
type: 'line', |
|
data: { |
|
labels: timeLabels, |
|
datasets: [{ |
|
label: 'Oil Price', |
|
data: generateRandomWalk(12, 80, 3), |
|
borderColor: '#f59e0b', |
|
backgroundColor: 'rgba(245, 158, 11, 0.1)', |
|
borderWidth: 1, |
|
tension: 0.3 |
|
}] |
|
}, |
|
options: getChartOptions() |
|
}); |
|
} |
|
|
|
|
|
function renderInspectorCharts() { |
|
const timeLabels = generateTimeLabels(12); |
|
|
|
|
|
const rawDatasets = []; |
|
for (let i = 0; i < 20; i++) { |
|
rawDatasets.push({ |
|
label: `Scenario ${i+1}`, |
|
data: generateRandomWalk(12, 100, 10), |
|
borderColor: 'rgba(100, 100, 100, 0.3)', |
|
backgroundColor: 'rgba(100, 100, 100, 0.05)', |
|
borderWidth: 1, |
|
tension: 0.1 |
|
}); |
|
} |
|
|
|
new Chart(document.getElementById('rawScenariosChart'), { |
|
type: 'line', |
|
data: { |
|
labels: timeLabels, |
|
datasets: rawDatasets |
|
}, |
|
options: getChartOptions('Raw Scenarios (Pre-Vetting)') |
|
}); |
|
|
|
|
|
const baseData = generateRandomWalk(12, 100, 5); |
|
const filteredDatasets = [ |
|
{ |
|
label: 'Scenario #42 (Validated)', |
|
data: generateCorrelatedData(baseData, 0.9), |
|
borderColor: '#10b981', |
|
backgroundColor: 'rgba(16, 185, 129, 0.1)', |
|
borderWidth: 2, |
|
tension: 0.3 |
|
}, |
|
{ |
|
label: 'Scenario #17 (Validated)', |
|
data: generateCorrelatedData(baseData, 0.8), |
|
borderColor: '#3b82f6', |
|
backgroundColor: 'rgba(59, 130, 246, 0.1)', |
|
borderWidth: 2, |
|
tension: 0.3 |
|
}, |
|
{ |
|
label: 'Scenario #89 (Review)', |
|
data: generateCorrelatedData(baseData, 0.5), |
|
borderColor: '#f59e0b', |
|
backgroundColor: 'rgba(245, 158, 11, 0.1)', |
|
borderWidth: 2, |
|
tension: 0.3 |
|
} |
|
]; |
|
|
|
new Chart(document.getElementById('filteredScenariosChart'), { |
|
type: 'line', |
|
data: { |
|
labels: timeLabels, |
|
datasets: filteredDatasets |
|
}, |
|
options: getChartOptions('Filtered Scenarios (Post-Vetting)') |
|
}); |
|
} |
|
|
|
|
|
function renderComposerCharts() { |
|
const timeLabels = generateTimeLabels(12); |
|
const baseData = generateRandomWalk(12, 100, 4); |
|
|
|
|
|
new Chart(document.getElementById('composerChart1'), { |
|
type: 'line', |
|
data: { |
|
labels: timeLabels, |
|
datasets: [{ |
|
label: 'Tech Index', |
|
data: generateCorrelatedData(baseData, 0.9).map(v => v * 1.2), |
|
borderColor: '#3b82f6', |
|
backgroundColor: 'rgba(59, 130, 246, 0.1)', |
|
borderWidth: 1, |
|
tension: 0.3 |
|
}] |
|
}, |
|
options: getChartOptions() |
|
}); |
|
|
|
|
|
new Chart(document.getElementById('composerChart2'), { |
|
type: 'line', |
|
data: { |
|
labels: timeLabels, |
|
datasets: [{ |
|
label: 'Growth Index', |
|
data: generateCorrelatedData(baseData, 0.85), |
|
borderColor: '#8b5cf6', |
|
backgroundColor: 'rgba(139, 92, 246, 0.1)', |
|
borderWidth: 1, |
|
tension: 0.3 |
|
}] |
|
}, |
|
options: getChartOptions() |
|
}); |
|
|
|
|
|
new Chart(document.getElementById('composerChart3'), { |
|
type: 'line', |
|
data: { |
|
labels: timeLabels, |
|
datasets: [{ |
|
label: 'Earnings Growth', |
|
data: generateCorrelatedData(baseData, 0.8).map(v => v * 0.8), |
|
borderColor: '#ec4899', |
|
backgroundColor: 'rgba(236, 72, 153, 0.1)', |
|
borderWidth: 1, |
|
tension: 0.3 |
|
}] |
|
}, |
|
options: getChartOptions() |
|
}); |
|
} |
|
|
|
|
|
function renderModalChart() { |
|
const timeLabels = generateTimeLabels(12); |
|
const baseData = generateRandomWalk(12, 100, 3); |
|
|
|
new Chart(document.getElementById('modalChart'), { |
|
type: 'line', |
|
data: { |
|
labels: timeLabels, |
|
datasets: [ |
|
{ |
|
label: 'S&P 500 (Normalized)', |
|
data: baseData, |
|
borderColor: '#10b981', |
|
backgroundColor: 'rgba(16, 185, 129, 0.1)', |
|
borderWidth: 2, |
|
tension: 0.3 |
|
}, |
|
{ |
|
label: 'Tech Index (Normalized)', |
|
data: generateCorrelatedData(baseData, 0.9).map(v => v * 1.2), |
|
borderColor: '#3b82f6', |
|
backgroundColor: 'rgba(59, 130, 246, 0.1)', |
|
borderWidth: 2, |
|
tension: 0.3 |
|
}, |
|
{ |
|
label: '10Y Yield (%)', |
|
data: generateCorrelatedData(baseData, -0.7).map(v => v * -0.05 + 4), |
|
borderColor: '#8b5cf6', |
|
backgroundColor: 'rgba(139, 92, 246, 0.1)', |
|
borderWidth: 2, |
|
tension: 0.3, |
|
yAxisID: 'y1' |
|
} |
|
] |
|
}, |
|
options: { |
|
responsive: true, |
|
maintainAspectRatio: false, |
|
plugins: { |
|
title: { |
|
display: true, |
|
text: 'Scenario Timeline', |
|
font: { |
|
size: 16 |
|
} |
|
}, |
|
tooltip: { |
|
mode: 'index', |
|
intersect: false |
|
}, |
|
legend: { |
|
position: 'bottom' |
|
} |
|
}, |
|
scales: { |
|
x: { |
|
grid: { |
|
display: false |
|
} |
|
}, |
|
y: { |
|
type: 'linear', |
|
display: true, |
|
position: 'left', |
|
title: { |
|
display: true, |
|
text: 'Index Value' |
|
} |
|
}, |
|
y1: { |
|
type: 'linear', |
|
display: true, |
|
position: 'right', |
|
title: { |
|
display: true, |
|
text: 'Yield (%)' |
|
}, |
|
grid: { |
|
drawOnChartArea: false |
|
} |
|
} |
|
} |
|
} |
|
}); |
|
} |
|
|
|
|
|
document.querySelector('.toggle-switch input').addEventListener('change', function() { |
|
document.getElementById('advancedSettings').classList.toggle('hidden'); |
|
}); |
|
|
|
|
|
document.getElementById('generateBtn').addEventListener('click', function() { |
|
|
|
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...'; |
|
this.disabled = true; |
|
|
|
|
|
document.getElementById('generationProgress').classList.remove('hidden'); |
|
|
|
|
|
let progress = 0; |
|
const progressInterval = setInterval(() => { |
|
progress += Math.random() * 10; |
|
if (progress >= 100) { |
|
progress = 100; |
|
clearInterval(progressInterval); |
|
|
|
|
|
document.getElementById('resultsPreview').classList.remove('hidden'); |
|
|
|
|
|
renderPreviewChart(); |
|
renderMiniCharts(); |
|
|
|
|
|
this.innerHTML = '<i class="fas fa-bolt mr-2"></i> Generate Scenarios'; |
|
this.disabled = false; |
|
|
|
|
|
document.getElementById('generationProgress').classList.add('hidden'); |
|
} |
|
document.getElementById('progressFill').style.width = `${progress}%`; |
|
document.getElementById('progressPercent').textContent = `${Math.round(progress)}%`; |
|
}, 200); |
|
}); |
|
|
|
|
|
document.querySelectorAll('.sidebar-item').forEach(item => { |
|
item.addEventListener('click', function() { |
|
document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active')); |
|
this.classList.add('active'); |
|
|
|
|
|
document.getElementById('resultsPreview').classList.add('hidden'); |
|
document.getElementById('inspectorSection').classList.add('hidden'); |
|
document.getElementById('composerSection').classList.add('hidden'); |
|
document.getElementById('librarySection').classList.add('hidden'); |
|
|
|
|
|
const text = this.querySelector('span').textContent; |
|
if (text === 'Generator') { |
|
document.getElementById('resultsPreview').classList.remove('hidden'); |
|
} else if (text === 'Inspector') { |
|
document.getElementById('inspectorSection').classList.remove('hidden'); |
|
renderInspectorCharts(); |
|
} else if (text === 'Composer') { |
|
document.getElementById('composerSection').classList.remove('hidden'); |
|
renderComposerCharts(); |
|
} else if (text === 'Scenario Library') { |
|
document.getElementById('librarySection').classList.remove('hidden'); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
document.querySelectorAll('.scenario-card').forEach(card => { |
|
card.addEventListener('click', function() { |
|
document.getElementById('scenarioModal').classList.remove('hidden'); |
|
renderModalChart(); |
|
}); |
|
}); |
|
|
|
|
|
document.getElementById('closeModal').addEventListener('click', function() { |
|
document.getElementById('scenarioModal').classList.add('hidden'); |
|
}); |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
renderPreviewChart(); |
|
renderMiniCharts(); |
|
}); |
|
</script> |
|
<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> |
|
</html> |
