How to Add a New Resolution Option to a Model's Quality Picker in Open-Generative-AI

You can add a new resolution option by extending the inputs.resolution.enum array in the target model definition within src/lib/models.js, which automatically updates the quality picker in both image and video generation studios without requiring frontend modifications.

The Open-Generative-AI platform uses a data-driven architecture where model capabilities are defined centrally in metadata files. To add a new resolution option to a model's quality picker, you only need to modify the model catalog in src/lib/models.js. The UI components dynamically read these definitions through helper functions, rendering new resolution buttons immediately after you save your changes.

How the Quality Picker Works

The quality picker is not hardcoded in the frontend. Instead, the system relies on model metadata stored in src/lib/models.js. Each model definition may include an inputs object containing a resolution field with an enum array that lists all available quality options.

When the UI renders, the helper function getResolutionsForModel extracts the enum array from model.inputs.resolution and returns it to the studio components. According to the Open-Generative-AI source code, this function processes the metadata at lines 8090-8096 in src/lib/models.js, ensuring the picker always reflects the current model configuration.

Both ImageStudio and VideoStudio components consume this data. In src/components/ImageStudio.js (lines 191-199) and src/components/VideoStudio.js (lines 291-307), the components call getResolutionsForModel to build the selectable resolution buttons dynamically.

Step-by-Step Guide to Adding a New Resolution

Follow these steps to extend the available resolutions for any model that exposes a quality picker.

Locate the Target Model Definition

Open src/lib/models.js and search for the model identifier. For example, to modify Stable Diffusion XL, search for "sdxl".

Extend the Resolution Enum Array

Within the model's inputs object, find the resolution field. Add your new resolution value to the enum array:

"enum": ["512x512", "768x768", "1024x1024", "4K"]

The enum array defines all valid options that appear in the quality picker dropdown or button group.

Set a Default Value (Optional)

If you want the new resolution to be pre-selected when users load the model, update the default field:

"default": "4K"

If omitted, the picker will use the existing default or the first item in the array.

Complete Code Example: Adding 4K to Stable Diffusion XL

Here is the full context for adding a "4K" resolution option to the SDXL model definition in src/lib/models.js:

{
  "id": "sdxl",
  "name": "Stable Diffusion XL",
  "endpoint": "sdxl",
  "family": "sdxl",
  "inputs": {
    "resolution": {
      "type": "string",
      "title": "Resolution",
      "name": "resolution",
      "enum": ["512x512", "768x768", "4K"],  // Added 4K option
      "default": "512x512"
    },

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