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

	const i18n = getContext('i18n');

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
6
	export let params = {
Timothy J. Baek's avatar
Timothy J. Baek committed
7
8
9
10
11
12
13
14
15
16
17
18
19
		// Advanced
		seed: 0,
		stop: '',
		temperature: '',
		repeat_penalty: '',
		repeat_last_n: '',
		mirostat: '',
		mirostat_eta: '',
		mirostat_tau: '',
		top_k: '',
		top_p: '',
		tfs_z: '',
		num_ctx: '',
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
20
21
		num_predict: '',
		template: null
Timothy J. Baek's avatar
Timothy J. Baek committed
22
	};
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
23
24
25

	let customFieldName = '';
	let customFieldValue = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
26
27
28
</script>

<div class=" space-y-3 text-xs">
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
	<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
46
47
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
48
49
50
51
52
53
54
55
56
57
58
59
		{#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
60
			</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
		{/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
81
		</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
82
83
84
85
86
87
88
89
90
91
92
93
94
95

		{#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
96
97
98
99
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
100
			<div class=" self-center text-xs font-medium">{$i18n.t('Temperature')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
101
102
103
104
105

			<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
106
					params.temperature = (params?.temperature ?? '') === '' ? 0.8 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
107
108
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
109
				{#if (params?.temperature ?? '') === ''}
110
					<span class="ml-2 self-center"> {$i18n.t('Default')} </span>
Timothy J. Baek's avatar
Timothy J. Baek committed
111
				{:else}
112
					<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
Timothy J. Baek's avatar
Timothy J. Baek committed
113
114
115
116
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
117
		{#if (params?.temperature ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
118
119
120
121
122
123
124
125
			<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
126
						bind:value={params.temperature}
Timothy J. Baek's avatar
Timothy J. Baek committed
127
128
129
130
131
						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
132
						bind:value={params.temperature}
Timothy J. Baek's avatar
Timothy J. Baek committed
133
134
135
136
137
138
139
140
141
142
143
144
145
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="1"
						step="0.05"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
146
			<div class=" self-center text-xs font-medium">{$i18n.t('Mirostat')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
147
148
149
150
151

			<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
152
					params.mirostat = (params?.mirostat ?? '') === '' ? 0 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
153
154
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
155
				{#if (params?.mirostat ?? '') === ''}
156
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
157
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
158
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
159
160
161
162
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
163
		{#if (params?.mirostat ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
164
165
166
167
168
169
170
171
			<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
172
						bind:value={params.mirostat}
Timothy J. Baek's avatar
Timothy J. Baek committed
173
174
175
176
177
						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
178
						bind:value={params.mirostat}
Timothy J. Baek's avatar
Timothy J. Baek committed
179
180
181
182
183
184
185
186
187
188
189
190
191
						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">
192
			<div class=" self-center text-xs font-medium">{$i18n.t('Mirostat Eta')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
193
194
195
196
197

			<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
198
					params.mirostat_eta = (params?.mirostat_eta ?? '') === '' ? 0.1 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
199
200
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
201
				{#if (params?.mirostat_eta ?? '') === ''}
202
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
203
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
204
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
205
206
207
208
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
209
		{#if (params?.mirostat_eta ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
210
211
212
213
214
215
216
217
			<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
218
						bind:value={params.mirostat_eta}
Timothy J. Baek's avatar
Timothy J. Baek committed
219
220
221
222
223
						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
224
						bind:value={params.mirostat_eta}
Timothy J. Baek's avatar
Timothy J. Baek committed
225
226
227
228
229
230
231
232
233
234
235
236
237
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="1"
						step="0.05"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
238
			<div class=" self-center text-xs font-medium">{$i18n.t('Mirostat Tau')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
239
240
241
242
243

			<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
244
					params.mirostat_tau = (params?.mirostat_tau ?? '') === '' ? 5.0 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
245
246
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
247
				{#if (params?.mirostat_tau ?? '') === ''}
248
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
249
				{:else}
250
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
251
252
253
254
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
255
		{#if (params?.mirostat_tau ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
256
257
258
259
260
261
262
263
			<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
264
						bind:value={params.mirostat_tau}
Timothy J. Baek's avatar
Timothy J. Baek committed
265
266
267
268
269
						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
270
						bind:value={params.mirostat_tau}
Timothy J. Baek's avatar
Timothy J. Baek committed
271
272
273
274
275
276
277
278
279
280
281
282
283
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="10"
						step="0.5"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
284
			<div class=" self-center text-xs font-medium">{$i18n.t('Top K')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
285
286
287
288
289

			<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
290
					params.top_k = (params?.top_k ?? '') === '' ? 40 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
291
292
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
293
				{#if (params?.top_k ?? '') === ''}
294
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
295
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
296
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
297
298
299
300
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
301
		{#if (params?.top_k ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
302
303
304
305
306
307
308
309
			<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
310
						bind:value={params.top_k}
Timothy J. Baek's avatar
Timothy J. Baek committed
311
312
313
314
315
						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
316
						bind:value={params.top_k}
Timothy J. Baek's avatar
Timothy J. Baek committed
317
318
319
320
321
322
323
324
325
326
327
328
329
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="100"
						step="0.5"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
330
			<div class=" self-center text-xs font-medium">{$i18n.t('Top P')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
331
332
333
334
335

			<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
336
					params.top_p = (params?.top_p ?? '') === '' ? 0.9 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
337
338
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
339
				{#if (params?.top_p ?? '') === ''}
340
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
341
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
342
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
343
344
345
346
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
347
		{#if (params?.top_p ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
348
349
350
351
352
353
354
355
			<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
356
						bind:value={params.top_p}
Timothy J. Baek's avatar
Timothy J. Baek committed
357
358
359
360
361
						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
362
						bind:value={params.top_p}
Timothy J. Baek's avatar
Timothy J. Baek committed
363
364
365
366
367
368
369
370
371
372
373
374
375
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="1"
						step="0.05"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
376
			<div class=" self-center text-xs font-medium">{$i18n.t('Repeat Penalty')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
377
378
379
380
381

			<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
382
					params.repeat_penalty = (params?.repeat_penalty ?? '') === '' ? 1.1 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
383
384
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
385
				{#if (params?.repeat_penalty ?? '') === ''}
386
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
387
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
388
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
389
390
391
392
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
393
		{#if (params?.repeat_penalty ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
394
395
396
397
398
399
400
401
			<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
402
						bind:value={params.repeat_penalty}
Timothy J. Baek's avatar
Timothy J. Baek committed
403
404
405
406
407
						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
408
						bind:value={params.repeat_penalty}
Timothy J. Baek's avatar
Timothy J. Baek committed
409
410
411
412
413
414
415
416
417
418
419
420
421
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="2"
						step="0.05"
					/>
				</div>
			</div>
		{/if}
	</div>

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

			<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
428
					params.repeat_last_n = (params?.repeat_last_n ?? '') === '' ? 64 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
429
430
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
431
				{#if (params?.repeat_last_n ?? '') === ''}
432
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
433
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
434
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
435
436
437
438
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
439
		{#if (params?.repeat_last_n ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
440
441
442
443
444
445
446
447
			<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
448
						bind:value={params.repeat_last_n}
Timothy J. Baek's avatar
Timothy J. Baek committed
449
450
451
452
453
						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
454
						bind:value={params.repeat_last_n}
Timothy J. Baek's avatar
Timothy J. Baek committed
455
456
457
458
459
460
461
462
463
464
465
466
467
						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">
468
			<div class=" self-center text-xs font-medium">{$i18n.t('Tfs Z')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
469
470
471
472
473

			<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
474
					params.tfs_z = (params?.tfs_z ?? '') === '' ? 1 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
475
476
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
477
				{#if (params?.tfs_z ?? '') === ''}
478
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
479
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
480
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
481
482
483
484
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
485
		{#if (params?.tfs_z ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
486
487
488
489
490
491
492
493
			<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
494
						bind:value={params.tfs_z}
Timothy J. Baek's avatar
Timothy J. Baek committed
495
496
497
498
499
						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
500
						bind:value={params.tfs_z}
Timothy J. Baek's avatar
Timothy J. Baek committed
501
502
503
504
505
506
507
508
509
510
511
512
513
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="2"
						step="0.05"
					/>
				</div>
			</div>
		{/if}
	</div>

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

			<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
520
					params.num_ctx = (params?.num_ctx ?? '') === '' ? 2048 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
521
522
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
523
				{#if (params?.num_ctx ?? '') === ''}
524
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
525
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
526
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
527
528
529
530
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
531
		{#if (params?.num_ctx ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
532
533
534
535
536
			<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
537
						min="-1"
Timothy J. Baek's avatar
Timothy J. Baek committed
538
						max="10240000"
Timothy J. Baek's avatar
Timothy J. Baek committed
539
						step="1"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
540
						bind:value={params.num_ctx}
Timothy J. Baek's avatar
Timothy J. Baek committed
541
542
543
544
545
						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
546
						bind:value={params.num_ctx}
Timothy J. Baek's avatar
Timothy J. Baek committed
547
548
						type="number"
						class=" bg-transparent text-center w-14"
Timothy J. Baek's avatar
Timothy J. Baek committed
549
						min="-1"
Timothy J. Baek's avatar
Timothy J. Baek committed
550
						step="10"
Timothy J. Baek's avatar
Timothy J. Baek committed
551
552
553
554
555
556
557
					/>
				</div>
			</div>
		{/if}
	</div>
	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
558
			<div class=" self-center text-xs font-medium">{$i18n.t('Max Tokens')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
559
560
561
562
563

			<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
564
					params.num_predict = (params?.num_predict ?? '') === '' ? 128 : '';
Timothy J. Baek's avatar
Timothy J. Baek committed
565
566
				}}
			>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
567
				{#if (params?.num_predict ?? '') === ''}
568
					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
569
				{:else}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
570
					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
571
572
573
574
				{/if}
			</button>
		</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
575
		{#if (params?.num_predict ?? '') !== ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
576
577
578
579
580
581
582
583
			<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"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
584
						bind:value={params.num_predict}
Timothy J. Baek's avatar
Timothy J. Baek committed
585
586
587
588
589
						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
590
						bind:value={params.num_predict}
Timothy J. Baek's avatar
Timothy J. Baek committed
591
592
593
594
595
596
597
598
599
600
						type="number"
						class=" bg-transparent text-center w-14"
						min="-2"
						max="16000"
						step="1"
					/>
				</div>
			</div>
		{/if}
	</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
601
602
603
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
	<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
633
</div>