|
<!DOCTYPE html> |
|
<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"> |
|
|
|
|
|
<link |
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" |
|
rel="stylesheet" |
|
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" |
|
crossorigin="anonymous" |
|
/> |
|
|
|
<script |
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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> |
|
This is a proof-of-concept Space to generate images with |
|
<a href="https://c2pa.org" target="_blank">C2PA</a> |
|
content credentials and Steg.AI digital watermarking for |
|
enhanced AI label robustness. Check out our |
|
<a href="https://huggingface.co/spaces/Truepic/ai-content-credentials" |
|
target="_blank">C2PA Space</a> to learn more about securing |
|
metadata into images. |
|
</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 class="col flex-grow-0"> |
|
<a id="download-button" class="btn btn-outline-primary" |
|
>Download image <img src="images/download_icon.svg" |
|
/></a> |
|
</div> |
|
<div class="col flex-grow-0"> |
|
<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> |
|
|
