re-order/style User Settings Panel

This commit is contained in:
RossAscends
2024-04-27 12:50:33 +09:00
parent bbdbb08301
commit 1f7614af33

View File

@ -3562,7 +3562,7 @@
</div>
</div>
<div name="themeElements" data-newbie-hidden class="flex-container flexFlowColumn flexNoGap">
<h4><span data-i18n="UI Colors">Theme Settings</span></h4>
<!-- <h4><span data-i18n="UI Colors">Theme Settings</span></h4> -->
<div name="AvatarAndChatDisplay" class="flex-container flexFlowColumn">
<div class="flex-container">
<span data-i18n="Avatar Style">Avatars:</span>
@ -3581,50 +3581,98 @@
</select>
</div>
</div>
<div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
<div class="flex-container">
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
<span data-i18n="Main Text">Main Text</span>
<div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
<div class="inline-drawer-toggle inline-drawer-header" title="Specify colors for your theme." data-i18n="[title]Specify colors for your theme.">
<b><span data-i18n="Theme Colors">Theme Colors</span></b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="flex-container">
<toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
<span data-i18n="Italics Text">Italics Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="underline-color-picker"></toolcool-color-picker>
<span data-i18n="Underlined Text">Underlined Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="quote-color-picker"></toolcool-color-picker>
<span data-i18n="Quote Text">Quote Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="shadow-color-picker"></toolcool-color-picker>
<span data-i18n="Shadow Color">Text Shadow</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="chat-tint-color-picker"></toolcool-color-picker>
<span data-i18n="Chat Background">Chat Background</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="UI Background">UI Background</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="border-color-picker"></toolcool-color-picker>
<span data-i18n="UI Border">UI Border</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="user-mes-blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="User Message Blur Tint">User Message</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="bot-mes-blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="AI Message Blur Tint">AI Message</span>
<div class="inline-drawer-content">
<div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
<div class="flex-container">
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
<span data-i18n="Main Text">Main Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
<span data-i18n="Italics Text">Italics Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="underline-color-picker"></toolcool-color-picker>
<span data-i18n="Underlined Text">Underlined Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="quote-color-picker"></toolcool-color-picker>
<span data-i18n="Quote Text">Quote Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="shadow-color-picker"></toolcool-color-picker>
<span data-i18n="Shadow Color">Text Shadow</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="chat-tint-color-picker"></toolcool-color-picker>
<span data-i18n="Chat Background">Chat Background</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="UI Background">UI Background</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="border-color-picker"></toolcool-color-picker>
<span data-i18n="UI Border">UI Border</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="user-mes-blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="User Message Blur Tint">User Message</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="bot-mes-blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="AI Message Blur Tint">AI Message</span>
</div>
</div>
</div>
</div>
<div data-newbie-hidden name="FontBlurChatWidthBlock" class="flex-container flexFlowColumn flexNoGap">
<div data-newbie-hidden class="range-block">
<div data-newbie-hidden name="FontBlurChatWidthBlock" class="flex-container">
<div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
<small>
<span data-i18n="Chat Width">Chat Width <i class="fa-solid fa-desktop"></i></span>
<div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Width of the main chat window in % of screen width" title="Width of the main chat window in % of screen width"></div>
</small>
<input class="neo-range-slider" type="range" id="chat_width_slider" name="chat_width_slider" min="25" max="100" step="1">
<input class="neo-range-input" type="number" min="25" max="100" step="1" data-for="chat_width_slider" id="chat_width_slider_counter">
</div>
<div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
<small>
<span data-i18n="Font Scale">Font Scale</span>
<div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Font size" title="Font size"></div>
</small>
<input class="neo-range-slider" type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.01">
<input class="neo-range-input" type="number" min="0.8" max="1.2" step="0.01" data-for="font_scale" id="font_scale_counter">
</div>
<div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
<small>
<span data-i18n="Blur Strength">Blur Strength</span>
<div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Blur strength on UI panels." title="Blur strength on UI panels."></div>
</small>
<input class="neo-range-slider" type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
<input class="neo-range-input" type="number" min="0" max="30" step="1" data-for="blur_strength" id="blur_strength_counter">
</div>
<div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
<small>
<span data-i18n="Text Shadow Width">Text Shadow Width</span>
<div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Strength of the text shadows" title="Strength of the text shadows"></div>
</small>
<input class="neo-range-slider" type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
<input class="neo-range-input" type="number" min="0" max="5" step="1" data-for="shadow_width" id="shadow_width_counter">
</div>
<!-- <div data-newbie-hidden class="range-block">
<label for="compact_input_area" class="range-block-title">
<span data-i18n="Chat Width (PC)">
Chat Width
@ -3639,8 +3687,9 @@
<input type="number" min="25" max="100" step="1" value="50" data-for="chat_width_slider" id="chat_width_slider_counter">
</div>
</div>
</div>
<div id="font-scale-block" class="range-block">
</div> -->
<!-- <div id="font-scale-block" class="range-block">
<div class="range-block-title" data-i18n="Font Scale">
Font Scale
</div>
@ -3652,8 +3701,8 @@
<input type="number" min="0.8" max="1.2" step="0.01" data-for="font_scale" id="font_scale_counter">
</div>
</div>
</div>
<div id="blur-strength-block" class="range-block">
</div> -->
<!-- <div id="blur-strength-block" class="range-block">
<div class="range-block-title" data-i18n="Blur Strength">
Blur Strength
</div>
@ -3665,8 +3714,8 @@
<input type="number" min="0" max="30" step="1" data-for="blur_strength" id="blur_strength_counter">
</div>
</div>
</div>
<div id="shadow-width-block" class="range-block">
</div> -->
<!-- <div id="shadow-width-block" class="range-block">
<div class="range-block-title" data-i18n="Text Shadow Width">
Text Shadow Width
</div>
@ -3678,8 +3727,8 @@
<input type="number" min="0" max="5" step="1" data-for="shadow_width" id="shadow_width_counter">
</div>
</div>
</div>
<div id="chat-truncation-block" class="range-block">
</div> -->
<!-- <div id="chat-truncation-block" class="range-block">
<label for="compact_input_area" class="range-block-title">
<span data-i18n="Chat Truncation">
Chat Truncation
@ -3694,8 +3743,8 @@
<input type="number" min="0" max="1000" step="1" data-for="chat_truncation" id="chat_truncation_counter">
</div>
</div>
</div>
<div id="streaming-fps" class="range-block">
</div> -->
<!-- <div id="streaming-fps" class="range-block">
<div class="range-block-title" data-i18n="Streaming FPS">
Streaming FPS
</div>
@ -3707,116 +3756,165 @@
<input type="number" min="5" max="100" step="1" data-for="streaming_fps" id="streaming_fps_counter">
</div>
</div>
</div>
<label class="checkbox_label flexWrap" for="smooth_streaming">
<input id="smooth_streaming" type="checkbox" />
<div class="flex-container alignItemsBaseline">
<span data-i18n="Smooth Streaming">
Smooth Streaming
</span>
<i class="fa-solid fa-flask" data-i18n="[title]Experimental feature. May not work for all backends." title="Experimental feature. May not work for all backends."></i>
</div>
<div id="smooth_streaming_speed_control" class="flexBasis100p wide100p">
<small class="flex justifyCenter" data-i18n="Speed">Speed</small>
<input type="range" id="smooth_streaming_speed" name="smooth_streaming_speed" min="0" max="100" step="10" value="50">
<div class="slider_hint">
<span data-i18n="Slow">Slow</span>
<span data-i18n=""></span>
<span data-i18n="Slow">Fast</span>
</div>
</div>
</label>
</div> -->
</div>
<div name="themeToggles">
<h4 data-i18n="Theme Toggles">Theme Toggles</h4>
<label for="reduced_motion" class="checkbox_label" title="Disable animations and transitions" data-i18n="[title]Disables animations and transitions">
<input id="reduced_motion" type="checkbox" />
<small data-i18n="Reduced Motion">Reduced Motion</small>
</label>
<label data-newbie-hidden for="fast_ui_mode" class="checkbox_label" title="Remove blur from window backgrounds, for faster rendering." data-i18n="[title]removes blur from window backgrounds">
<input id="fast_ui_mode" type="checkbox" />
<small data-i18n="No Blur Effect">No Blur Effect</small>
</label>
<label data-newbie-hidden for="noShadowsmode" class="checkbox_label" title="Remove text shadow effect." data-i18n="[title]Remove text shadow effect">
<input id="noShadowsmode" type="checkbox" />
<small data-i18n="No Text Shadows">No Text Shadows</small>
</label>
<label for="waifuMode" class="checkbox_label" title="Reduce chat height, and put a static sprite behind the chat window." data-i18n="[title]Reduce chat height, and put a static sprite behind the chat window">
<input id="waifuMode" type="checkbox" />
<small data-i18n="Waifu Mode">Visual Novel Mode</small>
</label>
<label data-newbie-hidden for="expandMessageActions" class="checkbox_label" title="Always show the full list of the Message Actions context items for chat messages, instead of hiding them behind '...'." data-i18n="[title]Always show the full list of the Message Actions context items for chat messages, instead of hiding them behind '...'">
<input id="expandMessageActions" type="checkbox" />
<small data-i18n="Auto-Expand Message Actions">Expand Message Actions</small>
</label>
<label data-newbie-hidden for="enableZenSliders" class="checkbox_label" title="Alternative UI for numeric sampling parameters with fewer steps." data-i18n="[title]Alternative UI for numeric sampling parameters with fewer steps">
<input id="enableZenSliders" type="checkbox" />
<small data-i18n="Zen Sliders">Zen Sliders</small>
</label>
<label data-newbie-hidden for="enableLabMode" class="checkbox_label" title="Entirely unrestrict all numeric sampling parameters." data-i18n="[title]Entirely unrestrict all numeric sampling parameters">
<input id="enableLabMode" type="checkbox" />
<small data-i18n="Mad Lab Mode">Mad Lab Mode</small>
</label>
<label data-newbie-hidden for="messageTimerEnabled" class="checkbox_label" title="Time the AI's message generation, and show the duration in the chat log." data-i18n="[title]Time the AI's message generation, and show the duration in the chat log">
<input id="messageTimerEnabled" type="checkbox" />
<small data-i18n="Message Timer">Message Timer</small>
</label>
<label data-newbie-hidden for="messageTimestampsEnabled" class="checkbox_label" title="Show a timestamp for each message in the chat log." data-i18n="[title]Show a timestamp for each message in the chat log">
<input id="messageTimestampsEnabled" type="checkbox" />
<small data-i18n="Chat Timestamps">Chat Timestamps</small>
</label>
<label data-newbie-hidden for="messageModelIconEnabled" class="checkbox_label" title="Show an icon for the API that generated the message." data-i18n="[title]Show an icon for the API that generated the message">
<input id="messageModelIconEnabled" type="checkbox" />
<small data-i18n="Model Icon">Model Icons</small>
</label>
<label data-newbie-hidden for="mesIDDisplayEnabled" class="checkbox_label" title="Show sequential message numbers in the chat log." data-i18n="[title]Show sequential message numbers in the chat log">
<input id="mesIDDisplayEnabled" type="checkbox" />
<small data-i18n="Message IDs">Message IDs</small>
</label>
<label data-newbie-hidden for="hideChatAvatarsEnabled" class="checkbox_label" title="Hide avatars in chat messages." data-i18n="[title]Hide avatars in chat messages.">
<input id="hideChatAvatarsEnabled" type="checkbox" />
<small data-i18n="Hide Chat Avatars">Hide Chat Avatars</small>
</label>
<label data-newbie-hidden for="messageTokensEnabled" class="checkbox_label" title="Show the number of tokens for each message in the chat log." data-i18n="[title]Show the number of tokens in each message in the chat log">
<input id="messageTokensEnabled" type="checkbox" />
<small data-i18n="Show Message Token Count">Message Token Count</small>
</label>
<label for="compact_input_area" class="checkbox_label" title="Single-row message input area. Mobile only, no effect on PC." data-i18n="[title]Single-row message input area. Mobile only, no effect on PC">
<input id="compact_input_area" type="checkbox" />
<small data-i18n="Compact Input Area (Mobile)">Compact Input Area</small><i class="fa-solid fa-mobile-screen-button"></i>
</label>
<label data-newbie-hidden for="hotswapEnabled" class="checkbox_label" title="In the Character Management panel, show quick selection buttons for favorited characters." data-i18n="[title]In the Character Management panel, show quick selection buttons for favorited characters">
<input id="hotswapEnabled" type="checkbox" />
<small data-i18n="Characters Hotswap">Characters Hotswap</small>
</label>
<label for="zoomed_avatar_magnification" class="checkbox_label" title="Enable magnification for zoomed avatar display." data-i18n="[title]Enable magnification for zoomed avatar display.">
<input id="zoomed_avatar_magnification" type="checkbox" />
<small data-i18n="Avatar Hover Magnification">Avatar Hover Magnification</small>
<i title="Enables a magnification effect on hover when you display the zoomed avatar after clicking an avatar's image in chat." class="right_menu_button fa-solid fa-circle-exclamation"></i>
</label>
<label for="bogus_folders" class="checkbox_label" title="Show tagged character folders in the character list." data-i18n="[title]Show tagged character folders in the character list">
<input id="bogus_folders" type="checkbox" />
<small data-i18n="Tags as Folders">Tags as Folders</small>
<i title="Recent change: Tags must be marked as folders in the Tag Management menu to appear as such. Click here to bring it up." class="tags_view right_menu_button fa-solid fa-circle-exclamation"></i>
</label>
</div>
</div>
</div>
<div name="UserSettingsSecondColumn" id="UI-Customization" class="flex-container flexFlowColumn wide100p flexNoGap">
<div name="themeToggles">
<h4 data-i18n="Theme Toggles">Theme Toggles</h4>
<label for="reduced_motion" class="checkbox_label" title="Disable animations and transitions" data-i18n="[title]Disables animations and transitions">
<input id="reduced_motion" type="checkbox" />
<span data-i18n="Reduced Motion">Reduced Motion</span>
<div data-newbie-hidden name="CharacterHandlingToggles">
<h4 data-i18n="Character Handling">
Character Handling
</h4>
<div title="If set in the advanced character definitions, this field will be displayed in the characters list." data-i18n="[title]If set in the advanced character definitions, this field will be displayed in the characters list.">
<label for="aux_field" data-i18n="Char List Subheader"><small>Char List Subheader</small></label>
<select id="aux_field">
<option data-i18n="Character Version" value="character_version">Character Version</option>
<option data-i18n="Created by" value="creator">Created by</option>
</select>
</div>
<label data-newbie-hidden class="checkbox_label" for="fuzzy_search_checkbox" title="Use fuzzy matching, and search characters in the list by all data fields, not just by a name substring." data-i18n="[title]Use fuzzy matching, and search characters in the list by all data fields, not just by a name substring">
<input id="fuzzy_search_checkbox" type="checkbox" />
<small data-i18n="Advanced Character Search">Advanced Character Search</small>
</label>
<label data-newbie-hidden for="fast_ui_mode" class="checkbox_label" title="Remove blur from window backgrounds, for faster rendering." data-i18n="[title]removes blur from window backgrounds">
<input id="fast_ui_mode" type="checkbox" />
<span data-i18n="No Blur Effect">No Blur Effect</span>
<label data-newbie-hidden for="prefer_character_prompt" title="If checked and the character card contains a prompt override (System Prompt), use that instead." data-i18n="[title]If checked and the character card contains a prompt override (System Prompt), use that instead" class="checkbox_label">
<input id="prefer_character_prompt" type="checkbox" />
<small data-i18n="Prefer Character Card Prompt">Prefer Char. Prompt</small>
</label>
<label data-newbie-hidden for="noShadowsmode" class="checkbox_label" title="Remove text shadow effect." data-i18n="[title]Remove text shadow effect">
<input id="noShadowsmode" type="checkbox" />
<span data-i18n="No Text Shadows">No Text Shadows</span>
<label data-newbie-hidden for="prefer_character_jailbreak" title="If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." data-i18n="[title]If checked and the character card contains a jailbreak override (Post History Instruction), use that instead" class="checkbox_label">
<input id="prefer_character_jailbreak" type="checkbox" />
<small data-i18n="Prefer Character Card Jailbreak">Prefer Char. Jailbreak</small>
</label>
<label for="waifuMode" class="checkbox_label" title="Reduce chat height, and put a static sprite behind the chat window." data-i18n="[title]Reduce chat height, and put a static sprite behind the chat window">
<input id="waifuMode" type="checkbox" />
<span data-i18n="Waifu Mode">Visual Novel Mode</span>
<label data-newbie-hidden class="checkbox_label" for="never_resize_avatars" title="Avoid cropping and resizing imported character images. When off, crop/resize to 512x768." data-i18n="[title]Avoid cropping and resizing imported character images. When off, crop/resize to 512x768">
<input id="never_resize_avatars" type="checkbox" />
<small data-i18n="Never resize avatars">Never resize avatars</small>
</label>
<label data-newbie-hidden for="expandMessageActions" class="checkbox_label" title="Always show the full list of the Message Actions context items for chat messages, instead of hiding them behind '...'." data-i18n="[title]Always show the full list of the Message Actions context items for chat messages, instead of hiding them behind '...'">
<input id="expandMessageActions" type="checkbox" />
<span data-i18n="Auto-Expand Message Actions">Expand Message Actions</span>
<label data-newbie-hidden class="checkbox_label" for="show_card_avatar_urls" title="Show actual file names on the disk, in the characters list display only." data-i18n="[title]Show actual file names on the disk, in the characters list display only">
<input id="show_card_avatar_urls" type="checkbox" />
<small data-i18n="Show avatar filenames">Show avatar filenames</small>
</label>
<label data-newbie-hidden for="enableZenSliders" class="checkbox_label" title="Alternative UI for numeric sampling parameters with fewer steps." data-i18n="[title]Alternative UI for numeric sampling parameters with fewer steps">
<input id="enableZenSliders" type="checkbox" />
<span data-i18n="Zen Sliders">Zen Sliders</span>
<label data-newbie-hidden class="checkbox_label" for="import_card_tags" title="Prompt to import embedded card tags on character import. Otherwise embedded tags are ignored." data-i18n="[title]Prompt to import embedded card tags on character import. Otherwise embedded tags are ignored">
<input id="import_card_tags" type="checkbox" />
<small data-i18n="Import Card Tags">Import Card Tags</small>
</label>
<label data-newbie-hidden for="enableLabMode" class="checkbox_label" title="Entirely unrestrict all numeric sampling parameters." data-i18n="[title]Entirely unrestrict all numeric sampling parameters">
<input id="enableLabMode" type="checkbox" />
<span data-i18n="Mad Lab Mode">Mad Lab Mode</span>
</label>
<label data-newbie-hidden for="messageTimerEnabled" class="checkbox_label" title="Time the AI's message generation, and show the duration in the chat log." data-i18n="[title]Time the AI's message generation, and show the duration in the chat log">
<input id="messageTimerEnabled" type="checkbox" />
<span data-i18n="Message Timer">Message Timer</span>
</label>
<label data-newbie-hidden for="messageTimestampsEnabled" class="checkbox_label" title="Show a timestamp for each message in the chat log." data-i18n="[title]Show a timestamp for each message in the chat log">
<input id="messageTimestampsEnabled" type="checkbox" />
<span data-i18n="Chat Timestamps">Chat Timestamps</span>
</label>
<label data-newbie-hidden for="messageModelIconEnabled" class="checkbox_label" title="Show an icon for the API that generated the message." data-i18n="[title]Show an icon for the API that generated the message">
<input id="messageModelIconEnabled" type="checkbox" />
<span data-i18n="Model Icon">Model Icons</span>
</label>
<label data-newbie-hidden for="mesIDDisplayEnabled" class="checkbox_label" title="Show sequential message numbers in the chat log." data-i18n="[title]Show sequential message numbers in the chat log">
<input id="mesIDDisplayEnabled" type="checkbox" />
<span data-i18n="Message IDs">Message IDs</span>
</label>
<label data-newbie-hidden for="hideChatAvatarsEnabled" class="checkbox_label" title="Hide avatars in chat messages." data-i18n="[title]Hide avatars in chat messages.">
<input id="hideChatAvatarsEnabled" type="checkbox" />
<span data-i18n="Hide Chat Avatars">Hide Chat Avatars</span>
</label>
<label data-newbie-hidden for="messageTokensEnabled" class="checkbox_label" title="Show the number of tokens for each message in the chat log." data-i18n="[title]Show the number of tokens in each message in the chat log">
<input id="messageTokensEnabled" type="checkbox" />
<span data-i18n="Show Message Token Count">Message Token Count</span>
</label>
<label for="compact_input_area" class="checkbox_label" title="Single-row message input area. Mobile only, no effect on PC." data-i18n="[title]Single-row message input area. Mobile only, no effect on PC">
<input id="compact_input_area" type="checkbox" />
<span data-i18n="Compact Input Area (Mobile)">Compact Input Area</span><i class="fa-solid fa-mobile-screen-button"></i>
</label>
<label data-newbie-hidden for="hotswapEnabled" class="checkbox_label" title="In the Character Management panel, show quick selection buttons for favorited characters." data-i18n="[title]In the Character Management panel, show quick selection buttons for favorited characters">
<input id="hotswapEnabled" type="checkbox" />
<span data-i18n="Characters Hotswap">Characters Hotswap</span>
</label>
<label for="bogus_folders" class="checkbox_label" title="Show tagged character folders in the character list." data-i18n="[title]Show tagged character folders in the character list">
<input id="bogus_folders" type="checkbox" />
<span data-i18n="Tags as Folders">Tags as Folders</span>
<i title="Recent change: Tags must be marked as folders in the Tag Management menu to appear as such. Click here to bring it up." class="tags_view right_menu_button fa-solid fa-circle-exclamation"></i>
</label>
<label for="zoomed_avatar_magnification" class="checkbox_label" title="Enable magnification for zoomed avatar display." data-i18n="[title]Enable magnification for zoomed avatar display.">
<input id="zoomed_avatar_magnification" type="checkbox" />
<span data-i18n="Avatar Hover Magnification">Avatar Hover Magnification</span>
<i title="Enables a magnification effect on hover when you display the zoomed avatar after clicking an avatar's image in chat." class="right_menu_button fa-solid fa-circle-exclamation"></i>
<label data-newbie-hidden class="checkbox_label" for="spoiler_free_mode" title="Hide character definitions from the editor panel behind a spoiler button." data-i18n="[title]Hide character definitions from the editor panel behind a spoiler button">
<input id="spoiler_free_mode" type="checkbox" />
<small data-i18n="Spoiler Free Mode">Spoiler Free Mode</small>
</label>
</div>
<h4><span data-i18n="Miscellaneous">Miscellaneous</span></h4>
<div title="If set in the advanced character definitions, this field will be displayed in the characters list." data-i18n="[title]If set in the advanced character definitions, this field will be displayed in the characters list.">
<label for="aux_field" data-i18n="Aux List Field">Aux List Field</label>
<select id="aux_field">
<option data-i18n="Character Version" value="character_version">Character Version</option>
<option data-i18n="Created by" value="creator">Created by</option>
</select>
</div>
<div>
<div data-newbie-hidden class="flex-container">
<div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="[title]Reload and redraw the currently open chat" title="Reload and redraw the currently open chat.">
<small data-i18n="Reload Chat">Reload Chat</small>
</div>
<div id="debug_menu" class="menu_button whitespacenowrap" data-i18n="Debug Menu">
<small data-i18n="Debug Menu">Debug Menu</small>
</div>
</div>
<label class="checkbox_label flexWrap" for="smooth_streaming">
<input id="smooth_streaming" type="checkbox" />
<div class="flex-container alignItemsBaseline">
<small data-i18n="Smooth Streaming">
Smooth Streaming
</small>
<i class="fa-solid fa-flask" data-i18n="[title]Experimental feature. May not work for all backends." title="Experimental feature. May not work for all backends."></i>
</div>
<div id="smooth_streaming_speed_control" class="flexBasis100p wide100p">
<small class="flex justifyCenter" data-i18n="Speed">Speed</small>
<input type="range" id="smooth_streaming_speed" name="smooth_streaming_speed" min="0" max="100" step="10" value="50">
<div class="slider_hint">
<span data-i18n="Slow">Slow</span>
<span data-i18n=""></span>
<span data-i18n="Slow">Fast</span>
</div>
</div>
</label>
<label for="play_message_sound" class="checkbox_label" title="Play a sound when a message generation finishes." data-i18n="[title]Play a sound when a message generation finishes">
<input id="play_message_sound" type="checkbox" />
<audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
<span>
<span data-i18n="Message Sound">Message Sound</span>
<small data-i18n="Message Sound">Message Sound</small>
<a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#message-sound" class="notes-link" target="_blank">
<span class="fa-solid fa-circle-question note-link-span"></span>
</a>
@ -3824,41 +3922,37 @@
</label>
<label for="play_sound_unfocused" class="checkbox_label" title="Only play a sound when ST's browser tab is unfocused." data-i18n="[title]Only play a sound when ST's browser tab is unfocused">
<input id="play_sound_unfocused" type="checkbox" />
<span data-i18n="Background Sound Only">Background Sound Only</span>
<small data-i18n="Background Sound Only">Background Sound Only</small>
</label>
<label data-newbie-hidden class="checkbox_label" for="relaxed_api_urls" title="Reduce the formatting requirements on API URLs." data-i18n="[title]Reduce the formatting requirements on API URLs">
<input id="relaxed_api_urls" type="checkbox" />
<span data-i18n="Relaxed API URLS">Relaxed API URLs</span>
<small data-i18n="Relaxed API URLS">Relaxed API URLs</small>
</label>
<label data-newbie-hidden class="checkbox_label" for="world_import_dialog" title="Ask to import the World Info/Lorebook for every new character with embedded lorebook. If unchecked, a brief message will be shown instead." data-i18n="[title]Ask to import the World Info/Lorebook for every new character with embedded lorebook. If unchecked, a brief message will be shown instead">
<input id="world_import_dialog" type="checkbox" />
<span data-i18n="Lorebook Import Dialog">Lorebook Import Dialog</span>
<small data-i18n="Lorebook Import Dialog">Lorebook Import Dialog</small>
</label>
<label class="checkbox_label" for="restore_user_input" title="Restore unsaved user input on page refresh." data-i18n="[title]Restore unsaved user input on page refresh">
<input id="restore_user_input" type="checkbox" />
<span data-i18n="Restore User Input">Restore User Input</span>
<small data-i18n="Restore User Input">Restore User Input</small>
</label>
<label data-newbie-hidden id="movingUIModeCheckBlock" for="movingUImode" class="checkbox_label" title="Allow repositioning certain UI elements by dragging them. PC only, no effect on mobile." data-i18n="[title]Allow repositioning certain UI elements by dragging them. PC only, no effect on mobile">
<input id="movingUImode" type="checkbox" />
<span data-i18n="Movable UI Panels">MovingUI&nbsp;<i class="fa-solid fa-desktop"></i></span>
<small data-i18n="Movable UI Panels">MovingUI&nbsp;<i class="fa-solid fa-desktop"></i></small>
</label>
<div data-newbie-hidden id="MovingUI-presets-block" class="flex-container alignitemscenter">
<div class="flex-container alignitemscenter">
<div class="flex-container alignItemsFlexEnd">
<label for="movingUIPresets" title="MovingUI preset. Predefined/saved draggable positions." data-i18n="[title]MovingUI preset. Predefined/saved draggable positions">
<span data-i18n="MUI Preset">MUI Preset:</span>
<small data-i18n="MUI Preset">MUI Preset:</small>
<div class="flex-container flexnowrap">
<select id="movingUIPresets" class="widthNatural flex1 margin0">
</select>
<div id="movingui-preset-save-button" title="Save changes to a new MovingUI preset file." data-i18n="[title]Save movingUI changes to a new file" class="menu_button margin0">
<i class="fa-solid fa-save"></i>
</div>
</div>
</label>
<div id="movingui-preset-save-button" title="Save changes to a new MovingUI preset file." data-i18n="[title]Save movingUI changes to a new file" class="menu_button margin0 fa-solid fa-save"></div>
<div data-newbie-hidden id="movingUIreset" title="Reset MovingUI panel sizes/locations." class="menu_button fa-solid fa-recycle margin0" data-i18n="Reset Panels"></div>
</div>
</div>
<div data-newbie-hidden id="movingUIreset" class="menu_button whitespacenowrap" data-i18n="Reset Panels">
Reset MovingUI
</div>
<div data-newbie-hidden id="CustomCSS-block" class="flex-container flexFlowColumn">
<h4 title="Apply a custom CSS style to all of the ST GUI." data-i18n="[title]Apply a custom CSS style to all of the ST GUI">
<span data-i18n="Custom CSS">Custom CSS</span>
@ -3871,13 +3965,33 @@
</div>
<div name="UserSettingsThirdColumn" id="power-user-options-block" class="flex-container wide100p">
<div id="power-user-option-checkboxes">
<div data-newbie-hidden name="CharacterHandlingToggles">
<h4 data-i18n="Character Handling">
Character Handling
</h4>
<div name="ChatMessageHandlingToggles">
<h4 data-i18n="Chat/Message Handling">Chat/Message Handling</h4>
<div class="flex-container">
<div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
<small>
<span data-i18n="# Messages to Load"># Messages to Load</span>
<div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]The number of chat history messages to load before pagination." title="The number of chat history messages to load before pagination."></div>
</small>
<input class="neo-range-slider" type="range" id="chat_truncation" name="chat_truncation" min="0" max="1000" step="25">
<input class="neo-range-input" type="number" min="0" max="1000" step="25" data-for="chat_truncation" id="chat_truncation_counter">
<small data-i18n="(0 = All)">(0 = All)</small>
</div>
<div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0">
<small>
<span data-i18n="Streaming FPS">Streaming FPS</span>
<div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Update speed of streamed text." title="Update speed of streamed text."></div>
</small>
<input class="neo-range-slider" type="range" id="streaming_fps" name="streaming_fps" min="5" max="100" step="5">
<input class="neo-range-input" type="number" min="5" max="100" step="5" data-for="streaming_fps" id="streaming_fps_counter">
</div>
</div>
<div data-newbie-hidden id="examples-behavior-block">
<label data-i18n="Example Messages Behavior">
Example Messages Behavior:
<small>Example Messages Behavior:</small>
</label>
<select id="example_messages_behavior">
<option value="normal" data-i18n="Gradual push-out">Gradual push-out</option>
@ -3885,41 +3999,10 @@
<option value="strip" data-i18n="Never include examples">Never include examples</option>
</select>
</div>
<label data-newbie-hidden class="checkbox_label" for="fuzzy_search_checkbox" title="Use fuzzy matching, and search characters in the list by all data fields, not just by a name substring." data-i18n="[title]Use fuzzy matching, and search characters in the list by all data fields, not just by a name substring">
<input id="fuzzy_search_checkbox" type="checkbox" />
<span data-i18n="Advanced Character Search">Advanced Character Search</span>
</label>
<label data-newbie-hidden for="prefer_character_prompt" title="If checked and the character card contains a prompt override (System Prompt), use that instead." data-i18n="[title]If checked and the character card contains a prompt override (System Prompt), use that instead" class="checkbox_label">
<input id="prefer_character_prompt" type="checkbox" />
<span data-i18n="Prefer Character Card Prompt">Prefer Char. Prompt</span>
</label>
<label data-newbie-hidden for="prefer_character_jailbreak" title="If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." data-i18n="[title]If checked and the character card contains a jailbreak override (Post History Instruction), use that instead" class="checkbox_label">
<input id="prefer_character_jailbreak" type="checkbox" />
<span data-i18n="Prefer Character Card Jailbreak">Prefer Char. Jailbreak</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="never_resize_avatars" title="Avoid cropping and resizing imported character images. When off, crop/resize to 512x768." data-i18n="[title]Avoid cropping and resizing imported character images. When off, crop/resize to 512x768">
<input id="never_resize_avatars" type="checkbox" />
<span data-i18n="Never resize avatars">Never resize avatars</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="show_card_avatar_urls" title="Show actual file names on the disk, in the characters list display only." data-i18n="[title]Show actual file names on the disk, in the characters list display only">
<input id="show_card_avatar_urls" type="checkbox" />
<span data-i18n="Show avatar filenames">Show avatar filenames</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="import_card_tags" title="Prompt to import embedded card tags on character import. Otherwise embedded tags are ignored." data-i18n="[title]Prompt to import embedded card tags on character import. Otherwise embedded tags are ignored">
<input id="import_card_tags" type="checkbox" />
<span data-i18n="Import Card Tags">Import Card Tags</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="spoiler_free_mode" title="Hide character definitions from the editor panel behind a spoiler button." data-i18n="[title]Hide character definitions from the editor panel behind a spoiler button">
<input id="spoiler_free_mode" type="checkbox" />
<span data-i18n="Spoiler Free Mode">Spoiler Free Mode</span>
</label>
</div>
<div name="ChatMessageHandlingToggles">
<h4 data-i18n="Chat/Message Handling">Chat/Message Handling</h4>
<div data-newbie-hidden class="flex-container alignitemscenter">
<span data-i18n="Send on Enter">
<small data-i18n="Send on Enter">
Enter to Send:
</span>
</small>
<select id="send_on_enter" class="widthNatural flex1 margin0">
<option value="-1" data-i18n="Disabled">Disabled</option>
<option value="0" data-i18n="Automatic (PC)">Automatic (PC)</option>
@ -3928,81 +4011,81 @@
</div>
<label data-newbie-hidden class="checkbox_label" for="continue_on_send">
<input id="continue_on_send" type="checkbox" />
<span data-i18n="Press Send to continue">
<small data-i18n="Press Send to continue">
"Send" to Continue
</span>
</small>
</label>
<label class="checkbox_label" for="quick_continue" title="Show a button in the input area to ask the AI to continue (extend) its last message." data-i18n="[title]Show a button in the input area to ask the AI to continue (extend) its last message">
<input id="quick_continue" type="checkbox" />
<span data-i18n="Quick 'Continue' button">
<small data-i18n="Quick 'Continue' button">
Quick "Continue" button
</span>
</small>
</label>
<div class="checkbox-container flex-container">
<label data-newbie-hidden class="checkbox_label" for="swipes-checkbox" title="Show arrow buttons on the last in-chat message to generate alternative AI responses. Both PC and mobile." data-i18n="[title]Show arrow buttons on the last in-chat message to generate alternative AI responses. Both PC and mobile">
<input id="swipes-checkbox" type="checkbox" />
<span data-i18n="Swipes">Swipes</span><i class="fa-solid fa-desktop"></i><i class="fa-solid fa-mobile-screen-button"></i>
<small data-i18n="Swipes">Swipes</small><i class="fa-solid fa-desktop"></i><i class="fa-solid fa-mobile-screen-button"></i>
</label>
<label data-newbie-hidden class="checkbox_label" for="gestures-checkbox" title="Allow using swiping gestures on the last in-chat message to trigger swipe generation. Mobile only, no effect on PC." , data-i18n="[title]Allow using swiping gestures on the last in-chat message to trigger swipe generation. Mobile only, no effect on PC">
<input id="gestures-checkbox" type="checkbox" />
<span data-i18n="Gestures">Gestures</span>
<small data-i18n="Gestures">Gestures</small>
<i class="fa-solid fa-mobile-screen-button"></i>
</label>
</div>
<label class="checkbox_label" for="auto-load-chat-checkbox">
<input id="auto-load-chat-checkbox" type="checkbox" />
<span data-i18n="Auto-load Last Chat">Auto-load Last Chat</span>
<small data-i18n="Auto-load Last Chat">Auto-load Last Chat</small>
</label>
<label data-newbie-hidden for="auto_scroll_chat_to_bottom" class="checkbox_label">
<input id="auto_scroll_chat_to_bottom" type="checkbox" />
<span data-i18n="Auto-scroll Chat">Auto-scroll Chat</span>
<small data-i18n="Auto-scroll Chat">Auto-scroll Chat</small>
</label>
<label data-newbie-hidden class="checkbox_label" for="auto_save_msg_edits" title="Save edits to messages without confirmation as you type." data-i18n="[title]Save edits to messages without confirmation as you type">
<input id="auto_save_msg_edits" type="checkbox" />
<span data-i18n="Auto-save Message Edits">Auto-save Message Edits</span>
<small data-i18n="Auto-save Message Edits">Auto-save Message Edits</small>
</label>
<label data-newbie-hidden class="checkbox_label" for="confirm_message_delete">
<input id="confirm_message_delete" type="checkbox" />
<span data-i18n="Confirm message deletion">Confirm message deletion</span>
<small data-i18n="Confirm message deletion">Confirm message deletion</small>
</label>
<label class="checkbox_label" for="auto_fix_generated_markdown">
<input id="auto_fix_generated_markdown" type="checkbox" />
<span data-i18n="Auto-fix Markdown">Auto-fix Markdown</span>
<small data-i18n="Auto-fix Markdown">Auto-fix Markdown</small>
</label>
<label data-newbie-hidden class="checkbox_label" for="render_formulas" title="Render LaTeX and AsciiMath equation notation in chat messages. Powered by KaTeX." data-i18n="[title]Render LaTeX and AsciiMath equation notation in chat messages. Powered by KaTeX">
<input id="render_formulas" type="checkbox" />
<span data-i18n="Render Formulas">Render Formulas</span>
<small data-i18n="Render Formulas">Render Formulas</small>
<a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#formulas-rendering" class="notes-link" target="_blank">
<span class="fa-solid fa-circle-question note-link-span"></span>
<small class="fa-solid fa-circle-question note-link-small"></small>
</a>
</label>
<label class="checkbox_label" for="forbid_external_media" title="Disalow embedded media from other domains in chat messages." data-i18n="[title]Disalow embedded media from other domains in chat messages">
<input id="forbid_external_media" type="checkbox" />
<span data-i18n="Forbid External Media">Forbid External Media</span>
<small data-i18n="Forbid External Media">Forbid External Media</small>
</label>
<label data-newbie-hidden class="checkbox_label" for="allow_name2_display">
<input id="allow_name2_display" type="checkbox" />
<span data-i18n="Allow {{char}}: in bot messages">Show {{char}}: in responses</span>
<small data-i18n="Allow {{char}}: in bot messages">Show {{char}}: in responses</small>
</label>
<label data-newbie-hidden class="checkbox_label" for="allow_name1_display">
<input id="allow_name1_display" type="checkbox" />
<span data-i18n="Allow {{user}}: in bot messages">Show {{user}}: in responses</span>
<small data-i18n="Allow {{user}}: in bot messages">Show {{user}}: in responses</small>
</label>
<label class="checkbox_label" for="encode_tags" title="Skip encoding &lt; and &gt; characters in message text, allowing a subset of HTML markup as well as Markdown." data-i18n="[title]Skip encoding and characters in message text, allowing a subset of HTML markup as well as Markdown">
<input id="encode_tags" type="checkbox" />
<span data-i18n="Show tags in responses">Show &lt;tags&gt; in responses</span>
<small data-i18n="Show tags in responses">Show &lt;tags&gt; in responses</small>
</label>
<label data-newbie-hidden class="checkbox_label" for="disable_group_trimming" title="Allow AI messages in groups to contain lines spoken by other group members." data-i18n="[title]Allow AI messages in groups to contain lines spoken by other group members">
<input id="disable_group_trimming" type="checkbox" />
<span data-i18n="Relax message trim in Groups">Relax message trim in Groups</span>
<small data-i18n="Relax message trim in Groups">Relax message trim in Groups</small>
</label>
<label data-newbie-hidden class="checkbox_label" for="console_log_prompts">
<input id="console_log_prompts" type="checkbox" />
<span data-i18n="Log prompts to console">Log prompts to console</span>
<small data-i18n="Log prompts to console">Log prompts to console</small>
</label>
<label data-newbie-hidden class="checkbox_label" for="request_token_probabilities" title="Requests logprobs from the API for the Token Probabilities feature." data-i18n="[title]Requests logprobs from the API for the Token Probabilities feature">
<input id="request_token_probabilities" type="checkbox" />
<span data-i18n="Request token probabilities">Request token probabilities</span>
<small data-i18n="Request token probabilities">Request token probabilities</small>
</label>
<div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
<div class="inline-drawer-toggle inline-drawer-header" title="Automatically reject and re-generate AI message based on configurable criteria." data-i18n="[title]Automatically reject and re-generate AI message based on configurable criteria">
@ -4012,27 +4095,20 @@
<div class="inline-drawer-content">
<label class="checkbox_label" for="auto_swipe" title="Enable the auto-swipe function. Settings in this section only have an effect when auto-swipe is enabled." data-i18n="[title]Enable the auto-swipe function. Settings in this section only have an effect when auto-swipe is enabled">
<input id="auto_swipe" type="checkbox" />
<span data-i18n="Enabled">Enabled</span>
<small data-i18n="Enabled">Enabled</small>
</label>
<div data-i18n="Minimum generated message length">Minimum generated message length</div>
<small data-i18n="Minimum generated message length">Minimum generated message length</small>
<input id="auto_swipe_minimum_length" name="auto_swipe_minimum_length" type="number" min="0" step="1" value="0" class="text_pole" title="If the generated message is shorter than this, trigger an auto-swipe." data-i18n="[title]If the generated message is shorter than this, trigger an auto-swipe">
<div data-i18n="Blacklisted words">Blacklisted words</div>
<small data-i18n="Blacklisted words">Blacklisted words</small>
<div class="auto_swipe">
<textarea id="auto_swipe_blacklist" name="auto_swipe_blacklist" data-i18n="[placeholder]words you dont want generated separated by comma ','" placeholder="words you don't want generated separated by comma ','" class="text_pole textarea_compact" maxlength="5000" value="" autocomplete="off" rows="3"></textarea>
<div data-i18n="Blacklisted word count to swipe">Blacklisted word count to swipe</div>
<small data-i18n="Blacklisted word count to swipe">Blacklisted word count to swipe</small>
<input id="auto_swipe_blacklist_threshold" name="auto_swipe_blacklist_threshold" type="number" min="0" step="1" value="1" class="text_pole" title="Minimum number of blacklisted words detected to trigger an auto-swipe." data-i18n="[title]Minimum number of blacklisted words detected to trigger an auto-swipe">
</div>
</div>
</div>
</div>
<div data-newbie-hidden class="flex-container">
<div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="[title]Reload and redraw the currently open chat" title="Reload and redraw the currently open chat.">
<span data-i18n="Reload Chat">Reload Chat</span>
</div>
<div id="debug_menu" class="menu_button whitespacenowrap" data-i18n="Debug Menu">
Debug Menu
</div>
</div>
</div>
</div>
</div>
@ -4743,7 +4819,7 @@
<div id="talkativeness_div">
<h4><span data-i18n="Talkativeness">Talkativeness</span></h4>
<h5 data-i18n="How often the character speaks in group chats!"><!-- This data-i18n attribute on the left is kept for backward compatibility, use the ones below when translating -->
<span data-i18n="How often the character speaks in">How often the character speaks in</span>&nbsp;<span class="warning" data-i18n="group chats!">group chats!</span>
<span data-i18n="How often the character speaks in">How often the character speaks in</span>&nbsp;<span class="warning" data-i18n="group chats!">group chats!</span>
</h5>
<input id="talkativeness_slider" name="talkativeness" type="range" min="0" max="1" step="0.05" value="0.5" form="form_create">
<div class="slider_hint">
@ -4860,8 +4936,8 @@
<div class="chat_world range-block flexFlowColumn flex-container">
<div class="range-block-title">
<h4 data-i18n="Chat Lorebook"><!-- This data-i18n attribute is kept for backward compatibility, use the ones below when translating -->
<span data-i18n="Chat Lorebook for">Chat Lorebook for</span> <span class="chat_name"></span>
</h4>
<span data-i18n="Chat Lorebook for">Chat Lorebook for</span> <span class="chat_name"></span>
</h4>
</div>
<div class="range-block-counter justifyLeft flex-container flexFlowColumn margin-bot-10px">
<span data-i18n="A selected World Info will be bound to this chat.">