Spaces:

Truepic
/

watermarked-content-credentials

Sleeping

App Files Files Community

jclyo1 commited on Oct 5, 2023

Commit

6b6586d

•

1 Parent(s): 5ba48ce

updates

Browse files

Files changed (2) hide show

static/index.html +1 -472
static/script.js +458 -0

static/index.html CHANGED Viewed

@@ -28,6 +28,7 @@
     <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">
@@ -393,476 +394,4 @@
     </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 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);
-      };
-      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";
-          }
-          // 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";
-      }
-    }
-  </script>
 </html>

     <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 type="text/javascript" src="script.js"></script>
   </head>
   <body>
     <div class="container-fluid mt-2" id="head">
     </div>
   </body>
 </html>

static/script.js ADDED Viewed

	@@ -0,0 +1,458 @@

+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);
+  };
+  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";
+      }
+      // 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";
+  }
+}