updates

static/index.html

@@ -121,9 +121,8 @@
                     <img id="uploaded-image" class="thumbnail" />
                   </div>
                   <div class="col">
-                    Content Credentials
-                    <span id="contentCredentialResults"></span><br />
-                    Digital watermark <span id="digitalWatermarkResults"></span>
+                    <div id="content-crendentials-icon"></div> Content Credentials<br />
+                    <div id="digital-watermark-icon"></div> Digital watermark
                   </div>
                 </div>
               </div>
@@ -259,7 +258,7 @@
                     class="form-check-input"
                     type="checkbox"
                     value=""
-                    id="terms"
+                    id="generate-terms"
                   />
                   <label class="form-check-label" for="defaultCheck1">
                     By using this demo you agree to the
@@ -267,7 +266,7 @@
                   </label>
                 </div>
 
-                <button type="submit" class="btn btn-primary">Submit</button>
+                <button type="submit" class="btn btn-primary" id="generate-button">Submit</button>
               </form>
 
               <div class="how-it-works">
@@ -306,7 +305,7 @@
                     class="form-check-input"
                     type="checkbox"
                     value=""
-                    id="terms"
+                    id="verify-terms"
                   />
                   <label class="form-check-label" for="defaultCheck1">
                     By using this demo you agree to the
@@ -314,7 +313,7 @@
                   </label>
                 </div>
 
-                <button type="submit" class="btn btn-primary">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>
@@ -349,6 +348,9 @@
     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 generateImageContainer = document.querySelector(
       ".display-generate .image-container"
     );
@@ -364,9 +366,22 @@
     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].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");
+    };
+
     generateTab.addEventListener("click", (event) => {
       event.target.classList.add("active");
       verifyTab.classList.remove("active");
@@ -451,10 +466,17 @@
         .then((data) => {
           console.log(data);
 
-          document.getElementById("contentCredentialResults").innerHTML =
-            data.contains_c2pa;
-          document.getElementById("digitalWatermarkResults").innerHTML =
-            data.contains_watermark;
+          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" &&
@@ -533,6 +555,9 @@
     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";
@@ -726,6 +751,7 @@
       document.querySelector(".details .algorithm").innerHTML =
         certificate.algorithm;
 
+      /*  
       if (certificate.modulus !== undefined) {
         document.querySelector(".details .modulus").innerHTML =
           certificate.modulus;
@@ -733,6 +759,7 @@
       } else {
         document.querySelector("#modulusContainers").style.display = "none";
       }
+      */
 
       if (certificate.namedCurve !== undefined) {
         document.querySelector(".details .namedCurve").innerHTML =

static/style.css

@@ -133,6 +133,8 @@ label.form-check-label {
 
 .btn-primary {
   width: 100%;
+  background: rgba(206, 206, 206, 1);
+  color: white;
 }
 
 .display-verify {
@@ -305,4 +307,31 @@ img.thumbnail {
 
 #logo img {
   width: 156px;
+}
+
+.check-icon, .x-icon {
+  width: 16px;
+    height: 16px;
+    display: inline-block;
+}
+
+.check-icon {
+  background-image: url('images/check.svg');
+}
+
+.x-icon {
+  background-image: url('images/x.svg');
+}
+
+.btn-primary.active {
+  background-color: #1a6dff;
+}
+
+.btn-primary.active:hover {
+  background-color: #165ad9;
+  
+}
+
+.btn-primary.active:active {
+  background: #1247b2;
 }