From 87bcbbb6c2750fe0f6a9e45de0ebea3c8ec7aa37 Mon Sep 17 00:00:00 2001 From: Yazan Agha-Schrader Date: Wed, 29 May 2024 22:23:40 +0200 Subject: [PATCH] fix toggle state localstorage --- examples/server/themes/mount-ai/index.html | 618 +++++++++++---------- 1 file changed, 317 insertions(+), 301 deletions(-) diff --git a/examples/server/themes/mount-ai/index.html b/examples/server/themes/mount-ai/index.html index 251bdab17..35e711de6 100644 --- a/examples/server/themes/mount-ai/index.html +++ b/examples/server/themes/mount-ai/index.html @@ -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,316 +546,320 @@ function updateSystemPrompt(e) { - 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) } - const updateParamsInt = (el) => params.value = { ...params.value, [el.target.name]: Math.floor(parseFloat(el.target.value)) } - const updateParamsBool = (el) => params.value = { ...params.value, [el.target.name]: el.target.checked } +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) } + const updateParamsInt = (el) => params.value = { ...params.value, [el.target.name]: Math.floor(parseFloat(el.target.value)) } + const updateParamsBool = (el) => params.value = { ...params.value, [el.target.name]: el.target.checked } - const grammarJsonSchemaPropOrder = signal('') - const updateGrammarJsonSchemaPropOrder = (el) => grammarJsonSchemaPropOrder.value = el.target.value - const convertJSONSchemaGrammar = async () => { - try { - let schema = JSON.parse(params.value.grammar) - const converter = new SchemaConverter({ - prop_order: grammarJsonSchemaPropOrder.value - .split(',') - .reduce((acc, cur, i) => ({ ...acc, [cur.trim()]: i }), {}), - allow_fetch: true, - }) - schema = await converter.resolveRefs(schema, 'input') - converter.visit(schema, '') - params.value = { - ...params.value, - grammar: converter.formatGrammar(), - } - } catch (e) { - alert(`Convert failed: ${e.message}`) - } + const grammarJsonSchemaPropOrder = signal('') + const updateGrammarJsonSchemaPropOrder = (el) => grammarJsonSchemaPropOrder.value = el.target.value + const convertJSONSchemaGrammar = async () => { + try { + let schema = JSON.parse(params.value.grammar) + const converter = new SchemaConverter({ + prop_order: grammarJsonSchemaPropOrder.value + .split(',') + .reduce((acc, cur, i) => ({ ...acc, [cur.trim()]: i }), {}), + allow_fetch: true, + }) + schema = await converter.resolveRefs(schema, 'input') + converter.visit(schema, '') + params.value = { + ...params.value, + grammar: converter.formatGrammar(), } + } catch (e) { + alert(`Convert failed: ${e.message}`) + } + } - const FloatField = ({ label, title, max, min, name, step, value }) => { - return html` -
- - - ${value} -
- ` + const FloatField = ({ label, title, max, min, name, step, value }) => { +return html` +
+ + + ${value} +
+` }; const IntField = ({ label, title, max, min, step, name, value }) => { - return html` -
- - - ${value} -
- ` +return html` +
+ + + ${value} +
+` }; const BoolField = ({ label, title, name, value }) => { - return html` -
- - -
- ` +return html` +
+ + +
+` }; - const userTemplateReset = (e) => { - e.preventDefault(); - userTemplateResetToDefaultAndApply() - } + const userTemplateReset = (e) => { + e.preventDefault(); + userTemplateResetToDefaultAndApply() + } - const UserTemplateResetButton = () => { - if (selectedUserTemplate.value.name == 'default') { - return html` - - ` - } - - return html` -
- -
- ` - }; - - useEffect(() => { - // autosave template on every change - userTemplateAutosave() - }, [session.value, params.value]) - - const GrammarControl = () => ( - html` -
-
- - -
- - ` - ); - - const ChatConfigForm = () => ( - html` -
-
- - - - - - - -
-
- ${PromptControlFieldSet()} -
-
- Prompt Style -
-
- - -
-
- - -
-
-
-
-
- - +
+
+ ` + ); + + const ChatConfigForm = () => ( + html` +
+
+ + + + + + + +
+
+ ${PromptControlFieldSet()} +
+
+ Prompt Style +
+
+ + +
+
+ + +
+
+
+
+
+ +