Core Feature: 4x Resolution Upscaling

Relevant source files

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

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

The 4x Resolution Upscaling feature allows users to enhance the quality of a generated image by increasing its resolution fourfold. This process is initiated by the user on a selected image and leverages an external Hugging Face service running the RealESRGAN_x4plus model. After the upscaling is complete, the user is presented with an interactive comparison view to approve or discard the changes before the upscaled image is saved to the history.

This system is designed to be non-destructive until the user confirms the change. It involves frontend state management to handle the UI during the process, a dedicated service to communicate with the upscaling API, and a specialized comparison component to review the result.

Sources: README.md:13, App.tsx:220-259, services/hfService.ts:200-221

Architecture and Data Flow

The upscaling process is a user-initiated flow that involves the main App component, the hfService, and the ImageComparison component. The overall flow ensures that the application remains responsive while the upscaling is processed asynchronously, and gives the user final control over applying the result.

High-Level Upscaling Flow

The following diagram illustrates the sequence of events from the user's initial click on the upscale button to the final state update.

Components and Logic

UI Interaction and State Management

The user interacts with the upscaling feature through a toolbar on the main image preview. The state of the application is managed within the App component using several state variables to control the UI and data flow.

Sources: App.tsx

State Variables

The following state variables in App.tsx are central to the upscaling feature:

State Variable	Type	Description
isUpscaling	boolean	When true, a loading spinner is shown on the upscale button, and the button is disabled.
isComparing	boolean	When true, the ImageComparison component is rendered instead of the standard image viewer.
tempUpscaledImage	string	Stores the URL of the newly upscaled image temporarily, before the user confirms the change.
currentImage	object	The main image object, which contains an isUpscaled flag to prevent re-upscaling.

Sources: App.tsx:80-82, 84, types.ts:11

State Transition Flow

The diagram below shows how the application transitions between states during the upscaling process.

Key Handler Functions in App.tsx

• handleUpscale(): Sets isUpscaling to true, calls the upscaler service, and on success, sets isComparing to true and stores the result in tempUpscaledImage.
• handleApplyUpscale(): Updates the currentImage and history with the tempUpscaledImage URL and sets the isUpscaled flag to true. It then resets the comparison state.
• handleCancelUpscale(): Resets the comparison state by setting isComparing to false and tempUpscaledImage to null, effectively discarding the upscaled image.

// File: App.tsx

const handleUpscale = async () => {
    if (!currentImage || isUpscaling) return;
    setIsUpscaling(true);
    setError(null);
    try {
        const { url: newUrl } = await upscaler(currentImage.url);
        setTempUpscaledImage(newUrl);
        setIsComparing(true);
    } catch (err: any) {
        // ... error handling
    } finally {
        setIsUpscaling(false);
    }
};

const handleApplyUpscale = () => {
    if (!currentImage || !tempUpscaledImage) return;
    const updatedImage = { 
        ...currentImage, 
        url: tempUpscaledImage, 
        isUpscaled: true 
    };
    setCurrentImage(updatedImage);
    setHistory(prev => prev.map(img => 
        img.id === updatedImage.id ? updatedImage : img
    ));
    setIsComparing(false);
    setTempUpscaledImage(null);
};

const handleCancelUpscale = () => {
    setIsComparing(false);
    setTempUpscaledImage(null);
};

Sources: App.tsx:220-259

API Service: hfService.ts

The upscaler function in hfService.ts is responsible for communicating with the external Hugging Face Gradio API.

API Endpoint and Payload

• API Base URL: https://tuan2308-upscaler.hf.space
• Endpoint: /gradio_api/call/realesrgan
• Method: POST

The function sends a payload to the API with specific parameters for the upscaling model.

Parameter	Value	Description
path	url (from input)	The URL of the original image to be upscaled.
model	'RealESRGAN_x4plus'	The specific AI model used for 4x upscaling.
denoise_strength	0.5	A parameter for the model, likely related to noise reduction.
face_enhance	false	Disables a face-specific enhancement feature.
outscale	4	Specifies the desired upscaling factor.

Sources: services/hfService.ts:5, 205-207

// File: services/hfService.ts

export const upscaler = async (url: string): Promise<{ url: string }> => {
  try {    
    const queue = await fetch(UPSCALER_BASE_API_URL + '/gradio_api/call/realesrgan', {
      method: "POST",
      headers: getAuthHeaders(),
      body: JSON.stringify({
        data: [{"path": url,"meta":{"_type":"gradio.FileData"}}, 'RealESRGAN_x4plus', 0.5, false, 4]
      })
    })
    // ... Gradio event handling
    const data = extractCompleteEventData(result);

    return { url: data[0].url };
  } catch (error) {
    console.error("Upscaler Error:", error);
    throw error;
  }
};

Sources: services/hfService.ts:200-221

Comparison View: ImageComparison.tsx

After a successful upscale, the ImageComparison component is rendered. It provides a slider to compare the original ("before") and upscaled ("after") images.

• Props: It accepts beforeImage (original URL) and afterImage (upscaled URL).
• Functionality: It overlays the beforeImage on top of the afterImage. A draggable slider controls the clipPath CSS property of the beforeImage container, revealing the afterImage underneath as the user moves the slider.
• Labels: It displays "Original" and "Upscaled 4x" labels for clarity.

Sources: components/ImageComparison.tsx:7-11, 72-115

Conclusion

The 4x Resolution Upscaling feature is a well-integrated module that significantly enhances the application's utility. It follows a robust, user-centric flow: initiate, process, compare, and confirm. The implementation correctly separates concerns, with App.tsx managing state, hfService.ts handling external communication, and ImageComparison.tsx providing a dedicated UI for reviewing the results. The use of the isUpscaled flag in the GeneratedImage data model ensures that images are not needlessly re-processed, making the feature efficient.

Sources: App.tsx, services/hfService.ts, components/ImageComparison.tsx, types.ts