jclyo1 commited on
Commit
98eac4a
1 Parent(s): 9a15952
Files changed (3) hide show
  1. Dockerfile +4 -1
  2. static/index.html +45 -10
  3. static/style.css +16 -2
Dockerfile CHANGED
@@ -40,7 +40,10 @@ RUN tar -xf truepic-lens-cli-51f4cfbc6472a2205e53d726713619ca8df5340b-ubuntu-20.
40
  RUN chmod +x truepic
41
 
42
  RUN --mount=type=secret,id=api_key,mode=0444,required=true \
43
- ./truepic enroll file-system --api-key $(cat /run/secrets/api_key)
 
 
 
44
 
45
  # Copy the current directory contents into the container at $HOME/app setting the owner to the user
46
  COPY --chown=user . $HOME/app
 
40
  RUN chmod +x truepic
41
 
42
  RUN --mount=type=secret,id=api_key,mode=0444,required=true \
43
+ ./truepic enroll file-system --api-key $(cat /run/secrets/api_key) --profile truepic
44
+
45
+ RUN --mount=type=secret,id=steg_profile_api_key,mode=0444,required=true \
46
+ ./truepic enroll file-system --api-key $(cat /run/secrets/steg_profile_api_key) --profile steg
47
 
48
  # Copy the current directory contents into the container at $HOME/app setting the owner to the user
49
  COPY --chown=user . $HOME/app
static/index.html CHANGED
@@ -68,21 +68,35 @@
68
  <div class="col">
69
  <div class="display-generate">
70
  <div class="image-container">
71
- <img src="images/placeholder.png" id="placeholder" />
72
  <img
73
  src="images/spinner.svg"
74
- id="spinner"
75
  style="display: none"
76
  />
77
  </div>
78
  </div>
79
  <div class="display-verify">
80
- <p>Contains Credentials: <span id="contentCredentialResults"></span></p>
81
- <p>Digital Watermark: <span id="digitalWatermarkResults"></span></p>
82
- <p>Original Media: <span id="originalMedia"></span></p>
83
-
 
 
 
 
 
 
 
 
 
84
  <div class="image-container">
85
-
 
 
 
 
 
86
  </div>
87
 
88
  </div>
@@ -197,12 +211,11 @@
197
  const displayGenerate = document.querySelectorAll(".display-generate");
198
  const uploadForm = document.querySelector(".verify-upload-form");
199
  const imageGenForm = document.querySelector(".image-gen-form");
200
- const placeholder = document.getElementById("placeholder");
201
- const spinner = document.getElementById("spinner");
202
  const imagePrompt = document.getElementById("prompt");
203
  const model = document.getElementById("model");
204
  const generateImageContainer = document.querySelector(".display-generate .image-container");
205
  const verifyImageContainer = document.querySelector(".display-verify .image-container");
 
206
 
207
  generateTab.addEventListener("click", (event) => {
208
  event.target.classList.add("active");
@@ -238,6 +251,20 @@
238
  });
239
 
240
  function submitForm() {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
241
  const formData = new FormData(uploadForm);
242
 
243
  // Add additional form data as needed
@@ -262,7 +289,12 @@
262
 
263
  document.getElementById("contentCredentialResults").innerHTML = data.contains_c2pa;
264
  document.getElementById("digitalWatermarkResults").innerHTML = data.contains_watermark;
265
- document.getElementById("originalMedia").innerHTML = data.original_media;
 
 
 
 
 
266
 
267
  if (data.original_media != 'n/a') {
268
  const path = "/" + data.original_media;
@@ -309,6 +341,9 @@
309
 
310
  imageGenForm.addEventListener("submit", async (event) => {
311
  event.preventDefault();
 
 
 
312
 
313
  // verificationDetails.style.display = "none";
314
  // parameters.style.display = "none";
 
68
  <div class="col">
69
  <div class="display-generate">
70
  <div class="image-container">
71
+ <img src="images/placeholder.png" class="placeholder" />
72
  <img
73
  src="images/spinner.svg"
74
+ class="spinner"
75
  style="display: none"
76
  />
77
  </div>
78
  </div>
79
  <div class="display-verify">
80
+ <div class="row mt-5 pb-4" id="original-image">
81
+ <div class="col flex-grow-0">
82
+ <img id="uploaded-image" class="thumbnail" />
83
+ </div>
84
+ <div class="col">
85
+ <strong>Uploaded image</strong><br/>
86
+ Content Credentials <span id="contentCredentialResults"></span><br/>
87
+ Digital watermark <span id="digitalWatermarkResults"></span>
88
+ </div>
89
+ </div>
90
+ <div class="mt-3" id="resultLabel">
91
+ <strong>Result</strong>
92
+ </div>
93
  <div class="image-container">
94
+ <img src="images/placeholder.png" class="placeholder" />
95
+ <img
96
+ src="images/spinner.svg"
97
+ class="spinner"
98
+ style="display: none"
99
+ />
100
  </div>
101
 
102
  </div>
 
211
  const displayGenerate = document.querySelectorAll(".display-generate");
212
  const uploadForm = document.querySelector(".verify-upload-form");
213
  const imageGenForm = document.querySelector(".image-gen-form");
 
 
214
  const imagePrompt = document.getElementById("prompt");
215
  const model = document.getElementById("model");
216
  const generateImageContainer = document.querySelector(".display-generate .image-container");
217
  const verifyImageContainer = document.querySelector(".display-verify .image-container");
218
+ const uploadedImageContainer = document.querySelector("#original-image");
219
 
220
  generateTab.addEventListener("click", (event) => {
221
  event.target.classList.add("active");
 
251
  });
252
 
253
  function submitForm() {
254
+ const file = document.getElementById("fileUpload").files[0];
255
+
256
+ let fileReader = new FileReader();
257
+ fileReader.readAsDataURL(file);
258
+ fileReader.onload = function (){
259
+ document.getElementById("uploaded-image").setAttribute('src', fileReader.result);
260
+ }
261
+
262
+ placeholder = document.querySelector('.display-verify .placeholder');
263
+ spinner = document.querySelector('.display-verify .spinner');
264
+
265
+ if (placeholder) placeholder.remove();
266
+ spinner.style.display = "block";
267
+
268
  const formData = new FormData(uploadForm);
269
 
270
  // Add additional form data as needed
 
289
 
290
  document.getElementById("contentCredentialResults").innerHTML = data.contains_c2pa;
291
  document.getElementById("digitalWatermarkResults").innerHTML = data.contains_watermark;
292
+
293
+ console.log("setting flex", uploadedImageContainer);
294
+ uploadedImageContainer.style.display = "flex";
295
+ document.getElementById('resultLabel').style.display = "block";
296
+
297
+ document.querySelector('.display-verify .spinner').style.display = "none";
298
 
299
  if (data.original_media != 'n/a') {
300
  const path = "/" + data.original_media;
 
341
 
342
  imageGenForm.addEventListener("submit", async (event) => {
343
  event.preventDefault();
344
+
345
+ placeholder = document.querySelector('.display-generate .placeholder');
346
+ spinner = document.querySelector('.display-generate .spinner');
347
 
348
  // verificationDetails.style.display = "none";
349
  // parameters.style.display = "none";
static/style.css CHANGED
@@ -61,8 +61,8 @@ p {
61
  height: auto;
62
  }
63
 
64
- .image-container #placeholder,
65
- .image-container #spinner {
66
  width: 48px;
67
  height: 48px;
68
  align-self: center;
@@ -104,3 +104,17 @@ label.form-check-label {
104
  .display-verify {
105
  display: none;
106
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
  height: auto;
62
  }
63
 
64
+ .image-container .placeholder,
65
+ .image-container .spinner {
66
  width: 48px;
67
  height: 48px;
68
  align-self: center;
 
104
  .display-verify {
105
  display: none;
106
  }
107
+
108
+ img.thumbnail {
109
+ width:100px;
110
+ height:100px;
111
+ }
112
+
113
+ #original-image {
114
+ border-bottom: 1px solid rgba(227, 234, 240, 1);
115
+ display: none;
116
+ }
117
+
118
+ #resultLabel {
119
+ display:none;
120
+ }