Technology Stack

Relevant source files

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

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

The hdrify application is a minimalist web service designed to convert standard dynamic range (SDR) images into high dynamic range (HDR) equivalents. The technology stack is intentionally lean, combining a high-performance Rust backend for image processing with a modern, responsive vanilla JavaScript frontend. This approach ensures fast processing while maintaining a lightweight footprint.

The core architecture involves a client-side interface for uploading and controlling parameters, a backend API endpoint that orchestrates the image manipulation, and an external command-line tool, ImageMagick, which performs the actual HDR conversion.

Sources: README.md:3, README.md:40-44

High-Level Architecture

The diagram below illustrates the overall architecture of the hdrify application, showing the flow from the user's browser to the backend service and the external ImageMagick processor.

This diagram shows the client-server interaction, where the frontend sends image data to the Rust backend, which in turn uses the ImageMagick CLI for processing and returns the result.
Sources: src/main.rs:18-24, src/main.rs:90-107, static/script.js:238-244

Backend

The backend is a lightweight web service written in Rust, built using the warp web server framework. Its primary responsibility is to receive image data from the frontend, validate it, process it using ImageMagick, and return the resulting HDR image.

Sources: src/main.rs, Cargo.toml

Framework and Dependencies

The backend relies on a small set of powerful Rust crates to function. The warp framework provides the foundation for routing and handling HTTP requests, while tokio serves as the asynchronous runtime.

Crate	Version	Purpose
warp	0.3	A composable, asynchronous web server framework.
tokio	1.0	An asynchronous runtime for writing network applications.
serde	1.0	A framework for serializing and deserializing Rust data structures.
base64	0.21	Used for encoding and decoding the image data sent from the client.
tempfile	3.0	Creates temporary files to store the input and output images for CLI processing.

Sources: Cargo.toml:5-14

API Endpoint: POST /upload

The application exposes a single API endpoint for processing images.

• Path: /upload
• Method: POST
• Request Body: application/x-www-form-urlencoded

Parameter	Type	Description
image	String	Base64-encoded string of the source image.
hdr_value	String	A floating-point number representing the HDR intensity (e.g., "1.5").

• Response Body: application/json

The endpoint returns a JSON object with the following structure:

// src/main.rs:8-13
#[derive(Debug, Serialize)]
struct ProcessResponse {
    success: bool,
    message: String,
    image_data: Option<String>, // base64 encoded HDR image
}

Sources: src/main.rs:8-13, src/main.rs:15-21, src/main.rs:175-178, static/script.js:239-243

Backend Processing Flow

The handle_upload function in src/main.rs orchestrates the entire backend process. The flow includes decoding, validation, and executing the external ImageMagick command.

This flowchart details the step-by-step logic inside the handle_upload function, from initial request validation to the final response.
Sources: src/main.rs:15-132

Frontend

The frontend is built with vanilla HTML, CSS, and JavaScript, emphasizing a modern design and user experience without the overhead of a large framework. It provides an intuitive interface for uploading images and adjusting the HDR effect in real-time.

Sources: static/index.html, static/style.css, static/script.js

Structure and Styling

The UI is defined in static/index.html and consists of a main upload area, an image display/preview region, and a controls section with a slider and buttons.

Styling is handled by static/style.css, which implements a "glass-morphism" design using backdrop-filter and gradients. It is fully responsive, adapting to smaller screens using media queries. The design also prioritizes accessibility with aria attributes and keyboard navigation support.

Sources: static/index.html:17-50, static/style.css:211-216, static/style.css:278-282

Client-Side Logic (HDRify class)

All client-side interactivity is managed by the HDRify class in static/script.js. This class encapsulates state management, event handling, and communication with the backend.

This diagram shows the main properties and methods of the HDRify JavaScript class, which controls the entire frontend user experience.
Sources: static/script.js:1-11

The following sequence diagram illustrates the interaction between the user, the HDRify class, and the backend server when an image is uploaded and processed.

This diagram shows the flow of events from file upload to real-time adjustment via the HDR slider, including client-side caching to optimize performance.
Sources: static/script.js:77-84, static/script.js:100-111, static/script.js:211-262

External Dependencies

ImageMagick

ImageMagick is the core processing engine for this application. The Rust backend invokes the magick command-line tool to perform the image transformation. The specific pipeline is based on the technique described in the HDR Emoji guide.

The command executed is constructed dynamically with the user-provided HDR value.

// src/main.rs:90-107
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();

This code snippet shows the exact ImageMagick command and arguments used to process the images.
Sources: src/main.rs:90-107, README.md:29-36

Conclusion

The technology stack of hdrify is a well-chosen combination of modern, efficient tools. The Rust backend provides a secure and high-performance API, while the vanilla JavaScript frontend delivers a responsive and interactive user experience without framework bloat. The delegation of heavy-lifting image processing to the robust and feature-rich ImageMagick CLI is a classic example of using the right tool for the job. This architecture results in a simple, maintainable, and effective application.

Sources: README.md:40-44