Hugging Face's logo

Spaces:
huggingface
/
inf-playground-canvas
Runtime error

App Files Community
Thomas G. Lopes commited on
Commit
0965bd9
·
1 Parent(s): 4fcb225

improve provider select display

Browse files
Files changed (1) hide show
  1. src/lib/components/inference-playground/provider-select.svelte +18 -31
src/lib/components/inference-playground/provider-select.svelte CHANGED
@@ -82,16 +82,24 @@
82
  const pd = pricing.getPricing(conversation.model.id, provider);
83
  return pricing.formatPricing(pd);
84
  }
85
- const providerPricing = $derived(getProviderPricing(conversation.data.provider ?? ""));
86
  </script>
87
 
88
- <div class="flex flex-col gap-2">
89
- <!--
90
- <label class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
91
- Providers<span class="text-xs font-normal text-gray-400"></span>
92
- </label>
93
- -->
 
 
 
 
 
 
 
 
94
 
 
95
  <button
96
  {...select.trigger}
97
  class={cn(
@@ -100,17 +108,7 @@
100
  classes,
101
  )}
102
  >
103
- <div class="flex items-center gap-2 text-sm">
104
- <IconProvider provider={conversation.data.provider} />
105
- <div class="flex flex-col items-start">
106
- <span>{getProviderName(conversation.data.provider ?? "") ?? "loading"}</span>
107
- {#if providerPricing}
108
- <span class="text-xs text-gray-500 dark:text-gray-400">
109
- In: {providerPricing.input} • Out: {providerPricing.output}
110
- </span>
111
- {/if}
112
- </div>
113
- </div>
114
  <div
115
  class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
116
  >
@@ -120,22 +118,11 @@
120
 
121
  <div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
122
  {#snippet option(provider: string)}
123
- {@const providerPricing = getProviderPricing(provider)}
124
  <div {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
125
  <div
126
- class="flex items-center gap-2 rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
127
  >
128
- <IconProvider {provider} />
129
- <div class="flex flex-col">
130
- <span>{getProviderName(provider)}</span>
131
- {#if providerPricing}
132
- <div class="flex flex-col">
133
- <span class="text-xs text-gray-500 dark:text-gray-400">
134
- In: {providerPricing.input} • Out: {providerPricing.output}
135
- </span>
136
- </div>
137
- {/if}
138
- </div>
139
  </div>
140
  </div>
141
  {/snippet}
 
82
  const pd = pricing.getPricing(conversation.model.id, provider);
83
  return pricing.formatPricing(pd);
84
  }
 
85
  </script>
86
 
87
+ {#snippet providerDisplay(provider: string)}
88
+ {@const providerPricing = getProviderPricing(provider)}
89
+ <div class="flex flex-col items-start gap-0.5">
90
+ <div class="flex items-center gap-2 text-sm">
91
+ <IconProvider {provider} />
92
+ <span>{getProviderName(provider) ?? "loading"}</span>
93
+ </div>
94
+ {#if providerPricing}
95
+ <span class="text-xs text-gray-500 dark:text-gray-400">
96
+ In: {providerPricing.input} • Out: {providerPricing.output}
97
+ </span>
98
+ {/if}
99
+ </div>
100
+ {/snippet}
101
 
102
+ <div class="flex flex-col gap-2">
103
  <button
104
  {...select.trigger}
105
  class={cn(
 
108
  classes,
109
  )}
110
  >
111
+ {@render providerDisplay(conversation.data.provider ?? "")}
 
 
 
 
 
 
 
 
 
 
112
  <div
113
  class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
114
  >
 
118
 
119
  <div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
120
  {#snippet option(provider: string)}
 
121
  <div {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
122
  <div
123
+ class="rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
124
  >
125
+ {@render providerDisplay(provider)}
 
 
 
 
 
 
 
 
 
 
126
  </div>
127
  </div>
128
  {/snippet}