Enhance AI content credential detection and metadata removal features across components

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">✓ GPS location data cleared</p>
-                <p class="status-success">✓ 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

src/lib/Header.svelte

@@ -1,54 +1,375 @@
-<header class="text-center mb-6">
+<header class="text-center mb-6 header-container">
-  <div class="flex items-center justify-center gap-3 mb-3">
+  <div class="flex items-center justify-center gap-4 mb-4 header-title">
-    <div class="logo">
+    <div class="logo-container">
-      <svg width="40" height="40" viewBox="0 0 48 48" fill="none">
+      <svg
-        <rect width="48" height="48" rx="12" fill="var(--primary-color)" />
+        width="56"
-        <path
+        height="56"
-          d="M12 18h24v12H12V18z"
+        viewBox="0 0 48 48"
-          stroke="white"
+        fill="none"
-          stroke-width="2"
+        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"
+          d="M12 28 L18 22 L22 25 L28 20 L36 26 V30 H12 Z"
-          stroke="white"
+          fill="#E5E7EB"
-          stroke-width="2"
+          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
+        <line
-          d="M32 14l4 4-4 4"
+          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>
+    <div class="brand-text">
-      <h1 class="text-2xl font-bold">Untrace</h1>
+      <h1 class="brand-name">
-      <p class="text-base text-secondary">Remove metadata. Protect privacy.</p>
+        <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">
+  <p class="text-sm text-secondary max-w-2xl mx-auto header-description">
-    <strong>100% browser-based</strong> metadata removal tool. No uploads, no tracking.
+    <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 {
+  /* Professional Logo and Branding Styles */
-    max-width: 36rem;
+  .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>

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
+      Remove all EXIF metadata, AI content credentials, and provenance data from
-      process happens entirely in your browser - no data is sent to any server.
+      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>

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;

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>• AI artists removing generation tags</div>
-    <div>• Anyone valuing digital privacy</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>