Spaces:

gptnext
/

Stable_diffusion_fast_sdxl

Running

App Files Files Community

ionium commited on Oct 7, 2023

Commit

e617050

•

1 Parent(s): 3f3df3e

Update index.html

Browse files

Files changed (1) hide show

index.html +610 -16

index.html CHANGED Viewed

@@ -1,19 +1,613 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

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