Adldoke

Running

App Files Files Community

Ashrafb commited on Feb 14

Commit

3eb8b56

•

1 Parent(s): dd428b8

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +147 -50

static/index.html CHANGED Viewed

@@ -150,57 +150,112 @@
   font-size: 20px;
   color: white;
 }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Aiconvert.online </h1>
-            <div id="cont">
-        <div>
-            <label for="prompt">Enter text:</label>
-            <input type="text" id="prompt" name="prompt">
-        </div>
-        <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 inputs:</label>
-            <input type="text" id="inputs" name="inputs">
         </div>
         <br>
-          <div>
-    <label for="additional-options-toggle" onclick="toggleAdditionalOptions()">Show Additional Options</label>
-    <input type="checkbox" id="additional-options-toggle" style="display: none;">
-    <div id="additional-options" style="display: none;">
-        <label for="is_negative">Is Negative:</label>
-        <input type="checkbox" id="is_negative" name="is_negative">
-        <br>
-        <label for="steps">Steps:</label>
-        <input type="number" id="steps" name="steps" value="1">
-        <br>
-        <label for="cfg_scale">CFG Scale:</label>
-        <input type="number" id="cfg_scale" name="cfg_scale" value="6">
-        <br>
-        <label for="seed">Seed:</label>
-        <input type="number" id="seed" name="seed">
-        <label for="noise_level">Noise Level:</label>
-        <input type="number" id="noise_level" name="noise_level" step="0.01" min="0" max="1" value="0">
-    </div>
-</div>
-        <div>
-            <button onclick="sendInputs()">Send Inputs</button>
-            <div id="sendSpinner" class="spinner" style="display: none;"></div>
-        </div>
         </div>
         <br>
         <div id="output-container" class="image-container">
             <div id="image-box" class="image-box">
@@ -210,13 +265,7 @@
     </div>
 <script>
-    function toggleAdditionalOptions() {
-    const checkbox = document.getElementById("additional-options-toggle");
-    const options = document.getElementById("additional-options");
-    options.style.display = checkbox.checked ? "block" : "none";
-}
-  function showSpinner(spinnerId) {
         document.getElementById(spinnerId).style.display = 'block';
     }
@@ -239,16 +288,27 @@
             });
     }
-    function sendInputs() {
-    showSpinner('sendSpinner');
     const inputs = document.getElementById("inputs").value;
     const noiseLevel = document.getElementById("noise_level").value;
-    const isNegative = document.getElementById("is_negative").checked;
     const steps = document.getElementById("steps").value;
     const cfgScale = document.getElementById("cfg_scale").value;
     const seed = document.getElementById("seed").value;
     fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`)
-        .then(response => response.json())
         .then(data => {
             const imageBox = document.getElementById("image-box");
             const img = new Image();
@@ -265,10 +325,47 @@
         })
         .catch(error => {
             console.error('Error:', error);
             hideSpinner('sendSpinner');
         });
 }
 </script>
 </body>
 </html>

   font-size: 20px;
   color: white;
 }
+  #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;
+        }
+ #advanced-options {
+             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;
+      background-color: #030303;
+      padding: 0px;
+      border-radius: 12px;
+      box-shadow: 8px 8px 16px #050505, -8px -8px 16px #080808;
+       display: none;
+      align-items: center;
+      border: 2px solid rgb(247, 6, 187);
+        }
+        #advanced-options label, #advanced-options input {
+            margin: 10px;
+              color: #fff;
+        }
+        #advanced-options input[type="number"] {
+            width: 50px;
+            padding: 5px;
+        }
+        #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;
+        }
+        #advanced-options button:hover {
+            background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Aiconvert.online </h1>
+        <div id="cont">
+            <div>
+                <label for="prompt">Enter text:</label>
+                <input type="text" id="prompt" name="prompt">
+            </div>
+            <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">
+            </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>
+        <div id="advanced-options">
+            <label for="is_negative">Is Negative:</label>
+           <input type="text" id="is_negative" name="is_negative" value="blurry, fuzziness">
+            <br>
+           <label for="steps">Steps:</label>
+<input type="range" id="steps" name="steps" min="30" max="100" value="50">
+<span id="steps-value">50</span>
+<br>
+<label for="cfg_scale">Guidance Scale:</label>
+<input type="range" id="cfg_scale" name="cfg_scale" min="5" max="14" value="7.5" step="1">
+<span id="cfg-scale-value">7.5</span>
+<br>
+<label for="seed">Seed:</label>
+<input type="range" id="seed" name="seed" min="1" max="99999" value="0" step="1">
+<span id="seed-value">0</span>
+<br>
+<label for="noise_level">Noise Level:</label>
+<input type="range" id="noise_level" name="noise_level" min="0" max="10" step="1" value="0">
+<span id="noise-level-value">0</span>
+            <br>
+            <button onclick="toggleAdvancedOptions()">Hide Advanced Options</button>
         </div>
         <br>
         <div id="output-container" class="image-container">
             <div id="image-box" class="image-box">
     </div>
 <script>
+    function showSpinner(spinnerId) {
         document.getElementById(spinnerId).style.display = 'block';
     }
             });
     }
+function sendInputs() {
     const inputs = document.getElementById("inputs").value;
+    if (!inputs) {
+        const imageBox = document.getElementById("image-box");
+        imageBox.innerHTML = "<p>Please enter prompt before sending.</p>";
+        return;
+    }
+    showSpinner('sendSpinner');
     const noiseLevel = document.getElementById("noise_level").value;
+    const isNegative = document.getElementById("is_negative").value;
     const steps = document.getElementById("steps").value;
     const cfgScale = document.getElementById("cfg_scale").value;
     const seed = document.getElementById("seed").value;
     fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
         .then(data => {
             const imageBox = document.getElementById("image-box");
             const img = new Image();
         })
         .catch(error => {
             console.error('Error:', error);
+            const imageBox = document.getElementById("image-box");
+            imageBox.innerHTML = "<p>An error occurred. Please try again later.</p>";
             hideSpinner('sendSpinner');
         });
 }
+function toggleAdvancedOptions() {
+    const advancedOptions = document.getElementById("advanced-options");
+    if (advancedOptions.style.display === "none") {
+        advancedOptions.style.display = "block";
+    } else {
+        advancedOptions.style.display = "none";
+    }
+}
+    // Function to update slider value display
+    function updateSliderValue(sliderId, spanId) {
+        const slider = document.getElementById(sliderId);
+        const span = document.getElementById(spanId);
+        span.textContent = slider.value;
+    }
+    // Event listeners to update slider values
+    document.getElementById("steps").addEventListener("input", () => {
+        updateSliderValue("steps", "steps-value");
+    });
+    document.getElementById("cfg_scale").addEventListener("input", () => {
+        updateSliderValue("cfg_scale", "cfg-scale-value");
+    });
+    document.getElementById("seed").addEventListener("input", () => {
+        updateSliderValue("seed", "seed-value");
+    });
+    document.getElementById("noise_level").addEventListener("input", () => {
+        updateSliderValue("noise_level", "noise-level-value");
+    });
 </script>
 </body>
 </html>