From 123131074c785b108d450b078d91573eb7354dea Mon Sep 17 00:00:00 2001 From: Cohee <18619528+Cohee1207@users.noreply.github.com> Date: Thu, 11 Apr 2024 23:38:44 +0300 Subject: [PATCH] Change built-in extensions template render to async --- .../scripts/extensions/expressions/index.js | 41 +++++++++++-------- public/scripts/extensions/memory/index.js | 10 ++--- public/scripts/extensions/regex/index.js | 8 ++-- .../extensions/stable-diffusion/index.js | 5 ++- public/scripts/extensions/vectors/index.js | 5 ++- 5 files changed, 38 insertions(+), 31 deletions(-) diff --git a/public/scripts/extensions/expressions/index.js b/public/scripts/extensions/expressions/index.js index d4573554a..7b1fd4331 100644 --- a/public/scripts/extensions/expressions/index.js +++ b/public/scripts/extensions/expressions/index.js @@ -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} 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. diff --git a/public/scripts/extensions/memory/index.js b/public/scripts/extensions/memory/index.js index 348775f06..ff0dea958 100644 --- a/public/scripts/extensions/memory/index.js +++ b/public/scripts/extensions/memory/index.js @@ -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); diff --git a/public/scripts/extensions/regex/index.js b/public/scripts/extensions/regex/index.js index 136f1a9b0..5115af276 100644 --- a/public/scripts/extensions/regex/index.js +++ b/public/scripts/extensions/regex/index.js @@ -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); diff --git a/public/scripts/extensions/stable-diffusion/index.js b/public/scripts/extensions/stable-diffusion/index.js index 59664fe0c..ee3e9a477 100644 --- a/public/scripts/extensions/stable-diffusion/index.js +++ b/public/scripts/extensions/stable-diffusion/index.js @@ -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. /imagine-comfy-workflow MyWorkflow'); - $('#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); diff --git a/public/scripts/extensions/vectors/index.js b/public/scripts/extensions/vectors/index.js index 3dda4a1f8..faecb4e70 100644 --- a/public/scripts/extensions/vectors/index.js +++ b/public/scripts/extensions/vectors/index.js @@ -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);