Update static/index.html

static/index.html

@@ -18,45 +18,87 @@
       margin: 0;
     }
      #cont {
-      background-color: #030303;
-      padding: 0px;
-      border-radius: 12px;
-      box-shadow: 8px 8px 16px #050505, -8px -8px 16px #080808;
-      display: flex;
-      align-items: center;
-      border: 2px solid rgb(247, 6, 187);
-    }
+        border: 2px solid blue;
+    width: 265px;
+    height: 50px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    margin: auto;
+    margin-top: 30px;
+    padding-bottom: 7px;
+    gap: 14px;
+    background: linear-gradient(black , black) padding-box,
+                linear-gradient(to right, red, blue) border-box;
+    border-radius: 20px;
+    border: 2.5px solid transparent;
+}
+    
       #prompt {
       flex-grow: 1;
-      padding: 10px;
-      margin: 10px;
-      background: transparent;
-      border: none;
-      border-radius: 8px;
-      box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
-      color: #fff;
-      outline: none;
-    }
-#cont button {
-      padding: 2.5vh 4.6vh;
-      margin: 1vh;
-      background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
-      border: none;
-      border-radius: 8px;
-      color: #fff;
-      cursor: pointer;
+  padding: 10px;
+  margin: 10px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
+  color: #fff;
+  outline: none;
     }
-   #cont button:hover {
-      background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));
+#generatePrompts {
+        background-image: linear-gradient(
+        45deg,
+        hsl(240deg 75% 29%) 0%,
+        hsl(254deg 78% 28%) 6%,
+        hsl(264deg 82% 27%) 13%,
+        hsl(272deg 87% 26%) 19%,
+        hsl(278deg 93% 25%) 25%,
+        hsl(284deg 98% 24%) 31%,
+        hsl(289deg 100% 23%) 37%,
+        hsl(294deg 100% 23%) 44%,
+        hsl(299deg 100% 22%) 50%,
+        hsl(303deg 100% 23%) 56%,
+        hsl(307deg 100% 24%) 63%,
+        hsl(311deg 100% 25%) 69%,
+        hsl(313deg 100% 26%) 75%,
+        hsl(316deg 95% 28%) 81%,
+        hsl(320deg 88% 30%) 87%,
+        hsl(323deg 81% 32%) 94%,
+        hsl(326deg 75% 33%) 100%
+    );
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin-top: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    display: block;
+    margin: 0 auto;
+    width: 200px;
+}
+   #generatePrompts:hover {
+     /* Hover effect for the button */
+
+    background-color: #45a049;
+}
     }
+
+
+  
         .container {
             text-align: center;
         }
 
         h1 {
-            margin-bottom: 20px;
-            font-family: 'Barlow Condensed';
-            color: pink;
+           text-align: center;
+    margin-bottom: 20px;
+    font-family: 'Barlow Condensed';
+    color: pink;
+    font-size: 40px; /* Adjust the font size as needed */
         }
     #inputs {
   flex-grow: 1;
@@ -80,7 +122,7 @@
         }
 
         .image-box {
-    width: 200px; /* Adjust the width as needed */
+    width: 100px; /* Adjust the width as needed */
     height: 200px; /* Adjust the height as needed */
     border: 2px solid #ffffff; /* Set the border color to white */
     border-radius: 10px;
@@ -130,8 +172,8 @@
         }
           #image-box {
   border: 2px solid blue;
-  width: 330px;
-  height: 330px;
+  width: 265px;
+  height: 300px;
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
@@ -146,20 +188,57 @@
 }
 
 #image-box p {
-  width: 80%;
+
   font-size: 20px;
   color: white; 
+  text-align :center ;
 }
-  #showadv{
-            padding: 10px 20px;
-            margin: 10px;
-            background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            color: #fff;
-            
-        }
+#showadv {
+    padding: 10px 20px;
+    /* Auto margin for centering horizontally */
+    background-image: linear-gradient(
+        45deg,
+        hsl(240deg 75% 29%) 0%,
+        hsl(254deg 78% 28%) 6%,
+        hsl(264deg 82% 27%) 13%,
+        hsl(272deg 87% 26%) 19%,
+        hsl(278deg 93% 25%) 25%,
+        hsl(284deg 98% 24%) 31%,
+        hsl(289deg 100% 23%) 37%,
+        hsl(294deg 100% 23%) 44%,
+        hsl(299deg 100% 22%) 50%,
+        hsl(303deg 100% 23%) 56%,
+        hsl(307deg 100% 24%) 63%,
+        hsl(311deg 100% 25%) 69%,
+        hsl(313deg 100% 26%) 75%,
+        hsl(316deg 95% 28%) 81%,
+        hsl(320deg 88% 30%) 87%,
+        hsl(323deg 81% 32%) 94%,
+        hsl(326deg 75% 33%) 100%
+    );
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #fff;
+     text-align: center;
+     display: inline-block;
+     margin: 0 auto;
+    width: 200px;
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin-top: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    display: block;
+    margin: 0 auto;
+    width: 200px;
+}
+
  #advanced-options {
              flex-grow: 1;
       padding: 10px;
@@ -177,6 +256,7 @@
        display: none;
       align-items: center;
       border: 2px solid rgb(247, 6, 187);
+      text-align :center ;
         }
         #advanced-options label, #advanced-options input {
             margin: 10px;
@@ -189,19 +269,93 @@
         }
         #advanced-options button {
             padding: 10px 20px;
-            margin: 10px;
-            background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            color: #fff;
+    /* Auto margin for centering horizontally */
+    background-image: linear-gradient(
+        45deg,
+        hsl(240deg 75% 29%) 0%,
+        hsl(254deg 78% 28%) 6%,
+        hsl(264deg 82% 27%) 13%,
+        hsl(272deg 87% 26%) 19%,
+        hsl(278deg 93% 25%) 25%,
+        hsl(284deg 98% 24%) 31%,
+        hsl(289deg 100% 23%) 37%,
+        hsl(294deg 100% 23%) 44%,
+        hsl(299deg 100% 22%) 50%,
+        hsl(303deg 100% 23%) 56%,
+        hsl(307deg 100% 24%) 63%,
+        hsl(311deg 100% 25%) 69%,
+        hsl(313deg 100% 26%) 75%,
+        hsl(316deg 95% 28%) 81%,
+        hsl(320deg 88% 30%) 87%,
+        hsl(323deg 81% 32%) 94%,
+        hsl(326deg 75% 33%) 100%
+    );
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #fff;
+     text-align: center;
+     display: inline-block;
+     margin: 0 auto;
+    width: 50px;
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin-top: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    display: block;
+    margin: 0 auto;
+    width: 200px;
             
         }
         #advanced-options button:hover {
             background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));
         }
         
-        
+          #generate {
+    background-image: linear-gradient(
+        45deg,
+        hsl(240deg 75% 29%) 0%,
+        hsl(254deg 78% 28%) 6%,
+        hsl(264deg 82% 27%) 13%,
+        hsl(272deg 87% 26%) 19%,
+        hsl(278deg 93% 25%) 25%,
+        hsl(284deg 98% 24%) 31%,
+        hsl(289deg 100% 23%) 37%,
+        hsl(294deg 100% 23%) 44%,
+        hsl(299deg 100% 22%) 50%,
+        hsl(303deg 100% 23%) 56%,
+        hsl(307deg 100% 24%) 63%,
+        hsl(311deg 100% 25%) 69%,
+        hsl(313deg 100% 26%) 75%,
+        hsl(316deg 95% 28%) 81%,
+        hsl(320deg 88% 30%) 87%,
+        hsl(323deg 81% 32%) 94%,
+        hsl(326deg 75% 33%) 100%
+    );
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin-top: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    display: block;
+    margin: 0 auto;
+    width: 200px;
+}
+
+#generate:hover {
+    background-color: #45a049; /* Hover effect */
+}
     </style>
 </head>
 <body>
@@ -209,27 +363,29 @@
         <h1>Aiconvert.online </h1>
        
         <div id="cont">
-            <div>
-                <label for="prompt">Enter text:</label>
-                <input type="text" id="prompt" name="prompt">
-            </div>
+            
+            
+                <input type="text" id="prompt" name="prompt"placeholder="Enter Text Idea">
+            
             <br>
-            <div>
-                <button onclick="generatePrompts()">Generate Prompts</button>
-                <div id="promptSpinner" class="spinner" style="display: none;"></div>
-            </div>
+        
         </div>
-        <br>
-        <div id="cont">
             <div>
-                <label for="inputs">Enter prompt:</label>
-                <input type="text" id="inputs" name="inputs">
+                <button id="generatePrompts" onclick="generatePrompts()">Generate Prompts</button>
+              
             </div>
+        <br>
+      <div id="cont" style="position: relative;">
+    <div>
+        <div id="promptSpinner" class="spinner" style="display: none;"></div>
+  
+        <input type="text" id="inputs" name="inputs" placeholder="Enter prompt" >
+    </div>
+
+
+            
             <br>
-            <div>
-                <button onclick="sendInputs()">generate image </button>
-                <div id="sendSpinner" class="spinner" style="display: none;"></div>
-            </div>
+        
         </div>
         <br>
          <button id="showadv" onclick="toggleAdvancedOptions()">Advanced Options</button>
@@ -254,12 +410,17 @@
 <span id="noise-level-value">0</span>
 
             <br>
-            <button onclick="toggleAdvancedOptions()">Hide Advanced Options</button>
+            <button onclick="toggleAdvancedOptions()">Hide </button>
         </div>
         <br>
+        	    <div>
+                <button id="generate" onclick="sendInputs()">generate image </button>
+               
+            </div>
         <div id="output-container" class="image-container">
             <div id="image-box" class="image-box">
-                <p>Your Generated Arts Will Appear Here</p>
+                <p>Your Generated Image Will Appear Here</p>
+                 <div id="sendSpinner" class="spinner" style="display: none;"></div>
             </div>
         </div>
     </div>
@@ -296,6 +457,9 @@ function sendInputs() {
         return;
     }
     
+    const imageBox = document.getElementById("image-box");
+    imageBox.innerHTML = ""; // Clear previous content
+    
     showSpinner('sendSpinner');
     const noiseLevel = document.getElementById("noise_level").value;
     const isNegative = document.getElementById("is_negative").value;
@@ -311,6 +475,7 @@ function sendInputs() {
         })
         .then(data => {
             const imageBox = document.getElementById("image-box");
+            imageBox.innerHTML = ""; // Clear previous content
             const img = new Image();
             img.src = 'data:image/jpeg;base64,' + data.image_base64;
             const maxWidth = 200;
@@ -326,11 +491,12 @@ function sendInputs() {
         .catch(error => {
             console.error('Error:', error);
             const imageBox = document.getElementById("image-box");
-            imageBox.innerHTML = "<p>An error occurred. Please try again later.</p>";
+            imageBox.innerHTML = '<p style="color:white;">An error occurred. Please try again later.</p>';
             hideSpinner('sendSpinner');
         });
 }
 
+
 function toggleAdvancedOptions() {
     const advancedOptions = document.getElementById("advanced-options");
     if (advancedOptions.style.display === "none") {