updates

static/index.html

@@ -37,13 +37,12 @@
             <div class="row">
               <div class="col">
                 <h1>
-                  Title of Space
+                  Watermarked Content Credentials
                   <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.
+                  Generate images with C2PA content credentials and Steg.ai
+                  digital watermarking for enhanced AI label robustness
                 </p>
               </div>
             </div>
@@ -89,8 +88,16 @@
               <div class="alert alert-secondary action-menu" role="alert">
                 <div class="row">
                   <div class="col">
-                    <p class="mb-0"><strong>Non consectetur erat in non et in?</strong></p>
-                    <p class="mb-0">Ornare a est accumsan et platea quis rhoncus.</p>
+                    <p class="mb-0">
+                      <strong
+                        >Download the signed, watermarked image to share
+                        it.</strong
+                      >
+                    </p>
+                    <p class="mb-0">
+                      Use the verify tab two view the details for an image you
+                      have or that's been shared with you.
+                    </p>
                   </div>
                   <div class="col flex-grow-0">
                     <a id="download-button" class="btn btn-outline-primary"
@@ -121,8 +128,10 @@
                     <img id="uploaded-image" class="thumbnail" />
                   </div>
                   <div class="col">
-                    <div id="content-crendentials-icon"></div> Content Credentials<br />
-                    <div id="digital-watermark-icon"></div> Digital watermark
+                    <div id="content-crendentials-icon"></div>
+                    Content Credentials<br />
+                    <div id="digital-watermark-icon"></div>
+                    Digital watermark
                   </div>
                 </div>
               </div>
@@ -143,10 +152,12 @@
                 />
               </div>
               <div class="output-container mt-5" style="display: none">
-                <h3 class="mt-4 mb-4">Verification Output</h3>
+                <h3 class="mt-4 mb-4">Verification output</h3>
                 <div id="verification-output"></div>
 
-                <h3 class="mt-4 pt-4 mb-4" id="certificates-h3">Certificates</h3>
+                <h3 class="mt-4 pt-4 mb-4" id="certificates-h3">
+                  Certificates
+                </h3>
                 <div class="certificate" id="certificate-output">
                   <h4>Certificate chain</h4>
                   <ul id="certificate-list"></ul>
@@ -224,7 +235,10 @@
             </div>
             <div class="col mt-4 pt-4" id="logo">
               <img src="images/logo.png" />
-              <p class="small mt-3 mb-5">This demo is a provisional version for demo purposes only.</p>
+              <p class="small mt-3 mb-5">
+                This is a conceptual application meant for demonstration
+                purposes only.
+              </p>
             </div>
           </div>
           <div class="col right-column">
@@ -261,30 +275,40 @@
                     id="generate-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>
+                    By using this demo you agree to the terms and conditions of
+                    <a
+                      href="https://truepic.com/terms-and-conditions/"
+                      target="_blank"
+                      >Truepic</a
+                    >
+                    and
+                    <a href="https://steg.ai/tos" target="_blank">Steg.ai</a>
                   </label>
                 </div>
 
-                <button type="submit" class="btn btn-primary" id="generate-button">Submit</button>
+                <button
+                  type="submit"
+                  class="btn btn-primary"
+                  id="generate-button"
+                >
+                  Submit
+                </button>
               </form>
 
               <div class="how-it-works">
                 <p><strong>How it works</strong></p>
 
                 <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.
+                  When an image is generated and signed with C2PA Content
+                  Credentials, an imperceptible digital watermark, powered by
+                  Steg.ai, is also added to the image pixels. The watermark
+                  serves as a backup in case the Content Credentials are lost,
+                  such as when sharing the image between currently incompatible
+                  services like text messaging. By using the watermark, it is
+                  possible to retrieve a restored, signed version of the image
+                  from before the data was decoupled, which you can try in the
+                  verify tab.
                 </p>
-                <p>Want to know more? Read our community blog post.</p>
               </div>
             </div>
             <div class="display-verify">
@@ -308,29 +332,39 @@
                     id="verify-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>
+                    By using this demo you agree to the terms and conditions of
+                    <a
+                      href="https://truepic.com/terms-and-conditions/"
+                      target="_blank"
+                      >Truepic</a
+                    >
+                    and
+                    <a href="https://steg.ai/tos" target="_blank">Steg.ai</a>
                   </label>
                 </div>
 
-                <button type="submit" class="btn btn-primary" id="verify-button">Submit</button>
+                <button
+                  type="submit"
+                  class="btn btn-primary"
+                  id="verify-button"
+                >
+                  Submit
+                </button>
               </form>
               <div class="how-it-works">
                 <p><strong>How it works</strong></p>
 
                 <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.
+                  When an image is generated and signed with C2PA Content
+                  Credentials, an imperceptible digital watermark, powered by
+                  Steg.ai, is also added to the image pixels. The watermark
+                  serves as a backup in case the Content Credentials are lost,
+                  such as when sharing the image between currently incompatible
+                  services like text messaging. By using the watermark, it is
+                  possible to retrieve a restored, signed version of the image
+                  from before the data was decoupled, which you can try in the
+                  verify tab.
                 </p>
-                <p>Want to know more? Read our community blog post.</p>
               </div>
             </div>
           </div>
@@ -366,9 +400,13 @@
     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");
-    
+    const contentCredentialsIcon = document.getElementById(
+      "content-crendentials-icon"
+    );
+    const digitalWatermarkIcon = document.getElementById(
+      "digital-watermark-icon"
+    );
+
     var certificates = [];
 
     [imagePrompt, model, generateTerms].forEach((item) => {
@@ -378,7 +416,8 @@
     });
 
     const setGenerateButtonStatus = () => {
-      if (imagePrompt.value && model.value && generateTerms.checked) generateButton.classList.add("active");
+      if (imagePrompt.value && model.value && generateTerms.checked)
+        generateButton.classList.add("active");
       else generateButton.classList.remove("active");
     };
 
@@ -466,16 +505,16 @@
         .then((data) => {
           console.log(data);
 
-          if (data.contains_c2pa == 'true') {
-            contentCredentialsIcon.setAttribute('class', 'check-icon')
+          if (data.contains_c2pa == "true") {
+            contentCredentialsIcon.setAttribute("class", "check-icon");
           } else {
-            contentCredentialsIcon.setAttribute('class', 'x-icon')
+            contentCredentialsIcon.setAttribute("class", "x-icon");
           }
 
-          if (data.contains_watermark == 'true') {
-            digitalWatermarkIcon.setAttribute('class', 'check-icon')
+          if (data.contains_watermark == "true") {
+            digitalWatermarkIcon.setAttribute("class", "check-icon");
           } else {
-            digitalWatermarkIcon.setAttribute('class', 'x-icon')
+            digitalWatermarkIcon.setAttribute("class", "x-icon");
           }
 
           if (
@@ -555,8 +594,7 @@
     imageGenForm.addEventListener("submit", async (event) => {
       event.preventDefault();
 
-      if (!imagePrompt.value || !model.value || !generateTerms.checked)
-        return;
+      if (!imagePrompt.value || !model.value || !generateTerms.checked) return;
 
       placeholder = document.querySelector(".display-generate .placeholder");
       spinner = document.querySelector(".display-generate .spinner");