Adldoke

Running

File size: 15,340 Bytes

<!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;
    
    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;
}

        
    

.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); }
}

        

        
        
        #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;
        }
       

#resultContainer 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));
        }
        
          #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 */
}
#resultImage {
    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;
}



#resultContainer img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}
      #loadingSpinner {
    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: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Initially hide the loading spinner */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
    </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="1" 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="generate" onclick="sendInputs()">generate image </button>
                 
            </div>
            <div id="resultImage">
   
    <div id="loadingSpinner" style="display: none;"></div>
    <div id="resultContainer"></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');
            });
    }




 




async function sendInputs() {
    const inputs = document.getElementById("inputs").value;
    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;

    // Check if the input field is empty
    if (!inputs) {
        document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Please enter a prompt before sending.</p>`;
        return;
    }


    
        // Clear the result container
        document.getElementById('resultContainer').innerHTML = "";

        // Display loading spinner
        const loadingSpinner = document.getElementById('loadingSpinner');
        loadingSpinner.style.display = 'block';
try {
        // Fetch data from the server
        const response = await fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`);

        // Check if the response is successful
        if (response.ok) {
            const resultContainer = document.getElementById('resultContainer');
            const data = await response.json();
            const img = document.createElement('img');
            img.style.maxWidth = '100%'; // Adjust this value as needed
            img.style.maxHeight = '100%'; // Adjust this value as needed
            img.src = 'data:image/jpeg;base64,' + data.image_base64;
            resultContainer.appendChild(img);
        } else {
            document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
        }
    } catch (error) {
        console.error('Error:', error);
        document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
    } finally {
        // Hide loading spinner regardless of success or failure
        const loadingSpinner = document.getElementById('loadingSpinner');
        loadingSpinner.style.display = 'none';
    }
}







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>