1
<div class="expression_settings">
2
    <div class="inline-drawer">
3
        <div class="inline-drawer-toggle inline-drawer-header">
4
            <b data-i18n="Character Expressions">Character Expressions</b>
5
            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
6
        </div>
7

8
        <div class="inline-drawer-content">
9
            <label class="checkbox_label" for="expression_translate" title="Use the selected API from Chat Translation extension settings." data-i18n="[title]Use the selected API from Chat Translation extension settings.">
10
                <input id="expression_translate" type="checkbox">
11
                <span data-i18n="Translate text to English before classification">Translate text to English before classification</span>
12
            </label>
13
            <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.">
14
                <input id="expressions_allow_multiple" type="checkbox">
15
                <span data-i18n="Allow multiple sprites per expression">Allow multiple sprites per expression</span>
16
            </label>
17
            <label class="checkbox_label" for="expressions_reroll_if_same" title="If the same expression is used again, re-roll the sprite. This only applies to expressions that have multiple available sprites assigned." data-i18n="[title]If the same expression is used again, re-roll the sprite. This only applies to expressions that have multiple available sprites assigned.">
18
                <input id="expressions_reroll_if_same" type="checkbox">
19
                <span data-i18n="Re-roll if same expression is used again">Re-roll if same sprite is used again</span>
20
            </label>
21
            <div class="expression_api_block m-b-1 m-t-1">
22
                <label for="expression_api" data-i18n="Classifier API">Classifier API</label>
23
                <small data-i18n="Select the API for classifying expressions.">Select the API for classifying expressions.</small>
24
                <select id="expression_api" class="flex1 margin0">
25
                    <option value="99" data-i18n="[ None ]">[ None ]</option>
26
                    <option value="0" data-i18n="Local">Local</option>
27
                    <option value="1" data-i18n="Extras">Extras (deprecated)</option>
28
                    <option value="2" data-i18n="Main API">Main API</option>
29
                    <option value="3" data-i18n="WebLLM Extension">WebLLM Extension</option>
30
                </select>
31
            </div>
32
            <div class="expression_llm_prompt_block m-b-1 m-t-1">
33
                <label class="checkbox_label" for="expressions_filter_available" title="When using LLM or WebLLM classifier, only show and use expressions that have sprites assigned to them." data-i18n="[title]When using LLM or WebLLM classifier, only show and use expressions that have sprites assigned to them.">
34
                    <input id="expressions_filter_available" type="checkbox">
35
                    <span data-i18n="Filter expressions for available sprites">Filter expressions for available sprites</span>
36
                </label>
37
                <label for="expression_llm_prompt" class="title_restorable m-t-1">
38
                    <span data-i18n="LLM Prompt">LLM Prompt</span>
39
                    <div id="expression_llm_prompt_restore" title="Restore default value" class="right_menu_button">
40
                        <i class="fa-solid fa-clock-rotate-left fa-sm"></i>
41
                    </div>
42
                </label>
43
                <small data-i18n="Used in addition to JSON schemas and function calling.">Used in addition to JSON schemas and function calling.</small>
44
                <textarea id="expression_llm_prompt" type="text" class="text_pole textarea_compact autoSetHeight" rows="2" placeholder="Use &lcub;&lcub;labels&rcub;&rcub; special macro."></textarea>
45
            </div>
46
            <div class="expression_prompt_type_block flex-container flexFlowColumn">
47
                <div data-i18n="LLM Prompt Strategy" class="title_restorable">
48
                    LLM Prompt Strategy
49
                </div>
50
                <label for="expression_prompt_raw" class="checkbox_label">
51
                    <input id="expression_prompt_raw" type="radio" name="expression_prompt_type" value="raw">
52
                    <span data-i18n="Limited Context">Limited Context</span>
53
                </label>
54
                <label for="expression_prompt_full" class="checkbox_label">
55
                    <input id="expression_prompt_full" type="radio" name="expression_prompt_type" value="full">
56
                    <span data-i18n="Full Context">Full Context</span>
57
                </label>
58
            </div>
59
            <div class="expression_fallback_block m-b-1 m-t-1">
60
                <label for="expression_fallback" data-i18n="Default / Fallback Expression">Default / Fallback Expression</label>
61
                <small data-i18n="Set the default and fallback expression being used when no matching expression is found.">Set the default and fallback expression being used when no matching expression is found.</small>
62
                <select id="expression_fallback" class="flex1 margin0"></select>
63
            </div>
64
            <div class="expression_custom_block m-b-1 m-t-1">
65
                <label for="expression_custom" data-i18n="Custom Expressions">Custom Expressions</label>
66
                <small><span data-i18n="Can be set manually or with an _space">Can be set manually or with an </span><tt>/emote</tt><span data-i18n="space_ slash command."> slash command.</span></small>
67
                <div class="flex-container">
68
                    <select id="expression_custom" class="flex1 margin0"></select>
69
                    <i id="expression_custom_add" class="menu_button fa-solid fa-plus margin0" title="Add"></i>
70
                    <i id="expression_custom_remove" class="menu_button fa-solid fa-xmark margin0" title="Remove"></i>
71
                </div>
72
            </div>
73
            <div id="no_chat_expressions" data-i18n="Open a chat to see the character expressions.">
74
                Open a chat to see the character expressions.
75
            </div>
76
            <div id="open_chat_expressions">
77
                <div class="offline_mode">
78
                    <small data-i18n="You are in offline mode. Click on the image below to set the expression.">You are in offline mode. Click on the image below to set the expression.</small>
79
                </div>
80
                <label for="expression_override" data-i18n="Sprite Folder Override">Sprite Folder Override</label>
81
                <small><span data-i18n="Use a forward slash to specify a subfolder. Example: _space">Use a forward slash to specify a subfolder. Example: </span><tt>Bob/formal</tt></small>
82
                <div class="flex-container flexnowrap">
83
                    <input id="expression_override" type="text" class="text_pole" placeholder="Override folder name" />
84
                    <input id="expression_override_button" class="menu_button" type="submit" value="Submit" />
85
                </div>
86
                <div class="expression_buttons flex-container spaceEvenly">
87
                    <div id="expression_upload_pack_button" class="menu_button">
88
                        <i class="fa-solid fa-file-zipper"></i>
89
                        <span data-i18n="Upload sprite pack (ZIP)">Upload sprite pack (ZIP)</span>
90
                    </div>
91
                    <div id="expression_override_cleanup_button" class="menu_button">
92
                        <i class="fa-solid fa-trash-can"></i>
93
                        <span data-i18n="Remove all image overrides">Remove all image overrides</span>
94
                    </div>
95
                </div>
96
                <p class="hint">
97
                    <b data-i18n="Hint:">Hint:</b>
98
                    <i>
99
                        <span data-i18n="Create new folder in the _space">Create new folder in the </span><b>/characters/</b> <span data-i18n="folder of your user data directory and name it as the name of the character.">folder of your user data directory and name it as the name of the character.</span>
100
                        <span data-i18n="Put images with expressions there. File names should follow the pattern:">Put images with expressions there. File names should follow the pattern: </span><tt data-i18n="expression_label_pattern">[expression_label].[image_format]</tt>
101
                    </i>
102
                </p>
103
                <p>
104
                    <i>
105
                        <span>In case of multiple files per expression, file names can contain a suffix, either separated by a dot or a
106
                            dash.
107
                            Examples: </span><tt>joy.png</tt>, <tt>joy-1.png</tt>, <tt>joy.expressive.png</tt>
108
                    </i>
109
                </p>
110
                <h3 id="image_list_header">
111
                    <strong data-i18n="Sprite set:">Sprite set:</strong>&nbsp;<span id="image_list_header_name"></span>
112
                </h3>
113
                <div id="image_list"></div>
114

115
            </div>
116
        </div>
117
    </div>
118
    <form>
119
        <input type="file" id="expression_upload_pack" name="expression_upload_pack" accept="application/zip" hidden>
120
        <input type="file" id="expression_upload" name="expression_upload" accept="image/*" hidden>
121
    </form>
122
</div>