Modifying the Processing Pipeline

Relevant source files

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

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

The hdrify processing pipeline is the core of the application, responsible for receiving a standard dynamic range (SDR) image from the user, applying an HDR-like effect using ImageMagick, and returning the processed image. The pipeline spans from the client-side JavaScript that handles user input to the Rust backend that orchestrates the image manipulation.

Modifying this pipeline involves understanding the data flow between the frontend and backend, the structure of the API request, and, most importantly, the ImageMagick command that performs the actual image transformation. Changes can be made to adjust the HDR effect, support different parameters, or alter the validation rules.

High-Level Architecture

The system uses a client-server architecture. The frontend is a single-page application built with vanilla HTML, CSS, and JavaScript that communicates with a Rust backend powered by the warp web server framework. The core processing is delegated to the ImageMagick command-line tool.

The following sequence diagram illustrates the end-to-end processing flow, from user interaction to receiving the final HDR image.

Sources: src/main.rs:18-140, static/script.js:100-110, 220-254

Frontend: Client-Side Logic

The client-side logic is encapsulated within the HDRify class in static/script.js. It manages the UI state, handles file uploads, and communicates with the backend API.

Sources: static/script.js

Key Components

Component	File	Description
HDRify class	static/script.js:1-356	Manages all frontend state and interactions.
hdrSlider	static/index.html:50	The <input type="range"> element that allows users to select the HDR intensity. Its min, max, and step attributes define the adjustable range.
processImage() method	static/script.js:220-281	The core frontend function that sends the image data and HDR value to the backend.
imageCache	static/script.js:5	A Map used to cache processed images on the client-side to avoid re-processing when the slider is moved to a previously selected value.

Modifying Frontend Behavior

To modify the processing pipeline from the frontend, you could:

1. Adjust the HDR Range: Change the min, max, and step attributes of the hdrSlider in static/index.html. The default range is 0.5 to 3.0.
   Sources: static/index.html:50
2. Change the API Endpoint: The endpoint is hardcoded as /upload in the fetch call within the processImage method.
   Sources: static/script.js:246
3. Alter the Request Payload: The processImage method constructs a URLSearchParams object with image and hdr_value. Additional parameters could be added here if the backend is updated to accept them.
   Sources: static/script.js:243-245

Backend: API and Processing

The backend is a warp server defined in src/main.rs. It exposes a single endpoint for image processing.

Sources: src/main.rs

API Endpoint: POST /upload

This is the only processing endpoint. It accepts application/x-www-form-urlencoded data.

Sources: src/main.rs:175-178

Request Body Parameters:

Parameter	Type	Description
image	String	Base64-encoded image data.
hdr_value	String (parsed as f32)	The HDR intensity value. Defaults to 1.5 if not provided or invalid.

Sources: src/main.rs:19-24

Response Body (ProcessResponse struct):

Field	Type	Description
success	bool	true if processing was successful, otherwise false.
message	String	A status message (e.g., "Image processed successfully" or an error description).
image_data	Option<String>	Base64-encoded processed PNG image if successful.

Sources: src/main.rs:6-11

Core Processing: handle_upload function

This asynchronous function contains the entire backend pipeline. The flow is as follows:

Sources: src/main.rs:18-140

The ImageMagick Command

The most critical part of the pipeline for modification is the ImageMagick command executed by the backend. This command defines the exact transformation applied to the image.

// src/main.rs:92-111
let output = Command::new("magick")
    .arg(input_file.path())
    .arg("-define")
    .arg("quantum:format=floating-point")
    .arg("-colorspace")
    .arg("RGB")
    .arg("-auto-gamma")
    .arg("-evaluate")
    .arg("Multiply")
    .arg(hdr_value.to_string())
    .arg("-evaluate")
    .arg("Pow")
    .arg("0.9")
    .arg("-colorspace")
    .arg("sRGB")
    .arg("-depth")
    .arg("16")
    .arg("-profile")
    .arg("2020_profile.icc")
    .arg(output_file.path())
    .output();

The arguments can be modified in src/main.rs to change the visual effect.

Command Argument Breakdown:

Argument	Purpose	Source
quantum:format=floating-point	Enables high-precision floating-point processing.	README.md:30
-colorspace RGB	Converts the image to a linear RGB colorspace.	README.md:30
-auto-gamma	Applies automatic gamma correction.	README.md:31
-evaluate Multiply <hdr_value>	Multiplies pixel brightness by the user-provided value. This is the core HDR adjustment.	README.md:32, src/main.rs:101-102
-evaluate Pow 0.9	Applies a power curve adjustment to slightly compress highlights.	README.md:33, src/main.rs:103-104
-colorspace sRGB	Converts the image back to the standard sRGB colorspace.	README.md:34
-depth 16	Sets the bit depth to 16 bits per channel.	README.md:34
-profile 2020_profile.icc	Applies the Rec. 2020 color profile for HDR displays.	README.md:35, src/main.rs:109

Sources: src/main.rs:92-111, README.md:29-35

Conclusion

Modifying the hdrify processing pipeline can be achieved at two main levels. On the frontend, developers can adjust UI controls like the HDR slider range in static/index.html or alter the API request logic in static/script.js. For more fundamental changes to the image effect itself, the backend ImageMagick command in src/main.rs is the primary target. By changing the arguments passed to magick, one can experiment with different colorspaces, gamma corrections, and other image operations to create unique visual styles beyond the default HDR effect.