Component Overview

Relevant source files

The following files were used as context for generating this wiki page:

• components/CustomSelect.tsx
• components/HistoryGallery.tsx
• components/ImageComparison.tsx
• components/SettingsModal.tsx
• App.tsx
• types.ts
• services/hfService.ts

The 1mage application is built using React and TypeScript, following a component-based architecture. The user interface is broken down into distinct, reusable components, each with a specific responsibility. The main App.tsx component acts as the central orchestrator, managing the application's state and data flow, and composing the smaller UI components to build the final user experience.

This structure promotes modularity and maintainability. State management is centralized in App.tsx and passed down to child components as props. User interactions within child components are communicated back to the App component via callback functions, which then update the state and trigger re-renders. All data types, such as the structure for a generated image, are defined in types.ts for consistency across the application.

Core Architecture

The application's architecture revolves around the App.tsx component, which serves as the container for all other UI elements and the single source of truth for the application's state.

Component Hierarchy

The following diagram illustrates the primary component hierarchy, with App at the root.

This diagram shows how App.tsx composes the main layout and conditionally renders components like ImageComparison or SettingsModal based on application state.

Sources: App.tsx:501-867

State Management in App.tsx

App.tsx uses React's useState hook to manage all critical application state. This includes user inputs, API call status, and the collection of generated images.

Key state variables include:

• prompt: The user-provided text prompt.
• model: The selected AI model (z-image-turbo or qwen-image-fast).
• aspectRatio: The desired aspect ratio for the image.
• history: An array of GeneratedImage objects, persisted to localStorage.
• currentImage: The currently selected/displayed image object.
• isLoading, isOptimizing, isUpscaling: Boolean flags for tracking asynchronous operations.
• isComparing: A boolean to toggle the ImageComparison view.
• showSettings: A boolean to control the visibility of the SettingsModal.

Sources: App.tsx:68-96

UI Components

The application's UI is constructed from several specialized React components.

CustomSelect.tsx

This is a reusable, styled dropdown component used for selecting the AI model and aspect ratio. It is designed to be generic and can be configured via props.

Props

Prop	Type	Description
label	string	The text label displayed above the select input.
value	string	The currently selected value.
onChange	(value: string) => void	Callback function triggered when a new option is selected.
options	Option[]	An array of { value: string, label: string } objects to populate the dropdown.
icon	React.ReactNode	An optional icon to display inside the select button.
headerContent	React.ReactNode	Optional content to display in the header, next to the label. Used for the "HD" toggle.

Sources: components/CustomSelect.tsx:7-17, App.tsx:598-636

HistoryGallery.tsx

This component renders a horizontal, scrollable gallery of previously generated images. It allows users to view and select from their creation history.

Props

Prop	Type	Description
images	GeneratedImage[]	An array of image objects to display.
onSelect	(image: GeneratedImage) => void	Callback function executed when an image is clicked.
selectedId	string	The ID of the currently selected image, used for highlighting.

The component includes logic to check for scrollability and provides navigation buttons to scroll left or right. Images are lazy-loaded for performance.

Sources: components/HistoryGallery.tsx:5-9, App.tsx:859-863

ImageComparison.tsx

This component provides an interactive view to compare two images—typically the original and an upscaled version—with a draggable slider.

Props

Prop	Type	Description
beforeImage	string	The URL of the image to display on the left side of the slider.
afterImage	string	The URL of the image to display on the right side of the slider.
alt	string	The alt text for the images.

It works by overlaying the "before" image on top of the "after" image and using CSS clip-path to reveal the underlying image as the user drags the slider.

Sources: components/ImageComparison.tsx:4-8, App.tsx:714-720

SettingsModal.tsx

A modal dialog for application settings. It allows the user to change the language and provide an optional Hugging Face API token, which is then saved to localStorage.

Props

Prop	Type	Description
isOpen	boolean	Controls the visibility of the modal.
onClose	() => void	Callback to close the modal.
lang	Language	The current application language.
setLang	(lang: Language) => void	Callback to update the application language.
t	any	The translation object for displaying text in the correct language.

The modal retrieves the Hugging Face token from localStorage when it opens and saves it back upon clicking "Save".

Sources: components/SettingsModal.tsx:5-11, App.tsx:866-872

Data Flow and Interactions

Image Generation Flow

The following sequence diagram shows the process of generating a new image.

This flow demonstrates how the UI triggers a service call, updates its state to reflect loading, and then processes the result to update the view and history.

Sources: App.tsx:173-196, services/hfService.ts:182-191

Image Upscaling Flow

When a user decides to upscale an image, a similar flow is initiated, which results in the ImageComparison component being displayed.

This process first fetches the upscaled image and enters a "comparison mode". The original image data is only updated in the application state and localStorage after the user explicitly confirms the change.

Sources: App.tsx:216-233, App.tsx:235-251, services/hfService.ts:193-212

Data Structures

The core data structure for the application is GeneratedImage, defined in types.ts.

GeneratedImage Interface

This interface defines the shape of the object used to store information about each generated image.

export interface GeneratedImage {
    id: string;
    url: string;
    prompt: string;
    aspectRatio: string;
    timestamp: number;
    model: string;
    seed?: number;
    duration?: number;
    isBlurred?: boolean;
    isUpscaled?: boolean;
}

Sources: types.ts:3-14

This data is stored in an array in the history state variable within App.tsx and persisted in the browser's localStorage under the key ai_image_gen_history.

Sources: App.tsx:98-112, App.tsx:124-126