Update and fix default expressions + emojis - Move "use default emojis" from its own toggle into the fallback dropdown - Add "no fallback" to the fallback dropdown - fix fallback expressions not being consistently used - Switching fallback will now reroll/reset the relevant expression - Add html attributes on the expression image

fb2ee756dd2db7fe7441c5acb6733aa1db126979

Wolfsblvt <wolfsblvt@gmail.com>

Parents: 25ffc4ac4ae9ac54e877c25266aeec1e4bb64d73

public/scripts/extensions/expressions/index.js+128 -81 Viewed

     'surprise',
     'neutral',
 ];
+const OPTION_NO_FALLBACK = '#none';
+const OPTION_EMOJI_FALLBACK = '#emoji';
+const RESET_SPRITE_LABEL = '#reset';
 /** @enum {number} */
 const EXPRESSION_API = {
     local: 0,

     };
+}
-/**
- * Returns the fallback expression if explicitly chosen, otherwise the default one
- * @returns {string} expression name
- */
-function getFallbackExpression() {
-    return extension_settings.expressions.fallback_expression ?? DEFAULT_FALLBACK_EXPRESSION;
-}
 function isVisualNovelMode() {
     return Boolean(!isMobile() && power_user.waifuMode && getContext().groupId);
+}

 const updateVisualNovelModeDebounced = debounce(forceUpdateVisualNovelMode, debounce_timeout.quick);
-async function updateVisualNovelMode(name, expression) {
+async function updateVisualNovelMode(spriteFolderName, expression) {
     const vnContainer = $('#visual-novel-wrapper');
     await visualNovelRemoveInactive(vnContainer);
-    const setSpritePromises = await visualNovelSetCharacterSprites(vnContainer, name, expression);
+    const setSpritePromises = await visualNovelSetCharacterSprites(vnContainer, spriteFolderName, expression);
     // calculate layer indices based on recent messages
     await visualNovelUpdateLayers(vnContainer);

     });
+}
-function onExpressionsShowDefaultInput() {
-    const value = $(this).prop('checked');
-    extension_settings.expressions.showDefault = value;
-    saveSettingsDebounced();
-    const existingImageSrc = $('img.expression').prop('src');
-    if (existingImageSrc !== undefined) {                      //if we have an image in src
-        if (!value && existingImageSrc.includes('/img/default-expressions/')) {    //and that image is from /img/ (default)
-            $('img.expression').prop('src', '');               //remove it
-            lastMessage = null;
-        }
-        if (value) {
-            lastMessage = null;
-        }
-    }
-}
 async function moduleWorker() {
     const context = getContext();

         const force = !!context.groupId;
         // Character won't be angry on you for swiping
-        if (currentLastMessage.mes == '...' && expressionsList.includes(getFallbackExpression())) {
+        if (currentLastMessage.mes == '...' && expressionsList.includes(extension_settings.expressions.fallback_expression)) {
-            expression = getFallbackExpression();
+            expression = extension_settings.expressions.fallback_expression;
+        }
         await sendExpressionCall(spriteFolderName, expression, { force: force, vnMode: vnMode });

 /**
  * Update the expression for the given character.
+ *
- * @param {string} name The character name, optionally with a sprite folder override, e.g. "folder/expression".
+ * @param {string} spriteFolderName The character name, optionally with a sprite folder override, e.g. "folder/expression".
  * @param {string} expression The expression label, e.g. "amusement", "joy", etc.
  * @param {Object} [options] Additional options
  * @param {boolean} [options.force=false] If true, the expression will be sent even if it is the same as the current expression.
  * @param {boolean} [options.vnMode=null] If true, the expression will be sent in Visual Novel mode. If null, it will be determined by the current chat mode.
  * @param {string?} [options.overrideSpriteFile=null] - Set if a specific sprite file should be used. Must be sprite file name.
  */
-async function sendExpressionCall(name, expression, { force = false, vnMode = null, overrideSpriteFile = null } = {}) {
+async function sendExpressionCall(spriteFolderName, expression, { force = false, vnMode = null, overrideSpriteFile = null } = {}) {
-    lastExpression[name.split('/')[0]] = expression;
+    lastExpression[spriteFolderName.split('/')[0]] = expression;
     if (vnMode === null) {
         vnMode = isVisualNovelMode();
+    }
     if (vnMode) {
-        await updateVisualNovelMode(name, expression);
+        await updateVisualNovelMode(spriteFolderName, expression);
     } else {
-        setExpression(name, expression, { force: force, overrideSpriteFile: overrideSpriteFile });
+        setExpression(spriteFolderName, expression, { force: force, overrideSpriteFile: overrideSpriteFile });
+    }
+}

     await validateImages(spriteFolderName);
     // Handle reset as a special term and just reset the sprite via expression call
-    if (searchTerm === '#reset') {
+    if (searchTerm === RESET_SPRITE_LABEL) {
         await sendExpressionCall(spriteFolderName, label, { force: true });
         return lastExpression[spriteFolderName] ?? '';
+    }

  * @param {EXPRESSION_API} [expressionsApi=extension_settings.expressions.api] - The expressions API to use for classification.
  * @param {object} [options={}] - Optional arguments.
  * @param {string?} [options.customPrompt=null] - The custom prompt to use for classification.
- * @returns {Promise<string>} - The label of the expression.
+ * @returns {Promise<string?>} - The label of the expression.
  */
 export async function getExpressionLabel(text, expressionsApi = extension_settings.expressions.api, { customPrompt = null } = {}) {
     // Return if text is undefined, saving a costly fetch request
     if ((!modules.includes('classify') && expressionsApi == EXPRESSION_API.extras) || !text) {
-        return getFallbackExpression();
+        return extension_settings.expressions.fallback_expression;
+    }
     if (extension_settings.expressions.translate && typeof window['translate'] === 'function') {

                     await waitUntilCondition(() => online_status !== 'no_connection', 3000, 250);
                 } catch (error) {
                     console.warn('No LLM connection. Using fallback expression', error);
-                    return getFallbackExpression();
+                    return extension_settings.expressions.fallback_expression;
+                }
                 const expressionsList = await getExpressionsList();

             case EXPRESSION_API.webllm: {
                 if (!isWebLlmSupported()) {
                     console.warn('WebLLM is not supported. Using fallback expression');
-                    return getFallbackExpression();
+                    return extension_settings.expressions.fallback_expression;
+                }
                 const expressionsList = await getExpressionsList();

@@ -1014,9 +994,9 @@ export async function getExpressionLabel(text, expressionsApi = extension_settin
1014	} break;	994	} break;
1015	}	995	}
1016	} catch (error) {	996	} catch (error) {
1017	toastr.info('Could not classify expression. Check the console or your backend for more information.');	997	toastr.error('Could not classify expression. Check the console or your backend for more information.');
1018	console.error(error);	998	console.error(error);
1019	return getFallbackExpression();	999	return extension_settings.expressions.fallback_expression;
1020	}	1000	}
1021	}	1001	}
1022		1002

     const defaultPicker = $('#expression_fallback');
     defaultPicker.empty();
-    const fallbackExpression = getFallbackExpression();
+    addOption(OPTION_NO_FALLBACK, '[ No fallback ]', !extension_settings.expressions.fallback_expression);
+    addOption(OPTION_EMOJI_FALLBACK, '[ Default emojis ]', !!extension_settings.expressions.showDefault);
     for (const expression of expressions) {
+        addOption(expression, expression, expression == extension_settings.expressions.fallback_expression);
+    }
+    /** @type {(value: string, label: string, isSelected: boolean) => void} */
+    function addOption(value, label, isSelected) {
         const option = document.createElement('option');
-        option.value = expression;
+        option.value = value;
-        option.text = expression;
+        option.text = label;
-        option.selected = expression == fallbackExpression;
+        option.selected = isSelected;
         defaultPicker.append(option);
+    }
+}

  * @param {object} [options] - Options to select the sprite
  * @param {string} [options.prevExpressionSrc=null] - The source of the previous expression
  * @param {string} [options.overrideSpriteFile=null] - The file name of the sprite to select
- * @returns {ExpressionImage} - The selected sprite
+ * @returns {ExpressionImage?} - The selected sprite
  */
 function chooseSpriteForExpression(spriteFolderName, expression, { prevExpressionSrc = null, overrideSpriteFile = null } = {}) {
-    const sprite = (spriteCache[spriteFolderName] && spriteCache[spriteFolderName].find(x => x.label === expression));
+    if (!spriteCache[spriteFolderName]) return null;
-    if (!(sprite?.files.length > 0))
+    if (expression === RESET_SPRITE_LABEL) return null;
-        return null;
+    // Search for sprites of that expression - or fallback expression sprites if enabled
+    let sprite = spriteCache[spriteFolderName].find(x => x.label === expression);
+    if (!(sprite?.files.length > 0) && extension_settings.expressions.fallback_expression) {
+        sprite = spriteCache[spriteFolderName].find(x => x.label === extension_settings.expressions.fallback_expression);
+        console.debug('Expression', expression, 'not found. Using fallback expression', extension_settings.expressions.fallback_expression);
+    }
+    if (!(sprite?.files.length > 0)) return null;
     let spriteFile = sprite.files[0];

             expressionClone.attr('id', '').css({ opacity: 0 });
             //add new sprite path to clone src
             expressionClone.attr('src', spriteFile.imageSrc);
+            //set relevant data tags
+            expressionClone.attr('data-sprite-folder-name', spriteFolderName);
+            expressionClone.attr('data-expression', expression);
+            expressionClone.attr('data-sprite-filename', spriteFile.fileName);
             //add invisible clone to html
             expressionClone.appendTo($('#expression-holder'));

             expressionClone.removeClass('default');
             expressionClone.off('error');
-            expressionClone.on('error', function () {
+            expressionClone.on('error', function (error) {
-                console.debug('Expression image error', spriteFile.imageSrc);
+                console.debug('Expression image error', spriteFile.imageSrc, error);
                 $(this).attr('src', '');
                 $(this).off('error');
                 if (force && extension_settings.expressions.showDefault) {
-                    setDefault();
+                    setDefaultEmojiForImage(img, expression);
+                }
             });
+        }

         console.info('Expression set', { expression: spriteFile.expression, file: spriteFile.fileName });
+    }
     else {
-        if (extension_settings.expressions.showDefault) {
+        img.attr('data-sprite-folder-name', spriteFolderName);
-            setDefault();
+        img.attr('data-expression', expression);
+        $(img).off('error');
+        if (extension_settings.expressions.showDefault && expression !== RESET_SPRITE_LABEL) {
+            setDefaultEmojiForImage(img, expression);
         } else {
-            setNone();
+            setNoneForImage(img, expression);
+        }
         console.debug('Expression unset - No sprite found', { expression: expression });
+    }
-    function setDefault() {
+    document.getElementById('expression-holder').style.display = '';
-        console.debug('setting default expression');
+}
+/**
+ * Sets the default expression image for the given image element and expression
+ * @param {JQuery<HTMLElement>} img - The image element to set the default expression for
+ * @param {string} expression - The expression label to use for the default image
+ */
+function setDefaultEmojiForImage(img, expression) {
+    if (extension_settings.expressions.custom?.includes(expression)) {
+        console.debug(`Can't set default emoji for a custom expression (${expression}). setting to ${DEFAULT_FALLBACK_EXPRESSION} instead.`);
+        expression = DEFAULT_FALLBACK_EXPRESSION;
+    }
     const defImgUrl = `/img/default-expressions/${expression}.png`;
-        //console.log(defImgUrl);
     img.attr('src', defImgUrl);
+    img.attr('data-expression', expression);
+    img.attr('data-sprite-filename', null);
     img.addClass('default');
+}
-    function setNone() {
-        console.debug('setting no expression');
+/**
+ * Sets the image element to display no expression by clearing its source attribute.
+ * @param {JQuery<HTMLElement>} img - The image element to clear the expression for
+ * @param {string} expression - The expression label to use
+ */
+function setNoneForImage(img, expression) {
     img.attr('src', '');
+    img.attr('data-expression', expression);
+    img.attr('data-sprite-filename', null);
     img.removeClass('default');
+}
-    document.getElementById('expression-holder').style.display = '';
-}
 function onClickExpressionImage() {
     // If there is no expression image and we clicked on the placeholder, we remove the sprite by calling via the expression label
     if ($(this).attr('data-expression-type') === 'failure') {

     // a-z, 0-9, dashes and underscores only
     if (!/^[a-z0-9-_]+$/.test(expressionName)) {
-        toastr.info('Invalid custom expression name provided');
+        toastr.warning('Invalid custom expression name provided', 'Add Custom Expression');
         return;
+    }
-    // Check if expression name already exists in default expressions
     if (DEFAULT_EXPRESSIONS.includes(expressionName)) {
-        toastr.info('Expression name already exists');
+        toastr.warning('Expression name already exists', 'Add Custom Expression');
         return;
+    }
-    // Check if expression name already exists in custom expressions
     if (extension_settings.expressions.custom.includes(expressionName)) {
-        toastr.info('Custom expression already exists');
+        toastr.warning('Custom expression already exists', 'Add Custom Expression');
         return;
+    }

     // Remove custom expression from settings
     const index = extension_settings.expressions.custom.indexOf(selectedExpression);
     extension_settings.expressions.custom.splice(index, 1);
-    if (selectedExpression == getFallbackExpression()) {
+    if (selectedExpression == extension_settings.expressions.fallback_expression) {
-        toastr.warning(`Deleted custom expression '${selectedExpression}' that was also selected as the fallback expression.\nFallback expression has been reset to '${DEFAULT_FALLBACK_EXPRESSION}'.`);
+        toastr.warning(`Deleted custom expression '${selectedExpression}' that was also selected as the fallback expression.\nFallback expression has been reset to '${DEFAULT_FALLBACK_EXPRESSION}'.`, 'Remove Custom Expression');
         extension_settings.expressions.fallback_expression = DEFAULT_FALLBACK_EXPRESSION;
+    }
     await renderAdditionalExpressionSettings();

+    }
+}
-function onExpressionFallbackChanged() {
+async function onExpressionFallbackChanged() {
-    const expression = this.value;
+    /** @type {HTMLSelectElement} */
-    if (expression) {
+    const select = this;
-        extension_settings.expressions.fallback_expression = expression;
+    const selectedValue = select.value;
-        saveSettingsDebounced();
+    switch (selectedValue) {
+        case OPTION_NO_FALLBACK:
+            extension_settings.expressions.fallback_expression = null;
+            extension_settings.expressions.showDefault = false;
+            break;
+        case OPTION_EMOJI_FALLBACK:
+            extension_settings.expressions.fallback_expression = null;
+            extension_settings.expressions.showDefault = true;
+            break;
+        default:
+            extension_settings.expressions.fallback_expression = selectedValue;
+            extension_settings.expressions.showDefault = false;
+            break;
+    }
+    const img = $('img.expression');
+    const spriteFolderName = img.attr('data-sprite-folder-name');
+    const expression = img.attr('data-expression');
+    if (spriteFolderName && expression) {
+        await sendExpressionCall(spriteFolderName, expression, { force: true });
+    }
+    saveSettingsDebounced();
+}
 async function handleFileUpload(url, formData) {

         extension_settings.expressions.llmPrompt = DEFAULT_LLM_PROMPT;
         saveSettingsDebounced();
+    }
+    if (extension_settings.expressions.allowMultiple === undefined) {
+        extension_settings.expressions.allowMultiple = true;
+        saveSettingsDebounced();
+    }
+    if (extension_settings.expressions.showDefault && extension_settings.expressions.fallback_expression !== undefined) {
+        extension_settings.expressions.showDefault = false;
+        saveSettingsDebounced();
+    }
+}
 (async function () {

         const template = await renderExtensionTemplateAsync(MODULE_NAME, 'settings');
         $('#expressions_container').append(template);
         $('#expression_override_button').on('click', onClickExpressionOverrideButton);
-        $('#expressions_show_default').on('input', onExpressionsShowDefaultInput);
         $('#expression_upload_pack_button').on('click', onClickExpressionUploadPackButton);
-        $('#expressions_show_default').prop('checked', extension_settings.expressions.showDefault).trigger('input');
         $('#expression_translate').prop('checked', extension_settings.expressions.translate).on('input', function () {
             extension_settings.expressions.translate = !!$(this).prop('checked');
             saveSettingsDebounced();

                     if (type == 'sprite') return localEnumProviders.sprites();
                     else return [
                         ...localEnumProviders.expressions(),
-                        new SlashCommandEnumValue('#reset', 'Resets the expression (to either default or no sprite)', enumTypes.enum, '❌'),
+                        new SlashCommandEnumValue(RESET_SPRITE_LABEL, 'Resets the expression (to either default or no sprite)', enumTypes.enum, '❌'),
                     ];
                 },
             }),

public/scripts/extensions/expressions/settings.html+0 -4 Viewed

                 <input id="expression_translate" type="checkbox">
                 <span data-i18n="Translate text to English before classification">Translate text to English before classification</span>
             </label>
-            <label class="checkbox_label" for="expressions_show_default">
-                <input id="expressions_show_default" type="checkbox">
-                <span data-i18n="Show default images (emojis) if sprite missing">Show default images (emojis) if sprite missing</span>
-            </label>
             <label class="checkbox_label" for="expressions_allow_multiple" title="A single expression can have multiple sprites. Whenever the expression is chosen, a random sprite for this expression will be selected." data-i18n="[title]A single expression can have multiple sprites. Whenever the expression is chosen, a random sprite for this expression will be selected.">
                 <input id="expressions_allow_multiple" type="checkbox">
                 <span data-i18n="Allow multiple sprites per expression">Allow multiple sprites per expression</span>