dasp/Untrace
1
1 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Rebuild on the RealBrain design system and retarget SEO to content credentials

Browse Source 
Search Console (Jun 4 – Sep 3) shows the page ranking on the first results
page for "content credentials" queries while converting badly: "ai
credentials remover" at 113 impressions and 0.88% CTR from position 6.7,
"remove content credentials from image online" at 2.15% from position 5.0,
"remove ai content credentials from image" at 0% from position 7.8. The
title led with "EXIF metadata", a phrase that appears in none of the top
queries, so the snippet never matched the intent behind the impressions.

SEO
- Title, description and H1 rebuilt around "remove content credentials from
  an image"; EXIF kept as a secondary term.
- Added a how-to section and a nine-question FAQ answering the question
  queries that had no content behind them, including the LinkedIn AI label
  and the Instagram AI tag.
- Structured data as an @graph: WebSite (alternateName "Untrace AI" for the
  unserved brand query), Organization, WebApplication, HowTo, FAQPage.
- Fixed sitemap.xml, which pointed at /untrace/ — a URL that does not exist.
- Regenerated the Open Graph image to match the new design.

Design
- Vendored the design system at src/tokens.css and composed the app from it.
  The old styling broke most of its rules: gradients, font weights 800 and
  900, raw #2563eb, Inter, and emoji as the only status signal.
- Reworked the tool into a Scan / Review / Download flow that lists what it
  found before changing anything, with the primary action pinned within
  thumb reach on small screens.
- Dark by default with a light theme, applied before first paint so the page
  never flashes the wrong surface.
- Replaced the floating donation widget, which painted an off-token circle
  over the page and covered the mobile action bar, with a footer link.

Structure
- Moved detection into src/lib/metadata.js and removal into src/lib/clean.js;
  the canvas callbacks are now a promise chain.
- Dropped Tailwind and PostCSS. Both were configured twice, and no Tailwind
  utility was used. Stylesheet is 6.2 kB gzipped with the whole system in it.

Fixes
- The stepper never advanced: stepState(index) read `current` from the
  closure, which Svelte 4 cannot track as a template dependency.
- The cleaner's fallback returned the original, uncleaned file while the UI
  reported "All EXIF metadata removed". It now reports the failure instead.

Verified against a JPEG carrying EXIF, GPS, XMP and an APP11 JUMBF C2PA
manifest: the output retains only APP0 and the sRGB ICC profile, with every
provenance marker gone.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018pRSdR57Ze9M2meDfYZgYE
This commit is contained in:
SharifandClaude Opus 5 committed 2026-09-05 23:03:00 +06:00
1 parent 83a4d3f2c4
commit 00991c1608
40 files changed
+3577 -3697
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/favicon-16x16.svg
+4 -22
View File
@@ -1,23 +1,5 @@
<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Simplified version for 16x16 -->
<defs>
<linearGradient id="logoGradient16" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1E40AF;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Main circle background -->
<circle cx="24" cy="24" r="22" fill="url(#logoGradient16)" />
<!-- Simplified image icon -->
<rect x="12" y="16" width="24" height="16" rx="2" fill="white" opacity="0.9" />
<!-- Strike-through line -->
<line x1="8" y1="8" x2="40" y2="40" stroke="#EF4444" stroke-width="4" stroke-linecap="round" />
<line x1="8" y1="8" x2="40" y2="40" stroke="white" stroke-width="2" stroke-linecap="round" />
<!-- Shield -->
<circle cx="38" cy="18" r="6" fill="#10B981" stroke="white" stroke-width="1.5" />
<path d="M36 18 L37 19 L40 16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" role="img" aria-label="Untrace">
<rect width="48" height="48" rx="10" fill="#3450C8"/>
<text x="24" y="24" fill="#FFFFFF" font-family="'IBM Plex Mono', ui-monospace, monospace"
font-size="28" font-weight="600" text-anchor="middle" dominant-baseline="central">U</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 347 B

public/favicon-32x32.svg
+4 -26
View File
@@ -1,27 +1,5 @@
<svg width="32" height="32" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Medium detail version for 32x32 -->
<defs>
<linearGradient id="logoGradient32" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1E40AF;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Main circle background -->
<circle cx="24" cy="24" r="22" fill="url(#logoGradient32)" />
<!-- Image/photo icon -->
<rect x="11" y="15" width="26" height="18" rx="2" fill="white" opacity="0.9" />
<rect x="12" y="16" width="24" height="16" rx="2" fill="none" stroke="#1E40AF" stroke-width="1.5" />
<!-- Simple landscape -->
<path d="M12 28 L18 23 L24 26 L30 21 L36 26 V30 H12 Z" fill="#E5E7EB" opacity="0.6" />
<!-- Strike-through line -->
<line x1="8" y1="8" x2="40" y2="40" stroke="#EF4444" stroke-width="3" stroke-linecap="round" opacity="0.8" />
<line x1="8" y1="8" x2="40" y2="40" stroke="white" stroke-width="1.5" stroke-linecap="round" />
<!-- Shield -->
<path d="M37 12 L41 12 C41.5 12 42 12.5 42 13 L42 16 C42 18.5 40.5 20.8 38.2 22.1 L37 22.8 L35.8 22.1 C33.5 20.8 32 18.5 32 16 L32 13 C32 12.5 32.5 12 33 12 L37 12 Z" fill="#10B981" stroke="white" stroke-width="1" />
<path d="M35 15.5 L36.5 17 L39 14.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" role="img" aria-label="Untrace">
<rect width="48" height="48" rx="10" fill="#3450C8"/>
<text x="24" y="24" fill="#FFFFFF" font-family="'IBM Plex Mono', ui-monospace, monospace"
font-size="28" font-weight="600" text-anchor="middle" dominant-baseline="central">U</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 347 B

public/favicon-maskable.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" role="img" aria-label="Untrace">
<rect width="48" height="48" fill="#3450C8"/>
<text x="24" y="24" fill="#FFFFFF" font-family="'IBM Plex Mono', ui-monospace, monospace"
font-size="22" font-weight="600" text-anchor="middle" dominant-baseline="central">U</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 339 B

public/favicon.svg
+4 -31
View File
@@ -1,32 +1,5 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Background circle with gradient -->
<defs>
<linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1E40AF;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Main circle background -->
<circle cx="24" cy="24" r="22" fill="url(#logoGradient)" />
<!-- Image/photo icon base -->
<rect x="10" y="14" width="28" height="20" rx="3" fill="white" opacity="0.9" />
<rect x="12" y="16" width="24" height="16" rx="2" fill="none" stroke="#1E40AF" stroke-width="1.5" />
<!-- Mountain/landscape in photo -->
<path d="M12 28 L18 22 L22 25 L28 20 L36 26 V30 H12 Z" fill="#E5E7EB" opacity="0.6" />
<!-- Sun/circle in photo -->
<circle cx="30" cy="20" r="2.5" fill="#FCD34D" opacity="0.7" />
<!-- Strike-through line (indicating removal) -->
<line x1="8" y1="8" x2="40" y2="40" stroke="#EF4444" stroke-width="3" stroke-linecap="round" opacity="0.8" />
<line x1="8" y1="8" x2="40" y2="40" stroke="white" stroke-width="1.5" stroke-linecap="round" />
<!-- Shield icon overlay (protection) -->
<path d="M38 10 L42 10 C43.1 10 44 10.9 44 12 L44 16 C44 19.3 42.3 22.4 39.5 24.2 L38 25 L36.5 24.2 C33.7 22.4 32 19.3 32 16 L32 12 C32 10.9 32.9 10 34 10 L38 10 Z" fill="#10B981" stroke="white" stroke-width="1" />
<!-- Checkmark in shield -->
<path d="M36 15 L37.5 16.5 L40 14" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" role="img" aria-label="Untrace">
<rect width="48" height="48" rx="10" fill="#3450C8"/>
<text x="24" y="24" fill="#FFFFFF" font-family="'IBM Plex Mono', ui-monospace, monospace"
font-size="28" font-weight="600" text-anchor="middle" dominant-baseline="central">U</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 347 B

public/manifest.json
+16 -6
View File
@@ -1,19 +1,29 @@
{
"name": "Untrace",
"id": "/",
"name": "Untrace — content credentials and metadata remover",
"short_name": "Untrace",
"description": "EXIF Metadata & AI Content Credential Remover",
"description": "Remove C2PA content credentials, AI generation tags and EXIF metadata from images, entirely in your browser.",
"start_url": "/",
"scope": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#3b82f6",
"background_color": "#080808",
"theme_color": "#080808",
"icons": [
{
"src": "vite.svg",
"src": "/favicon.svg",
"sizes": "any",
"type": "image/svg+xml"
"type": "image/svg+xml",
"purpose": "any"
},
{
"src": "/favicon-maskable.svg",
"sizes": "any",
"type": "image/svg+xml",
"purpose": "maskable"
}
],
"categories": ["productivity", "utilities", "photo"],
"lang": "en",
"dir": "ltr",
"orientation": "any"
}
public/sitemap.xml
+2 -2
View File
@@ -1,8 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://untrace.realbrain.cc/untrace/</loc>
<lastmod>2025-06-23</lastmod>
<loc>https://untrace.realbrain.cc/</loc>
<lastmod>2026-09-05</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
public/thumb.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 262 KiB

After

Width:  |  Height:  |  Size: 47 KiB

public/vite.svg
-6
View File
@@ -1,6 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#2563eb"/>
<path d="M8 12h16v8H8v-8z" stroke="white" stroke-width="1.5" fill="none"/>
<path d="M11 15l3 3 6-6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 9l3 3-3 3" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 454 B