1
1
import { CurrencyDollarIcon , XCircleIcon } from '@heroicons/react/24/solid' ;
2
- import { MLCEngine } from '@mlc-ai/web-llm' ;
3
2
import { useAtom } from 'jotai' ;
4
3
import {
5
4
LLMModelsList ,
6
5
LLMProvider ,
7
6
LLMProviders ,
8
7
LLMProvidersList ,
9
- localModelSizes ,
10
8
modelCosts ,
11
9
} from 'litlytics' ;
12
10
import _ from 'lodash' ;
13
11
import { useEffect , useMemo , useState } from 'react' ;
14
- import { configAtom , webllmAtom } from '~/store/store' ;
12
+ import { configAtom } from '~/store/store' ;
15
13
import { Badge } from '../catalyst/badge' ;
16
- import { Button } from '../catalyst/button' ;
17
14
import { Description , Field , FieldGroup , Label } from '../catalyst/fieldset' ;
18
15
import { Input } from '../catalyst/input' ;
19
16
import { Select } from '../catalyst/select' ;
20
- import { Spinner } from '../Spinner' ;
21
17
import { ProviderKeysHint , providerNames } from './ProviderKeys' ;
22
18
import { Recommended , recommendedForProvider } from './Recommended' ;
23
19
24
- export function Settings ( { close } : { close : ( ) => void } ) {
25
- const [ webllm , setWebllm ] = useAtom ( webllmAtom ) ;
20
+ export function Settings ( { close : _close } : { close : ( ) => void } ) {
26
21
const [ config , setConfig ] = useAtom ( configAtom ) ;
27
22
const [ providers , setProviders ] = useState < LLMProviders [ ] > ( [ ] ) ;
28
23
@@ -34,67 +29,11 @@ export function Settings({ close }: { close: () => void }) {
34
29
const prov : LLMProviders [ ] = structuredClone (
35
30
LLMProvidersList
36
31
) as unknown as LLMProviders [ ] ;
37
- try {
38
- if ( ! navigator . gpu ) {
39
- setProviders ( prov ) ;
40
- return ;
41
- }
42
-
43
- const adapter = await navigator . gpu . requestAdapter ( ) ;
44
- if ( ! adapter ) {
45
- setProviders ( prov ) ;
46
- return ;
47
- }
48
-
49
- const device = await adapter . requestDevice ( ) ;
50
- if ( ! device ) {
51
- setProviders ( prov ) ;
52
- return ;
53
- }
54
-
55
- setProviders ( [ 'local' , ...prov ] ) ;
56
- } catch ( err ) {
57
- console . error ( err ) ;
58
- setProviders ( prov ) ;
59
- }
32
+ setProviders ( prov ) ;
60
33
}
61
34
loadProviders ( ) ;
62
35
} , [ ] ) ;
63
36
64
- const loadLocalModel = ( ) => {
65
- if ( ! config . model ) {
66
- return ;
67
- }
68
- // create engine
69
- const engine = new MLCEngine ( ) ;
70
- engine . setInitProgressCallback ( ( initProgress ) => {
71
- const textProgress = initProgress . text . split ( '[' ) . at ( 1 ) ?. split ( ']' ) . at ( 0 ) ;
72
- const isFetching = initProgress . text . includes ( 'Fetching' ) ;
73
- const isFinished = initProgress . text . includes ( 'Finish' ) ;
74
- const [ leftProgress , rightProgress ] = textProgress ?. split ( '/' ) ?? [
75
- '0' ,
76
- '1' ,
77
- ] ;
78
- const loadProgress = parseInt ( leftProgress ) / parseInt ( rightProgress ) ;
79
- // console.log({
80
- // fetchProgress: isFetching ? initProgress.progress : 1,
81
- // loadProgress,
82
- // status: initProgress.text,
83
- // });
84
- setWebllm ( {
85
- engine,
86
- fetchProgress : isFetching ? initProgress . progress : 1 ,
87
- loadProgress : isFinished ? 1 : loadProgress ,
88
- status : initProgress . text ,
89
- } ) ;
90
- if ( isFinished ) {
91
- close ( ) ;
92
- }
93
- } ) ;
94
- engine . reload ( config . model ) ;
95
- setWebllm ( { engine, fetchProgress : 0 , loadProgress : 0 , status : '' } ) ;
96
- } ;
97
-
98
37
return (
99
38
< div className = "max-w-full" >
100
39
< FieldGroup >
@@ -114,7 +53,7 @@ export function Settings({ close }: { close: () => void }) {
114
53
>
115
54
{ providers . map ( ( prov ) => (
116
55
< option key = { prov } value = { prov } >
117
- { prov == 'local' ? 'local' : providerNames [ prov ] }
56
+ { providerNames [ prov ] }
118
57
</ option >
119
58
) ) }
120
59
</ Select >
@@ -155,7 +94,7 @@ export function Settings({ close }: { close: () => void }) {
155
94
) ) }
156
95
</ Select >
157
96
) }
158
- { config . provider !== 'local' && config . provider !== ' ollama' && (
97
+ { config . provider !== 'ollama' && (
159
98
< Description className = "flex gap-2" >
160
99
< Badge title = "Input price (USD) per million tokens" >
161
100
Input: < CurrencyDollarIcon className = "w-3 h-3" /> { ' ' }
@@ -190,7 +129,7 @@ export function Settings({ close }: { close: () => void }) {
190
129
</ Field >
191
130
) }
192
131
193
- { config . provider !== 'local' && config . provider !== ' ollama' && (
132
+ { config . provider !== 'ollama' && (
194
133
< Field >
195
134
< Label > API Key</ Label >
196
135
< Input
@@ -211,67 +150,29 @@ export function Settings({ close }: { close: () => void }) {
211
150
) }
212
151
</ Field >
213
152
) }
214
-
215
- { config . provider === 'local' && (
216
- < Field className = "flex flex-col" >
217
- < div className = "flex items-center gap-2" >
218
- < Button
219
- onClick = { loadLocalModel }
220
- title = { webllm . status ?? '' }
221
- disabled = { webllm . fetchProgress !== - 1 }
222
- >
223
- { webllm . fetchProgress > - 1 && webllm . fetchProgress < 1 ? (
224
- < >
225
- < Spinner className = "w-3 h-3" />
226
- Fetching { Math . round ( webllm . fetchProgress * 100 ) } %
227
- </ >
228
- ) : webllm . loadProgress > - 1 && webllm . loadProgress < 1 ? (
229
- < >
230
- < Spinner className = "w-3 h-3" />
231
- Loading { Math . round ( webllm . loadProgress * 100 ) } %
232
- </ >
233
- ) : webllm . loadProgress === 1 ? (
234
- 'Model loaded'
235
- ) : (
236
- 'Load model'
237
- ) }
238
- </ Button >
239
- < Description >
240
- Download and use selected model locally. This model size is:{ ' ' }
241
- < strong > { localModelSizes [ config . model ! ] } mb</ strong >
242
- </ Description >
243
- </ div >
244
- < Description className = "mt-4 mx-1 !text-xs" >
245
- Please note that local model are worse at generating pipelines
246
- that their larger counterparts.
247
- </ Description >
248
- </ Field >
249
- ) }
250
153
</ FieldGroup >
251
154
252
- { ! config . llmKey ?. length &&
253
- config . provider !== 'local' &&
254
- config . provider !== 'ollama' && (
255
- < >
256
- < ProviderKeysHint provider = { provider as LLMProvider } />
257
- < div className = "rounded-md bg-red-50 dark:bg-red-900 p-4 mt-4" >
258
- < div className = "flex" >
259
- < div className = "flex-shrink-0" >
260
- < XCircleIcon
261
- aria-hidden = "true"
262
- className = "h-5 w-5 text-red-400 dark:text-red-200"
263
- />
264
- </ div >
265
- < div className = "ml-3" >
266
- < h3 className = "text-sm font-medium text-red-800 dark:text-red-200" >
267
- Choose a provider, model and set a key for the provider of
268
- your choice to get started!
269
- </ h3 >
270
- </ div >
155
+ { ! config . llmKey ?. length && config . provider !== 'ollama' && (
156
+ < >
157
+ < ProviderKeysHint provider = { provider as LLMProvider } />
158
+ < div className = "rounded-md bg-red-50 dark:bg-red-900 p-4 mt-4" >
159
+ < div className = "flex" >
160
+ < div className = "flex-shrink-0" >
161
+ < XCircleIcon
162
+ aria-hidden = "true"
163
+ className = "h-5 w-5 text-red-400 dark:text-red-200"
164
+ />
165
+ </ div >
166
+ < div className = "ml-3" >
167
+ < h3 className = "text-sm font-medium text-red-800 dark:text-red-200" >
168
+ Choose a provider, model and set a key for the provider of
169
+ your choice to get started!
170
+ </ h3 >
271
171
</ div >
272
172
</ div >
273
- </ >
274
- ) }
173
+ </ div >
174
+ </ >
175
+ ) }
275
176
</ div >
276
177
) ;
277
178
}
0 commit comments