Hugging Face's logo

Spaces:
victor
/
providers-metrics
Running

App Files Community
1
victor HF Staff commited on
Commit
e10c1a6
·
verified ·
1 Parent(s): db4f1f9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +316 -19
index.html CHANGED
@@ -1,19 +1,316 @@
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>Provider Inference Metrics Dashboard</title>
7
+ <!-- Include Plotly.js via CDN -->
8
+ <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
9
+ <style>
10
+ body {
11
+ font-family: sans-serif;
12
+ margin: 20px;
13
+ background-color: #f4f4f4;
14
+ }
15
+ h1 {
16
+ text-align: center;
17
+ color: #333;
18
+ }
19
+ .dashboard-container {
20
+ display: grid;
21
+ grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); /* Responsive grid */
22
+ gap: 20px; /* Space between plots */
23
+ padding: 20px;
24
+ }
25
+ .plot-container {
26
+ background-color: #fff;
27
+ padding: 15px;
28
+ border-radius: 8px;
29
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
30
+ min-height: 400px; /* Ensure plots have some height */
31
+ }
32
+ #loading, #error {
33
+ text-align: center;
34
+ font-size: 1.2em;
35
+ padding: 30px;
36
+ color: #555;
37
+ }
38
+ #error {
39
+ color: red;
40
+ font-weight: bold;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body>
45
+
46
+ <h1>Provider Inference Metrics Dashboard</h1>
47
+
48
+ <div id="loading">Loading data... Please wait.</div>
49
+ <div id="error" style="display: none;"></div>
50
+
51
+ <div class="dashboard-container">
52
+ <div id="plotLatencyProvider" class="plot-container"></div>
53
+ <div id="plotReliabilityProvider" class="plot-container"></div>
54
+ <div id="plotLatencyModel" class="plot-container"></div>
55
+ <div id="plotErrorTypesProvider" class="plot-container"></div>
56
+ <div id="plotLatencyHeatmap" class="plot-container"></div>
57
+ <!-- Add more divs here for additional plots -->
58
+ </div>
59
+
60
+ <script>
61
+ document.addEventListener('DOMContentLoaded', function() {
62
+ const apiUrl = "https://datasets-server.huggingface.co/rows?dataset=victor%2Fproviders-metrics&config=default&split=train&offset=0&length=1000"; // Fetch 1000 rows
63
+ const loadingDiv = document.getElementById('loading');
64
+ const errorDiv = document.getElementById('error');
65
+ const dashboardContainer = document.querySelector('.dashboard-container');
66
+
67
+ // Initially hide the dashboard container
68
+ dashboardContainer.style.display = 'none';
69
+
70
+ fetch(apiUrl)
71
+ .then(response => {
72
+ if (!response.ok) {
73
+ throw new Error(`HTTP error! status: ${response.status}`);
74
+ }
75
+ return response.json();
76
+ })
77
+ .then(data => {
78
+ loadingDiv.style.display = 'none'; // Hide loading message
79
+ dashboardContainer.style.display = 'grid'; // Show dashboard
80
+
81
+ // Extract the actual row data
82
+ const rows = data.rows.map(item => item.row);
83
+ console.log(`Fetched ${rows.length} rows.`);
84
+
85
+ // --- Data Processing and Plotting ---
86
+
87
+ // 1. Latency by Provider (Box Plot)
88
+ createLatencyByProviderPlot(rows);
89
+
90
+ // 2. Reliability by Provider (Stacked Bar)
91
+ createReliabilityByProviderPlot(rows);
92
+
93
+ // 3. Latency by Model (Box Plot)
94
+ createLatencyByModelPlot(rows);
95
+
96
+ // 4. Error Types by Provider (Grouped Bar)
97
+ createErrorTypesByProviderPlot(rows);
98
+
99
+ // 5. Latency Heatmap (Model vs Provider)
100
+ createLatencyHeatmap(rows);
101
+
102
+ })
103
+ .catch(error => {
104
+ console.error('Error fetching or processing data:', error);
105
+ loadingDiv.style.display = 'none';
106
+ errorDiv.textContent = `Error loading data: ${error.message}. Please check the console for details.`;
107
+ errorDiv.style.display = 'block';
108
+ });
109
+
110
+ // --- Plotting Functions ---
111
+
112
+ function createLatencyByProviderPlot(rows) {
113
+ const dataByProvider = {};
114
+ rows.forEach(row => {
115
+ if (!dataByProvider[row.provider_name]) {
116
+ dataByProvider[row.provider_name] = [];
117
+ }
118
+ // Only include successful requests or requests with valid duration
119
+ if (row.duration_ms !== null && row.duration_ms >= 0) {
120
+ dataByProvider[row.provider_name].push(row.duration_ms);
121
+ }
122
+ });
123
+
124
+ const plotData = Object.keys(dataByProvider).map(provider => ({
125
+ y: dataByProvider[provider],
126
+ type: 'box',
127
+ name: provider,
128
+ boxpoints: 'Outliers' // Show outliers
129
+ }));
130
+
131
+ const layout = {
132
+ title: 'Latency Distribution by Provider (ms)',
133
+ yaxis: { title: 'Duration (ms)', type: 'log' }, // Log scale often helps with latency
134
+ xaxis: { title: 'Provider' },
135
+ margin: { l: 50, r: 20, b: 100, t: 50 } // Adjust margins
136
+ };
137
+
138
+ Plotly.newPlot('plotLatencyProvider', plotData, layout);
139
+ }
140
+
141
+ function createReliabilityByProviderPlot(rows) {
142
+ const statusCountsByProvider = {};
143
+ const allProviders = new Set();
144
+ const allStatusCodes = new Set();
145
+
146
+ rows.forEach(row => {
147
+ const provider = row.provider_name;
148
+ const status = row.response_status_code;
149
+ allProviders.add(provider);
150
+ allStatusCodes.add(status);
151
+
152
+ if (!statusCountsByProvider[provider]) {
153
+ statusCountsByProvider[provider] = {};
154
+ }
155
+ if (!statusCountsByProvider[provider][status]) {
156
+ statusCountsByProvider[provider][status] = 0;
157
+ }
158
+ statusCountsByProvider[provider][status]++;
159
+ });
160
+
161
+ const sortedProviders = Array.from(allProviders).sort();
162
+ const sortedStatusCodes = Array.from(allStatusCodes).sort((a, b) => a - b); // Sort numerically
163
+
164
+ const plotData = sortedStatusCodes.map(status => {
165
+ return {
166
+ x: sortedProviders,
167
+ y: sortedProviders.map(provider => statusCountsByProvider[provider]?.[status] || 0),
168
+ name: `Status ${status}`,
169
+ type: 'bar'
170
+ };
171
+ });
172
+
173
+ const layout = {
174
+ title: 'Request Status Codes by Provider',
175
+ barmode: 'stack',
176
+ xaxis: { title: 'Provider' },
177
+ yaxis: { title: 'Number of Requests' },
178
+ margin: { l: 50, r: 20, b: 100, t: 50 }
179
+ };
180
+
181
+ Plotly.newPlot('plotReliabilityProvider', plotData, layout);
182
+ }
183
+
184
+ function createLatencyByModelPlot(rows) {
185
+ const dataByModel = {};
186
+ rows.forEach(row => {
187
+ const model = row.model_id;
188
+ if (!dataByModel[model]) {
189
+ dataByModel[model] = [];
190
+ }
191
+ // Only include successful requests or requests with valid duration
192
+ if (row.duration_ms !== null && row.duration_ms >= 0) {
193
+ dataByModel[model].push(row.duration_ms);
194
+ }
195
+ });
196
+
197
+ const plotData = Object.keys(dataByModel).map(model => ({
198
+ y: dataByModel[model],
199
+ type: 'box',
200
+ name: model,
201
+ boxpoints: 'Outliers'
202
+ }));
203
+
204
+ const layout = {
205
+ title: 'Latency Distribution by Model (ms)',
206
+ yaxis: { title: 'Duration (ms)', type: 'log' },
207
+ xaxis: {
208
+ title: 'Model ID',
209
+ tickangle: -45 // Angle labels if they overlap
210
+ },
211
+ margin: { l: 50, r: 20, b: 150, t: 50 } // More bottom margin for angled labels
212
+ };
213
+
214
+ Plotly.newPlot('plotLatencyModel', plotData, layout);
215
+ }
216
+
217
+ function createErrorTypesByProviderPlot(rows) {
218
+ const errorCountsByProvider = {};
219
+ const allProviders = new Set();
220
+ const allErrorCodes = new Set();
221
+
222
+ rows.forEach(row => {
223
+ if (row.response_status_code !== 200 && row.response_status_code !== null) { // Only errors
224
+ const provider = row.provider_name;
225
+ const status = row.response_status_code;
226
+ allProviders.add(provider);
227
+ allErrorCodes.add(status);
228
+
229
+ if (!errorCountsByProvider[provider]) {
230
+ errorCountsByProvider[provider] = {};
231
+ }
232
+ if (!errorCountsByProvider[provider][status]) {
233
+ errorCountsByProvider[provider][status] = 0;
234
+ }
235
+ errorCountsByProvider[provider][status]++;
236
+ }
237
+ });
238
+
239
+ const sortedProviders = Array.from(allProviders).sort();
240
+ const sortedErrorCodes = Array.from(allErrorCodes).sort((a, b) => a - b);
241
+
242
+ const plotData = sortedErrorCodes.map(status => {
243
+ return {
244
+ x: sortedProviders,
245
+ y: sortedProviders.map(provider => errorCountsByProvider[provider]?.[status] || 0),
246
+ name: `Error ${status}`,
247
+ type: 'bar'
248
+ };
249
+ });
250
+
251
+ const layout = {
252
+ title: 'Error Types by Provider (Non-200 Status)',
253
+ barmode: 'group', // Group bars side-by-side for comparison
254
+ xaxis: { title: 'Provider' },
255
+ yaxis: { title: 'Number of Errors' },
256
+ margin: { l: 50, r: 20, b: 100, t: 50 }
257
+ };
258
+
259
+ Plotly.newPlot('plotErrorTypesProvider', plotData, layout);
260
+ }
261
+
262
+ function createLatencyHeatmap(rows) {
263
+ const latencyData = {}; // { provider: { model: { sum: 0, count: 0 } } }
264
+ const allProviders = new Set();
265
+ const allModels = new Set();
266
+
267
+ rows.forEach(row => {
268
+ if (row.duration_ms !== null && row.duration_ms >= 0) {
269
+ const provider = row.provider_name;
270
+ const model = row.model_id;
271
+ allProviders.add(provider);
272
+ allModels.add(model);
273
+
274
+ if (!latencyData[provider]) latencyData[provider] = {};
275
+ if (!latencyData[provider][model]) latencyData[provider][model] = { sum: 0, count: 0 };
276
+
277
+ latencyData[provider][model].sum += row.duration_ms;
278
+ latencyData[provider][model].count++;
279
+ }
280
+ });
281
+
282
+ const sortedProviders = Array.from(allProviders).sort();
283
+ const sortedModels = Array.from(allModels).sort();
284
+
285
+ const zValues = sortedModels.map(model => {
286
+ return sortedProviders.map(provider => {
287
+ const data = latencyData[provider]?.[model];
288
+ return data && data.count > 0 ? data.sum / data.count : null; // Calculate average, handle missing data
289
+ });
290
+ });
291
+
292
+ const plotData = [{
293
+ z: zValues,
294
+ x: sortedProviders,
295
+ y: sortedModels,
296
+ type: 'heatmap',
297
+ hoverongaps: false, // Don't show tooltips for empty cells
298
+ colorscale: 'Viridis', // Choose a colorscale
299
+ colorbar: { title: 'Avg Latency (ms)'}
300
+ }];
301
+
302
+ const layout = {
303
+ title: 'Average Latency (ms) - Model vs. Provider',
304
+ xaxis: { title: 'Provider', side: 'top' }, // Move x-axis labels to top
305
+ yaxis: { title: 'Model ID' },
306
+ margin: { l: 250, r: 50, b: 50, t: 100 } // Adjust margins for labels
307
+ };
308
+
309
+ Plotly.newPlot('plotLatencyHeatmap', plotData, layout);
310
+ }
311
+
312
+ });
313
+ </script>
314
+
315
+ </body>
316
+ </html>