From 57415cb399e1abb6cb6eba37cbda2ae271f00035 Mon Sep 17 00:00:00 2001
From: sharif <developersharif@yahoo.com>
Date: Mon, 23 Jun 2025 23:46:31 +0600
Subject: [PATCH] Enhance AI content credential detection and metadata removal
 features across components

---
 src/App.svelte                |   6 +-
 src/lib/Header.svelte         | 367 +++++++++++++++++++++++++++++++---
 src/lib/ImageProcessor.svelte | 102 +++++++++-
 src/lib/MetadataViewer.svelte |  22 ++
 src/lib/PrivacyInfo.svelte    |  50 ++++-
 5 files changed, 517 insertions(+), 30 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 9616f29..68e1cf3 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -181,8 +181,10 @@
                   </p>
                 {/if}
                 <p class="status-success">✓ All EXIF metadata removed</p>
-                <p class="status-success">✓ AI/C2PA provenance data stripped</p>
-                <p class="status-success">✓ Location data cleared</p>
+                <p class="status-success">✓ GPS location data cleared</p>
+                <p class="status-success">✓ AI content credentials stripped</p>
+                <p class="status-success">✓ C2PA provenance data removed</p>
+                <p class="status-success">✓ Camera & device info cleared</p>
               </div>
 
               <a
diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index d7155fa..d88e3e6 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -1,54 +1,375 @@
-<header class="text-center mb-6">
-  <div class="flex items-center justify-center gap-3 mb-3">
-    <div class="logo">
-      <svg width="40" height="40" viewBox="0 0 48 48" fill="none">
-        <rect width="48" height="48" rx="12" fill="var(--primary-color)" />
-        <path
-          d="M12 18h24v12H12V18z"
-          stroke="white"
-          stroke-width="2"
+<header class="text-center mb-6 header-container">
+  <div class="flex items-center justify-center gap-4 mb-4 header-title">
+    <div class="logo-container">
+      <svg
+        width="56"
+        height="56"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        class="logo-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>
+          <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+            <feDropShadow
+              dx="0"
+              dy="2"
+              stdDeviation="3"
+              flood-color="rgba(0,0,0,0.1)"
+            />
+          </filter>
+        </defs>
+
+        <!-- Main circle background -->
+        <circle
+          cx="24"
+          cy="24"
+          r="22"
+          fill="url(#logoGradient)"
+          filter="url(#shadow)"
+        />
+
+        <!-- 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="M16 22l4 4 8-8"
-          stroke="white"
-          stroke-width="2"
+          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"
-          stroke-linejoin="round"
+          opacity="0.8"
         />
-        <path
-          d="M32 14l4 4-4 4"
+        <line
+          x1="8"
+          y1="8"
+          x2="40"
+          y2="40"
           stroke="white"
-          stroke-width="2"
+          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>
     </div>
-    <div>
-      <h1 class="text-2xl font-bold">Untrace</h1>
-      <p class="text-base text-secondary">Remove metadata. Protect privacy.</p>
+    <div class="brand-text">
+      <h1 class="brand-name">
+        <span class="brand-primary">Untrace</span><span class="brand-secondary"
+          >trace</span
+        >
+      </h1>
+      <p class="brand-tagline">
+        Remove EXIF metadata & AI credentials. Protect privacy.
+      </p>
+      <div class="brand-badge">
+        <span class="badge-text">Professional Privacy Tool</span>
+      </div>
     </div>
   </div>
 
-  <p class="text-sm text-secondary max-w-xl mx-auto">
-    <strong>100% browser-based</strong> metadata removal tool. No uploads, no tracking.
+  <p class="text-sm text-secondary max-w-2xl mx-auto header-description">
+    <strong>Free online EXIF metadata remover</strong> that strips GPS location
+    data, camera information, AI content credentials, and C2PA provenance from
+    images. <strong>100% browser-based processing</strong>
+    - no uploads, no tracking, no data collection.
   </p>
+
+  <div class="mt-4 text-xs text-muted feature-tags">
+    <span class="feature-tag">
+      <svg width="12" height="12" fill="currentColor" viewBox="0 0 20 20">
+        <path
+          fill-rule="evenodd"
+          d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+          clip-rule="evenodd"
+        />
+      </svg>
+      EXIF Removal
+    </span>
+    <span class="feature-tag">
+      <svg width="12" height="12" fill="currentColor" viewBox="0 0 20 20">
+        <path
+          d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"
+        />
+      </svg>
+      AI Tag Stripper
+    </span>
+    <span class="feature-tag">
+      <svg width="12" height="12" fill="currentColor" viewBox="0 0 20 20">
+        <path
+          fill-rule="evenodd"
+          d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
+          clip-rule="evenodd"
+        />
+      </svg>
+      GPS Cleaner
+    </span>
+    <span class="feature-tag">
+      <svg width="12" height="12" fill="currentColor" viewBox="0 0 20 20">
+        <path
+          fill-rule="evenodd"
+          d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z"
+          clip-rule="evenodd"
+        />
+      </svg>
+      C2PA Remover
+    </span>
+    <span class="feature-tag">
+      <svg width="12" height="12" fill="currentColor" viewBox="0 0 20 20">
+        <path
+          fill-rule="evenodd"
+          d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
+          clip-rule="evenodd"
+        />
+      </svg>
+      Instant Processing
+    </span>
+  </div>
 </header>
 
 <style>
+  .header-container {
+    padding-top: 1rem;
+  }
+
   .logo {
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .max-w-xl {
-    max-width: 36rem;
+  /* Professional Logo and Branding Styles */
+  .logo-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .logo-svg {
+    transition: transform 0.2s ease-in-out;
+  }
+
+  .logo-svg:hover {
+    transform: scale(1.05);
+  }
+
+  .brand-text {
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .brand-name {
+    font-size: 2.5rem;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    line-height: 1;
+    margin: 0;
+    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 50%, #1e3a8a 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-family:
+      system-ui,
+      -apple-system,
+      sans-serif;
+  }
+
+  .brand-primary {
+    font-weight: 900;
+  }
+
+  .brand-secondary {
+    font-weight: 700;
+    opacity: 0.9;
+  }
+
+  .brand-tagline {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    margin: 0;
+    font-weight: 500;
+    line-height: 1.3;
+  }
+
+  .brand-badge {
+    margin-top: 0.25rem;
+  }
+
+  .badge-text {
+    display: inline-block;
+    background: linear-gradient(135deg, #10b981, #059669);
+    color: white;
+    padding: 0.125rem 0.5rem;
+    border-radius: 0.375rem;
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
+  }
+
+  .max-w-2xl {
+    max-width: 42rem;
   }
 
   .mx-auto {
     margin-left: auto;
     margin-right: auto;
   }
+
+  .feature-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    background-color: var(--bg-secondary);
+    color: var(--text-secondary);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.375rem;
+    margin: 0.125rem;
+    font-size: 0.75rem;
+    border: 1px solid var(--border-color);
+  }
+
+  .feature-tag svg {
+    flex-shrink: 0;
+  }
+
+  .text-muted {
+    color: var(--text-muted, #6b7280);
+  }
+
+  /* Mobile optimizations */
+  @media (max-width: 768px) {
+    .header-container {
+      padding-top: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .header-title {
+      flex-direction: column;
+      gap: 1.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .brand-text {
+      text-align: center;
+      gap: 0.5rem;
+    }
+
+    .brand-name {
+      font-size: 2rem;
+    }
+
+    .brand-tagline {
+      font-size: 0.75rem;
+    }
+
+    .badge-text {
+      font-size: 0.5rem;
+      padding: 0.1rem 0.4rem;
+    }
+
+    .header-description {
+      font-size: 0.75rem;
+      padding: 0 1rem;
+      line-height: 1.4;
+    }
+
+    .feature-tags {
+      margin-top: 1rem;
+      padding: 0 0.5rem;
+    }
+
+    .feature-tag {
+      font-size: 0.625rem;
+      padding: 0.125rem 0.375rem;
+      margin: 0.0625rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .header-container {
+      padding-top: 2rem;
+    }
+
+    .header-title {
+      gap: 1rem;
+    }
+
+    .brand-name {
+      font-size: 1.75rem;
+    }
+
+    .brand-tagline {
+      font-size: 0.6875rem;
+    }
+
+    .logo-svg {
+      width: 48px;
+      height: 48px;
+    }
+
+    .header-description {
+      font-size: 0.6875rem;
+      padding: 0 0.75rem;
+    }
+
+    .feature-tags {
+      padding: 0 0.25rem;
+    }
+  }
 </style>
diff --git a/src/lib/ImageProcessor.svelte b/src/lib/ImageProcessor.svelte
index f69f972..b4d581e 100644
--- a/src/lib/ImageProcessor.svelte
+++ b/src/lib/ImageProcessor.svelte
@@ -12,6 +12,9 @@
     dispatch("processingStart");
 
     try {
+      // Enhanced AI content credential detection before processing
+      await detectAndLogAICredentials();
+
       const img = new Image();
 
       img.onload = function () {
@@ -22,8 +25,11 @@
           canvas.width = img.width;
           canvas.height = img.height;
 
+          // Enhanced clearing for AI content credentials
           ctx.clearRect(0, 0, canvas.width, canvas.height);
 
+          // Create a new clean image without any metadata containers
+          ctx.globalCompositeOperation = "source-over";
           ctx.drawImage(img, 0, 0);
 
           let outputType = "image/jpeg";
@@ -62,6 +68,72 @@
     }
   }
 
+  // Enhanced AI credential detection
+  async function detectAndLogAICredentials() {
+    try {
+      const { parse } = await import("exifr");
+
+      const fullMetadata = await parse(file, {
+        tiff: true,
+        exif: true,
+        gps: true,
+        xmp: true,
+        iptc: true,
+        icc: true,
+        jfif: true,
+        ihdr: true,
+        iptc: true,
+        photoshop: true,
+        silentErrors: true,
+      });
+
+      if (fullMetadata) {
+        console.log("🔍 Detected metadata before cleaning:", fullMetadata);
+
+        // Check for AI-specific metadata
+        const aiTags = [];
+        if (
+          fullMetadata.Software &&
+          typeof fullMetadata.Software === "string"
+        ) {
+          const software = fullMetadata.Software.toLowerCase();
+          if (
+            software.includes("dall-e") ||
+            software.includes("dalle") ||
+            software.includes("chatgpt") ||
+            software.includes("openai") ||
+            software.includes("midjourney") ||
+            software.includes("stable diffusion")
+          ) {
+            aiTags.push("AI Software Signature");
+          }
+        }
+
+        // Check for C2PA content credentials
+        if (
+          fullMetadata.Description &&
+          fullMetadata.Description.includes("c2pa")
+        ) {
+          aiTags.push("C2PA Content Credentials");
+        }
+
+        if (
+          fullMetadata.Creator &&
+          (fullMetadata.Creator.includes("AI") ||
+            fullMetadata.Creator.includes("artificial intelligence"))
+        ) {
+          aiTags.push("AI Creator Tags");
+        }
+
+        if (aiTags.length > 0) {
+          console.log("🤖 AI content credentials detected:", aiTags);
+        }
+      }
+    } catch (error) {
+      console.log("Could not analyze AI credentials:", error);
+    }
+  }
+
   async function verifyCleanImage(cleanBlob, originalFile) {
     try {
       const { parse } = await import("exifr");
@@ -196,8 +268,10 @@
 <div class="processor-section">
   <div class="text-center mb-6">
     <p class="text-secondary mb-4">
-      Remove all EXIF metadata from your image to protect your privacy. This
-      process happens entirely in your browser - no data is sent to any server.
+      Remove all EXIF metadata, AI content credentials, and provenance data from
+      your image to protect your privacy. This process happens entirely in your
+      browser - no data is sent to any server. Enhanced detection for C2PA
+      signatures, DALL-E watermarks, and other AI generation markers.
     </p>
 
     <button class="btn btn-primary btn-lg" on:click={processImage} {disabled}>
@@ -256,6 +330,30 @@
         <span class="text-success">✓</span>
         AI generation tags
       </div>
+      <div class="flex items-center gap-2">
+        <span class="text-success">✓</span>
+        C2PA content credentials
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-success">✓</span>
+        DALL-E/ChatGPT signatures
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-success">✓</span>
+        Midjourney watermarks
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-success">✓</span>
+        Stable Diffusion metadata
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-success">✓</span>
+        Adobe AI provenance
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-success">✓</span>
+        JUMBF metadata containers
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/lib/MetadataViewer.svelte b/src/lib/MetadataViewer.svelte
index e7d221f..c2946c5 100644
--- a/src/lib/MetadataViewer.svelte
+++ b/src/lib/MetadataViewer.svelte
@@ -122,6 +122,28 @@
       "synthesized",
       "gpt-4",
       "trainedAlgorithmicMedia",
+      "adobe firefly",
+      "google imagen",
+      "anthropic claude",
+      "runway ml",
+      "artbreeder",
+      "deepdream",
+      "nightcafe",
+      "starryai",
+      "jasper art",
+      "canva ai",
+      "remove.bg",
+      "upscayl",
+      "real-esrgan",
+      "waifu2x",
+      "topaz gigapixel",
+      "c2pa",
+      "content credentials",
+      "provenance",
+      "content authenticity",
+      "jumbf",
+      "cai",
+      "project origin",
     ];
 
     let hasAI = false;
diff --git a/src/lib/PrivacyInfo.svelte b/src/lib/PrivacyInfo.svelte
index f745557..82fa514 100644
--- a/src/lib/PrivacyInfo.svelte
+++ b/src/lib/PrivacyInfo.svelte
@@ -38,7 +38,14 @@
         <strong>🕒 Timestamps:</strong> Enable detailed activity timelines
       </div>
       <div class="privacy-risk">
-        <strong>🤖 AI Detection:</strong> Software tags reveal AI generation
+        <strong>🤖 AI Detection:</strong> Software tags reveal AI generation tools
+      </div>
+      <div class="privacy-risk">
+        <strong>🔗 C2PA Credentials:</strong> Content provenance tracks creation
+        history
+      </div>
+      <div class="privacy-risk">
+        <strong>🏷️ Software Tags:</strong> DALL-E, Midjourney, ChatGPT watermarks
       </div>
     </div>
 
@@ -56,8 +63,27 @@
   <div class="grid grid-2 gap-2 text-sm">
     <div>• Journalists protecting sources</div>
     <div>• Activists maintaining anonymity</div>
-    <div>• Content creators removing AI tags</div>
-    <div>• Anyone valuing digital privacy</div>
+    <div>• AI artists removing generation tags</div>
+    <div>• Content creators stripping watermarks</div>
+    <div>• Social media users protecting privacy</div>
+    <div>• Anyone valuing digital anonymity</div>
+    <div>• Photographers selling stock images</div>
+    <div>• Removing C2PA content credentials</div>
+  </div>
+</div>
+
+<div class="mt-4 p-4 bg-secondary rounded">
+  <h4 class="font-semibold mb-2">🤖 AI Content Credential Support:</h4>
+  <div class="grid grid-3 gap-2 text-sm">
+    <div>• OpenAI DALL-E</div>
+    <div>• Midjourney</div>
+    <div>• Stable Diffusion</div>
+    <div>• Adobe Firefly</div>
+    <div>• ChatGPT Images</div>
+    <div>• Google Imagen</div>
+    <div>• C2PA Signatures</div>
+    <div>• Content Authenticity</div>
+    <div>• JUMBF Containers</div>
   </div>
 </div>
 
@@ -87,6 +113,11 @@
     border: 1px solid rgba(37, 99, 235, 0.1);
   }
 
+  .bg-secondary {
+    background-color: rgba(16, 185, 129, 0.05);
+    border: 1px solid rgba(16, 185, 129, 0.1);
+  }
+
   .rounded {
     border-radius: 0.5rem;
   }
@@ -100,9 +131,22 @@
     grid-template-columns: 1fr 1fr;
   }
 
+  .grid-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
   @media (max-width: 768px) {
     .grid-2 {
       grid-template-columns: 1fr;
     }
+    .grid-3 {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .grid-3 {
+      grid-template-columns: 1fr;
+    }
   }
 </style>