Merge chat backgrounds plugin with main backgrounds menu

This commit is contained in:
Cohee
2023-10-21 01:40:58 +03:00
parent 7f8df9533b
commit f285110773
7 changed files with 429 additions and 454 deletions

View File

@@ -182,6 +182,7 @@ import {
import { applyLocale } from "./scripts/i18n.js";
import { getTokenCount, getTokenizerModel, saveTokenCache } from "./scripts/tokenizers.js";
import { initPersonas, selectCurrentPersona, setPersonaDescription } from "./scripts/personas.js";
import { getBackgrounds, initBackgrounds } from "./scripts/backgrounds.js";
//exporting functions and vars for mods
export {
@@ -319,7 +320,6 @@ reloadMarkdownProcessor();
console.debug('initializing Prompt Itemization Array on Startup');
let itemizedPrompts = [];
/* let bg_menu_toggle = false; */
export const systemUserName = "SillyTavern System";
let default_user_name = "User";
let name1 = default_user_name;
@@ -348,7 +348,6 @@ let generation_started = new Date();
let characters = [];
let this_chid;
let saveCharactersPage = 0;
let backgrounds = [];
const default_avatar = "img/ai4.png";
export const system_avatar = "img/five.png";
export const comment_avatar = "img/quill.png";
@@ -632,7 +631,6 @@ let create_save = {
let animation_duration = 125;
let animation_easing = "ease-in-out";
let popup_type = "";
let bg_file_for_del = "";
let chat_file_for_del = "";
let online_status = "no_connection";
@@ -721,6 +719,7 @@ async function firstLoadInit() {
await getUserAvatars();
await getCharacters();
await getBackgrounds();
initBackgrounds();
initAuthorsNote();
initPersonas();
initRossMods();
@@ -1033,73 +1032,6 @@ async function getCharacters() {
}
}
async function getBackgrounds() {
const response = await fetch("/getbackgrounds", {
method: "POST",
headers: getRequestHeaders(),
body: JSON.stringify({
"": "",
}),
});
if (response.ok === true) {
const getData = await response.json();
//background = getData;
//console.log(getData.length);
$("#bg_menu_content").children('div').remove();
for (const bg of getData) {
const template = getBackgroundFromTemplate(bg);
$("#bg_menu_content").append(template);
}
}
}
function getBackgroundFromTemplate(bg) {
const thumbPath = getThumbnailUrl('bg', bg);
const template = $('#background_template .bg_example').clone();
template.attr('bgfile', bg);
template.attr('title', bg);
template.find('.bg_button').attr('bgfile', bg);
template.css('background-image', `url('${thumbPath}')`);
template.find('.BGSampleTitle').text(bg.slice(0, bg.lastIndexOf('.')));
return template;
}
async function setBackground(bg) {
jQuery.ajax({
type: "POST", //
url: "/setbackground", //
data: JSON.stringify({
bg: bg,
}),
beforeSend: function () {
},
cache: false,
dataType: "json",
contentType: "application/json",
//processData: false,
success: function (html) { },
error: function (jqXHR, exception) {
console.log(exception);
console.log(jqXHR);
},
});
}
async function delBackground(bg) {
const response = await fetch("/delbackground", {
method: "POST",
headers: getRequestHeaders(),
body: JSON.stringify({
bg: bg,
}),
});
if (response.ok === true) {
}
}
async function delChat(chatfile) {
const response = await fetch("/delchat", {
method: "POST",
@@ -4820,8 +4752,6 @@ export async function getUserAvatars() {
});
if (response.ok === true) {
const getData = await response.json();
//background = getData;
//console.log(getData.length);
$("#user_avatar_block").html(""); //RossAscends: necessary to avoid doubling avatars each refresh.
$("#user_avatar_block").append('<div class="avatar_upload">+</div>');
@@ -5933,48 +5863,6 @@ function callPopup(text, type, inputValue = '', { okButton, rows, wide, large }
});
}
function read_bg_load(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$("#bg_load_preview")
.attr("src", e.target.result)
.width(103)
.height(83);
var formData = new FormData($("#form_bg_download").get(0));
//console.log(formData);
jQuery.ajax({
type: "POST",
url: "/downloadbackground",
data: formData,
beforeSend: function () {
},
cache: false,
contentType: false,
processData: false,
success: function (html) {
setBackground(html);
$("#bg1").css(
"background-image",
`url("${e.target.result}")`
);
$("#form_bg_download").after(getBackgroundFromTemplate(html));
},
error: function (jqXHR, exception) {
console.log(exception);
console.log(jqXHR);
},
});
};
reader.readAsDataURL(input.files[0]);
}
}
function showSwipeButtons() {
if (chat.length === 0) {
return;
@@ -7341,86 +7229,6 @@ jQuery(async function () {
});
$("#avatar_upload_file").on("change", uploadUserAvatar);
$(document).on("click", ".bg_example", async function () {
//when user clicks on a BG thumbnail...
const this_bgfile = $(this).attr("bgfile"); // this_bgfile = whatever they clicked
const customBg = window.getComputedStyle(document.getElementById('bg_custom')).backgroundImage;
// custom background is set. Do not override the layer below
if (customBg !== 'none') {
return;
}
// if clicked on upload button
if (!this_bgfile) {
return;
}
const backgroundUrl = `backgrounds/${this_bgfile}`;
// fetching to browser memory to reduce flicker
fetch(backgroundUrl).then(() => {
$("#bg1").css(
"background-image",
`url("${backgroundUrl}")`
);
setBackground(this_bgfile);
}).catch(() => {
console.log('Background could not be set: ' + backgroundUrl);
});
});
$(document).on('click', '.bg_example_edit', async function (e) {
e.stopPropagation();
const old_bg = $(this).attr('bgfile');
if (!old_bg) {
console.debug('no bgfile');
return;
}
const fileExtension = old_bg.split('.').pop();
const old_bg_extensionless = old_bg.replace(`.${fileExtension}`, '');
const new_bg_extensionless = await callPopup('<h3>Enter new background name:</h3>', 'input', old_bg_extensionless);
if (!new_bg_extensionless) {
console.debug('no new_bg_extensionless');
return;
}
const new_bg = `${new_bg_extensionless}.${fileExtension}`;
if (old_bg_extensionless === new_bg_extensionless) {
console.debug('new_bg === old_bg');
return;
}
const data = { old_bg, new_bg };
const response = await fetch('/renamebackground', {
method: 'POST',
headers: getRequestHeaders(),
body: JSON.stringify(data),
cache: 'no-cache',
});
if (response.ok) {
await getBackgrounds();
} else {
toastr.warning('Failed to rename background');
}
});
$(document).on("click", ".bg_example_cross", function (e) {
e.stopPropagation();
bg_file_for_del = $(this);
//$(this).parent().remove();
//delBackground(this_bgfile);
popup_type = "del_bg";
callPopup("<h3>Delete the background?</h3>");
});
$(document).on("click", ".PastChat_cross", function () {
chat_file_for_del = $(this).attr('file_name');
console.debug('detected cross click for' + chat_file_for_del);
@@ -7477,10 +7285,6 @@ jQuery(async function () {
dialogueResolve($("#avatarToCrop").data('cropper').getCroppedCanvas().toDataURL('image/jpeg'));
};
if (popup_type == "del_bg") {
delBackground(bg_file_for_del.attr("bgfile"));
bg_file_for_del.parent().remove();
}
if (popup_type == "del_chat") {
//close past chat popup
$("#select_chat_cross").click();
@@ -7575,10 +7379,6 @@ jQuery(async function () {
});
$("#add_bg_button").change(function () {
read_bg_load(this);
});
$("#add_avatar_button").change(function () {
read_avatar_load(this);
});
@@ -8819,18 +8619,6 @@ jQuery(async function () {
}
});
$("#bg-filter").on("input", function () {
const filterValue = String($(this).val()).toLowerCase();
$("#bg_menu_content > div").each(function () {
const $bgContent = $(this);
if ($bgContent.attr("title").toLowerCase().includes(filterValue)) {
$bgContent.show();
} else {
$bgContent.hide();
}
});
});
$("#char-management-dropdown").on('change', async (e) => {
let target = $(e.target.selectedOptions).attr('id');
switch (target) {