Hugging Face's logo

Spaces:
krishgokul92
/
unreal-performance-analyzer
Running

App Files Community
krishgokul92 commited on
Commit
54c082a
·
verified ·
1 Parent(s): 0638fc5

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +782 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Unreal Performance Analyzer
3
- emoji: 🐠
4
- colorFrom: purple
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: unreal-performance-analyzer
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
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,782 @@
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>Unreal Engine 5 Performance Analyzer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
10
+ <style>
11
+ @keyframes pulse {
12
+ 0%, 100% { opacity: 1; }
13
+ 50% { opacity: 0.5; }
14
+ }
15
+ .pulse {
16
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
17
+ }
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
20
+ }
21
+ .metric-card {
22
+ backdrop-filter: blur(10px);
23
+ background: rgba(255, 255, 255, 0.05);
24
+ border: 1px solid rgba(255, 255, 255, 0.1);
25
+ transition: all 0.3s ease;
26
+ }
27
+ .metric-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
30
+ }
31
+ .glow {
32
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
33
+ }
34
+ .chart-container {
35
+ background: rgba(15, 23, 42, 0.7);
36
+ border-radius: 0.5rem;
37
+ }
38
+ .connection-status {
39
+ width: 10px;
40
+ height: 10px;
41
+ border-radius: 50%;
42
+ }
43
+ .connected {
44
+ background-color: #10b981;
45
+ box-shadow: 0 0 10px #10b981;
46
+ }
47
+ .disconnected {
48
+ background-color: #ef4444;
49
+ }
50
+ .connecting {
51
+ background-color: #f59e0b;
52
+ animation: pulse 1.5s infinite;
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="gradient-bg min-h-screen text-gray-100 font-sans">
57
+ <div class="container mx-auto px-4 py-8">
58
+ <!-- Header -->
59
+ <header class="flex justify-between items-center mb-8">
60
+ <div class="flex items-center space-x-4">
61
+ <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
62
+ <i class="fas fa-gamepad text-white text-2xl"></i>
63
+ </div>
64
+ <div>
65
+ <h1 class="text-2xl font-bold">Unreal Engine 5 Performance Analyzer</h1>
66
+ <div class="flex items-center space-x-2">
67
+ <div id="connectionStatus" class="connection-status disconnected"></div>
68
+ <span id="connectionText" class="text-sm">Disconnected</span>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ <div class="flex space-x-4">
73
+ <button id="connectBtn" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition-colors flex items-center space-x-2">
74
+ <i class="fas fa-plug"></i>
75
+ <span>Connect</span>
76
+ </button>
77
+ <button id="settingsBtn" class="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium transition-colors">
78
+ <i class="fas fa-cog"></i>
79
+ </button>
80
+ </div>
81
+ </header>
82
+
83
+ <!-- Main Content -->
84
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
85
+ <!-- Control Panel -->
86
+ <div class="lg:col-span-1 space-y-6">
87
+ <div class="metric-card rounded-xl p-6">
88
+ <h2 class="text-lg font-semibold mb-4">Session Controls</h2>
89
+ <div class="space-y-4">
90
+ <div class="flex justify-between items-center">
91
+ <span>Profiling Status:</span>
92
+ <span id="profilingStatus" class="px-3 py-1 rounded-full text-sm bg-gray-700">Inactive</span>
93
+ </div>
94
+ <div class="flex space-x-4">
95
+ <button id="startBtn" class="flex-1 py-3 bg-green-600 hover:bg-green-700 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center space-x-2" disabled>
96
+ <i class="fas fa-play"></i>
97
+ <span>Start Profiling</span>
98
+ </button>
99
+ <button id="stopBtn" class="flex-1 py-3 bg-red-600 hover:bg-red-700 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center space-x-2" disabled>
100
+ <i class="fas fa-stop"></i>
101
+ <span>Stop Profiling</span>
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <div class="metric-card rounded-xl p-6">
108
+ <h2 class="text-lg font-semibold mb-4">Session Information</h2>
109
+ <div class="space-y-3">
110
+ <div class="flex justify-between">
111
+ <span class="text-gray-400">Duration:</span>
112
+ <span id="sessionDuration">00:00:00</span>
113
+ </div>
114
+ <div class="flex justify-between">
115
+ <span class="text-gray-400">Data Points:</span>
116
+ <span id="dataPoints">0</span>
117
+ </div>
118
+ <div class="flex justify-between">
119
+ <span class="text-gray-400">Last Update:</span>
120
+ <span id="lastUpdate">Never</span>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <div class="metric-card rounded-xl p-6">
126
+ <h2 class="text-lg font-semibold mb-4">Export Data</h2>
127
+ <div class="space-y-4">
128
+ <button id="exportCSV" class="w-full py-2 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium transition-colors flex items-center justify-center space-x-2" disabled>
129
+ <i class="fas fa-file-csv"></i>
130
+ <span>Export to CSV</span>
131
+ </button>
132
+ <button id="exportJSON" class="w-full py-2 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium transition-colors flex items-center justify-center space-x-2" disabled>
133
+ <i class="fas fa-file-code"></i>
134
+ <span>Export to JSON</span>
135
+ </button>
136
+ <button id="saveReport" class="w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition-colors flex items-center justify-center space-x-2" disabled>
137
+ <i class="fas fa-file-pdf"></i>
138
+ <span>Generate PDF Report</span>
139
+ </button>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Metrics Overview -->
145
+ <div class="lg:col-span-2 space-y-6">
146
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
147
+ <div class="metric-card rounded-xl p-4">
148
+ <div class="flex items-center justify-between">
149
+ <div>
150
+ <p class="text-sm text-gray-400">FPS</p>
151
+ <h3 id="currentFPS" class="text-2xl font-bold">--</h3>
152
+ </div>
153
+ <div class="w-12 h-12 bg-blue-900 bg-opacity-30 rounded-full flex items-center justify-center">
154
+ <i class="fas fa-tachometer-alt text-blue-400"></i>
155
+ </div>
156
+ </div>
157
+ <div class="mt-2">
158
+ <p class="text-xs text-gray-400">Avg: <span id="avgFPS">--</span> | Min: <span id="minFPS">--</span></p>
159
+ </div>
160
+ </div>
161
+ <div class="metric-card rounded-xl p-4">
162
+ <div class="flex items-center justify-between">
163
+ <div>
164
+ <p class="text-sm text-gray-400">Draw Calls</p>
165
+ <h3 id="currentDrawCalls" class="text-2xl font-bold">--</h3>
166
+ </div>
167
+ <div class="w-12 h-12 bg-purple-900 bg-opacity-30 rounded-full flex items-center justify-center">
168
+ <i class="fas fa-drafting-compass text-purple-400"></i>
169
+ </div>
170
+ </div>
171
+ <div class="mt-2">
172
+ <p class="text-xs text-gray-400">Avg: <span id="avgDrawCalls">--</span> | Max: <span id="maxDrawCalls">--</span></p>
173
+ </div>
174
+ </div>
175
+ <div class="metric-card rounded-xl p-4">
176
+ <div class="flex items-center justify-between">
177
+ <div>
178
+ <p class="text-sm text-gray-400">Frame Time</p>
179
+ <h3 id="currentFrameTime" class="text-2xl font-bold">--</h3>
180
+ </div>
181
+ <div class="w-12 h-12 bg-green-900 bg-opacity-30 rounded-full flex items-center justify-center">
182
+ <i class="fas fa-stopwatch text-green-400"></i>
183
+ </div>
184
+ </div>
185
+ <div class="mt-2">
186
+ <p class="text-xs text-gray-400">Avg: <span id="avgFrameTime">--</span>ms | Max: <span id="maxFrameTime">--</span>ms</p>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Charts -->
192
+ <div class="metric-card rounded-xl p-6">
193
+ <div class="flex justify-between items-center mb-4">
194
+ <h2 class="text-lg font-semibold">Performance Metrics</h2>
195
+ <div class="flex space-x-2">
196
+ <button id="pauseCharts" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm transition-colors">
197
+ <i class="fas fa-pause"></i> Pause
198
+ </button>
199
+ <button id="resetZoom" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm transition-colors">
200
+ <i class="fas fa-search-minus"></i> Reset Zoom
201
+ </button>
202
+ </div>
203
+ </div>
204
+ <div class="chart-container p-4">
205
+ <canvas id="performanceChart"></canvas>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Additional Metrics -->
210
+ <div class="metric-card rounded-xl p-6">
211
+ <h2 class="text-lg font-semibold mb-4">System Metrics</h2>
212
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
213
+ <div>
214
+ <h3 class="text-sm font-medium text-gray-400 mb-2">CPU Usage</h3>
215
+ <div class="flex items-center space-x-2">
216
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
217
+ <div id="cpuUsageBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
218
+ </div>
219
+ <span id="cpuUsageText" class="text-sm">0%</span>
220
+ </div>
221
+ </div>
222
+ <div>
223
+ <h3 class="text-sm font-medium text-gray-400 mb-2">GPU Usage</h3>
224
+ <div class="flex items-center space-x-2">
225
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
226
+ <div id="gpuUsageBar" class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
227
+ </div>
228
+ <span id="gpuUsageText" class="text-sm">0%</span>
229
+ </div>
230
+ </div>
231
+ <div>
232
+ <h3 class="text-sm font-medium text-gray-400 mb-2">RAM Usage</h3>
233
+ <div class="flex items-center space-x-2">
234
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
235
+ <div id="ramUsageBar" class="bg-green-600 h-2.5 rounded-full" style="width: 0%"></div>
236
+ </div>
237
+ <span id="ramUsageText" class="text-sm">0 MB / 0 MB</span>
238
+ </div>
239
+ </div>
240
+ <div>
241
+ <h3 class="text-sm font-medium text-gray-400 mb-2">VRAM Usage</h3>
242
+ <div class="flex items-center space-x-2">
243
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
244
+ <div id="vramUsageBar" class="bg-yellow-600 h-2.5 rounded-full" style="width: 0%"></div>
245
+ </div>
246
+ <span id="vramUsageText" class="text-sm">0 MB / 0 MB</span>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Log Console -->
255
+ <div class="metric-card rounded-xl p-6">
256
+ <div class="flex justify-between items-center mb-4">
257
+ <h2 class="text-lg font-semibold">Console Log</h2>
258
+ <div class="flex space-x-2">
259
+ <button id="clearLogs" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm transition-colors">
260
+ <i class="fas fa-trash"></i> Clear
261
+ </button>
262
+ <button id="exportLogs" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm transition-colors">
263
+ <i class="fas fa-download"></i> Export
264
+ </button>
265
+ </div>
266
+ </div>
267
+ <div class="bg-black bg-opacity-30 rounded-lg p-3 h-48 overflow-y-auto font-mono text-sm" id="consoleLog">
268
+ <div class="text-gray-400">Waiting for connection...</div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Settings Modal -->
274
+ <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
275
+ <div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
276
+ <div class="flex justify-between items-center mb-4">
277
+ <h3 class="text-xl font-semibold">Settings</h3>
278
+ <button id="closeSettings" class="text-gray-400 hover:text-white">
279
+ <i class="fas fa-times"></i>
280
+ </button>
281
+ </div>
282
+ <div class="space-y-4">
283
+ <div>
284
+ <label class="block text-sm font-medium mb-1">Connection Port</label>
285
+ <input type="number" id="connectionPort" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" value="8080">
286
+ </div>
287
+ <div>
288
+ <label class="block text-sm font-medium mb-1">Update Interval (ms)</label>
289
+ <input type="number" id="updateInterval" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" value="1000">
290
+ </div>
291
+ <div>
292
+ <label class="flex items-center space-x-2">
293
+ <input type="checkbox" id="autoStart" class="rounded bg-gray-700 border-gray-600">
294
+ <span>Auto-start profiling on connection</span>
295
+ </label>
296
+ </div>
297
+ <div>
298
+ <label class="flex items-center space-x-2">
299
+ <input type="checkbox" id="keepData" class="rounded bg-gray-700 border-gray-600" checked>
300
+ <span>Keep data between sessions</span>
301
+ </label>
302
+ </div>
303
+ </div>
304
+ <div class="mt-6 flex justify-end space-x-3">
305
+ <button id="saveSettings" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium">
306
+ Save
307
+ </button>
308
+ <button id="cancelSettings" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium">
309
+ Cancel
310
+ </button>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <script>
316
+ // Mock data for demonstration
317
+ let isConnected = false;
318
+ let isProfiling = false;
319
+ let dataPoints = 0;
320
+ let sessionStartTime = null;
321
+ let updateInterval = null;
322
+ let chartPaused = false;
323
+
324
+ // Performance data storage
325
+ let performanceData = {
326
+ timestamps: [],
327
+ fps: [],
328
+ drawCalls: [],
329
+ frameTimes: [],
330
+ cpuUsage: [],
331
+ gpuUsage: [],
332
+ ramUsage: [],
333
+ vramUsage: []
334
+ };
335
+
336
+ // Chart instance
337
+ let performanceChart = null;
338
+
339
+ // DOM elements
340
+ const connectBtn = document.getElementById('connectBtn');
341
+ const startBtn = document.getElementById('startBtn');
342
+ const stopBtn = document.getElementById('stopBtn');
343
+ const connectionStatus = document.getElementById('connectionStatus');
344
+ const connectionText = document.getElementById('connectionText');
345
+ const profilingStatus = document.getElementById('profilingStatus');
346
+ const sessionDuration = document.getElementById('sessionDuration');
347
+ const dataPointsElement = document.getElementById('dataPoints');
348
+ const lastUpdate = document.getElementById('lastUpdate');
349
+ const consoleLog = document.getElementById('consoleLog');
350
+ const settingsModal = document.getElementById('settingsModal');
351
+ const settingsBtn = document.getElementById('settingsBtn');
352
+ const closeSettings = document.getElementById('closeSettings');
353
+ const saveSettings = document.getElementById('saveSettings');
354
+ const cancelSettings = document.getElementById('cancelSettings');
355
+ const pauseCharts = document.getElementById('pauseCharts');
356
+ const resetZoom = document.getElementById('resetZoom');
357
+ const clearLogs = document.getElementById('clearLogs');
358
+ const exportLogs = document.getElementById('exportLogs');
359
+
360
+ // Initialize the app
361
+ document.addEventListener('DOMContentLoaded', function() {
362
+ initializeChart();
363
+ setupEventListeners();
364
+ updateUI();
365
+ });
366
+
367
+ function initializeChart() {
368
+ const ctx = document.getElementById('performanceChart').getContext('2d');
369
+
370
+ performanceChart = new Chart(ctx, {
371
+ type: 'line',
372
+ data: {
373
+ labels: [],
374
+ datasets: [
375
+ {
376
+ label: 'FPS',
377
+ data: [],
378
+ borderColor: 'rgb(59, 130, 246)',
379
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
380
+ borderWidth: 2,
381
+ tension: 0.1,
382
+ yAxisID: 'y'
383
+ },
384
+ {
385
+ label: 'Draw Calls',
386
+ data: [],
387
+ borderColor: 'rgb(168, 85, 247)',
388
+ backgroundColor: 'rgba(168, 85, 247, 0.1)',
389
+ borderWidth: 2,
390
+ tension: 0.1,
391
+ yAxisID: 'y1'
392
+ },
393
+ {
394
+ label: 'Frame Time (ms)',
395
+ data: [],
396
+ borderColor: 'rgb(16, 185, 129)',
397
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
398
+ borderWidth: 2,
399
+ tension: 0.1,
400
+ yAxisID: 'y2',
401
+ hidden: true
402
+ }
403
+ ]
404
+ },
405
+ options: {
406
+ responsive: true,
407
+ maintainAspectRatio: false,
408
+ interaction: {
409
+ mode: 'index',
410
+ intersect: false,
411
+ },
412
+ scales: {
413
+ x: {
414
+ grid: {
415
+ color: 'rgba(255, 255, 255, 0.05)'
416
+ },
417
+ ticks: {
418
+ color: 'rgba(255, 255, 255, 0.7)'
419
+ }
420
+ },
421
+ y: {
422
+ type: 'linear',
423
+ display: true,
424
+ position: 'left',
425
+ grid: {
426
+ color: 'rgba(255, 255, 255, 0.05)'
427
+ },
428
+ ticks: {
429
+ color: 'rgba(255, 255, 255, 0.7)'
430
+ },
431
+ title: {
432
+ display: true,
433
+ text: 'FPS',
434
+ color: 'rgba(255, 255, 255, 0.7)'
435
+ }
436
+ },
437
+ y1: {
438
+ type: 'linear',
439
+ display: true,
440
+ position: 'right',
441
+ grid: {
442
+ drawOnChartArea: false,
443
+ color: 'rgba(255, 255, 255, 0.05)'
444
+ },
445
+ ticks: {
446
+ color: 'rgba(255, 255, 255, 0.7)'
447
+ },
448
+ title: {
449
+ display: true,
450
+ text: 'Draw Calls',
451
+ color: 'rgba(255, 255, 255, 0.7)'
452
+ }
453
+ },
454
+ y2: {
455
+ type: 'linear',
456
+ display: true,
457
+ position: 'right',
458
+ grid: {
459
+ drawOnChartArea: false,
460
+ color: 'rgba(255, 255, 255, 0.05)'
461
+ },
462
+ ticks: {
463
+ color: 'rgba(255, 255, 255, 0.7)'
464
+ },
465
+ title: {
466
+ display: true,
467
+ text: 'Frame Time (ms)',
468
+ color: 'rgba(255, 255, 255, 0.7)'
469
+ }
470
+ }
471
+ },
472
+ plugins: {
473
+ legend: {
474
+ labels: {
475
+ color: 'rgba(255, 255, 255, 0.7)'
476
+ }
477
+ },
478
+ tooltip: {
479
+ mode: 'index',
480
+ intersect: false,
481
+ backgroundColor: 'rgba(15, 23, 42, 0.9)',
482
+ titleColor: 'white',
483
+ bodyColor: 'white',
484
+ borderColor: 'rgba(255, 255, 255, 0.1)',
485
+ borderWidth: 1
486
+ },
487
+ zoom: {
488
+ zoom: {
489
+ wheel: {
490
+ enabled: true,
491
+ },
492
+ pinch: {
493
+ enabled: true
494
+ },
495
+ mode: 'xy',
496
+ },
497
+ pan: {
498
+ enabled: true,
499
+ mode: 'xy',
500
+ }
501
+ }
502
+ }
503
+ }
504
+ });
505
+ }
506
+
507
+ function setupEventListeners() {
508
+ // Connection button
509
+ connectBtn.addEventListener('click', toggleConnection);
510
+
511
+ // Profiling controls
512
+ startBtn.addEventListener('click', startProfiling);
513
+ stopBtn.addEventListener('click', stopProfiling);
514
+
515
+ // Settings modal
516
+ settingsBtn.addEventListener('click', () => settingsModal.classList.remove('hidden'));
517
+ closeSettings.addEventListener('click', () => settingsModal.classList.add('hidden'));
518
+ saveSettings.addEventListener('click', saveSettingsHandler);
519
+ cancelSettings.addEventListener('click', () => settingsModal.classList.add('hidden'));
520
+
521
+ // Chart controls
522
+ pauseCharts.addEventListener('click', toggleChartPause);
523
+ resetZoom.addEventListener('click', resetChartZoom);
524
+
525
+ // Log controls
526
+ clearLogs.addEventListener('click', () => {
527
+ consoleLog.innerHTML = '<div class="text-gray-400">Log cleared</div>';
528
+ });
529
+ exportLogs.addEventListener('click', () => {
530
+ addLogEntry('Exporting logs is not implemented in this demo');
531
+ });
532
+ }
533
+
534
+ function toggleConnection() {
535
+ if (isConnected) {
536
+ disconnect();
537
+ } else {
538
+ connect();
539
+ }
540
+ }
541
+
542
+ function connect() {
543
+ addLogEntry('Connecting to Unreal Engine 5...');
544
+ connectionStatus.className = 'connection-status connecting';
545
+ connectionText.textContent = 'Connecting';
546
+
547
+ // Simulate connection delay
548
+ setTimeout(() => {
549
+ isConnected = true;
550
+ connectionStatus.className = 'connection-status connected';
551
+ connectionText.textContent = 'Connected';
552
+ connectBtn.innerHTML = '<i class="fas fa-plug"></i><span>Disconnect</span>';
553
+ startBtn.disabled = false;
554
+ addLogEntry('Successfully connected to Unreal Engine 5');
555
+
556
+ // If auto-start is enabled, begin profiling
557
+ if (document.getElementById('autoStart').checked) {
558
+ startProfiling();
559
+ }
560
+ }, 1500);
561
+ }
562
+
563
+ function disconnect() {
564
+ addLogEntry('Disconnecting from Unreal Engine 5...');
565
+ connectionStatus.className = 'connection-status connecting';
566
+
567
+ // Stop profiling if active
568
+ if (isProfiling) {
569
+ stopProfiling();
570
+ }
571
+
572
+ // Simulate disconnection delay
573
+ setTimeout(() => {
574
+ isConnected = false;
575
+ connectionStatus.className = 'connection-status disconnected';
576
+ connectionText.textContent = 'Disconnected';
577
+ connectBtn.innerHTML = '<i class="fas fa-plug"></i><span>Connect</span>';
578
+ startBtn.disabled = true;
579
+ stopBtn.disabled = true;
580
+ addLogEntry('Disconnected from Unreal Engine 5');
581
+ }, 800);
582
+ }
583
+
584
+ function startProfiling() {
585
+ if (!isConnected) return;
586
+
587
+ isProfiling = true;
588
+ profilingStatus.textContent = 'Active';
589
+ profilingStatus.className = 'px-3 py-1 rounded-full text-sm bg-green-900 text-green-200';
590
+ startBtn.disabled = true;
591
+ stopBtn.disabled = false;
592
+ sessionStartTime = new Date();
593
+
594
+ // Clear previous data if not keeping between sessions
595
+ if (!document.getElementById('keepData').checked) {
596
+ resetData();
597
+ }
598
+
599
+ // Start updating data
600
+ updateInterval = setInterval(updatePerformanceData, 1000);
601
+ addLogEntry('Started performance profiling session');
602
+ }
603
+
604
+ function stopProfiling() {
605
+ if (!isProfiling) return;
606
+
607
+ isProfiling = false;
608
+ clearInterval(updateInterval);
609
+ profilingStatus.textContent = 'Inactive';
610
+ profilingStatus.className = 'px-3 py-1 rounded-full text-sm bg-gray-700';
611
+ startBtn.disabled = false;
612
+ stopBtn.disabled = true;
613
+
614
+ const duration = Math.floor((new Date() - sessionStartTime) / 1000);
615
+ addLogEntry(`Stopped performance profiling session. Duration: ${duration} seconds`);
616
+
617
+ // Enable export buttons
618
+ document.getElementById('exportCSV').disabled = false;
619
+ document.getElementById('exportJSON').disabled = false;
620
+ document.getElementById('saveReport').disabled = false;
621
+ }
622
+
623
+ function updatePerformanceData() {
624
+ if (!isProfiling) return;
625
+
626
+ // Generate random performance data for demo purposes
627
+ const timestamp = new Date().toLocaleTimeString();
628
+ const fps = Math.floor(Math.random() * 30) + 30; // 30-60 FPS
629
+ const drawCalls = Math.floor(Math.random() * 5000) + 2000; // 2000-7000 draw calls
630
+ const frameTime = (Math.random() * 10 + 10).toFixed(2); // 10-20ms frame time
631
+ const cpuUsage = Math.floor(Math.random() * 30) + 20; // 20-50% CPU
632
+ const gpuUsage = Math.floor(Math.random() * 40) + 30; // 30-70% GPU
633
+ const ramUsage = Math.floor(Math.random() * 4000) + 2000; // 2-6GB RAM
634
+ const vramUsage = Math.floor(Math.random() * 6000) + 2000; // 2-8GB VRAM
635
+
636
+ // Store data
637
+ performanceData.timestamps.push(timestamp);
638
+ performanceData.fps.push(fps);
639
+ performanceData.drawCalls.push(drawCalls);
640
+ performanceData.frameTimes.push(parseFloat(frameTime));
641
+ performanceData.cpuUsage.push(cpuUsage);
642
+ performanceData.gpuUsage.push(gpuUsage);
643
+ performanceData.ramUsage.push(ramUsage);
644
+ performanceData.vramUsage.push(vramUsage);
645
+
646
+ dataPoints++;
647
+
648
+ // Update UI
649
+ updateUI();
650
+ updateChart();
651
+
652
+ // Update last update time
653
+ lastUpdate.textContent = new Date().toLocaleTimeString();
654
+ }
655
+
656
+ function updateUI() {
657
+ // Update session duration
658
+ if (sessionStartTime) {
659
+ const now = new Date();
660
+ const diff = now - sessionStartTime;
661
+ const hours = Math.floor(diff / 3600000).toString().padStart(2, '0');
662
+ const minutes = Math.floor((diff % 3600000) / 60000).toString().padStart(2, '0');
663
+ const seconds = Math.floor((diff % 60000) / 1000).toString().padStart(2, '0');
664
+ sessionDuration.textContent = `${hours}:${minutes}:${seconds}`;
665
+ }
666
+
667
+ // Update data points
668
+ dataPointsElement.textContent = dataPoints;
669
+
670
+ // Update current metrics if we have data
671
+ if (performanceData.fps.length > 0) {
672
+ const lastIndex = performanceData.fps.length - 1;
673
+
674
+ // Current values
675
+ document.getElementById('currentFPS').textContent = performanceData.fps[lastIndex];
676
+ document.getElementById('currentDrawCalls').textContent = performanceData.drawCalls[lastIndex];
677
+ document.getElementById('currentFrameTime').textContent = performanceData.frameTimes[lastIndex];
678
+
679
+ // CPU/GPU/RAM/VRAM usage
680
+ document.getElementById('cpuUsageText').textContent = `${performanceData.cpuUsage[lastIndex]}%`;
681
+ document.getElementById('cpuUsageBar').style.width = `${performanceData.cpuUsage[lastIndex]}%`;
682
+
683
+ document.getElementById('gpuUsageText').textContent = `${performanceData.gpuUsage[lastIndex]}%`;
684
+ document.getElementById('gpuUsageBar').style.width = `${performanceData.gpuUsage[lastIndex]}%`;
685
+
686
+ document.getElementById('ramUsageText').textContent = `${performanceData.ramUsage[lastIndex]} MB / ${Math.max(...performanceData.ramUsage)} MB`;
687
+ document.getElementById('ramUsageBar').style.width = `${(performanceData.ramUsage[lastIndex] / Math.max(...performanceData.ramUsage)) * 100}%`;
688
+
689
+ document.getElementById('vramUsageText').textContent = `${performanceData.vramUsage[lastIndex]} MB / ${Math.max(...performanceData.vramUsage)} MB`;
690
+ document.getElementById('vramUsageBar').style.width = `${(performanceData.vramUsage[lastIndex] / Math.max(...performanceData.vramUsage)) * 100}%`;
691
+
692
+ // Calculate averages and min/max
693
+ const avgFPS = (performanceData.fps.reduce((a, b) => a + b, 0) / performanceData.fps.length).toFixed(1);
694
+ const minFPS = Math.min(...performanceData.fps);
695
+
696
+ const avgDrawCalls = (performanceData.drawCalls.reduce((a, b) => a + b, 0) / performanceData.drawCalls.length).toFixed(0);
697
+ const maxDrawCalls = Math.max(...performanceData.drawCalls);
698
+
699
+ const avgFrameTime = (performanceData.frameTimes.reduce((a, b) => a + b, 0) / performanceData.frameTimes.length).toFixed(2);
700
+ const maxFrameTime = Math.max(...performanceData.frameTimes).toFixed(2);
701
+
702
+ document.getElementById('avgFPS').textContent = avgFPS;
703
+ document.getElementById('minFPS').textContent = minFPS;
704
+ document.getElementById('avgDrawCalls').textContent = avgDrawCalls;
705
+ document.getElementById('maxDrawCalls').textContent = maxDrawCalls;
706
+ document.getElementById('avgFrameTime').textContent = avgFrameTime;
707
+ document.getElementById('maxFrameTime').textContent = maxFrameTime;
708
+ }
709
+ }
710
+
711
+ function updateChart() {
712
+ if (chartPaused) return;
713
+
714
+ // Limit data points to last 60 for better visibility
715
+ const maxPoints = 60;
716
+ const startIdx = Math.max(0, performanceData.timestamps.length - maxPoints);
717
+
718
+ performanceChart.data.labels = performanceData.timestamps.slice(startIdx);
719
+ performanceChart.data.datasets[0].data = performanceData.fps.slice(startIdx);
720
+ performanceChart.data.datasets[1].data = performanceData.drawCalls.slice(startIdx);
721
+ performanceChart.data.datasets[2].data = performanceData.frameTimes.slice(startIdx);
722
+
723
+ performanceChart.update('none');
724
+ }
725
+
726
+ function toggleChartPause() {
727
+ chartPaused = !chartPaused;
728
+ pauseCharts.innerHTML = chartPaused
729
+ ? '<i class="fas fa-play"></i> Resume'
730
+ : '<i class="fas fa-pause"></i> Pause';
731
+
732
+ if (!chartPaused) {
733
+ updateChart();
734
+ }
735
+ }
736
+
737
+ function resetChartZoom() {
738
+ if (performanceChart) {
739
+ performanceChart.resetZoom();
740
+ }
741
+ }
742
+
743
+ function resetData() {
744
+ performanceData = {
745
+ timestamps: [],
746
+ fps: [],
747
+ drawCalls: [],
748
+ frameTimes: [],
749
+ cpuUsage: [],
750
+ gpuUsage: [],
751
+ ramUsage: [],
752
+ vramUsage: []
753
+ };
754
+
755
+ dataPoints = 0;
756
+ performanceChart.data.labels = [];
757
+ performanceChart.data.datasets.forEach(dataset => {
758
+ dataset.data = [];
759
+ });
760
+ performanceChart.update();
761
+ }
762
+
763
+ function addLogEntry(message) {
764
+ const now = new Date();
765
+ const timestamp = now.toLocaleTimeString();
766
+ const logEntry = document.createElement('div');
767
+ logEntry.className = 'mb-1';
768
+ logEntry.innerHTML = `<span class="text-gray-400">[${timestamp}]</span> ${message}`;
769
+ consoleLog.appendChild(logEntry);
770
+ consoleLog.scrollTop = consoleLog.scrollHeight;
771
+ }
772
+
773
+ function saveSettingsHandler() {
774
+ const port = document.getElementById('connectionPort').value;
775
+ const interval = document.getElementById('updateInterval').value;
776
+
777
+ addLogEntry(`Settings saved: Port=${port}, Update Interval=${interval}ms`);
778
+ settingsModal.classList.add('hidden');
779
+ }
780
+ </script>
781
+ <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=krishgokul92/unreal-performance-analyzer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
782
+ </html>