How Does GPT-Image2 Detect User Language? Client-Server Implementation Guide

The GPT-Image2 skill detects user language by reading the browser's navigator.language property on the client side, storing it in React state, and passing it through every API request where the server uses it for localization and template selection.

The language detection mechanism in the freestylefly/awesome-gpt-image-2 repository provides a seamless bilingual experience supporting Chinese and English. By combining browser-based detection with systematic server-side propagation, the skill ensures that generation prompts, status messages, and UI labels match the user's preferred language without manual configuration.

Client-Side Language Detection in src/main.jsx

The detection process begins when the React application mounts. The LanguageSwitch component in src/main.jsx (lines 1198-1225) interrogates the browser environment to determine the initial locale.

Browser Locale Detection

The code checks navigator.language to determine if the user prefers Chinese (zh), defaulting to English (en) for all other locales.

// src/main.jsx (excerpt)
const browserLang = navigator.language.startsWith('zh') ? 'zh' : 'en';
const [language, setLanguage] = useState(browserLang);

React State Management

The detected value persists in the language state variable throughout the component lifecycle. Users can manually toggle this value via the LanguageSwitch UI, which updates the same state variable and triggers a re-render of localized content.

Server-Side Language Propagation

Once detected, the language preference must reach the backend services. The architecture supports this through multiple injection points depending on the endpoint.

Query Parameter Extraction

For status checking endpoints, the server reads the language from URL query parameters. In api/generation/status.js at line 61, the handler extracts req.query?.language to determine the response locale.

// api/generation/status.js (excerpt)
export default async function handler(req, res) {
  const { taskId, language } = req.query;   // ← language extracted here
  // ...
}

Request Body Parsing

For image generation requests, the language travels in the JSON payload. The api/generate-image.js file expects body.language at line 147, ensuring the generation context knows the user's language preference.

Internal Payload Construction

The core helper in api/_lib/apimart.js (lines 36-48) attaches the language flag to the generation payload sent downstream. This ensures that downstream processing—including template selection and prompt localization—respects the user's preference.

// api/_lib/apimart.js (excerpt)
// Builds payload including language field
const payload = {
  // ... other fields
  language: language
};

UI Localization Functions

With the language state available, the UI renders localized strings using helper functions defined in src/main.jsx around lines 640-646.

The textFor utility selects the appropriate translation:

// src/main.jsx (excerpt)
function textFor(value, language) {
  return value[language] || value.en || value.zh || '';
}

Similarly, localizeLabel handles more complex localization scenarios with fallback chains.

Summary

• Client Detection: src/main.jsx reads navigator.language to set the initial language state to zh or en.
• State Propagation: The frontend includes the language value in every API request, either as a query parameter or JSON body field.
• Server Handling: Backend endpoints in api/generation/status.js and api/generate-image.js extract the language flag and forward it to internal services.
• Payload Integration: api/_lib/apimart.js embeds the language into generation payloads for downstream processing.
• UI Rendering: Helper functions like textFor and localizeLabel in src/main.jsx select Chinese or English strings based on the current state.

Frequently Asked Questions

What happens if the browser language is neither Chinese nor English?

The implementation defaults to English (en) for any browser locale that does not start with zh. This fallback occurs in src/main.jsx where the code evaluates navigator.language.startsWith('zh') ? 'zh' : 'en'.

Can users manually override the detected language?

Yes. The LanguageSwitch component in src/main.jsx allows users to toggle between Chinese and English, updating the language state variable directly. This override persists for the session and affects all subsequent API calls and UI labels.

How does the backend use the language parameter beyond translation?

According to the implementation in api/_lib/apimart.js, the language field is attached to generation payloads to influence downstream processing. This includes template selection and localization of prompts, ensuring that the GPT-Image2 skill generates culturally and linguistically appropriate content.

Where is the language parameter passed in the API request?

The location depends on the endpoint. The status endpoint (api/generation/status.js) reads it from req.query.language, while the generation endpoint (api/generate-image.js) expects it in the request body as body.language. The frontend client handles placing the value in the correct location for each request type.

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