Skip to content

Commit 20ad68f

Browse files
committed
Added tooltips with basic information
1 parent 918f3f9 commit 20ad68f

File tree

1 file changed

+75
-12
lines changed

1 file changed

+75
-12
lines changed

examples/server/public/index.html

Lines changed: 75 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -201,10 +201,23 @@ <h3 class="text-lg font-bold mb-6">Settings</h3>
201201
<textarea class="textarea textarea-bordered h-24" :placeholder="'Default: ' + configDefault.systemMessage" v-model="config.systemMessage"></textarea>
202202
</label>
203203
<template v-for="key in ['temperature', 'top_k', 'top_p', 'min_p', 'max_tokens']">
204-
<label class="input input-bordered flex items-center gap-2 mb-2">
205-
<b>{{ key }}</b>
206-
<input type="text" class="grow" :placeholder="'Default: ' + (configDefault[key] || 'none')" v-model="config[key]" />
207-
</label>
204+
<div class="join">
205+
<!-- A button with information about this sampler -->
206+
<label :for="`modal-${key}`" class="btn join-item">?</label>
207+
<input type="checkbox" :id="`modal-${key}`" class="modal-toggle" />
208+
<div class="modal" role="dialog">
209+
<div class="modal-box">
210+
<h3 class="text-lg font-bold">{{ key }}</h3>
211+
<p class="py-4">{{ configInfo[key] }}</p>
212+
</div>
213+
<label class="modal-backdrop" :for="`modal-${key}`">OK</label>
214+
</div>
215+
<!-- The sampler input field-->
216+
<label class="input input-bordered join-item flex items-center gap-2 mb-2">
217+
<b>{{ key }}</b>
218+
<input type="text" class="grow" :placeholder="'Default: ' + (configDefault[key] || 'none')" v-model="config[key]" />
219+
</label>
220+
</div>
208221
</template>
209222
<!-- TODO: add more sampling-related configs, please regroup them into different "collapse" sections -->
210223
<div class="collapse collapse-arrow bg-base-200 mb-2">
@@ -213,17 +226,43 @@ <h3 class="text-lg font-bold mb-6">Settings</h3>
213226
<div class="collapse-content">
214227
<div class="label">Samplers</div>
215228
<template v-for="key in ['dynatemp_range', 'dynatemp_exponent', 'typical_p', 'xtc_probability', 'xtc_threshold']">
216-
<label class="input input-bordered flex items-center gap-2 mb-2">
217-
<b>{{ key }}</b>
218-
<input type="text" class="grow" :placeholder="'Default: ' + (configDefault[key] || 'none')" v-model="config[key]" />
219-
</label>
229+
<div class="join">
230+
<!-- A button with information about this sampler -->
231+
<label :for="`modal-${key}`" class="btn join-item">?</label>
232+
<input type="checkbox" :id="`modal-${key}`" class="modal-toggle" />
233+
<div class="modal" role="dialog">
234+
<div class="modal-box">
235+
<h3 class="text-lg font-bold">{{ key }}</h3>
236+
<p class="py-4">{{ configInfo[key] }}</p>
237+
</div>
238+
<label class="modal-backdrop" :for="`modal-${key}`">OK</label>
239+
</div>
240+
<!-- The sampler input field-->
241+
<label class="input input-bordered join-item flex items-center gap-2 mb-2">
242+
<b>{{ key }}</b>
243+
<input type="text" class="grow" :placeholder="'Default: ' + (configDefault[key] || 'none')" v-model="config[key]" />
244+
</label>
245+
</div>
220246
</template>
221247
<div class="label">Penalties</div>
222248
<template v-for="key in ['repeat_last_n', 'repeat_penalty', 'presence_penalty', 'frequency_penalty', 'dry_multiplier', 'dry_base', 'dry_allowed_length', 'dry_penalty_last_n']">
223-
<label class="input input-bordered flex items-center gap-2 mb-2">
224-
<b>{{ key }}</b>
225-
<input type="text" class="grow" :placeholder="'Default: ' + (configDefault[key] || 'none')" v-model="config[key]" />
226-
</label>
249+
<div class="join">
250+
<!-- A button with information about this sampler -->
251+
<label :for="`modal-${key}`" class="btn join-item">?</label>
252+
<input type="checkbox" :id="`modal-${key}`" class="modal-toggle" />
253+
<div class="modal" role="dialog">
254+
<div class="modal-box">
255+
<h3 class="text-lg font-bold">{{ key }}</h3>
256+
<p class="py-4">{{ configInfo[key] }}</p>
257+
</div>
258+
<label class="modal-backdrop" :for="`modal-${key}`">OK</label>
259+
</div>
260+
<!-- The sampler input field-->
261+
<label class="input input-bordered join-item flex items-center gap-2 mb-2">
262+
<b>{{ key }}</b>
263+
<input type="text" class="grow" :placeholder="'Default: ' + (configDefault[key] || 'none')" v-model="config[key]" />
264+
</label>
265+
</div>
227266
</template>
228267
<label class="form-control mb-2">
229268
<div class="label inline">Custom JSON config (For more info, refer to <a class="underline" href="https://github.com/ggerganov/llama.cpp/blob/master/examples/server/README.md" target="_blank" rel="noopener noreferrer">server documentation</a>)</div>
@@ -278,6 +317,29 @@ <h3 class="text-lg font-bold mb-6">Settings</h3>
278317
max_tokens: -1,
279318
custom: '', // custom json-stringified object
280319
};
320+
const CONFIG_INFO = {
321+
apiKey: '',
322+
systemMessage: 'The starting message that defines how model should behave.',
323+
temperature: 'Controls the randomness of the generated text by affecting the probability distribution of the output tokens. Higher = more random, lower = more focused.',
324+
dynatemp_range: 'The added value to the range of dynamic temperature, which adjusts probabilities by entropy of tokens.',
325+
dynatemp_exponent: 'Smoothes out the probability redistribution based on the most probable token.',
326+
top_k: 'Keeps only k top tokens.',
327+
top_p: 'Limits tokens to those that together have a cumulative probability of at least p',
328+
min_p: 'Limits tokens based on the minimum probability for a token to be considered, relative to the probability of the most likely token.',
329+
xtc_probability: 'The probability that the XTC sampler will cut token from the beginning.',
330+
xtc_threshold: 'If XTC is used, all top tokens with probabilities above this threshold will be cut.',
331+
typical_p: 'Sorts and limits tokens based on the difference between log-probability and entropy.',
332+
repeat_last_n: 'Last n tokens to consider for penalizing repetition',
333+
repeat_penalty: 'Controls the repetition of token sequences in the generated text',
334+
presence_penalty: 'Limits tokens based on whether they appear in the output or not.',
335+
frequency_penalty: 'Limits tokens based on how often they appear in the output.',
336+
dry_multiplier: 'Sets the DRY sampling multiplier.',
337+
dry_base: 'Sets the DRY sampling base value.',
338+
dry_allowed_length: 'Sets the allowed length for DRY sampling.',
339+
dry_penalty_last_n: 'Sets DRY penalty for the last n tokens.',
340+
max_tokens: 'The maximum number of token per output.',
341+
custom: '', // custom json-stringified object
342+
};
281343
// config keys having numeric value (i.e. temperature, top_k, top_p, etc)
282344
const CONFIG_NUMERIC_KEYS = Object.entries(CONFIG_DEFAULT).filter(e => isNumeric(e[1])).map(e => e[0]);
283345
// list of themes supported by daisyui
@@ -403,6 +465,7 @@ <h3 class="text-lg font-bold mb-6">Settings</h3>
403465
// const
404466
themes: THEMES,
405467
configDefault: {...CONFIG_DEFAULT},
468+
configInfo: {...CONFIG_INFO},
406469
}
407470
},
408471
computed: {},

0 commit comments

Comments
 (0)