fix toggle state localstorage
This commit is contained in:
Yazan Agha-Schrader
parent
c2badb4697
commit
87bcbbb6c2
1 changed files with 317 additions and 301 deletions
|
|
@ -452,8 +452,20 @@
|
|||
const handleToggleChange = (e) => {
|
||||
const isChecked = e.target.checked;
|
||||
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 updatePromptFormat(e) {
|
||||
|
|
@ -464,16 +476,16 @@ function updatePromptFormat(e) {
|
|||
...promptFormats[promptFormat]
|
||||
};
|
||||
} else {
|
||||
// llama.cpp's default setting
|
||||
// Use vicuna as llama.cpp's default setting, since it's most common
|
||||
session.value = {
|
||||
...session.value,
|
||||
template: "{{prompt}}\n\n{{history}}\n{{char}}:",
|
||||
historyTemplate: "{{name}}: {{message}}",
|
||||
char: "Assistant",
|
||||
user: "User"
|
||||
template: "{{prompt}}\n{{history}}{{char}}",
|
||||
historyTemplate: "{{name}}: {{message}}\n",
|
||||
char: "ASSISTANT",
|
||||
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) {
|
||||
// event-handler-code...
|
||||
});
|
||||
// placeholder event listeners here
|
||||
// placeholder event listeners
|
||||
} else {
|
||||
// if the element is not there yet, wait ahead
|
||||
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 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) }
|
||||
|
|
@ -564,32 +576,32 @@ function updateSystemPrompt(e) {
|
|||
}
|
||||
|
||||
const FloatField = ({ label, title, max, min, name, step, value }) => {
|
||||
return html`
|
||||
<div>
|
||||
return html`
|
||||
<div>
|
||||
<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}" />
|
||||
<span id="${name}-value">${value}</span>
|
||||
</div>
|
||||
`
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
const IntField = ({ label, title, max, min, step, name, value }) => {
|
||||
return html`
|
||||
<div>
|
||||
return html`
|
||||
<div>
|
||||
<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}" />
|
||||
<span id="${name}-value">${value}</span>
|
||||
</div>
|
||||
`
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
const BoolField = ({ label, title, name, value }) => {
|
||||
return html`
|
||||
<div>
|
||||
return html`
|
||||
<div>
|
||||
<label for="${name}"><span title="${title}">${label}</span></label>
|
||||
<input type="checkbox" id="${name}" name="${name}" checked="${value}" onclick=${updateParamsBool} title="${title}" />
|
||||
</div>
|
||||
`
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
const userTemplateReset = (e) => {
|
||||
|
|
@ -642,7 +654,7 @@ const BoolField = ({ label, title, name, value }) => {
|
|||
id="prompt"
|
||||
class="persistent-input"
|
||||
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}"
|
||||
oninput=${updateSession}
|
||||
></textarea>
|
||||
|
|
@ -661,6 +673,7 @@ const BoolField = ({ label, title, name, value }) => {
|
|||
<optgroup label="Common Prompt-Styles">
|
||||
<option value="alpaca">Alpaca</option>
|
||||
<option value="chatml">ChatML</option>
|
||||
<option value="commandr">Command R/+</option>
|
||||
<option value="llama2">Llama 2</option>
|
||||
<option value="llama3">Llama 3</option>
|
||||
<option value="phi3">Phi-3</option>
|
||||
|
|
@ -671,37 +684,37 @@ const BoolField = ({ label, title, name, value }) => {
|
|||
<optgroup label="More Prompt-Styles">
|
||||
<option value="vicuna">Airoboros L2</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="chatml">Dolphin Mistral</option>
|
||||
<option value="chatml">evolvedSeeker 1.3B</option>
|
||||
<option value="goliath120b">Goliath 120B</option>
|
||||
<option value="jordan">Jordan</option>
|
||||
<option value="llava">LLaVA</option>
|
||||
<option value="leoHessianai">Leo Hessianai</option>
|
||||
<option value="leoMistral">Leo Mistral</option>
|
||||
<option value="marx">Marx</option>
|
||||
<option value="vicuna">Goliath 120B</option>
|
||||
<option value="vicuna">Jordan</option>
|
||||
<option value="vicuna">LLaVA</option>
|
||||
<option value="chatml">Leo Hessianai</option>
|
||||
<option value="vicuna">Leo Mistral</option>
|
||||
<option value="vicuna">Marx</option>
|
||||
<option value="med42">Med42</option>
|
||||
<option value="metaMath">MetaMath</option>
|
||||
<option value="mistralInstruct">Mistral Instruct</option>
|
||||
<option value="mistralOpenOrca">Mistral 7B OpenOrca</option>
|
||||
<option value="mythomax">MythoMax</option>
|
||||
<option value="alpaca">MetaMath</option>
|
||||
<option value="llama2">Mistral Instruct</option>
|
||||
<option value="chatml">Mistral 7B OpenOrca</option>
|
||||
<option value="alpaca">MythoMax</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="openchatMath">OpenChat Math</option>
|
||||
<option value="openhermes2Mistral">OpenHermes 2.5-Mistral</option>
|
||||
<option value="orcamini">Orca Mini v3</option>
|
||||
<option value="chatml">OpenHermes 2.5-Mistral</option>
|
||||
<option value="alpaca">Orca Mini v3</option>
|
||||
<option value="orion">Orion</option>
|
||||
<option value="vicuna">Samantha</option>
|
||||
<option value="chatml">Samantha Mistral</option>
|
||||
<option value="sauerkrautLM">SauerkrautLM</option>
|
||||
<option value="samantha">Samantha</option>
|
||||
<option value="samanthaMistral">Samantha Mistral</option>
|
||||
<option value="scarlett">Scarlett</option>
|
||||
<option value="vicuna">Scarlett</option>
|
||||
<option value="starlingCode">Starling Coding</option>
|
||||
<option value="sydney">Sydney</option>
|
||||
<option value="synthia">Synthia</option>
|
||||
<option value="tess">Tess</option>
|
||||
<option value="yi34b">Yi-34B</option>
|
||||
<option value="alpaca">Sydney</option>
|
||||
<option value="vicuna">Synthia</option>
|
||||
<option value="vicuna">Tess</option>
|
||||
<option value="yi34b">Yi-6/9/34B-Chat</option>
|
||||
<option value="zephyr">Zephyr</option>
|
||||
<option value=""></option>
|
||||
</optgroup>
|
||||
|
|
@ -714,6 +727,8 @@ const BoolField = ({ label, title, name, value }) => {
|
|||
<option value="atlas">Atlas</option>
|
||||
<option value="atlas_de">Atlas - DE</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="deepseekcoder">Deepseek Coder</option>
|
||||
<option value="jordan">Jordan</option>
|
||||
|
|
@ -726,6 +741,7 @@ const BoolField = ({ label, title, name, value }) => {
|
|||
<option value="sauerkraut">Sauerkraut</option>
|
||||
<option value="scarlett">Scarlett</option>
|
||||
<option value="synthia">Synthia</option>
|
||||
<option value="vicuna">Vicuna</option>
|
||||
</select>
|
||||
<!--<select id="systemLanguage" name="systemLanguage">-->
|
||||
<!--<option value="default">English</option>-->
|
||||
|
|
@ -842,7 +858,7 @@ const BoolField = ({ label, title, name, value }) => {
|
|||
</details>
|
||||
</form>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
// todo - beautify apikey section with css
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue