buttonify instruct header toggles, style instruct columns when disabled

93bfe7f40b747b45df7f48288188e9ad374b6db1

RossAscends <124905043+RossAscends@users.noreply.github.com>

Parents: 3ed198deb7702b9e5974cc87cd2ac0dddaf9aba0
2 files changed, +58 -36Ignore whitespace
public/index.html+38 -36
@@ -3196,7 +3196,7 @@
31963196
3197 </div>3197 </div>
3198 <div id="InstructSettingsColumn" class="flex-container flexNoGap flexFlowColumn flex1">3198 <div id="InstructSettingsColumn" class="flex-container flexNoGap flexFlowColumn flex1">
3199 <div name="instructSettingsBlock">3199 <div id="instructSettingsBlock">
3200 <h4 class="standoutHeader title_restorable justifySpaceBetween">3200 <h4 class="standoutHeader title_restorable justifySpaceBetween">
3201 <div class="flex-container">3201 <div class="flex-container">
3202 <span data-i18n="Instruct Mode">Instruct Mode</span>3202 <span data-i18n="Instruct Mode">Instruct Mode</span>
@@ -3206,12 +3206,12 @@
3206 </div>3206 </div>
3207 <div class="flex-container">3207 <div class="flex-container">
3208 <label for="instruct_enabled" class="checkbox_label flex1">3208 <label for="instruct_enabled" class="checkbox_label flex1">
3209 <input id="instruct_enabled" type="checkbox" />3209 <input id="instruct_enabled" type="checkbox" style="display:none;" />
3210 <small data-i18n="Enabled"><i class="fa-solid fa-power-off"></i></small>3210 <small data-i18n="Enabled"><i class="fa-solid fa-power-off menu_button margin0"></i></small>
3211 </label>3211 </label>
3212 <label for="instruct_bind_to_context" class="checkbox_label flex1" title="If enabled, Context templates will be automatically selected based on selected Instruct template name or by preference." data-i18n="[title]instruct_bind_to_context">3212 <label for="instruct_bind_to_context" class="checkbox_label flex1" title="If enabled, Context templates will be automatically selected based on selected Instruct template name or by preference." data-i18n="[title]instruct_bind_to_context">
3213 <input id="instruct_bind_to_context" type="checkbox" />3213 <input id="instruct_bind_to_context" type="checkbox" style="display:none;" />
3214 <small data-i18n="Bind to Context"><i class="fa-solid fa-link"></i></small>3214 <small data-i18n="Bind to Context"><i class="fa-solid fa-link menu_button margin0" title="If enabled, Context templates will be automatically selected based on selected Instruct template name or by preference."></i></small>
3215 </label>3215 </label>
3216 </div>3216 </div>
3217 </h4>3217 </h4>
@@ -3266,41 +3266,43 @@
3266 <small data-i18n="Force for Groups and Personas">Force for Groups and Personas</small>3266 <small data-i18n="Force for Groups and Personas">Force for Groups and Personas</small>
3267 </label>3267 </label>
3268 </div>3268 </div>
3269 <hr>3269 </div>
3270 <div name="tokenizerSettingsBlock">3270 <hr>
3271 <div data-newbie-hidden name="tokenizerSelectorBlock">3271 <div name="tokenizerSettingsBlock">
3272 <h4 class="standoutHeader"><span data-i18n="Tokenizer">Tokenizer</span>3272 <div data-newbie-hidden name="tokenizerSelectorBlock">
3273 <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#tokenizer" class="notes-link" target="_blank">3273 <h4 class="standoutHeader"><span data-i18n="Tokenizer">Tokenizer</span>
3274 <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#tokenizer" class="notes-link" target="_blank">
3275 <span class="fa-solid fa-circle-question note-link-span"></span>
3276 </a>
3277 </h4>
3278 <select id="tokenizer">
3279 <option value="99">Best match (recommended)</option>
3280 <option value="0">None / Estimated</option>
3281 <option value="1">GPT-2</option>
3282 <!-- Option #2 was a legacy GPT-2/3 tokenizer -->
3283 <option value="3">Llama 1/2</option>
3284 <option value="12">Llama 3</option>
3285 <option value="4">NerdStash (NovelAI Clio)</option>
3286 <option value="5">NerdStash v2 (NovelAI Kayra)</option>
3287 <option value="7">Mistral</option>
3288 <option value="8">Yi</option>
3289 <option value="11">Claude 1/2</option>
3290 <option value="6">API (WebUI / koboldcpp)</option>
3291 </select>
3292 </div>
3293 <div class="range-block flex-container flexnowrap" data-newbie-hidden name="tokenPaddingBlock">
3294 <div class="range-block-title justifyLeft">
3295 <small data-i18n="Token Padding" class="flex-container">Token Padding
3296 <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#token-padding" class="notes-link" target="_blank">
3274 <span class="fa-solid fa-circle-question note-link-span"></span>3297 <span class="fa-solid fa-circle-question note-link-span"></span>
3275 </a>3298 </a>
3276 </h4>3299 </small>
3277 <select id="tokenizer">
3278 <option value="99">Best match (recommended)</option>
3279 <option value="0">None / Estimated</option>
3280 <option value="1">GPT-2</option>
3281 <!-- Option #2 was a legacy GPT-2/3 tokenizer -->
3282 <option value="3">Llama 1/2</option>
3283 <option value="12">Llama 3</option>
3284 <option value="4">NerdStash (NovelAI Clio)</option>
3285 <option value="5">NerdStash v2 (NovelAI Kayra)</option>
3286 <option value="7">Mistral</option>
3287 <option value="8">Yi</option>
3288 <option value="11">Claude 1/2</option>
3289 <option value="6">API (WebUI / koboldcpp)</option>
3290 </select>
3291 </div>
3292 <div class="range-block flex-container flexnowrap" data-newbie-hidden name="tokenPaddingBlock">
3293 <div class="range-block-title justifyLeft">
3294 <small data-i18n="Token Padding" class="flex-container">Token Padding
3295 <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#token-padding" class="notes-link" target="_blank">
3296 <span class="fa-solid fa-circle-question note-link-span"></span>
3297 </a>
3298 </small>
3299 </div>
3300 <input id="token_padding" class="text_pole textarea_compact" type="number" min="-2048" max="2048" />
3301 </div>3300 </div>
3301 <input id="token_padding" class="text_pole textarea_compact" type="number" min="-2048" max="2048" />
3302 </div>3302 </div>
33033303 </div>
3304 <div>
3305 <h4 class="standoutHeader">Misc.</h4>
3304 <div>3306 <div>
3305 <small>3307 <small>
3306 <span data-i18n="Non-markdown strings">3308 <span data-i18n="Non-markdown strings">
public/scripts/instruct-mode.js+20 -0
@@ -87,8 +87,16 @@ export async function loadInstructMode(data) {
8787
88 if (power_user.instruct.enabled) {88 if (power_user.instruct.enabled) {
89 $('#instruct_enabled').parent().find('i').addClass('toggleEnabled');89 $('#instruct_enabled').parent().find('i').addClass('toggleEnabled');
90 $('#instructSettingsBlock, #InstructSequencesColumn').removeClass('disabled');
90 } else {91 } else {
91 $('#instruct_enabled').parent().find('i').removeClass('toggleEnabled');92 $('#instruct_enabled').parent().find('i').removeClass('toggleEnabled');
93 $('#instructSettingsBlock, #InstructSequencesColumn').addClass('disabled');
94 }
95
96 if (power_user.instruct.bind_to_context) {
97 $('#instruct_bind_to_context').parent().find('i').addClass('toggleEnabled');
98 } else {
99 $('#instruct_bind_to_context').parent().find('i').removeClass('toggleEnabled');
92 }100 }
93101
94 controls.forEach(control => {102 controls.forEach(control => {
@@ -639,8 +647,12 @@ jQuery(() => {
639 //color toggle for the main switch647 //color toggle for the main switch
640 if (power_user.instruct.enabled) {648 if (power_user.instruct.enabled) {
641 $('#instruct_enabled').parent().find('i').addClass('toggleEnabled');649 $('#instruct_enabled').parent().find('i').addClass('toggleEnabled');
650 $('#instructSettingsBlock, #InstructSequencesColumn')
651 .removeClass('disabled');
642 } else {652 } else {
643 $('#instruct_enabled').parent().find('i').removeClass('toggleEnabled');653 $('#instruct_enabled').parent().find('i').removeClass('toggleEnabled');
654 $('#instructSettingsBlock, #InstructSequencesColumn')
655 .addClass('disabled');
644 }656 }
645657
646 if (!power_user.instruct.bind_to_context) {658 if (!power_user.instruct.bind_to_context) {
@@ -656,6 +668,14 @@ jQuery(() => {
656 }668 }
657 });669 });
658670
671 $('#instruct_bind_to_context').on('change', function () {
672 if (power_user.instruct.bind_to_context) {
673 $('#instruct_bind_to_context').parent().find('i').addClass('toggleEnabled');
674 } else {
675 $('#instruct_bind_to_context').parent().find('i').removeClass('toggleEnabled');
676 }
677 });
678
659 $('#instruct_presets').on('change', function () {679 $('#instruct_presets').on('change', function () {
660 const name = String($(this).find(':selected').val());680 const name = String($(this).find(':selected').val());
661 const preset = instruct_presets.find(x => x.name === name);681 const preset = instruct_presets.find(x => x.name === name);