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 remote-tracking branch 'ross/main'

Browse Source
This commit is contained in:
SillyLossy
2023-02-26 13:41:43 +02:00
parent e24e2bb2ca 4aecc49e2a
commit 335f311474
4 changed files with 116 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
.gitignore vendored
View File

@@ -1,8 +1,10 @@
node_modules node_modules/
public/chats/
public/characters/
public/User Avatars/
public/backgrounds/
/uploads/
*.jsonl
public/settings.json
config.conf
.DS_Store .DS_Store
/public/chats
/public/characters
/public/User Avatars
/public/backgrounds
/uploads
/config.conf

3
config.conf
View File

@@ -1,6 +1,7 @@
const port = 8000; const port = 8000;
const whitelist = ['127.0.0.1']; //Example for add several IP in whitelist: ['127.0.0.1', '192.168.0.10'] const whitelist = ['127.0.0.1']; //Example for add several IP in whitelist: ['127.0.0.1', '192.168.0.10']
const whitelistMode = true; //Disabling enabling the ip whitelist mode. true/false const whitelistMode = false; //Disabling enabling the ip whitelist mode. true/false
const autorun = true; //Autorun in the browser. true/false const autorun = true; //Autorun in the browser. true/false
module.exports = { module.exports = {

39
public/index.html
View File

@@ -240,6 +240,11 @@
function checkOnlineStatus(){ function checkOnlineStatus(){
//console.log(online_status); //console.log(online_status);
if(online_status == 'no_connection'){ if(online_status == 'no_connection'){
$("#send_textarea").attr('placeholder', "Not connected to API!"); //Input bar placeholder tells users they are not connected
$("#send_form").css("background-color", "rgba(255,0,0,0.3)"); //entire input form area is red when not connected
$("#send_but").css("display", "none"); //send button is hidden when not connected
$("#online_status_indicator").css("background-color", "red"); $("#online_status_indicator").css("background-color", "red");
$("#online_status").css("opacity", 0.3); $("#online_status").css("opacity", 0.3);
$("#online_status_text").html("No connection..."); $("#online_status_text").html("No connection...");
@@ -250,6 +255,11 @@
is_get_status = false; is_get_status = false;
is_get_status_novel = false; is_get_status_novel = false;
}else{ }else{
$("#send_textarea").attr('placeholder', 'Type a message...'); //on connect, placeholder tells user to type message
$("#send_form").css("background-color", "rgba(0,0,0,0.3)"); //on connect, form BG changes to transprent black
$("#send_but").css("display", "inline"); //on connect, send button shows up
$("#online_status_indicator").css("background-color", "black"); $("#online_status_indicator").css("background-color", "black");
$("#online_status").css("display", "none"); $("#online_status").css("display", "none");
$("#online_status_text").html(""); $("#online_status_text").html("");
@@ -1469,8 +1479,19 @@
printMessages(); printMessages();
select_selected_character(this_chid); select_selected_character(this_chid);
} }
$("#send_textarea").keypress(function (e) {
if(e.which === 13 && !e.shiftKey && is_send_press == false) { //hotkey to send input with shift+enter (normal enter keypress generates a new line in the chat input box)
//problem for mobile: default iOS keyboard function is to make AutoCapitalization happen on new lines.
//AutoCapitization effectively presses the virtual Shift key when it thinks a new line/sentence is happening.
//iOS result: First Enter press will make a new line, but the second will act like shift+enter, sending the prompt to AI.
//ideally we would detect if the user is using a virtual keyboard, and disable this shortcut for them.
//because mobile users' hands are always near the screen, tapping the send button is better for them.
//caveat: people on an iPad using a Bluetooth keyboard will need to be treated as PC users for this purpose.
//note: CAI seems to have this handled. PC: shift+enter = new line, enter = send. iOS: shift+enter AND enter both make new lines, and only the send button sends.
//maybe a way to simulate this would be to disable the eventListener for people iOS.
$("#send_textarea").keydown(function (e) {
if(e.which === 13 && e.shiftKey && is_send_press == false) {
is_send_press = true; is_send_press = true;
e.preventDefault(); e.preventDefault();
Generate(); Generate();
@@ -1680,16 +1701,16 @@
} }
}); });
$(document).on('click', '.del_checkbox', function(){ //when a checkbox is clicked $(document).on('click', '.del_checkbox', function(){ //when a 'delete message' checkbox is clicked
$('.del_checkbox').each(function(){ $('.del_checkbox').each(function(){
$(this).prop( "checked", false ); $(this).prop( "checked", false );
$(this).parent().css('background', css_mes_bg); $(this).parent().css('background', css_mes_bg);
}); });
$(this).parent().css('background', "#791b31"); //sets the bg of the selected msg to a muted red $(this).parent().css('background', "#600"); //sets the bg of the mes selected for deletion
var i = $(this).parent().attr('mesid'); //checks the message ID in the chat var i = $(this).parent().attr('mesid'); //checks the message ID in the chat
this_del_mes = i; this_del_mes = i;
while(i < chat.length){ //as long as the current message ID is less than the total chat length while(i < chat.length){ //as long as the current message ID is less than the total chat length
$(".mes[mesid='"+i+"']").css('background', "#791b31"); //sets the bg of the all msgs BELOW the selected msg to a muted red as well $(".mes[mesid='"+i+"']").css('background', "#600"); //sets the bg of the all msgs BELOW the selected .mes
$(".mes[mesid='"+i+"']").children('.del_checkbox').prop( "checked", true ); $(".mes[mesid='"+i+"']").children('.del_checkbox').prop( "checked", true );
i++; i++;
//console.log(i); //console.log(i);
@@ -4165,7 +4186,7 @@
<div id="chat"></div> <div id="chat"></div>
<div id="form_sheld"> <div id="form_sheld">
<div id="dialogue_del_mes"> <div id="dialogue_del_mes">
<div id="dialogue_del_mes_text"><h3></h3></div> <!-- <div id="dialogue_del_mes_text"><h3></h3></div> -->
<div id="dialogue_del_mes_ok" class="menu_button">Delete</div> <div id="dialogue_del_mes_ok" class="menu_button">Delete</div>
<div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div> <div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
</div> </div>
@@ -4182,7 +4203,7 @@
</div> </div>
</div> </div>
<!-- <div contenteditable="true" id="send_textarea">Type a message...</div> --> <!-- <div contenteditable="true" id="send_textarea">Type a message...</div> -->
<textarea id="send_textarea" placeholder="Type a message..." name="text"></textarea> <textarea id="send_textarea" placeholder="Not connected to API!" name="text"></textarea>
<script type="text/javascript"> <script type="text/javascript">
$('#send_textarea').on('input', function () { $('#send_textarea').on('input', function () {
@@ -4195,12 +4216,12 @@
<div id="send_but_sheld"> <div id="send_but_sheld">
<div id="loading_mes"></div> <div id="loading_mes"></div>
<!--
<div id="online_status"> <div id="online_status">
<div id="online_status_indicator"></div> <div id="online_status_indicator"></div>
<div id="online_status_text">Not connected</div> <div id="online_status_text">Not connected</div>
</div> </div>
-->
<input id="send_but" type="button"> <input id="send_but" type="button">
</div> </div>

95
public/style.css
View File

@@ -139,7 +139,7 @@ code {
border-right:1px solid rgba(0,0,0,.3); border-right:1px solid rgba(0,0,0,.3);
backdrop-filter: blur(10px) brightness(0.3); backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3); -webkit-backdrop-filter: blur(10px) brightness(0.3);
border-radius: 0 0 40px 40px; /*border-radius: 0 0 40px 40px;*/
text-shadow: #000 0 0 3px; text-shadow: #000 0 0 3px;
} }
@@ -156,7 +156,7 @@ code {
} }
#chat::-webkit-scrollbar-track { #chat::-webkit-scrollbar-track {
margin-bottom: 30px; /*margin-bottom: 30px;*/
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@@ -168,38 +168,23 @@ code {
} }
#form_sheld { #form_sheld {
white-space:nowrap; white-space:nowrap;
width:90%; width:100%;
margin: 10px auto 10px auto; margin: 1px auto 10px auto;
} }
#send_form { #send_form {
display: grid; display: grid;
align-items: center; align-items: center;
grid-template-columns: 40px auto 40px; grid-template-columns: 50px auto 50px;
width: 100%; width: 100%;
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
border: 1px solid rgba(0,0,0,.3); border: 1px solid rgba(0,0,0,.3);
backdrop-filter: blur(10px) brightness(0.3); backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3); -webkit-backdrop-filter: blur(10px) brightness(0.3);
border-radius: 40px; border-radius: 0 0px 40px 40px;
} background-color:rgba(255,0,0,0.3);
#send_textarea{
font-size: 1rem;
line-height: 1.5rem;
min-height: calc(1.5em + 0.75rem + 2px);
max-height: 50vh;
word-wrap: breakword;
height: 40px;
resize: vertical;
display: block;
background-color: rgba(0,0,0,0);
border: 0px;
box-shadow: none !important; /*0 0 0px rgb(200 200 200 / 50%);*/
padding:6px 0 6px 0;
font-family: "Noto Sans", sans-serif;
margin: 0;
text-shadow: #000 0 0 3px;
} }
#send_but_sheld { #send_but_sheld {
padding: 0; padding: 0;
border: 0; border: 0;
@@ -217,7 +202,7 @@ code {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin: 0; margin: 0;
display: inline; display: none;
padding:1px; padding:1px;
background: url('img/send3.png') no-repeat top left; background: url('img/send3.png') no-repeat top left;
background-size: 26px auto; background-size: 26px auto;
@@ -256,7 +241,8 @@ code {
-webkit-transition: color .25s ease-in-out; -webkit-transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out; -moz-transition: color .25s ease-in-out;
transition: color .25s ease-in-out; transition: color .25s ease-in-out;
padding: 11px; padding-left: 20px;
padding-top: 10px;
} }
@@ -325,13 +311,13 @@ code {
.mes { .mes {
display: grid; display: grid;
grid-template-columns: fit-content(60px) 60px auto; grid-template-columns: fit-content(60px) 60px auto;
border-radius: 5px; /* border-radius: 5px; */
padding: 5px; padding: 10px;
padding-left: 15px; padding-left: 15px;
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
color: rgb(229, 224, 216); color: rgb(229, 224, 216);
margin-bottom: 26px; /* margin-bottom: 26px;*/
} }
.avatar { .avatar {
width: 60px; width: 60px;
@@ -414,6 +400,25 @@ width: 100%;
margin-left: 10px; margin-left: 10px;
margin-top: 10px; margin-top: 10px;
} }
#send_textarea{
font-size: 1rem;
line-height: 1.5rem;
min-height: calc(1.5em + 0.75rem + 2px);
max-height: 50vh;
word-wrap: breakword;
height: 40px;
resize: vertical;
display: block;
background-color: rgba(255,0,0,0);
border:0;
box-shadow: none !important; /*0 0 0px rgb(200 200 200 / 50%);*/
padding:6px 0 6px 0;
font-family: "Noto Sans", sans-serif;
margin: 0;
text-shadow: #000 0 0 3px;
}
#rm_ch_create_block textarea { #rm_ch_create_block textarea {
font-size: 15px; font-size: 15px;
} }
@@ -601,6 +606,7 @@ input[type=button] {
#rm_ch_create_block{ #rm_ch_create_block{
display: none; display: none;
overflow-y: auto;
} }
/* ################################################################*/ /* ################################################################*/
@@ -1120,7 +1126,7 @@ width: 103px;
#dialogue_popup_ok{ #dialogue_popup_ok{
display: inline-block; display: inline-block;
margin-right: 20px; margin-right: 20px;
background-color: #791b31; background-color: #c00;
cursor: pointer; cursor: pointer;
} }
#dialogue_popup_cancel{ #dialogue_popup_cancel{
@@ -1132,12 +1138,14 @@ width: 103px;
width: 100%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 4px;
text-align: center; text-align: center;
padding: 4px; padding: 0px;
height: min-content;
} }
#dialogue_del_mes_ok{ #dialogue_del_mes_ok{ /*changes background of OK button in the deletion menu*/
display: inline-block; display: inline-block;
background-color: #791b31; background-color: #c00;
cursor: pointer; cursor: pointer;
} }
#dialogue_del_mes_cancel{ #dialogue_del_mes_cancel{
@@ -1147,14 +1155,14 @@ width: 103px;
.menu_button{ .menu_button{
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
padding: 0.5em; padding: 5px;
border: thin solid rgba(200,200,200,0.2); border: 1px solid rgba(0,0,0,0.5);
border-radius: 3px; border-radius: 3px;
background-color: rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.5);
} }
#dialogue_del_mes .menu_button{ #dialogue_del_mes .menu_button{
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 1.25rem;
} }
#shadow_popup{ #shadow_popup{
@@ -1538,12 +1546,13 @@ input[type='checkbox'] {
position: relative; position: relative;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
border: 2px solid #rgba(0,0,0,0.5);
overflow: hidden; overflow: hidden;
border-radius: 3px; border-radius: 3px;
background-color: white; background-color: white;
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 3px 0 rgb(0 0 0 / 80%);
cursor: pointer; cursor: pointer;
margin-top: 18px; /*odd but this is what aligns it with the character avatar*/
right: 5px; /*and centers it in the checkbox column*/
} }
input[type='checkbox']::before { input[type='checkbox']::before {
@@ -1810,7 +1819,6 @@ label.checkbox span {
} }
label.checkbox :checked + span { label.checkbox :checked + span {
background:red;
width:20px; width:20px;
height:20px; height:20px;
margin: 0px; margin: 0px;
@@ -1857,8 +1865,8 @@ label.checkbox :checked + span:after {
backdrop-filter: blur(50px); backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);
grid-template-rows: 50px 100px 100px 40px auto 45px 45px; grid-template-rows: 50px 100px 100px 40px auto 45px 45px;
max-width:800px; max-width: 802px; /* 802 instead of 800 to cover #chat's scrollbars entirely */
height: 83vh; height: 90vh; /* imperfect calculation designed to match the chat height, which is auto-set to (100% - form_sheld height) */
position: absolute; position: absolute;
z-index: 2065; z-index: 2065;
margin-left: auto; margin-left: auto;
@@ -1866,9 +1874,10 @@ label.checkbox :checked + span:after {
left: 0; left: 0;
right: 0; right: 0;
margin-top: 40px; margin-top: 40px;
box-shadow: 0 0 2px rgba(0,0,0,0.5); box-shadow: 0 0 2px rgb(0 0 0 / 50%);
padding: 4px; padding: 4px;
border: 1px solid #33; border: 1px solid rgba(0,0,0,0.3);
/*border-radius: 0 0 40px 40px;*/
} }
#character_popup h5 a{ #character_popup h5 a{
color: #936f4a; color: #936f4a;