Add Creator Comment box, fix HR styles

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

View File

@@ -2136,35 +2136,36 @@
</div>
</div>
</div>
<div id="character_popup">
<div id="character_popup" class="flex-container flexFlowColumn flexNoGap">
<div id="character_popup_text">
<div>
<img src="img/book2.png" id="advanced_book_logo">
</div>
<div>
<h3 id="character_popup_text_h3"></h3> - Advanced Definitions
</div>
<h3 id="character_popup_text_h3"></h3> - Advanced Definitions
</div>
<hr>
<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">
<hr>
<h4>Personality summary</h4>
<h5>A brief description of the personality <a href="/notes#personalitysummary" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
<textarea id="personality_textarea" name="personality" placeholder="" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="20000"></textarea>
<h4>
Personality summary
<a href="/notes#personalitysummary" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</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 id="scenario_div">
<h4>Scenario</h4>
<h5>Circumstances and context of the dialogue
<h4>
Scenario
<a href="/notes#scenario" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h5>
<textarea id="scenario_pole" name="scenario" class="text_pole" maxlength="20000" value="" autocomplete="off" form="form_create" rows="2"></textarea>
</h4>
<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 id="talkativeness_div">
@@ -2178,13 +2179,13 @@
<span>Chatty</span>
</div>
</div>
<div id="mes_example_div">
<hr>
<div id="mes_example_div" class="flex-container flexFlowColumn">
<div>
<h4>Examples of 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>
<h4>Example Dialogue</h4>
<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>
<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 id="character_popup_ok" class="menu_button">Save</div>

View File

@@ -336,20 +336,20 @@ const system_messages = {
<div id="version_display_welcome"></div>
<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
<hr class="sysHR">
<hr>
<h3>In order to begin chatting:</h3>
<ol>
<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>
</ol>
<hr class="sysHR">
<hr>
<h3>Where to download more characters?</h3>
<i>(Not endorsed, your discretion is advised)</i>
<ol>
<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>
</ol>
<hr class="sysHR">
<hr>
<h3>Where can I get help?</h3>
Before going any further, check out the following resources:
<ol>
@@ -360,7 +360,7 @@ const system_messages = {
<li><a target="_blank" href="https://docs.alpindale.dev/">Pygmalion AI Docs</a></li>
</ol>
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>
<a target="_blank" href="https://discord.gg/RZdyAEUPvj">SillyTavern Community Discord</a>
<br>
@@ -532,6 +532,7 @@ var selected_button = ""; //which button pressed
var create_save_name = "";
var create_fav_chara = "";
var create_save_description = "";
var create_save_creatorcomment = "";
var create_save_personality = "";
var create_save_first_message = "";
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.
</span>
<div id="showRawPrompt" class="fa-solid fa-square-poll-horizontal menu_button"></div>
<hr class="sysHR">
<hr>
<div class="justifyLeft">
<div class="flex-container">
<div class="flex-container flex1 flexFlowColumns flexNoGap wide50p tokenGraph">
@@ -2845,7 +2846,7 @@ function promptItemize(itemizedPrompts, requestedMesId) {
</div>
</div>
<hr class="sysHR">
<hr>
<div class="wide100p flex-container flexFlowColumns">
<div class="flex-container wide100p">
<div class="flex1">Total Tokens in Prompt:</div><div class=""> ${finalPromptTokens}</div>
@@ -2855,7 +2856,7 @@ function promptItemize(itemizedPrompts, requestedMesId) {
</div>
</div>
</div>
<hr class="sysHR">
<hr>
`, '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.
</span>
<div id="showRawPrompt" class="fa-solid fa-square-poll-horizontal menu_button"></div>
<hr class="sysHR">
<hr>
<div class="justifyLeft">
<div class="flex-container">
<div class="flex-container flex1 flexFlowColumns flexNoGap wide50p tokenGraph">
@@ -2932,7 +2933,7 @@ function promptItemize(itemizedPrompts, requestedMesId) {
</div>
</div>
<hr class="sysHR">
<hr>
<div class="wide100p flex-container flexFlowColumns">
<div class="flex-container wide100p">
<div class="flex1">Total Tokens in Prompt:</div><div class=""> ${totalTokensInPrompt}</div>
@@ -2949,7 +2950,7 @@ function promptItemize(itemizedPrompts, requestedMesId) {
</div>
</div>
</div>
<hr class="sysHR">
<hr>
`, 'text'
);
}
@@ -4340,6 +4341,7 @@ export function select_selected_character(chid) {
$("#character_popup_text_h3").text(characters[chid].name);
$("#character_name_pole").val(characters[chid].name);
$("#description_textarea").val(characters[chid].description);
$("#creatorcomment_textarea").val(characters[chid].creatorcomment);
$("#personality_textarea").val(characters[chid].personality);
$("#firstmessage_textarea").val(characters[chid].first_mes);
$("#scenario_pole").val(characters[chid].scenario);
@@ -4393,6 +4395,7 @@ function select_rm_create() {
$("#character_popup_text_h3").text("Create character");
$("#character_name_pole").val(create_save_name);
$("#description_textarea").val(create_save_description);
$("#creatorcomment_textarea").val(create_save_creatorcomment);
$("#personality_textarea").val(create_save_personality);
$("#firstmessage_textarea").val(create_save_first_message);
$("#talkativeness_slider").val(create_save_talkativeness);
@@ -5342,7 +5345,7 @@ $(document).ready(function () {
$("#advanced_div").click(function () {
if (!is_advanced_char_open) {
is_advanced_char_open = true;
$("#character_popup").css("display", "grid");
$("#character_popup").css("display", "flex");
$("#character_popup").css("opacity", 0.0);
$("#character_popup").transition({
opacity: 1.0,
@@ -5566,6 +5569,8 @@ $(document).ready(function () {
create_save_name = "";
$("#description_textarea").val("");
create_save_description = "";
$("#creatorcomment_textarea").val("");
create_save_creatorcomment = "";
$("#personality_textarea").val("");
create_save_personality = "";
$("#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 () {
if (menu_type == "create") {
create_save_description = $("#description_textarea").val();
create_save_creatorcomment = $("#creatorcomment_textarea").val();
create_save_personality = $("#personality_textarea").val();
create_save_scenario = $("#scenario_pole").val();
create_save_mes_example = $("#mes_example_textarea").val();

View File

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

View File

@@ -673,7 +673,19 @@ function tryParse(str) {
//***************** Main functions
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;
}
@@ -1468,6 +1480,7 @@ app.post("/importcharacter", urlencodedParser, async function (request, response
let char = {
"name": jsonData.name,
"description": jsonData.description ?? '',
"creatorcomment": jsonData.creatorcomment ?? '',
"personality": jsonData.personality ?? '',
"first_mes": jsonData.first_mes ?? '',
"avatar": 'none', "chat": jsonData.name + " - " + humanizedISO8601DateTime(),
@@ -1485,6 +1498,7 @@ app.post("/importcharacter", urlencodedParser, async function (request, response
let char = {
"name": jsonData.char_name,
"description": jsonData.char_persona ?? '',
"creatorcomment": '',
"personality": '',
"first_mes": jsonData.char_greeting ?? '',
"avatar": 'none',
@@ -1525,6 +1539,7 @@ app.post("/importcharacter", urlencodedParser, async function (request, response
let char = {
"name": jsonData.name,
"description": jsonData.description ?? '',
"creatorcomment": jsonData.creatorcomment ?? '',
"personality": jsonData.personality ?? '',
"first_mes": jsonData.first_mes ?? '',
"avatar": 'none',