Spaces:
Running
Running
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<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 ; | |
} | |
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 { | |
width: 265px; | |
flex-grow: 1; | |
padding: 10px; | |
margin: 0 auto; | |
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); } | |
} | |
#downloadButton { | |
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; | |
} | |
/* Hover effect for the button */ | |
button:hover { | |
background-color: #45a049; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<h1></h1> | |
<div id="cont"style="display:none;"> | |
<input type="text" id="prompt" name="prompt"placeholder="Enter Text Idea"> | |
<br> | |
</div> | |
<div> | |
<button id="generatePrompts" style="display:none;" 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> | |
<button id="downloadButton" style="display: block ;" onclick="downloadResultImage()">Download </button> | |
<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(`https://ashrafb-dlprdoke.hf.space/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(`https://ashrafb-dlprdoke.hf.space/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.result_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"); | |
}); | |
function downloadResultImage() { | |
const resultImage = document.getElementById('resultContainer').querySelector('img'); | |
const link = document.createElement('a'); | |
link.href = resultImage.src; | |
link.download = 'result_image.png'; | |
document.body.appendChild(link); | |
link.click(); | |
document.body.removeChild(link); | |
} | |
</script> | |
</body> | |
</html> | |