How the Prompt Enhancer Combines Base Prompts with Enhancement Tags

The prompt enhancer filters empty values and joins the base prompt with selected enhancement tags using comma separators inside the updateEnhancedPrompt function.

The prompt enhancer in the Anil-matcha/Open-Generative-AI repository streamlines the creation of detailed image generation prompts by merging user‑typed descriptions with curated enhancement tags. Implemented in src/components/ImageStudio.js, this utility consolidates inputs into a single, comma‑separated string suitable for direct use in generative AI workflows.

The Core Logic in ImageStudio.js

The merging functionality resides in the updateEnhancedPrompt function defined at lines 35‑39 of src/components/ImageStudio.js. This function orchestrates the combination of two data sources: the raw text from the base prompt input field and the active tags stored in the enhanceSelectedTags Set.

Step‑by‑Step Merge Process

Step 1: Retrieving the Base Prompt

The function first accesses the DOM element with ID base-prompt-input and extracts its trimmed value. If the input is empty, it defaults to an empty string to prevent undefined errors during concatenation.

const base = basePromptInput?.value?.trim() || '';

Step 2: Aggregating Enhancement Tags

Selected tags are maintained in a JavaScript Set named enhanceSelectedTags. When users toggle tag buttons (handled in lines 52‑66), the Set updates automatically. The function converts the Set to an array and joins its elements with comma separators.

const tags = Array.from(enhanceSelectedTags).join(', ');

Step 3: Concatenating the Final String

The function creates an array containing both the base prompt and the tags string, filters out any empty entries to avoid stray commas, and joins the remaining elements with ', '.

const enhanced = [base, tags].filter(p => p).join(', ');

This approach ensures that selecting tags without a base prompt (or vice versa) still yields clean output without leading or trailing commas.

Complete Implementation Example

The following HTML structure demonstrates the input field, tag buttons, and display area referenced in the source code:

<input id="base-prompt-input" placeholder="Enter base prompt..." />
<button class="enhance-tag-btn" data-tag="warm lighting">warm lighting</button>
<button class="enhance-tag-btn" data-tag="high detail">high detail</button>

<div id="enhanced-prompt-display"></div>

When a user types "A portrait of a futuristic city" and selects both buttons, the updateEnhancedPrompt function generates:

A portrait of a futuristic city, warm lighting, high detail

Programmatic Usage

You can simulate user interactions and retrieve the combined prompt programmatically:

// Populate the base prompt
const baseInput = document.querySelector('#base-prompt-input');
baseInput.value = 'A dragon soaring above mountains';

// Select tags by triggering click events
document.querySelector('[data-tag="epic"]').click();
document.querySelector('[data-tag="cinematic"]').click();

// Retrieve the combined result
const display = document.querySelector('#enhanced-prompt-display');
console.log(display.textContent);
// Output: "A dragon soaring above mountains, epic, cinematic"

Applying the Enhanced Prompt to Generation

The combined string can be transferred to the main generation textarea using a click handler:

document.querySelector('#use-enhanced-btn').onclick = () => {
    const enhanced = document.querySelector('#enhanced-prompt-display').textContent;
    document.querySelector('#main-prompt-textarea').value = enhanced;
};

Summary

• The updateEnhancedPrompt function in src/components/ImageStudio.js (lines 35‑39) handles all prompt enhancement logic.
• It retrieves the base text from #base-prompt-input and aggregates tags from the enhanceSelectedTags Set.
• The merge uses [base, tags].filter(p => p).join(', ') to eliminate empty values and ensure proper comma separation.
• Toggle handlers at lines 52‑66 manage the Set updates when users click tag buttons.

Frequently Asked Questions

How does the prompt enhancer handle empty inputs?

The function filters empty strings using filter(p => p) before joining, so entering only a base prompt without tags (or only tags without a base prompt) returns the non‑empty portion without stray commas.

What data structure stores the selected enhancement tags?

The code uses a JavaScript Set named enhanceSelectedTags to store active tags, ensuring unique values and providing O(1) lookup efficiency when toggling buttons on or off.

Where is the combined prompt displayed in the UI?

The final string renders inside the DOM element with ID enhanced-prompt-display, which updates reactively whenever users modify the base input or toggle tag selections.

Can I use the prompt enhancer without the base prompt field?

Yes. If basePromptInput is empty or undefined, the function defaults to an empty string, and the filter operation ensures only the joined tags appear in the output, creating a valid comma‑separated list of enhancements.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}