Hugging Face's logo

Spaces:
huggingface
/
inf-playground-canvas
Runtime error

App Files Community
Thomas G. Lopes commited on
Commit
08bcd33
·
1 Parent(s): 539f4bc

better settings modal

Browse files
Files changed (1) hide show
  1. src/lib/components/inference-playground/playground.svelte +91 -83
src/lib/components/inference-playground/playground.svelte CHANGED
@@ -29,6 +29,7 @@
29
  import { TEST_IDS } from "$lib/constants.js";
30
  import MessageTextarea from "./message-textarea.svelte";
31
  import { atLeastNDecimals } from "$lib/utils/number.js";
 
32
 
33
  let viewCode = $state(false);
34
  let viewSettings = $state(false);
@@ -186,100 +187,107 @@
186
 
187
  <!-- Last column -->
188
  {#if !compareActive}
189
- <div class={[viewSettings && "max-md:fixed max-md:inset-0 max-md:bottom-20 max-md:backdrop-blur-lg"]}>
 
 
 
 
 
190
  <div
191
- class={[
192
- "flex h-full flex-col p-3 max-md:absolute max-md:inset-x-0 max-md:bottom-0",
193
- viewSettings ? "max-md:fixed" : "max-md:hidden",
194
- ]}
195
  >
196
- <div
197
- class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-linear-to-b from-white via-white p-3 shadow-xs dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
 
 
 
 
198
  >
199
- <div class="flex flex-col gap-2">
200
- <ModelSelector conversation={conversations.active[0]!} />
201
- <div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
202
- <button
 
 
 
 
 
 
 
 
 
 
 
 
 
203
  class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
204
- onclick={() => (selectCompareModelOpen = true)}
205
  >
206
- <IconCompare />
207
- Compare
208
- </button>
209
- {#if isHFModel(conversations.active[0]?.model)}
210
- <a
211
- href="https://huggingface.co/{conversations.active[0]?.model.id}?inference_provider={conversations
212
- .active[0].data.provider}"
213
- target="_blank"
214
- class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
215
- >
216
- <IconExternal class="text-2xs" />
217
- Model page
218
- </a>
219
- {/if}
220
- </div>
221
  </div>
 
222
 
223
- <GenerationConfig conversation={conversations.active[0]!} />
224
 
225
- <div class="mt-auto space-y-3">
226
- <div class="flex items-center justify-end">
227
- <BillingIndicator showModal={() => (billingModalOpen = true)} />
228
- </div>
229
- <div class="flex items-center justify-end gap-4 whitespace-nowrap">
230
- <button
231
- onclick={() => projects.current && showShareModal(projects.current)}
232
- class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
233
- >
234
- <IconShare class="text-xs" />
235
- Share
236
- </button>
237
- <a
238
- class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
239
- href="https://huggingface.co/spaces/victor/providers-metrics"
240
- target="_blank"
241
- >
242
- <IconWaterfall class="text-xs" />
243
- Metrics
244
- </a>
245
- <button
246
- onclick={token.reset}
247
- class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
248
- >
249
- <svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32">
250
- <path
251
- fill="currentColor"
252
- d="M23.216 4H26V2h-7v6h2V5.096A11.96 11.96 0 0 1 28 16c0 6.617-5.383 12-12 12v2c7.72 0 14-6.28 14-14c0-5.009-2.632-9.512-6.784-12"
253
- />
254
- <path fill="currentColor" d="M16 20a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M15 9h2v9h-2z" /><path
255
- fill="currentColor"
256
- d="M16 4V2C8.28 2 2 8.28 2 16c0 4.977 2.607 9.494 6.784 12H6v2h7v-6h-2v2.903A11.97 11.97 0 0 1 4 16C4 9.383 9.383 4 16 4"
257
- />
258
- </svg>
259
- {#if token.value}
260
- Reset token
261
- {:else}
262
- Set token
263
- {/if}
264
- </button>
265
- </div>
266
  </div>
 
267
 
268
- <div class="mt-auto hidden">
269
- <div class="mb-3 flex items-center justify-between gap-2">
270
- <label for="default-range" class="block text-sm font-medium text-gray-900 dark:text-white"
271
- >API Quota</label
272
- >
273
- <span
274
- class="rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
275
- >Free</span
276
- >
277
 
278
- <div class="ml-auto w-12 text-right text-sm">76%</div>
279
- </div>
280
- <div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
281
- <div class="h-2 rounded-full bg-black dark:bg-gray-400" style="width: 75%"></div>
282
- </div>
283
  </div>
284
  </div>
285
  </div>
 
29
  import { TEST_IDS } from "$lib/constants.js";
30
  import MessageTextarea from "./message-textarea.svelte";
31
  import { atLeastNDecimals } from "$lib/utils/number.js";
32
+ import IconClose from "~icons/carbon/close";
33
 
34
  let viewCode = $state(false);
35
  let viewSettings = $state(false);
 
187
 
188
  <!-- Last column -->
189
  {#if !compareActive}
190
+ <div
191
+ class={[
192
+ "z-50 flex h-full flex-col p-3 max-md:fixed max-md:inset-0 max-md:backdrop-blur-lg ",
193
+ !viewSettings && "max-md:hidden",
194
+ ]}
195
+ >
196
  <div
197
+ class="relative flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80
198
+ bg-white bg-linear-to-b from-white via-white p-3 shadow-xs
199
+ dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
 
200
  >
201
+ <!-- Close button -->
202
+ <button
203
+ type="button"
204
+ class="btn absolute top-1 right-1 flex size-6 items-center justify-center rounded-lg
205
+ bg-gray-100 p-1 text-gray-500 hover:bg-gray-200 md:hidden dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
206
+ onclick={() => (viewSettings = false)}
207
  >
208
+ <IconClose />
209
+ </button>
210
+ <div class="flex flex-col gap-2">
211
+ <ModelSelector conversation={conversations.active[0]!} />
212
+ <div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
213
+ <button
214
+ class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
215
+ onclick={() => (selectCompareModelOpen = true)}
216
+ >
217
+ <IconCompare />
218
+ Compare
219
+ </button>
220
+ {#if isHFModel(conversations.active[0]?.model)}
221
+ <a
222
+ href="https://huggingface.co/{conversations.active[0]?.model.id}?inference_provider={conversations
223
+ .active[0].data.provider}"
224
+ target="_blank"
225
  class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
 
226
  >
227
+ <IconExternal class="text-2xs" />
228
+ Model page
229
+ </a>
230
+ {/if}
 
 
 
 
 
 
 
 
 
 
 
231
  </div>
232
+ </div>
233
 
234
+ <GenerationConfig conversation={conversations.active[0]!} />
235
 
236
+ <div class="mt-auto space-y-3">
237
+ <div class="flex items-center justify-end">
238
+ <BillingIndicator showModal={() => (billingModalOpen = true)} />
239
+ </div>
240
+ <div class="flex items-center justify-end gap-4 whitespace-nowrap">
241
+ <button
242
+ onclick={() => projects.current && showShareModal(projects.current)}
243
+ class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
244
+ >
245
+ <IconShare class="text-xs" />
246
+ Share
247
+ </button>
248
+ <a
249
+ class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
250
+ href="https://huggingface.co/spaces/victor/providers-metrics"
251
+ target="_blank"
252
+ >
253
+ <IconWaterfall class="text-xs" />
254
+ Metrics
255
+ </a>
256
+ <button
257
+ onclick={token.reset}
258
+ class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
259
+ >
260
+ <svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32">
261
+ <path
262
+ fill="currentColor"
263
+ d="M23.216 4H26V2h-7v6h2V5.096A11.96 11.96 0 0 1 28 16c0 6.617-5.383 12-12 12v2c7.72 0 14-6.28 14-14c0-5.009-2.632-9.512-6.784-12"
264
+ />
265
+ <path fill="currentColor" d="M16 20a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M15 9h2v9h-2z" /><path
266
+ fill="currentColor"
267
+ d="M16 4V2C8.28 2 2 8.28 2 16c0 4.977 2.607 9.494 6.784 12H6v2h7v-6h-2v2.903A11.97 11.97 0 0 1 4 16C4 9.383 9.383 4 16 4"
268
+ />
269
+ </svg>
270
+ {#if token.value}
271
+ Reset token
272
+ {:else}
273
+ Set token
274
+ {/if}
275
+ </button>
 
276
  </div>
277
+ </div>
278
 
279
+ <div class="mt-auto hidden">
280
+ <div class="mb-3 flex items-center justify-between gap-2">
281
+ <label for="default-range" class="block text-sm font-medium text-gray-900 dark:text-white">API Quota</label>
282
+ <span
283
+ class="rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
284
+ >Free</span
285
+ >
 
 
286
 
287
+ <div class="ml-auto w-12 text-right text-sm">76%</div>
288
+ </div>
289
+ <div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
290
+ <div class="h-2 rounded-full bg-black dark:bg-gray-400" style="width: 75%"></div>
 
291
  </div>
292
  </div>
293
  </div>