Spaces:

Ashrafb
/

Ddfdoke

Paused

App Files Files Community

Ashrafb commited on Mar 23, 2024

Commit

2ff27b3

verified ·

1 Parent(s): 3c5f5c1

Create index.html

Browse files

Files changed (1) hide show

static/index.html +491 -0

static/index.html ADDED Viewed

	@@ -0,0 +1,491 @@

+<!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 {
+        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;
+    }
+#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 {
+           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;
+  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: 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;
+    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: 265px;
+  height: 300px;
+  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 {
+  font-size: 20px;
+  color: white;
+  text-align :center ;
+}
+#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;
+      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);
+      text-align :center ;
+        }
+        #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;
+    /* 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));
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Aiconvert.online </h1>
+        <div id="cont">
+                <input type="text" id="prompt" name="prompt"placeholder="Enter Text Idea">
+            <br>
+        </div>
+            <div>
+                <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>
+        <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 </button>
+        </div>
+        <br>
+        	    <div>
+                <button id ="generatePrompts" onclick="sendInputs()">generate image </button>
+            </div>
+        <div id="output-container" class="image-container">
+            <div id="image-box" class="image-box">
+                <p>Your Generated Image Will Appear Here</p>
+                 <div id="sendSpinner" class="spinner" style="display: none;"></div>
+            </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>