Fast_Stable_Cascade

Running

App Files Files Community

Fast_Stable_Cascade / index.html

FumesAI

Update index.html

bbfb7f7 verified 4 months ago

raw history blame contribute delete

No virus

14.8 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>Stable Cascade</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">First Stage Steps: </label>
	<input type="range" id="step1" value="20" min="10" max="40" step="1"><p id="stepp1">20</p>
	</div>
	<div id="sli">
	<label for="#step">Second Stage Steps: </label>
	<input type="range" id="step2" value="10" min="5" max="24" step="1"><p id="stepp2">10</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="cascade.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>