Hugging Face's logo

Spaces:
gptnext
/
Stable_diffusion_fast_sdxl
Running

App Files Community
Stable_diffusion_fast_sdxl / index.html
ionium
Update index.html
e617050
raw
history blame contribute delete
13.3 kB
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet">
<title>Free AI Image Generator | SDXL | Stable diffusion</title>
<style>
#images {
display: flex;
flex-wrap: wrap;
justify-content: center;margin-top: 20px;
}
@media screen and (max-width:600px) {
#images{
flex-direction: row;
}
}
#images img {
margin: 10px;
max-width: 400px;
height: auto;
}
#status{
color: aquamarine;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-top: 100px;
}
@font-face {
font-family: 'Bangers';
src: url('Bangers-Regular.ttf') format('truetype');
}
@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:400,600');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: radial-gradient(circle at center, rgba(170, 170, 170, 0.1) 6%, rgb(0, 6, 18)100%), rgb(0,7,20);
}
#cv{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
z-index: -1;
}
@keyframes colorChange {
0% {
color: #e2335f;
}
25% {
color: #e429b5;
}
50% {
color: rgb(115, 14, 209);
}
75% {
color: rgb(7, 240, 189);
}
100% {
color: rgb(200, 238, 229);
}
}
h1 {
font-family: 'Barlow Condensed', sans-serif;
text-align: center;
margin-top: 10px;
animation: colorChange 10s linear infinite;
}
h2{
color: #fdfdfd;
font-weight: 1;
font-size: 22px;
margin: auto;
margin-top: 40px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: left;
margin-bottom: 17px;
width: 69%;
}
#h21{
margin-bottom: 0px;
}
#try{
margin: auto;
margin-top: 40px;
width: 61%;
border: none;
border-radius: 10px;
box-shadow: 0px 0px 5px 1px cyan;
}
#try input{
padding: 24px;
width: 50%;
border: none;
margin-left: 2px;
border-radius: 10px;
background-color: transparent;
color: rgb(145, 145, 145);
outline: none;
}
#try:hover{
outline: none;
box-shadow:0px 0px 18px 1px rgb(0, 155, 191);
border: none;
}
@keyframes buttonColorChange {
0% {
background: linear-gradient(to right, #e2335f, #d64dd6);
}
25% {
background: linear-gradient(to right, #d64dd6, #730ed1);
}
50% {
background: linear-gradient(to right, #730ed1, #04ecc6);
}
75% {
background: linear-gradient(to right, #7f4fda, #11e7b2);
}
100% {
background: linear-gradient(to right, #11e7b2, #e2335f);
}
}
#try button {
padding: 13.3px;
float: right;
margin-top: 9.5px;
margin-right: 10px;
border: none;
border-radius: 3px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
z-index: 100;
outline: none;
transition: all ease 10s;
cursor: pointer;
animation: buttonColorChange 10s infinite linear;
}
#try button:hover {
background-color: rgb(0, 155, 191);
outline: none;
border: none;
transition: all ease 2s;
}
#try button:active{
transform: scale(0.5)
}
@media screen and (max-width:600px){
h2{
width: 95%;
margin: auto;
justify-content: center;
}
#try{
display: flex;
align-items: center;
justify-content: center;
width: 92%;
}
#try input{
width: 60%;
}
#try button{
position: relative;
top: 50%;
transform: translateY(-0%);
width: 35%;
height: 50px;
margin: 0;
padding: 0;
margin-left: 5px;
}
}
@media screen and (max-width:375px){
#try button{
width: 30%;
}
}
#idk{
color: #ad0fd4;
}
</style>
<body>
<style>
#images {
flex-wrap: wrap;
margin: 0;
color: gainsboro;
flex-direction: column;
margin-bottom: 0;
gap: 10px; /* Adjust the gap between images as needed */
margin: 0;
margin-top: 5px;
text-align: center;
justify-content: center;
margin: auto;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family: 'Barlow Condensed', sans-serif;
font-size: 20px;
}
#images img {
position: relative;
border-radius: 0px;
width: 340px;
height: 340px;
padding: 3px;
padding-bottom: 4.7px;
margin: 0;
margin-top: 3px ;
}
#cont {
margin: auto;
width: 350px;
height: 350px;
overflow-y: scroll;
overflow-x: hidden;
margin-top: 40px;
box-shadow: 0px 0px 5px 1px rgb(0, 155, 191);
border-radius: 10px;
display: flex;
justify-content: center; /* Horizontally center */
font-family: 'Barlow Condensed', sans-serif;
text-align: center; /* Horizontally center text content */
font-size: 15px;
}
#status {
font-family: 'Barlow Condensed', sans-serif;
position: absolute;
top: 50%;
left: 50%;
font-size: 15px;
transform: translate(-50%,-50%);
background: radial-gradient(circle at center, rgba(170, 170, 170, 0.1) 6%, rgb(0, 6, 18)100%), rgb(0,7,20);
}
p{
font-family: 'Barlow Condensed', sans-serif;
margin:0;
font-size: 15px;
}
@media screen and (min-width: 800px) {
#cont {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 705px;
height: 355px;
overflow: hidden;
flex-direction: row;
margin-bottom: 0;
font-family: 'Barlow Condensed', sans-serif;
}
#images {
flex-wrap: nowrap;
margin: 0;
align-items: center; /* Center vertically */
flex-direction: row;
margin-bottom: 0;
font-family: 'Barlow Condensed', sans-serif;
gap: 0px; /* Adjust the gap between images as needed */
margin-left: 5px;
margin-right: 5px;
}
#images img {
width: 350px;
height: 350px;
margin: 0;
border-radius: 6.5px;
}
}
@media screen and (min-width: 570px) and (max-width: 799px) {
#try button {
width: 20%;
}
#cont {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 550px;
height: 270px;
overflow: hidden;
flex-direction: column;
margin-bottom: 0;
}
#images {
flex-wrap: nowrap;
margin: 0;
align-items: center; /* Center vertically */
flex-direction: column;
margin-bottom: 0;
}
#images img {
width: 267px;
height: 267px;
margin: 0;
border-radius: 6.5px;
}
}
@media screen and (min-width:320px) and (max-width:370px) {
#cont {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 330px;
height: 330px;
flex-direction: column;
margin-bottom: 0;
}
#images {
flex-wrap: nowrap;
margin: 0;
align-items: center; /* Center vertically */
flex-direction: column;
margin-bottom: 0;
margin-top: 340px;
}
#images img {
width: 330px;
height: 330px;
margin: 0;
border-radius: 10px;
}
}
</style>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
height:100%;
width:100%;
}
p{
font-size: 20px;
}
</style>
<canvas id="cv"></canvas>
<h1>Image generator</h1>
<div id="try">
<input type="text" id="promptInput" placeholder="Enter image prompt">
<button id="submitButton" onclick="submitPrompt()">Generate Image</button>
</div>
<div id="cont">
<div id="images">
<p>generated image will appear here</p>
</div>
</div>
<script>
count = 25
let intervalId;
function tim(){
intervalId = setInterval(() => {
count -= 1;
let p = document.getElementById('images').firstChild;
p.innerText = `generating images.... estimated time ${count} `;
if(count==0){
count=0
}
}, 1600);
}
function submitPrompt(){
if(document.getElementById('promptInput').value == ''){
alert('enter some text')
}
else{
tim()
count=25
document.getElementById('images').innerHTML = ''
let p = document.createElement('p')
p.innerText = `generating images.... estimated time ${count} `
document.getElementById('images').append(p)
const url = "https://friendlyunselfishcodeview.mygyasir8.repl.co/generate_image";
inp = document.getElementById('promptInput')
const data = {
prompt: inp.value,
width: 1024,
height: 1024,
count: 2,
refine: "expert_ensemble_refiner",
scheduler: "DPMSolverMultistep",
guidance_scale: 9.5,
high_noise_frac: 1,
prompt_strength: 1,
num_inference_steps: 70
};
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
// Extract the image URLs from the response data
const imageUrls = data.images.images;
let img1 = document.createElement('img')
img1.src = imageUrls[0]
let img2 = document.createElement('img')
img2.src = imageUrls[1]
let div = document.getElementById('images')
div.append(img1)
div.append(img2)
p.innerHTML = ''
// Log the image URLs to the console
console.log('Image URLs:', imageUrls);
clearInterval(intervalId)
p.innerHTML=''
})
.catch((error) => {
console.error('Error:', error);
});
}
}
</script>
<script>
const cv = document.getElementById('cv');
const ctx = cv.getContext('2d');
cv.width = window.innerWidth;
cv.height = window.innerHeight;
const colors = [
{ r: 15, g: 100, b: 100 }, // Red
{ r: 20, g: 55, b:140 }, // Green
{ r: 450, g: 0, b: 80 }, // Blue
{ r: 95, g: 12, b: 60 } // Pink
];
let currentColorIndex = 0;
let lastColorChangeTime = 0;
let targetColor = colors[currentColorIndex];
let particleColor = colors[currentColorIndex];
class Particle {
constructor() {
this.x = Math.random() * cv.width;
this.y = Math.random() * cv.height;
this.size = Math.random() * 2 + 1;
this.vx = Math.sin(Math.random() * 4 - 1);
this.vy = Math.cos(Math.random() * 2 - 1);
}
draw() {
ctx.fillStyle = `rgb(${Math.round(particleColor.r)},${Math.round(particleColor.g)},${Math.round(particleColor.b)})`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
update() {
if (this.x < this.size || this.x > cv.width) {
this.vx *= -1;
}
if (this.y < this.size || this.y > cv.height) {
this.vy *= -1;
}
this.x += this.vx;
this.y += this.vy;
// Update particle color gradually towards the target color
const colorStep = 0.01; // Adjust this value for the speed of color change
if (particleColor.r < targetColor.r) {
particleColor.r += colorStep;
} else if (particleColor.r > targetColor.r) {
particleColor.r -= colorStep;
}
if (particleColor.g < targetColor.g) {
particleColor.g += colorStep;
} else if (particleColor.g > targetColor.g) {
particleColor.g -= colorStep;
}
if (particleColor.b < targetColor.b) {
particleColor.b += colorStep;
} else if (particleColor.b > targetColor.b) {
particleColor.b -= colorStep;
}
// Check if the color has reached the target, and if so, set a new target
if (
Math.abs(particleColor.r - targetColor.r) < colorStep &&
Math.abs(particleColor.g - targetColor.g) < colorStep &&
Math.abs(particleColor.b - targetColor.b) < colorStep
) {
currentColorIndex = (currentColorIndex + 1) % colors.length;
targetColor = colors[currentColorIndex];
}
}
}
let particles = [];
if(window.innerWidth>500){
for (let i = 0; i < 200; i++) {
particles.push(new Particle());
}
}
else{
for (let i = 0; i < 100; i++) {
particles.push(new Particle());
}
}
function animate() {
ctx.clearRect(0, 0, cv.width, cv.height);
particles.forEach((particle) => {
particle.draw();
particle.update();
});
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
</body>
</html>