rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/SillyLossy/TavernAI into dev

Browse Source
This commit is contained in:
SillyLossy
2023-04-14 19:45:15 +03:00
parent 81bffd34d8 3f075be11b
commit 95e0acb769
2 changed files with 391 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
public/index.html
View File

@@ -767,8 +767,9 @@
<div id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation closedIcon" title="API Connections"></div> <div id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation closedIcon" title="API Connections"></div>
</div> </div>
<div id="rm_api_block" class="drawer-content closedDrawer"> <div id="rm_api_block" class="drawer-content closedDrawer">
<div id="main-API-selector-block">
<h3 id="title_api">API</h3> <h3 id="title_api">API</h3>
<div class="flex-container">
<div id="main-API-selector-block">
<select id="main_api"> <select id="main_api">
<option value="kobold">KoboldAI</option> <option value="kobold">KoboldAI</option>
<option value="textgenerationwebui">Text Gen WebUI (ooba)</option> <option value="textgenerationwebui">Text Gen WebUI (ooba)</option>
@@ -922,12 +923,13 @@
<div class="online_status_text4">No connection...</div> <div class="online_status_text4">No connection...</div>
</div> </div>
</div> </div>
</div>
<label for="auto-connect-checkbox" class="checkbox_label"><input id="auto-connect-checkbox" type="checkbox" /> <label for="auto-connect-checkbox" class="checkbox_label"><input id="auto-connect-checkbox" type="checkbox" />
Auto-connect to Last Server Auto-connect to Last Server
</label> </label>
</div> </div>
</div> </div>
<div id="advanced-formatting-button" class="drawer" style="z-index:3005;"> <div id="advanced-formatting-button" class="drawer" style="z-index:3005;">
<div class="drawer-toggle"> <div class="drawer-toggle">
<div class="drawer-icon fa-solid fa-font closedIcon" title="AI Reponse Formatting"></div> <div class="drawer-icon fa-solid fa-font closedIcon" title="AI Reponse Formatting"></div>
@@ -938,6 +940,9 @@
<span class="note-link-span">?</span> <span class="note-link-span">?</span>
</a> </a>
</h3> </h3>
<div class="flex-container">
<div name="PygOverrides">
<h4>AutoFormat Overrides</h4>
<label class="checkbox_label" for="disable-description-formatting-checkbox"> <label class="checkbox_label" for="disable-description-formatting-checkbox">
<input id="disable-description-formatting-checkbox" type="checkbox" /> <input id="disable-description-formatting-checkbox" type="checkbox" />
Disable description formatting Disable description formatting
@@ -950,7 +955,17 @@
<input id="disable-personality-formatting-checkbox" type="checkbox" /> <input id="disable-personality-formatting-checkbox" type="checkbox" />
Disable personality formatting Disable personality formatting
</label> </label>
<hr> <div>
<h4>
Custom Chat Separator
</h4>
<div>
<input id="custom_chat_separator" class="text_pole" type="text" placeholder="&lt;START&gt;" />
</div>
</div>
</div>
<div name="ContextFormatting">
<h4>Context Formatting</h4>
<label class="checkbox_label" for="always-force-name2-checkbox"> <label class="checkbox_label" for="always-force-name2-checkbox">
<input id="always-force-name2-checkbox" type="checkbox" /> <input id="always-force-name2-checkbox" type="checkbox" />
Always add character's name to prompt Always add character's name to prompt
@@ -975,16 +990,7 @@
<label class="checkbox_label" for="collapse-newlines-checkbox"><input id="collapse-newlines-checkbox" type="checkbox" /> <label class="checkbox_label" for="collapse-newlines-checkbox"><input id="collapse-newlines-checkbox" type="checkbox" />
Remove Empty New Lines from Output Remove Empty New Lines from Output
</label> </label>
<hr>
<div class="range-block">
<div class="range-block-title">
Custom Chat Separator
</div> </div>
<div class="widthFreeExpand">
<input id="custom_chat_separator" class="text_pole" type="text" placeholder="&lt;START&gt;" />
</div>
</div>
<hr>
<div id="anchors-block"> <div id="anchors-block">
<h4> <h4>
Anchors Order Anchors Order
@@ -1005,6 +1011,9 @@
</label> </label>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
@@ -1060,71 +1069,63 @@
</div> </div>
</div> </div>
<div id="user-settings-button" class="drawer" style="z-index:3004;"> <div id="user-settings-button" class="drawer" style="z-index:3004;">
<div class="drawer-toggle"> <div class="drawer-toggle">
<div class="drawer-icon fa-solid fa-face-smile closedIcon" title="User Settings"></div> <div class="drawer-icon fa-solid fa-face-smile closedIcon" title="User Settings"></div>
</div> </div>
<div id="user-settings-block" class="drawer-content closedDrawer"> <div id="user-settings-block" class="drawer-content closedDrawer">
<h3>User Settings</h3> <h3>User Settings</h3>
<div class="flex-container">
<div name="NameAndAvatar" class="flex-container wide100p">
<div name="NameChanger">
<form id='form_change_name' action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>Name</h4>
<input id="your_name" name="your_name" class="text_pole widthNatural" maxlength="" value="" autocomplete="off">
<input id="your_name_button" class="menu_button" type="submit" title="Click to set a new User Name (reloads page)" value="Update">
</form>
</div>
<div name="AvatarSelector">
<h4>Your Avatar</h4> <h4>Your Avatar</h4>
<div id="user_avatar_block"> <div id="user_avatar_block">
<div class="avatar_upload">+</div> <div class="avatar_upload">+</div>
</div> </div>
<form id="form_upload_avatar" action="javascript:void(null);" method="post" enctype="multipart/form-data"> <form id="form_upload_avatar" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input type="file" id="avatar_upload_file" accept="image/*" name="avatar"> <input type="file" id="avatar_upload_file" accept="image/*" name="avatar">
</form> </form>
<form id='form_change_name' action="javascript:void(null);" method="post" enctype="multipart/form-data"> </div>
<h4>Name</h4> </div>
<input id="your_name" name="your_name" class="text_pole" maxlength="35" value="" autocomplete="off"><br> <div id="power-user-options-block" class="flex-container">
<input id="your_name_button" class="menu_button" type="submit" title="Click to set a new User Name (reloads page)" value="Change Name">
</form>
<hr>
<div id="power-user-options-block">
<h3>Power User Options</h3>
<div id="power-user-option-checkboxes"> <div id="power-user-option-checkboxes">
<h4>Power User Options</h4>
<label for="swipes-checkbox"> <label for="swipes-checkbox">
<input id="swipes-checkbox" type="checkbox" /> <input id="swipes-checkbox" type="checkbox" />
Swipes Swipes
</label> </label>
<label for="play_message_sound" class="checkbox_label"> <label for="play_message_sound" class="checkbox_label">
<input id="play_message_sound" type="checkbox" /> <input id="play_message_sound" type="checkbox" />
<audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio> <audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
<span> <span>
Play a sound on new message New Message Sound
<a href="/notes/message_sound" class="notes-link" target="_blank"> <a href="/notes/message_sound" class="notes-link" target="_blank">
<span class="note-link-span">?</span> <span class="note-link-span">?</span>
</a> </a>
</span> </span>
</label> </label>
<label for="play_sound_unfocused" class="checkbox_label"> <label for="play_sound_unfocused" class="checkbox_label">
<input id="play_sound_unfocused" type="checkbox" /> <input id="play_sound_unfocused" type="checkbox" />
Sound only for unfocused window Background Sound Only
</label> </label>
<label for="fast_ui_mode" class="checkbox_label" title="Blur can cause browser lag, especially in Bubble Chat mode. To fix: Turn on your browser's Hardware Acceleration, and restart your browser or simply disable the blur effect with this toggle.">
<input id="fast_ui_mode" type="checkbox" />
No Blur Effect
</label>
<label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" /> <label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
Auto-load Last Chat Auto-load Last Chat
</label> </label>
<label for="waifuMode"><input id="waifuMode" type="checkbox" />
♡ Waifu Mode ♡
</label>
</div> </div>
</div> </div>
<hr> <div name="UI Customization" class="flex-container">
<div class="ui-settings"> <div class="ui-settings">
<div id="avatars-style" class="range-block"> <h4>UI Customization</h4>
<div class="range-block-title"> <div>
<h4>Avatar Style</h4> Avatar Style:<br>
</div>
<div class="range-block-range">
<label> <label>
<input name="avatar_style" type="radio" value="0" /> <input name="avatar_style" type="radio" value="0" />
Circle Circle
@@ -1134,12 +1135,8 @@
Rectangle Rectangle
</label> </label>
</div> </div>
</div> <div>
<div id="chat-display" class="range-block" title="NOTE: Using bubble chat with Blur Effect on can cause lag on browsers with no Hardware Acceleration."> Chat Style:<br>
<div class="range-block-title">
<h4>Chat Style</h4>
</div>
<div class="range-block-range">
<label> <label>
<input name="chat_display" type="radio" value="0" /> <input name="chat_display" type="radio" value="0" />
Default Default
@@ -1149,12 +1146,8 @@
Bubbles Bubbles
</label> </label>
</div> </div>
</div> <div>
<div id="sheld-width" class="range-block" title="Adjust width of chat display on PCs and other wide screens"> Chat Width (PC):<br>
<div class="range-block-title">
<h4>Chat Width (PC)</h4>
</div>
<div class="range-block-range">
<label> <label>
<input name="sheld_width" type="radio" value="0" /> <input name="sheld_width" type="radio" value="0" />
800px 800px
@@ -1164,39 +1157,16 @@
1000px 1000px
</label> </label>
</div> </div>
<div>
<label for="fast_ui_mode" class="checkbox_label" title="Blur can cause browser lag, especially in Bubble Chat mode. To fix: Turn on your browser's Hardware Acceleration, and restart your browser or simply disable the blur effect with this toggle.">
<input id="fast_ui_mode" type="checkbox" />
No Blur Effect
</label>
<label for="waifuMode"><input id="waifuMode" type="checkbox" />
♡ Waifu Mode ♡
</label>
</div> </div>
<div id="font-blur-UIpresets-block" class="flex-container flexFlowColumn">
</div>
<hr>
<div id="UI-Theme-Block" class="flex-container">
<div id="color-picker-block" class="range-block wide50p">
<div class="flex-container wide100p flexflowcolumn">
<div class="range-block-title">
<h4>UI Colors</h4>
</div>
<div class="flex-container">
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
<div class="flex1">Main Text</div>
</div>
<div class="flex-container">
<toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
Italics Text
</div>
<div class="flex-container">
<toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
FastUI BG
</div>
<div class="flex-container">
<toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
Blur Tint
</div>
</div>
</div>
<div id="font-blur-UIpresets-block" class="range-block wide50p">
<div id="font-scale-block" class="range-block"> <div id="font-scale-block" class="range-block">
<div class="range-block-title"> <div class="range-block-title">
Font Scale Font Scale
@@ -1216,13 +1186,38 @@
<input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1"> <input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
</div> </div>
<div class="range-block-counter"> <div class="range-block-counter">
<span id="blur_strength_counter">WIP</span> <span id="blur_strength_counter">select</span>
</div> </div>
</div> </div>
<div id="UI-presets-block" class="range-block">
<div class="range-block-title"> </div>
</div>
</div>
<div id="UI-Theme-Block" class="flex-container flexFlowColumn">
<div id="color-picker-block" class="flex-container flexFlowColumn">
<h4>UI Colors</h4>
<div class="flex-container">
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
Main Text
</div>
<div class="flex-container">
<toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
Italics Text
</div>
<div class="flex-container">
<toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
FastUI BG
</div>
<div class="flex-container">
<toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
Blur Tint
</div>
<div id="UI-presets-block" class="flex-container flexFlowColumn">
<h4>
UI Theme Preset UI Theme Preset
</div> </h4>
<div class="flex-container flexnowrap alignitemscenter"> <div class="flex-container flexnowrap alignitemscenter">
<select id="themes" class="margin0 margin-r5"> <select id="themes" class="margin0 margin-r5">
</select> </select>
@@ -1232,9 +1227,16 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- </div> -->
</div> </div>
</div> </div>
</div> </div>
<div id="logo_block" class="drawer" style="z-index:3001;" title="Change Background Image"> <div id="logo_block" class="drawer" style="z-index:3001;" title="Change Background Image">
<div id="site_logo" class="drawer-toggle drawer-header"> <div id="site_logo" class="drawer-toggle drawer-header">
<div class="drawer-icon fa-solid fa-panorama closedIcon"></div> <div class="drawer-icon fa-solid fa-panorama closedIcon"></div>

51
public/style.css
View File

@@ -451,13 +451,13 @@ code {
.ui-settings { .ui-settings {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
/* align-items: flex-end; */ /* align-items: flex-end; */
column-gap: 10px; gap: 10px;
} }
.ui-settings>div { .ui-settings>div {
flex: 1; /* flex: 1; */
} }
#avatars-style .range-block-range, #avatars-style .range-block-range,
@@ -1245,7 +1245,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
padding: 10px; padding: 10px;
width: min-content; width: min-content;
cursor: pointer; cursor: pointer;
margin: 10px 0; margin: 5px 0;
transition: 0.3s; transition: 0.3s;
} }
@@ -1680,10 +1680,9 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
} }
#user_avatar_block { #user_avatar_block {
display: grid; display: flex;
grid-gap: 10px; grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); flex-wrap: wrap;
grid-template-rows: min-content;
} }
#user_avatar_block .avatar { #user_avatar_block .avatar {
@@ -2954,6 +2953,25 @@ label[for="extensions_autoconnect"] {
border: 1px solid var(--grey30a); border: 1px solid var(--grey30a);
box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;
min-width: 450px; min-width: 450px;
width: var(--sheldWidth);
overflow-y: scroll;
max-height: calc(100svh - 70px);
display: none;
position: absolute;
left: 0;
right: 0;
/* width: min-content; */
max-width: var(--sheldWidth);
margin: 35px auto 0 auto;
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
/* background-color: var(--SmartThemeBlurTintColor);
color: white;
border-radius: 20px;
padding: 10px;
border: 1px solid var(--grey30a);
box-shadow: 0 0 20px black;
min-width: 450px;
overflow-y: scroll; overflow-y: scroll;
max-height: calc(100svh - 70px); max-height: calc(100svh - 70px);
display: none; display: none;
@@ -2964,7 +2982,7 @@ label[for="extensions_autoconnect"] {
max-width: var(--sheldWidth); max-width: var(--sheldWidth);
margin: 35px auto 0 auto; margin: 35px auto 0 auto;
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))); -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))); */
} }
.fillRight, .fillRight,
@@ -3004,7 +3022,7 @@ toolcool-color-picker {
.flex-container { .flex-container {
display: flex; display: flex;
row-gap: 10px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -3055,6 +3073,21 @@ toolcool-color-picker {
margin-left: unset; margin-left: unset;
} }
.justifyCenter {
justify-content: center;
margin: 0 auto;
}
.spaceEvenly {
justify-content: space-evenly;
}
.widthNatural {
width: unset !important;
min-width: unset !important;
max-width: unset !important;
}
.widthFreeExpand { .widthFreeExpand {
width: -webkit-fill-available; width: -webkit-fill-available;
width: -moz-available; width: -moz-available;