updates

Dockerfile

@@ -40,7 +40,10 @@ RUN tar -xf truepic-lens-cli-51f4cfbc6472a2205e53d726713619ca8df5340b-ubuntu-20.
 RUN chmod +x truepic
 
 RUN --mount=type=secret,id=api_key,mode=0444,required=true \
- ./truepic enroll file-system --api-key $(cat /run/secrets/api_key)
+ ./truepic enroll file-system --api-key $(cat /run/secrets/api_key) --profile truepic
+
+RUN --mount=type=secret,id=steg_profile_api_key,mode=0444,required=true \
+ ./truepic enroll file-system --api-key $(cat /run/secrets/steg_profile_api_key) --profile steg
 
 # Copy the current directory contents into the container at $HOME/app setting the owner to the user
 COPY --chown=user . $HOME/app

static/index.html

@@ -68,21 +68,35 @@
           <div class="col">
             <div class="display-generate">
               <div class="image-container">
-                <img src="images/placeholder.png" id="placeholder" />
+                <img src="images/placeholder.png" class="placeholder" />
                 <img
                   src="images/spinner.svg"
-                  id="spinner"
+                  class="spinner"
                   style="display: none"
                 />
               </div>
             </div>
             <div class="display-verify">
-              <p>Contains Credentials: <span id="contentCredentialResults"></span></p>
-              <p>Digital Watermark: <span id="digitalWatermarkResults"></span></p>
-              <p>Original Media: <span id="originalMedia"></span></p>
-              
+              <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>
                 <div class="image-container">
-
+                  <img src="images/placeholder.png" class="placeholder" />
+                <img
+                  src="images/spinner.svg"
+                  class="spinner"
+                  style="display: none"
+                />
                 </div>
               
             </div>
@@ -197,12 +211,11 @@
     const displayGenerate = document.querySelectorAll(".display-generate");
     const uploadForm = document.querySelector(".verify-upload-form");
     const imageGenForm = document.querySelector(".image-gen-form");
-    const placeholder = document.getElementById("placeholder");
-    const spinner = document.getElementById("spinner");
     const imagePrompt = document.getElementById("prompt");
     const model = document.getElementById("model");
     const generateImageContainer = document.querySelector(".display-generate .image-container");
     const verifyImageContainer = document.querySelector(".display-verify .image-container");
+    const uploadedImageContainer = document.querySelector("#original-image");
 
     generateTab.addEventListener("click", (event) => {
       event.target.classList.add("active");
@@ -238,6 +251,20 @@
     });
 
     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();
+      spinner.style.display = "block";
+
       const formData = new FormData(uploadForm);
 
       // Add additional form data as needed
@@ -262,7 +289,12 @@
 
           document.getElementById("contentCredentialResults").innerHTML =  data.contains_c2pa;
           document.getElementById("digitalWatermarkResults").innerHTML =  data.contains_watermark;
-          document.getElementById("originalMedia").innerHTML =  data.original_media;
+
+          console.log("setting flex", uploadedImageContainer);
+          uploadedImageContainer.style.display = "flex";
+          document.getElementById('resultLabel').style.display = "block";
+
+          document.querySelector('.display-verify .spinner').style.display = "none";
 
           if (data.original_media != 'n/a') {
             const path = "/" + data.original_media;
@@ -309,6 +341,9 @@
 
     imageGenForm.addEventListener("submit", async (event) => {
       event.preventDefault();
+      
+      placeholder = document.querySelector('.display-generate .placeholder');
+      spinner = document.querySelector('.display-generate .spinner');
 
       // verificationDetails.style.display = "none";
       // parameters.style.display = "none";

static/style.css

@@ -61,8 +61,8 @@ p {
   height: auto;
 }
 
-.image-container #placeholder,
-.image-container #spinner {
+.image-container .placeholder,
+.image-container .spinner {
   width: 48px;
   height: 48px;
   align-self: center;
@@ -104,3 +104,17 @@ label.form-check-label {
 .display-verify {
   display: none;
 }
+
+img.thumbnail {
+  width:100px;
+  height:100px;
+}
+
+#original-image {
+  border-bottom: 1px solid rgba(227, 234, 240, 1);
+  display: none;
+}
+
+#resultLabel {
+  display:none;
+}