Astrophotography Frame Calibration & Visualization Utility

Overview

This single-file browser application allows astrophotographers to perform rapid, non-destructive calibration of their light frames. By providing a light, dark, and flat frame, users can visually inspect the efficacy of their calibration frames before committing to heavy-duty batch processing in dedicated desktop software.

Technical Architecture

• Client-Side Processing: All pixel-level math is performed using the HTML5 Canvas API and ImageData manipulation.
• No-Storage Policy: The app strictly utilizes in-memory Blob objects and ObjectURLs for image handling, ensuring zero persistence between sessions.
• Mathematical Pipeline:
  1. Light - Dark: Subtracts dark noise from the raw light frame.
  2. (Light - Dark) / Flat: Normalizes the flat frame against its mean brightness and applies it to the noise-reduced light frame.
• Dependency: Pure Vanilla JS with Tailwind CSS (via CDN) for styling.

UI/UX Design

• Aesthetic: A crisp, high-contrast, light-mode interface using a professional slate and indigo color palette. No dark mode options.
• Layout:
  • Header: Simple, clean application title with a brief "how-to" tooltip.
  • Input Panel: A three-column grid layout for dropping "Light", "Dark", and "Flat" image files. Each slot provides immediate feedback once an image is uploaded.
  • Processing Panel: A central "Process Calibration" button that becomes active only when all three images are provided. Includes a subtle CSS loading spinner.
  • Results Area: A dual-view canvas showing the "Original" vs "Calibrated" image side-by-side with a slider for comparison.

Feature List

• Instant Drag-and-Drop: Intuitive file input zones for drag-and-drop or file selection.
• Dynamic Normalization: Automatically handles flat frame normalization to prevent extreme pixel brightness spikes.
• Real-Time Canvas Rendering: Updates results instantly after processing, allowing for quick iteration.
• Download Result: One-click save of the final calibrated image in high resolution.
• Responsive Design: Automatically stacks inputs on mobile devices and spreads them horizontally on desktop screens.

Development Constraints & Directives

• Strict Light Mode: Force a white (#FFFFFF) or off-white (#F8FAFC) background with dark gray text (#1E293B). Use vibrant indigo buttons (#4F46E5).
• Zero Persistence: DO NOT use localStorage, sessionStorage, or Cookies. If the browser is refreshed, all data must clear.
• Single File: All logic, CSS, and HTML must exist within the index.html file.
• Sandboxed Compatibility: Avoid alert(), prompt(), or any blocking browser dialogs. Implement all notifications as non-intrusive UI toasts/banners.
• No Branding: Ensure no fictional brand names appear anywhere in the UI or code.