Refactor Icons (#31)
Browse files- src/lib/components/Icons/IconCaret.svelte +19 -0
- src/lib/components/Icons/IconCode.svelte +21 -0
- src/lib/components/Icons/IconCross.svelte +21 -0
- src/lib/components/Icons/IconDelete.svelte +24 -0
- src/lib/components/Icons/IconPlus.svelte +15 -0
- src/lib/components/Icons/IconShare.svelte +19 -0
- src/lib/components/InferencePlayground/InferencePlayground.svelte +9 -46
- src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte +2 -11
- src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte +2 -15
src/lib/components/Icons/IconCaret.svelte
ADDED
@@ -0,0 +1,19 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script lang="ts">
|
2 |
+
export let classNames = '';
|
3 |
+
</script>
|
4 |
+
|
5 |
+
<svg
|
6 |
+
class={classNames}
|
7 |
+
xmlns="http://www.w3.org/2000/svg"
|
8 |
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
9 |
+
aria-hidden="true"
|
10 |
+
role="img"
|
11 |
+
width="1em"
|
12 |
+
height="1em"
|
13 |
+
preserveAspectRatio="xMidYMid meet"
|
14 |
+
viewBox="0 0 24 24"
|
15 |
+
><path
|
16 |
+
d="M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"
|
17 |
+
fill="currentColor"
|
18 |
+
/>
|
19 |
+
</svg>
|
src/lib/components/Icons/IconCode.svelte
ADDED
@@ -0,0 +1,21 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script lang="ts">
|
2 |
+
export let classNames = '';
|
3 |
+
</script>
|
4 |
+
|
5 |
+
<svg
|
6 |
+
class={classNames}
|
7 |
+
xmlns="http://www.w3.org/2000/svg"
|
8 |
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
9 |
+
aria-hidden="true"
|
10 |
+
focusable="false"
|
11 |
+
role="img"
|
12 |
+
width="1em"
|
13 |
+
height="1em"
|
14 |
+
preserveAspectRatio="xMidYMid meet"
|
15 |
+
viewBox="0 0 32 32"
|
16 |
+
style="transform: rotate(360deg);"
|
17 |
+
>
|
18 |
+
<path d="M31 16l-7 7l-1.41-1.41L28.17 16l-5.58-5.59L24 9l7 7z" fill="currentColor" />
|
19 |
+
<path d="M1 16l7-7l1.41 1.41L3.83 16l5.58 5.59L8 23l-7-7z" fill="currentColor" />
|
20 |
+
<path d="M12.419 25.484L17.639 6l1.932.518L14.35 26z" fill="currentColor" />
|
21 |
+
</svg>
|
src/lib/components/Icons/IconCross.svelte
ADDED
@@ -0,0 +1,21 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script lang="ts">
|
2 |
+
export let classNames = '';
|
3 |
+
</script>
|
4 |
+
|
5 |
+
<svg
|
6 |
+
class={classNames}
|
7 |
+
xmlns="http://www.w3.org/2000/svg"
|
8 |
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
9 |
+
aria-hidden="true"
|
10 |
+
focusable="false"
|
11 |
+
role="img"
|
12 |
+
width="1.1em"
|
13 |
+
height="1.1em"
|
14 |
+
preserveAspectRatio="xMidYMid meet"
|
15 |
+
viewBox="0 0 32 32"
|
16 |
+
>
|
17 |
+
<path
|
18 |
+
d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z"
|
19 |
+
fill="currentColor"
|
20 |
+
/>
|
21 |
+
</svg>
|
src/lib/components/Icons/IconDelete.svelte
ADDED
@@ -0,0 +1,24 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script lang="ts">
|
2 |
+
export let classNames = '';
|
3 |
+
</script>
|
4 |
+
|
5 |
+
<svg
|
6 |
+
class={classNames}
|
7 |
+
xmlns="http://www.w3.org/2000/svg"
|
8 |
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
9 |
+
aria-hidden="true"
|
10 |
+
focusable="false"
|
11 |
+
role="img"
|
12 |
+
width="1em"
|
13 |
+
height="1em"
|
14 |
+
preserveAspectRatio="xMidYMid meet"
|
15 |
+
viewBox="0 0 32 32"
|
16 |
+
>
|
17 |
+
<path d="M12 12h2v12h-2z" fill="currentColor" /><path
|
18 |
+
d="M18 12h2v12h-2z"
|
19 |
+
fill="currentColor"
|
20 |
+
/><path
|
21 |
+
d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z"
|
22 |
+
fill="currentColor"
|
23 |
+
/><path d="M12 2h8v2h-8z" fill="currentColor" />
|
24 |
+
</svg>
|
src/lib/components/Icons/IconPlus.svelte
ADDED
@@ -0,0 +1,15 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script lang="ts">
|
2 |
+
export let classNames = '';
|
3 |
+
</script>
|
4 |
+
|
5 |
+
<svg
|
6 |
+
class={classNames}
|
7 |
+
xmlns="http://www.w3.org/2000/svg"
|
8 |
+
width="1em"
|
9 |
+
height="1em"
|
10 |
+
viewBox="0 0 32 32"
|
11 |
+
><path
|
12 |
+
fill="currentColor"
|
13 |
+
d="M16 2A14.172 14.172 0 0 0 2 16a14.172 14.172 0 0 0 14 14a14.172 14.172 0 0 0 14-14A14.172 14.172 0 0 0 16 2Zm8 15h-7v7h-2v-7H8v-2h7V8h2v7h7Z"
|
14 |
+
/><path fill="none" d="M24 17h-7v7h-2v-7H8v-2h7V8h2v7h7v2z" /></svg
|
15 |
+
>
|
src/lib/components/Icons/IconShare.svelte
ADDED
@@ -0,0 +1,19 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script lang="ts">
|
2 |
+
export let classNames = '';
|
3 |
+
</script>
|
4 |
+
|
5 |
+
<svg
|
6 |
+
class={classNames}
|
7 |
+
width="1em"
|
8 |
+
height="1em"
|
9 |
+
viewBox="0 0 24 25"
|
10 |
+
fill="none"
|
11 |
+
xmlns="http://www.w3.org/2000/svg"
|
12 |
+
>
|
13 |
+
<path
|
14 |
+
fill-rule="evenodd"
|
15 |
+
clip-rule="evenodd"
|
16 |
+
d="M5.41 9.41L4 8L12 0L20 8L18.59 9.41L13 3.83L13 17.5H11L11 3.83L5.41 9.41ZM22 17.5V23H2V17.5H0V23C0 23.5304 0.210714 24.0391 0.585786 24.4142C0.960859 24.7893 1.46957 25 2 25H22C22.5304 25 23.0391 24.7893 23.4142 24.4142C23.7893 24.0391 24 23.5304 24 23V17.5H22Z"
|
17 |
+
fill="currentColor"
|
18 |
+
/>
|
19 |
+
</svg>
|
src/lib/components/InferencePlayground/InferencePlayground.svelte
CHANGED
@@ -13,6 +13,10 @@
|
|
13 |
import { type ChatCompletionInputMessage } from '@huggingface/tasks';
|
14 |
import type { ModelEntryWithTokenizer } from '$lib/types';
|
15 |
import { defaultGenerationConfig } from './generationConfigSettings';
|
|
|
|
|
|
|
|
|
16 |
|
17 |
export let models: ModelEntryWithTokenizer[];
|
18 |
|
@@ -268,20 +272,7 @@
|
|
268 |
<div
|
269 |
class="flex size-5 items-center justify-center rounded border border-black/5 bg-black/5 text-xs"
|
270 |
>
|
271 |
-
<
|
272 |
-
width="1em"
|
273 |
-
height="1em"
|
274 |
-
viewBox="0 0 24 25"
|
275 |
-
fill="none"
|
276 |
-
xmlns="http://www.w3.org/2000/svg"
|
277 |
-
>
|
278 |
-
<path
|
279 |
-
fill-rule="evenodd"
|
280 |
-
clip-rule="evenodd"
|
281 |
-
d="M5.41 9.41L4 8L12 0L20 8L18.59 9.41L13 3.83L13 17.5H11L11 3.83L5.41 9.41ZM22 17.5V23H2V17.5H0V23C0 23.5304 0.210714 24.0391 0.585786 24.4142C0.960859 24.7893 1.46957 25 2 25H22C22.5304 25 23.0391 24.7893 23.4142 24.4142C23.7893 24.0391 24 23.5304 24 23V17.5H22Z"
|
282 |
-
fill="currentColor"
|
283 |
-
/>
|
284 |
-
</svg>
|
285 |
</div>
|
286 |
|
287 |
Share</button
|
@@ -291,13 +282,9 @@
|
|
291 |
type="button"
|
292 |
on:click={reset}
|
293 |
class="flex size-[39px] flex-none items-center justify-center rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
|
294 |
-
><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
|
295 |
-
><path fill="currentColor" d="M12 12h2v12h-2zm6 0h2v12h-2z" /><path
|
296 |
-
fill="currentColor"
|
297 |
-
d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20zm4-26h8v2h-8z"
|
298 |
-
/></svg
|
299 |
-
></button
|
300 |
>
|
|
|
|
|
301 |
<div class="flex-1 items-center justify-center text-center text-sm text-gray-500">
|
302 |
<span class="max-xl:hidden">0 tokens · Latency {latency}ms</span>
|
303 |
</div>
|
@@ -306,17 +293,7 @@
|
|
306 |
on:click={() => (viewCode = !viewCode)}
|
307 |
class="flex h-[39px] items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
|
308 |
>
|
309 |
-
<
|
310 |
-
xmlns="http://www.w3.org/2000/svg"
|
311 |
-
width="1em"
|
312 |
-
height="1em"
|
313 |
-
class="text-base"
|
314 |
-
viewBox="0 0 32 32"
|
315 |
-
><path
|
316 |
-
fill="currentColor"
|
317 |
-
d="m31 16l-7 7l-1.41-1.41L28.17 16l-5.58-5.59L24 9l7 7zM1 16l7-7l1.41 1.41L3.83 16l5.58 5.59L8 23l-7-7zm11.42 9.484L17.64 6l1.932.517L14.352 26z"
|
318 |
-
/></svg
|
319 |
-
>
|
320 |
{!viewCode ? 'View Code' : 'Hide Code'}</button
|
321 |
>
|
322 |
<button
|
@@ -367,21 +344,7 @@
|
|
367 |
class="group relative -mt-4 flex h-[26px] w-full items-center justify-center gap-2 rounded-lg bg-black px-5 text-sm text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-gray-700"
|
368 |
>
|
369 |
Compare with...
|
370 |
-
<
|
371 |
-
class="ml-0.5 flex-none opacity-50 group-hover:opacity-100"
|
372 |
-
xmlns="http://www.w3.org/2000/svg"
|
373 |
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
374 |
-
aria-hidden="true"
|
375 |
-
role="img"
|
376 |
-
width="1em"
|
377 |
-
height="1em"
|
378 |
-
preserveAspectRatio="xMidYMid meet"
|
379 |
-
viewBox="0 0 24 24"
|
380 |
-
><path
|
381 |
-
d="M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"
|
382 |
-
fill="currentColor"
|
383 |
-
></path></svg
|
384 |
-
>
|
385 |
<select
|
386 |
class="absolute inset-0 border-none bg-white text-base opacity-0 outline-none"
|
387 |
on:change|preventDefault={(e) => {
|
|
|
13 |
import { type ChatCompletionInputMessage } from '@huggingface/tasks';
|
14 |
import type { ModelEntryWithTokenizer } from '$lib/types';
|
15 |
import { defaultGenerationConfig } from './generationConfigSettings';
|
16 |
+
import IconShare from '../Icons/IconShare.svelte';
|
17 |
+
import IconDelete from '../Icons/IconDelete.svelte';
|
18 |
+
import IconCode from '../Icons/IconCode.svelte';
|
19 |
+
import IconCaret from '../Icons/IconCaret.svelte';
|
20 |
|
21 |
export let models: ModelEntryWithTokenizer[];
|
22 |
|
|
|
272 |
<div
|
273 |
class="flex size-5 items-center justify-center rounded border border-black/5 bg-black/5 text-xs"
|
274 |
>
|
275 |
+
<IconShare />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
276 |
</div>
|
277 |
|
278 |
Share</button
|
|
|
282 |
type="button"
|
283 |
on:click={reset}
|
284 |
class="flex size-[39px] flex-none items-center justify-center rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
|
|
|
|
|
|
|
|
|
|
|
|
|
285 |
>
|
286 |
+
<IconDelete />
|
287 |
+
</button>
|
288 |
<div class="flex-1 items-center justify-center text-center text-sm text-gray-500">
|
289 |
<span class="max-xl:hidden">0 tokens · Latency {latency}ms</span>
|
290 |
</div>
|
|
|
293 |
on:click={() => (viewCode = !viewCode)}
|
294 |
class="flex h-[39px] items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
|
295 |
>
|
296 |
+
<IconCode />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
297 |
{!viewCode ? 'View Code' : 'Hide Code'}</button
|
298 |
>
|
299 |
<button
|
|
|
344 |
class="group relative -mt-4 flex h-[26px] w-full items-center justify-center gap-2 rounded-lg bg-black px-5 text-sm text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-gray-700"
|
345 |
>
|
346 |
Compare with...
|
347 |
+
<IconCaret classNames="opacity-70" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
348 |
<select
|
349 |
class="absolute inset-0 border-none bg-white text-base opacity-0 outline-none"
|
350 |
on:change|preventDefault={(e) => {
|
src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte
CHANGED
@@ -3,6 +3,7 @@
|
|
3 |
import CodeSnippets from './InferencePlaygroundCodeSnippets.svelte';
|
4 |
import Message from './InferencePlaygroundMessage.svelte';
|
5 |
import PlaygroundOptions from './InferencePlaygroundGenerationConfig.svelte';
|
|
|
6 |
|
7 |
export let loading;
|
8 |
export let conversation;
|
@@ -90,17 +91,7 @@
|
|
90 |
disabled={loading}
|
91 |
>
|
92 |
<div class="flex items-center gap-2 !p-0 text-sm font-semibold">
|
93 |
-
<
|
94 |
-
xmlns="http://www.w3.org/2000/svg"
|
95 |
-
width="1em"
|
96 |
-
height="1em"
|
97 |
-
viewBox="0 0 32 32"
|
98 |
-
class="text-lg"
|
99 |
-
><path
|
100 |
-
fill="currentColor"
|
101 |
-
d="M16 2A14.172 14.172 0 0 0 2 16a14.172 14.172 0 0 0 14 14a14.172 14.172 0 0 0 14-14A14.172 14.172 0 0 0 16 2Zm8 15h-7v7h-2v-7H8v-2h7V8h2v7h7Z"
|
102 |
-
/><path fill="none" d="M24 17h-7v7h-2v-7H8v-2h7V8h2v7h7v2z" /></svg
|
103 |
-
>Add message
|
104 |
</div>
|
105 |
</button>
|
106 |
{:else}
|
|
|
3 |
import CodeSnippets from './InferencePlaygroundCodeSnippets.svelte';
|
4 |
import Message from './InferencePlaygroundMessage.svelte';
|
5 |
import PlaygroundOptions from './InferencePlaygroundGenerationConfig.svelte';
|
6 |
+
import IconPlus from '../Icons/IconPlus.svelte';
|
7 |
|
8 |
export let loading;
|
9 |
export let conversation;
|
|
|
91 |
disabled={loading}
|
92 |
>
|
93 |
<div class="flex items-center gap-2 !p-0 text-sm font-semibold">
|
94 |
+
<IconPlus classNames="text-lg" /> Add message
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
95 |
</div>
|
96 |
</button>
|
97 |
{:else}
|
src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte
CHANGED
@@ -2,6 +2,7 @@
|
|
2 |
<script lang="ts">
|
3 |
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
|
4 |
import { browser } from '$app/environment';
|
|
|
5 |
|
6 |
let backdropEl: HTMLDivElement;
|
7 |
let modalEl: HTMLDivElement;
|
@@ -70,21 +71,7 @@
|
|
70 |
on:click={() => dispatch('close')}
|
71 |
class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
|
72 |
>
|
73 |
-
<
|
74 |
-
class="size-3"
|
75 |
-
aria-hidden="true"
|
76 |
-
xmlns="http://www.w3.org/2000/svg"
|
77 |
-
fill="none"
|
78 |
-
viewBox="0 0 14 14"
|
79 |
-
>
|
80 |
-
<path
|
81 |
-
stroke="currentColor"
|
82 |
-
stroke-linecap="round"
|
83 |
-
stroke-linejoin="round"
|
84 |
-
stroke-width="2"
|
85 |
-
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
|
86 |
-
/>
|
87 |
-
</svg>
|
88 |
<span class="sr-only">Close modal</span>
|
89 |
</button>
|
90 |
</div>
|
|
|
2 |
<script lang="ts">
|
3 |
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
|
4 |
import { browser } from '$app/environment';
|
5 |
+
import IconCross from '../Icons/IconCross.svelte';
|
6 |
|
7 |
let backdropEl: HTMLDivElement;
|
8 |
let modalEl: HTMLDivElement;
|
|
|
71 |
on:click={() => dispatch('close')}
|
72 |
class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
|
73 |
>
|
74 |
+
<IconCross classNames="text-xl" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
75 |
<span class="sr-only">Close modal</span>
|
76 |
</button>
|
77 |
</div>
|