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

move API to the top, rearrange param sliders. update css

Browse source
This commit is contained in:
Yazan Agha-Schrader 2024-05-27 22:33:18 +02:00
parent 450471454c
commit c7803876ce
2 changed files with 95 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

30
examples/server/themes/mount-ai/index.html
View file

@ -569,10 +569,10 @@ function updateSystemPrompt(e) {
` `
}; };
const IntField = ({ label, max, min, step, name, value }) => { const IntField = ({ label, title, max, min, step, name, value }) => {
return html` return html`
<div> <div>
<label for="${name}">${label}</label> <label for="${name}" title="${title}">${label}</label>
<input type="range" id="${name}" min="${min}" max="${max}" step="${step}" name="${name}" value="${value}" oninput=${updateParamsInt} /> <input type="range" id="${name}" min="${min}" max="${max}" step="${step}" name="${name}" value="${value}" oninput=${updateParamsInt} />
<span id="${name}-value">${value}</span> <span id="${name}-value">${value}</span>
</div> </div>
@ -782,13 +782,17 @@ function updateSystemPrompt(e) {
<div id="id_toggle-label-chat">Chat</div> <div id="id_toggle-label-chat">Chat</div>
<div id="id_toggle-label-complete">Complete</div> <div id="id_toggle-label-complete">Complete</div>
</label> </label>
<input type="text" id="api_key" name="api_key" value="${params.value.api_key}" placeholder="Enter API key" oninput=${updateParams} /> <fieldset>
<input type="text" id="api_key" class="apiKey" name="api_key" value="${params.value.api_key}" placeholder="Enter API key" oninput=${updateParams} />
</fieldset>
<${UserTemplateResetButton}/> <${UserTemplateResetButton}/>
</fieldset> </fieldset>
${session.value.type === 'chat' ? ChatConfigForm() : CompletionConfigForm()} ${session.value.type === 'chat' ? ChatConfigForm() : CompletionConfigForm()}
<fieldset class="two"> <fieldset class="params">
${IntField({ label: "Prediction", max: 2048, min: -1, step: 16, name: "n_predict", value: params.value.n_predict, })} ${IntField({ label: "Prediction", max: 2048, min: -1, step: 16, name: "n_predict", value: params.value.n_predict, })}
${FloatField({ label: "Min-P sampling", max: 1.0, min: 0.0, name: "min_p", step: 0.01, value: params.value.min_p })} ${FloatField({ label: "Min-P sampling", max: 1.0, min: 0.0, name: "min_p", step: 0.01, value: params.value.min_p })}
${FloatField({ label: "Repetition Penalty", max: 2.0, min: 0.0, name: "repeat_penalty", step: 0.01, value: params.value.repeat_penalty })} ${FloatField({ label: "Repetition Penalty", max: 2.0, min: 0.0, name: "repeat_penalty", step: 0.01, value: params.value.repeat_penalty })}
@ -797,7 +801,7 @@ function updateSystemPrompt(e) {
<details> <details>
<summary><span class="summary-title">Further Options</span></summary> <summary><span class="summary-title">Further Options</span></summary>
<fieldset class="two"> <fieldset class="params">
${IntField({ label: "Top-K", max: 100, min: 0, step: 1, name: "top_k", value: params.value.top_k })} ${IntField({ label: "Top-K", max: 100, min: 0, step: 1, name: "top_k", value: params.value.top_k })}
${IntField({ label: "Penalize Last N", max: 2048, min: 0, step: 16, name: "repeat_last_n", value: params.value.repeat_last_n })} ${IntField({ label: "Penalize Last N", max: 2048, min: 0, step: 16, name: "repeat_last_n", value: params.value.repeat_last_n })}
${FloatField({ label: "Top-P", max: 1.0, min: 0.0, name: "top_p", step: 0.01, value: params.value.top_p })} ${FloatField({ label: "Top-P", max: 1.0, min: 0.0, name: "top_p", step: 0.01, value: params.value.top_p })}
@ -805,27 +809,27 @@ function updateSystemPrompt(e) {
${FloatField({ label: "TFS-Z", max: 1.0, min: 0.0, name: "tfs_z", step: 0.01, value: params.value.tfs_z })} ${FloatField({ label: "TFS-Z", max: 1.0, min: 0.0, name: "tfs_z", step: 0.01, value: params.value.tfs_z })}
${FloatField({ label: "Frequency Penalty", max: 1.0, min: 0.0, name: "frequency_penalty", step: 0.01, value: params.value.frequency_penalty })} ${FloatField({ label: "Frequency Penalty", max: 1.0, min: 0.0, name: "frequency_penalty", step: 0.01, value: params.value.frequency_penalty })}
${FloatField({ label: "Typical-P", max: 1.0, min: 0.0, name: "typical_p", step: 0.01, value: params.value.typical_p })} ${FloatField({ label: "Typical-P", max: 1.0, min: 0.0, name: "typical_p", step: 0.01, value: params.value.typical_p })}
${IntField({ label: "Min Keep", title: "If greater than 0, samplers are forced to return N possible tokens at minimum. Default is 0", max: 10, min: 0, name: "min_keep", value: params.value.min_keep })}
</fieldset> </fieldset>
<hr style="height: 1px; background-color: #ececf1; border: none;" /> <hr style="height: 1px; background-color: #ececf1; border: none;" />
<fieldset class="three"> <fieldset class="three">
<div>
<label><input type="radio" name="mirostat" value="0" checked=${params.value.mirostat == 0} oninput=${updateParamsInt} /> Mirostat off</label> <label><input type="radio" name="mirostat" value="0" checked=${params.value.mirostat == 0} oninput=${updateParamsInt} /> Mirostat off</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="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> <label><input type="radio" name="mirostat" value="2" checked=${params.value.mirostat == 2} oninput=${updateParamsInt} /> Mirostat v2</label>
</div> </fieldset>
<fieldset class="params">
${FloatField({ label: "Entropy tau", max: 10.0, min: 0.0, name: "mirostat_tau", step: 0.01, value: params.value.mirostat_tau })} ${FloatField({ label: "Entropy tau", max: 10.0, min: 0.0, name: "mirostat_tau", step: 0.01, value: params.value.mirostat_tau })}
${FloatField({ label: "Learning-rate eta", max: 1.0, min: 0.0, name: "mirostat_eta", step: 0.01, value: params.value.mirostat_eta })} ${FloatField({ label: "Learning-rate eta", max: 1.0, min: 0.0, name: "mirostat_eta", step: 0.01, value: params.value.mirostat_eta })}
</fieldset>
${IntField({ label: "Show Probabilities", max: 10, min: 0, step: 1, name: "n_probs", value: params.value.n_probs })} <hr style="height: 1px; background-color: #ececf1; border: none;" />
${IntField({ label: "Min Probabilities from each Sampler", max: 10, min: 0, name: "min_keep", value: params.value.min_keep })}
<fieldset class="params">
${IntField({ label: "Show Probabilities", title: "Tooltip-Text hier", max: 10, min: 0, step: 1, name: "n_probs", value: params.value.n_probs })}
</fieldset> </fieldset>
</details> </details>
<fieldset class="apiKey">
<label for="api_key">API Key</label>
</fieldset>
</form> </form>
` `
} }

89
examples/server/themes/mount-ai/style.css
View file

@ -68,6 +68,8 @@ p {
} }
.two-columns { .two-columns {
width: 97%;
max-width: 97%;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1em; gap: 1em;
@ -76,7 +78,8 @@ p {
.json-schema-controls { .json-schema-controls {
margin-top: 10px; margin-top: 10px;
width: 100%; width: 97%;
max-width: 97%;
display: grid; display: grid;
grid-template: "a a"; grid-template: "a a";
gap: 1em; gap: 1em;
@ -110,8 +113,9 @@ fieldset {
fieldset.two { fieldset.two {
display: grid; display: grid;
grid-template: "a a"; grid-template: "a a a";
gap: 1em; gap: 1em;
align-items: center;
font-size: x-small; font-size: x-small;
color: var(--text-color-plain); color: var(--text-color-plain);
} }
@ -137,6 +141,19 @@ fieldset.names {
font-weight: 600; font-weight: 600;
} }
/* titles of name fields*/
fieldset.params {
display: grid;
grid-template: "a a";
gap: 1em;
font-size: x-small;
color: var(--theme-nuance-color-4);
padding-top: 16px;
padding-bottom: 16px;
text-transform: uppercase;
font-weight: 600;
}
fieldset.dropdowns { fieldset.dropdowns {
-webkit-appearance: none; -webkit-appearance: none;
display: flex; display: flex;
@ -431,6 +448,7 @@ textarea {
padding: 5px; padding: 5px;
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
max-width: 100%;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--border-color-1); border: 1px solid var(--border-color-1);
resize: none; resize: none;
@ -512,6 +530,8 @@ input[type="radio"] {
.chat-input-container { .chat-input-container {
position: relative; position: relative;
max-width: 97%;
min-width: 97%;
} }
.chat-input-label { .chat-input-label {
@ -539,29 +559,39 @@ textarea#chat-input:focus {
.input-container { .input-container {
position: relative; position: relative;
box-sizing: border-box;
width: 100%; /* Setzt die Breite auf 100% */
max-width: 100%; /* Stellt sicher, dass die Breite nicht größer als 100% wird */
} }
.input-container:focus { .input-container:focus {
border: 1px solid var(--border-focus-color); border: 1px solid var(--border-focus-color);
box-shadow: 0 0 3px var(--border-focus-shadow); box-shadow: 0 0 3px var(--border-focus-shadow);
} }
/* titles of name fields*/
/* fieldset.names {
display: grid;
grid-template: "a a";
gap: 1em;
font-size: x-small;
color: var(--theme-nuance-color-3);
padding-top: 16px;
padding-bottom: 16px;
text-transform: uppercase;
font-weight: 600;
} */
textarea#api_key { /* input of name fields*/
margin-left: 20px; /* .names input[type="text"] {
padding-top: 10px; font-family: Arial, sans-serif;
padding-left: 10px;
font-size: medium; font-size: medium;
font-weight: 500;
padding: 5px;
border: 1px solid var(--border-color-2); border: 1px solid var(--border-color-2);
resize: vertical; } */
}
textarea#api_key:focus {
border: 1px solid var(--border-focus-color);
box-shadow: 0 0 3px var(--border-focus-shadow);
}
fieldset.apiKey { fieldset.apiKey {
gap: 1em; width: 100%;
font-size: x-small; font-size: x-small;
color: var(--theme-nuance-color-3); color: var(--theme-nuance-color-3);
padding-top: 16px; padding-top: 16px;
@ -572,7 +602,6 @@ fieldset.apiKey {
.apiKey { .apiKey {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-size: medium;
font-weight: 500; font-weight: 500;
padding: 5px; padding: 5px;
border: 1px solid var(--border-color-2); border: 1px solid var(--border-color-2);
@ -592,6 +621,19 @@ fieldset.apiKey {
margin-right: 5px; margin-right: 5px;
} }
textarea#api_key {
padding-top: 10px;
padding-left: 10px;
font-size: medium;
border: 1px solid var(--border-color-2);
resize: vertical;
}
textarea#api_key:focus {
border: 1px solid var(--border-focus-color);
box-shadow: 0 0 3px var(--border-focus-shadow);
}
/* embedded title of the system prompt text area */ /* embedded title of the system prompt text area */
.input-label { .input-label {
position: absolute; position: absolute;
@ -635,6 +677,8 @@ fieldset.apiKey {
textarea.persistent-input { textarea.persistent-input {
padding-top: 42px; padding-top: 42px;
padding-left: 11px; padding-left: 11px;
width: 97%;
max-width: 97%;
font-size: medium; font-size: medium;
overscroll-behavior: contain; overscroll-behavior: contain;
} }
@ -642,7 +686,10 @@ textarea.persistent-input {
/* chat history box */ /* chat history box */
.persistent-input { .persistent-input {
height: auto; height: auto;
width: 100%;
max-width: 100%;
min-height: 150px; min-height: 150px;
padding: 3px;
} }
/* chat history box */ /* chat history box */
@ -660,6 +707,8 @@ textarea.persistent-input:focus {
/* prompt style input area */ /* prompt style input area */
textarea.persistent-input-sec { textarea.persistent-input-sec {
width: 97%;
max-width: 97%;
padding-top: 42px; padding-top: 42px;
padding-left: 11px; padding-left: 11px;
font-size: small; font-size: small;
@ -878,3 +927,13 @@ footer a:hover {
font-weight: 600; font-weight: 600;
background-color: var(-background-color-4); background-color: var(-background-color-4);
} */ } */
/* .omni {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5em;
border: 1px solid var(--border-color-3);
border-radius: 5px;
margin: 0.5em 0;
} */