updates

static/index.html

@@ -393,476 +393,5 @@
     </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>
+  <script type="text/javascript" src="script.js"></script>
 </html>