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

fix toggle state localstorage

Browse source
This commit is contained in:
Yazan Agha-Schrader 2024-05-29 22:23:40 +02:00
parent c2badb4697
commit 87bcbbb6c2
1 changed files with 317 additions and 301 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -452,8 +452,20 @@
const handleToggleChange = (e) => { const handleToggleChange = (e) => {
const isChecked = e.target.checked; const isChecked = e.target.checked;
session.value = { ...session.value, type: isChecked ? 'completion' : 'chat' }; session.value = { ...session.value, type: isChecked ? 'completion' : 'chat' };
localStorage.setItem('toggleState', isChecked);
} }
// //
const loadToggleState = () => {
const storedState = localStorage.getItem('toggleState');
if (storedState !== null) {
const isChecked = storedState === 'true';
document.getElementById('toggle').checked = isChecked;
session.value = { ...session.value, type: isChecked ? 'completion' : 'chat' };
}
}
//
document.addEventListener('DOMContentLoaded', loadToggleState);
//
// //
// function to update the prompt format // function to update the prompt format
function updatePromptFormat(e) { function updatePromptFormat(e) {
@ -464,16 +476,16 @@ function updatePromptFormat(e) {
...promptFormats[promptFormat] ...promptFormats[promptFormat]
}; };
} else { } else {
// llama.cpp's default setting // Use vicuna as llama.cpp's default setting, since it's most common
session.value = { session.value = {
...session.value, ...session.value,
template: "{{prompt}}\n\n{{history}}\n{{char}}:", template: "{{prompt}}\n{{history}}{{char}}",
historyTemplate: "{{name}}: {{message}}", historyTemplate: "{{name}}: {{message}}\n",
char: "Assistant", char: "ASSISTANT",
user: "User" user: "USER"
}; };
} }
console.log('Updated session value:', session.value); // console.log('Updated session value:', session.value);
} }
// //
// //
@ -492,7 +504,7 @@ function addEventListenersWhenAvailable() {
themeSelector.addEventListener('change', function(event) { themeSelector.addEventListener('change', function(event) {
// event-handler-code... // event-handler-code...
}); });
// placeholder event listeners here // placeholder event listeners
} else { } else {
// if the element is not there yet, wait ahead // if the element is not there yet, wait ahead
requestAnimationFrame(addEventListenersWhenAvailable); requestAnimationFrame(addEventListenersWhenAvailable);
@ -534,7 +546,7 @@ function updateSystemPrompt(e) {
const ConfigForm = (props) => { const ConfigForm = (props) => {
const updateSession = (el) => session.value = { ...session.value, [el.target.name]: el.target.value } 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 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 updateParamsFloat = (el) => params.value = { ...params.value, [el.target.name]: parseFloat(el.target.value) }
@ -564,32 +576,32 @@ function updateSystemPrompt(e) {
} }
const FloatField = ({ label, title, max, min, name, step, value }) => { const FloatField = ({ label, title, max, min, name, step, value }) => {
return html` return html`
<div> <div>
<label for="${name}"><span title="${title}">${label}</span></label> <label for="${name}"><span title="${title}">${label}</span></label>
<input type="range" id="${name}" min="${min}" max="${max}" step="${step}" name="${name}" value="${value}" oninput=${updateParamsFloat} title="${title}" /> <input type="range" id="${name}" min="${min}" max="${max}" step="${step}" name="${name}" value="${value}" oninput=${updateParamsFloat} title="${title}" />
<span id="${name}-value">${value}</span> <span id="${name}-value">${value}</span>
</div> </div>
` `
}; };
const IntField = ({ label, title, max, min, step, name, value }) => { const IntField = ({ label, title, max, min, step, name, value }) => {
return html` return html`
<div> <div>
<label for="${name}"><span title="${title}">${label}</span></label> <label for="${name}"><span title="${title}">${label}</span></label>
<input type="range" id="${name}" min="${min}" max="${max}" step="${step}" name="${name}" value="${value}" oninput=${updateParamsInt} title="${title}" /> <input type="range" id="${name}" min="${min}" max="${max}" step="${step}" name="${name}" value="${value}" oninput=${updateParamsInt} title="${title}" />
<span id="${name}-value">${value}</span> <span id="${name}-value">${value}</span>
</div> </div>
` `
}; };
const BoolField = ({ label, title, name, value }) => { const BoolField = ({ label, title, name, value }) => {
return html` return html`
<div> <div>
<label for="${name}"><span title="${title}">${label}</span></label> <label for="${name}"><span title="${title}">${label}</span></label>
<input type="checkbox" id="${name}" name="${name}" checked="${value}" onclick=${updateParamsBool} title="${title}" /> <input type="checkbox" id="${name}" name="${name}" checked="${value}" onclick=${updateParamsBool} title="${title}" />
</div> </div>
` `
}; };
const userTemplateReset = (e) => { const userTemplateReset = (e) => {
@ -642,7 +654,7 @@ const BoolField = ({ label, title, name, value }) => {
id="prompt" id="prompt"
class="persistent-input" class="persistent-input"
name="prompt" name="prompt"
placeholder="The following models do not support System Prompt by design: OpenChat, Orion, Phi-3, Starling" placeholder="The following models do not support System Prompt by design: OpenChat, Orion, Phi-3, Starling, Yi-6/9/34B-Chat"
value="${session.value.prompt}" value="${session.value.prompt}"
oninput=${updateSession} oninput=${updateSession}
></textarea> ></textarea>
@ -661,6 +673,7 @@ const BoolField = ({ label, title, name, value }) => {
<optgroup label="Common Prompt-Styles"> <optgroup label="Common Prompt-Styles">
<option value="alpaca">Alpaca</option> <option value="alpaca">Alpaca</option>
<option value="chatml">ChatML</option> <option value="chatml">ChatML</option>
<option value="commandr">Command R/+</option>
<option value="llama2">Llama 2</option> <option value="llama2">Llama 2</option>
<option value="llama3">Llama 3</option> <option value="llama3">Llama 3</option>
<option value="phi3">Phi-3</option> <option value="phi3">Phi-3</option>
@ -671,37 +684,37 @@ const BoolField = ({ label, title, name, value }) => {
<optgroup label="More Prompt-Styles"> <optgroup label="More Prompt-Styles">
<option value="vicuna">Airoboros L2</option> <option value="vicuna">Airoboros L2</option>
<option value="vicuna">BakLLaVA-1</option> <option value="vicuna">BakLLaVA-1</option>
<option value="codeCherryPop">Code Cherry Pop</option> <option value="alpaca">Code Cherry Pop</option>
<option value="deepseekCoder">Deepseek Coder</option> <option value="deepseekCoder">Deepseek Coder</option>
<option value="chatml">Dolphin Mistral</option> <option value="chatml">Dolphin Mistral</option>
<option value="chatml">evolvedSeeker 1.3B</option> <option value="chatml">evolvedSeeker 1.3B</option>
<option value="goliath120b">Goliath 120B</option> <option value="vicuna">Goliath 120B</option>
<option value="jordan">Jordan</option> <option value="vicuna">Jordan</option>
<option value="llava">LLaVA</option> <option value="vicuna">LLaVA</option>
<option value="leoHessianai">Leo Hessianai</option> <option value="chatml">Leo Hessianai</option>
<option value="leoMistral">Leo Mistral</option> <option value="vicuna">Leo Mistral</option>
<option value="marx">Marx</option> <option value="vicuna">Marx</option>
<option value="med42">Med42</option> <option value="med42">Med42</option>
<option value="metaMath">MetaMath</option> <option value="alpaca">MetaMath</option>
<option value="mistralInstruct">Mistral Instruct</option> <option value="llama2">Mistral Instruct</option>
<option value="mistralOpenOrca">Mistral 7B OpenOrca</option> <option value="chatml">Mistral 7B OpenOrca</option>
<option value="mythomax">MythoMax</option> <option value="alpaca">MythoMax</option>
<option value="neuralchat">Neural Chat</option> <option value="neuralchat">Neural Chat</option>
<option value="nousCapybara">Nous Capybara</option> <option value="vicuna">Nous Capybara</option>
<option value="nousHermes">Nous Hermes</option> <option value="nousHermes">Nous Hermes</option>
<option value="openchatMath">OpenChat Math</option> <option value="openchatMath">OpenChat Math</option>
<option value="openhermes2Mistral">OpenHermes 2.5-Mistral</option> <option value="chatml">OpenHermes 2.5-Mistral</option>
<option value="orcamini">Orca Mini v3</option> <option value="alpaca">Orca Mini v3</option>
<option value="orion">Orion</option> <option value="orion">Orion</option>
<option value="vicuna">Samantha</option>
<option value="chatml">Samantha Mistral</option>
<option value="sauerkrautLM">SauerkrautLM</option> <option value="sauerkrautLM">SauerkrautLM</option>
<option value="samantha">Samantha</option> <option value="vicuna">Scarlett</option>
<option value="samanthaMistral">Samantha Mistral</option>
<option value="scarlett">Scarlett</option>
<option value="starlingCode">Starling Coding</option> <option value="starlingCode">Starling Coding</option>
<option value="sydney">Sydney</option> <option value="alpaca">Sydney</option>
<option value="synthia">Synthia</option> <option value="vicuna">Synthia</option>
<option value="tess">Tess</option> <option value="vicuna">Tess</option>
<option value="yi34b">Yi-34B</option> <option value="yi34b">Yi-6/9/34B-Chat</option>
<option value="zephyr">Zephyr</option> <option value="zephyr">Zephyr</option>
<option value=""></option> <option value=""></option>
</optgroup> </optgroup>
@ -714,6 +727,8 @@ const BoolField = ({ label, title, name, value }) => {
<option value="atlas">Atlas</option> <option value="atlas">Atlas</option>
<option value="atlas_de">Atlas - DE</option> <option value="atlas_de">Atlas - DE</option>
<option value="cot">Chain of Tought</option> <option value="cot">Chain of Tought</option>
<option value="commandrempty">Command R/+ (empty)</option>
<option value="commandrexample">Command R/+ (example)</option>
<option value="deduce">Critical Thinking</option> <option value="deduce">Critical Thinking</option>
<option value="deepseekcoder">Deepseek Coder</option> <option value="deepseekcoder">Deepseek Coder</option>
<option value="jordan">Jordan</option> <option value="jordan">Jordan</option>
@ -726,6 +741,7 @@ const BoolField = ({ label, title, name, value }) => {
<option value="sauerkraut">Sauerkraut</option> <option value="sauerkraut">Sauerkraut</option>
<option value="scarlett">Scarlett</option> <option value="scarlett">Scarlett</option>
<option value="synthia">Synthia</option> <option value="synthia">Synthia</option>
<option value="vicuna">Vicuna</option>
</select> </select>
<!--<select id="systemLanguage" name="systemLanguage">--> <!--<select id="systemLanguage" name="systemLanguage">-->
<!--<option value="default">English</option>--> <!--<option value="default">English</option>-->
@ -842,7 +858,7 @@ const BoolField = ({ label, title, name, value }) => {
</details> </details>
</form> </form>
` `
} }
// todo - beautify apikey section with css // todo - beautify apikey section with css