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" /> | |
<!-- Bootstrap CSS --> | |
<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> | |
</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-secondary" role="alert"> | |
<h4>Support our work!</h4> | |
<p>Like this Space in the nav above</p> | |
<p>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"> | |
<div class="display-generate"> | |
<div class="image-container"> | |
<img src="images/placeholder.png" id="placeholder" /> | |
<img | |
src="images/spinner.svg" | |
id="spinner" | |
style="display: none" | |
/> | |
</div> | |
</div> | |
<div class="display-verify"> | |
<div class="image-container"></div> | |
</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> | |
<h3>How it works</h3> | |
<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 class="display-verify"> | |
<form class="verify-upload-form" enctype="multipart/form-data"> | |
<div class="form-group mb-3"> | |
<label>Upload image</label> | |
<div class="custom-select"> | |
<input type="file" class="form-control" /> | |
</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> | |
<h3>How it works</h3> | |
<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> | |
</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 placeholder = document.getElementById("placeholder"); | |
const spinner = document.getElementById("spinner"); | |
const imagePrompt = document.getElementById("prompt"); | |
const model = document.getElementById("model"); | |
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"); | |
}); | |
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 formData = new FormData(uploadForm); | |
// Add additional form data as needed | |
//formData.append('additionalData', 'additionalValue'); | |
// Call function to submit form data | |
submitFormData(formData); | |
} | |
function submitFormData(formData) { | |
fetch("verify", { | |
method: "POST", | |
body: formData, | |
}) | |
.then((response) => response.json()) | |
.then((data) => { | |
console.log(data); | |
const path = "/" + data.response; | |
var resultsContainer = document.getElementById("image-container"); | |
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); | |
resultsContainer.appendChild(truepicDisplay); | |
// Handle response data | |
}) | |
.catch((error) => { | |
console.log(error); | |
// Handle errors | |
}); | |
} | |
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(); | |
// verificationDetails.style.display = "none"; | |
// parameters.style.display = "none"; | |
// downloadLink.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 resultsContainer = document.getElementById("image-container"); | |
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); | |
spinner.style.display = "none"; | |
resultsContainer.appendChild(truepicDisplay); | |
/* | |
downloadLink.style.display = "block"; | |
downloadLink.href = path; | |
downloadLink.download = resp; | |
modelParam.innerHTML = model.value; | |
promptParam.innerHTML = textGenInput.value; | |
parameters.style.display = "block"; | |
*/ | |
} catch (err) { | |
console.error(err); | |
} | |
}); | |
</script> | |
</html> | |