AdvancedParams.svelte 17.8 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
<script lang="ts">
Timothy J. Baek's avatar
Timothy J. Baek committed
2
3
4
	import { getContext, createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();
5
6
7

	const i18n = getContext('i18n');

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
8
	export let params = {
Timothy J. Baek's avatar
Timothy J. Baek committed
9
10
		// Advanced
		seed: 0,
Timothy J. Baek's avatar
Timothy J. Baek committed
11
		stop: null,
Timothy J. Baek's avatar
Timothy J. Baek committed
12
		temperature: '',
13
		frequency_penalty: '',
Timothy J. Baek's avatar
Timothy J. Baek committed
14
15
16
17
18
19
20
21
		repeat_last_n: '',
		mirostat: '',
		mirostat_eta: '',
		mirostat_tau: '',
		top_k: '',
		top_p: '',
		tfs_z: '',
		num_ctx: '',
22
		max_tokens: '',
23
24
25
		use_mmap: null,
		use_mlock: null,
		num_thread: null,
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
26
		template: null
Timothy J. Baek's avatar
Timothy J. Baek committed
27
	};
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
28
29
30

	let customFieldName = '';
	let customFieldValue = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
31
32
33
34

	$: if (params) {
		dispatch('change', params);
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
35
36
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
37
<div class=" space-y-1 text-xs">
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">{$i18n.t('Seed')}</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					params.seed = (params?.seed ?? null) === null ? 0 : null;
				}}
			>
				{#if (params?.seed ?? null) === null}
					<span class="ml-2 self-center"> {$i18n.t('Default')} </span>
				{:else}
					<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
				{/if}
			</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
55
56
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
57
58
59
60
61
62
63
64
65
66
67
68
		{#if (params?.seed ?? null) !== null}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
						type="number"
						placeholder="Enter Seed"
						bind:value={params.seed}
						autocomplete="off"
						min="0"
					/>
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
69
			</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">{$i18n.t('Stop Sequence')}</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					params.stop = (params?.stop ?? null) === null ? '' : null;
				}}
			>
				{#if (params?.stop ?? null) === null}
					<span class="ml-2 self-center"> {$i18n.t('Default')} </span>
				{:else}
					<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
				{/if}
			</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
90
		</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
91
92
93
94
95
96
97
98
99
100
101
102
103
104

		{#if (params?.stop ?? null) !== null}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
						type="text"
						placeholder={$i18n.t('Enter stop sequence')}
						bind:value={params.stop}
						autocomplete="off"
					/>
				</div>
			</div>
		{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
105
106
107
108
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
109
			<div class=" self-center text-xs font-medium">{$i18n.t('Temperature')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
110
111
112
113
114

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
115
					params.temperature = (params?.temperature ?? '') === '' ? 0.8 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
116
117
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
118
				{#if (params?.temperature ?? '') === ''}
119
					<span class="ml-2 self-center"> {$i18n.t('Default')} </span>
Timothy J. Baek's avatar
Timothy J. Baek committed
120
				{:else}
121
					<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
Timothy J. Baek's avatar
Timothy J. Baek committed
122
123
124
125
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
126
		{#if (params?.temperature ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
127
128
129
130
131
132
133
134
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="1"
						step="0.05"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
135
						bind:value={params.temperature}
Timothy J. Baek's avatar
Timothy J. Baek committed
136
137
138
139
140
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
141
						bind:value={params.temperature}
Timothy J. Baek's avatar
Timothy J. Baek committed
142
143
144
145
146
147
148
149
150
151
152
153
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="1"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
154
			<div class=" self-center text-xs font-medium">{$i18n.t('Mirostat')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
155
156
157
158
159

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
160
					params.mirostat = (params?.mirostat ?? '') === '' ? 0 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
161
162
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
163
				{#if (params?.mirostat ?? '') === ''}
164
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
165
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
166
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
167
168
169
170
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
171
		{#if (params?.mirostat ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
172
173
174
175
176
177
178
179
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="2"
						step="1"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
180
						bind:value={params.mirostat}
Timothy J. Baek's avatar
Timothy J. Baek committed
181
182
183
184
185
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
186
						bind:value={params.mirostat}
Timothy J. Baek's avatar
Timothy J. Baek committed
187
188
189
190
191
192
193
194
195
196
197
198
199
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="2"
						step="1"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
200
			<div class=" self-center text-xs font-medium">{$i18n.t('Mirostat Eta')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
201
202
203
204
205

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
206
					params.mirostat_eta = (params?.mirostat_eta ?? '') === '' ? 0.1 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
207
208
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
209
				{#if (params?.mirostat_eta ?? '') === ''}
210
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
211
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
212
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
213
214
215
216
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
217
		{#if (params?.mirostat_eta ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
218
219
220
221
222
223
224
225
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="1"
						step="0.05"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
226
						bind:value={params.mirostat_eta}
Timothy J. Baek's avatar
Timothy J. Baek committed
227
228
229
230
231
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
232
						bind:value={params.mirostat_eta}
Timothy J. Baek's avatar
Timothy J. Baek committed
233
234
235
236
237
238
239
240
241
242
243
244
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="1"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
245
			<div class=" self-center text-xs font-medium">{$i18n.t('Mirostat Tau')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
246
247
248
249
250

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
251
					params.mirostat_tau = (params?.mirostat_tau ?? '') === '' ? 5.0 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
252
253
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
254
				{#if (params?.mirostat_tau ?? '') === ''}
255
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
256
				{:else}
257
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
258
259
260
261
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
262
		{#if (params?.mirostat_tau ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
263
264
265
266
267
268
269
270
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="10"
						step="0.5"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
271
						bind:value={params.mirostat_tau}
Timothy J. Baek's avatar
Timothy J. Baek committed
272
273
274
275
276
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
277
						bind:value={params.mirostat_tau}
Timothy J. Baek's avatar
Timothy J. Baek committed
278
279
280
281
282
283
284
285
286
287
288
289
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="10"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
290
			<div class=" self-center text-xs font-medium">{$i18n.t('Top K')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
291
292
293
294
295

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
296
					params.top_k = (params?.top_k ?? '') === '' ? 40 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
297
298
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
299
				{#if (params?.top_k ?? '') === ''}
300
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
301
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
302
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
303
304
305
306
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
307
		{#if (params?.top_k ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
308
309
310
311
312
313
314
315
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="100"
						step="0.5"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
316
						bind:value={params.top_k}
Timothy J. Baek's avatar
Timothy J. Baek committed
317
318
319
320
321
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
322
						bind:value={params.top_k}
Timothy J. Baek's avatar
Timothy J. Baek committed
323
324
325
326
327
328
329
330
331
332
333
334
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="100"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
335
			<div class=" self-center text-xs font-medium">{$i18n.t('Top P')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
336
337
338
339
340

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
341
					params.top_p = (params?.top_p ?? '') === '' ? 0.9 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
342
343
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
344
				{#if (params?.top_p ?? '') === ''}
345
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
346
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
347
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
348
349
350
351
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
352
		{#if (params?.top_p ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
353
354
355
356
357
358
359
360
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="1"
						step="0.05"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
361
						bind:value={params.top_p}
Timothy J. Baek's avatar
Timothy J. Baek committed
362
363
364
365
366
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
367
						bind:value={params.top_p}
Timothy J. Baek's avatar
Timothy J. Baek committed
368
369
370
371
372
373
374
375
376
377
378
379
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="1"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
Timothy J. Baek's avatar
Timothy J. Baek committed
380
			<div class=" self-center text-xs font-medium">{$i18n.t('Frequency Penalty')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
381
382
383
384
385

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
386
					params.frequency_penalty = (params?.frequency_penalty ?? '') === '' ? 1.1 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
387
388
				}}
			>
389
				{#if (params?.frequency_penalty ?? '') === ''}
390
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
391
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
392
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
393
394
395
396
				{/if}
			</button>
		</div>

397
		{#if (params?.frequency_penalty ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
398
399
400
401
402
403
404
405
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="2"
						step="0.05"
406
						bind:value={params.frequency_penalty}
Timothy J. Baek's avatar
Timothy J. Baek committed
407
408
409
410
411
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
412
						bind:value={params.frequency_penalty}
Timothy J. Baek's avatar
Timothy J. Baek committed
413
414
415
416
417
418
419
420
421
422
423
424
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="2"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
425
			<div class=" self-center text-xs font-medium">{$i18n.t('Repeat Last N')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
426
427
428
429
430

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
431
					params.repeat_last_n = (params?.repeat_last_n ?? '') === '' ? 64 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
432
433
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
434
				{#if (params?.repeat_last_n ?? '') === ''}
435
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
436
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
437
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
438
439
440
441
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
442
		{#if (params?.repeat_last_n ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
443
444
445
446
447
448
449
450
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="-1"
						max="128"
						step="1"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
451
						bind:value={params.repeat_last_n}
Timothy J. Baek's avatar
Timothy J. Baek committed
452
453
454
455
456
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
457
						bind:value={params.repeat_last_n}
Timothy J. Baek's avatar
Timothy J. Baek committed
458
459
460
461
462
463
464
465
466
467
468
469
470
						type="number"
						class=" bg-transparent text-center w-14"
						min="-1"
						max="128"
						step="1"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
471
			<div class=" self-center text-xs font-medium">{$i18n.t('Tfs Z')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
472
473
474
475
476

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
477
					params.tfs_z = (params?.tfs_z ?? '') === '' ? 1 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
478
479
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
480
				{#if (params?.tfs_z ?? '') === ''}
481
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
482
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
483
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
484
485
486
487
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
488
		{#if (params?.tfs_z ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
489
490
491
492
493
494
495
496
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="2"
						step="0.05"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
497
						bind:value={params.tfs_z}
Timothy J. Baek's avatar
Timothy J. Baek committed
498
499
500
501
502
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
503
						bind:value={params.tfs_z}
Timothy J. Baek's avatar
Timothy J. Baek committed
504
505
506
507
508
509
510
511
512
513
514
515
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="2"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
516
			<div class=" self-center text-xs font-medium">{$i18n.t('Context Length')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
517
518
519
520
521

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
522
					params.num_ctx = (params?.num_ctx ?? '') === '' ? 2048 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
523
524
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
525
				{#if (params?.num_ctx ?? '') === ''}
526
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
527
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
528
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
529
530
531
532
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
533
		{#if (params?.num_ctx ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
534
535
536
537
538
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
Timothy J. Baek's avatar
Timothy J. Baek committed
539
						min="-1"
Timothy J. Baek's avatar
Timothy J. Baek committed
540
						max="10240000"
Timothy J. Baek's avatar
Timothy J. Baek committed
541
						step="1"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
542
						bind:value={params.num_ctx}
Timothy J. Baek's avatar
Timothy J. Baek committed
543
544
545
546
547
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div class="">
					<input
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
548
						bind:value={params.num_ctx}
Timothy J. Baek's avatar
Timothy J. Baek committed
549
550
						type="number"
						class=" bg-transparent text-center w-14"
Timothy J. Baek's avatar
Timothy J. Baek committed
551
						min="-1"
Timothy J. Baek's avatar
Timothy J. Baek committed
552
						step="1"
Timothy J. Baek's avatar
Timothy J. Baek committed
553
554
555
556
557
					/>
				</div>
			</div>
		{/if}
	</div>
558

Timothy J. Baek's avatar
Timothy J. Baek committed
559
560
	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
561
			<div class=" self-center text-xs font-medium">{$i18n.t('Max Tokens (num_predict)')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
562
563
564
565
566

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
567
					params.max_tokens = (params?.max_tokens ?? '') === '' ? 128 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
568
569
				}}
			>
570
				{#if (params?.max_tokens ?? '') === ''}
571
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
572
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
573
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
574
575
576
577
				{/if}
			</button>
		</div>

578
		{#if (params?.max_tokens ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
579
580
581
582
583
584
585
586
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="-2"
						max="16000"
						step="1"
587
						bind:value={params.max_tokens}
Timothy J. Baek's avatar
Timothy J. Baek committed
588
589
590
591
592
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div class="">
					<input
593
						bind:value={params.max_tokens}
Timothy J. Baek's avatar
Timothy J. Baek committed
594
595
596
597
598
599
600
601
602
603
						type="number"
						class=" bg-transparent text-center w-14"
						min="-2"
						max="16000"
						step="1"
					/>
				</div>
			</div>
		{/if}
	</div>
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">{$i18n.t('use_mmap (Ollama)')}</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					params.use_mmap = (params?.use_mmap ?? null) === null ? true : null;
				}}
			>
				{#if (params?.use_mmap ?? null) === null}
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
				{:else}
					<span class="ml-2 self-center">{$i18n.t('On')}</span>
				{/if}
			</button>
		</div>
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">{$i18n.t('use_mlock (Ollama)')}</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					params.use_mlock = (params?.use_mlock ?? null) === null ? true : null;
				}}
			>
				{#if (params?.use_mlock ?? null) === null}
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
				{:else}
					<span class="ml-2 self-center">{$i18n.t('On')}</span>
				{/if}
			</button>
		</div>
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">{$i18n.t('num_thread (Ollama)')}</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					params.num_thread = (params?.num_thread ?? null) === null ? 2 : null;
				}}
			>
				{#if (params?.num_thread ?? null) === null}
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
				{:else}
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
				{/if}
			</button>
		</div>

		{#if (params?.num_thread ?? null) !== null}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="1"
						max="256"
						step="1"
						bind:value={params.num_thread}
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div class="">
					<input
						bind:value={params.num_thread}
						type="number"
						class=" bg-transparent text-center w-14"
						min="1"
						max="256"
						step="1"
					/>
				</div>
			</div>
		{/if}
	</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">{$i18n.t('Template')}</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					params.template = (params?.template ?? null) === null ? '' : null;
				}}
			>
				{#if (params?.template ?? null) === null}
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
				{:else}
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
				{/if}
			</button>
		</div>

		{#if (params?.template ?? null) !== null}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<textarea
						class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg -mb-1"
						placeholder="Write your model template content here"
						rows="4"
						bind:value={params.template}
					/>
				</div>
			</div>
		{/if}
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
723
</div>