Core Feature: Image Comparison

Relevant source files

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

• components/ImageComparison.tsx
• App.tsx
• services/hfService.ts
• types.ts
• README.md
• translations.ts

The Image Comparison feature provides users with an interactive, side-by-side view to compare an original AI-generated image against its 4x upscaled version. This is a crucial part of the image enhancement workflow, allowing users to visually inspect the results of the AI upscaling process before deciding to keep or discard the changes. The feature is implemented as a dedicated React component with an interactive slider that reveals the "before" and "after" states of the image.

Sources: README.md, App.tsx:219-227, components/ImageComparison.tsx

System Architecture and State Management

The entire comparison workflow is managed within the main App.tsx component. It relies on a set of state variables to control the UI, transitioning from the standard image viewer to the comparison interface.

Sources: App.tsx:82-84

Key State Variables

The following state variables in App.tsx are central to the image comparison logic:

State Variable	Type	Description
isComparing	boolean	A flag that determines whether the ImageComparison component or the standard image viewer is rendered.
currentImage	GeneratedImage | null	Holds the data for the original image being displayed (the "before" image).
tempUpscaledImage	string | null	Stores the URL of the newly upscaled image (the "after" image) while in comparison mode. This is cleared when the mode is exited.

Sources: App.tsx:82-84

State Flow

The application transitions between a standard viewing mode and a comparison mode based on user actions. The isComparing state acts as the primary trigger for this UI change.

This diagram illustrates the state transitions involved in the upscaling and comparison process.

User Flow and Interaction

The process begins when a user decides to upscale an existing image and ends when they either accept or reject the upscaled result.

1. The user views a generated image and clicks the "Upscale" button in the toolbar.
2. This action triggers the handleUpscale function in App.tsx.
3. handleUpscale sets the isUpscaling state to true and calls the upscaler service function from hfService.ts, passing the URL of the currentImage.
4. The upscaler service performs an API call to a Hugging Face space to get the 4x upscaled image.
5. Upon successful return from the API, handleUpscale receives the new image URL.
6. It then sets tempUpscaledImage to the new URL and isComparing to true.
7. The UI re-renders, replacing the standard image viewer with the ImageComparison component.
8. The user can now interact with the slider. Two new buttons, "Keep Changes" and "Discard", appear.
   • Keep Changes: Calls handleApplyUpscale, which updates the currentImage in the history with the new URL and sets its isUpscaled flag to true. The app then exits comparison mode.
   • Discard: Calls handleCancelUpscale, which simply resets isComparing to false and tempUpscaledImage to null, returning to the original image view.

Sources: App.tsx:210-244, services/hfService.ts:221-242

Sequence Diagram

The following diagram shows the sequence of events from the user's click to the final state update.

The ImageComparison Component

This is a self-contained React component responsible for rendering the interactive slider view.

*Source: components/ImageComparison.tsx

Component Properties

Prop	Type	Description
beforeImage	string	URL of the original image (left side).
afterImage	string	URL of the upscaled image (right side).
alt	string	Alt text for both images.

Source: components/ImageComparison.tsx:5-9

Rendering Strategy

The component uses a clever layering and clipping technique to create the slider effect:

1. The afterImage (upscaled) is rendered as the base layer. Its natural dimensions define the size of the container.
2. The beforeImage (original) is rendered inside a div that is absolutely positioned to perfectly overlay the base image.
3. This overlay div has its clip-path CSS property dynamically updated based on the slider's position state. The style clipPath: inset(0 ${100 - position}% 0 0) clips the "before" image from the right, revealing the "after" image underneath.
4. A slider handle is absolutely positioned using left: ${position}%`` to match the clip boundary.

This diagram shows the component's internal structure.

Interaction Logic

• A state variable position (defaulting to 50) tracks the slider's percentage from the left.
• Mouse and touch event handlers (onMouseDown, onMouseMove, onTouchMove, etc.) are attached to the main container.
• When a drag event occurs, the handleMove function calculates the new position based on the cursor's clientX relative to the component's bounding box and updates the position state, causing a re-render with the new clip-path.

Source: components/ImageComparison.tsx:13-43

Upscaling Service Integration

The upscaler function in services/hfService.ts is responsible for communicating with the external upscaling service hosted on Hugging Face.

• Endpoint: https://tuan2308-upscaler.hf.space
• API Method: It uses the Gradio API protocol, which involves two steps:
  1. A POST request to /gradio_api/call/realesrgan to queue the job. The payload includes the image URL and model parameters.
  2. A GET request to /gradio_api/call/realesrgan/{event_id} to stream the status and retrieve the final result.
• Authentication: The function uses getAuthHeaders() to include an Authorization bearer token if one is saved in localStorage, allowing for higher usage quotas.

Source: services/hfService.ts:221-242

Data Model and Persistence

When the user accepts an upscaled image, the application state is updated and persisted.

• The GeneratedImage type includes an optional boolean flag isUpscaled.
• The handleApplyUpscale function creates an updatedImage object by spreading the currentImage, replacing its url with tempUpscaledImage, and setting isUpscaled: true.
• This updatedImage then replaces the original object in the history state array.
• A useEffect hook in App.tsx automatically saves the entire history array to the browser's localStorage whenever it changes, ensuring the upscaled status is preserved across sessions.

Sources: types.ts:10, App.tsx:229-244, App.tsx:132-134