# How Aspect Ratio Selection in the UI Is Mapped to the API Payload in Open-Generative-AI

> Discover how Open-Generative-AI maps UI aspect ratio selection to the API payload. Learn the three-step flow from state variable to final payload.

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

---

**In the Open-Generative-AI codebase, the aspect ratio selected in the Studio UI is mapped to the Muapi API payload through a three-step flow: the selection is stored in the `selectedAr` state variable, injected into the request `params` object in the React components, and then copied into `finalPayload.aspect_ratio` by the `MuapiClient` before the HTTP POST request.**

The Anil-matcha/Open-Generative-AI repository provides Studio interfaces for video and image generation where users select aspect ratios from dropdown menus. Understanding how this UI selection translates to the actual API payload requires tracing the data flow from the React components through to the centralized [`muapi.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/muapi.js) client library.

## The Data Flow from UI Selection to API Payload

The aspect ratio propagation follows a clear path through three architectural layers: the React component state, the request parameter object, and finally the Muapi client that constructs the HTTP payload.

### Step 1: Capturing the Selection in UI State

When a user interacts with the aspect ratio dropdown in either the VideoStudio or ImageStudio interfaces, the selection is captured in a local state variable named `selectedAr`.

In [`src/components/VideoStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/components/VideoStudio.js), the dropdown is initialized with a default value from the model configuration and updated via a callback:

```javascript
// Default model provides a fallback
let selectedAr = defaultModel.inputs?.aspect_ratio?.default || '16:9';

// When the user clicks a ratio button, the callback updates `selectedAr`
createDropdown(
  getCurrentAspectRatios(selectedModel), // e.g. ['16:9','9:16','1:1']
  selectedAr,
  (val) => { selectedAr = val; }        // ← UI state change
);

```

The `ImageStudio` component follows the same pattern, maintaining the aspect ratio selection in local state before the API call is initiated.

### Step 2: Injecting the Aspect Ratio into Request Parameters

Immediately before the API invocation, the `selectedAr` value is transferred to the request parameter object. This occurs differently in video versus image generation flows.

In [`src/components/VideoStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/components/VideoStudio.js) at line 1068, the code explicitly assigns the aspect ratio to the params object:

```javascript
// Just before calling the API
params.aspect_ratio = selectedAr;   // VideoStudio line 1068

```

For image generation in [`src/components/ImageStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/components/ImageStudio.js) at line 1193, the aspect ratio is included in the payload object passed directly to the `muapi.generateImage` method:

```javascript
aspect_ratio: selectedAr  // ImageStudio line 1193

```

### Step 3: Building the Final API Payload in MuapiClient

The `MuapiClient` class in [`src/lib/muapi.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/lib/muapi.js) serves as the central HTTP client that constructs the final payload sent to the `https://api.muapi.ai/` endpoints. Both the `generateImage` and `generateVideo` methods check for the presence of `params.aspect_ratio` and copy it into the `finalPayload` object.

For video generation (lines 81-84):

```javascript
async generateVideo(params) {
  const finalPayload = {};
  if (params.aspect_ratio) finalPayload.aspect_ratio = params.aspect_ratio; // line 82‑84
  // …other params…
  const response = await fetch(url, { 
    method: 'POST', 
    headers: { 'Content-Type': 'application/json', 'x-api-key': key }, 
    body: JSON.stringify(finalPayload) 
  });
}

```

For image generation (lines 40-44):

```javascript
async generateImage(params) {
  const finalPayload = { prompt: params.prompt };
  if (params.aspect_ratio) finalPayload.aspect_ratio = params.aspect_ratio; // line 40‑44
  // …additional fields…
  const response = await fetch(url, { 
    method: 'POST', 
    headers: { 'Content-Type': 'application/json', 'x-api-key': key }, 
    body: JSON.stringify(finalPayload) 
  });
}

```

## Supported Aspect Ratios and Model Configuration

The available aspect ratio options are not hardcoded in the UI components. Instead, they are defined in [`src/lib/models.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/lib/models.js) within the model configuration schemas.

According to the source code at lines 2145-2182, the valid options are defined as enum arrays:

```javascript
"enum": ["16:9", "9:16", "1:1", "4:3", "3:4", "21:9"]

```

The UI components read these model definitions to populate the dropdown menus dynamically, ensuring that users can only select aspect ratios supported by the specific model they have chosen.

## Summary

- **UI State Storage**: The aspect ratio selected by the user is stored in the `selectedAr` variable within the Studio components.
- **Parameter Injection**: Before API calls, [`VideoStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/VideoStudio.js) (line 1068) assigns `params.aspect_ratio = selectedAr`, while [`ImageStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/ImageStudio.js) (line 1193) includes it in the method arguments.
- **Payload Construction**: The `MuapiClient` in [`src/lib/muapi.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/lib/muapi.js) copies `params.aspect_ratio` into `finalPayload.aspect_ratio` for both image (lines 40-44) and video (lines 81-84) generation methods.
- **Configuration Source**: Valid aspect ratio values are defined in [`src/lib/models.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/lib/models.js) (lines 2145-2182) and rendered dynamically in the UI based on the selected model.

## Frequently Asked Questions

### What variable stores the aspect ratio selection in the UI?

The aspect ratio selection is stored in a local variable named `selectedAr` within the Studio components. This variable is initialized with a default value from the model configuration and updated when the user selects a different option from the dropdown menu.

### How does the VideoStudio component pass the aspect ratio to the API?

In [`src/components/VideoStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/components/VideoStudio.js), the component assigns the `selectedAr` value to `params.aspect_ratio` at line 1068 immediately before invoking the API client. This params object is then passed to the `MuapiClient` methods, which extract the value and include it in the final HTTP payload.

### Where is the final API payload constructed?

The final API payload is constructed in [`src/lib/muapi.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/lib/muapi.js) within the `generateImage` and `generateVideo` methods. These methods create a `finalPayload` object and conditionally assign `finalPayload.aspect_ratio = params.aspect_ratio` before sending the JSON payload to the Muapi service endpoints.

### Where are the available aspect ratio options defined?

The supported aspect ratio options are defined in the model configuration schemas located in [`src/lib/models.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/lib/models.js) at lines 2145-2182. These configurations specify enum arrays containing valid ratios such as `"16:9"`, `"9:16"`, and `"1:1"`, which the UI components retrieve to populate the selection dropdowns dynamically.