Dlprdoke

Running

App Files Files Community

Dlprdoke / static /index.html

Ashrafb

Update static/index.html

e3ae503 verified 3 months ago

raw history blame contribute delete

No virus

15.3 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>FastAPI App</title>
	<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 !important;
	}
	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 {
	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;
	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); }
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>Aiconvert.online </h1>

	<div id="cont">


	<input type="text" id="prompt" name="prompt"placeholder="Enter Text Idea">

	<br>

	</div>
	<div>
	<button id="generatePrompts" 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>

	<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(`/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(`/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.image_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");
	});



	</script>
	</body>
	</html>