Capture Eye

PreviousFeature List NextInstallation and Integration

Last updated 4 months ago

Capture Eye

Capture Eye powered by Numbers Protocol is a robust digital content frame designed to enhance control and generate revenue from every display. This innovative widget, appearing when hovering over an image, provides users with easy access to authenticity details, copyright information, and provenance verified on the blockchain.

It includes customizable action buttons for donations, purchases, or licensing, and serves as a hub for engaging audiences through broadcasting information. Capture Eye also verifies whether content is AI-generated or human-crafted, building trust and transparency in digital media.

Live demo

Click on Run Pen to see Capture Eye in live. Hover over the image or video in desktop browser to see the Capture Eye button.

Add Capture Eye To Your Website

Integrating Capture Eye into your website is straightforward and can be done in just a few steps:

Register assets: Before using Capture Eye, make sure your assets are already registered via Capture toolkits (Cam, Dashboard, or SDK).
Include the Module: Add the Capture Eye JavaScript module to your page by inserting the script tag in the <head> section of your HTML. This module is hosted on the Numbers Protocol's CDN, ensuring that your integration remains up-to-date with the latest version.
Embed the HTML Code: Use the provided HTML snippet in the <body> of your website. This snippet includes the <capture-eye> component with a unique nid that links your content to its blockchain record, along with a media tag to display your media. You may customize the HTML code to display the content in your desired format. This setup enables Capture Eye to showcase content with verified authenticity and provenance.

// Example code

<head>
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@numbersprotocol/capture-eye@latest/dist/capture-eye.bundled.js"
  ></script>
</head>
<body>
  <capture-eye
    nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
  >
    <media-viewer
      width="600px"
      src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
    />
  </capture-eye>
</body>

See Installation and Integration page for detailed guide on how to add Capture Eye to your website.

Customizing Your Display

To customize the the asset provenance data fetched and displayed by the Capture Eye, configure the nit_commit_custom JSON field during asset registration via the POST API. This allows the widget to recognize and display your customized values accurately. The JSON structure should look like this:

{
    "captureEyeCustom": [
        {
            "field": "AI Model",
            "value": "stable-diffusion-xl",
            "iconSource": "[Your Icon URL Here]"
        },
        {
            "field": "Pipeline",
            "value": "responsible-generative-ai",
            "url": "[Your URL Here]",
            "iconSource": "[Your Icon URL Here]"
        }
    ],
    "customizedMetadata": {
        ...
    }
}

Replace [Your Icon URL Here] and [Your URL Here] with your specific details. This configuration ensures that the Capture Eye widget accurately reflects the customized attributes of your digital assets. Below is a asset registration API example with customized Capture Eye display.

IMPORTANT It is strongly suggested that you limit the total number of characters for the field plus value to less than 26 characters so they can be displayed on the same line.

curl -s -X POST 'https://api.numbersprotocol.io/api/v3/assets/' \
     -H "Authorization: token YOUR_CAPTURE_TOKEN" \
     -F 'asset_file=@/tmp/demo.jpg' \
     -F 'meta={
        "proof": {
            "hash": "",
            "mimeType": "",
            "timestamp": ""
        },
        "information": [
            {
                "provider": "Capture API",
                "name": "version",
                "value": "v3"
            }
        ]
     }' \
     -F 'caption=This is an example caption.' \
     -F 'headline=This is an example headline.' \
     -F 'nit_commit_custom={
            "captureEyeCustom": [
                {
                    "field": "AI Model",
                    "value": "stable-diffusion-xl",
                    "iconSource": "[Your Icon URL Here]"
                },
                {
                    "field": "Pipeline",
                    "value": "responsible-generative-ai",
                    "url": "[Your URL Here]",
                    "iconSource": "[Your Icon URL Here]"
                }
            ],
            "customizedMetadata": {
                ...
            }
         }'

PreviousFeature List NextInstallation and Integration

Last updated 4 months ago

Live demo

Click on Run Pen to see Capture Eye in live. Hover over the image or video in desktop browser to see the Capture Eye button.

Add Capture Eye To Your Website

Integrating Capture Eye into your website is straightforward and can be done in just a few steps:

Register assets: Before using Capture Eye, make sure your assets are already registered via Capture toolkits (Cam, Dashboard, or SDK).
Include the Module: Add the Capture Eye JavaScript module to your page by inserting the script tag in the <head> section of your HTML. This module is hosted on the Numbers Protocol's CDN, ensuring that your integration remains up-to-date with the latest version.
Embed the HTML Code: Use the provided HTML snippet in the <body> of your website. This snippet includes the <capture-eye> component with a unique nid that links your content to its blockchain record, along with a media tag to display your media. You may customize the HTML code to display the content in your desired format. This setup enables Capture Eye to showcase content with verified authenticity and provenance.

// Example code

<head>
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@numbersprotocol/capture-eye@latest/dist/capture-eye.bundled.js"
  ></script>
</head>
<body>
  <capture-eye
    nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
  >
    <media-viewer
      width="600px"
      src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"
    />
  </capture-eye>
</body>

See Installation and Integration page for detailed guide on how to add Capture Eye to your website.

Customizing Your Display

{
    "captureEyeCustom": [
        {
            "field": "AI Model",
            "value": "stable-diffusion-xl",
            "iconSource": "[Your Icon URL Here]"
        },
        {
            "field": "Pipeline",
            "value": "responsible-generative-ai",
            "url": "[Your URL Here]",
            "iconSource": "[Your Icon URL Here]"
        }
    ],
    "customizedMetadata": {
        ...
    }
}

IMPORTANT It is strongly suggested that you limit the total number of characters for the field plus value to less than 26 characters so they can be displayed on the same line.

curl -s -X POST 'https://api.numbersprotocol.io/api/v3/assets/' \
     -H "Authorization: token YOUR_CAPTURE_TOKEN" \
     -F 'asset_file=@/tmp/demo.jpg' \
     -F 'meta={
        "proof": {
            "hash": "",
            "mimeType": "",
            "timestamp": ""
        },
        "information": [
            {
                "provider": "Capture API",
                "name": "version",
                "value": "v3"
            }
        ]
     }' \
     -F 'caption=This is an example caption.' \
     -F 'headline=This is an example headline.' \
     -F 'nit_commit_custom={
            "captureEyeCustom": [
                {
                    "field": "AI Model",
                    "value": "stable-diffusion-xl",
                    "iconSource": "[Your Icon URL Here]"
                },
                {
                    "field": "Pipeline",
                    "value": "responsible-generative-ai",
                    "url": "[Your URL Here]",
                    "iconSource": "[Your Icon URL Here]"
                }
            ],
            "customizedMetadata": {
                ...
            }
         }'

Capture Eye

Capture Eye

Capture Eye Widget

Live demo

Add Capture Eye To Your Website

Customizing Your Display

Capture Eye Widget

Live demo

Add Capture Eye To Your Website

Customizing Your Display