# How the Prompt Enhancer Combines Base Prompts with Enhancement Tags

> Discover how the prompt enhancer expertly combines base prompts and enhancement tags using comma separators within the updateEnhancedPrompt function. Learn prompt engineering techniques.

- Repository: [Anil Chandra Naidu Matcha/Open-Generative-AI](https://github.com/Anil-matcha/Open-Generative-AI)
- Tags: how-to-guide
- Published: 2026-04-24

---

**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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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.

```javascript
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.

```javascript
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 `', '`.

```javascript
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:

```html
<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:

```javascript
// 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:

```javascript
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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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.