Hugging Face's logo

Spaces:
huggingface
/
inference-playground
Running

App Files Community
2
mishig HF staff commited on
Commit
7b1d26a
•
1 Parent(s): 0b5f169

use models prop

Browse files
Files changed (2) hide show
  1. src/lib/components/InferencePlayground/InferencePlayground.svelte +1 -1
  2. src/lib/components/InferencePlayground/InferencePlaygroundModelPickerModal.svelte +10 -109
src/lib/components/InferencePlayground/InferencePlayground.svelte CHANGED
@@ -388,4 +388,4 @@
388
  {/if}
389
  </div>
390
 
391
- <ModelPickerModal/>
 
388
  {/if}
389
  </div>
390
 
391
+ <ModelPickerModal {models}/>
src/lib/components/InferencePlayground/InferencePlaygroundModelPickerModal.svelte CHANGED
@@ -1,5 +1,5 @@
1
  <script lang="ts">
2
-
3
  </script>
4
 
5
  <div class="fixed inset-0 flex h-screen items-start justify-center bg-black/85 pt-32">
@@ -82,114 +82,15 @@
82
  <div class="p-1">
83
  <div class="px-2 py-1.5 text-xs font-medium text-gray-500">Other Models</div>
84
  <div>
85
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
86
- <span class="inline-flex items-center"
87
- ><span class="text-gray-500">codellama</span><span class="mx-1 text-black">/</span
88
- ><span class="text-black">CodeLlama-34b-Instruct-hf</span></span
89
- >
90
- </div>
91
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
92
- <span class="inline-flex items-center"
93
- ><span class="text-gray-500">google</span><span class="mx-1 text-black">/</span
94
- ><span class="text-black">gemma-1.1-2b-it</span></span
95
- >
96
- </div>
97
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
98
- <span class="inline-flex items-center"
99
- ><span class="text-gray-500">google</span><span class="mx-1 text-black">/</span
100
- ><span class="text-black">gemma-2b-it</span></span
101
- >
102
- </div>
103
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
104
- <span class="inline-flex items-center"
105
- ><span class="text-gray-500">HuggingFaceH4</span><span class="mx-1 text-black"
106
- >/</span
107
- ><span class="text-black">zephyr-7b-alpha</span></span
108
- >
109
- </div>
110
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
111
- <span class="inline-flex items-center"
112
- ><span class="text-gray-500">HuggingFaceH4</span><span class="mx-1 text-black"
113
- >/</span
114
- ><span class="text-black">zephyr-7b-beta</span></span
115
- >
116
- </div>
117
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
118
- <span class="inline-flex items-center"
119
- ><span class="text-gray-500">HuggingFaceH4</span><span class="mx-1 text-black"
120
- >/</span
121
- ><span class="text-black">zephyr-orpo-141b-A35b-v0.1</span></span
122
- >
123
- </div>
124
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
125
- <span class="inline-flex items-center"
126
- ><span class="text-gray-500">HuggingFaceTB</span><span class="mx-1 text-black"
127
- >/</span
128
- ><span class="text-black">SmolLM-1.7B-Instruct</span></span
129
- >
130
- </div>
131
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
132
- <span class="inline-flex items-center"
133
- ><span class="text-gray-500">meta-llama</span><span class="mx-1 text-black">/</span
134
- ><span class="text-black">Llama-2-13b-chat-hf</span></span
135
- >
136
- </div>
137
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
138
- <span class="inline-flex items-center"
139
- ><span class="text-gray-500">meta-llama</span><span class="mx-1 text-black">/</span
140
- ><span class="text-black">Llama-2-70b-chat-hf</span></span
141
- >
142
- </div>
143
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
144
- <span class="inline-flex items-center"
145
- ><span class="text-gray-500">meta-llama</span><span class="mx-1 text-black">/</span
146
- ><span class="text-black">Llama-2-7b-chat-hf</span></span
147
- >
148
- </div>
149
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
150
- <span class="inline-flex items-center"
151
- ><span class="text-gray-500">meta-llama</span><span class="mx-1 text-black">/</span
152
- ><span class="text-black">Meta-Llama-3-8B-Instruct</span></span
153
- >
154
- </div>
155
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
156
- <span class="inline-flex items-center"
157
- ><span class="text-gray-500">microsoft</span><span class="mx-1 text-black">/</span
158
- ><span class="text-black">DialoGPT-large</span></span
159
- >
160
- </div>
161
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
162
- <span class="inline-flex items-center"
163
- ><span class="text-gray-500">mistralai</span><span class="mx-1 text-black">/</span
164
- ><span class="text-black">Mistral-7B-Instruct-v0.1</span></span
165
- >
166
- </div>
167
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
168
- <span class="inline-flex items-center"
169
- ><span class="text-gray-500">mistralai</span><span class="mx-1 text-black">/</span
170
- ><span class="text-black">Mistral-7B-Instruct-v0.2</span></span
171
- >
172
- </div>
173
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
174
- <span class="inline-flex items-center"
175
- ><span class="text-gray-500">mistralai</span><span class="mx-1 text-black">/</span
176
- ><span class="text-black">Mistral-7B-Instruct-v0.3</span></span
177
- >
178
- </div>
179
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
180
- <span class="inline-flex items-center"
181
- ><span class="text-gray-500">NousResearch</span><span class="mx-1 text-black"
182
- >/</span
183
- ><span class="text-black">Nous-Hermes-2-Mixtral-8x7B-DPO</span></span
184
- >
185
- </div>
186
- <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
187
- <span class="inline-flex items-center"
188
- ><span class="text-gray-500">Qwen</span><span class="mx-1 text-black">/</span><span
189
- class="text-black">Qwen2-0.5B-Instruct</span
190
- ></span
191
- >
192
- </div>
193
  </div>
194
  </div>
195
  </div>
 
1
  <script lang="ts">
2
+ export let models: ModelEntryWithTokenizer[];
3
  </script>
4
 
5
  <div class="fixed inset-0 flex h-screen items-start justify-center bg-black/85 pt-32">
 
82
  <div class="p-1">
83
  <div class="px-2 py-1.5 text-xs font-medium text-gray-500">Other Models</div>
84
  <div>
85
+ {#each models as model}
86
+ {@const [nameSpace, modelName] = model.id.split("/")}
87
+ <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
88
+ <span class="inline-flex items-center"
89
+ ><span class="text-gray-500">{nameSpace}</span><span class="mx-1 text-black">/</span
90
+ ><span class="text-black">{modelName}</span></span
91
+ >
92
+ </div>
93
+ {/each}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
  </div>
95
  </div>
96
  </div>