|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<meta name="viewport" content="width=device-width, initial-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> |
|
</head> |
|
<body> |
|
<div class="container-fluid mt-2" id="head"> |
|
<div class="container"> |
|
<div class="row"> |
|
<div class="col position-relative"> |
|
<div class="row"> |
|
<div class="col"> |
|
<h1> |
|
Title of Space |
|
<div class="badge bg-secondary">experimental</div> |
|
</h1> |
|
<p> |
|
Brief intro explaining the high level concept of this tool. |
|
Eget consequat at proin sed dolor morbi urna. Quam aliquam |
|
imperdiet est lobortis lectus sit vel. |
|
</p> |
|
</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"> |
|
<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"> |
|
<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" /> |
|
<img |
|
src="images/spinner.svg" |
|
class="spinner" |
|
style="display: none" |
|
/> |
|
</div> |
|
|
|
<div class="alert alert-secondary action-menu" role="alert"> |
|
<div class="row"> |
|
<div class="col"> |
|
<p><strong>Non consectetur erat in non et in?</strong></p> |
|
<p>Ornare a est accumsan et platea quis rhoncus.</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"> |
|
Content Credentials |
|
<span id="contentCredentialResults"></span><br /> |
|
Digital watermark <span id="digitalWatermarkResults"></span> |
|
</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" /> |
|
<img |
|
src="images/spinner.svg" |
|
class="spinner" |
|
style="display: none" |
|
/> |
|
</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 demo is a provisional version for demo 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="terms" |
|
/> |
|
<label class="form-check-label" for="defaultCheck1"> |
|
By using this demo you agree to the |
|
<a href="#">Terms and Conditions of Truepic and Steg.AI</a> |
|
</label> |
|
</div> |
|
|
|
<button type="submit" class="btn btn-primary">Submit</button> |
|
</form> |
|
|
|
<div class="how-it-works"> |
|
<p><strong>How it works</strong></p> |
|
|
|
<p> |
|
Images are generated using a hosted model and AI disclosure is |
|
added 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 community blog post.</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" |
|
/> |
|
</div> |
|
|
|
<div class="form-check mb-3"> |
|
<input |
|
class="form-check-input" |
|
type="checkbox" |
|
value="" |
|
id="terms" |
|
/> |
|
<label class="form-check-label" for="defaultCheck1"> |
|
By using this demo you agree to the |
|
<a href="#">Terms and Conditions of Truepic and Steg.AI</a> |
|
</label> |
|
</div> |
|
|
|
<button type="submit" class="btn btn-primary">Submit</button> |
|
</form> |
|
<div class="how-it-works"> |
|
<p><strong>How it works</strong></p> |
|
|
|
<p> |
|
Images are generated using a hosted model and AI disclosure is |
|
added 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 community blog post.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
|
|
<script> |
|
const generateTab = document.querySelector("#generateTab"); |
|
const verifyTab = document.querySelector("#verifyTab"); |
|
const displayVerify = document.querySelectorAll(".display-verify"); |
|
const displayGenerate = document.querySelectorAll(".display-generate"); |
|
const uploadForm = document.querySelector(".verify-upload-form"); |
|
const imageGenForm = document.querySelector(".image-gen-form"); |
|
const imagePrompt = document.getElementById("prompt"); |
|
const model = document.getElementById("model"); |
|
const generateImageContainer = document.querySelector( |
|
".display-generate .image-container" |
|
); |
|
const generateActionMenu = document.querySelector(".action-menu"); |
|
const verifyImageContainer = document.querySelector( |
|
".display-verify .image-container" |
|
); |
|
const uploadedImageContainer = document.querySelector("#original-image"); |
|
const downloadButton = document.getElementById("download-button"); |
|
const verifyResultDescription = document.getElementById( |
|
"verifyResultDescription" |
|
); |
|
const verificationOutput = document.getElementById("verification-output"); |
|
const certificateList = document.getElementById("certificate-list"); |
|
const outputContainer = document.querySelector(".output-container"); |
|
|
|
var certificates = []; |
|
|
|
generateTab.addEventListener("click", (event) => { |
|
event.target.classList.add("active"); |
|
verifyTab.classList.remove("active"); |
|
|
|
setGenerateElementsDisplay("block"); |
|
setVerifyElementsDisplay("none"); |
|
}); |
|
|
|
verifyTab.addEventListener("click", (event) => { |
|
event.target.classList.add("active"); |
|
generateTab.classList.remove("active"); |
|
|
|
setGenerateElementsDisplay("none"); |
|
setVerifyElementsDisplay("block"); |
|
}); |
|
|
|
document |
|
.getElementById("goto-verify-button") |
|
.addEventListener("click", (event) => { |
|
verifyTab.classList.add("active"); |
|
generateTab.classList.remove("active"); |
|
|
|
setVerifyElementsDisplay("block"); |
|
setGenerateElementsDisplay("none"); |
|
}); |
|
|
|
function setGenerateElementsDisplay(displayStatus) { |
|
displayGenerate.forEach((item) => { |
|
item.style.display = displayStatus; |
|
}); |
|
} |
|
|
|
function setVerifyElementsDisplay(displayStatus) { |
|
displayVerify.forEach((item) => { |
|
item.style.display = displayStatus; |
|
}); |
|
} |
|
|
|
uploadForm.addEventListener("submit", (e) => { |
|
e.preventDefault(); |
|
submitForm(); |
|
}); |
|
|
|
function submitForm() { |
|
const file = document.getElementById("fileUpload").files[0]; |
|
|
|
let fileReader = new FileReader(); |
|
fileReader.readAsDataURL(file); |
|
fileReader.onload = function () { |
|
document |
|
.getElementById("uploaded-image") |
|
.setAttribute("src", fileReader.result); |
|
}; |
|
|
|
placeholder = document.querySelector(".display-verify .placeholder"); |
|
spinner = document.querySelector(".display-verify .spinner"); |
|
|
|
if (placeholder) placeholder.remove(); |
|
if (document.getElementById("result")) |
|
document.getElementById("result").remove(); |
|
spinner.style.display = "block"; |
|
|
|
outputContainer.style.display = "none"; |
|
document.getElementById("resultLabel").style.display = "none"; |
|
uploadedImageContainer.style.display = "none"; |
|
|
|
const formData = new FormData(uploadForm); |
|
|
|
|
|
|
|
|
|
|
|
submitFormData(formData); |
|
} |
|
|
|
function submitFormData(formData) { |
|
fetch("verify", { |
|
method: "POST", |
|
body: formData, |
|
}) |
|
.then((response) => response.json()) |
|
.then((data) => { |
|
console.log(data); |
|
|
|
document.getElementById("contentCredentialResults").innerHTML = |
|
data.contains_c2pa; |
|
document.getElementById("digitalWatermarkResults").innerHTML = |
|
data.contains_watermark; |
|
|
|
if ( |
|
data.contains_c2pa == "true" && |
|
data.contains_watermark == "true" |
|
) { |
|
verifyResultDescription.innerHTML = |
|
"Your image contains content credentials, which are displayed below."; |
|
} else if ( |
|
data.contains_c2pa == "false" && |
|
data.contains_watermark == "true" |
|
) { |
|
verifyResultDescription.innerHTML = |
|
"The watermark was found, but image modifications were also detected. The last untampered, signed version on file is displayed."; |
|
} else if ( |
|
data.contains_c2pa == "true" && |
|
data.contains_watermark == "false" |
|
) { |
|
verifyResultDescription.innerHTML = |
|
"Your image contains content credentials, which are displayed below. A watermark was not detected."; |
|
} else if ( |
|
data.contains_c2pa == "false" && |
|
data.contains_watermark == "false" |
|
) { |
|
verifyResultDescription.innerHTML = |
|
"Nothing to show: this image contains neither content credentials, nor a watermark."; |
|
} |
|
|
|
uploadedImageContainer.style.display = "flex"; |
|
document.getElementById("resultLabel").style.display = "block"; |
|
|
|
document.querySelector(".display-verify .spinner").style.display = |
|
"none"; |
|
|
|
if (data.result_media != "n/a") { |
|
const path = "/" + data.result_media; |
|
|
|
var truepicDisplay = document.createElement("truepic-display"); |
|
|
|
truepicDisplay.addEventListener( |
|
"validate", |
|
setVerificationOutputFromValidation |
|
); |
|
truepicDisplay.addEventListener( |
|
"validate", |
|
setCertificateOutputFromValidation |
|
); |
|
|
|
truepicDisplay.setAttribute("id", "result"); |
|
truepicDisplay.setAttribute("active", ""); |
|
var truepic = document.createElement("img"); |
|
truepic.src = path; |
|
|
|
truepicDisplay.appendChild(truepic); |
|
|
|
verifyImageContainer.appendChild(truepicDisplay); |
|
|
|
outputContainer.style.display = "block"; |
|
} |
|
|
|
}) |
|
.catch((error) => { |
|
console.log(error); |
|
|
|
}); |
|
} |
|
|
|
const generateImage = async (text, model) => { |
|
const inferResponse = await fetch( |
|
`generate?prompt=${text}&model=${model}` |
|
); |
|
const inferJson = await inferResponse.json(); |
|
|
|
return inferJson.response; |
|
}; |
|
|
|
imageGenForm.addEventListener("submit", async (event) => { |
|
event.preventDefault(); |
|
|
|
placeholder = document.querySelector(".display-generate .placeholder"); |
|
spinner = document.querySelector(".display-generate .spinner"); |
|
generateActionMenu.style.display = "none"; |
|
|
|
|
|
|
|
try { |
|
if (placeholder) placeholder.remove(); |
|
if (document.getElementById("result")) |
|
document.getElementById("result").remove(); |
|
|
|
spinner.style.display = "block"; |
|
|
|
const resp = await generateImage(imagePrompt.value, model.value); |
|
const path = "/" + resp; |
|
|
|
var truepicDisplay = document.createElement("truepic-display"); |
|
|
|
truepicDisplay.setAttribute("id", "result"); |
|
truepicDisplay.setAttribute("active", ""); |
|
var truepic = document.createElement("img"); |
|
truepic.src = path; |
|
|
|
truepicDisplay.appendChild(truepic); |
|
|
|
spinner.style.display = "none"; |
|
generateImageContainer.appendChild(truepicDisplay); |
|
|
|
downloadButton.href = path; |
|
downloadButton.download = resp; |
|
|
|
generateActionMenu.style.display = "block"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} catch (err) { |
|
console.error(err); |
|
} |
|
}); |
|
|
|
function setVerificationOutputFromValidation(event) { |
|
|
|
return setVerificationOutput(event.detail.manifestStore.toJSON()); |
|
} |
|
|
|
function setCertificateOutputFromValidation(event) { |
|
return setCertificateOutput(event.detail.manifestStore); |
|
} |
|
|
|
function setVerificationOutput(output = null) { |
|
verificationOutput.innerHTML = ""; |
|
|
|
if (!output) { |
|
return; |
|
} |
|
|
|
const viewer = new JSONViewer(); |
|
|
|
verificationOutput.appendChild(viewer.getContainer()); |
|
|
|
viewer.showJSON(output); |
|
} |
|
|
|
function setCertificateOutput(manifestStore = null) { |
|
const certificate = manifestStore?.activeManifest?.certificate; |
|
|
|
if (!certificate) { |
|
return; |
|
} |
|
|
|
certificates = [ |
|
{ |
|
der: certificate.der, |
|
name: certificate.subjectName, |
|
decoded: new x509.X509Certificate(certificate.der), |
|
}, |
|
...certificate.chain.map((certificate) => ({ |
|
der: certificate.der, |
|
decoded: new x509.X509Certificate(certificate.der), |
|
})), |
|
]; |
|
|
|
certificates.forEach((certificate) => { |
|
certificate.transformed = transformCert(certificate.decoded); |
|
}); |
|
|
|
console.log("certificates", certificates); |
|
|
|
certificateList.innerHTML = ""; |
|
|
|
certificates.forEach((certificate, index) => { |
|
var li = document.createElement("li"); |
|
if (index == 0) li.classList.add("active"); |
|
li.appendChild( |
|
document.createTextNode(certificate.transformed.subjectCommonName) |
|
); |
|
li.addEventListener("click", function (e) { |
|
setCertificate(index); |
|
const lis = document.querySelectorAll("#certificate-list li"); |
|
|
|
lis.forEach((element) => { |
|
element.classList.remove("active"); |
|
}); |
|
|
|
this.classList.add("active"); |
|
}); |
|
|
|
certificateList.appendChild(li); |
|
}); |
|
|
|
setCertificate(0); |
|
} |
|
|
|
function transformCert(certificate) { |
|
const { |
|
issuer, |
|
subject, |
|
notAfter: expired, |
|
notBefore: issued, |
|
serialNumber, |
|
publicKey: { |
|
algorithm: { |
|
name: algorithm, |
|
modulusLength: modulus, |
|
namedCurve: namedCurve, |
|
}, |
|
}, |
|
} = certificate; |
|
|
|
const parsedSubject = parseCertificateValues(subject); |
|
const parsedIssuer = parseCertificateValues(issuer); |
|
|
|
return { |
|
issuerCommonName: parsedIssuer["CN"], |
|
issuerOrganizationUnit: parsedIssuer["OU"], |
|
issuerOrganization: parsedIssuer["O"], |
|
issuerCountry: parsedIssuer["C"], |
|
subjectCommonName: parsedSubject["CN"], |
|
subjectOrganizationUnit: parsedSubject["OU"], |
|
subjectOrganization: parsedSubject["O"], |
|
subjectCountry: parsedSubject["C"], |
|
issued, |
|
expired, |
|
serialNumber, |
|
algorithm, |
|
modulus, |
|
namedCurve, |
|
}; |
|
} |
|
|
|
function parseCertificateValues(input) { |
|
const params = new URLSearchParams(input.replaceAll(",", "&")); |
|
const responses = {}; |
|
|
|
for (const entry of params.entries()) { |
|
responses[entry[0].trim()] = entry[1]; |
|
} |
|
|
|
return responses; |
|
} |
|
|
|
function setCertificate(ind) { |
|
const certificate = certificates[ind].transformed; |
|
|
|
document.querySelector(".details .issuerCommonName").innerHTML = |
|
certificate.issuerCommonName; |
|
document.querySelector(".details .issuerOrganizationUnit").innerHTML = |
|
certificate.issuerOrganizationUnit; |
|
document.querySelector(".details .issuerOrganization").innerHTML = |
|
certificate.issuerOrganization; |
|
document.querySelector(".details .issuerCountry").innerHTML = |
|
certificate.issuerCountry; |
|
document.querySelector(".details .subjectCommonName").innerHTML = |
|
certificate.subjectCommonName; |
|
document.querySelector(".details .subjectOrganizationUnit").innerHTML = |
|
certificate.subjectOrganizationUnit; |
|
document.querySelector(".details .subjectOrganization").innerHTML = |
|
certificate.subjectOrganization; |
|
document.querySelector(".details .subjectCountry").innerHTML = |
|
certificate.subjectCountry; |
|
document.querySelector(".details .issued").innerHTML = certificate.issued; |
|
document.querySelector(".details .expired").innerHTML = |
|
certificate.expired; |
|
document.querySelector(".details .serialNumber").innerHTML = |
|
certificate.serialNumber; |
|
document.querySelector(".details .algorithm").innerHTML = |
|
certificate.algorithm; |
|
|
|
if (certificate.modulus !== undefined) { |
|
document.querySelector(".details .modulus").innerHTML = |
|
certificate.modulus; |
|
document.querySelector("#modulusContainers").style.display = "block"; |
|
} else { |
|
document.querySelector("#modulusContainers").style.display = "none"; |
|
} |
|
|
|
if (certificate.namedCurve !== undefined) { |
|
document.querySelector(".details .namedCurve").innerHTML = |
|
certificate.namedCurve; |
|
document.querySelector("#curveContainer").style.display = "block"; |
|
} else { |
|
document.querySelector("#curveContainer").style.display = "none"; |
|
} |
|
} |
|
</script> |
|
</html> |
|
|
