Adldoke

Running

App Files Files Community

Ashrafb commited on Feb 21

Commit

b1be814

•

1 Parent(s): 5767dfe

Upload static_index (6).html

Browse files

Files changed (1) hide show

static/static_index (6).html +371 -0

static/static_index (6).html ADDED Viewed

	@@ -0,0 +1,371 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FastAPI App</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet">
+    <style>
+          html, body {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      overflow-x: hidden !important;
+    }
+    body {
+      background-color: #000000;
+      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);
+    }
+      #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;
+    }
+   #cont button:hover {
+      background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));
+    }
+        .container {
+            text-align: center;
+        }
+        h1 {
+            margin-bottom: 20px;
+            font-family: 'Barlow Condensed';
+            color: pink;
+        }
+    #inputs {
+  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;
+}
+        .image-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .image-box {
+    width: 200px; /* 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;
+    overflow: hidden; /* Ensure the image does not overflow the box */
+    position: relative; /* Positioning context for absolute positioning of image */
+}
+.spinner {
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top: 3px solid #ffffff;
+  width: 20px;
+  height: 20px;
+  animation: spin 2s linear infinite;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+        .image-box img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover; /* Maintain aspect ratio and cover the entire box */
+        }
+        #noise_level {
+             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;
+        }
+          #image-box {
+  border: 2px solid blue;
+  width: 330px;
+  height: 330px;
+  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;
+}
+#image-box p {
+  width: 80%;
+  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">Negative prompt :</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">
+                <p>Your Generated Arts Will Appear Here</p>
+            </div>
+        </div>
+    </div>
+<script>
+    function showSpinner(spinnerId) {
+        document.getElementById(spinnerId).style.display = 'block';
+    }
+    function hideSpinner(spinnerId) {
+        document.getElementById(spinnerId).style.display = 'none';
+    }
+    function generatePrompts() {
+        showSpinner('promptSpinner');
+        const prompt = document.getElementById("prompt").value;
+        fetch(`/generate_prompts?prompt_text=${encodeURIComponent(prompt)}`)
+            .then(response => response.text())
+            .then(data => {
+                document.getElementById("inputs").value = data.trim();
+                hideSpinner('promptSpinner');
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                hideSpinner('promptSpinner');
+            });
+    }
+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();
+            img.src = 'data:image/jpeg;base64,' + data.image_base64;
+            const maxWidth = 200;
+            const maxHeight = 200;
+            if (img.width > maxWidth || img.height > maxHeight) {
+                const ratio = Math.min(maxWidth / img.width, maxHeight / img.height);
+                img.width *= ratio;
+                img.height *= ratio;
+            }
+            imageBox.appendChild(img);
+            hideSpinner('sendSpinner');
+        })
+        .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>