Spaces:

Truepic
/

watermarked-content-credentials

Sleeping

App Files Files Community

jclyo1 commited on Oct 5, 2023

Commit

4e86a3a

•

1 Parent(s): 6b6586d

revert

Browse files

Files changed (1) hide show

static/index.html +472 -1

static/index.html CHANGED Viewed

@@ -28,7 +28,6 @@
     <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">
@@ -394,4 +393,476 @@
     </div>
   </body>
 </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>
   </head>
   <body>
     <div class="container-fluid mt-2" id="head">
     </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>