Hugging Face's logo

Spaces:
Rowdy013
/
Stable-Diffusion-Models
Running

App Files Community
Stable-Diffusion-Models / index.html
yasir
Update index.html
e06baca verified
raw
history blame contribute delete
15 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script type='text/javascript'>
window.smartlook||(function(d) {
var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];
var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript';
c.charset='utf-8';c.src='https://web-sdk.smartlook.com/recorder.js';h.appendChild(c);
})(document);
smartlook('init', 'ab064cf709cc86cb945d2dfb051a3a1254d7fb19', { region: 'eu' });
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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" <meta
charset="UTF-8">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8419334759638161"
crossorigin="anonymous"></script>
<title>AI Image Creator</title>
<style>
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden !important;
}
body {
background-color: #000000;
margin: 0;
}
#main {
display: flex;
flex-direction: column;
margin: 50px;
margin: auto;
}
#cont {
background-color: #030303;
padding: 0px;
border-radius: 12px;
box-shadow: 8px 8px 16px #050505, -8px -8px 16px #080808;
display: flex;
align-items: center;
border: 2px solid rgb(247, 6, 187);
width: 70%;
height: 9vh;
margin: auto;
margin-top: 5%;
margin-bottom: 20px;
}
#inp {
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;
}
#cont button {
padding: 2.5vh 4.6vh;
margin: 1vh;
background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
border: none;
border-radius: 8px;
color: #fff;
cursor: pointer;
}
#cont button:hover {
background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));
}
#as {
display: flex;
flex-direction: row;
width: 70%;
margin: auto;
justify-content: space-between;
}
#as button {
background-color: #0a0a0a;
border: none;
padding: 3vh 4.5vh;
font-size: 15px;
color: #ffffff;
cursor: pointer;
border-radius: 12px;
transition: box-shadow 0.3s ease-in-out;
}
#model{
background-color: #181717;
border: none;
padding: 3vh 4.5vh;
font-size: 15px;
color: #ffffff;
cursor: pointer;
border-radius: 12px;
transition: box-shadow 0.3s ease-in-out;
padding: 0px 0px 0px 20px ;
}
#as button:hover {
box-shadow: 15px 15px 30px #0d0d0d, -15px -15px 30px #1a1a1a; /* Adjusted shadow and highlight on hover */
}
@media only screen and (max-width: 600px) {
#cont {
width: 90%;
margin-bottom: 20px;
}
#main{
width: 90%;
}
#cont button {
padding: 15px 15px; /* Adjust button padding for smaller screens */
}
#as{
width: 88%;
}
#as button{
padding: 15px 20px; /* Adjust button padding for smaller screens */
}
.mod{
}
}
@media only screen and (max-width: 365px){
#cont{
width: 94%;
}
#main{
width: 94%;
}
#as{
width: 94%;
}
}
dialog{
background: rgba(29, 29, 29, 1);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
margin-top: 20px;
border: 1px solid rgba(14, 13, 13, 0.3);
}
#sli{
display: flex;
flex-direction: row;
align-items: center;
color: #eeeeee;
}
label{
font-family: 'Barlow Condensed';
font-size: 21px;
margin-right: 10px;
}
#sli input{
border: 1px solid rgb(137, 9, 223);
outline: none;
border-radius: 5px;
padding: 7px 20px;
background-color: transparent ;
color: white;
font-family: 'Barlow Condensed';
}
#Apply{
background-color: rgb(0, 247, 173);
padding: 5px 10px;
border: none;
color: #000000;
font-weight:500;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
border-radius: 4px;
}
#close{
float: right;background-color: rgb(223, 7, 79); padding: 5px 10px;
border: none;
color: #000000;
font-weight:500;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
border-radius: 4px;
}
#styles{
display: flex;
flex-direction: row;
gap: 6px;
color: white;
font-family: 'Barlow Condensed';
font-size: 20px;
flex-wrap: wrap;
}
#imshow{
width: 56vh;
height: 54vh;
display: flex;
flex-direction: row;
overflow-y: hidden;
margin: auto;
gap: 6px;
margin-top: 30px;
padding-bottom: 4px;
background: linear-gradient(black, black) padding-box,
linear-gradient(to right, red, blue) border-box;
border-radius: 20px;
border: 2.5px solid transparent;
}
#imshow img{
width: 54vh;
height: 53vh;
margin: auto;
margin-top: 7px;
border-radius: 10px;
margin-left: 0px;
}
#imshow p{
color: white;font-family: 'Barlow Condensed'; margin: auto; font-size: 3vh;text-align: center;
}
@media screen and (min-width: 500px) and (max-width: 720px) {
dialog{
max-width: 420px;
}
#imshow{
border: 2px solid blue;
width: 400px;
height: 400px;
display: flex;
flex-direction: column;
overflow-y: scroll;
margin: auto;
background: linear-gradient(black, black) padding-box,
linear-gradient(to right, red, blue) border-box;
border-radius: 20px;
border: 2.5px solid transparent;
margin-top: 30px;
padding-bottom: 7px;
gap: 14px;
}
#imshow img{
width: 95%;
height: 100%;
margin: auto;
margin-top: 7px;
}
#cont{
height: 7vh;
}
}
#styles{
align-items: center;
justify-content: center;
}
@media screen and (max-width: 500px) {
.ad{
display: flex;
flex-direction: row;
}
dialog {
max-width: 300px;
}
#imshow{
border: 2px solid blue;
width: 330px;
height: 330px;
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;
}
#jd{
font-size: 14px;
}
#imshow p{
width: 80%;
}
#imshow img{
width: 95%;
height: 100%;
margin: auto;
}
#imshow p{
font-size: 20px;
}
#styles{
align-items: center;
justify-content: center;
}
}
#jd{
margin: 10px;
padding: 5px;
background-color: transparent;
color: #eeeeee;
margin-right: 0;
margin-left: 0;
background: linear-gradient(black, rgb(0, 0, 0)) padding-box,
linear-gradient(to right, rgb(1, 255, 234),#ff0055) border-box;
border-radius: 20px;
border: 2.5px solid transparent;
border-radius: 7px;
margin-left: 0px;
font-family: 'Barlow Condensed';
font-size: 18px;
color: white;
}
#jd:hover{
background: linear-gradient(black, black) padding-box,
linear-gradient(to right, blue,#00ffdd) border-box;
border-radius: 10px;
border: 2.5px solid transparent;
}
#ow{
float: right;
margin: 10px;
padding: 10px;
background-color: transparent;
color: #eeeeee;
background: linear-gradient(black, black) padding-box,
linear-gradient(to right, rgb(0, 255, 149), rgb(174, 0, 255)) border-box;
border-radius: 10px;
border: 2.5px solid transparent;
border-radius: 10px;
margin-bottom: 0px;
margin-right: 0;
margin-left: 0;
border: 2px solid white;
}
#ow:hover{
background: linear-gradient(black, black) padding-box,
linear-gradient(to right, rgb(174, 0, 255),rgb(0, 255, 149)) border-box;
border-radius: 10px;
border: 2.5px solid transparent;
}
#dvv{
width: 100%;
margin-left: 10px;
}
#model{
width: 170px;
height: 50px;
overflow: visible;
}
#model option{
white-space: normal;
}
.ad{
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<div id="dvv">
<button id="jd">Discord</button>
<!--<button id="ow">
Donate
</button>-->
</div>
</div>
<div id="main">
<div id="cont">
<input type="text" name="" id="inp" placeholder=" Enter Prompt here..">
<button id="create">Create </button>
</div>
<div id="as">
<select name="" id="model">
<option value="rv6" class="mod" selected>Proteus v0.2</option>
<option value="ar" class="mod">SDXL</option>
<option value="focus" class="mod">Fooocus(Best)</option>
<option value="ds8" class="mod">Dreamshaper xl turbo</option>
<option value="er" class="mod">pixart alpha</option>
<option value="ra" class="mod">playground v2</option>
<option value="anything" class="mod">Anything v4 (Anime)</option>
</select>
<div id="Advance Setting"><button>Setting</button></div>
</div>
</div>
<dialog id="dialog">
<p style="font-size: 23px; font-family: 'Barlow Condensed'; margin: 0px; color: rgb(197, 14, 188);">Styles: </p>
<div id="styles">
<p>AI Generarted (FumesAI)<p>
<input type="radio" name="style" value="fumes" id="fumes">
<p>Realistic</p>
<input type="radio" name="style" value="real">
<p>Anime</p>
<input type="radio" name="style" value="anime">
<p>Photography</p>
<input type="radio" name="style" value="photo">
<p>Cinematic</p>
<input type="radio" name="style" value="cinema">
<p>Fantasy</p>
<input type="radio" name="style" value="fantasy">
<p>No Style</p>
<input type="radio" name="style" value="no">
</div>
<div id="sli">
<label for="#np" style="margin-bottom: 15px;">Negative Prompt: </label>
<input type="text" placeholder="Negative prompt" id="np" style="margin-bottom: 15px;">
</div>
<div id="sli">
<label for="#gds">Guidence Scale: </label>
<input type="range" id="gds" value="7" min="5" max="20" step="1"><p id="gdsp">7</p>
</div>
<div id="sli">
<label for="#step">Steps: </label>
<input type="range" id="step" value="50" min="30" max="100" step="1"><p id="stepp">50</p>
</div>
<div id="sli">
<label for="#gds">Seed: </label>
<input type="range" id="seed" min="0" value="0" step="1" max="99999"><p id="seedp">0</p>
</div>
<button id="close">Close</button>
</dialog>
<div id="imshow">
<p style="width: 220px;">Your Generarted Arts Will appear Here</p>
</div>
<div class="ad">
<script async="async" data-cfasync="false" src="//positionavailreproach.com/4251d796061922e1ec58ec80d347c8a6/invoke.js"></script>
<div id="container-4251d796061922e1ec58ec80d347c8a6"></div>
<script src="script.js"></script>
<script type="text/javascript">
atOptions = {
'key' : '95d42ead888d636b7ebf8c76de53ca8d',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');
</script>
<script type="text/javascript">
atOptions = {
'key' : '95d42ead888d636b7ebf8c76de53ca8d',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');
</script>
<script type="text/javascript">
atOptions = {
'key' : '95d42ead888d636b7ebf8c76de53ca8d',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');
</script>
</script>
<script type="text/javascript">
atOptions = {
'key' : '95d42ead888d636b7ebf8c76de53ca8d',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');
</script>
</script>
<script type="text/javascript">
atOptions = {
'key' : '95d42ead888d636b7ebf8c76de53ca8d',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');
</script>
</script>
<script type="text/javascript">
atOptions = {
'key' : '95d42ead888d636b7ebf8c76de53ca8d',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');
</script>
</script>
<script type="text/javascript">
atOptions = {
'key' : '95d42ead888d636b7ebf8c76de53ca8d',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');
</script>
</script>
<script type="text/javascript">
atOptions = {
'key' : '95d42ead888d636b7ebf8c76de53ca8d',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');
</script>
</script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-analytics.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDA40xpjwKzWIHmDz5oRu9BircpHfqncuI",
authDomain: "fumesai.firebaseapp.com",
projectId: "fumesai",
storageBucket: "fumesai.appspot.com",
messagingSenderId: "573294764046",
appId: "1:573294764046:web:f98a507a60045cf8a91c5f",
measurementId: "G-CZ2LETVP9K"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
</body>
</html>