Skip to content

Commit dcf039a

Browse files
ngxsonngxson
committed
use component for settings input, move help msg to tooltips
1 parent 6bb6546 commit dcf039a

File tree

1 file changed

+44
-60
lines changed

1 file changed

+44
-60
lines changed

‎examples/server/public/index.html‎

Lines changed: 44 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -200,76 +200,38 @@ <h3 class="text-lg font-bold mb-6">Settings</h3>
200200
<div class="label">System Message</div>
201201
<textarea class="textarea textarea-bordered h-24" :placeholder="'Default: ' + configDefault.systemMessage" v-model="config.systemMessage"></textarea>
202202
</label>
203-
<template v-for="key in ['temperature', 'top_k', 'top_p', 'min_p', 'max_tokens']">
204-
<div class="join flex">
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 grow 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>
203+
<template v-for="configKey in ['temperature', 'top_k', 'top_p', 'min_p', 'max_tokens']">
204+
<settings-modal-numeric-input :config-key="configKey" :config-default="configDefault" :config-info="configInfo" v-model="config[configKey]" />
221205
</template>
222206
<!-- TODO: add more sampling-related configs, please regroup them into different "collapse" sections -->
223-
<div class="collapse collapse-arrow bg-base-200 mb-2">
224-
<input type="checkbox" />
225-
<div class="collapse-title font-bold">Advanced config</div>
207+
<!-- Section: Other sampler settings -->
208+
<details class="collapse collapse-arrow bg-base-200 mb-2 overflow-visible">
209+
<summary class="collapse-title font-bold">Other sampler settings</summary>
226210
<div class="collapse-content">
227-
<div class="label">Samplers</div>
228-
<template v-for="key in ['dynatemp_range', 'dynatemp_exponent', 'typical_p', 'xtc_probability', 'xtc_threshold']">
229-
<div class="join flex">
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 grow 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>
211+
<template v-for="configKey in ['dynatemp_range', 'dynatemp_exponent', 'typical_p', 'xtc_probability', 'xtc_threshold']">
212+
<settings-modal-numeric-input :config-key="configKey" :config-default="configDefault" :config-info="configInfo" v-model="config[configKey]" />
246213
</template>
247-
<div class="label">Penalties</div>
248-
<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']">
249-
<div class="join flex">
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 grow 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>
214+
</div>
215+
</details>
216+
<!-- Section: Penalties settings -->
217+
<details class="collapse collapse-arrow bg-base-200 mb-2 overflow-visible">
218+
<summary class="collapse-title font-bold">Penalties settings</summary>
219+
<div class="collapse-content">
220+
<template v-for="configKey in ['repeat_last_n', 'repeat_penalty', 'presence_penalty', 'frequency_penalty', 'dry_multiplier', 'dry_base', 'dry_allowed_length', 'dry_penalty_last_n']">
221+
<settings-modal-numeric-input :config-key="configKey" :config-default="configDefault" :config-info="configInfo" v-model="config[configKey]" />
266222
</template>
223+
</div>
224+
</details>
225+
<!-- Section: Advanced config -->
226+
<details class="collapse collapse-arrow bg-base-200 mb-2 overflow-visible">
227+
<summary class="collapse-title font-bold">Advanced config</summary>
228+
<div class="collapse-content">
267229
<label class="form-control mb-2">
268230
<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>
269231
<textarea class="textarea textarea-bordered h-24" placeholder="Example: { &quot;mirostat&quot;: 1, &quot;min_p&quot;: 0.1 }" v-model="config.custom"></textarea>
270232
</label>
271233
</div>
272-
</div>
234+
</details>
273235
</div>
274236

275237
<!-- action buttons -->
@@ -282,6 +244,21 @@ <h3 class="text-lg font-bold">{{ key }}</h3>
282244
</dialog>
283245
</div>
284246

247+
<!-- Template to be used by settings modal -->
248+
<template id="settings-modal-numeric-input">
249+
<label class="input input-bordered join-item grow flex items-center gap-2 mb-2">
250+
<!-- Show help message on hovering on the input label -->
251+
<div class="dropdown dropdown-hover">
252+
<div tabindex="0" role="button" class="font-bold">{{ configKey }}</div>
253+
<div class="dropdown-content menu bg-base-100 rounded-box z-10 w-64 p-2 shadow mt-4">
254+
{{ configInfo[configKey] || '(no help message available)' }}
255+
</div>
256+
</div>
257+
<!-- Here we forward v-model from parent to child component, see: https://stackoverflow.com/questions/47311936/v-model-and-child-components -->
258+
<input type="text" class="grow" :placeholder="'Default: ' + (configDefault[configKey] || 'none')" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
259+
</label>
260+
</template>
261+
285262
<script src="./deps_markdown-it.js"></script>
286263
<script type="module">
287264
import { createApp, defineComponent, shallowRef, computed, h } from './deps_vue.esm-browser.js';
@@ -358,6 +335,12 @@ <h3 class="text-lg font-bold">{{ key }}</h3>
358335
{ props: ["source", "options", "plugins"] }
359336
);
360337

338+
// inout field to be used by settings modal
339+
const SettingsModalNumericInput = defineComponent({
340+
template: document.getElementById('settings-modal-numeric-input').innerHTML,
341+
props: ['configKey', 'configDefault', 'configInfo', 'modelValue'],
342+
});
343+
361344
// coversations is stored in localStorage
362345
// format: { [convId]: { id: string, lastModified: number, messages: [...] } }
363346
// convId is a string prefixed with 'conv-'
@@ -448,6 +431,7 @@ <h3 class="text-lg font-bold">{{ key }}</h3>
448431
const mainApp = createApp({
449432
components: {
450433
VueMarkdown,
434+
SettingsModalNumericInput,
451435
},
452436
data() {
453437
return {

0 commit comments

Comments
 (0)