Hugging Face's logo

Spaces:
privateuserh
/
CTM-ResearchAgent
Running

App Files Community
privateuserh commited on
Commit
8edf952
·
verified ·
1 Parent(s): d565ccd

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -864
index.html DELETED
@@ -1,864 +0,0 @@
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>Crypto Treasury Management Research Agent</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
- <style>
10
- .gradient-bg {
11
- background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
12
- }
13
- .card-hover:hover {
14
- transform: translateY(-5px);
15
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
- }
17
- .fade-in {
18
- animation: fadeIn 0.5s ease-in-out;
19
- }
20
- @keyframes fadeIn {
21
- from { opacity: 0; transform: translateY(10px); }
22
- to { opacity: 1; transform: translateY(0); }
23
- }
24
- .typewriter {
25
- overflow: hidden;
26
- border-right: .15em solid #0ea5e9;
27
- white-space: pre-wrap;
28
- margin: 0 auto;
29
- letter-spacing: .15em;
30
- animation:
31
- typing 3.5s steps(40, end),
32
- blink-caret .75s step-end infinite;
33
- }
34
- @keyframes typing {
35
- from { width: 0 }
36
- to { width: 100% }
37
- }
38
- @keyframes blink-caret {
39
- from, to { border-color: transparent }
40
- 50% { border-color: #0ea5e9; }
41
- }
42
- .topic-badge {
43
- display: inline-flex;
44
- align-items: center;
45
- padding: 0.25rem 0.75rem;
46
- border-radius: 9999px;
47
- font-size: 0.875rem;
48
- font-weight: 500;
49
- }
50
- .topic-badge i {
51
- margin-right: 0.25rem;
52
- }
53
- .market-data-item {
54
- border-left: 4px solid #0ea5e9;
55
- padding-left: 1rem;
56
- margin-bottom: 1rem;
57
- }
58
- </style>
59
- </head>
60
- <body class="bg-gray-50 min-h-screen">
61
- <div class="gradient-bg text-white py-12 px-4 sm:px-6 lg:px-8">
62
- <div class="max-w-7xl mx-auto">
63
- <div class="text-center">
64
- <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl">
65
- <span class="block">Crypto Treasury Management</span>
66
- <span class="block text-blue-200">Research Agent</span>
67
- </h1>
68
- <p class="mt-3 max-w-md mx-auto text-lg text-blue-100 sm:text-xl md:mt-5 md:max-w-3xl">
69
- Advanced research tool for cryptocurrency treasury management with market data integration
70
- </p>
71
- </div>
72
- </div>
73
- </div>
74
-
75
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
76
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
77
- <!-- Research Topics Section -->
78
- <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
79
- <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
80
- <i class="fas fa-search mr-3 text-blue-500"></i>
81
- Research Topics
82
- </h2>
83
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
84
- <div class="bg-blue-50 rounded-lg p-4 transition-all duration-300 card-hover cursor-pointer" onclick="conductResearch('definition')">
85
- <div class="flex items-center mb-2">
86
- <div class="bg-blue-100 p-2 rounded-full mr-3">
87
- <i class="fas fa-book text-blue-600"></i>
88
- </div>
89
- <h3 class="font-semibold text-blue-800">Definition & Purpose</h3>
90
- </div>
91
- <p class="text-sm text-gray-600">Understand what a crypto treasury is and its core purpose</p>
92
- </div>
93
- <div class="bg-green-50 rounded-lg p-4 transition-all duration-300 card-hover cursor-pointer" onclick="conductResearch('strategies')">
94
- <div class="flex items-center mb-2">
95
- <div class="bg-green-100 p-2 rounded-full mr-3">
96
- <i class="fas fa-chess-knight text-green-600"></i>
97
- </div>
98
- <h3 class="font-semibold text-green-800">Management Strategies</h3>
99
- </div>
100
- <p class="text-sm text-gray-600">Explore common strategies for managing crypto holdings</p>
101
- </div>
102
- <div class="bg-purple-50 rounded-lg p-4 transition-all duration-300 card-hover cursor-pointer" onclick="conductResearch('security')">
103
- <div class="flex items-center mb-2">
104
- <div class="bg-purple-100 p-2 rounded-full mr-3">
105
- <i class="fas fa-shield-alt text-purple-600"></i>
106
- </div>
107
- <h3 class="font-semibold text-purple-800">Security & Custody</h3>
108
- </div>
109
- <p class="text-sm text-gray-600">Learn about protecting organizational crypto assets</p>
110
- </div>
111
- <div class="bg-yellow-50 rounded-lg p-4 transition-all duration-300 card-hover cursor-pointer" onclick="conductResearch('accounting')">
112
- <div class="flex items-center mb-2">
113
- <div class="bg-yellow-100 p-2 rounded-full mr-3">
114
- <i class="fas fa-calculator text-yellow-600"></i>
115
- </div>
116
- <h3 class="font-semibold text-yellow-800">Accounting & Reporting</h3>
117
- </div>
118
- <p class="text-sm text-gray-600">Understand accounting treatment and reporting requirements</p>
119
- </div>
120
- <div class="bg-red-50 rounded-lg p-4 transition-all duration-300 card-hover cursor-pointer" onclick="conductResearch('regulatory')">
121
- <div class="flex items-center mb-2">
122
- <div class="bg-red-100 p-2 rounded-full mr-3">
123
- <i class="fas fa-balance-scale text-red-600"></i>
124
- </div>
125
- <h3 class="font-semibold text-red-800">Regulatory Landscape</h3>
126
- </div>
127
- <p class="text-sm text-gray-600">Explore the current regulatory environment</p>
128
- </div>
129
- <div class="bg-indigo-50 rounded-lg p-4 transition-all duration-300 card-hover cursor-pointer" onclick="conductResearch('risk')">
130
- <div class="flex items-center mb-2">
131
- <div class="bg-indigo-100 p-2 rounded-full mr-3">
132
- <i class="fas fa-exclamation-triangle text-indigo-600"></i>
133
- </div>
134
- <h3 class="font-semibold text-indigo-800">Risk Management</h3>
135
- </div>
136
- <p class="text-sm text-gray-600">Identify key risks and mitigation strategies</p>
137
- </div>
138
- <div class="bg-pink-50 rounded-lg p-4 transition-all duration-300 card-hover cursor-pointer" onclick="conductResearch('operational')">
139
- <div class="flex items-center mb-2">
140
- <div class="bg-pink-100 p-2 rounded-full mr-3">
141
- <i class="fas fa-cogs text-pink-600"></i>
142
- </div>
143
- <h3 class="font-semibold text-pink-800">Operational Aspects</h3>
144
- </div>
145
- <p class="text-sm text-gray-600">Practical aspects of managing a crypto treasury</p>
146
- </div>
147
- <div class="bg-teal-50 rounded-lg p-4 transition-all duration-300 card-hover cursor-pointer" onclick="conductResearch('trends')">
148
- <div class="flex items-center mb-2">
149
- <div class="bg-teal-100 p-2 rounded-full mr-3">
150
- <i class="fas fa-chart-line text-teal-600"></i>
151
- </div>
152
- <h3 class="font-semibold text-teal-800">Market Trends & Cases</h3>
153
- </div>
154
- <p class="text-sm text-gray-600">Current trends and company case studies</p>
155
- </div>
156
- </div>
157
-
158
- <!-- Additional Input Fields -->
159
- <div class="mt-6">
160
- <h3 class="text-lg font-semibold text-gray-800 mb-3">Advanced Research Parameters</h3>
161
- <div class="space-y-4">
162
- <div>
163
- <label for="timeframe" class="block text-sm font-medium text-gray-700 mb-1">Timeframe</label>
164
- <select id="timeframe" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
165
- <option value="current">Current (last 6 months)</option>
166
- <option value="1y">1 Year</option>
167
- <option value="3y">3 Years</option>
168
- <option value="all">All Time</option>
169
- </select>
170
- </div>
171
- <div>
172
- <label for="jurisdiction" class="block text-sm font-medium text-gray-700 mb-1">Jurisdiction</label>
173
- <select id="jurisdiction" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
174
- <option value="global">Global</option>
175
- <option value="us">United States</option>
176
- <option value="eu">European Union</option>
177
- <option value="uk">United Kingdom</option>
178
- <option value="asia">Asia</option>
179
- <option value="other">Other</option>
180
- </select>
181
- </div>
182
- <div>
183
- <label for="assets" class="block text-sm font-medium text-gray-700 mb-1">Assets to Include</label>
184
- <div class="flex flex-wrap gap-2">
185
- <div class="flex items-center">
186
- <input type="checkbox" id="btc" name="assets" value="btc" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
187
- <label for="btc" class="ml-2 text-sm text-gray-700">Bitcoin</label>
188
- </div>
189
- <div class="flex items-center">
190
- <input type="checkbox" id="eth" name="assets" value="eth" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
191
- <label for="eth" class="ml-2 text-sm text-gray-700">Ethereum</label>
192
- </div>
193
- <div class="flex items-center">
194
- <input type="checkbox" id="stablecoins" name="assets" value="stablecoins" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
195
- <label for="stablecoins" class="ml-2 text-sm text-gray-700">Stablecoins</label>
196
- </div>
197
- <div class="flex items-center">
198
- <input type="checkbox" id="other" name="assets" value="other" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
199
- <label for="other" class="ml-2 text-sm text-gray-700">Other</label>
200
- </div>
201
- </div>
202
- </div>
203
- </div>
204
- </div>
205
- </div>
206
-
207
- <!-- Research Results Section -->
208
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
209
- <div class="p-6">
210
- <div class="flex justify-between items-center mb-6">
211
- <h2 class="text-2xl font-bold text-gray-800 flex items-center">
212
- <i class="fas fa-file-alt mr-3 text-blue-500"></i>
213
- Research Results
214
- </h2>
215
- <div id="currentTopicBadge" class="hidden">
216
- <span class="topic-badge bg-blue-100 text-blue-800">
217
- <i class="fas fa-tag"></i>
218
- <span id="currentTopicText"></span>
219
- </span>
220
- </div>
221
- </div>
222
- <div class="mb-6">
223
- <div class="relative">
224
- <input type="text" id="customQuery" placeholder="Ask a specific research question..."
225
- class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
226
- <button onclick="conductCustomResearch()"
227
- class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-1 rounded-lg transition-colors">
228
- <i class="fas fa-paper-plane"></i>
229
- </button>
230
- </div>
231
- </div>
232
- <div id="researchOutput" class="bg-gray-50 rounded-lg p-4 min-h-64">
233
- <div class="text-center py-12 text-gray-400" id="defaultOutput">
234
- <i class="fas fa-search fa-3x mb-4"></i>
235
- <p class="text-lg">Select a research topic or ask a question to begin</p>
236
- </div>
237
- </div>
238
- </div>
239
- </div>
240
- </div>
241
-
242
- <!-- Market Data Section -->
243
- <div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden">
244
- <div class="p-6">
245
- <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
246
- <i class="fas fa-chart-bar mr-3 text-blue-500"></i>
247
- Market Data Integration
248
- </h2>
249
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
250
- <div>
251
- <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
252
- <i class="fas fa-coins mr-2 text-yellow-500"></i>
253
- Cryptocurrency Rates
254
- </h3>
255
- <div id="cryptoRates" class="space-y-3">
256
- <div class="market-data-item">
257
- <p class="text-sm text-gray-500">Loading BTC/USD...</p>
258
- </div>
259
- <div class="market-data-item">
260
- <p class="text-sm text-gray-500">Loading BCH/USD...</p>
261
- </div>
262
- <div class="market-data-item">
263
- <p class="text-sm text-gray-500">Loading XLM/USD...</p>
264
- </div>
265
- </div>
266
- <button onclick="fetchCryptoRates()" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
267
- <i class="fas fa-sync-alt mr-2"></i> Refresh Rates
268
- </button>
269
- </div>
270
- <div>
271
- <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
272
- <i class="fas fa-globe mr-2 text-green-500"></i>
273
- Forex & Commodities
274
- </h3>
275
- <div id="forexCommodities" class="space-y-3">
276
- <div class="market-data-item">
277
- <p class="text-sm text-gray-500">Loading USD/CNY...</p>
278
- </div>
279
- <div class="market-data-item">
280
- <p class="text-sm text-gray-500">Loading Cotton Forecast...</p>
281
- </div>
282
- <div class="market-data-item">
283
- <p class="text-sm text-gray-500">Loading Baltic Dry Index...</p>
284
- </div>
285
- </div>
286
- <button onclick="fetchForexCommodities()" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
287
- <i class="fas fa-sync-alt mr-2"></i> Refresh Data
288
- </button>
289
- </div>
290
- </div>
291
- <div class="mt-6 bg-blue-50 rounded-lg p-4">
292
- <div class="flex items-start">
293
- <div class="flex-shrink-0">
294
- <i class="fas fa-info-circle text-blue-500 mt-1"></i>
295
- </div>
296
- <div class="ml-3">
297
- <h3 class="text-sm font-medium text-blue-800">Data Source Information</h3>
298
- <div class="mt-2 text-sm text-blue-700">
299
- <p>Market data is powered by TradingEconomics API. This integration provides real-time cryptocurrency rates, forex data, and commodity forecasts that may impact treasury management decisions.</p>
300
- </div>
301
- </div>
302
- </div>
303
- </div>
304
- </div>
305
- </div>
306
-
307
- <!-- Agent Status -->
308
- <div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden">
309
- <div class="p-6">
310
- <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
311
- <i class="fas fa-robot mr-3 text-blue-500"></i>
312
- Agent Status
313
- </h2>
314
- <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between">
315
- <div class="flex items-center mb-4 sm:mb-0">
316
- <div class="relative">
317
- <div class="h-3 w-3 rounded-full bg-green-500 animate-pulse absolute -left-5 top-1/2 transform -translate-y-1/2"></div>
318
- </div>
319
- <span class="ml-2 text-gray-700">Research Agent: <span class="font-semibold">Active</span></span>
320
- </div>
321
- <button onclick="initializeAgent()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
322
- <i class="fas fa-sync-alt mr-2"></i> Reinitialize Agent
323
- </button>
324
- </div>
325
- <div class="mt-4 bg-blue-50 rounded-lg p-4">
326
- <div class="flex items-start">
327
- <div class="flex-shrink-0">
328
- <i class="fas fa-info-circle text-blue-500 mt-1"></i>
329
- </div>
330
- <div class="ml-3">
331
- <h3 class="text-sm font-medium text-blue-800">About this Agent</h3>
332
- <div class="mt-2 text-sm text-blue-700">
333
- <p>This agent connects to a backend API to provide comprehensive cryptocurrency treasury management research. It can analyze data based on timeframe, jurisdiction, and asset types. Now with integrated market data from TradingEconomics.</p>
334
- </div>
335
- </div>
336
- </div>
337
- </div>
338
- </div>
339
- </div>
340
- </div>
341
-
342
- <script>
343
- // Backend API URL
344
- const BACKEND_API_URL = 'https://privateuserh-ctmnext.hf.space/api/process';
345
- const TRADING_ECONOMICS_API_URL = 'https://api.tradingeconomics.com';
346
- const TE_API_KEY = 'ae20da0a312d47a:ftdfzvk16ivjv7x';
347
-
348
- // Initialize the agent
349
- class CryptoTreasuryResearchAgent {
350
- constructor() {
351
- console.log("Crypto Treasury Research Agent initialized.");
352
- this.initialized = true;
353
- this.currentTopic = null;
354
- }
355
-
356
- async callBackendAPI(payload) {
357
- try {
358
- const response = await fetch(BACKEND_API_URL, {
359
- method: 'POST',
360
- headers: {
361
- 'Content-Type': 'application/json',
362
- },
363
- body: JSON.stringify(payload)
364
- });
365
-
366
- if (!response.ok) {
367
- throw new Error(`HTTP error! status: ${response.status}`);
368
- }
369
-
370
- return await response.json();
371
- } catch (error) {
372
- console.error('Error calling backend API:', error);
373
- return { error: true, message: 'Failed to connect to research service' };
374
- }
375
- }
376
-
377
- async callTradingEconomicsAPI(endpoint, params = {}) {
378
- try {
379
- const queryParams = new URLSearchParams({
380
- ...params,
381
- c: TE_API_KEY
382
- });
383
-
384
- const response = await fetch(`${TRADING_ECONOMICS_API_URL}/${endpoint}?${queryParams}`, {
385
- method: 'GET',
386
- headers: {
387
- 'Accept': 'application/json'
388
- }
389
- });
390
-
391
- if (!response.ok) {
392
- throw new Error(`HTTP error! status: ${response.status}`);
393
- }
394
-
395
- return await response.json();
396
- } catch (error) {
397
- console.error('Error calling TradingEconomics API:', error);
398
- return { error: true, message: 'Failed to fetch market data' };
399
- }
400
- }
401
-
402
- async conduct_comprehensive_research(topic, customQuery = null) {
403
- this.currentTopic = topic;
404
- const timeframe = document.getElementById('timeframe').value;
405
- const jurisdiction = document.getElementById('jurisdiction').value;
406
-
407
- // Get selected assets
408
- const assetCheckboxes = document.querySelectorAll('input[name="assets"]:checked');
409
- const assets = Array.from(assetCheckboxes).map(cb => cb.value);
410
-
411
- const payload = {
412
- topic: topic,
413
- query: customQuery || topic,
414
- timeframe: timeframe,
415
- jurisdiction: jurisdiction,
416
- assets: assets
417
- };
418
-
419
- console.log("Sending research request:", payload);
420
-
421
- const result = await this.callBackendAPI(payload);
422
-
423
- if (result.error) {
424
- return result.message || 'An error occurred during research';
425
- }
426
-
427
- return result.data || 'Research completed but no data returned';
428
- }
429
-
430
- async getCryptoRates() {
431
- const symbols = ['BTCUSD:CUR', 'BCHUSD:CUR', 'XLMUSD:CUR'];
432
- const result = await this.callTradingEconomicsAPI('markets/symbol', { symbols: symbols.join(',') });
433
-
434
- if (result.error) {
435
- return { error: true, message: result.message };
436
- }
437
-
438
- return result;
439
- }
440
-
441
- async getForexCommodities() {
442
- const forexResult = await this.callTradingEconomicsAPI('markets/symbol', { symbols: 'USDCNY:CUR' });
443
- const cottonResult = await this.callTradingEconomicsAPI('markets/forecast', { symbol: 'COTT:COM' });
444
- const balticResult = await this.callTradingEconomicsAPI('markets/forecast', { symbol: 'BALT:COM' });
445
-
446
- return {
447
- forex: forexResult.error ? { error: true, message: forexResult.message } : forexResult[0],
448
- cotton: cottonResult.error ? { error: true, message: cottonResult.message } : cottonResult[0],
449
- baltic: balticResult.error ? { error: true, message: balticResult.message } : balticResult[0]
450
- };
451
- }
452
- }
453
-
454
- // Global agent instance
455
- let researchAgent = new CryptoTreasuryResearchAgent();
456
-
457
- // Initialize or reinitialize the agent
458
- function initializeAgent() {
459
- researchAgent = new CryptoTreasuryResearchAgent();
460
- showNotification("Agent reinitialized successfully", "success");
461
- // Refresh market data on reinitialization
462
- fetchCryptoRates();
463
- fetchForexCommodities();
464
- }
465
-
466
- // Fetch cryptocurrency rates
467
- async function fetchCryptoRates() {
468
- const cryptoRatesElement = document.getElementById('cryptoRates');
469
- cryptoRatesElement.innerHTML = `
470
- <div class="flex items-center justify-center py-4">
471
- <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-blue-500 mr-2"></div>
472
- <span class="text-gray-600">Loading cryptocurrency rates...</span>
473
- </div>
474
- `;
475
-
476
- try {
477
- const result = await researchAgent.getCryptoRates();
478
-
479
- if (result.error) {
480
- cryptoRatesElement.innerHTML = `
481
- <div class="market-data-item">
482
- <p class="text-sm text-red-500">Error: ${result.message}</p>
483
- </div>
484
- `;
485
- return;
486
- }
487
-
488
- let html = '';
489
- result.forEach(item => {
490
- const symbol = item.symbol.replace(':CUR', '');
491
- const changeClass = item.changepct >= 0 ? 'text-green-600' : 'text-red-600';
492
- const changeIcon = item.changepct >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';
493
-
494
- html += `
495
- <div class="market-data-item">
496
- <div class="flex justify-between items-center">
497
- <span class="font-medium">${symbol}</span>
498
- <span class="text-gray-700">${item.price.toFixed(2)}</span>
499
- </div>
500
- <div class="flex justify-between text-xs mt-1">
501
- <span class="text-gray-500">${new Date(item.lastUpdate).toLocaleString()}</span>
502
- <span class="${changeClass}">
503
- <i class="fas ${changeIcon} mr-1"></i>
504
- ${Math.abs(item.changepct)}%
505
- </span>
506
- </div>
507
- </div>
508
- `;
509
- });
510
-
511
- cryptoRatesElement.innerHTML = html;
512
- showNotification("Cryptocurrency rates updated", "success");
513
- } catch (error) {
514
- cryptoRatesElement.innerHTML = `
515
- <div class="market-data-item">
516
- <p class="text-sm text-red-500">Error fetching cryptocurrency rates: ${error.message}</p>
517
- </div>
518
- `;
519
- showNotification("Failed to fetch cryptocurrency rates", "error");
520
- }
521
- }
522
-
523
- // Fetch forex and commodities data
524
- async function fetchForexCommodities() {
525
- const forexCommoditiesElement = document.getElementById('forexCommodities');
526
- forexCommoditiesElement.innerHTML = `
527
- <div class="flex items-center justify-center py-4">
528
- <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-blue-500 mr-2"></div>
529
- <span class="text-gray-600">Loading forex & commodities data...</span>
530
- </div>
531
- `;
532
-
533
- try {
534
- const { forex, cotton, baltic } = await researchAgent.getForexCommodities();
535
-
536
- let html = '';
537
-
538
- // Forex data
539
- if (forex.error) {
540
- html += `
541
- <div class="market-data-item">
542
- <p class="text-sm text-red-500">Error loading USD/CNY: ${forex.message}</p>
543
- </div>
544
- `;
545
- } else {
546
- const changeClass = forex.changepct >= 0 ? 'text-green-600' : 'text-red-600';
547
- const changeIcon = forex.changepct >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';
548
-
549
- html += `
550
- <div class="market-data-item">
551
- <div class="flex justify-between items-center">
552
- <span class="font-medium">USD/CNY</span>
553
- <span class="text-gray-700">${forex.price.toFixed(4)}</span>
554
- </div>
555
- <div class="flex justify-between text-xs mt-1">
556
- <span class="text-gray-500">${new Date(forex.lastUpdate).toLocaleString()}</span>
557
- <span class="${changeClass}">
558
- <i class="fas ${changeIcon} mr-1"></i>
559
- ${Math.abs(forex.changepct)}%
560
- </span>
561
- </div>
562
- </div>
563
- `;
564
- }
565
-
566
- // Cotton forecast
567
- if (cotton.error) {
568
- html += `
569
- <div class="market-data-item">
570
- <p class="text-sm text-red-500">Error loading Cotton forecast: ${cotton.message}</p>
571
- </div>
572
- `;
573
- } else {
574
- html += `
575
- <div class="market-data-item">
576
- <div class="flex justify-between items-center">
577
- <span class="font-medium">Cotton Forecast</span>
578
- <span class="text-gray-700">${cotton.forecast.toFixed(2)}</span>
579
- </div>
580
- <div class="text-xs text-gray-500 mt-1">
581
- ${new Date(cotton.lastUpdate).toLocaleDateString()}
582
- </div>
583
- </div>
584
- `;
585
- }
586
-
587
- // Baltic Dry Index
588
- if (baltic.error) {
589
- html += `
590
- <div class="market-data-item">
591
- <p class="text-sm text-red-500">Error loading Baltic Dry Index: ${baltic.message}</p>
592
- </div>
593
- `;
594
- } else {
595
- html += `
596
- <div class="market-data-item">
597
- <div class="flex justify-between items-center">
598
- <span class="font-medium">Baltic Dry Index</span>
599
- <span class="text-gray-700">${baltic.forecast.toFixed(2)}</span>
600
- </div>
601
- <div class="text-xs text-gray-500 mt-1">
602
- ${new Date(baltic.lastUpdate).toLocaleDateString()}
603
- </div>
604
- </div>
605
- `;
606
- }
607
-
608
- forexCommoditiesElement.innerHTML = html;
609
- showNotification("Forex & commodities data updated", "success");
610
- } catch (error) {
611
- forexCommoditiesElement.innerHTML = `
612
- <div class="market-data-item">
613
- <p class="text-sm text-red-500">Error fetching forex & commodities data: ${error.message}</p>
614
- </div>
615
- `;
616
- showNotification("Failed to fetch forex & commodities data", "error");
617
- }
618
- }
619
-
620
- // Update the current topic display
621
- function updateCurrentTopicDisplay(topic) {
622
- const topicBadge = document.getElementById('currentTopicBadge');
623
- const topicText = document.getElementById('currentTopicText');
624
-
625
- if (topic === 'custom') {
626
- const query = document.getElementById('customQuery').value.trim();
627
- topicText.textContent = `Custom: "${query}"`;
628
- } else {
629
- topicText.textContent = getTopicName(topic);
630
- }
631
-
632
- topicBadge.classList.remove('hidden');
633
- }
634
-
635
- // Conduct research based on topic
636
- async function conductResearch(topic) {
637
- const outputElement = document.getElementById('researchOutput');
638
- const defaultOutput = document.getElementById('defaultOutput');
639
-
640
- // Hide default message
641
- if (defaultOutput) defaultOutput.style.display = 'none';
642
-
643
- // Update current topic display
644
- updateCurrentTopicDisplay(topic);
645
-
646
- // Show loading state
647
- outputElement.innerHTML = `
648
- <div class="flex flex-col items-center justify-center py-12">
649
- <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
650
- <p class="text-gray-600">Researching ${getTopicName(topic)}...</p>
651
- </div>
652
- `;
653
-
654
- try {
655
- const result = await researchAgent.conduct_comprehensive_research(topic);
656
-
657
- outputElement.innerHTML = `
658
- <div class="fade-in">
659
- <div class="flex items-center mb-4">
660
- <div class="bg-blue-100 p-2 rounded-full mr-3">
661
- <i class="fas ${getTopicIcon(topic)} text-blue-600"></i>
662
- </div>
663
- <h3 class="text-lg font-semibold text-gray-800">${getTopicName(topic)}</h3>
664
- </div>
665
- <div class="bg-white p-4 rounded-lg border border-gray-200">
666
- <p class="text-gray-700">${result}</p>
667
- </div>
668
- <div class="mt-4 text-sm text-gray-500 flex items-center">
669
- <i class="fas fa-clock mr-2"></i>
670
- Research completed at ${new Date().toLocaleTimeString()}
671
- </div>
672
- <div class="mt-3 text-xs text-gray-400">
673
- <p>Parameters: ${document.getElementById('timeframe').value} timeframe,
674
- ${document.getElementById('jurisdiction').value} jurisdiction</p>
675
- </div>
676
- </div>
677
- `;
678
-
679
- showNotification(`Research on ${getTopicName(topic)} completed`, "success");
680
- } catch (error) {
681
- outputElement.innerHTML = `
682
- <div class="fade-in">
683
- <div class="flex items-center mb-4">
684
- <div class="bg-red-100 p-2 rounded-full mr-3">
685
- <i class="fas fa-exclamation-triangle text-red-600"></i>
686
- </div>
687
- <h3 class="text-lg font-semibold text-gray-800">Research Error</h3>
688
- </div>
689
- <div class="bg-white p-4 rounded-lg border border-gray-200">
690
- <p class="text-gray-700">Failed to complete research: ${error.message}</p>
691
- </div>
692
- </div>
693
- `;
694
- showNotification("Research failed", "error");
695
- }
696
- }
697
-
698
- // Conduct custom research from input
699
- async function conductCustomResearch() {
700
- const query = document.getElementById('customQuery').value.trim();
701
- if (!query) {
702
- showNotification("Please enter a research question", "error");
703
- return;
704
- }
705
-
706
- const outputElement = document.getElementById('researchOutput');
707
- const defaultOutput = document.getElementById('defaultOutput');
708
-
709
- // Hide default message
710
- if (defaultOutput) defaultOutput.style.display = 'none';
711
-
712
- // Update current topic display
713
- updateCurrentTopicDisplay('custom');
714
-
715
- // Show loading state
716
- outputElement.innerHTML = `
717
- <div class="flex flex-col items-center justify-center py-12">
718
- <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
719
- <p class="text-gray-600">Processing your query: "${query}"</p>
720
- </div>
721
- `;
722
-
723
- try {
724
- const result = await researchAgent.conduct_comprehensive_research('custom', query);
725
-
726
- outputElement.innerHTML = `
727
- <div class="fade-in">
728
- <div class="flex items-center mb-4">
729
- <div class="bg-blue-100 p-2 rounded-full mr-3">
730
- <i class="fas fa-search text-blue-600"></i>
731
- </div>
732
- <h3 class="text-lg font-semibold text-gray-800">Results for: "${query}"</h3>
733
- </div>
734
- <div class="bg-white p-4 rounded-lg border border-gray-200">
735
- <p class="text-gray-700">${result}</p>
736
- </div>
737
- <div class="mt-4 text-sm text-gray-500 flex items-center">
738
- <i class="fas fa-clock mr-2"></i>
739
- Research completed at ${new Date().toLocaleTimeString()}
740
- </div>
741
- <div class="mt-3 text-xs text-gray-400">
742
- <p>Parameters: ${document.getElementById('timeframe').value} timeframe,
743
- ${document.getElementById('jurisdiction').value} jurisdiction</p>
744
- </div>
745
- </div>
746
- `;
747
-
748
- showNotification(`Research on your query completed`, "success");
749
- } catch (error) {
750
- outputElement.innerHTML = `
751
- <div class="fade-in">
752
- <div class="flex items-center mb-4">
753
- <div class="bg-red-100 p-2 rounded-full mr-3">
754
- <i class="fas fa-exclamation-triangle text-red-600"></i>
755
- </div>
756
- <h3 class="text-lg font-semibold text-gray-800">Research Error</h3>
757
- </div>
758
- <div class="bg-white p-4 rounded-lg border border-gray-200">
759
- <p class="text-gray-700">Failed to complete research: ${error.message}</p>
760
- </div>
761
- </div>
762
- `;
763
- showNotification("Research failed", "error");
764
- }
765
- }
766
-
767
- // Helper function to get topic name
768
- function getTopicName(topic) {
769
- const topicMap = {
770
- 'definition': 'Definition & Purpose',
771
- 'strategies': 'Management Strategies',
772
- 'security': 'Security & Custody',
773
- 'accounting': 'Accounting & Reporting',
774
- 'regulatory': 'Regulatory Landscape',
775
- 'risk': 'Risk Management',
776
- 'operational': 'Operational Considerations',
777
- 'trends': 'Market Trends & Case Studies',
778
- 'custom': 'Custom Research'
779
- };
780
- return topicMap[topic] || 'Research Results';
781
- }
782
-
783
- // Helper function to get topic icon
784
- function getTopicIcon(topic) {
785
- const iconMap = {
786
- 'definition': 'fa-book',
787
- 'strategies': 'fa-chess-knight',
788
- 'security': 'fa-shield-alt',
789
- 'accounting': 'fa-calculator',
790
- 'regulatory': 'fa-balance-scale',
791
- 'risk': 'fa-exclamation-triangle',
792
- 'operational': 'fa-cogs',
793
- 'trends': 'fa-chart-line',
794
- 'custom': 'fa-search'
795
- };
796
- return iconMap[topic] || 'fa-file-alt';
797
- }
798
-
799
- // Show notification
800
- function showNotification(message, type) {
801
- const notification = document.createElement('div');
802
- notification.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white flex items-center ${
803
- type === 'success' ? 'bg-green-500' : 'bg-red-500'
804
- }`;
805
- notification.innerHTML = `
806
- <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} mr-2"></i>
807
- ${message}
808
- `;
809
-
810
- document.body.appendChild(notification);
811
-
812
- setTimeout(() => {
813
- notification.classList.add('opacity-0', 'transition-opacity', 'duration-500');
814
- setTimeout(() => notification.remove(), 500);
815
- }, 3000);
816
- }
817
-
818
- // Initialize on load
819
- document.addEventListener('DOMContentLoaded', () => {
820
- initializeAgent();
821
- });
822
- </script>
823
-
824
- <script>
825
- const workerUrl = "https://ctmresearchagent.aiagents.workers.dev/"; // Replace with your Cloudflare Worker URL
826
-
827
- async function handleSubmit(event) {
828
- event.preventDefault();
829
- const query = document.getElementById("researchQuery").value;
830
- const result = document.getElementById("resultDisplay").innerText; // Assuming result is displayed here
831
-
832
- if (query && result) {
833
- await fetch(`${workerUrl}/api/research`, {
834
- method: "POST",
835
- headers: { "Content-Type": "application/json" },
836
- body: JSON.stringify({ query, result }),
837
- });
838
- }
839
- }
840
-
841
- async function loadResearchLogs() {
842
- const response = await fetch(`${workerUrl}/api/research`);
843
- const logs = await response.json();
844
- const logsContainer = document.getElementById("past-research-container"); // Add a container for logs in your HTML
845
- logsContainer.innerHTML = logs
846
- .map(
847
- (log) => `
848
- <div>
849
- <p><b>Query:</b> ${log.query}</p>
850
- <p><b>Result:</b> ${log.result}</p>
851
- <p><small>${new Date(log.timestamp).toLocaleString()}</small></p>
852
- </div>
853
- <hr>
854
- `
855
- )
856
- .join("");
857
- }
858
-
859
- document.getElementById("submitButton").addEventListener("click", handleSubmit);
860
- window.addEventListener("load", loadResearchLogs);
861
- </script>
862
- <div id="past-research-container"></div>
863
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/ctm-vbeta1-03" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
864
- </html>