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.

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>

For additional configuration options and more examples, please visit our GitHub repository. This will help you explore how to further customize Capture Eye to best fit your needs and enhance the user experience on your platform.

Customizing Your Display

To customize the Capture Eye widget, 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 NextCapture SDK

Last updated 2 days ago

Capture Eye Widget

Add Capture Eye To Your Website

Customizing Your Display