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

> Learn how GPT-Image2 detects user language using navigator.language and React state. This guide details client-server implementation for localization and template selection.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-09-05

---

**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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.

```javascript
// 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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generation/status.js) at line 61, the handler extracts `req.query?.language` to determine the response locale.

```javascript
// 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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.

```javascript
// 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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) around lines 640-646.

The **`textFor`** utility selects the appropriate translation:

```javascript
// 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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generation/status.js) and [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) extract the language flag and forward it to internal services.
- **Payload Integration**: [`api/_lib/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generation/status.js)) reads it from `req.query.language`, while the generation endpoint ([`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.