feat(src): add AI generated badge support

Add support for an AI generated badge to indicate content generated by AI.
numbersprotocol · Jan 20, 2025 · d7b6996 · d7b6996
1 parent 4918a3a
commit d7b6996
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 2 deletions.
diff --git a/dev/index.html b/dev/index.html
@@ -85,11 +85,11 @@
       </capture-eye>
 
       <capture-eye
-        nid="bafybeiclalewdmcdj2lwj2wtsxyacncg2vbpoorllsgkvpc3ercocqea6i"
+        nid="bafybeick7youmonm56rxlzi2ibodj3trrpimtr23gr5ys5tbgvbmbkfb4a"
         position="top left"
       >
         <media-viewer
-          src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeiclalewdmcdj2lwj2wtsxyacncg2vbpoorllsgkvpc3ercocqea6i"
+          src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeick7youmonm56rxlzi2ibodj3trrpimtr23gr5ys5tbgvbmbkfb4a"
         />
       </capture-eye>
 

diff --git a/src/asset/asset-model.ts b/src/asset/asset-model.ts
@@ -11,6 +11,7 @@ export interface AssetModel {
   captureTime?: string;
   captureLocation?: string;
   backendOwnerName?: string;
+  digitalSourceType?: string;
   usedBy?: string;
   captureEyeCustom?: Array<CaptureEyeCustomItem>;
   hasNftProduct?: boolean;

diff --git a/src/asset/asset-service.ts b/src/asset/asset-service.ts
@@ -56,6 +56,7 @@ export async function fetchAsset(nid: string): Promise<AssetModel | undefined> {
       captureLocation:
         data.fullAssetTree?.['_api_c2_assetTree.assetLocationCreated'],
       backendOwnerName: data.backend_owner_name,
+      digitalSourceType: data.digitalSourceType,
       usedBy: data.usedBy,
       captureEyeCustom,
     };

diff --git a/src/constant.ts b/src/constant.ts
@@ -13,6 +13,7 @@ interface Url {
   blockchainIcon: string;
   txIcon: string;
   curatorIcon: string;
+  generatedViAi: string;
   defaultEngagementImage: string;
   defaultEngagementLink: string;
 }
@@ -73,6 +74,7 @@ export const Constant: ConstantType = {
     blockchainIcon: `${numbersCdnUrl}/capture-eye/capture-eye-blockchain-icon.svg`,
     txIcon: `${numbersCdnUrl}/capture-eye/capture-eye-tx-icon.svg`,
     curatorIcon: `${numbersCdnUrl}/capture-eye/capture-eye-curator-icon.png`,
+    generatedViAi: `${numbersCdnUrl}/capture-eye/generated-via-ai.png`,
     defaultEngagementImage: `${numbersCdnUrl}/capture-eye/capture-ad.png`,
     defaultEngagementLink: 'https://captureapp.xyz',
   },

diff --git a/src/modal/modal-styles.ts b/src/modal/modal-styles.ts
@@ -130,6 +130,20 @@ export function getModalStyles() {
       display: block;
     }
 
+    .badge-container {
+      display: flex;
+      position: absolute;
+      top: 16px;
+      right: 24px;
+      gap: 4px;
+    }
+
+    .badge-container img {
+      width: 32px;
+      height: 32px;
+      display: block;
+    }
+
     .profile-container {
       display: flex;
       align-items: center;

diff --git a/src/modal/modal.ts b/src/modal/modal.ts
@@ -216,6 +216,22 @@ export class CaptureEyeModal extends LitElement {
     return this.layout == Constant.layout.original;
   }
 
+  private renderBadges() {
+    const generatedViaAi = this._asset?.digitalSourceType === 'trainedAlgorithmicMedia'
+      ? html`<img
+          src="${Constant.url.generatedViAi}"
+          alt="Generated via AI"
+          title="Generated via AI"
+        />`
+      : html``;
+
+    return html`
+      <div class="badge-container">
+        ${generatedViaAi}
+      </div>
+    `;
+  }
+
   private renderCreatorOrAssetSourceType() {
     // Render creator and showcase link if layout is original, otherwise render assetSourceType
     return this.isOriginal()
@@ -497,6 +513,7 @@ export class CaptureEyeModal extends LitElement {
         <div class="modal-container">
           <div class="modal-content">
             <div class="card">
+              ${this.renderBadges()}
               ${this.renderTop()}
               ${this._asset?.captureEyeCustom &&
               this._asset.captureEyeCustom.length > 0

diff --git a/src/test/modal_test.ts b/src/test/modal_test.ts
@@ -26,6 +26,7 @@ suite('capture-eye-modal', () => {
         <div class="modal-container">
           <div class="modal-content">
             <div class="card">
+              <div class="badge-container"></div>
               <div class="section">
                 <div class="section-title">Produced by</div>
                 <div class="profile-container">
@@ -449,5 +450,29 @@ suite('capture-eye-modal', () => {
       '.profile-img'
     ) as HTMLImageElement;
     expect(img.src).to.equal(assetData.thumbnailUrl);
+
+    const badge = el.shadowRoot?.querySelector(
+      'div.badge-container img[alt="Generated via AI"]'
+    );
+
+    expect(badge).to.null;
+  });
+
+  test('should render generated via AI correctly', async () => {
+    const el = await fixture<CaptureEyeModal>(html`
+      <capture-eye-modal></capture-eye-modal>
+    `);
+
+    el.updateAsset({
+      digitalSourceType: 'trainedAlgorithmicMedia',
+    });
+
+    await el.updateComplete;
+
+    const badge = el.shadowRoot!.querySelector(
+      'div.badge-container img[alt="Generated via AI"]'
+    );
+
+    expect(badge).to.exist;
   });
 });