SillyTavern/public/scripts/extensions/expressions/settings.html

<div class="expression_settings">
    <div class="inline-drawer">
        <div class="inline-drawer-toggle inline-drawer-header">
            <b>Character Expressions</b>
            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
        </div>

        <div class="inline-drawer-content">
            <label class="checkbox_label" for="expression_translate" title="Use the selected API from Chat Translation extension settings.">
                <input id="expression_translate" type="checkbox">
                <span>Translate text to English before classification</span>
            </label>
            <label class="checkbox_label" for="expressions_show_default">
                <input id="expressions_show_default" type="checkbox">
                <span>Show default images (emojis) if sprite missing</span>
            </label>
            <label id="image_type_block" class="checkbox_label" for="image_type_toggle">
                <input id="image_type_toggle" type="checkbox">
                <span>Image Type - talkinghead (extras)</span>
            </label>
            <div class="expression_api_block m-b-1 m-t-1">
                <label for="expression_api">Classifier API</label>
                <small>Select the API for classifying expressions.</small>
                <select id="expression_api" class="flex1 margin0" data-i18n="Expression API" placeholder="Expression API">
                    <option value="0">Local</option>
                    <option value="1">Extras</option>
                    <option value="2">LLM</option>
                </select>
            </div>
            <div class="expression_llm_prompt_block m-b-1 m-t-1">
                <label for="expression_llm_prompt" class="title_restorable">
                    <span>LLM Prompt</span>
                    <div id="expression_llm_prompt_restore" title="Restore default value" class="right_menu_button">
                        <i class="fa-solid fa-clock-rotate-left fa-sm"></i>
                    </div>
                </label>
                <small>Will be used if the API doesn't support JSON schemas.</small>
                <textarea id="expression_llm_prompt" type="text" class="text_pole textarea_compact" rows="2" placeholder="Use &lcub;&lcub;labels&rcub;&rcub; special macro."></textarea>
            </div>
            <div class="expression_fallback_block m-b-1 m-t-1">
                <label for="expression_fallback">Default / Fallback Expression</label>
                <small>Set the default and fallback expression being used when no matching expression is found.</small>
                <select id="expression_fallback" class="flex1 margin0" data-i18n="Fallback Expression" placeholder="Fallback Expression"></select>
            </div>
            <div class="expression_custom_block m-b-1 m-t-1">
                <label for="expression_custom">Custom Expressions</label>
                <small>Can be set manually or with an <tt>/emote</tt> slash command.</small>
                <div class="flex-container">
                    <select id="expression_custom" class="flex1 margin0"><select>
                    <i id="expression_custom_add" class="menu_button fa-solid fa-plus margin0" title="Add"></i>
                    <i id="expression_custom_remove" class="menu_button fa-solid fa-xmark margin0" title="Remove"></i>
                </div>
            </div>
            <div id="no_chat_expressions">
                Open a chat to see the character expressions.
            </div>
            <div id="open_chat_expressions">
                <div class="offline_mode">
                    <small>You are in offline mode. Click on the image below to set the expression.</small>
                </div>
                <label for="expression_override">Sprite Folder Override</label>
                <small>Use a forward slash to specify a subfolder. Example: <tt>Bob/formal</tt></small>
                <div class="flex-container flexnowrap">
                    <input id="expression_override" type="text" class="text_pole" placeholder="Override folder name" />
                    <input id="expression_override_button" class="menu_button" type="submit" value="Submit" />
                </div>
                <h3 id="image_list_header">
                    <strong>Sprite set:</strong>&nbsp;<span id="image_list_header_name"></span>
                </h3>
                <div id="image_list"></div>
                <div class="expression_buttons flex-container spaceEvenly">
                    <div id="expression_upload_pack_button" class="menu_button">
                        <i class="fa-solid fa-file-zipper"></i>
                        <span>Upload sprite pack (ZIP)</span>
                    </div>
                    <div id="expression_override_cleanup_button" class="menu_button">
                        <i class="fa-solid fa-trash-can"></i>
                        <span>Remove all image overrides</span>
                    </div>
                </div>
                <p class="hint"><b>Hint:</b> <i>Create new folder in the <b>/characters/</b> folder of your user data directory and name it as the name of the character.
                Put images with expressions there. File names should follow the pattern: <tt>[expression_label].[image_format]</tt></i></p>
            </div>
        </div>
    </div>
    <form>
        <input type="file" id="expression_upload_pack" name="expression_upload_pack" accept="application/zip" hidden>
        <input type="file" id="expression_upload" name="expression_upload" accept="image/*" hidden>
    </form>
</div>