Spaces:

Truepic
/

watermarked-content-credentials

Sleeping

File size: 25,985 Bytes

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <link rel="stylesheet" href="style.css" type="text/css" />

    <script
      type="module"
      src="https://display.truepic.com/truepic_display.es.js"
    ></script>

    <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 class="container">
        <div class="row">
          <div class="col position-relative">
            <div class="row">
              <div class="col">
                <h1>
                  Title of Space
                  <div class="badge bg-secondary">experimental</div>
                </h1>
                <p>
                  Brief intro explaining the high level concept of this tool.
                  Eget consequat at proin sed dolor morbi urna. Quam aliquam
                  imperdiet est lobortis lectus sit vel.
                </p>
              </div>
            </div>
            <div class="d-flex flex-row position-absolute bottom-0 tabs">
              <div id="generateTab" class="active">
                <img src="images/generate_icon.svg" /> Generate
              </div>
              <div id="verifyTab">
                <img src="images/verify_icon.svg" /> Verify
              </div>
            </div>
          </div>
          <div class="col right-column">
            <div class="alert alert-secondary" role="alert">
              <h4>Support our work!</h4>
              <p>Like this Space in the nav above</p>
              <p>Joining the conversation in the Community tab</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid" id="body">
      <div class="container">
        <div class="row">
          <div class="col">
            <div class="display-generate">
              <div class="image-container">
                <img src="images/placeholder.png" class="placeholder" />
                <img
                  src="images/spinner.svg"
                  class="spinner"
                  style="display: none"
                />
              </div>

              <div class="alert alert-secondary action-menu" role="alert">
                <div class="row">
                  <div class="col">
                    <p><strong>Non consectetur erat in non et in?</strong></p>
                    <p>Ornare a est accumsan et platea quis rhoncus.</p>
                  </div>
                  <div class="col flex-grow-0">
                    <a id="download-button" class="btn btn-outline-primary"
                      >Download image <img src="images/download_icon.svg"
                    /></a>
                  </div>
                  <div class="col flex-grow-0">
                    <button
                      type="button"
                      id="goto-verify-button"
                      class="btn btn-outline-primary"
                    >
                      Go to verify tab <img src="images/link_icon.svg" />
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="display-verify">
              <div class="row mt-5 pb-4" id="original-image">
                <div class="col flex-grow-0">
                  <img id="uploaded-image" class="thumbnail" />
                </div>
                <div class="col">
                  <strong>Uploaded image</strong><br />
                  Content Credentials <span id="contentCredentialResults"></span
                  ><br />
                  Digital watermark <span id="digitalWatermarkResults"></span>
                </div>
              </div>
              <div class="mt-3" id="resultLabel">
                <strong>Result</strong>
                <div
                  class="alert alert-secondary"
                  role="alert"
                  id="verifyResultDescription"
                ></div>
              </div>
              <div class="image-container">
                <img src="images/placeholder.png" class="placeholder" />
                <img
                  src="images/spinner.svg"
                  class="spinner"
                  style="display: none"
                />
              </div>
              <h3>Verification Output</h3>
              <div id="verification-output"></div>

              <h3>Certificates</h3>
              <div class="certificate" id="certificate-output">
                <p>
                  Details about the certificate used for signing.<br />
                  Truepic maintains the first and only purpose-built C2PA
                  certificate authority.
                </p>

                <p>
                  <strong style="font-weight: 600">Certificate chain</strong>
                </p>
                <ul id="certificate-list"></ul>
                <p><strong style="font-weight: 600">Details</strong></p>
                <div class="details">
                  <strong>Basic info</strong>
                  <div>
                    <label>Type</label>
                    X.509 Certificate
                  </div>
                  <div>
                    <label>Serial Number</label>
                    <div class="serialNumber"></div>
                  </div>
                  <div>
                    <label>Issued</label>
                    <div class="issued"></div>
                  </div>
                  <div>
                    <label>Expired</label>
                    <div class="expired"></div>
                  </div>
                  <strong>Subject</strong>
                  <div>
                    <label>Common Name</label>
                    <div class="subjectCommonName"></div>
                  </div>
                  <div>
                    <label>Organization</label>
                    <div class="subjectOrganization"></div>
                  </div>
                  <div>
                    <label>Organization Unit</label>
                    <div class="subjectOrganizationUnit"></div>
                  </div>
                  <div>
                    <label>Country</label>
                    <div class="subjectCountry"></div>
                  </div>

                  <strong>Issuer</strong>
                  <div>
                    <label>Common Name</label>
                    <div class="issuerCommonName"></div>
                  </div>
                  <div>
                    <label>Organization</label>
                    <div class="issuerOrganization"></div>
                  </div>
                  <div>
                    <label>Organization Unit</label>
                    <div class="issuerOrganizationUnit"></div>
                  </div>
                  <div>
                    <label>Country</label>
                    <div class="issuerCountry"></div>
                  </div>
                  <strong>Public Key Info</strong>

                  <div>
                    <label>Algorithm</label>
                    <div class="algorithm"></div>
                  </div>
                  <div id="modulusContainer">
                    <label>Modulus</label>
                    <div class="modulus"></div>
                  </div>
                  <div id="curveContainer">
                    <label>Curve</label>
                    <div class="namedCurve"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col right-column">
            <div class="display-generate">
              <form class="image-gen-form">
                <div class="form-group mb-3">
                  <label for="prompt">Image prompt</label>
                  <textarea id="prompt" class="form-control"></textarea>
                </div>

                <div class="form-group mb-3">
                  <label>Model</label>
                  <div class="custom-select">
                    <select id="model" class="form-control">
                      <option disabled selected value>Select</option>
                      <option value="runwayml/stable-diffusion-v1-5,1.5">
                        runwayml/stable-diffusion-v1-5
                      </option>
                      <option value="CompVis/stable-diffusion-v1-4,1.4">
                        CompVis/stable-diffusion-v1-4
                      </option>
                      <option value="stabilityai/stable-diffusion-2-1,2.1">
                        stabilityai/stable-diffusion-2-1
                      </option>
                    </select>
                  </div>
                </div>

                <div class="form-check mb-3">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    value=""
                    id="terms"
                  />
                  <label class="form-check-label" for="defaultCheck1">
                    By using this demo you agree to the
                    <a href="#">Terms and Conditions of Truepic and Steg.AI</a>
                  </label>
                </div>

                <button type="submit" class="btn btn-primary">Submit</button>
              </form>

              <h3>How it works</h3>

              <p>
                Images are generated using a hosted model and AI disclosure is
                added to the file. This information, referred to as Content
                Credentials, serves as a nutrition label for the content. We
                employ the tamper-evident open C2PA standard, which utilizes PKI
                and is resistant to forgery. You can download and transfer the
                image to supported editing tools like Photoshop, where your edit
                history can also be securely added to the file. This historical
                information, known as provenance, accompanies your media and can
                be extracted and displayed using a tool or website.
              </p>
              <p>Want to know more? Read our community blog post.</p>
            </div>
            <div class="display-verify">
              <form class="verify-upload-form" enctype="multipart/form-data">
                <div class="form-group mb-3">
                  <label>Upload image</label>
                  <div class="custom-select">
                    <input
                      type="file"
                      class="form-control"
                      name="fileUpload"
                      id="fileUpload"
                    />
                  </div>
                </div>

                <div class="form-check mb-3">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    value=""
                    id="terms"
                  />
                  <label class="form-check-label" for="defaultCheck1">
                    By using this demo you agree to the
                    <a href="#">Terms and Conditions of Truepic and Steg.AI</a>
                  </label>
                </div>

                <button type="submit" class="btn btn-primary">Submit</button>
              </form>

              <h3>How it works</h3>

              <p>
                Images are generated using a hosted model and AI disclosure is
                added to the file. This information, referred to as Content
                Credentials, serves as a nutrition label for the content. We
                employ the tamper-evident open C2PA standard, which utilizes PKI
                and is resistant to forgery. You can download and transfer the
                image to supported editing tools like Photoshop, where your edit
                history can also be securely added to the file. This historical
                information, known as provenance, accompanies your media and can
                be extracted and displayed using a tool or website.
              </p>
              <p>Want to know more? Read our community blog post.</p>
            </div>
          </div>
        </div>
      </div>
    </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 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");
    var certificates = [];


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

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

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

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

          document.getElementById("contentCredentialResults").innerHTML =
            data.contains_c2pa;
          document.getElementById("digitalWatermarkResults").innerHTML =
            data.contains_watermark;

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

            truepicDisplay.appendChild(truepic);

            verifyImageContainer.appendChild(truepicDisplay);
          }
          // Handle response data
        })
        .catch((error) => {
          console.log(error);
          // 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();

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

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

      try {
        if (placeholder) placeholder.remove();
        if (document.getElementById("result"))
          document.getElementById("result").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", "result");
        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);
      }
    });

    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>