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

> Easily add a new resolution option to Open-Generative-AI's quality picker by extending the inputs resolution enum. Update models js to automatically refresh image and video studios.

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

---

**You can add a new resolution option by extending the `inputs.resolution.enum` array in the target model definition within [`src/lib/models.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/components/ImageStudio.js) (lines 191-199) and [`src/components/VideoStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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:

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

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

```javascript
{
  "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"
    },