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> | |
| </head> | |
| <body> | |
| <section id="header"> | |
| <h1>Generate images with signed AI attribution</h1> | |
| <p> | |
| Show your interest by liking this space and joining the conversation in | |
| the Community tab! | |
| </p> | |
| </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" id="verification-output"></div> | |
| <div class="certificate" id="certificate-output"> | |
| <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"> | |
| <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> | |
| <div class="description"> | |
| <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> | |
| In addition to the generated image and the content credentials | |
| overlay, we also provide the raw verification output which | |
| contains details not displayed in the Content Credentials overlay. | |
| The Certificates tab contains details about the certificate used | |
| for signing. Truepic maintains the first and only purpose-built | |
| C2PA certificate authority. | |
| </p> | |
| <p>For more information, please visit our blog post!</p> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| </body> | |
| </html> | |