Hugging Face's logo

Spaces:
huggingface
/
inference-playground
Running

App Files Community
3
mishig HF staff commited on
Commit
3d94876
•
1 Parent(s): de2b2e9

Support config options when running models in comparison (#14)

Browse files

![image](https://github.com/user-attachments/assets/94227701-d1a1-4bd3-b72b-384218d444cd)

Files changed (2) hide show
  1. src/lib/components/Conversation.svelte +6 -1
  2. src/lib/components/GenerationConfig.svelte +47 -53
src/lib/components/Conversation.svelte CHANGED
@@ -2,6 +2,7 @@
2
  import { createEventDispatcher } from 'svelte';
3
  import CodeSnippets from '$lib/components/CodeSnippets.svelte';
4
  import Message from '$lib/components/Message.svelte';
 
5
 
6
  export let loading;
7
  export let conversation;
@@ -51,7 +52,7 @@
51
  ✕
52
  </button>
53
  <button
54
- class=" flex size-6 items-center justify-center rounded bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
55
  >
56
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
57
  ><path
@@ -62,6 +63,10 @@
62
  d="M16 22a6 6 0 1 1 6-6a5.94 5.94 0 0 1-6 6Zm0-10a3.91 3.91 0 0 0-4 4a3.91 3.91 0 0 0 4 4a3.91 3.91 0 0 0 4-4a3.91 3.91 0 0 0-4-4Z"
63
  /></svg
64
  >
 
 
 
 
65
  </button>
66
  </div>
67
  {/if}
 
2
  import { createEventDispatcher } from 'svelte';
3
  import CodeSnippets from '$lib/components/CodeSnippets.svelte';
4
  import Message from '$lib/components/Message.svelte';
5
+ import PlaygroundOptions from '$lib/components/GenerationConfig.svelte';
6
 
7
  export let loading;
8
  export let conversation;
 
52
  ✕
53
  </button>
54
  <button
55
+ class="group relative flex size-6 items-center justify-center rounded bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
56
  >
57
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
58
  ><path
 
63
  d="M16 22a6 6 0 1 1 6-6a5.94 5.94 0 0 1-6 6Zm0-10a3.91 3.91 0 0 0-4 4a3.91 3.91 0 0 0 4 4a3.91 3.91 0 0 0 4-4a3.91 3.91 0 0 0-4-4Z"
64
  /></svg
65
  >
66
+ <PlaygroundOptions
67
+ bind:config={conversation.config}
68
+ classNames="absolute top-8 right-0 w-56 invisible group-focus:visible hover:visible border border-gray-200/80 bg-white z-10 px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800 rounded-xl"
69
+ />
70
  </button>
71
  </div>
72
  {/if}
src/lib/components/GenerationConfig.svelte CHANGED
@@ -5,73 +5,67 @@
5
  // export let jsonMode = true;
6
 
7
  export let config;
 
8
  </script>
9
 
10
- <div>
11
- <div class="flex items-center justify-between">
12
- <label
13
- for="temperature-range"
14
- class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Temperature</label
15
- >
 
 
 
 
 
 
 
 
 
 
16
  <input
17
- type="number"
18
- class="w-16 rounded border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
19
  bind:value={config.temperature}
20
  min="0"
21
  max="1"
22
  step="0.1"
 
23
  />
24
  </div>
25
- <input
26
- id="temperature-range"
27
- type="range"
28
- bind:value={config.temperature}
29
- min="0"
30
- max="1"
31
- step="0.1"
32
- class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700 dark:accent-blue-500"
33
- />
34
- </div>
35
- <div>
36
- <div class="flex items-center justify-between">
37
- <label
38
- for="max-tokens-range"
39
- class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Max tokens</label
40
- >
41
  <input
42
- type="number"
43
- class="w-20 rounded border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
44
  bind:value={config.maxTokens}
45
  min="0"
46
  max="4096"
47
  step="512"
 
48
  />
49
  </div>
50
- <input
51
- id="max-tokens-range"
52
- type="range"
53
- bind:value={config.maxTokens}
54
- min="0"
55
- max="4096"
56
- step="512"
57
- class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700 dark:accent-blue-500"
58
- />
59
- </div>
60
- <div class="mt-2">
61
- <label class="flex cursor-pointer items-center justify-between">
62
- <input type="checkbox" bind:checked={config.streaming} class="peer sr-only" />
63
- <span class="text-sm font-medium text-gray-900 dark:text-gray-300">Streaming</span>
64
- <div
65
- class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
66
- ></div>
67
- </label>
68
- </div>
69
- <div class="mt-2">
70
- <label class="flex cursor-pointer items-center justify-between">
71
- <input type="checkbox" value="" class="peer sr-only" disabled bind:checked={config.jsonMode} />
72
- <span class="text-sm font-medium text-gray-900 dark:text-gray-300">JSON Mode</span>
73
- <div
74
- class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
75
- ></div>
76
- </label>
77
  </div>
 
5
  // export let jsonMode = true;
6
 
7
  export let config;
8
+ export let classNames = '';
9
  </script>
10
 
11
+ <div class={classNames}>
12
+ <div>
13
+ <div class="flex items-center justify-between">
14
+ <label
15
+ for="temperature-range"
16
+ class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Temperature</label
17
+ >
18
+ <input
19
+ type="number"
20
+ class="w-16 rounded border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
21
+ bind:value={config.temperature}
22
+ min="0"
23
+ max="1"
24
+ step="0.1"
25
+ />
26
+ </div>
27
  <input
28
+ id="temperature-range"
29
+ type="range"
30
  bind:value={config.temperature}
31
  min="0"
32
  max="1"
33
  step="0.1"
34
+ class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700 dark:accent-blue-500"
35
  />
36
  </div>
37
+ <div>
38
+ <div class="flex items-center justify-between">
39
+ <label
40
+ for="max-tokens-range"
41
+ class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Max tokens</label
42
+ >
43
+ <input
44
+ type="number"
45
+ class="w-20 rounded border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
46
+ bind:value={config.maxTokens}
47
+ min="0"
48
+ max="4096"
49
+ step="512"
50
+ />
51
+ </div>
 
52
  <input
53
+ id="max-tokens-range"
54
+ type="range"
55
  bind:value={config.maxTokens}
56
  min="0"
57
  max="4096"
58
  step="512"
59
+ class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700 dark:accent-blue-500"
60
  />
61
  </div>
62
+ <div class="mt-2">
63
+ <label class="flex cursor-pointer items-center justify-between">
64
+ <input type="checkbox" bind:checked={config.streaming} class="peer sr-only" />
65
+ <span class="text-sm font-medium text-gray-900 dark:text-gray-300">Streaming</span>
66
+ <div
67
+ class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
68
+ ></div>
69
+ </label>
70
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71
  </div>