June 13, 2026
Heatmap Rendering Overhaul & Score Precision Update
Offscreen Canvas Alpha Compositing Fix
A persistent rendering artifact — diagonal stripe patterns in both the SSIM difference heatmap and Laplacian blur region overlay — was traced to two root causes. First, CanvasRenderingContext2D.putImageData() replaces pixel data without alpha blending, which was resolved by rendering heatmap layers onto an offscreen canvas and compositing them onto the base image via drawImage(), which performs proper alpha compositing. Second, byte-level image cropping via data.slice(0, w*h*4) caused row misalignment when source image width differed from target width; this was replaced with drawImage(img, 0, 0, w, h) for row-aligned pixel extraction. Both heatmap renderers now produce artifact-free overlays at all aspect ratios.
Blur Score Decimal Precision Upgrade
The Laplacian variance scoring function was refined from integer rounding (Math.round(score)) to one-decimal-place precision (parseFloat(score.toFixed(1))). This allows users to track subtle sharpness improvements across multiple retakes — for instance, comparing 73.2 vs. 77.8 when adjusting focus parameters. The five-tier grade labels (Excellent Sharpness through Severe Blur) now include the percentage suffix in their descriptions, and the score progress bar animates to the precise decimal position for more granular visual feedback.
Adaptive Upload Container Aspect Ratio
Upload dropzones now dynamically adjust their aspect-ratio CSS property to match the loaded image's native dimensions, replacing the fixed 16:9 default. A .has-image CSS class removes the max-height constraint and switches from dashed to solid border style when an image is loaded. The Clear button resets both containers to their default 16:9 state and removes the .has-image class for a clean return to the initial upload-ready appearance.
UI Polish & Control Bar Centering
The Run and Clear buttons in both SSIM and Blur detection modes were moved to absolute centering by converting the status message element to position: absolute; bottom: 100%, fully removing it from the flex flow. Upload containers received a dark gray (#2d2d2d) background for visual consistency with the dark theme, and the body background was softened to #f5f5f7. Result panels now share the same dark purple gradient as the hero section, replacing the previous white background.
June 10, 2026
EEAT Homepage Compliance & Content Restructure
Homepage Content Rewrite for EEAT Standards
The entire homepage text layer was rewritten to meet Google's EEAT (Experience, Expertise, Authoritativeness, Trustworthiness) quality guidelines. The Title and Meta Description were restructured with keyword-fronted phrasing targeting "image similarity comparison" and "photo blur detection" search intent. The H1 was expanded to emphasize the tool's free, private, and instant nature. The SSIM Engine section now includes academic citations (Wang, Bovik, Sheikh, Simoncelli 2004) with explicit mention of K₁=0.01/K₂=0.03 stabilization constants and 50,000+ research paper reference count. The Laplacian Blur Detection section was rewritten to position the tool against AI black-box alternatives, including the BT.601 luminance formula, the exact log-normalization function, and peer-reviewed validation sources.
Privacy Architecture Section Expansion
The privacy-architecture section was restructured from a two-paragraph format into an H2 plus three detailed cards, covering the zero-registration/no-cookies policy, air-gapped offline functionality, and alignment with 345tool's Convenient-Simple-Beautiful UX principles. The FAQ section was expanded to six items with substantially deepened answers that reference specific algorithm parameters, file format handling, EXIF orientation tag support, and developer integration paths via node-canvas and sharp.
JSON-LD Structured Data Synchronization
All six FAQPage JSON-LD question-answer pairs were synchronized with the rewritten HTML FAQ content. The WebApplication structured data description was updated to match the new meta description keyword set. The Organization and BreadcrumbList JSON-LD blocks remain locked as per 345tool satellite site policy.
June 5, 2026
Laplacian Blur Detection Engine Completion
Laplacian Kernel Implementation & Variance Scoring
The blur detection engine (blur-detector.js) was built from scratch as a self-contained vanilla JavaScript module. It converts uploaded images to grayscale using the BT.601 luminance formula (Y = 0.299R + 0.587G + 0.114B), then convolves the isotropic 4-neighbor Laplacian kernel [0,1,0; 1,-4,1; 0,1,0] across every interior pixel. The variance of the resulting Laplacian response map is log-normalized via log₁₀(variance + 1) × 35 to produce a stable 0–100 sharpness percentage score displayed with one-decimal precision.
Blue Blur-Region Heatmap & Five-Tier Classification
A spatial blur heatmap was implemented, overlaying semi-transparent blue on any pixel whose absolute Laplacian response falls below 15% of the image's maximum detected edge magnitude. Blue intensity scales inversely with Laplacian strength: deeper navy for severe blur, transparent for sharp edges. The five-tier classification system (Excellent/Good/Moderate/Significant/Severe) maps to color-coded progress bars and descriptive labels. The heatmap uses offscreen Canvas compositing with drawImage()-based alpha blending for artifact-free rendering, matching the SSIM heatmap pipeline.
Single-Image Upload Zone & Result Panel
A full-width single-image upload dropzone was built to complement the side-by-side dual upload zone used by the SSIM comparison engine. The result panel includes a circular score display, a five-tier grade label, a percentage progress bar, and a full-width Canvas heatmap container with a blue-focused legend. The Clear button resets the dropzone aspect ratio and removes the .has-image class.
June 3, 2026
Dual-Mode Toggle & UI Framework Integration
Mode Toggle Bar with Equal-Width Buttons
A dual-mode toggle bar was implemented at the top of the functional area using CSS Grid with grid-template-columns: 1fr 1fr for equal-width buttons on desktop, switching to vertical stacking on mobile. The "Compare Similarity" button activates the SSIM section; "Detect Blur" activates the Laplacian section. Only one section is visible at a time, managed by script.js's switchMode() function. Each button carries a Material Symbols icon (difference for comparison, blur_on for detection) for visual recognition.
Brand & Header Finalization
The brand was finalized as "Ai Sizs" (domain: aisizs.com). The header icon was locked to 32px with inline styles (width:32px; height:32px; flex-shrink:0; object-fit:contain) to prevent stretching in the trimmed Tailwind CSS build. Google Analytics 4 was HTML-commented pending a replacement measurement ID. The footer, about, privacy, and team pages were synchronized with the new branding. The 345tool Team JSON-LD Organization block was locked across all pages as per satellite site policy.
June 1, 2026
SSIM Similarity Engine & Platform Inception
SSIM Algorithm Implementation (similarity.js)
The core SSIM (Structural Similarity Index Measure) engine was implemented as a self-contained vanilla JavaScript module. Following the original Wang-Bovik-Sheikh-Simoncelli (2004) formulation, the algorithm decomposes paired 8×8 image patches into three independent perceptual components — luminance (mean intensity), contrast (standard deviation), and structure (normalized cross-correlation). The three scores multiply to produce a local SSIM index between -1 and 1. The kernel slides across the image at a 4-pixel stride (50% overlap) to produce smooth, artifact-free similarity maps, with stabilization constants K₁ = 0.01 and K₂ = 0.03 preventing division-by-zero in low-variance regions like sky gradients.
Dual-Image Upload & Red-Yellow Difference Heatmap
The frontend featured side-by-side drag-and-drop upload zones for Image A and Image B, each accepting PNG/JPEG/WebP files up to 5MB. When both images are loaded, images exceeding 4096px on either edge are automatically downscaled proportionally to fit within browser memory constraints. The two images are normalized to the smaller image's dimensions for valid structural comparison. After SSIM computation, a red-to-yellow difference heatmap is overlaid onto Image A: regions with SSIM ≥ 0.99 remain transparent, while lower-similarity areas receive alpha-blended red overlays proportional to divergence magnitude, transitioning through orange to yellow at moderate differences.
Zero-Server Architecture Foundation
The platform was architected with a strict zero-server footprint mandate from day one. Every computational operation — image parsing, grayscale conversion, SSIM window decomposition, Laplacian kernel convolution, heatmap alpha compositing — executes exclusively within the user's browser via the HTML5 Canvas API. The original stitcher.js (922 lines of WebP/cloud image stitching logic from the predecessor domain) was fully deprecated and replaced. All network-dependent features were removed, establishing the air-gapped architecture that defines Ai Sizs.
Contact
— E-mail: [email protected]
— Date of creation: June 1, 2026 • Last updated: June 13, 2026
We are the 345tool Team
345tool is an independent developer collective engineering elite, pure client-side, and privacy-first web utilities to replace bloated internet tools.