Frontend API Client

Relevant source files

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

• static/script.js
• src/main.rs
• static/index.html
• static/style.css
• README.md
• Cargo.toml

The Frontend API Client is a vanilla JavaScript application responsible for managing the user interface, handling user interactions, and communicating with the backend server to process images. Encapsulated within the HDRify class, it provides a dynamic and responsive experience for converting SDR images to HDR. The client handles file uploads via drag-and-drop or file selection, validates inputs, sends processing requests to the API, and updates the UI in real-time based on the results.

The client is designed to be self-contained, managing its own state, including the original image data, processed image cache, and UI visibility. It interacts with a single backend endpoint (/upload) to perform the image manipulation, providing a seamless flow from image selection to downloading the final HDR-processed result.

Sources: static/script.js, static/index.html, src/main.rs

Architecture and Core Components

The frontend is built around the HDRify JavaScript class, which acts as the central controller for the application's logic and UI manipulation. It is instantiated once the DOM is fully loaded.

Sources: static/script.js:2-10, 421-432

HDRify Class Diagram

This diagram shows the structure of the HDRify class, including its properties for state management and methods for handling events and API calls.

Key UI Components

The client interacts with a set of specific HTML elements defined in index.html to create the user experience.

Element ID	Description
uploadArea	The initial drag-and-drop area and click target for uploading an image.
imageInput	A hidden file input element used to select image files.
imageDisplay	A container for the processed image and processing overlay. Hidden by default.
resultImage	The <img> tag that displays the original, blurred, and final processed images.
processingOverlay	A spinner overlay shown during API requests.
controls	A container for the HDR slider, download button, and reset button. Hidden by default.
hdrSlider	A range input (<input type="range">) for adjusting the HDR intensity from 0.5 to 3.0.
hdrValue	A <span> that displays the current value of the HDR slider.
downloadButton	An <a> tag that is dynamically updated to allow downloading the processed image.
resetButton	A button to reset the application to its initial state.
error	A container for displaying error messages to the user.

Sources: static/index.html:20-61, static/script.js:11-24

State Management and UI Flow

The client manages the UI state by showing and hiding elements based on user actions. The primary flow transitions the view from the upload area to the image display and controls.

This state machine diagram illustrates the primary UI states and the transitions between them.

The transitionToImageView() function manages the visual switch from the upload screen to the image processing view. It uses opacity and display style changes to create a smooth fade effect. The reset() function reverses this process, returning the UI to its initial state.

Sources: static/script.js:206-227, 368-401

API Communication

All image processing is handled by a single backend endpoint. The frontend client is responsible for preparing the data, sending the request, and handling the response.

Endpoint Definition

Property	Value
Path	/upload
Method	POST
Request	application/x-www-form-urlencoded
Response	application/json

Sources: src/main.rs:172-175, static/script.js:296-301

Request Payload

The client sends a POST request with the following form-urlencoded parameters:

Parameter	Type	Description
image	String	The base64-encoded image data, without the data:image/...;base64, prefix.
hdr_value	String	The desired HDR intensity value (e.g., "1.5").

Sources: src/main.rs:16-21, static/script.js:293-295

Response Payload

The server responds with a JSON object conforming to the ProcessResponse structure.

Field	Type	Description
success	Boolean	true if the image was processed successfully, otherwise false.
message	String	A status message describing the outcome (e.g., "Image processed successfully" or an error).
image_data	String	A base64-encoded string of the processed PNG image. Present only on success.

Sources: src/main.rs:8-12

Image Processing Sequence

The following diagram shows the sequence of events when a user uploads an image and adjusts the HDR slider.

Client-Side Features

Input Validation

Before sending data to the server, the client performs validation in the handleFile method:

• File Type: Ensures the file is one of the supported types: image/jpeg, image/jpg, image/png, or image/webp.
• File Size: Verifies the file size does not exceed 10MB.

This client-side check prevents unnecessary API calls with invalid data.

Sources: static/script.js:179-204, static/index.html:23

Performance Caching

To improve performance and reduce server load, the client maintains a local cache of processed images. The imageCache is a Map where the key is the HDR value (e.g., "1.5") and the value is the base64-encoded image data.

When the user adjusts the HDR slider, the processImage function first checks if a result for the selected hdrValue already exists in the cache. If a cached version is found, it is displayed immediately without making a new API request. The cache is cleared whenever a new image is uploaded.

Sources: static/script.js:5, 241-259, 321-322

Error Handling

The client provides user feedback for both client-side and server-side errors via the showError function.

• Client-side errors: Invalid file type, file too large, or failure to read the file.
• Server-side errors: The message field from the API's JSON response is displayed if success is false.
• Network errors: A generic "Could not connect to server" message is shown if the fetch call fails.

When an error occurs during processing, the client falls back to displaying the original, unprocessed image using the fallbackToOriginal method.

Sources: static/script.js:184-191, 195-202, 335-343, 347-356, 403-412