updats

static/index.html

@@ -75,6 +75,21 @@
                   style="display: none"
                 />
               </div>
+
+              <div class="alert alert-secondary action-menu" role="alert">
+                <div class="row">
+                  <div class="col">
+                    <p><strong>Non consectetur erat in non et in?</strong></p>
+                    <p>Ornare a est accumsan et platea quis rhoncus.</p>
+                  </div>
+                  <div class="col flex-grow-0">
+                    <button type="button" id="download-button" class="btn btn-outline-primary">Download image <img src="images/download_icon.svg" /></button>
+                  </div>
+                  <div class="col flex-grow-0">
+                    <button type="button" id="goto-verify-button" class="btn btn-outline-primary">Go to verify tab  <img src="images/link_icon.svg" /></button>
+                  </div>
+                </div>
+              </div>
             </div>
             <div class="display-verify">
               <div class="row mt-5 pb-4" id="original-image">
@@ -214,9 +229,12 @@
     const imagePrompt = document.getElementById("prompt");
     const model = document.getElementById("model");
     const generateImageContainer = document.querySelector(".display-generate .image-container");
+    const generateActionMenu = document.querySelector(".action-menu");
     const verifyImageContainer = document.querySelector(".display-verify .image-container");
     const uploadedImageContainer = document.querySelector("#original-image");
+    const downloadButton = document.getElementById("download-button");
 
+      
     generateTab.addEventListener("click", (event) => {
       event.target.classList.add("active");
       verifyTab.classList.remove("active");
@@ -233,6 +251,11 @@
       setVerifyElementsDisplay("block");
     });
 
+    document.getElementById('goto-verify-button').addEventListener("click",  (event) => {
+      setVerifyElementsDisplay('block');
+      setGenerateElementsDisplay('none');
+    });
+
     function setGenerateElementsDisplay(displayStatus) {
       displayGenerate.forEach((item) => {
         item.style.display = displayStatus;
@@ -344,6 +367,7 @@
       
       placeholder = document.querySelector('.display-generate .placeholder');
       spinner = document.querySelector('.display-generate .spinner');
+      generateActionMenu.style.display = "none";
 
       // verificationDetails.style.display = "none";
       // parameters.style.display = "none";
@@ -381,6 +405,13 @@
         spinner.style.display = "none";
         generateImageContainer.appendChild(truepicDisplay);
 
+        generateActionMenu.style.display = "block";
+
+        downloadButton.addEventListener("click",  (event) => {
+          event.preventDefault();
+          window.open(path);
+        });
+        
         /*
     downloadLink.style.display = "block";
     downloadLink.href = path;
@@ -390,6 +421,7 @@
     promptParam.innerHTML = textGenInput.value;
     parameters.style.display = "block";
     */
+        
       } catch (err) {
         console.error(err);
       }

static/style.css

@@ -117,4 +117,12 @@ img.thumbnail {
 
 #resultLabel {
   display:none;
+}
+
+.action-menu {
+  display: none;
+}
+
+.action-menu button {
+  width: 175px;
 }