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+132 -85 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(namespriteFolderName, expression) {
     const vnContainer = $('#visual-novel-wrapper');
     await visualNovelRemoveInactive(vnContainer);
     const setSpritePromises = await visualNovelSetCharacterSprites(vnContainer, namespriteFolderName, 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()extension_settings.expressions.fallback_expression)) {
             expression = getFallbackExpression()extension_settings.expressions.fallback_expression;
+        }
         await sendExpressionCall(spriteFolderName, expression, { force: force, vnMode: vnMode });

 /**
  * Update the expression for the given character.
+ *
  * @param {string} namespriteFolderName 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(namespriteFolderName, expression, { force = false, vnMode = null, overrideSpriteFile = null } = {}) {
     lastExpression[namespriteFolderName.split('/')[0]] = expression;
     if (vnMode === null) {
         vnMode = isVisualNovelMode();
+    }
     if (vnMode) {
         await updateVisualNovelMode(namespriteFolderName, expression);
     } else {
         setExpression(namespriteFolderName, 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'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.
  */
 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()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()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()extension_settings.expressions.fallback_expression;
+                }
                 const expressionsList = await getExpressionsList();

@@ -1014,9 +994,9 @@ export async function getExpressionLabel(text, expressionsApi = extension_settin
1014	994	} break;
1015	995	}
1016	996	} catch (error) {
1017	997	toastr.infoerror('Could not classify expression. Check the console or your backend for more information.');
1018	998	console.error(error);
1019	999	return getFallbackExpression()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 = expressionvalue;
         option.text = expressionlabel;
         option.selected = expression == fallbackExpressionisSelected;
         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
  */
 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 (error) {
                 console.debug('Expression image error', spriteFile.imageSrc, error);
                 $(this).attr('src', '');
                 $(this).off('error');
                 if (force && extension_settings.expressions.showDefault) {
                     setDefaultsetDefaultEmojiForImage(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 {
             setNonesetNoneForImage(img, expression);
+        }
         console.debug('Expression unset - No sprite found', { expression: expression });
+    }
 -    function setDefault() {
 +    document.getElementById('expression-holder').style.display = '';
 -        console.debug('setting default expression');
 +}
 -        const defImgUrl = `/img/default-expressions/${expression}.png`;
++
 -        //console.log(defImgUrl);
 +/**
 -        img.attr('src', defImgUrl);
 + * Sets the default expression image for the given image element and expression
 -        img.addClass('default');
 + * @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 setNone() {
 + */
 -        console.debug('setting no expression');
 +function setDefaultEmojiForImage(img, expression) {
 -        img.attr('src', '');
 +    if (extension_settings.expressions.custom?.includes(expression)) {
 -        img.removeClass('default');
 +        console.debug(`Can't set default emoji for a custom expression (${expression}). setting to ${DEFAULT_FALLBACK_EXPRESSION} instead.`);
 +        expression = DEFAULT_FALLBACK_EXPRESSION;
+    }
 -    document.getElementById('expression-holder').style.display = '';
 +    const defImgUrl = `/img/default-expressions/${expression}.png`;
 +    img.attr('src', defImgUrl);
 +    img.attr('data-expression', expression);
 +    img.attr('data-sprite-filename', null);
 +    img.addClass('default');
 +}
++
 +/**
 + * 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');
+}
 function onClickExpressionImage() {

     // a-z, 0-9, dashes and underscores only
     if (!/^[a-z0-9-_]+$/.test(expressionName)) {
         toastr.infowarning('Invalid custom expression name provided', 'Add Custom Expression');
         return;
+    }
+-
 -    // Check if expression name already exists in default expressions
     if (DEFAULT_EXPRESSIONS.includes(expressionName)) {
         toastr.infowarning('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.infowarning('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()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}'.`, 'Remove Custom Expression');
         extension_settings.expressions.fallback_expression = DEFAULT_FALLBACK_EXPRESSION;
+    }
     await renderAdditionalExpressionSettings();

+    }
+}
 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'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>