vbatts/llama.cpp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use component for settings input, move help msg to tooltips

Browse source
This commit is contained in:
Xuan Son Nguyen 2024-11-10 14:33:43 -04:00
parent 6bb6546dc5
commit dcf039ac9c
1 changed files with 44 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

104
examples/server/public/index.html
View file

@ -200,76 +200,38 @@
<div class="label">System Message</div> <div class="label">System Message</div>
<textarea class="textarea textarea-bordered h-24" :placeholder="'Default: ' + configDefault.systemMessage" v-model="config.systemMessage"></textarea> <textarea class="textarea textarea-bordered h-24" :placeholder="'Default: ' + configDefault.systemMessage" v-model="config.systemMessage"></textarea>
</label> </label>
<template v-for="key in ['temperature', 'top_k', 'top_p', 'min_p', 'max_tokens']"> <template v-for="configKey in ['temperature', 'top_k', 'top_p', 'min_p', 'max_tokens']">
<div class="join flex"> <settings-modal-numeric-input :config-key="configKey" :config-default="configDefault" :config-info="configInfo" v-model="config[configKey]" />
<!-- A button with information about this sampler -->
<label :for="`modal-${key}`" class="btn join-item">?</label>
<input type="checkbox" :id="`modal-${key}`" class="modal-toggle" />
<div class="modal" role="dialog">
<div class="modal-box">
<h3 class="text-lg font-bold">{{ key }}</h3>
<p class="py-4">{{ configInfo[key] }}</p>
</div>
<label class="modal-backdrop" :for="`modal-${key}`">OK</label>
</div>
<!-- The sampler input field-->
<label class="input input-bordered join-item grow flex items-center gap-2 mb-2">
<b>{{ key }}</b>
<input type="text" class="grow" :placeholder="'Default: ' + (configDefault[key] || 'none')" v-model="config[key]" />
</label>
</div>
</template> </template>
<!-- TODO: add more sampling-related configs, please regroup them into different "collapse" sections --> <!-- TODO: add more sampling-related configs, please regroup them into different "collapse" sections -->
<div class="collapse collapse-arrow bg-base-200 mb-2"> <!-- Section: Other sampler settings -->
<input type="checkbox" /> <details class="collapse collapse-arrow bg-base-200 mb-2 overflow-visible">
<div class="collapse-title font-bold">Advanced config</div> <summary class="collapse-title font-bold">Other sampler settings</summary>
<div class="collapse-content"> <div class="collapse-content">
<div class="label">Samplers</div> <template v-for="configKey in ['dynatemp_range', 'dynatemp_exponent', 'typical_p', 'xtc_probability', 'xtc_threshold']">
<template v-for="key in ['dynatemp_range', 'dynatemp_exponent', 'typical_p', 'xtc_probability', 'xtc_threshold']"> <settings-modal-numeric-input :config-key="configKey" :config-default="configDefault" :config-info="configInfo" v-model="config[configKey]" />
<div class="join flex">
<!-- A button with information about this sampler -->
<label :for="`modal-${key}`" class="btn join-item">?</label>
<input type="checkbox" :id="`modal-${key}`" class="modal-toggle" />
<div class="modal" role="dialog">
<div class="modal-box">
<h3 class="text-lg font-bold">{{ key }}</h3>
<p class="py-4">{{ configInfo[key] }}</p>
</div>
<label class="modal-backdrop" :for="`modal-${key}`">OK</label>
</div>
<!-- The sampler input field-->
<label class="input input-bordered join-item grow flex items-center gap-2 mb-2">
<b>{{ key }}</b>
<input type="text" class="grow" :placeholder="'Default: ' + (configDefault[key] || 'none')" v-model="config[key]" />
</label>
</div>
</template> </template>
<div class="label">Penalties</div> </div>
<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']"> </details>
<div class="join flex"> <!-- Section: Penalties settings -->
<!-- A button with information about this sampler --> <details class="collapse collapse-arrow bg-base-200 mb-2 overflow-visible">
<label :for="`modal-${key}`" class="btn join-item">?</label> <summary class="collapse-title font-bold">Penalties settings</summary>
<input type="checkbox" :id="`modal-${key}`" class="modal-toggle" /> <div class="collapse-content">
<div class="modal" role="dialog"> <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']">
<div class="modal-box"> <settings-modal-numeric-input :config-key="configKey" :config-default="configDefault" :config-info="configInfo" v-model="config[configKey]" />
<h3 class="text-lg font-bold">{{ key }}</h3>
<p class="py-4">{{ configInfo[key] }}</p>
</div>
<label class="modal-backdrop" :for="`modal-${key}`">OK</label>
</div>
<!-- The sampler input field-->
<label class="input input-bordered join-item grow flex items-center gap-2 mb-2">
<b>{{ key }}</b>
<input type="text" class="grow" :placeholder="'Default: ' + (configDefault[key] || 'none')" v-model="config[key]" />
</label>
</div>
</template> </template>
</div>
</details>
<!-- Section: Advanced config -->
<details class="collapse collapse-arrow bg-base-200 mb-2 overflow-visible">
<summary class="collapse-title font-bold">Advanced config</summary>
<div class="collapse-content">
<label class="form-control mb-2"> <label class="form-control mb-2">
<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> <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>
<textarea class="textarea textarea-bordered h-24" placeholder="Example: { &quot;mirostat&quot;: 1, &quot;min_p&quot;: 0.1 }" v-model="config.custom"></textarea> <textarea class="textarea textarea-bordered h-24" placeholder="Example: { &quot;mirostat&quot;: 1, &quot;min_p&quot;: 0.1 }" v-model="config.custom"></textarea>
</label> </label>
</div> </div>
</div> </details>
</div> </div>
<!-- action buttons --> <!-- action buttons -->
@ -282,6 +244,21 @@
</dialog> </dialog>
</div> </div>
<!-- Template to be used by settings modal -->
<template id="settings-modal-numeric-input">
<label class="input input-bordered join-item grow flex items-center gap-2 mb-2">
<!-- Show help message on hovering on the input label -->
<div class="dropdown dropdown-hover">
<div tabindex="0" role="button" class="font-bold">{{ configKey }}</div>
<div class="dropdown-content menu bg-base-100 rounded-box z-10 w-64 p-2 shadow mt-4">
{{ configInfo[configKey] || '(no help message available)' }}
</div>
</div>
<!-- Here we forward v-model from parent to child component, see: https://stackoverflow.com/questions/47311936/v-model-and-child-components -->
<input type="text" class="grow" :placeholder="'Default: ' + (configDefault[configKey] || 'none')" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</label>
</template>
<script src="./deps_markdown-it.js"></script> <script src="./deps_markdown-it.js"></script>
<script type="module"> <script type="module">
import { createApp, defineComponent, shallowRef, computed, h } from './deps_vue.esm-browser.js'; import { createApp, defineComponent, shallowRef, computed, h } from './deps_vue.esm-browser.js';
@ -358,6 +335,12 @@
{ props: ["source", "options", "plugins"] } { props: ["source", "options", "plugins"] }
); );
// inout field to be used by settings modal
const SettingsModalNumericInput = defineComponent({
template: document.getElementById('settings-modal-numeric-input').innerHTML,
props: ['configKey', 'configDefault', 'configInfo', 'modelValue'],
});
// coversations is stored in localStorage // coversations is stored in localStorage
// format: { [convId]: { id: string, lastModified: number, messages: [...] } } // format: { [convId]: { id: string, lastModified: number, messages: [...] } }
// convId is a string prefixed with 'conv-' // convId is a string prefixed with 'conv-'
@ -448,6 +431,7 @@
const mainApp = createApp({ const mainApp = createApp({
components: { components: {
VueMarkdown, VueMarkdown,
SettingsModalNumericInput,
}, },
data() { data() {
return { return {