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
31973197 </div>
31983198 <div id="InstructSettingsColumn" class="flex-container flexNoGap flexFlowColumn flex1">
31993199 <div nameid="instructSettingsBlock">
32003200 <h4 class="standoutHeader title_restorable justifySpaceBetween">
32013201 <div class="flex-container">
32023202 <span data-i18n="Instruct Mode">Instruct Mode</span>
@@ -3206,12 +3206,12 @@
32063206 </div>
32073207 <div class="flex-container">
32083208 <label for="instruct_enabled" class="checkbox_label flex1">
32093209 <input id="instruct_enabled" type="checkbox" style="display:none;" />
32103210 <small data-i18n="Enabled"><i class="fa-solid fa-power-off menu_button margin0"></i></small>
32113211 </label>
32123212 <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">
32133213 <input id="instruct_bind_to_context" type="checkbox" style="display:none;" />
32143214 <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>
32153215 </label>
32163216 </div>
32173217 </h4>
@@ -3266,41 +3266,43 @@
32663266 <small data-i18n="Force for Groups and Personas">Force for Groups and Personas</small>
32673267 </label>
32683268 </div>
3269- <hr>
3269+ </div>
3270- <div name="tokenizerSettingsBlock">
3270+ <hr>
32713271 <div data-newbie-hidden name="tokenizerSelectorBlocktokenizerSettingsBlock">
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">
32743297 <span class="fa-solid fa-circle-question note-link-span"></span>
32753298 </a>
32763299 </h4small>
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" />
33013300 </div>
3301+ <input id="token_padding" class="text_pole textarea_compact" type="number" min="-2048" max="2048" />
33023302 </div>
3303-
3303+ </div>
3304+ <div>
3305+ <h4 class="standoutHeader">Misc.</h4>
33043306 <div>
33053307 <small>
33063308 <span data-i18n="Non-markdown strings">
public/scripts/instruct-mode.js+20 -0
@@ -87,8 +87,16 @@ export async function loadInstructMode(data) {
8787
8888 if (power_user.instruct.enabled) {
8989 $('#instruct_enabled').parent().find('i').addClass('toggleEnabled');
90+ $('#instructSettingsBlock, #InstructSequencesColumn').removeClass('disabled');
9091 } else {
9192 $('#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');
92100 }
93101
94102 controls.forEach(control => {
@@ -639,8 +647,12 @@ jQuery(() => {
639647 //color toggle for the main switch
640648 if (power_user.instruct.enabled) {
641649 $('#instruct_enabled').parent().find('i').addClass('toggleEnabled');
650+ $('#instructSettingsBlock, #InstructSequencesColumn')
651+ .removeClass('disabled');
642652 } else {
643653 $('#instruct_enabled').parent().find('i').removeClass('toggleEnabled');
654+ $('#instructSettingsBlock, #InstructSequencesColumn')
655+ .addClass('disabled');
644656 }
645657
646658 if (!power_user.instruct.bind_to_context) {
@@ -656,6 +668,14 @@ jQuery(() => {
656668 }
657669 });
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+
659679 $('#instruct_presets').on('change', function () {
660680 const name = String($(this).find(':selected').val());
661681 const preset = instruct_presets.find(x => x.name === name);