diff options
author | Aarni Koskela <akx@iki.fi> | 2023-07-24 17:54:22 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-07-24 17:54:22 +0300 |
commit | b3f138d05849ccbce67303ac17b50ebbc268128a (patch) | |
tree | e7b8421b32d620d945256f8a5e45a11e29614db5 /examples/server/public | |
parent | 5b2b2dc6ae8086bff7c9b3c17fb435cf319b7185 (diff) |
Chat UI extras (#2366)
* makefile: correct deps for server
* server: tighten settings layout a little
* server: expose all currently configured generation params in UI
* server: expose remaining generation params, for the adventurous
* server: embetter mirostat fields
Diffstat (limited to 'examples/server/public')
-rw-r--r-- | examples/server/public/index.html | 122 |
1 files changed, 94 insertions, 28 deletions
diff --git a/examples/server/public/index.html b/examples/server/public/index.html index 8ace0b0..f5ed2d4 100644 --- a/examples/server/public/index.html +++ b/examples/server/public/index.html @@ -73,6 +73,37 @@ margin: 0; } + fieldset.two { + display: grid; + grid-template: "a a"; + gap: 1em; + } + + fieldset.three { + display: grid; + grid-template: "a a a"; + gap: 1em; + } + + details { + border: 1px solid #aaa; + border-radius: 4px; + padding: 0.5em 0.5em 0; + margin-top: 0.5em; + } + + summary { + font-weight: bold; + margin: -0.5em -0.5em 0; + padding: 0.5em; + cursor: pointer; + } + + details[open] { + padding: 0.5em; + } + + textarea { padding: 5px; flex-grow: 1; @@ -125,10 +156,17 @@ const params = signal({ n_predict: 400, temperature: 0.7, - repeat_last_n: 256, - repeat_penalty: 1.18, - top_k: 40, - top_p: 0.5, + repeat_last_n: 256, // 0 = disable penalty, -1 = context size + repeat_penalty: 1.18, // 1.0 = disabled + top_k: 40, // <= 0 to use vocab size + top_p: 0.5, // 1.0 = disabled + tfs_z: 1.0, // 1.0 = disabled + typical_p: 1.0, // 1.0 = disabled + presence_penalty: 0.0, // 0.0 = disabled + frequency_penalty: 0.0, // 0.0 = disabled + mirostat: 0, // 0/1/2 + mirostat_tau: 5, // target entropy + mirostat_eta: 0.1, // learning rate }) const llamaStats = signal(null) @@ -264,6 +302,27 @@ const updateSession = (el) => session.value = { ...session.value, [el.target.name]: el.target.value } const updateParams = (el) => params.value = { ...params.value, [el.target.name]: el.target.value } const updateParamsFloat = (el) => params.value = { ...params.value, [el.target.name]: parseFloat(el.target.value) } + const updateParamsInt = (el) => params.value = { ...params.value, [el.target.name]: Math.floor(parseFloat(el.target.value)) } + + const FloatField = ({label, max, min, name, step, value}) => { + return html` + <div> + <label for="${name}">${label}</label> + <input type="range" id="${name}" min="${min}" max="${max}" step="${step}" name="${name}" value="${value}" oninput=${updateParamsFloat} /> + <span>${value}</span> + </div> + ` + }; + + const IntField = ({label, max, min, name, value}) => { + return html` + <div> + <label for="${name}">${label}</label> + <input type="range" id="${name}" min="${min}" max="${max}" name="${name}" value="${value}" oninput=${updateParamsInt} /> + <span>${value}</span> + </div> + ` + }; return html` <form> @@ -272,7 +331,9 @@ <label for="prompt">Prompt</label> <textarea type="text" name="prompt" value="${session.value.prompt}" rows=4 oninput=${updateSession}/> </div> + </fieldset> + <fieldset class="two"> <div> <label for="user">User name</label> <input type="text" name="user" value="${session.value.user}" oninput=${updateSession} /> @@ -282,7 +343,9 @@ <label for="bot">Bot name</label> <input type="text" name="char" value="${session.value.char}" oninput=${updateSession} /> </div> + </fieldset> + <fieldset> <div> <label for="template">Prompt template</label> <textarea id="template" name="template" value="${session.value.template}" rows=4 oninput=${updateSession}/> @@ -292,32 +355,35 @@ <label for="template">Chat history template</label> <textarea id="template" name="historyTemplate" value="${session.value.historyTemplate}" rows=1 oninput=${updateSession}/> </div> + </fieldset> - <div> - <label for="temperature">Temperature</label> - <input type="range" id="temperature" min="0.0" max="1.0" step="0.01" name="temperature" value="${params.value.temperature}" oninput=${updateParamsFloat} /> - <span>${params.value.temperature}</span> - </div> - - <div> - <label for="nPredict">Predictions</label> - <input type="range" id="nPredict" min="1" max="2048" step="1" name="n_predict" value="${params.value.n_predict}" oninput=${updateParamsFloat} /> - <span>${params.value.n_predict}</span> - </div> - - <div> - <label for="repeat_penalty">Penalize repeat sequence</label> - <input type="range" id="repeat_penalty" min="0.0" max="2.0" step="0.01" name="repeat_penalty" value="${params.value.repeat_penalty}" oninput=${updateParamsFloat} /> - <span>${params.value.repeat_penalty}</span> - </div> - - <div> - <label for="repeat_last_n">Consider N tokens for penalize</label> - <input type="range" id="repeat_last_n" min="0.0" max="2048" name="repeat_last_n" value="${params.value.repeat_last_n}" oninput=${updateParamsFloat} /> - <span>${params.value.repeat_last_n}</span> - </div> - + <fieldset class="two"> + ${IntField({label: "Predictions", max: 2048, min: -1, name: "n_predict", value: params.value.n_predict})} + ${FloatField({label: "Temperature", max: 1.5, min: 0.0, name: "temperature", step: 0.01, value: params.value.temperature})} + ${FloatField({label: "Penalize repeat sequence", max: 2.0, min: 0.0, name: "repeat_penalty", step: 0.01, value: params.value.repeat_penalty})} + ${IntField({label: "Consider N tokens for penalize", max: 2048, min: 0, name: "repeat_last_n", value: params.value.repeat_last_n})} + ${IntField({label: "Top-K sampling", max: 100, min: -1, name: "top_k", value: params.value.top_k})} + ${FloatField({label: "Top-P sampling", max: 1.0, min: 0.0, name: "top_p", step: 0.01, value: params.value.top_p})} </fieldset> + <details> + <summary>More options</summary> + <fieldset class="two"> + ${FloatField({label: "TFS-Z", max: 1.0, min: 0.0, name: "tfs_z", step: 0.01, value: params.value.tfs_z})} + ${FloatField({label: "Typical P", max: 1.0, min: 0.0, name: "typical_p", step: 0.01, value: params.value.typical_p})} + ${FloatField({label: "Presence penalty", max: 1.0, min: 0.0, name: "presence_penalty", step: 0.01, value: params.value.presence_penalty})} + ${FloatField({label: "Frequency penalty", max: 1.0, min: 0.0, name: "frequency_penalty", step: 0.01, value: params.value.frequency_penalty})} + </fieldset> + <hr /> + <fieldset class="three"> + <div> + <label><input type="radio" name="mirostat" value="0" checked=${params.value.mirostat == 0} oninput=${updateParamsInt} /> no Mirostat</label> + <label><input type="radio" name="mirostat" value="1" checked=${params.value.mirostat == 1} oninput=${updateParamsInt} /> Mirostat v1</label> + <label><input type="radio" name="mirostat" value="2" checked=${params.value.mirostat == 2} oninput=${updateParamsInt} /> Mirostat v2</label> + </div> + ${FloatField({label: "Mirostat tau", max: 10.0, min: 0.0, name: "mirostat_tau", step: 0.01, value: params.value.mirostat_tau})} + ${FloatField({label: "Mirostat eta", max: 1.0, min: 0.0, name: "mirostat_eta", step: 0.01, value: params.value.mirostat_eta})} + </fieldset> + </details> </form> ` } |