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

Expressions offline mode

Browse Source
This commit is contained in:
SillyLossy
2023-03-26 16:29:55 +03:00
parent f14a1cb7e9
commit 9944d729f8
5 changed files with 381 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
public/scripts/extensions/expressions/index.js
View File

@ -1,5 +1,4 @@
import { getContext, getApiUrl } from "../../extensions.js";
import { urlContentToDataUri } from "../../utils.js";
import { getContext, getApiUrl, modules } from "../../extensions.js";
export { MODULE_NAME };
const MODULE_NAME = 'expressions';
@ -67,6 +66,15 @@ async function moduleWorker() {
validateImages();
}
if (!modules.includes('classify')) {
$('.expression_settings .offline_mode').css('display', 'block');
lastCharacter = context.characterId;
return;
}
else {
$('.expression_settings .offline_mode').css('display', 'none');
}
// check if last message changed
const currentLastMessage = getLastCharacterMessage();
if (lastCharacter === context.characterId && lastMessage === currentLastMessage) {
@ -139,16 +147,25 @@ async function validateImages() {
image.width = '0px';
image.height = '0px';
image.onload = function () {
$('#image_list').append(`<li id="${item}" class="success">${item} - OK</li>`);
$('#image_list').append(getListItem(item, image.src, 'success'));
}
image.onerror = function () {
$('#image_list').append(`<li id="${item}" class="failure">${item} - Missing</li>`);
$('#image_list').append(getListItem(item, '/img/No-Image-Placeholder.svg', 'failure'));
}
$('#image_list').prepend(image);
});
imagesValidating = false;
}
function getListItem(item, imageSrc, textClass) {
return `
<div id="${item}" class="expression_list_item">
<span class="expression_list_title ${textClass}">${item}</span>
<img class="expression_list_image" src="${imageSrc}" />
</div>
`;
}
async function getExpressionsList() {
if (Array.isArray(expressionsList)) {
return expressionsList;
@ -175,11 +192,11 @@ async function getExpressionsList() {
}
}
async function setExpression(character, expression) {
async function setExpression(character, expression, force) {
const filename = `${expression}.png`;
const debugImageStatus = document.querySelector(`#image_list li[id="${filename}"]`);
const debugImageStatus = document.querySelector(`#image_list div[id="${filename}"] span`);
if (debugImageStatus && !debugImageStatus.classList.contains('failure')) {
if (force || (debugImageStatus && !debugImageStatus.classList.contains('failure'))) {
//console.log('setting expression from character images folder');
const imgUrl = `/characters/${character}/${filename}`;
$('img.expression').prop('src', imgUrl);
@ -193,6 +210,17 @@ async function setExpression(character, expression) {
}
}
function onClickExpressionImage() {
// online mode doesn't need force set
if (modules.includes('classify')) {
return;
}
const context = getContext();
const expression = $(this).attr('id').replace('.png', '');
setExpression(context.name2, expression, true);
}
(function () {
function addExpressionImage() {
const html = `<div class="expression-holder"><img class="expression"></div>`;
@ -208,7 +236,8 @@ async function setExpression(character, expression) {
<div class="inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<ul id="image_list"></ul>
<p class="offline_mode">You are in offline mode. Click on the image below to set the expression.</p>
<div id="image_list"></div>
<p class="hint"><b>Hint:</b> <i>Create new folder in the <b>public/characters/</b> folder and name it as the name of the character. Put PNG images with expressions there.</i></p>
</div>
</div>
@ -217,6 +246,7 @@ async function setExpression(character, expression) {
`;
$('#extensions_settings').append(html);
$('#expressions_show_default').on('input', onExpressionsShowDefaultInput);
$(document).on('click', '.expression_list_item', onClickExpressionImage);
$('.expression_settings').hide();
}