How to Add a New Style Preset to ImageStudio's Advanced Options

To add a new style preset to ImageStudio, edit the STYLE_PRESETS array in src/components/ImageStudio.js and append your custom style string—the UI automatically generates a button and handles clicks without additional code.

The Open-Generative-AI repository's ImageStudio component generates its style preset buttons dynamically from a single JavaScript array. By modifying this array in the core component file, you can extend the available artistic styles without touching the event handlers or rendering logic.

Understanding ImageStudio's Style Preset Architecture

ImageStudio follows a data-driven UI pattern where the style options are decoupled from the presentation layer. The preset list, button generation, and click handling operate through three connected layers in src/components/ImageStudio.js.

Where Presets Are Defined

The source of truth for all style presets lives in a constant array declared near line 360:

// src/components/ImageStudio.js (line ~360)
const STYLE_PRESETS = ['None', 'Photorealistic', 'Anime', 'Cinematic', 'Oil Painting', 'Watercolor', 'Digital Art', 'Concept Art', 'Cyberpunk'];

According to the Open-Generative-AI source code, this array is the only location where the preset list is hardcoded. The component imports no external configuration files for style presets, making inline editing the standard extension method.

How Presets Render in the UI

The advanced options panel generates buttons by mapping over STYLE_PRESETS at line 378:

// src/components/ImageStudio.js (line ~378)
${STYLE_PRESETS.map(s => 
   `<button class="style-preset-btn" data-style="${s}">${s}</button>`
).join('')}

Because the UI iterates over the array directly, any string you add to STYLE_PRESETS immediately appears as a clickable button with the text label and data-style attribute set automatically.

Step-by-Step Guide to Adding a Custom Style Preset

Follow these steps to extend ImageStudio with a new artistic style:

1. Open src/components/ImageStudio.js in your editor.

2. Locate the STYLE_PRESETS declaration around line 360.

3. Append your new preset string to the array, preserving the existing order:

   const STYLE_PRESETS = [
       'None',
       'Photorealistic',
       'Anime',
       'Cinematic',
       'Oil Painting',
       'Watercolor',
       'Digital Art',
       'Concept Art',
       'Cyberpunk',
       'Fantasy'  // <- Your new preset
   ];

4. Save the file. If running the Vite development server, the application hot-reloads and displays a "Fantasy" button in the Style Preset panel immediately.

5. Verify functionality by clicking the new button—the selection logic requires no modifications.

Code Implementation Details

The click handler at lines 688-696 reads the data-style attribute generically, allowing any preset value to flow through to the generation logic:

// src/components/ImageStudio.js (lines ~688-696)
advancedPanel.querySelectorAll('.style-preset-btn').forEach(btn => {
    btn.onclick = () => {
        selectedStyle = btn.dataset.style;  // Captures "Fantasy" or any new value
        // Update UI state...
    };
});

This implementation means zero changes are required to the event handling code when adding presets. The selectedStyle variable receives the string value directly from the DOM, ensuring immediate compatibility with custom styles.

Customizing the Visual Appearance

While the default styling applies automatically to all preset buttons, you can target specific presets via CSS using the data-style attribute:

/* Target the Fantasy preset specifically */
.style-preset-btn[data-style="Fantasy"] {
    background: linear-gradient(45deg, #8B5CF6, #C4B5FD);
    border-color: #7C3AED;
}

The studio.css file (or your Tailwind configuration) controls the base appearance, but attribute selectors provide per-preset customization without modifying the JavaScript.

Summary

• ImageStudio defines available presets in the STYLE_PRESETS array located in src/components/ImageStudio.js (line ~360).
• The UI renders buttons automatically via Array.map(), ensuring any array modification immediately updates the interface.
• Click handlers reference btn.dataset.style, making them compatible with any preset value without code changes.
• No additional JavaScript, state management, or build steps are required to add new style options.

Frequently Asked Questions

Where is the STYLE_PRESETS array located in the codebase?

The STYLE_PRESETS array is defined in src/components/ImageStudio.js around line 360 according to the Open-Generative-AI source code. This is the single location where all preset strings are declared before being mapped to UI buttons.

Do I need to modify the click handler when adding a new preset?

No. The click handler at lines 688-696 reads the data-style attribute dynamically using btn.dataset.style, so it automatically recognizes any new preset added to the STYLE_PRESETS array without requiring code changes.

Will the new preset button inherit the existing styling?

Yes. All preset buttons receive the same base CSS classes during the map operation at line 378. If you need custom visuals for a specific preset, use a CSS attribute selector like [data-style="YourPresetName"] to target it specifically.

Can I remove existing presets without breaking the application?

Yes. Removing entries from STYLE_PRESETS safely eliminates their buttons from the UI. Since the click handler only processes buttons that exist in the DOM, there are no orphaned event listeners or broken references.

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