From 54a1c05ddfba47ee27e9dbc0fe00f406732eaa62 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 4 Jul 2025 12:51:57 +0200
Subject: [PATCH] Start on C2PA and Exif info boxes on upload

---
 src/assets/css/sendattachments.scss           |  33 ++++-
 src/assets/icons/ic_cc_ai.vue                 |   9 ++
 src/assets/icons/ic_exif_device_camera.vue    |  20 ++++
 src/assets/icons/ic_exif_location.vue         |  20 ++++
 src/assets/icons/ic_exif_time.vue             |  12 ++
 src/assets/translations/en.json               |   5 +-
 src/components/Chat.vue                       |   2 -
 src/components/c2pa/C2PABadge.vue             |  34 ------
 .../content-credentials/C2PAInfo.vue          |  73 +++++++++++
 .../content-credentials/EXIFInfo.vue          | 113 ++++++++++++++++++
 src/components/file_mode/AttachmentInfo.vue   |  19 ++-
 .../file_mode/SendAttachmentsLayout.vue       |   3 +-
 src/models/attachment.ts                      |   3 +-
 src/models/proof.ts                           |  40 +++++++
 14 files changed, 337 insertions(+), 49 deletions(-)
 create mode 100644 src/assets/icons/ic_cc_ai.vue
 create mode 100644 src/assets/icons/ic_exif_device_camera.vue
 create mode 100644 src/assets/icons/ic_exif_location.vue
 create mode 100644 src/assets/icons/ic_exif_time.vue
 delete mode 100644 src/components/c2pa/C2PABadge.vue
 create mode 100644 src/components/content-credentials/C2PAInfo.vue
 create mode 100644 src/components/content-credentials/EXIFInfo.vue
 create mode 100644 src/models/proof.ts

diff --git a/src/assets/css/sendattachments.scss b/src/assets/css/sendattachments.scss
index 880798b..c3a7528 100644
--- a/src/assets/css/sendattachments.scss
+++ b/src/assets/css/sendattachments.scss
@@ -472,6 +472,7 @@ $hiliteColor: #4642f1;
 }
 
 .send-attachments-info-popup {
+  background-color: rgba(0,0,0,0.9);
   .done-button {
     padding: 14px 24px;
   }
@@ -531,7 +532,7 @@ $hiliteColor: #4642f1;
       background-color: #242424;
       border-radius: 8px;
       border: 2px solid #242424;
-      
+
       &.selected {
         border: 2px solid #4642F1;
       }
@@ -571,12 +572,32 @@ $hiliteColor: #4642f1;
     }
   }
 
-  .c2pa-badge {
-    overflow: hidden;
+  .attachment-info__detail-box {
+    margin-top: 32px;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: $backgroundDark;
 
-    .v-icon {
-      width: 32px;
-      height: 32px;
+    .detail-title {
+      font-family: "Inter", sans-serif;
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 125%;
+      letter-spacing: 0.4px;
+      vertical-align: middle;
+    }
+
+    .detail-row {
+      margin-top: 12px;
+      font-family: "Inter", sans-serif;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 125%;
+      letter-spacing: 0.4px;
+      color: rgba(255, 255, 255, 0.9);
+      .v-icon {
+        margin-right: 8px;
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/src/assets/icons/ic_cc_ai.vue b/src/assets/icons/ic_cc_ai.vue
new file mode 100644
index 0000000..4f73650
--- /dev/null
+++ b/src/assets/icons/ic_cc_ai.vue
@@ -0,0 +1,9 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M14.7669 7.69299C10.4143 6.49122 9.50915 5.5853 8.30704 1.23383C8.26886 1.09544 8.14319 1 8 1C7.85682 1 7.73114 1.09544 7.69296 1.23383C6.49105 5.58597 5.58502 6.49102 1.23306 7.69299C1.09465 7.73117 1 7.85683 1 8C1 8.14317 1.09545 8.26883 1.23306 8.30701C5.5857 9.50878 6.49085 10.4147 7.69296 14.7662C7.73114 14.9046 7.85682 15 8 15C8.14319 15 8.26886 14.9046 8.30704 14.7662C9.50895 10.414 10.415 9.50898 14.7669 8.30701C14.9053 8.26883 15 8.14317 15 8C15 7.85683 14.9045 7.73117 14.7669 7.69299Z"
+      fill="currentColor"
+      fill-opacity="0.9"
+    />
+  </svg>
+</template>
diff --git a/src/assets/icons/ic_exif_device_camera.vue b/src/assets/icons/ic_exif_device_camera.vue
new file mode 100644
index 0000000..5cf4cd8
--- /dev/null
+++ b/src/assets/icons/ic_exif_device_camera.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M1.33337 5.58483C1.33337 5.35128 1.33337 5.23451 1.34312 5.13615C1.43711 4.18752 2.18755 3.43708 3.13618 3.34309C3.23454 3.33334 3.35761 3.33334 3.60376 3.33334C3.69861 3.33334 3.74603 3.33334 3.7863 3.33091C4.30045 3.29977 4.75068 2.97526 4.9428 2.49734C4.95785 2.45992 4.97191 2.41772 5.00004 2.33334C5.02817 2.24896 5.04223 2.20677 5.05728 2.16934C5.24941 1.69143 5.69963 1.36692 6.21378 1.33578C6.25405 1.33334 6.29852 1.33334 6.38747 1.33334H9.61262C9.70156 1.33334 9.74603 1.33334 9.7863 1.33578C10.3004 1.36692 10.7507 1.69143 10.9428 2.16934C10.9579 2.20677 10.9719 2.24896 11 2.33334C11.0282 2.41772 11.0422 2.45992 11.0573 2.49734C11.2494 2.97526 11.6996 3.29977 12.2138 3.33091C12.254 3.33334 12.3015 3.33334 12.3963 3.33334C12.6425 3.33334 12.7655 3.33334 12.8639 3.34309C13.8125 3.43708 14.563 4.18752 14.657 5.13615C14.6667 5.23451 14.6667 5.35128 14.6667 5.58483V10.8C14.6667 11.9201 14.6667 12.4802 14.4487 12.908C14.257 13.2843 13.951 13.5903 13.5747 13.782C13.1469 14 12.5868 14 11.4667 14H4.53337C3.41327 14 2.85322 14 2.42539 13.782C2.04907 13.5903 1.74311 13.2843 1.55136 12.908C1.33337 12.4802 1.33337 11.9201 1.33337 10.8V5.58483Z"
+      stroke="currentColor"
+      stroke-opacity="0.9"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.00004 11C9.4728 11 10.6667 9.8061 10.6667 8.33334C10.6667 6.86058 9.4728 5.66668 8.00004 5.66668C6.52728 5.66668 5.33337 6.86058 5.33337 8.33334C5.33337 9.8061 6.52728 11 8.00004 11Z"
+      stroke="currentColor"
+      stroke-opacity="0.9"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/src/assets/icons/ic_exif_location.vue b/src/assets/icons/ic_exif_location.vue
new file mode 100644
index 0000000..bee3197
--- /dev/null
+++ b/src/assets/icons/ic_exif_location.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.99996 8.66668C9.10453 8.66668 9.99996 7.77125 9.99996 6.66668C9.99996 5.56211 9.10453 4.66668 7.99996 4.66668C6.89539 4.66668 5.99996 5.56211 5.99996 6.66668C5.99996 7.77125 6.89539 8.66668 7.99996 8.66668Z"
+      stroke="currentColor"
+      stroke-opacity="0.9"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7.99996 14.6667C10.6666 12 13.3333 9.6122 13.3333 6.66668C13.3333 3.72116 10.9455 1.33334 7.99996 1.33334C5.05444 1.33334 2.66663 3.72116 2.66663 6.66668C2.66663 9.6122 5.33329 12 7.99996 14.6667Z"
+      stroke="currentColor"
+      stroke-opacity="0.9"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/src/assets/icons/ic_exif_time.vue b/src/assets/icons/ic_exif_time.vue
new file mode 100644
index 0000000..d4e8567
--- /dev/null
+++ b/src/assets/icons/ic_exif_time.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M14 6.66668H2M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.2569 13.5903 13.951 13.782 13.5747C14 13.1468 14 12.5868 14 11.4667V5.86668C14 4.74657 14 4.18652 13.782 3.7587C13.5903 3.38237 13.2843 3.07641 12.908 2.88466C12.4802 2.66668 11.9201 2.66668 10.8 2.66668H5.2C4.0799 2.66668 3.51984 2.66668 3.09202 2.88466C2.71569 3.07641 2.40973 3.38237 2.21799 3.7587C2 4.18652 2 4.74657 2 5.86668V11.4667C2 12.5868 2 13.1468 2.21799 13.5747C2.40973 13.951 2.71569 14.2569 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z"
+      stroke="currentColor"
+      stroke-opacity="0.9"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index a518c46..74b3553 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -488,6 +488,9 @@
     "compressed": "Compressed",
     "original": "Original",
     "metadata_info_compressed": "Compressing the image automatically excludes its metadata.",
-    "metadata_info_original": "Sharing the original automatically includes its metadata."
+    "metadata_info_original": "Sharing the original automatically includes its metadata.",
+    "exif_data": "Exif Data",
+    "content_credentials": "Content Credentials",
+    "ai_used": "AI was used in this media"
   }
 }
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 7bf13fd..5edf832 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -336,7 +336,6 @@ import emitter from 'tiny-emitter/instance';
 import { markRaw } from "vue";
 import timerIcon from '@/assets/icons/ic_timer.svg';
 import proofmode from "../plugins/proofmode.js";
-import C2PABadge from "./c2pa/C2PABadge.vue";
 import { consoleWarn } from "vuetify/lib/util/console.mjs";
 
 const READ_RECEIPT_TIMEOUT = 5000; /* How long a message must have been visible before the read marker is updated */
@@ -392,7 +391,6 @@ export default {
     MessageOperationsChannel,
     RoomExport,
     EmojiPicker,
-    C2PABadge
   },
 
   data() {
diff --git a/src/components/c2pa/C2PABadge.vue b/src/components/c2pa/C2PABadge.vue
deleted file mode 100644
index 93af5ac..0000000
--- a/src/components/c2pa/C2PABadge.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div v-if="hasC2PA" class="c2pa-badge">
-    <v-icon>$vuetify.icons.ic_cr</v-icon>
-    <span>This image contains C2PA data</span>
-  </div>
-  <div v-if="hasExif" class="c2pa-badge">
-    <v-icon>camera_marker</v-icon>
-    <span>This image contains EXIF data</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = defineProps<{
-  proof?: {
-    name?: string;
-    json?: string;
-    integrity?: { pgp?: any; c2pa?: any; exif?: any; opentimestamps?: any };
-  };
-}>();
-
-const hasC2PA = computed(() => {
-  return props.proof?.integrity?.c2pa !== undefined;
-});
-
-const hasExif = computed(() => {
-  return props.proof?.integrity?.exif !== undefined;
-});
-</script>
-
-<style lang="scss">
-@use "@/assets/css/chat.scss" as *;
-</style>
diff --git a/src/components/content-credentials/C2PAInfo.vue b/src/components/content-credentials/C2PAInfo.vue
new file mode 100644
index 0000000..0eb7a01
--- /dev/null
+++ b/src/components/content-credentials/C2PAInfo.vue
@@ -0,0 +1,73 @@
+<template>
+  <div v-if="c2pa">
+    <div class="detail-title">
+      {{ t("file_mode.content_credentials") }}
+    </div>
+    <div class="detail-row" v-if="dateCreated"><v-icon>$vuetify.icons.ic_exif_time</v-icon>{{ dateCreated }}</div>
+    <div class="detail-row" v-if="creator"><v-icon>$vuetify.icons.ic_exif_device_camera</v-icon>{{ creator }}</div>
+    <div class="detail-row" v-if="aiInferenceResult?.aiGenerated">
+      <v-icon>$vuetify.icons.ic_cc_ai</v-icon>{{ t("file_mode.ai_used") }}
+    </div>
+
+    <!-- {{ JSON.stringify(props.c2pa, undefined, 4) }} -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { AIInferenceResult, C2PAActionsAssertion, C2PAData } from "../../models/proof";
+import { computed } from "vue";
+import dayjs from "dayjs";
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  c2pa?: C2PAData;
+  aiInferenceResult?: AIInferenceResult;
+}>();
+
+const dateCreated = computed(() => {
+  try {
+    const manifests = Object.values(props.c2pa?.manifest_info.manifests ?? {});
+    for (const manifest of manifests) {
+      const createAssertion = manifest.assertions.find((a) => {
+        if (a.label === "c2pa.actions") {
+          const actions = (a.data as C2PAActionsAssertion)?.actions ?? [];
+          if (actions.find((a) => a.action === "c2pa.created")) {
+            return true;
+          }
+        }
+        return false;
+      });
+      if (createAssertion) {
+        const d = dayjs(Date.parse(manifest.signature_info.time));
+        return d.format("lll");
+      }
+    }
+  } catch (error) {}
+  return undefined;
+});
+
+const creator = computed(() => {
+  try {
+    const manifests = Object.values(props.c2pa?.manifest_info.manifests ?? {});
+    for (const manifest of manifests) {
+      for (const assertion of manifest.assertions) {
+        if (assertion.label === "c2pa.actions") {
+          const actions = (assertion.data as C2PAActionsAssertion)?.actions ?? [];
+          const a = actions.find((a) => a.action === "c2pa.created");
+          if (a) {
+            return a.softwareAgent;
+          }
+        }
+        return false;
+      }
+    }
+  } catch (error) {}
+  return undefined;
+});
+</script>
+
+<style lang="scss">
+@use "@/assets/css/chat.scss" as *;
+</style>
diff --git a/src/components/content-credentials/EXIFInfo.vue b/src/components/content-credentials/EXIFInfo.vue
new file mode 100644
index 0000000..e97d848
--- /dev/null
+++ b/src/components/content-credentials/EXIFInfo.vue
@@ -0,0 +1,113 @@
+<template>
+  <div v-if="exif">
+    <div class="detail-title">
+      {{ t("file_mode.exif_data") }}
+    </div>
+    <div class="detail-row" v-if="dateTime">
+      <v-icon>$vuetify.icons.ic_exif_time</v-icon>{{ dateTime }}
+    </div>
+    <div class="detail-row" v-if="location">
+      <v-icon>$vuetify.icons.ic_exif_location</v-icon><a :href="locationLink">{{ location }}</a>
+    </div>
+    <div class="detail-row" v-if="makeAndModel">
+      <v-icon>$vuetify.icons.ic_exif_device_camera</v-icon>{{ makeAndModel }}
+    </div>
+    <!-- Exif {{ JSON.stringify(props.exif, undefined, 4) }} -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import dayjs from "dayjs";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  exif?: { [key: string]: string | Object };
+}>();
+const { exif } = props;
+
+const getSimpleValue = (key: string): string | undefined => {
+  return exif ? (exif[key] as string)?.replace(/^"(.+(?="$))"$/, "$1") : undefined;
+};
+
+const toDegrees = (dms: string, direction: string) => {   
+    var parts = dms.split(/deg|min|sec/);
+    var d = parts[0];
+    var m = parts[1];
+    var s = parts[2];
+    var deg = (Number(d) + Number(m)/60 + Number(s)/3600).toFixed(6);
+    if (direction == "S" || direction == "W") {
+        deg = "-" + deg;
+    }
+    return deg;
+}
+
+const getLocation = () => {
+  try {
+    if (exif) {
+      const gpsLat = getSimpleValue("GPSLatitude");
+      const gpsLon = getSimpleValue("GPSLongitude");
+      if (gpsLat && gpsLon) {
+        const lat = toDegrees(gpsLat, getSimpleValue("GPSLatitudeRef") ?? "");
+        const lon = toDegrees(gpsLon, getSimpleValue("GPSLongitudeRef") ?? "");
+        return {lat, lon};
+      }
+    }
+  } catch (error) {}
+  return undefined;
+}
+
+const location = computed(() => {
+  const pos = getLocation();
+  if (pos) {
+    return pos.lat + " " + pos.lon;
+  }
+  return undefined;
+});
+
+const locationLink = computed(() => {
+  const pos = getLocation();
+  if (pos) {
+    return "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(pos.lat) + "," + encodeURIComponent(pos.lon);
+  }
+  return undefined;
+
+  
+});
+
+const dateTime = computed(() => {
+  try {
+    if (exif) {
+      const date = getSimpleValue("DateTimeOriginal");
+      if (date) {
+        return dayjs(Date.parse(date)).format("lll");
+      }
+    }
+  } catch (error) {}
+  return undefined;
+});
+
+const makeAndModel = computed(() => {
+  let result = "";
+  if (exif) {
+    const make = getSimpleValue("Make");
+    const model = getSimpleValue("Model");
+    if (make) {
+      result += make;
+    }
+    if (model) {
+      if (result.length > 0) {
+        result += ", ";
+      }
+      result += model;
+    }
+  }
+  return result.length > 0 ? result : undefined;
+});
+</script>
+
+<style lang="scss">
+@use "@/assets/css/chat.scss" as *;
+</style>
diff --git a/src/components/file_mode/AttachmentInfo.vue b/src/components/file_mode/AttachmentInfo.vue
index 3cd503f..2fdfa91 100644
--- a/src/components/file_mode/AttachmentInfo.vue
+++ b/src/components/file_mode/AttachmentInfo.vue
@@ -28,22 +28,35 @@
       </div>
     </div>
 
-    <C2PABadge :proof="attachment.proof" />
+    <C2PAInfo class="attachment-info__detail-box" v-if="hasC2PA" :c2pa="attachment.proof?.integrity?.c2pa" :ai-inference-result="attachment.proof?.ai?.inferenceResult" />
+    <EXIFInfo class="attachment-info__detail-box" v-if="hasExif" :exif="attachment.proof?.integrity?.exif" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { Attachment } from "../../models/attachment";
 import prettyBytes from "pretty-bytes";
-import C2PABadge from "../c2pa/C2PABadge.vue";
+import C2PAInfo from "../content-credentials/C2PAInfo.vue";
+import EXIFInfo from "../content-credentials/EXIFInfo.vue";
 import { useI18n } from "vue-i18n";
+import { computed } from "vue";
 
 const { t } = useI18n();
 
-defineProps<{
+const { attachment } = defineProps<{
   attachment: Attachment;
 }>();
 
+//console.error("ATTACHMENT", attachment.proof);
+
+const hasC2PA = computed(() => {
+  return attachment.proof?.integrity?.c2pa !== undefined;
+});
+
+const hasExif = computed(() => {
+  return attachment.proof?.integrity?.exif !== undefined;
+});
+
 const formatBytes = (bytes: number) => {
   return prettyBytes(bytes);
 };
diff --git a/src/components/file_mode/SendAttachmentsLayout.vue b/src/components/file_mode/SendAttachmentsLayout.vue
index 02b7183..b5b9abc 100644
--- a/src/components/file_mode/SendAttachmentsLayout.vue
+++ b/src/components/file_mode/SendAttachmentsLayout.vue
@@ -214,14 +214,13 @@
 import { defineComponent, reactive } from "vue";
 import messageMixin from "../messages/messageMixin";
 import { Attachment } from "../../models/attachment";
-import C2PABadge from "../c2pa/C2PABadge.vue";
 import { createUploadBatch } from "../../models/attachmentManager";
 import AttachmentInfo from "./AttachmentInfo.vue";
 import ThumbnailView from "./ThumbnailView.vue";
 
 export default defineComponent({
   mixins: [messageMixin],
-  components: { C2PABadge, AttachmentInfo, ThumbnailView },
+  components: { AttachmentInfo, ThumbnailView },
   emits: ["pick-file", "close"],
   props: {
     defaultRootMessageText: {
diff --git a/src/models/attachment.ts b/src/models/attachment.ts
index 66f57a2..0653edc 100644
--- a/src/models/attachment.ts
+++ b/src/models/attachment.ts
@@ -1,4 +1,5 @@
 import { ComputedRef, Ref } from "vue";
+import { Proof } from "./proof";
 
 export class UploadPromise<Type> {
   wrappedPromise: Promise<Type>;
@@ -48,7 +49,7 @@ export type Attachment = {
   scaledDimensions?: { width: number; height: number };
   useScaled: boolean;
   src?: string;
-  proof?: any;
+  proof?: Proof;
   sendInfo?: AttachmentSendInfo;
 };
 
diff --git a/src/models/proof.ts b/src/models/proof.ts
new file mode 100644
index 0000000..06b7888
--- /dev/null
+++ b/src/models/proof.ts
@@ -0,0 +1,40 @@
+export type AIInferenceResult = {
+  aiGenerated: boolean;
+  aiProbability: number;
+  humanProbability: number;
+}    
+
+export type C2PAActionsAssertion = {
+    actions: {
+        action: string;
+        softwareAgent?: string;
+    }[];
+}
+
+export type C2PAAssertion = {
+    label: string;
+    data: C2PAActionsAssertion | undefined;
+}
+
+export type C2PAManifest = {
+    assertions: C2PAAssertion[];
+    signature_info: {
+        time: string;
+    }
+}
+
+export type C2PAManifestInfo = {
+    active_manifest: string;
+    manifests: {[key: string]: C2PAManifest};
+}
+
+export type C2PAData = {
+    manifest_info: C2PAManifestInfo;
+}
+
+export type Proof = {
+    name?: string;
+    json?: string;
+    integrity?: { pgp?: any; c2pa?: any; exif?: {[key: string]: string | Object}; opentimestamps?: any };
+    ai?: { inferenceResult?: AIInferenceResult};
+}