User Settings

The User Settings feature provides a centralized interface for users to configure application behavior. It currently supports language selection and the management of an optional Hugging Face API token. All settings are persisted client-side in the browser's localStorage, ensuring a privacy-focused approach with no backend data storage required for user configuration.

The settings are accessed via a modal window, which is controlled and rendered by the main App component.

Sources: README.md:30-31, README.md:104-112, App.tsx:128-135, components/SettingsModal.tsx

Architecture and Data Flow

The settings management is orchestrated by the main App.tsx component, which holds the state for settings values and the visibility of the settings modal. The SettingsModal.tsx component is a presentational component that receives state and handler functions as props to display and update the settings.

Sources: App.tsx:40-45, App.tsx:128-135, App.tsx:658-664, components/SettingsModal.tsx:14-15

Component Interaction

The diagram below illustrates the flow of data and actions between the main application component and the settings modal.

This diagram shows that the App component's header triggers the settings modal. The modal then uses props from App to update the language state or save the HF Token directly to localStorage.

Sources: App.tsx:45, App.tsx:460-466, App.tsx:658-664, components/SettingsModal.tsx:14-15, components/SettingsModal.tsx:25-28

Settings Options

The settings modal provides two configuration options.

Sources: components/SettingsModal.tsx:50-77, components/SettingsModal.tsx:82-93, README.md:104-106, translations.ts:3

Modal UI Structure

The SettingsModal component is structured with a header, a content area for the settings, and a footer with action buttons.

Language Management

Language selection allows users to switch between English (en) and Chinese (zh). The application state for language is managed in App.tsx and persisted to localStorage.

Initialization

On application load, the language is determined with the following priority:

1. Value from localStorage.getItem('app_language').
2. If not found, check navigator.language. If it starts with 'zh', use 'zh'.
3. Default to 'en'.

Sources: App.tsx:40-45

State Update and Persistence

The useEffect hook in App.tsx ensures that any change to the lang state is immediately saved to localStorage.

// File: App.tsx:122-124
useEffect(() => {
  localStorage.setItem('app_language', lang);
}, [lang]);

The following sequence diagram shows the process of a user changing the language.

Hugging Face Token

Users can optionally provide a Hugging Face Read Token to increase their usage quota for image generation. This token is stored securely in localStorage and is never sent to any backend other than the Hugging Face API itself.

Sources: README.md:104-112

Saving the Token

The SettingsModal component manages the token input. When the user clicks "Save", the handleSave function is triggered, which trims the input value and saves it to localStorage.

// File: components/SettingsModal.tsx:25-28
const handleSave = () => {
    localStorage.setItem('huggingFaceToken', token.trim());
    onClose();
};

Using the Token

The hfService.ts file, which is responsible for all API communication with Hugging Face, retrieves the token from localStorage before making a request. The getAuthHeaders function checks for the token and adds it to the request headers if it exists.

// File: services/hfService.ts:68-77
const getAuthHeaders = (): Record<string, string> => {
  const token = typeof localStorage !== 'undefined' ? localStorage.getItem('huggingFaceToken') : null;
  const headers: Record<string, string> = {
    "Content-Type": "application/json",
  };
  if (token) {
    headers["Authorization"] = `Bearer ${token}`;
  }
  return headers;
};

The following diagram shows the flow of saving and using the token.