TraceClear Studio — AI Image Watermark Remover & C2PA Metadata Stripper

Next.js 15React 19TypeScriptTailwind CSS v4C2PA WASM@contentauth/c2pa-webOffscreenCanvasWebAssemblyLucide ReactVercel

A 100% client-side privacy tool that inspects and verifies invisible C2PA provenance manifests (cryptographic credentials embedded in DALL-E 3 / ChatGPT images), digital signatures, capture tags, and metadata headers, and strips them completely by generating clean raster derivatives directly in-browser using WebAssembly and OffscreenCanvas.

🌐Overview & Purpose

When OpenAI's ChatGPT (DALL-E 3) generates an image, it embeds invisible C2PA Content Credentials (cryptographic provenance manifests), along with potential EXIF, XMP, or PNG text metadata that mark the image as AI-generated.

🛡️ 100% Client-Side Privacy Tool

Inspects and verifies invisible C2PA provenance manifests, digital signatures, capture tags, and metadata headers.
Strips all metadata and C2PA manifests by generating a clean raster copy directly inside your browser—without uploading any image bytes to a remote server.

🌐 Live Applicationchatgpt-image-watermark-remover.vercel.app

💻 Source Codegithub.com/Mudassirdbs/Image-Provenance-Cleaner

🛠️How It Is Built (Tech Stack & Architecture)

The application is built using a modern, performance-oriented frontend architecture designed for zero server latency, instant WASM pre-warming, and strict local memory security:

Layer	Technology	Role
Framework	Next.js 15 (App Router)	React Server Components, client state isolation, SEO metadata
UI Library	React 19 + TypeScript	Type-safe component trees, state hooks, and custom refs
Styling	Tailwind CSS v4	Fast utility CSS, dark/light theme tokens, micro-animations
Provenance Engine	@contentauth/c2pa-web	Official C2PA WebAssembly engine (/wasm/c2pa.wasm) for reading & verifying manifests
Icons	Lucide React	Crisp iconography for UI controls, statuses, and badges
Typography	Google Fonts	Inter (sans), Plus Jakarta Sans (headings), JetBrains Mono (metadata readouts)

⚙️How It Works (Step-by-Step Mechanism)

The engine coordinates concurrent binary inspection, WebAssembly verification, and background pixel raster re-encoding:

Pipeline Flowchart

Input

User drops/selects image (File)

Client Memory (0 Server Uploads)

Parallel Execution

1. Binary HeaderEXIF, IPTC, XMP, PNG chunks & dimensions (<0.05ms)

2. C2PA WASMJUMBF store, claims, issuer, signature validation

3. Pre-SanitizeOffscreenCanvas pixel raster re-encoding

Output & Verification

Metadata Scorecard Rendered→Instant Clean Derivative (0ms delay)→Interactive Split Slider, Download & Clipboard Export

🔒Step 1: Zero-Server Ingestion

Location: src/components/file-drop.tsx

When a user uploads, drops, or pastes an image, the file stays strictly in client RAM as a JavaScript File object. No fetch or POST requests are ever dispatched to any backend.

⚡Step 2: Concurrency & Binary Header Audit

Location: src/lib/audit.ts

In audit.ts, two operations execute concurrently:

Ultra-Fast Dimension Extraction (<0.05ms): parseDimensionsFromHeader() inspects raw binary markers (PNG IHDR, JPEG SOF markers, WebP VP8/VP8L/VP8X, GIF headers) without decoding the entire image into a bitmap.
Metadata Signature Scanning: Slices the first 512KB of the file to search for markers:
- Exif / EXIF (Camera, device info, GPS tags)
- 8BIM / Photoshop 3.0 / IPTC (Editorial and rights tags)
- http://ns.adobe.com/xap/1.0/ / xmpmeta (Adobe XMP packets)
- tEXt / iTXt / zTXt (PNG text metadata chunks)

🔬Step 3: WebAssembly-Powered C2PA Manifest Inspection

Location: src/lib/c2pa.ts

The app pre-warms the official C2PA WASM binary (preloadC2pa()) on mount.
When an image is provided, inspectC2pa() reads the JUMBF manifest store.
It parses claim generator details (e.g. ChatGPT / DALL-E 3), signature issuers, signing timestamps, assertion actions, and ingredient chains.

🚀Step 4: Speculative Background Pre-Sanitization

Location: src/app/page.tsx

In page.tsx, as soon as a file is selected, the app initiates sanitizeImageRaster() in the background while the audit is finishing. When the user clicks "Remove Watermark", the clean result is displayed instantly with 0ms perceived delay.

🎨Step 5: Clean Derivative Generation (Pixel Re-encoding)

Location: src/lib/cleaner.ts

The source image is decoded into raw pixel data using createImageBitmap(file).
It renders the raw pixel buffer onto an OffscreenCanvas (or standard HTML5 <canvas> fallback).
It re-encodes the clean pixel array into a fresh Blob (image/jpeg, image/png, or image/webp).

Why this completely eliminates watermarks: Invisible AI watermarks (C2PA manifests) and metadata tags live in auxiliary file segments/chunks. Because the new image is synthesized purely from raw pixel coordinates, all external metadata packets, manifests, and signatures are automatically discarded.

💾Step 6: Interactive Split-Slider & Export

Location: src/components/image-stage.tsx & src/components/clean-result-card.tsx

An interactive split slider and side-by-side view let users visually verify the pixel fidelity between the original image and the sanitized derivative.
Users can download <name>-clean.jpg / .png / .webp or copy the clean image straight to the clipboard via navigator.clipboard.write([ClipboardItem]).

📂Codebase Structure

Clean modular directory structure isolating UI components, WASM libraries, and SEO schema generators:

Image-Provenance-Cleaner/
├── public/
│   ├── favicon.svg
│   └── wasm/
│       └── c2pa.wasm              # Official C2PA WebAssembly binary
├── src/
│   ├── app/
│   │   ├── globals.css            # Tailwind v4 setup & custom scanning animations
│   │   ├── layout.tsx             # Fonts, SEO metadata, JSON-LD structured data
│   │   └── page.tsx               # Main studio state machine (idle -> auditing -> cleaned)
│   ├── components/
│   │   ├── file-drop.tsx          # Drag & drop / file picker / paste listener
│   │   ├── image-stage.tsx        # Interactive split-comparison canvas & zoom inspector
│   │   ├── metadata-card.tsx      # Collapsible metadata group details & copy buttons
│   │   ├── clean-result-card.tsx  # Download action, size comparison, copy to clipboard
│   │   ├── header.tsx             # Top navigation, status indicator & theme toggle
│   │   ├── education-section.tsx  # Educational guide on C2PA & AI provenance
│   │   ├── principles-section.tsx # 100% client-side privacy guarantees
│   │   └── faq-section.tsx        # Crawlable SEO FAQ accordion
│   └── lib/
│       ├── audit.ts               # Binary header parser for dimensions & metadata tags
│       ├── c2pa.ts                # C2PA WASM SDK loader and manifest validator
│       ├── cleaner.ts             # OffscreenCanvas pixel re-encoder & sanitizer
│       ├── sample.ts              # Synthetic demo image generator
│       ├── types.ts               # Core TypeScript data definitions
│       └── json-ld.ts             # Structured SEO schemas (SoftwareApplication, FAQ, HowTo)
├── next.config.ts                 # Security headers & immutable caching for WASM
└── package.json                   # Dependencies and scripts

🔑Key Engineering Highlights

🛡️ True 100% Client-Side Privacy

All operations execute locally in the client’s browser sandbox; images never leave the user's device.

⚡ Immutable WASM Caching

Configured in next.config.ts (Cache-Control: public, max-age=31536000, immutable) so c2pa.wasm loads instantaneously on repeat visits.

🚀 Speculative Execution Pipeline

Runs raster re-encoding in parallel with metadata auditing to ensure an instantaneous 0ms perceived user experience.

🔍 Resilient Dimension Parsing

Extracts dimensions directly from binary headers in <0.05ms before the browser even finishes decoding the full bitmap.

📈 Rich SEO & Accessibility

Complete OpenGraph, Twitter cards, and rich JSON-LD schemas (SoftwareApplication, FAQPage, HowTo) embedded directly in layout.tsx.

🔗Project Links & Repository

🌐 Live Application: https://chatgpt-image-watermark-remover.vercel.app
💻 GitHub Repository: https://github.com/Mudassirdbs/Image-Provenance-Cleaner

FROM CONCEPT TO CODE </>

LET'S TURN IDEAS INTO SOLUTIONS

Get In Touch

I'm available for full-time roles & freelance projects.

I thrive on crafting dynamic web applications
and delivering seamless user experiences.