Add A10city Image Editor - WebAssembly-based browser image processor - #1
Merged
Merged
Conversation
Convert, resize, crop, straighten and adjust images entirely in the browser. Nothing is uploaded: files are decoded, edited and re-encoded inside a Web Worker in the tab. Engine (crates/imagecore, Rust -> wasm32-unknown-unknown): - codec: read PNG/JPEG/WebP/GIF/TIFF/BMP/ICO/TGA/QOI/PNM/HDR/Farbfeld, write all but HDR. EXIF orientation applied on open; formats without an alpha channel are flattened onto a caller-chosen matte. - ops: SIMD resampling via fast_image_resize across seven kernels, affine warp and separable Gaussian via imageproc, tonal operators. - pipeline: edits are declarative and replayed from the pristine source, so there is exactly one resample between the original pixels and the result. Crop is measured after rotation, in the frame the user sees. Exact multiples of 90 degrees fold into the lossless quarter-turn path. OpenCV was evaluated and is not usable on this target: the opencv crate binds a native build through libclang and does not support wasm32-unknown-unknown, and reaching a browser at all would mean Emscripten and opencv.js, which does not interoperate with wasm-bindgen. imageproc provides the equivalent warpAffine and GaussianBlur routines in pure Rust. Reasoning and limits are documented in the README. Performance on a 6000x4000 source: straighten previews 391ms -> 81ms, via shedding resolution before the warp, caching that reduction on a halving ladder so a drag keeps hitting it, and bilinear preview warps against bicubic exports. GIF export 2842ms -> 331ms by mapping the quality slider onto the quantiser's effort dial. Previews coalesce, so a slider drag costs one render per frame the engine can deliver. Web app mirrors the A10city brand kit from a10citylabs/verify: navy and lime palette, DM Sans / Space Grotesk / JetBrains Mono, shared navbar and footer. Interactive crop overlay with ratio presets and keyboard nudging, hold-to-compare against the original, and a format list built from what the engine actually reports it can write. 38 engine tests cover geometry, resampling, alpha handling, every output format, and that a warm reduction cache renders bit-identically to a cold one. CI runs fmt, Clippy, tests, a wasm build and a site build; pushes to main deploy to GitHub Pages. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0136PgRWHesdPLprcMp5CDk8
`on: pull_request` and `on: push: branches-ignore: [main]` both match a push to a PR branch, so every push burned two full runs of the Rust toolchain. Pull requests are the only place this workflow adds signal: `main` already runs the test suite through the deploy workflow. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0136PgRWHesdPLprcMp5CDk8
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces the A10city Image Editor, a complete browser-based image processing application built with Rust/WebAssembly on the backend and TypeScript on the frontend. The editor allows users to convert, resize, crop, rotate, and adjust images entirely in the browser without uploading to any server.
Key Changes
Core Architecture
crates/imagecore/): A WebAssembly image processing library that handles all pixel operationspipeline.rs) validating all edit operationsFrontend Application
Main UI (
src/main.ts): 1000+ lines orchestrating the editor state machineStyling (
src/editor.css,src/style.css): Comprehensive component and brand-kit stylesWorker Thread (
src/worker.ts): Offloads expensive operations to prevent UI jankType System (
src/types.ts): Shared wire format between UI and WASMserdestructures for seamless serializationCrop Overlay (
src/crop.ts): Interactive crop selection componentHTML & Assets
Index (
index.html): Semantic HTML5 structure with accessibility featuresBrand Assets (
img/): Logo and favicon files for A10city brandingBuild & Deployment
vite.config.ts): Optimized build setup with wasm-pack integrationtsconfig.json): ES2022 target with DOM and WebWorker supportCargo.toml): Rust workspace with optimized release profile (LTO, single codegen unit).github/workflows/):ci.yml: Runs Rust tests and linting on pull requestsdeploy.yml: Builds and deploys to GitHub Pages on main branch pushpackage.json): Node.js dependencies and build scriptsNotable Implementation Details
https://claude.ai/code/session_0136PgRWHesdPLprcMp5CDk8