Stable Diffusion: user-defined custom wand dropdown entries Reviewed-by: auto-review

61b7e8368dd7e9a28043ea22c8ad6180e1f0e00d

permissionBRICK <permissionBRICK@gmail.com>

Parents: 849a7483b7514b84dd48cb8e8e63362bfba6ff82

public/scripts/extensions/stable-diffusion/index.js+241 -1 Viewed

     USER_MULTIMODAL: 9,
     FACE_MULTIMODAL: 10,
     FREE_EXTENDED: 11,
+    CUSTOM: 12,
 };
 const multimodalMap = {

     [generationMode.FACE_MULTIMODAL]: 'Portrait (Multimodal Mode)',
     [generationMode.USER_MULTIMODAL]: 'User (Multimodal Mode)',
     [generationMode.FREE_EXTENDED]: 'Free Mode (LLM-Extended)',
+    [generationMode.CUSTOM]: 'Custom',
 };
 const triggerWords = {

     // Dedicated LLM connection profile for image-prompt generation ('' = use active model)
     prompt_generation_profile: '',
+    // User-defined custom wand dropdown entries ({ id, title, prompt })
+    custom_entries: [],
 };
 /**

         extension_settings.sd.settings_fallback_enabled = false;
+    }
+    if (!Array.isArray(extension_settings.sd.custom_entries)) {
+        extension_settings.sd.custom_entries = [];
+    }
     // Preserve an original seed if exists
     if (extension_settings.sd.original_seed >= 0) {
         extension_settings.sd.seed = extension_settings.sd.original_seed;

     toggleSourceControls();
     addPromptTemplates();
+    renderCustomEntriesList();
+    renderCustomDropdownEntries();
     registerFunctionTool();
     await loadSettingOptions();

+}
 /**
+ * Rebuilds the custom wand entries list in the settings UI.
+ */
+function renderCustomEntriesList() {
+    const container = $('#sd_custom_entries_list');
+    if (!container.length) {
+        return;
+    }
+    container.empty();
+    const entries = Array.isArray(extension_settings.sd.custom_entries) ? extension_settings.sd.custom_entries : [];
+    if (entries.length === 0) {
+        const empty = $('<small></small>')
+            .attr('data-i18n', 'No custom entries yet.')
+            .text('No custom entries yet.');
+        container.append(empty);
+        return;
+    }
+    for (const entry of entries) {
+        const preview = String(entry.prompt || '').replace(/\s+/g, ' ').trim();
+        const truncated = preview.length > 80 ? preview.slice(0, 80) + '…' : preview;
+        const titleEl = $('<div></div>').addClass('sd_custom_entry_title').text(entry.title);
+        const previewEl = $('<small></small>').addClass('sd_custom_entry_preview').text(truncated);
+        const textBlock = $('<div></div>').addClass('flex1 flexFlowColumn').append(titleEl).append(previewEl);
+        const editButton = $('<div></div>')
+            .addClass('menu_button menu_button_icon fa-solid fa-pencil')
+            .attr('data-entry-id', entry.id)
+            .attr('data-action', 'edit')
+            .attr('title', 'Edit')
+            .attr('data-i18n', '[title]Edit');
+        const deleteButton = $('<div></div>')
+            .addClass('menu_button menu_button_icon fa-solid fa-trash-can')
+            .attr('data-entry-id', entry.id)
+            .attr('data-action', 'delete')
+            .attr('title', 'Delete')
+            .attr('data-i18n', '[title]Delete');
+        const row = $('<div></div>')
+            .addClass('flex-container alignItemsCenter marginTopBot5 sd_custom_entry_row')
+            .append(textBlock)
+            .append(editButton)
+            .append(deleteButton);
+        container.append(row);
+    }
+}
+/**
+ * Generates a unique id for a custom entry.
+ * @returns {string} A unique identifier.
+ */
+function getUniqueCustomEntryId() {
+    return crypto.randomUUID?.() ?? ('ce_' + Date.now() + '_' + Math.floor(Math.random() * 1e6));
+}
+/**
+ * Opens a popup to create/edit a custom entry and returns the entered values.
+ * @param {string} title Initial title value.
+ * @param {string} prompt Initial prompt value.
+ * @returns {Promise<{title: string, prompt: string} | null>} Entered values, or null if cancelled.
+ */
+async function showCustomEntryPopup(title, prompt) {
+    const form = $('<div></div>').addClass('flex-container flexFlowColumn');
+    const titleLabel = $('<label></label>').attr('data-i18n', 'Title').text('Title');
+    const titleInput = $('<input>')
+        .addClass('text_pole')
+        .attr('type', 'text')
+        .attr('id', 'sd_custom_entry_title_input')
+        .val(title || '');
+    const promptLabel = $('<label></label>').attr('data-i18n', 'Prompt').text('Prompt');
+    const promptInput = $('<textarea></textarea>')
+        .addClass('text_pole textarea_compact')
+        .attr('id', 'sd_custom_entry_prompt_input')
+        .attr('rows', 5)
+        .val(prompt || '');
+    form.append(titleLabel).append(titleInput).append(promptLabel).append(promptInput);
+    const popup = new Popup(form, POPUP_TYPE.CONFIRM, '', { okButton: t`Save`, cancelButton: t`Cancel` });
+    const result = await popup.show();
+    if (!result) {
+        return null;
+    }
+    return {
+        title: String(titleInput.val() ?? '').trim(),
+        prompt: String(promptInput.val() ?? '').trim(),
+    };
+}
+async function onAddCustomEntryClick() {
+    const values = await showCustomEntryPopup('', '');
+    if (!values) {
+        return;
+    }
+    if (!values.title || !values.prompt) {
+        toastr.warning(t`Both a title and a prompt are required.`, t`Image Generation`);
+        return;
+    }
+    if (!Array.isArray(extension_settings.sd.custom_entries)) {
+        extension_settings.sd.custom_entries = [];
+    }
+    extension_settings.sd.custom_entries.push({
+        id: getUniqueCustomEntryId(),
+        title: values.title,
+        prompt: values.prompt,
+    });
+    saveSettingsDebounced();
+    renderCustomEntriesList();
+    renderCustomDropdownEntries();
+}
+async function onEditCustomEntryClick(id) {
+    const entries = Array.isArray(extension_settings.sd.custom_entries) ? extension_settings.sd.custom_entries : [];
+    const entry = entries.find(e => e.id === id);
+    if (!entry) {
+        return;
+    }
+    const values = await showCustomEntryPopup(entry.title, entry.prompt);
+    if (!values) {
+        return;
+    }
+    if (!values.title || !values.prompt) {
+        toastr.warning(t`Both a title and a prompt are required.`, t`Image Generation`);
+        return;
+    }
+    entry.title = values.title;
+    entry.prompt = values.prompt;
+    saveSettingsDebounced();
+    renderCustomEntriesList();
+    renderCustomDropdownEntries();
+}
+async function onDeleteCustomEntryClick(id) {
+    const entries = Array.isArray(extension_settings.sd.custom_entries) ? extension_settings.sd.custom_entries : [];
+    const index = entries.findIndex(e => e.id === id);
+    if (index === -1) {
+        return;
+    }
+    const confirmed = await callGenericPopup(t`Are you sure you want to delete the entry "${entries[index].title}"?`, POPUP_TYPE.CONFIRM, '', { okButton: t`Delete`, cancelButton: t`Cancel` });
+    if (!confirmed) {
+        return;
+    }
+    entries.splice(index, 1);
+    saveSettingsDebounced();
+    renderCustomEntriesList();
+    renderCustomDropdownEntries();
+}
+/**
  * Modifies prompt based on user inputs.
  * @param {string} prompt Prompt to refine
  * @param {object} [args] Additional arguments for refinement

+}
 function getGenerationType(prompt) {
+    // Custom wand entries use the trigger convention 'custom_<id>' and bypass
+    // the multimodal/free_extend transforms applied to the built-in triggers.
+    const trimmedPrompt = String(prompt).trim();
+    if (Array.isArray(extension_settings.sd.custom_entries)) {
+        const customEntry = extension_settings.sd.custom_entries.find(e => ('custom_' + e.id) === trimmedPrompt);
+        if (customEntry) {
+            return generationMode.CUSTOM;
+        }
+    }
     let mode = generationMode.FREE;
     for (const [key, values] of Object.entries(triggerWords)) {

+}
 function getQuietPrompt(mode, trigger) {
+    if (mode === generationMode.CUSTOM) {
+        const entry = Array.isArray(extension_settings.sd.custom_entries)
+            ? extension_settings.sd.custom_entries.find(e => ('custom_' + e.id) === String(trigger).trim())
+            : undefined;
+        return entry ? entry.prompt : trigger;
+    }
     if (mode === generationMode.FREE) {
         return trigger;
+    }

+        }
     });
-    $('#sd_dropdown [id]').on('click', function () {
+    renderCustomDropdownEntries();
+    // Use event delegation so dynamically-added custom entries also respond to clicks.
+    $('#sd_dropdown').on('click', 'li[id]', function () {
         dropdown.fadeOut(animation_duration);
         const id = $(this).attr('id');
         const idParamMap = {

         if (param) {
             console.log('doing /sd ' + param);
             generatePicture(initiators.wand, {}, param);
+            return;
+        }
+        if (id && id.startsWith('sd_custom_')) {
+            const entryId = id.slice('sd_custom_'.length);
+            console.log('doing /sd custom_' + entryId);
+            generatePicture(initiators.wand, {}, 'custom_' + entryId);
+        }
     });
+}
+/**
+ * Renders the user-defined custom entries into the wand dropdown.
+ * Removes any previously rendered custom entries first.
+ */
+function renderCustomDropdownEntries() {
+    const list = $('#sd_dropdown ul.list-group');
+    if (!list.length) {
+        return;
+    }
+    list.find('li.sd_custom_entry').remove();
+    const entries = Array.isArray(extension_settings.sd.custom_entries) ? extension_settings.sd.custom_entries : [];
+    for (const entry of entries) {
+        const li = $('<li></li>')
+            .addClass('list-group-item sd_custom_entry')
+            .attr('id', 'sd_custom_' + entry.id)
+            .text(entry.title);
+        list.append(li);
+    }
+}
 function isValidState() {
     switch (extension_settings.sd.source) {
         case sources.extras:

     $('#sd_load_preset_primary').on('click', onLoadPresetPrimaryClick);
     $('#sd_load_preset_secondary').on('click', onLoadPresetSecondaryClick);
     $('#sd_fallback_enabled').on('change', onFallbackEnabledChange);
+    $('#sd_custom_entry_add').on('click', onAddCustomEntryClick);
+    $('#sd_custom_entries_list').on('click', '[data-action]', function () {
+        const id = $(this).attr('data-entry-id');
+        const action = $(this).attr('data-action');
+        if (action === 'edit') {
+            onEditCustomEntryClick(id);
+        } else if (action === 'delete') {
+            onDeleteCustomEntryClick(id);
+        }
+    });
     $('#sd_character_prompt_block').hide();
     $('#sd_interactive_mode').on('input', onInteractiveModeInput);
     $('#sd_openai_style').on('change', onOpenAiStyleSelect);

public/scripts/extensions/stable-diffusion/settings.html+16 -0 Viewed

         <div id="sd_prompt_templates" class="inline-drawer-content">
         </div>
     </div>
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b data-i18n="Custom Wand Entries">Custom Wand Entries</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <small data-i18n="sd_custom_entries_small">Add your own entries to the image generation wand dropdown. Clicking an entry uses its prompt as the LLM instruction, just like the built-in entries.</small>
+            <div class="flex-container marginTopBot5">
+                <div id="sd_custom_entry_add" class="menu_button menu_button_icon">
+                    <i class="fa-solid fa-plus"></i>
+                    <span data-i18n="Add entry">Add entry</span>
+                </div>
+            </div>
+            <div id="sd_custom_entries_list"></div>
+        </div>
+    </div>
 </div>

public/scripts/extensions/stable-diffusion/style.css+14 -0 Viewed

     top: 0;
     transform: translateX(-50%);
+}
+.sd_custom_entry_row .sd_custom_entry_title {
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.sd_custom_entry_row .sd_custom_entry_preview {
+    opacity: 0.7;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}