Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Generate images with signed AI attribution</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <link rel="stylesheet" href="json_viewer.css" /> | |
| <script src="https://unpkg.com/@peculiar/x509"></script> | |
| <script type="text/javascript" src="json_viewer.js"></script> | |
| <script type="module" src="script.js"></script> | |
| <script | |
| type="module" | |
| src="https://display.truepic.com/truepic_display.es.js" | |
| ></script> | |
| <script | |
| src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.min.js" | |
| async="" | |
| ></script> | |
| </head> | |
| <body> | |
| <section id="header"> | |
| <div style="display: flex"> | |
| <div style="flex-grow: 1"> | |
| <h1>GenAI with Content Credentials</h1> | |
| <p> | |
| Add AI credentials to your generated images using C2PA powered by | |
| Truepic | |
| </p> | |
| </div> | |
| <div class="alert alert-primary" role="alert"> | |
| <h4>Support our work!</h4> | |
| <p> | |
| <img src="images/heart_icon.svg" /> Like this Space in the nav above | |
| </p> | |
| <p> | |
| <img src="images/wave_icon.svg" /> Join the conversation in the | |
| Community tab | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="content"> | |
| <div id="column-one"> | |
| <div class="container"> | |
| <div class="output"> | |
| <div id="image-container"> | |
| <img src="images/placeholder.png" id="placeholder" /> | |
| <img | |
| src="images/spinner.svg" | |
| id="spinner" | |
| style="display: none" | |
| /> | |
| </div> | |
| </div> | |
| <div style="display: flex"> | |
| <div class="parameters"> | |
| Image prompt: “<span class="prompt"></span>”<br /> | |
| Model: <span class="model"></span> | |
| </div> | |
| <a href="#" target="_blank" id="download-link" | |
| ><img src="images/download.png" id="download" | |
| /></a> | |
| </div> | |
| </div> | |
| <section class="verification-details"> | |
| <nav> | |
| <ul> | |
| <li> | |
| <a class="active" id="verification-nav">Verification output</a> | |
| </li> | |
| <li><a id="certificate-nav">Certificate</a></li> | |
| </ul> | |
| </nav> | |
| <div class="verification"> | |
| <p> | |
| The raw verification response, which contains details not | |
| displayed in the Content Credentials overlay. | |
| </p> | |
| <div id="verification-output"></div> | |
| </div> | |
| <div class="certificate" id="certificate-output"> | |
| <p> | |
| Details about the certificate used for signing.<br /> | |
| Truepic maintains the first and only purpose-built C2PA | |
| certificate authority. | |
| </p> | |
| <p><strong style="font-weight: 600">Certificate chain</strong></p> | |
| <ul id="certificate-list"></ul> | |
| <p><strong style="font-weight: 600">Details</strong></p> | |
| <div class="details"> | |
| <strong>Basic info</strong> | |
| <div> | |
| <label>Type</label> | |
| X.509 Certificate | |
| </div> | |
| <div> | |
| <label>Serial Number</label> | |
| <div class="serialNumber"></div> | |
| </div> | |
| <div> | |
| <label>Issued</label> | |
| <div class="issued"></div> | |
| </div> | |
| <div> | |
| <label>Expired</label> | |
| <div class="expired"></div> | |
| </div> | |
| <strong>Subject</strong> | |
| <div> | |
| <label>Common Name</label> | |
| <div class="subjectCommonName"></div> | |
| </div> | |
| <div> | |
| <label>Organization</label> | |
| <div class="subjectOrganization"></div> | |
| </div> | |
| <div> | |
| <label>Organization Unit</label> | |
| <div class="subjectOrganizationUnit"></div> | |
| </div> | |
| <div> | |
| <label>Country</label> | |
| <div class="subjectCountry"></div> | |
| </div> | |
| <strong>Issuer</strong> | |
| <div> | |
| <label>Common Name</label> | |
| <div class="issuerCommonName"></div> | |
| </div> | |
| <div> | |
| <label>Organization</label> | |
| <div class="issuerOrganization"></div> | |
| </div> | |
| <div> | |
| <label>Organization Unit</label> | |
| <div class="issuerOrganizationUnit"></div> | |
| </div> | |
| <div> | |
| <label>Country</label> | |
| <div class="issuerCountry"></div> | |
| </div> | |
| <strong>Public Key Info</strong> | |
| <div> | |
| <label>Algorithm</label> | |
| <div class="algorithm"></div> | |
| </div> | |
| <div id="modulusContainer"> | |
| <label>Modulus</label> | |
| <div class="modulus"></div> | |
| </div> | |
| <div id="curveContainer"> | |
| <label>Curve</label> | |
| <div class="namedCurve"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <img src="images/logo.png" id="logo" /> | |
| </div> | |
| <div id="column-two"> | |
| <div class="form"> | |
| <form class="text-gen-form"> | |
| <label for="text-gen-input">Image prompt</label> | |
| <textarea id="text-gen-input"></textarea> | |
| <label>Model</label> | |
| <div class="custom-select"> | |
| <select id="model"> | |
| <option disabled selected value>Select</option> | |
| <option value="runwayml/stable-diffusion-v1-5,1.5"> | |
| runwayml/stable-diffusion-v1-5 | |
| </option> | |
| <option value="CompVis/stable-diffusion-v1-4,1.4"> | |
| CompVis/stable-diffusion-v1-4 | |
| </option> | |
| <option value="stabilityai/stable-diffusion-2-1,2.1"> | |
| stabilityai/stable-diffusion-2-1 | |
| </option> | |
| </select> | |
| </div> | |
| <button id="text-gen-submit">Submit</button> | |
| </form> | |
| </div> | |
| <div class="description"> | |
| <p><strong>How it works</strong></p> | |
| <p> | |
| Generate an image using a hosted model and add an AI disclosure to | |
| the file. This information, referred to as Content Credentials, | |
| serves as a nutrition label for the content. We employ the | |
| tamper-evident open C2PA standard, which utilizes PKI and is | |
| resistant to forgery. You can download and transfer the image to | |
| supported editing tools like Photoshop, where your edit history can | |
| also be securely added to the file. This historical information, | |
| known as provenance, accompanies your media and can be extracted and | |
| displayed using a tool or website. | |
| </p> | |
| <p> | |
| Want to know more? Read our | |
| <a | |
| href="https://huggingface.co/blog/alicia-truepic/identify-ai-generated-content" | |
| target="_blank" | |
| >community blog post</a | |
| >. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| </body> | |
| </html> | |