HistoryGallery Component

Relevant source files

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

• components/HistoryGallery.tsx
• App.tsx
• types.ts
• README.md
• index.html

The HistoryGallery is a React component that renders a horizontally scrollable gallery of previously generated images. It allows users to view, select, and manage their creation history. A key design aspect is its privacy-first approach; all image history is persisted locally in the browser's localStorage and is filtered to only show images created within the last 24 hours. This component does not require a backend database for user data.

The gallery is a core user-facing feature, providing a visual log of the user's session. It is integrated directly into the main App component, which manages the application's state, including the collection of generated images.

Sources: README.md:12-14, README.md:19, App.tsx:93-105, components/HistoryGallery.tsx

Architecture and Data Flow

The HistoryGallery component operates within a parent-child relationship with the main App component. The App component is the single source of truth for the image history, which it manages in its history state variable. This state is passed down to HistoryGallery as a prop.

This diagram illustrates the flow of data and actions between the App component and the HistoryGallery.

Data Source

The history state in App.tsx is initialized from localStorage under the key ai_image_gen_history. Upon application load, it retrieves the stored history and filters out any images older than one day (24 hours), ensuring the gallery remains relevant to recent activity. Any updates to the history (like adding, deleting, or modifying an image) cause the history state to be re-serialized and saved back to localStorage.

Sources: App.tsx:93-105, App.tsx:121-123

Data Model (GeneratedImage)

Each item displayed in the gallery is an object of type GeneratedImage. This data structure contains all metadata associated with a generated image.

Field	Type	Description
id	string	A unique identifier for the image, generated using crypto.randomUUID().
url	string	The URL of the generated image file.
prompt	string	The text prompt used to generate the image.
aspectRatio	string	The aspect ratio of the image (e.g., "1:1", "16:9").
timestamp	number	The Unix timestamp (in milliseconds) when the image was created.
model	string	The name of the model used for generation (e.g., 'z-image-turbo').
seed	number (optional)	The seed value used for generation.
duration	number (optional)	The time taken to generate the image, in seconds.
isBlurred	boolean (optional)	A flag to indicate if the image should be displayed with a blur effect (for NSFW content).
isUpscaled	boolean (optional)	A flag to indicate if the image has been upscaled.

Sources: types.ts:3-13, services/hfService.ts:133-142

Core Functionality

Sources: components/HistoryGallery.tsx

Image Rendering and Selection

The component iterates over the images prop array and renders a thumbnail for each GeneratedImage object.

• Selection Highlight: The currently selected image is visually distinguished with a purple ring. This is determined by comparing the image's id with the selectedId prop.
• NSFW Blur: If an image's isBlurred property is true, the thumbnail is rendered with a blur-sm CSS class.
• Click Handler: Clicking a thumbnail triggers the onSelect callback function, passing the corresponding GeneratedImage object up to the parent App component. The App component then updates its currentImage state, which causes the main preview area to display the selected image.

The following sequence diagram shows the user interaction flow for selecting an image from the gallery.

Scrolling Mechanism

The gallery is designed as a horizontal strip that can contain more images than can fit on the screen.

• Scroll Container: A div with overflow-x-auto serves as the scrollable container. A custom CSS class, .scrollbar-hide, is applied to conceal the browser's default scrollbar for a cleaner look.
• Scroll Buttons: <ChevronLeft> and <ChevronRight> buttons allow the user to scroll the gallery programmatically. The scroll() function moves the container's scrollLeft property by a fixed amount (300px) with a smooth behavior.
• Button State: The visibility of the scroll buttons is managed by the canScrollLeft and canScrollRight state variables. The checkScroll() function calculates whether scrolling is possible in either direction by inspecting the container's scrollLeft, scrollWidth, and clientWidth. This check is triggered by the onScroll event, window resizing, and when the list of images changes.

This flowchart describes the logic for updating the scroll button states.

Component Properties (Props)

The HistoryGallery component accepts the following props:

Prop Name	Type	Description
images	GeneratedImage[]	An array of image objects to be displayed in the gallery.
onSelect	(image: GeneratedImage) => void	A callback function that is invoked when a user clicks on a gallery thumbnail. It receives the selected image object as an argument.
selectedId	string (optional)	The id of the currently selected image. This is used to apply a visual highlight to the active thumbnail.

Sources: components/HistoryGallery.tsx:8-12

Conclusion

The HistoryGallery component provides an essential and intuitive way for users to interact with their generated images. It is a self-contained UI module that relies on its parent App component for state management, following standard React patterns. Its implementation demonstrates efficient handling of user interactions, dynamic styling based on state, and a robust, client-side approach to data persistence using localStorage.