Spaces:
Running
on
T4
Running
on
T4
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta | |
| name="viewport" | |
| content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1" | |
| /> | |
| <!-- Bootstrap CSS --> | |
| <link | |
| href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | |
| rel="stylesheet" | |
| integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" | |
| crossorigin="anonymous" | |
| /> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | |
| integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" | |
| crossorigin="anonymous" | |
| ></script> | |
| <link rel="stylesheet" href="style.css" type="text/css" /> | |
| <script | |
| type="module" | |
| src="https://display.truepic.com/truepic_display.es.js" | |
| ></script> | |
| <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 | |
| src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.min.js" | |
| async="" | |
| ></script> | |
| </head> | |
| <body> | |
| <div class="container-fluid mt-2" id="head"> | |
| <div class="container-xl"> | |
| <div class="row"> | |
| <div class="col position-relative"> | |
| <div class="row"> | |
| <div class="col"> | |
| <h1> | |
| Watermarked Content Credentials | |
| <div class="badge bg-secondary">experimental</div> | |
| </h1> | |
| <p> | |
| Generate images with C2PA content credentials and Steg.AI | |
| digital watermarking for enhanced AI label robustness | |
| </p> | |
| <div class="alert alert-primary d-md-none" 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> | |
| </div> | |
| <div class="d-flex flex-row position-absolute bottom-0 tabs"> | |
| <div id="generateTab" class="active"> | |
| <img src="images/generate_icon.svg" /> Generate | |
| </div> | |
| <div id="verifyTab"> | |
| <img src="images/verify_icon.svg" /> Verify | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col right-column d-none d-md-block"> | |
| <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" /> Joining the conversation in | |
| the Community tab | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-fluid" id="body"> | |
| <div class="container-xl"> | |
| <div class="row"> | |
| <div class="col" style="min-width: 0; padding-right: 0"> | |
| <div class="display-generate"> | |
| <div class="image-container"> | |
| <img src="images/placeholder.png" class="placeholder" /> | |
| <div class="spinner" style="display: none"> | |
| <img src="images/spinner.svg" /> | |
| <h3 class="mt-3">Generating image...</h3> | |
| <p class="small">In some cases, this may take 1-2 minutes.</p> | |
| </div> | |
| </div> | |
| <div class="alert alert-secondary action-menu" role="alert"> | |
| <div class="row"> | |
| <div class="col"> | |
| <p class="mb-0"> | |
| <strong | |
| >Download the signed, watermarked image to share | |
| it.</strong | |
| > | |
| </p> | |
| <p class="mb-0"> | |
| Use the verify tab to view the details for an image you | |
| have or that's been shared with you. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="row mt-4"> | |
| <div class="col flex-grow-0 nopadding ml-13"> | |
| <a id="download-button" class="btn btn-outline-primary" | |
| >Download image <img src="images/download_icon.svg" | |
| /></a> | |
| </div> | |
| <div class="col"> | |
| <button | |
| type="button" | |
| id="goto-verify-button" | |
| class="btn btn-outline-primary" | |
| > | |
| Go to verify tab <img src="images/link_icon.svg" /> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="display-verify"> | |
| <div id="original-image"> | |
| <div class="row mt-5"> | |
| <div class="col mb-4"> | |
| <h2>Uploaded image</h2> | |
| </div> | |
| </div> | |
| <div class="row pb-4"> | |
| <div class="col flex-grow-0"> | |
| <img id="uploaded-image" class="thumbnail" /> | |
| </div> | |
| <div class="col"> | |
| <div id="content-crendentials-icon"></div> | |
| Content Credentials<br /> | |
| <div id="digital-watermark-icon"></div> | |
| Digital watermark | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-3" id="resultLabel"> | |
| <h2 class="mb-4">Result</h2> | |
| <div | |
| class="alert alert-secondary" | |
| role="alert" | |
| id="verifyResultDescription" | |
| ></div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="images/placeholder.png" class="placeholder" /> | |
| <div class="spinner" style="display: none"> | |
| <img src="images/spinner.svg" /> | |
| <h3 class="mt-3">Verifying image...</h3> | |
| <p class="small">In some cases, this may take 1-2 minutes.</p> | |
| </div> | |
| </div> | |
| <div class="output-container mt-5" style="display: none"> | |
| <h3 class="mt-4 mb-4">Verification output</h3> | |
| <div id="verification-output"></div> | |
| <h3 class="mt-4 pt-4 mb-4" id="certificates-h3"> | |
| Certificates | |
| </h3> | |
| <div class="certificate" id="certificate-output"> | |
| <h4>Certificate chain</h4> | |
| <ul id="certificate-list"></ul> | |
| <h4>Details</h4> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="col mt-4 pt-4" id="logo"> | |
| <img src="images/logo.png" /> | |
| <p class="small mt-3 mb-5"> | |
| This is a conceptual application meant for demonstration | |
| purposes only. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="col right-column"> | |
| <div class="display-generate"> | |
| <form class="image-gen-form"> | |
| <div class="form-group mb-3"> | |
| <label for="prompt">Image prompt</label> | |
| <textarea id="prompt" class="form-control"></textarea> | |
| </div> | |
| <div class="form-group mb-3"> | |
| <label>Model</label> | |
| <div class="custom-select"> | |
| <select id="model" class="form-control"> | |
| <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> | |
| </div> | |
| <div class="form-check mb-3"> | |
| <input | |
| class="form-check-input" | |
| type="checkbox" | |
| value="" | |
| id="generate-terms" | |
| /> | |
| <label class="form-check-label" for="defaultCheck1"> | |
| By using this demo you agree to the terms and conditions of | |
| <a | |
| href="https://truepic.com/terms-and-conditions/" | |
| target="_blank" | |
| >Truepic</a | |
| > | |
| and | |
| <a href="https://steg.ai/tos.html" target="_blank" | |
| >Steg.AI</a | |
| > | |
| </label> | |
| </div> | |
| <button | |
| type="submit" | |
| class="btn btn-primary" | |
| id="generate-button" | |
| > | |
| Submit | |
| </button> | |
| <div class="error mt-3"> | |
| Something went wrong. Please try again. | |
| </div> | |
| </form> | |
| <div class="how-it-works"> | |
| <p><strong>How it works</strong></p> | |
| <p> | |
| When an image is generated and signed with C2PA Content | |
| Credentials, an imperceptible digital watermark, powered by | |
| Steg.AI, is also added to the image pixels. The watermark | |
| serves as a backup in case the Content Credentials are lost, | |
| such as when sharing the image between currently incompatible | |
| services like text messaging. By using the watermark, it is | |
| possible to retrieve a restored, signed version of the image | |
| from before the data was decoupled, which you can try in the | |
| verify tab. | |
| </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> | |
| <div class="display-verify"> | |
| <form class="verify-upload-form" enctype="multipart/form-data"> | |
| <div class="form-group mb-3"> | |
| <label>Upload image</label> | |
| <input | |
| type="file" | |
| class="form-control" | |
| name="fileUpload" | |
| id="fileUpload" | |
| accept="image/png, image/jpeg" | |
| /> | |
| </div> | |
| <div class="form-check mb-3"> | |
| <input | |
| class="form-check-input" | |
| type="checkbox" | |
| value="" | |
| id="verify-terms" | |
| /> | |
| <label class="form-check-label" for="defaultCheck1"> | |
| By using this demo you agree to the terms and conditions of | |
| <a | |
| href="https://truepic.com/terms-and-conditions/" | |
| target="_blank" | |
| >Truepic</a | |
| > | |
| and | |
| <a href="https://steg.ai/tos.html" target="_blank" | |
| >Steg.AI</a | |
| > | |
| </label> | |
| </div> | |
| <button | |
| type="submit" | |
| class="btn btn-primary" | |
| id="verify-button" | |
| > | |
| Submit | |
| </button> | |
| <div class="error mt-3"> | |
| Something went wrong. Please try again. | |
| </div> | |
| </form> | |
| <div class="how-it-works"> | |
| <p><strong>How it works</strong></p> | |
| <p> | |
| When an image is generated and signed with C2PA Content | |
| Credentials, an imperceptible digital watermark, powered by | |
| Steg.AI, is also added to the image pixels. The watermark | |
| serves as a backup in case the Content Credentials are lost, | |
| such as when sharing the image between currently incompatible | |
| services like text messaging. By using the watermark, it is | |
| possible to retrieve a restored, signed version of the image | |
| from before the data was decoupled, which you can try in the | |
| verify tab. | |
| </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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| <script type="text/javascript" src="script.js"></script> | |
| </html> | |