Change built-in extensions template render to async

This commit is contained in:
Cohee 2024-04-11 23:38:44 +03:00
parent 16cabb38ad
commit 123131074c
5 changed files with 38 additions and 31 deletions

View File

@ -1,6 +1,6 @@
import { callPopup, eventSource, event_types, getRequestHeaders, saveSettingsDebounced } from '../../../script.js';
import { dragElement, isMobile } from '../../RossAscends-mods.js';
import { getContext, getApiUrl, modules, extension_settings, ModuleWorkerWrapper, doExtrasFetch, renderExtensionTemplate } from '../../extensions.js';
import { getContext, getApiUrl, modules, extension_settings, ModuleWorkerWrapper, doExtrasFetch, renderExtensionTemplateAsync } from '../../extensions.js';
import { loadMovingUIState, power_user } from '../../power-user.js';
import { registerSlashCommand } from '../../slash-commands.js';
import { onlyUnique, debounce, getCharaFilename, trimToEndSentence, trimToStartSentence } from '../../utils.js';
@ -1055,18 +1055,18 @@ async function validateImages(character, forceRedrawCached) {
if (spriteCache[character]) {
if (forceRedrawCached && $('#image_list').data('name') !== character) {
console.debug('force redrawing character sprites list');
drawSpritesList(character, labels, spriteCache[character]);
await drawSpritesList(character, labels, spriteCache[character]);
}
return;
}
const sprites = await getSpritesList(character);
let validExpressions = drawSpritesList(character, labels, sprites);
let validExpressions = await drawSpritesList(character, labels, sprites);
spriteCache[character] = validExpressions;
}
function drawSpritesList(character, labels, sprites) {
async function drawSpritesList(character, labels, sprites) {
let validExpressions = [];
$('#no_chat_expressions').hide();
$('#open_chat_expressions').show();
@ -1078,18 +1078,20 @@ function drawSpritesList(character, labels, sprites) {
return [];
}
labels.sort().forEach((item) => {
for (const item of labels.sort()) {
const sprite = sprites.find(x => x.label == item);
const isCustom = extension_settings.expressions.custom.includes(item);
if (sprite) {
validExpressions.push(sprite);
$('#image_list').append(getListItem(item, sprite.path, 'success', isCustom));
const listItem = await getListItem(item, sprite.path, 'success', isCustom);
$('#image_list').append(listItem);
}
else {
$('#image_list').append(getListItem(item, '/img/No-Image-Placeholder.svg', 'failure', isCustom));
const listItem = await getListItem(item, '/img/No-Image-Placeholder.svg', 'failure', isCustom);
$('#image_list').append(listItem);
}
});
}
return validExpressions;
}
@ -1099,12 +1101,12 @@ function drawSpritesList(character, labels, sprites) {
* @param {string} imageSrc Path to image
* @param {'success' | 'failure'} textClass 'success' or 'failure'
* @param {boolean} isCustom If expression is added by user
* @returns {string} Rendered list item template
* @returns {Promise<string>} Rendered list item template
*/
function getListItem(item, imageSrc, textClass, isCustom) {
async function getListItem(item, imageSrc, textClass, isCustom) {
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
imageSrc = isFirefox ? `${imageSrc}?t=${Date.now()}` : imageSrc;
return renderExtensionTemplate(MODULE_NAME, 'list-item', { item, imageSrc, textClass, isCustom });
return renderExtensionTemplateAsync(MODULE_NAME, 'list-item', { item, imageSrc, textClass, isCustom });
}
async function getSpritesList(name) {
@ -1166,7 +1168,7 @@ async function renderFallbackExpressionPicker() {
async function getExpressionsList() {
// Return cached list if available
if (Array.isArray(expressionsList)) {
return expressionsList;
return [...expressionsList, ...extension_settings.expressions.custom].filter(onlyUnique);
}
/**
@ -1215,7 +1217,7 @@ async function getExpressionsList() {
}
const result = await resolveExpressionsList();
return [...result, ...extension_settings.expressions.custom];
return [...result, ...extension_settings.expressions.custom].filter(onlyUnique);
}
async function setExpression(character, expression, force) {
@ -1371,7 +1373,8 @@ function onClickExpressionImage() {
}
async function onClickExpressionAddCustom() {
let expressionName = await callPopup(renderExtensionTemplate(MODULE_NAME, 'add-custom-expression'), 'input');
const template = await renderExtensionTemplateAsync(MODULE_NAME, 'add-custom-expression');
let expressionName = await callPopup(template, 'input');
if (!expressionName) {
console.debug('No custom expression name provided');
@ -1410,14 +1413,15 @@ async function onClickExpressionAddCustom() {
}
async function onClickExpressionRemoveCustom() {
const selectedExpression = $('#expression_custom').val();
const selectedExpression = String($('#expression_custom').val());
if (!selectedExpression) {
console.debug('No custom expression selected');
return;
}
const confirmation = await callPopup(renderExtensionTemplate(MODULE_NAME, 'remove-custom-expression', { expression: selectedExpression }), 'confirm');
const template = await renderExtensionTemplateAsync(MODULE_NAME, 'remove-custom-expression', { expression: selectedExpression });
const confirmation = await callPopup(template, 'confirm');
if (!confirmation) {
console.debug('Custom expression removal cancelled');
@ -1716,7 +1720,8 @@ async function fetchImagesNoCache() {
$('body').append(element);
}
async function addSettings() {
$('#extensions_settings').append(renderExtensionTemplate(MODULE_NAME, 'settings'));
const template = await renderExtensionTemplateAsync(MODULE_NAME, 'settings');
$('#extensions_settings').append(template);
$('#expression_override_button').on('click', onClickExpressionOverrideButton);
$('#expressions_show_default').on('input', onExpressionsShowDefaultInput);
$('#expression_upload_pack_button').on('click', onClickExpressionUploadPackButton);
@ -1751,7 +1756,7 @@ async function fetchImagesNoCache() {
$('#expression_custom_add').on('click', onClickExpressionAddCustom);
$('#expression_custom_remove').on('click', onClickExpressionRemoveCustom);
$('#expression_fallback').on('change', onExpressionFallbackChanged)
$('#expression_fallback').on('change', onExpressionFallbackChanged);
}
// Pause Talkinghead to save resources when the ST tab is not visible or the window is minimized.

View File

@ -1,5 +1,5 @@
import { getStringHash, debounce, waitUntilCondition, extractAllWords, delay } from '../../utils.js';
import { getContext, getApiUrl, extension_settings, doExtrasFetch, modules, renderExtensionTemplate } from '../../extensions.js';
import { getContext, getApiUrl, extension_settings, doExtrasFetch, modules, renderExtensionTemplateAsync } from '../../extensions.js';
import {
activateSendButtons,
deactivateSendButtons,
@ -847,9 +847,9 @@ function setupListeners() {
});
}
jQuery(function () {
function addExtensionControls() {
const settingsHtml = renderExtensionTemplate('memory', 'settings', { defaultSettings });
jQuery(async function () {
async function addExtensionControls() {
const settingsHtml = await renderExtensionTemplateAsync('memory', 'settings', { defaultSettings });
$('#extensions_settings2').append(settingsHtml);
setupListeners();
$('#summaryExtensionPopoutButton').off('click').on('click', function (e) {
@ -858,7 +858,7 @@ jQuery(function () {
});
}
addExtensionControls();
await addExtensionControls();
loadSettings();
eventSource.on(event_types.MESSAGE_RECEIVED, onChatEvent);
eventSource.on(event_types.MESSAGE_DELETED, onChatEvent);

View File

@ -1,5 +1,5 @@
import { callPopup, getCurrentChatId, reloadCurrentChat, saveSettingsDebounced } from '../../../script.js';
import { extension_settings } from '../../extensions.js';
import { extension_settings, renderExtensionTemplateAsync } from '../../extensions.js';
import { registerSlashCommand } from '../../slash-commands.js';
import { download, getFileText, getSortableDelay, uuidv4 } from '../../utils.js';
import { resolveVariable } from '../../variables.js';
@ -71,7 +71,7 @@ async function deleteRegexScript({ existingId }) {
async function loadRegexScripts() {
$('#saved_regex_scripts').empty();
const scriptTemplate = $(await $.get('scripts/extensions/regex/scriptTemplate.html'));
const scriptTemplate = $(await renderExtensionTemplateAsync('regex', 'scriptTemplate'));
extension_settings.regex.forEach((script) => {
// Have to clone here
@ -113,7 +113,7 @@ async function loadRegexScripts() {
}
async function onRegexEditorOpenClick(existingId) {
const editorHtml = $(await $.get('scripts/extensions/regex/editor.html'));
const editorHtml = $(await renderExtensionTemplateAsync('regex', 'editor'));
// If an ID exists, fill in all the values
let existingScriptIndex = -1;
@ -316,7 +316,7 @@ jQuery(async () => {
return;
}
const settingsHtml = await $.get('scripts/extensions/regex/dropdown.html');
const settingsHtml = $(await renderExtensionTemplateAsync('regex', 'dropdown'));
$('#extensions_settings2').append(settingsHtml);
$('#open_regex_editor').on('click', function () {
onRegexEditorOpenClick(false);

View File

@ -18,7 +18,7 @@ import {
formatCharacterAvatar,
substituteParams,
} from '../../../script.js';
import { getApiUrl, getContext, extension_settings, doExtrasFetch, modules, renderExtensionTemplate } from '../../extensions.js';
import { getApiUrl, getContext, extension_settings, doExtrasFetch, modules, renderExtensionTemplateAsync } from '../../extensions.js';
import { selected_group } from '../../group-chats.js';
import { stringFormat, initScrollHeight, resetScrollHeight, getCharaFilename, saveBase64AsFile, getBase64Async, delay, isTrueBoolean } from '../../utils.js';
import { getMessageTimeStamp, humanizedDateTime } from '../../RossAscends-mods.js';
@ -2990,7 +2990,8 @@ jQuery(async () => {
registerSlashCommand('imagine', generatePicture, ['sd', 'img', 'image'], helpString, true, true);
registerSlashCommand('imagine-comfy-workflow', changeComfyWorkflow, ['icw'], '(workflowName) - change the workflow to be used for image generation with ComfyUI, e.g. <tt>/imagine-comfy-workflow MyWorkflow</tt>');
$('#extensions_settings').append(renderExtensionTemplate('stable-diffusion', 'settings', defaultSettings));
const template = await renderExtensionTemplateAsync('stable-diffusion', 'settings', defaultSettings);
$('#extensions_settings').append(template);
$('#sd_source').on('change', onSourceChange);
$('#sd_scale').on('input', onScaleInput);
$('#sd_steps').on('input', onStepsInput);

View File

@ -1,5 +1,5 @@
import { eventSource, event_types, extension_prompt_types, getCurrentChatId, getRequestHeaders, is_send_press, saveSettingsDebounced, setExtensionPrompt, substituteParams } from '../../../script.js';
import { ModuleWorkerWrapper, extension_settings, getContext, modules, renderExtensionTemplate } from '../../extensions.js';
import { ModuleWorkerWrapper, extension_settings, getContext, modules, renderExtensionTemplateAsync } from '../../extensions.js';
import { collapseNewlines } from '../../power-user.js';
import { SECRET_KEYS, secret_state, writeSecret } from '../../secrets.js';
import { debounce, getStringHash as calculateHash, waitUntilCondition, onlyUnique, splitRecursive } from '../../utils.js';
@ -658,7 +658,8 @@ jQuery(async () => {
// Migrate from TensorFlow to Transformers
settings.source = settings.source !== 'local' ? settings.source : 'transformers';
$('#extensions_settings2').append(renderExtensionTemplate(MODULE_NAME, 'settings'));
const template = await renderExtensionTemplateAsync(MODULE_NAME, 'settings');
$('#extensions_settings2').append(template);
$('#vectors_enabled_chats').prop('checked', settings.enabled_chats).on('input', () => {
settings.enabled_chats = $('#vectors_enabled_chats').prop('checked');
Object.assign(extension_settings.vectors, settings);