Hugging Face's logo

Spaces:
FallnAI
/
TextGen-Inference
Sleeping

App Files Community
mishig HF Staff commited on
Commit
77100da
·
1 Parent(s): 7965df6

use icons

Browse files
Files changed (3) hide show
  1. src/lib/components/Icons/IconSearch.svelte +21 -0
  2. src/lib/components/Icons/IconStar.svelte +22 -0
  3. src/lib/components/InferencePlayground/InferencePlaygroundModelPickerModal.svelte +5 -45
src/lib/components/Icons/IconSearch.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
+ >
17
+ <path
18
+ d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
19
+ fill="currentColor"
20
+ />
21
+ </svg>
src/lib/components/Icons/IconStar.svelte ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ fill="none"
11
+ focusable="false"
12
+ role="img"
13
+ width="1em"
14
+ height="1em"
15
+ preserveAspectRatio="xMidYMid meet"
16
+ viewBox="0 0 32 32"
17
+ >
18
+ <path
19
+ d="M16 6.52l2.76 5.58l.46 1l1 .15l6.16.89l-4.38 4.3l-.75.73l.18 1l1.05 6.13l-5.51-2.89L16 23l-.93.49l-5.51 2.85l1-6.13l.18-1l-.74-.77l-4.42-4.35l6.16-.89l1-.15l.46-1L16 6.52M16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48z"
20
+ fill="currentColor"
21
+ />
22
+ </svg>
src/lib/components/InferencePlayground/InferencePlaygroundModelPickerModal.svelte CHANGED
@@ -1,6 +1,8 @@
1
  <script lang="ts">
2
  import type { ModelEntryWithTokenizer } from '$lib/types';
3
  import { createEventDispatcher } from 'svelte';
 
 
4
 
5
  export let models: ModelEntryWithTokenizer[];
6
 
@@ -38,21 +40,7 @@
38
  class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md"
39
  >
40
  <div class="flex items-center border-b px-3">
41
- <svg
42
- xmlns="http://www.w3.org/2000/svg"
43
- class="mr-2 text-sm"
44
- width="1em"
45
- height="1em"
46
- viewBox="0 0 24 24"
47
- fill="none"
48
- stroke="currentColor"
49
- stroke-width="2"
50
- stroke-linecap="round"
51
- stroke-linejoin="round"
52
- >
53
- <circle cx="11" cy="11" r="8"></circle>
54
- <path d="m21 21-4.3-4.3"></path>
55
- </svg>
56
  <input
57
  autofocus
58
  class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-none"
@@ -65,42 +53,14 @@
65
  <div class="px-2 py-1.5 text-xs font-medium text-gray-500">Trending</div>
66
  <div>
67
  <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
68
- <svg
69
- xmlns="http://www.w3.org/2000/svg"
70
- width="24"
71
- height="24"
72
- viewBox="0 0 24 24"
73
- fill="none"
74
- stroke="currentColor"
75
- stroke-width="2"
76
- stroke-linecap="round"
77
- stroke-linejoin="round"
78
- class="lucide lucide-star mr-2 h-4 w-4 text-yellow-400"
79
- ><polygon
80
- points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
81
- ></polygon></svg
82
- >
83
  <span class="inline-flex items-center"
84
  ><span class="text-gray-500">meta-llama</span><span class="mx-1 text-black">/</span
85
  ><span class="text-black">Meta-Llama-3-70B-Instruct</span></span
86
  >
87
  </div>
88
  <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
89
- <svg
90
- xmlns="http://www.w3.org/2000/svg"
91
- width="24"
92
- height="24"
93
- viewBox="0 0 24 24"
94
- fill="none"
95
- stroke="currentColor"
96
- stroke-width="2"
97
- stroke-linecap="round"
98
- stroke-linejoin="round"
99
- class="lucide lucide-star mr-2 h-4 w-4 text-yellow-400"
100
- ><polygon
101
- points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
102
- ></polygon></svg
103
- >
104
  <span class="inline-flex items-center"
105
  ><span class="text-gray-500">mistralai</span><span class="mx-1 text-black">/</span
106
  ><span class="text-black">Mixtral-8x7B-Instruct-v0.1</span></span
 
1
  <script lang="ts">
2
  import type { ModelEntryWithTokenizer } from '$lib/types';
3
  import { createEventDispatcher } from 'svelte';
4
+ import IconSearch from '../Icons/IconSearch.svelte';
5
+ import IconStar from '../Icons/IconStar.svelte';
6
 
7
  export let models: ModelEntryWithTokenizer[];
8
 
 
40
  class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md"
41
  >
42
  <div class="flex items-center border-b px-3">
43
+ <IconSearch classNames="mr-2 text-sm" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  <input
45
  autofocus
46
  class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-none"
 
53
  <div class="px-2 py-1.5 text-xs font-medium text-gray-500">Trending</div>
54
  <div>
55
  <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
56
+ <IconStar classNames="lucide lucide-star mr-2 h-4 w-4 text-yellow-400" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  <span class="inline-flex items-center"
58
  ><span class="text-gray-500">meta-llama</span><span class="mx-1 text-black">/</span
59
  ><span class="text-black">Meta-Llama-3-70B-Instruct</span></span
60
  >
61
  </div>
62
  <div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
63
+ <IconStar classNames="lucide lucide-star mr-2 h-4 w-4 text-yellow-400" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  <span class="inline-flex items-center"
65
  ><span class="text-gray-500">mistralai</span><span class="mx-1 text-black">/</span
66
  ><span class="text-black">Mixtral-8x7B-Instruct-v0.1</span></span