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

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 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, the dropdown is initialized with a default value from the model configuration and updated via a callback:

// 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 at line 1068, the code explicitly assigns the aspect ratio to the params object:

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

For image generation in src/components/ImageStudio.js at line 1193, the aspect ratio is included in the payload object passed directly to the muapi.generateImage method:

aspect_ratio: selectedAr  // ImageStudio line 1193

Step 3: Building the Final API Payload in MuapiClient

The MuapiClient class in 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):

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):

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 within the model configuration schemas.

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

"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 (line 1068) assigns params.aspect_ratio = selectedAr, while ImageStudio.js (line 1193) includes it in the method arguments.
• Payload Construction: The MuapiClient in 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 (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, 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 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 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.

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