From 902862a505ddd4ec10d99a9d3f233175af50bac7 Mon Sep 17 00:00:00 2001 From: Yazan Agha-Schrader Date: Mon, 27 May 2024 08:33:36 +0200 Subject: [PATCH] migrate my eary work --- examples/server/themes/mount-ai/index.html | 440 +++++++++++++++++---- 1 file changed, 364 insertions(+), 76 deletions(-) diff --git a/examples/server/themes/mount-ai/index.html b/examples/server/themes/mount-ai/index.html index c47518848..02dfdab08 100644 --- a/examples/server/themes/mount-ai/index.html +++ b/examples/server/themes/mount-ai/index.html @@ -352,28 +352,30 @@ } return html` -
-
- +
+
- + - +
` } + // completion view still needs some ux improvements function CompletionControls() { const submit = (e) => { stop(e); @@ -436,6 +438,93 @@ `; }; +/////////////////////////////////////////// + +///////////// UI Improvements ///////////// +// +// toggle chat/completion +const handleToggleChange = (e) => { + const isChecked = e.target.checked; + session.value = { ...session.value, type: isChecked ? 'completion' : 'chat' }; + // todo require further actions to update the user interface + // for example, calling a function that re-renders the form or updates the state + // that controls the display of the form. Currently after reset chat toggle does not return +} +// +// Insert the chosen prompt format +function updatePromptFormat(e) { + const promptFormat = e.target.value; + if (promptFormats.hasOwnProperty(promptFormat)) { + session.value = { + ...session.value, + ...promptFormats[promptFormat] + }; + } else { + // llama.cpp's default setting + session.value = { + ...session.value, + template: "{{prompt}}\n\n{{history}}\n{{char}}:", + historyTemplate: "{{name}}: {{message}}", + char: "Assistant", + user: "User" + }; + } + console.log('Updated session value:', session.value); // +} +// +// Update the prompt format from the dropdown +function updatePromptFormatFromDropdown(element) { + const promptFormat = element.getAttribute('data-value'); + console.log('Selected prompt format:', promptFormat); // debugging + updatePromptFormat({ target: { value: promptFormat } }); +} +// +// adds the event listeners once the element is available +function addEventListenersWhenAvailable() { + var themeSelector = document.getElementById('theme-selector'); + if (themeSelector) { + themeSelector.addEventListener('change', function(event) { + // event handler... + }); + // placeholder further listeners wip + } else { + // if the element is not available yet, wait for the next frame + requestAnimationFrame(addEventListenersWhenAvailable); + } +} +// +// begin with the check +requestAnimationFrame(addEventListenersWhenAvailable); +// +// handle the dropdown selection +function handleDropdownSelection(e, promptFormat) { + // avoid the default behavior of the link + e.preventDefault(); + // create a new event object with the value from the data-value attribute + const customEvent = { + target: { + value: promptFormat + } + }; + // + // call the updatePromptFormat function with the new event object + updatePromptFormat(customEvent); +} +// +// Update the system prompt +function updateSystemPrompt(e) { + const SystemPrompt = e.target.value; + if (systemPrompts.hasOwnProperty(SystemPrompt)) { + session.value = { + ...session.value, + prompt: systemPrompts[SystemPrompt].systemPrompt + }; + } +} +///////////// UI Improvements ///////////// + +/////////////////////////////////////////// + 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 } @@ -470,7 +559,7 @@
- ${value} + ${value}
` }; @@ -479,8 +568,8 @@ return html`
- - ${value} + + ${value}
` }; @@ -502,12 +591,14 @@ const UserTemplateResetButton = () => { if (selectedUserTemplate.value.name == 'default') { return html` - + ` } return html` - +
+ +
` }; @@ -519,56 +610,155 @@ const GrammarControl = () => ( html`
- - +
+ ` ); + // todo update the form: reduce the amount, uset he new templates, integrate and adapt to the templates from https://github.com/ggerganov/llama.cpp/wiki/Templates-supported-by-llama_chat_apply_template const ChatConfigForm = () => ( html` - ${PromptControlFieldSet()} - -
+
- + + + + + + + +
+
+ ${PromptControlFieldSet()} +
+
+
-
- +
-
-
- -