static/script.js

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