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

Add Creator Comment box, fix HR styles

Browse Source
This commit is contained in:
RossAscends
2023-05-27 23:41:38 +09:00
parent 5fa14955fb
commit 8bba794e7b
4 changed files with 68 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
public/index.html
View File

@@ -2136,35 +2136,36 @@
</div> </div>
</div> </div>
</div> </div>
<div id="character_popup"> <div id="character_popup" class="flex-container flexFlowColumn flexNoGap">
<div id="character_popup_text"> <div id="character_popup_text">
<div> <h3 id="character_popup_text_h3"></h3> - Advanced Definitions
<img src="img/book2.png" id="advanced_book_logo">
</div>
<div>
<h3 id="character_popup_text_h3"></h3> - Advanced Definitions
</div>
</div> </div>
<hr>
<div id="character_cross" class="fa-solid fa-circle-xmark"></div> <div id="character_cross" class="fa-solid fa-circle-xmark"></div>
<div id="creatorcomment_div">
Creator's Comment
<h5>This is not sent to the AI Prompt.
<textarea id="creatorcomment_textarea" name="creatorcomment" placeholder="(Describe the bot to the user, list the chat models it has been tested on, and any other useful tips)" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="20000"></textarea>
</div>
<div id="personality_div"> <div id="personality_div">
<hr> <h4>
<h4>Personality summary</h4> Personality summary
<h5>A brief description of the personality <a href="/notes#personalitysummary" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5> <a href="/notes#personalitysummary" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
<textarea id="personality_textarea" name="personality" placeholder="" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="20000"></textarea> </h4>
<textarea id="personality_textarea" name="personality" placeholder="(A brief description of the personality)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="20000"></textarea>
</div> </div>
<div id="scenario_div"> <div id="scenario_div">
<h4>Scenario</h4> <h4>
<h5>Circumstances and context of the dialogue Scenario
<a href="/notes#scenario" class="notes-link" target="_blank"> <a href="/notes#scenario" class="notes-link" target="_blank">
<span class="note-link-span">?</span> <span class="note-link-span">?</span>
</a> </a>
</h5> </h4>
<textarea id="scenario_pole" name="scenario" class="text_pole" maxlength="20000" value="" autocomplete="off" form="form_create" rows="2"></textarea> <textarea id="scenario_pole" name="scenario" placeholder="(Circumstances and context of the interaction)" class="text_pole" maxlength="20000" value="" autocomplete="off" form="form_create" rows="1"></textarea>
</div> </div>
<div id="talkativeness_div"> <div id="talkativeness_div">
@@ -2178,13 +2179,13 @@
<span>Chatty</span> <span>Chatty</span>
</div> </div>
</div> </div>
<hr>
<div id="mes_example_div"> <div id="mes_example_div" class="flex-container flexFlowColumn">
<div> <div>
<h4>Examples of dialogue</h4> <h4>Example Dialogue</h4>
<h5>Forms a personality more clearly <a href="/notes#examplesofdialogue" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5> <h5>Important to set the character's writing style. <a href="/notes#examplesofdialogue" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
</div> </div>
<textarea id="mes_example_textarea" name="mes_example" placeholder="" form="form_create" maxlength="20000"></textarea> <textarea id="mes_example_textarea" class="flexGrow" name="mes_example" placeholder="(Examples of chat dialog. Begin each example with <start> on a new line.)" form="form_create" maxlength="20000"></textarea>
</div> </div>
<div id="character_popup_ok" class="menu_button">Save</div> <div id="character_popup_ok" class="menu_button">Save</div>

30
public/script.js
View File

@@ -336,20 +336,20 @@ const system_messages = {
<div id="version_display_welcome"></div> <div id="version_display_welcome"></div>
<h3>Want to Update to the latest version?</h3> <h3>Want to Update to the latest version?</h3>
Read the <a href='/notes/update.html' target='_blank'>instructions here</a>. Also located in your installation's base folder Read the <a href='/notes/update.html' target='_blank'>instructions here</a>. Also located in your installation's base folder
<hr class="sysHR"> <hr>
<h3>In order to begin chatting:</h3> <h3>In order to begin chatting:</h3>
<ol> <ol>
<li>Connect to one of the supported generation APIs (the plug icon)</li> <li>Connect to one of the supported generation APIs (the plug icon)</li>
<li>Create or pick a character from the list (the top-right namecard icon)</li> <li>Create or pick a character from the list (the top-right namecard icon)</li>
</ol> </ol>
<hr class="sysHR"> <hr>
<h3>Where to download more characters?</h3> <h3>Where to download more characters?</h3>
<i>(Not endorsed, your discretion is advised)</i> <i>(Not endorsed, your discretion is advised)</i>
<ol> <ol>
<li><a target="_blank" href="https://discord.gg/pygmalionai">Pygmalion AI Discord</a></li> <li><a target="_blank" href="https://discord.gg/pygmalionai">Pygmalion AI Discord</a></li>
<li><a target="_blank" href="https://www.characterhub.org/">CharacterHub (NSFW)</a></li> <li><a target="_blank" href="https://www.characterhub.org/">CharacterHub (NSFW)</a></li>
</ol> </ol>
<hr class="sysHR"> <hr>
<h3>Where can I get help?</h3> <h3>Where can I get help?</h3>
Before going any further, check out the following resources: Before going any further, check out the following resources:
<ol> <ol>
@@ -360,7 +360,7 @@ const system_messages = {
<li><a target="_blank" href="https://docs.alpindale.dev/">Pygmalion AI Docs</a></li> <li><a target="_blank" href="https://docs.alpindale.dev/">Pygmalion AI Docs</a></li>
</ol> </ol>
Type <tt>/?</tt> in any chat to get help on message formatting commands. Type <tt>/?</tt> in any chat to get help on message formatting commands.
<hr class="sysHR"> <hr>
<h3>Still have questions or suggestions left?</h3> <h3>Still have questions or suggestions left?</h3>
<a target="_blank" href="https://discord.gg/RZdyAEUPvj">SillyTavern Community Discord</a> <a target="_blank" href="https://discord.gg/RZdyAEUPvj">SillyTavern Community Discord</a>
<br> <br>
@@ -532,6 +532,7 @@ var selected_button = ""; //which button pressed
var create_save_name = ""; var create_save_name = "";
var create_fav_chara = ""; var create_fav_chara = "";
var create_save_description = ""; var create_save_description = "";
var create_save_creatorcomment = "";
var create_save_personality = ""; var create_save_personality = "";
var create_save_first_message = ""; var create_save_first_message = "";
var create_save_avatar = ""; var create_save_avatar = "";
@@ -2757,7 +2758,7 @@ function promptItemize(itemizedPrompts, requestedMesId) {
Grey color items may not have been included in the context due to certain prompt format settings. Grey color items may not have been included in the context due to certain prompt format settings.
</span> </span>
<div id="showRawPrompt" class="fa-solid fa-square-poll-horizontal menu_button"></div> <div id="showRawPrompt" class="fa-solid fa-square-poll-horizontal menu_button"></div>
<hr class="sysHR"> <hr>
<div class="justifyLeft"> <div class="justifyLeft">
<div class="flex-container"> <div class="flex-container">
<div class="flex-container flex1 flexFlowColumns flexNoGap wide50p tokenGraph"> <div class="flex-container flex1 flexFlowColumns flexNoGap wide50p tokenGraph">
@@ -2845,7 +2846,7 @@ function promptItemize(itemizedPrompts, requestedMesId) {
</div> </div>
</div> </div>
<hr class="sysHR"> <hr>
<div class="wide100p flex-container flexFlowColumns"> <div class="wide100p flex-container flexFlowColumns">
<div class="flex-container wide100p"> <div class="flex-container wide100p">
<div class="flex1">Total Tokens in Prompt:</div><div class=""> ${finalPromptTokens}</div> <div class="flex1">Total Tokens in Prompt:</div><div class=""> ${finalPromptTokens}</div>
@@ -2855,7 +2856,7 @@ function promptItemize(itemizedPrompts, requestedMesId) {
</div> </div>
</div> </div>
</div> </div>
<hr class="sysHR"> <hr>
`, 'text' `, 'text'
); );
@@ -2871,7 +2872,7 @@ function promptItemize(itemizedPrompts, requestedMesId) {
Grey color items may not have been included in the context due to certain prompt format settings. Grey color items may not have been included in the context due to certain prompt format settings.
</span> </span>
<div id="showRawPrompt" class="fa-solid fa-square-poll-horizontal menu_button"></div> <div id="showRawPrompt" class="fa-solid fa-square-poll-horizontal menu_button"></div>
<hr class="sysHR"> <hr>
<div class="justifyLeft"> <div class="justifyLeft">
<div class="flex-container"> <div class="flex-container">
<div class="flex-container flex1 flexFlowColumns flexNoGap wide50p tokenGraph"> <div class="flex-container flex1 flexFlowColumns flexNoGap wide50p tokenGraph">
@@ -2932,7 +2933,7 @@ function promptItemize(itemizedPrompts, requestedMesId) {
</div> </div>
</div> </div>
<hr class="sysHR"> <hr>
<div class="wide100p flex-container flexFlowColumns"> <div class="wide100p flex-container flexFlowColumns">
<div class="flex-container wide100p"> <div class="flex-container wide100p">
<div class="flex1">Total Tokens in Prompt:</div><div class=""> ${totalTokensInPrompt}</div> <div class="flex1">Total Tokens in Prompt:</div><div class=""> ${totalTokensInPrompt}</div>
@@ -2949,7 +2950,7 @@ function promptItemize(itemizedPrompts, requestedMesId) {
</div> </div>
</div> </div>
</div> </div>
<hr class="sysHR"> <hr>
`, 'text' `, 'text'
); );
} }
@@ -4340,6 +4341,7 @@ export function select_selected_character(chid) {
$("#character_popup_text_h3").text(characters[chid].name); $("#character_popup_text_h3").text(characters[chid].name);
$("#character_name_pole").val(characters[chid].name); $("#character_name_pole").val(characters[chid].name);
$("#description_textarea").val(characters[chid].description); $("#description_textarea").val(characters[chid].description);
$("#creatorcomment_textarea").val(characters[chid].creatorcomment);
$("#personality_textarea").val(characters[chid].personality); $("#personality_textarea").val(characters[chid].personality);
$("#firstmessage_textarea").val(characters[chid].first_mes); $("#firstmessage_textarea").val(characters[chid].first_mes);
$("#scenario_pole").val(characters[chid].scenario); $("#scenario_pole").val(characters[chid].scenario);
@@ -4393,6 +4395,7 @@ function select_rm_create() {
$("#character_popup_text_h3").text("Create character"); $("#character_popup_text_h3").text("Create character");
$("#character_name_pole").val(create_save_name); $("#character_name_pole").val(create_save_name);
$("#description_textarea").val(create_save_description); $("#description_textarea").val(create_save_description);
$("#creatorcomment_textarea").val(create_save_creatorcomment);
$("#personality_textarea").val(create_save_personality); $("#personality_textarea").val(create_save_personality);
$("#firstmessage_textarea").val(create_save_first_message); $("#firstmessage_textarea").val(create_save_first_message);
$("#talkativeness_slider").val(create_save_talkativeness); $("#talkativeness_slider").val(create_save_talkativeness);
@@ -5342,7 +5345,7 @@ $(document).ready(function () {
$("#advanced_div").click(function () { $("#advanced_div").click(function () {
if (!is_advanced_char_open) { if (!is_advanced_char_open) {
is_advanced_char_open = true; is_advanced_char_open = true;
$("#character_popup").css("display", "grid"); $("#character_popup").css("display", "flex");
$("#character_popup").css("opacity", 0.0); $("#character_popup").css("opacity", 0.0);
$("#character_popup").transition({ $("#character_popup").transition({
opacity: 1.0, opacity: 1.0,
@@ -5566,6 +5569,8 @@ $(document).ready(function () {
create_save_name = ""; create_save_name = "";
$("#description_textarea").val(""); $("#description_textarea").val("");
create_save_description = ""; create_save_description = "";
$("#creatorcomment_textarea").val("");
create_save_creatorcomment = "";
$("#personality_textarea").val(""); $("#personality_textarea").val("");
create_save_personality = ""; create_save_personality = "";
$("#firstmessage_textarea").val(""); $("#firstmessage_textarea").val("");
@@ -5700,10 +5705,11 @@ $(document).ready(function () {
} }
}); });
$("#description_textarea, #personality_textarea, #scenario_pole, #mes_example_textarea, #firstmessage_textarea") $("#description_textarea, #creatorcomment_textarea, #personality_textarea, #scenario_pole, #mes_example_textarea, #firstmessage_textarea")
.on("input", function () { .on("input", function () {
if (menu_type == "create") { if (menu_type == "create") {
create_save_description = $("#description_textarea").val(); create_save_description = $("#description_textarea").val();
create_save_creatorcomment = $("#creatorcomment_textarea").val();
create_save_personality = $("#personality_textarea").val(); create_save_personality = $("#personality_textarea").val();
create_save_scenario = $("#scenario_pole").val(); create_save_scenario = $("#scenario_pole").val();
create_save_mes_example = $("#mes_example_textarea").val(); create_save_mes_example = $("#mes_example_textarea").val();

41
public/style.css
View File

@@ -130,10 +130,6 @@ table.responsiveTable {
padding: 5px; padding: 5px;
} }
.sysHR {
border-top: 2px solid grey;
}
.hiddenByCharListScroll { .hiddenByCharListScroll {
visibility: hidden !important; visibility: hidden !important;
} }
@@ -563,11 +559,11 @@ code {
width: 20px; width: 20px;
} }
#right-nav-panel hr, hr {
#personality_div hr,
#top-settings-holder hr {
background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent)); background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent));
min-height: 1px; margin: 5px 0;
height: 1px;
border: 0;
} }
.options-content a, .options-content a,
@@ -2424,9 +2420,7 @@ input[type="range"]::-webkit-slider-thumb {
background-color: var(--black30a); background-color: var(--black30a);
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2)); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2)); -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
grid-template-rows: 50px 1fr 1fr 1fr 5fr; min-height: calc(100svh - 100px);
grid-gap: 10px;
min-height: 100px;
min-width: 100px; min-width: 100px;
max-width: var(--sheldWidth); max-width: var(--sheldWidth);
max-height: calc(100svh - 100px); max-height: calc(100svh - 100px);
@@ -2438,12 +2432,9 @@ input[type="range"]::-webkit-slider-thumb {
right: 0; right: 0;
top: 40px; top: 40px;
box-shadow: 0 0 20px var(--black70a); box-shadow: 0 0 20px var(--black70a);
padding-left: 30px; padding: 10px;
padding-right: 30px;
padding-top: 20px;
padding-bottom: 30px;
border: 1px solid var(--black30a); border: 1px solid var(--black30a);
border-radius: 0 0 20px 20px; border-radius: 0 0 10px 10px;
overflow-y: auto; overflow-y: auto;
} }
@@ -2468,11 +2459,7 @@ h5 {
#character_popup_text { #character_popup_text {
display: grid;
grid-template-columns: 50px auto;
grid-gap: 20px;
align-items: center; align-items: center;
width: 100%;
} }
#personality_textarea { #personality_textarea {
@@ -2481,8 +2468,8 @@ h5 {
#mes_example_div { #mes_example_div {
height: 100%; height: 100%;
display: grid; display: flex;
grid-template-rows: min-content auto; flex-grow: 1;
} }
#scenario_pole { #scenario_pole {
@@ -2492,7 +2479,7 @@ h5 {
#mes_example_textarea { #mes_example_textarea {
width: 100%; width: 100%;
max-height: 100%; height: 100%;
margin-left: 0; margin-left: 0;
} }
@@ -3273,12 +3260,6 @@ p {
margin-top: 0; margin-top: 0;
} }
hr {
margin: 5px 0;
height: 1px;
border: 0;
}
h1 { h1 {
font-size: calc(var(--mainFontSize) + 1rem); font-size: calc(var(--mainFontSize) + 1rem);
line-height: 32px; line-height: 32px;
@@ -4485,4 +4466,4 @@ body.waifuMode #avatar_zoom_popup {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
} }

17
server.js
View File

@@ -673,7 +673,19 @@ function tryParse(str) {
//***************** Main functions //***************** Main functions
function charaFormatData(data) { function charaFormatData(data) {
var char = { "name": data.ch_name, "description": data.description, "personality": data.personality, "first_mes": data.first_mes, "avatar": 'none', "chat": data.ch_name + ' - ' + humanizedISO8601DateTime(), "mes_example": data.mes_example, "scenario": data.scenario, "create_date": humanizedISO8601DateTime(), "talkativeness": data.talkativeness, "fav": data.fav }; var char = {
"name": data.ch_name,
"description": data.description,
"creatorcomment": data.creatorcomment,
"personality": data.personality,
"first_mes": data.first_mes,
"avatar": 'none', "chat": data.ch_name + ' - ' + humanizedISO8601DateTime(),
"mes_example": data.mes_example,
"scenario": data.scenario,
"create_date": humanizedISO8601DateTime(),
"talkativeness": data.talkativeness,
"fav": data.fav
};
return char; return char;
} }
@@ -1468,6 +1480,7 @@ app.post("/importcharacter", urlencodedParser, async function (request, response
let char = { let char = {
"name": jsonData.name, "name": jsonData.name,
"description": jsonData.description ?? '', "description": jsonData.description ?? '',
"creatorcomment": jsonData.creatorcomment ?? '',
"personality": jsonData.personality ?? '', "personality": jsonData.personality ?? '',
"first_mes": jsonData.first_mes ?? '', "first_mes": jsonData.first_mes ?? '',
"avatar": 'none', "chat": jsonData.name + " - " + humanizedISO8601DateTime(), "avatar": 'none', "chat": jsonData.name + " - " + humanizedISO8601DateTime(),
@@ -1485,6 +1498,7 @@ app.post("/importcharacter", urlencodedParser, async function (request, response
let char = { let char = {
"name": jsonData.char_name, "name": jsonData.char_name,
"description": jsonData.char_persona ?? '', "description": jsonData.char_persona ?? '',
"creatorcomment": '',
"personality": '', "personality": '',
"first_mes": jsonData.char_greeting ?? '', "first_mes": jsonData.char_greeting ?? '',
"avatar": 'none', "avatar": 'none',
@@ -1525,6 +1539,7 @@ app.post("/importcharacter", urlencodedParser, async function (request, response
let char = { let char = {
"name": jsonData.name, "name": jsonData.name,
"description": jsonData.description ?? '', "description": jsonData.description ?? '',
"creatorcomment": jsonData.creatorcomment ?? '',
"personality": jsonData.personality ?? '', "personality": jsonData.personality ?? '',
"first_mes": jsonData.first_mes ?? '', "first_mes": jsonData.first_mes ?? '',
"avatar": 'none', "avatar": 'none',