updates

main.py

@@ -37,63 +37,46 @@ def generate_image(prompt, model):
     filename = str(uuid.uuid4()) + ".jpg"
     image.save(filename)
 
-    assertion = {
-        "assertions": [
-            {
-                "label": "com.truepic.custom.ai",
-                "data": {
-                    "model_name": modelName,
-                    "model_version": modelVersion,
-                    "prompt": prompt,
-                },
-            }
-        ]
-    }
-
-    json_object = json.dumps(assertion)
+    # assertion = {
+    #    "assertions": [
+    #        {
+    #            "label": "com.truepic.custom.ai",
+    #            "data": {
+    #                "model_name": modelName,
+    #                "model_version": modelVersion,
+    #                "prompt": prompt,
+    #            },
+    #        }
+    #    ]
+    # }
+
+    # json_object = json.dumps(assertion)
 
     subprocess.check_output(
         [
-            "./truepic",
-            "sign",
+            "./scripts/sign.sh",
             filename,
-            "--assertions-inline",
-            json_object,
-            "--output",
-            (os.getcwd() + "/static/" + filename),
         ]
     )
 
     return {"response": filename}
 
+
 @app.post("/verify")
 def verify_image(fileUpload: UploadFile):
     logging.warning("in verify")
     logging.warning(fileUpload.filename)
-    
-    
 
     # check if the file has been uploaded
     if fileUpload.filename:
         # strip the leading path from the file name
         fn = os.path.basename(fileUpload.filename)
-        
+
         # open read and write the file into the server
-        open(fn, 'wb').write(fileUpload.file.read())
-
-        # subprocess.check_output(
-        #     [
-        #        "./truepic",
-        #        "sign",
-        #        fileUpload.filename,
-        #        "--output",
-        #        (os.getcwd() + "/static/" + fileUpload.filename),
-        #    ]
-        # )
-
-        #call steg sign script
+        open(fn, "wb").write(fileUpload.file.read())
+
         response = subprocess.check_output(
-             [
+            [
                 "./scripts/verify.sh",
                 fileUpload.filename,
             ]
@@ -103,42 +86,6 @@ def verify_image(fileUpload: UploadFile):
 
     return {"response": fileUpload.filename}
 
-@app.post("/sign")
-def sign_image(fileUpload: UploadFile):
-    logging.warning("in sign")
-    logging.warning(fileUpload.filename)
-    
-    
-
-    # check if the file has been uploaded
-    if fileUpload.filename:
-        # strip the leading path from the file name
-        fn = os.path.basename(fileUpload.filename)
-        
-        # open read and write the file into the server
-        open(fn, 'wb').write(fileUpload.file.read())
-
-        # subprocess.check_output(
-        #     [
-        #        "./truepic",
-        #        "sign",
-        #        fileUpload.filename,
-        #        "--output",
-        #        (os.getcwd() + "/static/" + fileUpload.filename),
-        #    ]
-        # )
-
-        #call steg sign script
-        response = subprocess.check_output(
-             [
-                "./scripts/sign.sh",
-                fileUpload.filename,
-            ]
-        )
-
-        logging.warning(response)
-
-    return {"response": fileUpload.filename}
 
 app.mount("/", StaticFiles(directory="static", html=True), name="static")
 

scripts/sign.sh

@@ -1,6 +1,17 @@
 #!/usr/bin/env bash
 
-set -e
+if [ "$TRUEPIC_DEBUG" = "2" ]; then
+  set -xeo pipefail
+else
+  set -eo pipefail
+fi
+
+debug_echo() {
+    if [ -n "$TRUEPIC_DEBUG" ]; then
+        echo "$@"
+    fi
+}
+
 
 MEDIA_FILE=$(readlink -f "$1")
 
@@ -8,45 +19,68 @@ TRUEPIC_CLI=/home/user/app/truepic
 STEG_SCRIPTS=/home/user/app/scripts/
 PRIVATE_KEY=/home/user/.truepic/default/private.key
 
-echo -n "Signing media..."
-signed_no_watermark=$(mktemp).jpg
+filename=$(basename "${MEDIA_FILE}")
+extension="${filename##*.}"
+if [ "${extension}" = "jpg" ] || [ "${extension}" = "jpeg" ]; then
+  mime_type="image/jpeg"
+else
+  if [ "${extension}" = "png" ]; then
+    mime_type="image/png"
+  else
+    echo "Unsupported file extension: ${extension}"
+    exit 1
+  fi
+fi
+
+debug_echo -n "Signing media..."
+signed_no_watermark=$(mktemp).${extension}
 ${TRUEPIC_CLI} sign $MEDIA_FILE --output ${signed_no_watermark} > /dev/null 2>&1
-echo " --> ${signed_no_watermark}"
+debug_echo " --> ${signed_no_watermark}"
 
-echo
-echo -n "Extracting manifest..."
+debug_echo
+debug_echo -n "Extracting manifest..."
 no_watermark_manifest=$(mktemp).bin
 ${TRUEPIC_CLI} manifest extract ${signed_no_watermark} --output ${no_watermark_manifest} > /dev/null 2>&1
-echo " --> ${no_watermark_manifest}"
+debug_echo " --> ${no_watermark_manifest}"
 
-echo
-echo -n "Creating watermark signature..."
+debug_echo
+debug_echo -n "Creating watermark signature..."
 verification_json=$(${TRUEPIC_CLI} verify ${signed_no_watermark})
+if echo "${verification_json}" | jq -e '.manifest_store[0].assertions."c2pa.thumbnail.claim.jpeg"' >/dev/null; then
+  thumbnail_key="c2pa.thumbnail.claim.jpeg"
+else
+  if echo "${verification_json}" | jq -e '.manifest_store[0].assertions."c2pa.thumbnail.claim.png"' >/dev/null; then
+    thumbnail_key="c2pa.thumbnail.claim.png"
+  else
+    echo "Couldn't find thumbnail assertion in the C2PA manifest."
+    exit 1
+  fi
+fi
 thumbnail_hash=$(
   echo "${verification_json}" | \
-  jq -r '.manifest_store[0].assertions."c2pa.thumbnail.claim.jpeg"[0].thumbnail_id'
+  jq -r '.manifest_store[0].assertions."'${thumbnail_key}'"[0].thumbnail_id'
 )
 timestamp=$(
   echo "${verification_json}" | \
   jq -r '.manifest_store[0].trusted_timestamp.timestamp'
 )
-echo -n " ${thumbnail_hash}|${timestamp} ..."
-watermark_signature=$(openssl dgst -sha256 -sign ${PRIVATE_KEY} <(echo "${thumbnail_hash}|${timestamp}") | base64)
-echo " ${watermark_signature}"
-
-echo
-echo -n "Uploading signed media to steg.ai..."
-media_id=$(${STEG_SCRIPTS}/upload.sh ${signed_no_watermark} "image/jpeg")
-echo " --> media_id=${media_id}"
+debug_echo -n " ${thumbnail_hash}|${timestamp} ..."
+watermark_signature=$(openssl dgst -sha256 -sign ${PRIVATE_KEY} <(echo "${thumbnail_hash}|${timestamp}") | base64 | tr -d '\n')
+debug_echo " ${watermark_signature}"
+
+debug_echo
+debug_echo -n "Uploading signed media to steg.ai..."
+media_id=$(${STEG_SCRIPTS}/upload.sh ${signed_no_watermark} ${mime_type})
+debug_echo " --> media_id=${media_id}"
 rm -f ${signed_no_watermark}
 
-echo
-echo -n "Uploading manifest to steg.ai..."
+debug_echo
+debug_echo -n "Uploading manifest to steg.ai..."
 manifest_id=$(${STEG_SCRIPTS}/upload.sh ${no_watermark_manifest} "application/cbor")
-echo " --> media_id=${manifest_id}"
+debug_echo " --> media_id=${manifest_id}"
 
-echo
-echo -n "Watermarking media..."
+debug_echo
+debug_echo -n "Watermarking media..."
 encode_response=$(
   curl -s https://api.steg.ai/encode_image_async \
     -H "x-api-key: ${STEG_AI_API_KEY}" \
@@ -54,14 +88,13 @@ encode_response=$(
         "media_id": "'${media_id}'",
         "method": 0,
         "owner": "Truepic",
-        "custom": "{\"manifest_id\":\"'${manifest_id}'\",\"watermark_signature\":\"'${watermark_signature}'\"}"
+        "custom": "{\"manifest_id\":\"'${manifest_id}'\",\"watermark_signature\": \"'${watermark_signature}'\"}"
       }'
 )
-echo "$encode_response"  #JCL Debugging
 request_id=$(echo "$encode_response" | jq -r '.data.request_id')
 
 if [ -z "$request_id" ] || [ "$request_id" = "null" ]; then
-  echo
+  debug_echo
   echo "No request_id"
   rm -f ${no_watermark_manifest}
   exit 1;
@@ -73,7 +106,7 @@ status_response=""
 watermarking_status=""
 while [ "$watermarking_status" != "Completed." ]; do
   sleep 1
-  echo -n ".."
+  debug_echo -n ".."
   status_response=$(
     curl -s https://api.steg.ai/media_status?request_id=${request_id} \
       -H "x-api-key: ${STEG_AI_API_KEY}"
@@ -82,19 +115,19 @@ while [ "$watermarking_status" != "Completed." ]; do
 done
 
 download_url=$(echo "${status_response}" | jq -r '.data.media_data.media_url')
-echo " --> media_id=${watermark_id}"
+debug_echo " --> media_id=${watermark_id}"
 
-echo
-echo -n "Downloading watermarked media..."
-watermarked_image=$(mktemp).jpg
+debug_echo
+debug_echo -n "Downloading watermarked media..."
+watermarked_image=$(mktemp).${extension}
 curl -s -o ${watermarked_image} "$download_url"
-echo " --> ${watermarked_image}"
+debug_echo " --> ${watermarked_image}"
 
-echo
-echo -n "Re-signing the watermarked media..."
+debug_echo
+debug_echo -n "Re-signing the watermarked media..."
 ${TRUEPIC_CLI} sign ${watermarked_image} \
     --ingredient-manifest-store ${no_watermark_manifest} \
-    --output output.jpg \
+    --output output.${extension} \
     --assertions-inline '{
         "assertions": [
           {
@@ -102,11 +135,11 @@ ${TRUEPIC_CLI} sign ${watermarked_image} \
             "data": {
               "actions": [
                 {
-                  "action": "c2pa.edited",
+                  "action": "ai.steg.watermark",
                   "when": "@now",
                   "softwareAgent": "steg.ai",
                   "parameters": {
-                    "description": "A watermark was applied."
+                    "description": "An imperceptible digital watermark was added to the file, which can be used to retrieve information later."
                   }
                 }
               ]
@@ -114,37 +147,37 @@ ${TRUEPIC_CLI} sign ${watermarked_image} \
           }
         ]
       }' > /dev/null 2>&1
-echo " --> output.jpg"
+debug_echo " --> output.${extension}"
 rm -f ${no_watermark_manifest}
 
-echo
-echo -n "Extracting new manifest..."
+debug_echo
+debug_echo -n "Extracting new manifest..."
 with_watermark_manifest=$(mktemp).bin
-${TRUEPIC_CLI} manifest extract output.jpg --output ${with_watermark_manifest} > /dev/null 2>&1
-echo " --> ${with_watermark_manifest}"
+${TRUEPIC_CLI} manifest extract output.${extension} --output ${with_watermark_manifest} > /dev/null 2>&1
+debug_echo " --> ${with_watermark_manifest}"
 
-echo
-echo -n "Uploading new manifest to steg.ai..."
+debug_echo
+debug_echo -n "Uploading new manifest to steg.ai..."
 new_manifest_id=$(${STEG_SCRIPTS}/upload.sh ${with_watermark_manifest} "application/cbor")
-echo " --> media_id=${new_manifest_id}"
+debug_echo " --> media_id=${new_manifest_id}"
 rm -f ${with_watermark_manifest}
 
-echo
-echo -n "Updating media with new manifest ID... "
+debug_echo
+debug_echo -n "Updating media with new manifest ID... "
 update_result=$(
   curl -s https://api.steg.ai/asset \
     -X POST \
     -H "x-api-key: ${STEG_AI_API_KEY}" \
     --data-raw '{
         "media_id" : "'${watermark_id}'",
-        "custom": "{\"manifest_id\":\"'${new_manifest_id}'\",\"watermark_signature\":\"'${watermark_signature}'\"}"
+        "custom": "{\"manifest_id\":\"'${new_manifest_id}'\",\"watermark_signature\":\"'${watermark_signature}'\",\"original_id\":\"'${watermark_id}'\"}"
       }'
 )
 
-echo ${update_result} | jq -r '.message'
+debug_echo ${update_result} | jq -r '.message'
 
-echo
-echo -n "Deleting un-watermarked image (${media_id}) from steg.ai... "
+debug_echo
+debug_echo -n "Deleting un-watermarked image (${media_id}) from steg.ai... "
 delete_result=$(
   curl -s https://api.steg.ai/asset \
     -X DELETE \
@@ -154,10 +187,10 @@ delete_result=$(
       }'
 )
 
-echo ${delete_result} | jq -r '.message'
+if [ -n "$TRUEPIC_DEBUG" ]; then echo ${delete_result} | jq -r '.message'; fi
 
-echo
-echo -n "Deleting old manifest (${manifest_id}) from steg.ai... "
+debug_echo
+debug_echo -n "Deleting old manifest (${manifest_id}) from steg.ai... "
 delete_result=$(
   curl -s https://api.steg.ai/asset \
     -X DELETE \
@@ -167,4 +200,4 @@ delete_result=$(
       }'
 )
 
-echo ${delete_result} | jq -r '.message'
+if [ -n "$TRUEPIC_DEBUG" ]; then echo ${delete_result} | jq -r '.message'; fi

scripts/verify.sh

@@ -1,32 +1,55 @@
 #!/usr/bin/env bash
 
-set -e
+if [ "$TRUEPIC_DEBUG" = "2" ]; then
+  set -xeo pipefail
+else
+  set -eo pipefail
+fi
+
+debug_echo() {
+    if [ -n "$TRUEPIC_DEBUG" ]; then
+        echo "$@"
+    fi
+}
 
 MEDIA_FILE=$(readlink -f "$1")
 
 TRUEPIC_CLI=/home/user/app/truepic
 STEG_SCRIPTS=/home/user/app/scripts/
 
-echo -n "Checking for C2PA data in the media..."
+filename=$(basename "${MEDIA_FILE}")
+extension="${filename##*.}"
+if [ "${extension}" = "jpg" ] || [ "${extension}" = "jpeg" ]; then
+  mime_type="image/jpeg"
+else
+  if [ "${extension}" = "png" ]; then
+    mime_type="image/png"
+  else
+    echo "Unsupported file extension: ${extension}"
+    exit 1
+  fi
+fi
+
+debug_echo -n "Checking for C2PA data in the media..."
 set +e
 verification_json=$(${TRUEPIC_CLI} verify $MEDIA_FILE 2>&1)
 set -e
 
 if jq -e . <<< "$verification_json" >/dev/null 2>&1; then
-  echo " embedded C2PA manifest found."
-  echo
-  echo ${verification_json} | jq
-  exit 0
+  c2pa_manifest_found=true
+  debug_echo " embedded C2PA manifest found."
+else
+  c2pa_manifest_found=false
+  debug_echo " no embedded C2PA manifest found."
 fi
-echo " no embedded C2PA manifest found."
 
-echo
-echo -n "Uploading media to steg.ai..."
-media_id=$(${STEG_SCRIPTS}/upload.sh ${MEDIA_FILE} "image/jpeg")
-echo " --> media_id=${media_id}"
+debug_echo
+debug_echo -n "Uploading media to steg.ai..."
+media_id=$(${STEG_SCRIPTS}/upload.sh ${MEDIA_FILE} $mime_type)
+debug_echo " --> media_id=${media_id}"
 
-echo
-echo -n "Detecting a watermark..."
+debug_echo
+debug_echo -n "Detecting a watermark..."
 decode_response=$(
   curl -s https://api.steg.ai/decode_image_async \
     -H "x-api-key: ${STEG_AI_API_KEY}" \
@@ -35,7 +58,7 @@ decode_response=$(
 request_id=$(echo "$decode_response" | jq -r '.data.request_id')
 
 if [ -z "$request_id" ] || [ "$request_id" = "null" ]; then
-  echo
+  debug_echo
   echo "No request_id"
   exit 1;
 fi
@@ -44,7 +67,7 @@ status_response=""
 decode_status=""
 while [ "$decode_status" != "Completed." ]; do
   sleep 1
-  echo -n ".."
+  debug_echo -n ".."
   status_response=$(
     curl -s https://api.steg.ai/media_status?request_id=${request_id} \
       -H "x-api-key: ${STEG_AI_API_KEY}"
@@ -52,18 +75,19 @@ while [ "$decode_status" != "Completed." ]; do
   decode_status=$(echo "${status_response}" | jq -r '.data.status')
 done
 
+original_id=$(echo "${status_response}" | jq -r '.data.media_data.custom' | jq -r '.original_id')
 manifest_id=$(echo "${status_response}" | jq -r '.data.media_data.custom' | jq -r '.manifest_id')
 watermark_signature=$(echo "${status_response}" | jq -r '.data.media_data.custom' | jq -r '.watermark_signature')
 
 if [ -z "$manifest_id" ] || [ "$manifest_id" = "null" ]; then
-  echo
-  echo "No manifest_id"
+  debug_echo
+  debug_echo "No manifest_id"
 else
-  echo " --> media_id=${manifest_id}"
+  debug_echo " --> media_id=${manifest_id}"
 fi
 
-echo
-echo -n "Deleting uploaded media (${media_id}) from steg.ai... "
+debug_echo
+debug_echo -n "Deleting uploaded media (${media_id}) from steg.ai... "
 delete_result=$(
   curl -s https://api.steg.ai/asset \
     -X DELETE \
@@ -72,36 +96,59 @@ delete_result=$(
         "media_id" : "'${media_id}'"
       }'
 )
+if [ -n "${TRUEPIC_DEBUG}" ]; then echo ${delete_result} | jq -r '.message'; fi
 
 if [ -z "$manifest_id" ] || [ "$manifest_id" = "null" ]; then
-  exit 1
+  echo "Contains C2PA manifest: ${c2pa_manifest_found}"
+  echo "Contains watermark: false"
+  echo "Original watermarked media: n/a"
+  exit 0
 fi
 
-echo ${delete_result} | jq -r '.message'
-echo
-echo -n "Downloading manifest..."
+debug_echo
+debug_echo -n "Downloading original watermarked media..."
+original_info=$(curl -s https://api.steg.ai/asset?media_id=${original_id} -H "x-api-key: ${STEG_AI_API_KEY}")
+original_url=$(echo ${original_info} | jq -r '.data[0].path')
+downloaded_original=$(mktemp).${extension}
+curl -s -o ${downloaded_original} ${original_url}
+debug_echo " --> ${downloaded_original}"
+
+debug_echo
+debug_echo -n "Downloading new manifest..."
 manifest_info=$(curl -s https://api.steg.ai/asset?media_id=${manifest_id} -H "x-api-key: ${STEG_AI_API_KEY}")
 manifest_url=$(echo ${manifest_info} | jq -r '.data[0].path')
 downloaded_manifest=$(mktemp).bin
 curl -s -o ${downloaded_manifest} ${manifest_url}
-echo " --> ${downloaded_manifest}"
+debug_echo " --> ${downloaded_manifest}"
 
-echo
-echo -n "Inserting manifest into media file..."
-${TRUEPIC_CLI} manifest insert ${downloaded_manifest} $MEDIA_FILE --output re_inserted_image.jpg > /dev/null 2>&1
-echo " --> re_inserted_image.jpg"
+debug_echo
+debug_echo -n "Inserting new manifest into media file..."
+${TRUEPIC_CLI} manifest insert ${downloaded_manifest} ${downloaded_original} --output watermarked_original.${extension} > /dev/null 2>&1
+debug_echo " --> watermarked_original.${extension}"
+rm -f ${downloaded_original}
+rm -f ${downloaded_manifest}
 
-echo
-echo "Checking the manifest."
-verification_json=$(${TRUEPIC_CLI} verify re_inserted_image.jpg)
+debug_echo
+debug_echo "Checking the manifest."
+verification_json=$(${TRUEPIC_CLI} verify watermarked_original.${extension})
 
 hash_status=$(
   echo "${verification_json}" | \
   jq -r '.manifest_store[] | select(.is_active == true) | .assertions."c2pa.hash.data"[0].status'
 )
+if echo "${verification_json}" | jq -e '.manifest_store[0].assertions."c2pa.thumbnail.claim.jpeg"' >/dev/null; then
+  thumbnail_key="c2pa.thumbnail.claim.jpeg"
+else
+  if echo "${verification_json}" | jq -e '.manifest_store[0].assertions."c2pa.thumbnail.claim.png"' >/dev/null; then
+    thumbnail_key="c2pa.thumbnail.claim.png"
+  else
+    echo "Couldn't find thumbnail assertion in the C2PA manifest."
+    exit 1
+  fi
+fi
 thumbnail_hash=$(
   echo "${verification_json}" | \
-  jq -r '.manifest_store[0].assertions."c2pa.thumbnail.claim.jpeg"[0].thumbnail_id'
+  jq -r '.manifest_store[0].assertions."'${thumbnail_key}'"[0].thumbnail_id'
 )
 timestamp=$(
   echo "${verification_json}" | \
@@ -114,7 +161,7 @@ public_key=$(
   openssl x509 -pubkey -noout
 )
 
-echo -n "Checking watermark signature... ${thumbnail_hash}|${timestamp} ... ${watermark_signature} ..."
+debug_echo -n "Checking watermark signature... ${thumbnail_hash}|${timestamp} ... ${watermark_signature} ..."
 signature_verification=$(
   openssl dgst -sha256 \
     -verify <(echo "${public_key}") \
@@ -122,44 +169,22 @@ signature_verification=$(
     <(echo "${thumbnail_hash}|${timestamp}")
 )
 
-echo " ${signature_verification}"
+if [ "${signature_verification}" != "Verified OK" ]; then
+  debug_echo " FAILED"
+  echo "Watermark signature verification failed"
+  exit 1
+fi
+debug_echo " ${signature_verification}"
 
-echo -n "Checking image hash..."
+debug_echo -n "Checking image hash..."
 if [ "$hash_status" = "VALID" ]; then
-  echo " hashes match."
-  echo "${verification_json}" | jq
-  rm -f ${downloaded_manifest}
+  debug_echo " hashes match."
+  if [ -n "$TRUEPIC_DEBUG" ]; then echo "${verification_json}" | jq; fi
+
+  echo "Contains C2PA manifest: ${c2pa_manifest_found}"
+  echo "Contains watermark: true"
+  echo "Original watermarked media: watermarked_original.${extension}"
   exit 0
 fi
-echo " hashes DON'T match!"
-rm -f re_inserted_image.jpg
-
-echo
-echo -n "Re-signing the watermarked media..."
-${TRUEPIC_CLI} sign ${MEDIA_FILE} \
-    --ingredient-manifest-store ${downloaded_manifest} \
-    --output re_signed_image.jpg \
-    --assertions-inline '{
-        "assertions": [
-          {
-            "label": "c2pa.actions",
-            "data": {
-              "actions": [
-                {
-                  "action": "c2pa.unknown",
-                  "when": "@now",
-                  "parameters": {
-                    "description": "Some unknown edits have been made between watermarking and now."
-                  }
-                }
-              ]
-            }
-          }
-        ]
-      }' > /dev/null 2>&1
-echo " --> re_signed_image.jpg"
-rm -f ${downloaded_manifest}
-
-echo
-echo "Checking the manifest..."
-${TRUEPIC_CLI} verify re_signed_image.jpg | jq
+debug_echo " hashes DON'T match!"
+rm -f watermarked_original.${extension}

static/index.html

@@ -13,71 +13,246 @@
     />
 
     <script
-    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
-    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-    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>
-</head>
+      type="module"
+      src="https://display.truepic.com/truepic_display.es.js"
+    ></script>
+  </head>
   <body>
-    <div class="container">
-      <label class="form-label" for="customFile">Operation</label>
-            <select class="form-select" id="operation">
-              <option value="/verify">Verify</option>
-              <option value="/sign">Sign</option>
-            </select>
-        <form method="post" id="fileUploadForm" enctype = "multipart/form-data">
-            <input type="file" class="form-control" name="fileUpload" id="fileUpload" />
-            <button class="btn btn-primary" type="submit">Submit</button>
-        </form>
-        <div id="image-container"></div>
+    <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" id="placeholder" />
+                <img
+                  src="images/spinner.svg"
+                  id="spinner"
+                  style="display: none"
+                />
+              </div>
+            </div>
+            <div class="display-verify">
+              <div class="image-container"></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" />
+                  </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 form = document.querySelector('#fileUploadForm');
-const operation = document.querySelector('#operation');
-    
-form.addEventListener('submit', (e) => {
-  e.preventDefault();
-  submitForm();
-});
-
-function submitForm() {
-  const formData = new FormData(form);
-  
-  // Add additional form data as needed
-  //formData.append('additionalData', 'additionalValue');
-  
-  // Call function to submit form data
-  submitFormData(formData);
-}
-
-function submitFormData(formData) {
-  console.log("operation", operation.value)
-  
-
-  fetch(operation.value, {
-    method: 'POST',
-    body: formData
-  })
-  .then(response => response.json())
-  .then(data => {
-    console.log(data)
-
-    const path = "/" + data.response;
-
-    var resultsContainer = document.getElementById("image-container");
-
-    var truepicDisplay = document.createElement("truepic-display");
-    /*
+    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 placeholder = document.getElementById("placeholder");
+    const spinner = document.getElementById("spinner");
+    const imagePrompt = document.getElementById("prompt");
+    const model = document.getElementById("model");
+
+    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");
+    });
+
+    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 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);
+
+          const path = "/" + data.response;
+
+          var resultsContainer = document.getElementById("image-container");
+
+          var truepicDisplay = document.createElement("truepic-display");
+          /*
     truepicDisplay.addEventListener(
       "validate",
       setVerificationOutputFromValidation
@@ -88,21 +263,82 @@ function submitFormData(formData) {
     );
     */
 
-    truepicDisplay.setAttribute("id", "result");
-    truepicDisplay.setAttribute("active", "");
-    var truepic = document.createElement("img");
-    truepic.src = path;
-
-    truepicDisplay.appendChild(truepic);
-
-    resultsContainer.appendChild(truepicDisplay);
-    // Handle response data
-  })
-  .catch(error => {
-    console.log(error)
-    // Handle errors
-  });
-}
-  </script>
+          truepicDisplay.setAttribute("id", "result");
+          truepicDisplay.setAttribute("active", "");
+          var truepic = document.createElement("img");
+          truepic.src = path;
+
+          truepicDisplay.appendChild(truepic);
+
+          resultsContainer.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();
+
+      // verificationDetails.style.display = "none";
+      // parameters.style.display = "none";
+      // downloadLink.style.display = "none";
+
+      try {
+        if (placeholder) placeholder.remove();
 
+        if (document.getElementById("result"))
+          document.getElementById("result").remove();
+        spinner.style.display = "block";
+
+        const resp = await generateImage(imagePrompt.value, model.value);
+        const path = "/" + resp;
+
+        var resultsContainer = document.getElementById("image-container");
+
+        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);
+
+        spinner.style.display = "none";
+        resultsContainer.appendChild(truepicDisplay);
+
+        /*
+    downloadLink.style.display = "block";
+    downloadLink.href = path;
+    downloadLink.download = resp;
+
+    modelParam.innerHTML = model.value;
+    promptParam.innerHTML = textGenInput.value;
+    parameters.style.display = "block";
+    */
+      } catch (err) {
+        console.error(err);
+      }
+    });
+  </script>
 </html>

static/style.css

@@ -1,8 +1,106 @@
-#uploaded-image-container {
-    border-bottom: 1px solid black;
-    border-top: 1px solid black;
+@import url("https://fonts.cdnfonts.com/css/inter");
+
+body {
+  font-family: "Inter", sans-serif;
+}
+
+#head {
+  padding-top: 1rem;
+  border-bottom: 1px solid rgba(227, 234, 240, 1);
+}
+
+h1 {
+  font-weight: 600;
+  font-size: 26px;
+}
+
+p {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.badge.bg-secondary {
+  background-color: rgba(247, 249, 250, 1) !important;
+  border-color: rgba(215, 220, 224, 1);
+  border: 1px solid rgba(215, 220, 224, 1);
+  color: rgba(86, 104, 122, 1);
+  text-transform: uppercase;
+  font-size: 12px;
+  padding: 7px;
+  position: relative;
+  top: -0.5rem;
+  left: 1rem;
+}
+
+.tabs div {
+  margin-right: 1rem;
+  cursor: pointer;
+}
+
+.tabs div.active {
+  border-bottom: 3px solid rgba(26, 109, 255, 1);
+}
+
+.right-column {
+  flex: 0 0 465px;
+  margin: 1rem;
+}
+
+.image-container {
+  margin: 2rem 1rem 0 0;
+  background: rgba(247, 249, 250, 1);
+  display: flex;
+  justify-content: center;
+  height: 35rem;
+}
+
+.image-container img {
+  align-self: start;
+  width: 100%;
+  height: auto;
+}
+
+.image-container #placeholder,
+.image-container #spinner {
+  width: 48px;
+  height: 48px;
+  align-self: center;
+}
+
+#body .container > .row > .col:first-child {
+  border-right: 1px solid rgba(227, 234, 240, 1);
+}
+
+.custom-select {
+  position: relative;
+}
+
+.custom-select::after {
+  --size: 0.4rem;
+  content: "";
+  position: absolute;
+  right: 1rem;
+  pointer-events: none;
+  border-left: var(--size) solid transparent;
+  border-right: var(--size) solid transparent;
+  border-top: var(--size) solid black;
+  top: 30%;
+}
+
+label {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+label.form-check-label {
+  font-weight: 400;
+}
+
+.btn-primary {
+  width: 100%;
 }
 
-.results {
-    display: none;
+.display-verify {
+  display: none;
 }