Skip to content

Commit 4ad8895

Browse files
ishaan-jaffishaan-jaff
committed
fix styling
1 parent 347a5bb commit 4ad8895

File tree

1 file changed

+185
-33
lines changed

1 file changed

+185
-33
lines changed

‎src/App.svelte‎

Lines changed: 185 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,34 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
181181
loading = false;
182182
}
183183
}
184+
185+
function getProviderInitial(provider: string): string {
186+
if (!provider) return "?";
187+
188+
// Map common providers to their initials/abbreviations
189+
const providerMap: { [key: string]: string } = {
190+
"anthropic": "A",
191+
"openai": "O",
192+
"azure": "Az",
193+
"bedrock": "B",
194+
"vertex_ai": "V",
195+
"cohere": "C",
196+
"huggingface": "H",
197+
"replicate": "R",
198+
"groq": "G",
199+
"together_ai": "T",
200+
"mistral": "M",
201+
"deepinfra": "D",
202+
};
203+
204+
const lowerProvider = provider.toLowerCase();
205+
if (providerMap[lowerProvider]) {
206+
return providerMap[lowerProvider];
207+
}
208+
209+
// Default to first letter uppercase
210+
return provider.charAt(0).toUpperCase();
211+
}
184212
</script>
185213

186214
<main class="container">
@@ -266,23 +294,43 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
266294
</section>
267295
{/if}
268296

269-
{#each results as { item: { name, mode, litellm_provider, ...data } } (name)}
270-
<details>
271-
<summary>{name}</summary>
272-
<div class="relative">
273-
<pre>{JSON.stringify(data, null, 2)}</pre>
274-
<a href={getIssueUrlForFix(name)}> Incorrect or missing? </a>
275-
</div>
276-
</details>
277-
{/each}
297+
<div class="table-container">
298+
<table>
299+
<thead>
300+
<tr>
301+
<th>Model</th>
302+
<th>Context</th>
303+
<th>Input Tokens</th>
304+
<th>Output Tokens</th>
305+
<th>Cache Read Tokens</th>
306+
<th>Cache Write Tokens</th>
307+
</tr>
308+
</thead>
309+
<tbody>
310+
{#each results as { item: { name, mode, litellm_provider, max_input_tokens, max_output_tokens, input_cost_per_token, output_cost_per_token, cache_creation_input_token_cost, cache_read_input_token_cost, ...data } } (name)}
311+
<tr>
312+
<td class="model-name">
313+
<div class="model-info">
314+
<div class="provider-avatar">
315+
{getProviderInitial(litellm_provider)}
316+
</div>
317+
<span class="model-title">{name}</span>
318+
</div>
319+
</td>
320+
<td class="context-cell">{max_input_tokens && max_input_tokens > 0 ? (max_input_tokens >= 1000000 ? (max_input_tokens / 1000000).toFixed(0) + 'M' : (max_input_tokens / 1000).toFixed(0) + 'K') : '—'}</td>
321+
<td class="cost-cell">{input_cost_per_token ? '$' + (input_cost_per_token * 1000000).toFixed(2) + '/M' : '—'}</td>
322+
<td class="cost-cell">{output_cost_per_token ? '$' + (output_cost_per_token * 1000000).toFixed(2) + '/M' : '—'}</td>
323+
<td class="cost-cell">{cache_read_input_token_cost ? '$' + (cache_read_input_token_cost * 1000000).toFixed(2) + '/M' : '—'}</td>
324+
<td class="cost-cell">{cache_creation_input_token_cost ? '$' + (cache_creation_input_token_cost * 1000000).toFixed(2) + '/M' : '—'}</td>
325+
</tr>
326+
{/each}
327+
</tbody>
328+
</table>
329+
</div>
278330
{/if}
279331
</main>
280332

281333
<style>
282-
summary:hover {
283-
font-weight: bold;
284-
}
285-
286334
h2 {
287335
margin-top: 2rem;
288336
}
@@ -296,27 +344,30 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
296344
white-space: nowrap;
297345
}
298346
299-
/* Remove the margin-top from the existing select style */
347+
/* Improved select/dropdown styles */
300348
select {
301349
width: 100%;
350+
padding: 0.75rem 1rem;
351+
font-size: 1rem;
352+
border: 1px solid var(--form-element-border-color);
353+
border-radius: 8px;
354+
background-color: var(--form-element-background-color);
355+
cursor: pointer;
356+
transition: all 0.2s ease;
302357
}
303358
304-
summary:hover {
305-
font-weight: bold;
359+
select:hover {
360+
border-color: var(--primary);
306361
}
307362
308-
h2 {
309-
margin-top: 2rem;
363+
select:focus {
364+
border-color: var(--primary);
365+
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
310366
}
367+
311368
input,
312369
select {
313-
margin-top: 0.5rem; /* Ensure margin top for all inputs and selects */
314-
}
315-
316-
.truncate {
317-
overflow: hidden;
318-
text-overflow: ellipsis;
319-
white-space: nowrap;
370+
margin-top: 0.5rem;
320371
}
321372
322373
.filter-container {
@@ -325,21 +376,122 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
325376
326377
.filter-row {
327378
display: flex;
328-
justify-content: space-between; /* spaces filter items across the row */
329-
align-items: center; /* aligns items vertically in the middle */
379+
justify-content: space-between;
380+
align-items: center;
381+
gap: 1rem;
330382
}
331383
332384
.filter-item {
333385
display: flex;
334-
flex-direction: column; /* stacks label and input vertically */
386+
flex-direction: column;
335387
flex: 1;
336-
padding: 0 10px;
337388
}
338389
339-
/* Alignment and full width for inputs inside flex containers */
340-
select,
390+
.filter-item label {
391+
font-size: 1rem;
392+
font-weight: 600;
393+
color: var(--contrast);
394+
margin-bottom: 0.5rem;
395+
}
396+
341397
input[type="number"] {
342-
width: 100%; /* makes input take full width of its parent */
343-
margin-top: 0.4rem; /* Add a little top margin for visual spacing */
398+
width: 100%;
399+
padding: 0.75rem 1rem;
400+
font-size: 1rem;
401+
border: 1px solid var(--form-element-border-color);
402+
border-radius: 8px;
403+
transition: all 0.2s ease;
404+
}
405+
406+
input[type="number"]:focus {
407+
border-color: var(--primary);
408+
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
409+
}
410+
411+
/* Table styles */
412+
.table-container {
413+
margin-top: 2rem;
414+
overflow-x: auto;
415+
border-radius: 12px;
416+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
417+
}
418+
419+
table {
420+
width: 100%;
421+
border-collapse: collapse;
422+
background: var(--card-background-color);
423+
}
424+
425+
thead {
426+
background-color: var(--muted-border-color);
427+
}
428+
429+
th {
430+
padding: 1.25rem 1.5rem;
431+
text-align: left;
432+
font-weight: 500;
433+
font-size: 0.8rem;
434+
text-transform: uppercase;
435+
letter-spacing: 0.05em;
436+
color: var(--muted-color);
437+
}
438+
439+
tbody tr {
440+
border-bottom: 1px solid var(--muted-border-color);
441+
transition: background-color 0.15s ease;
442+
}
443+
444+
tbody tr:hover {
445+
background-color: var(--table-row-stripped-background-color);
446+
}
447+
448+
tbody tr:last-child {
449+
border-bottom: none;
450+
}
451+
452+
td {
453+
padding: 1.25rem 1.5rem;
454+
vertical-align: middle;
455+
font-size: 0.95rem;
456+
}
457+
458+
.model-name {
459+
font-weight: 500;
460+
min-width: 300px;
461+
}
462+
463+
.model-info {
464+
display: flex;
465+
align-items: center;
466+
gap: 1rem;
467+
}
468+
469+
.provider-avatar {
470+
width: 40px;
471+
height: 40px;
472+
border-radius: 50%;
473+
background-color: #1a1a1a;
474+
color: white;
475+
display: flex;
476+
align-items: center;
477+
justify-content: center;
478+
font-weight: 600;
479+
font-size: 0.9rem;
480+
flex-shrink: 0;
481+
}
482+
483+
.model-title {
484+
font-family: monospace;
485+
font-size: 0.95rem;
486+
font-weight: 500;
487+
}
488+
489+
.context-cell {
490+
color: var(--contrast);
491+
font-weight: 500;
492+
}
493+
494+
.cost-cell {
495+
color: var(--muted-color);
344496
}
345497
</style>

0 commit comments

Comments
 (0)