Spaces:

Truepic
/

watermarked-content-credentials

Sleeping

App Files Files Community

watermarked-content-credentials / static /script.js

jclyo1's picture

updates

1d4275f 9 months ago

raw history blame

No virus

14.4 kB

	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 generateTerms = document.getElementById("generate-terms");
	const generateButton = document.getElementById("generate-button");

	const fileUpload = document.getElementById("fileUpload");
	const verifyButton = document.getElementById("verify-button");
	const verifyTerms = document.getElementById("verify-terms");

	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");
	const contentCredentialsIcon = document.getElementById(
	"content-crendentials-icon"
	);
	const digitalWatermarkIcon = document.getElementById("digital-watermark-icon");

	var certificates = [];

	[imagePrompt, model, generateTerms].forEach((item) => {
	item.addEventListener("change", async (event) => {
	setGenerateButtonStatus();
	});
	});

	const setGenerateButtonStatus = () => {
	if (imagePrompt.value && model.value && generateTerms.checked)
	generateButton.classList.add("active");
	else generateButton.classList.remove("active");
	};

	[fileUpload, verifyTerms].forEach((item) => {
	item.addEventListener("change", async (event) => {
	setVerifyButtonStatus();
	});
	});

	const setVerifyButtonStatus = () => {
	if (fileUpload.value && verifyTerms.checked)
	verifyButton.classList.add("active");
	else verifyButton.classList.remove("active");
	};

	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() {
	if (!fileUpload.value \|\| !verifyTerms.checked) return;

	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);
	};

	verifyImageContainer.style.display = "flex";

	document.querySelector(".display-verify .error").style.display = "none";
	placeholder = document.querySelector(".display-verify .placeholder");
	spinner = document.querySelector(".display-verify .spinner");
	placeholder.style.display = "none";

	if (document.getElementById("verifyresult"))
	document.getElementById("verifyresult").remove(); // JCL make sure to remove the correct one
	spinner.style.display = "block";

	outputContainer.style.display = "none";
	document.getElementById("resultLabel").style.display = "none";
	uploadedImageContainer.style.display = "none";

	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);

	fileUpload.value = "";
	setVerifyButtonStatus();

	if (data.contains_c2pa == "true") {
	contentCredentialsIcon.setAttribute("class", "check-icon");
	} else {
	contentCredentialsIcon.setAttribute("class", "x-icon");
	}

	if (data.contains_watermark == "true") {
	digitalWatermarkIcon.setAttribute("class", "check-icon");
	} else {
	digitalWatermarkIcon.setAttribute("class", "x-icon");
	}

	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", "verifyresult");
	truepicDisplay.setAttribute("active", "");
	var truepic = document.createElement("img");
	truepic.src = path;

	truepicDisplay.appendChild(truepic);

	verifyImageContainer.appendChild(truepicDisplay);

	outputContainer.style.display = "block";
	} else {
	verifyImageContainer.style.display = "none";
	}
	// Handle response data
	})
	.catch((error) => {
	console.log(error);
	document.querySelector(".display-verify .error").style.display = "block";

	fileUpload.value = "";
	setVerifyButtonStatus();

	document.querySelector(".display-verify .spinner").style.display = "none";
	document.querySelector(".display-verify .placeholder").style.display =
	"block";
	// 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();

	if (!imagePrompt.value \|\| !model.value \|\| !generateTerms.checked) return;

	placeholder = document.querySelector(".display-generate .placeholder");
	spinner = document.querySelector(".display-generate .spinner");
	generateActionMenu.style.display = "none";
	document.querySelector(".display-generate .error").style.display = "none";

	// parameters.style.display = "none";

	try {
	placeholder.style.display = "none";
	if (document.getElementById("genresult"))
	document.getElementById("genresult").remove(); // JCL make sure to remove the correct one

	spinner.style.display = "block";

	const resp = await generateImage(imagePrompt.value, model.value);
	const path = "/" + resp;

	var truepicDisplay = document.createElement("truepic-display");

	truepicDisplay.setAttribute("id", "genresult");
	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";

	/*


	modelParam.innerHTML = model.value;
	promptParam.innerHTML = textGenInput.value;
	parameters.style.display = "block";
	*/
	} catch (err) {
	console.error(err);
	document.querySelector(".display-generate .error").style.display = "block";
	spinner.style.display = "none";
	placeholder.style.display = "block";
	}
	});

	function setVerificationOutputFromValidation(event) {
	//verificationDetails.style.display = "block";
	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";
	}
	}