UI: add UI to enable/disable auto-derived templates

50ffaeb06a3a996b97973e0fac46c250901d61d9

Karl-Johan Alm <karljohan-alm@garage.co.jp>

Signed
4 files changed, +38 -3Showing whitespace changes
public/index.html+10 -0
@@ -3295,6 +3295,12 @@
3295 <span class="fa-solid fa-circle-question note-link-span"></span>3295 <span class="fa-solid fa-circle-question note-link-span"></span>
3296 </a>3296 </a>
3297 </div>3297 </div>
3298 <div class="flex-container">
3299 <label for="context_derived" class="checkbox_label flex1" title="Derive from Model Metadata, if possible." data-i18n="[title]context_derived">
3300 <input id="context_derived" type="checkbox" style="display:none;" />
3301 <small><i class="fa-solid fa-tree menu_button margin0"></i></small>
3302 </label>
3303 </div>
3298 </h4>3304 </h4>
3299 <div class="flex-container" title="Select your current Context Template" data-i18n="[title]Select your current Context Template">3305 <div class="flex-container" title="Select your current Context Template" data-i18n="[title]Select your current Context Template">
3300 <select id="context_presets" data-preset-manager-for="context" class="flex1 text_pole"></select>3306 <select id="context_presets" data-preset-manager-for="context" class="flex1 text_pole"></select>
@@ -3395,6 +3401,10 @@
3395 </a>3401 </a>
3396 </div>3402 </div>
3397 <div class="flex-container">3403 <div class="flex-container">
3404 <label for="instruct_derived" class="checkbox_label flex1" title="Derive from Model Metadata, if possible." data-i18n="[title]instruct_derived">
3405 <input id="instruct_derived" type="checkbox" style="display:none;" />
3406 <small><i class="fa-solid fa-tree menu_button margin0"></i></small>
3407 </label>
3398 <label for="instruct_bind_to_context" class="checkbox_label flex1" title="Bind to Context&#10If enabled, Context templates will be automatically selected based on selected Instruct template name or by preference." data-i18n="[title]instruct_bind_to_context">3408 <label for="instruct_bind_to_context" class="checkbox_label flex1" title="Bind to Context&#10If enabled, Context templates will be automatically selected based on selected Instruct template name or by preference." data-i18n="[title]instruct_bind_to_context">
3399 <input id="instruct_bind_to_context" type="checkbox" style="display:none;" />3409 <input id="instruct_bind_to_context" type="checkbox" style="display:none;" />
3400 <small><i class="fa-solid fa-link menu_button margin0"></i></small>3410 <small><i class="fa-solid fa-link menu_button margin0"></i></small>
public/script.js+8 -3
@@ -1236,9 +1236,10 @@ async function getStatusTextgen() {
1236 const supportsTokenization = response.headers.get('x-supports-tokenization') === 'true';1236 const supportsTokenization = response.headers.get('x-supports-tokenization') === 'true';
1237 supportsTokenization ? sessionStorage.setItem(TOKENIZER_SUPPORTED_KEY, 'true') : sessionStorage.removeItem(TOKENIZER_SUPPORTED_KEY);1237 supportsTokenization ? sessionStorage.setItem(TOKENIZER_SUPPORTED_KEY, 'true') : sessionStorage.removeItem(TOKENIZER_SUPPORTED_KEY);
12381238
1239 const wantsInstructDerivation = (power_user.instruct.enabled && power_user.instruct.derived);
1240 const wantsContextDerivation = power_user.context_derived;
1239 const supportsChatTemplate = response.headers.get('x-supports-chat-template') === 'true';1241 const supportsChatTemplate = response.headers.get('x-supports-chat-template') === 'true';
12401242 if (supportsChatTemplate && (wantsInstructDerivation || wantsContextDerivation)) {
1241 if (supportsChatTemplate) {
1242 const response = await fetch('/api/backends/text-completions/chat_template', {1243 const response = await fetch('/api/backends/text-completions/chat_template', {
1243 method: 'POST',1244 method: 'POST',
1244 headers: getRequestHeaders(),1245 headers: getRequestHeaders(),
@@ -1251,15 +1252,19 @@ async function getStatusTextgen() {
1251 const data = await response.json();1252 const data = await response.json();
1252 if (data) {1253 if (data) {
1253 const { chat_template, chat_template_hash } = data;1254 const { chat_template, chat_template_hash } = data;
1254 console.log(`We have chat template ${chat_template.split('\n')[0]}...`);1255 console.log(`${wantsContextDerivation} ${wantsInstructDerivation} We have chat template ${chat_template.split('\n')[0]}...`);
1255 const templates = await deriveTemplatesFromChatTemplate(chat_template, chat_template_hash);1256 const templates = await deriveTemplatesFromChatTemplate(chat_template, chat_template_hash);
1256 if (templates) {1257 if (templates) {
1257 const { context, instruct } = templates;1258 const { context, instruct } = templates;
1259 if (wantsContextDerivation) {
1258 selectContextPreset(context, { isAuto: true });1260 selectContextPreset(context, { isAuto: true });
1261 }
1262 if (wantsInstructDerivation) {
1259 selectInstructPreset(instruct, { isAuto: true });1263 selectInstructPreset(instruct, { isAuto: true });
1260 }1264 }
1261 }1265 }
1262 }1266 }
1267 }
12631268
1264 // We didn't get a 200 status code, but the endpoint has an explanation. Which means it DID connect, but I digress.1269 // We didn't get a 200 status code, but the endpoint has an explanation. Which means it DID connect, but I digress.
1265 if (online_status === 'no_connection' && data.response) {1270 if (online_status === 'no_connection' && data.response) {
public/scripts/instruct-mode.js+6 -0
@@ -39,6 +39,7 @@ const controls = [
39 { id: 'instruct_first_input_sequence', property: 'first_input_sequence', isCheckbox: false },39 { id: 'instruct_first_input_sequence', property: 'first_input_sequence', isCheckbox: false },
40 { id: 'instruct_last_input_sequence', property: 'last_input_sequence', isCheckbox: false },40 { id: 'instruct_last_input_sequence', property: 'last_input_sequence', isCheckbox: false },
41 { id: 'instruct_activation_regex', property: 'activation_regex', isCheckbox: false },41 { id: 'instruct_activation_regex', property: 'activation_regex', isCheckbox: false },
42 { id: 'instruct_derived', property: 'derived', isCheckbox: true },
42 { id: 'instruct_bind_to_context', property: 'bind_to_context', isCheckbox: true },43 { id: 'instruct_bind_to_context', property: 'bind_to_context', isCheckbox: true },
43 { id: 'instruct_skip_examples', property: 'skip_examples', isCheckbox: true },44 { id: 'instruct_skip_examples', property: 'skip_examples', isCheckbox: true },
44 { id: 'instruct_names_behavior', property: 'names_behavior', isCheckbox: false },45 { id: 'instruct_names_behavior', property: 'names_behavior', isCheckbox: false },
@@ -100,6 +101,7 @@ export async function loadInstructMode(data) {
100101
101 $('#instruct_enabled').parent().find('i').toggleClass('toggleEnabled', !!power_user.instruct.enabled);102 $('#instruct_enabled').parent().find('i').toggleClass('toggleEnabled', !!power_user.instruct.enabled);
102 $('#instructSettingsBlock, #InstructSequencesColumn').toggleClass('disabled', !power_user.instruct.enabled);103 $('#instructSettingsBlock, #InstructSequencesColumn').toggleClass('disabled', !power_user.instruct.enabled);
104 $('#instruct_derived').parent().find('i').toggleClass('toggleEnabled', !!power_user.instruct.derived);
103 $('#instruct_bind_to_context').parent().find('i').toggleClass('toggleEnabled', !!power_user.instruct.bind_to_context);105 $('#instruct_bind_to_context').parent().find('i').toggleClass('toggleEnabled', !!power_user.instruct.bind_to_context);
104106
105 controls.forEach(control => {107 controls.forEach(control => {
@@ -715,6 +717,10 @@ jQuery(() => {
715 }717 }
716 });718 });
717719
720 $('#instruct_derived').on('change', function () {
721 $('#instruct_derived').parent().find('i').toggleClass('toggleEnabled', !!power_user.instruct.derived);
722 });
723
718 $('#instruct_bind_to_context').on('change', function () {724 $('#instruct_bind_to_context').on('change', function () {
719 $('#instruct_bind_to_context').parent().find('i').toggleClass('toggleEnabled', !!power_user.instruct.bind_to_context);725 $('#instruct_bind_to_context').parent().find('i').toggleClass('toggleEnabled', !!power_user.instruct.bind_to_context);
720 });726 });
public/scripts/power-user.js+14 -0
@@ -226,6 +226,7 @@ let power_user = {
226 macro: true,226 macro: true,
227 names_behavior: names_behavior_types.FORCE,227 names_behavior: names_behavior_types.FORCE,
228 activation_regex: '',228 activation_regex: '',
229 derived: false,
229 bind_to_context: false,230 bind_to_context: false,
230 user_alignment_message: '',231 user_alignment_message: '',
231 system_same_as_user: false,232 system_same_as_user: false,
@@ -243,6 +244,8 @@ let power_user = {
243 names_as_stop_strings: true,244 names_as_stop_strings: true,
244 },245 },
245246
247 context_derived: false,
248
246 sysprompt: {249 sysprompt: {
247 enabled: true,250 enabled: true,
248 name: 'Neutral - Chat',251 name: 'Neutral - Chat',
@@ -1472,6 +1475,7 @@ async function loadPowerUserSettings(settings, data) {
1472 $('#encode_tags').prop('checked', power_user.encode_tags);1475 $('#encode_tags').prop('checked', power_user.encode_tags);
1473 $('#example_messages_behavior').val(getExampleMessagesBehavior());1476 $('#example_messages_behavior').val(getExampleMessagesBehavior());
1474 $(`#example_messages_behavior option[value="${getExampleMessagesBehavior()}"]`).prop('selected', true);1477 $(`#example_messages_behavior option[value="${getExampleMessagesBehavior()}"]`).prop('selected', true);
1478 $('#context_derived').parent().find('i').toggleClass('toggleEnabled', !!power_user.context_derived);
14751479
1476 $('#console_log_prompts').prop('checked', power_user.console_log_prompts);1480 $('#console_log_prompts').prop('checked', power_user.console_log_prompts);
1477 $('#request_token_probabilities').prop('checked', power_user.request_token_probabilities);1481 $('#request_token_probabilities').prop('checked', power_user.request_token_probabilities);
@@ -3057,6 +3061,16 @@ $(document).ready(() => {
3057 saveSettingsDebounced();3061 saveSettingsDebounced();
3058 });3062 });
30593063
3064 $('#context_derived').on('input', function () {
3065 const value = !!$(this).prop('checked');
3066 power_user.context_derived = value;
3067 saveSettingsDebounced();
3068 });
3069
3070 $('#context_derived').on('change', function () {
3071 $('#context_derived').parent().find('i').toggleClass('toggleEnabled', !!power_user.context_derived);
3072 });
3073
3060 $('#always-force-name2-checkbox').change(function () {3074 $('#always-force-name2-checkbox').change(function () {
3061 power_user.always_force_name2 = !!$(this).prop('checked');3075 power_user.always_force_name2 = !!$(this).prop('checked');
3062 saveSettingsDebounced();3076 saveSettingsDebounced();