keanu-weblite/src/components/content-credentials/CCSummary.vue
2025-09-09 12:02:18 +02:00

55 lines
1.6 KiB
Vue

<template>
<div class="cc-summary" v-if="flags.length > 0 && infoText.length > 0">
<v-icon class="intervention-icon">{{
showCheck ? "$vuetify.icons.ic_intervention_check" : "$vuetify.icons.ic_intervention"
}}</v-icon
><span class="common-caption-small" v-html="infoText" />
</div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { ProofHintFlags } from "../../models/proof";
const { multiple, flags } = defineProps<{
multiple: boolean;
flags: ProofHintFlags[];
}>();
const showCheck = computed(() => {
if (!multiple && flags.length == 1) {
return flags[0].generatorSource === "c2pa";
} else if (multiple) {
return flags.some((f) => f.generatorSource === "c2pa")
}
return false;
});
const infoText = computed(() => {
if (!multiple && flags.length == 1) {
if (flags[0].generator === "ai") {
return "<b>This image is generated by AI.</b> Take a closer look at the file details.";
} else if (flags[0].generator === "screenshot") {
return "<b>This is a screenshot.</b> Take a closer look at the file details.";
}
} else if (flags.some((f) => f.generator === "ai")) {
return "<b>Contains AI generated media.</b> Take a closer look at the file details for each.";
} else if (flags.some((f) => f.generator === "screenshot")) {
return "<b>Contains screenshots.</b> Take a closer look at the file details for each.";
}
return "TODO - Content Credentials Info";
});
</script>
<style lang="scss">
@use "@/assets/css/chat.scss" as *;
.cc-summary {
text-align: start;
.intervention-icon {
width: 12px;
height: 12px;
display: inline-flex;
}
}
</style>