Spaces:

Ashrafb
/

Brcb2

Paused

App Files Files Community

Brcb2 / static /index.html

Ashrafb

Update static/index.html

6a83228 verified about 2 years ago

raw

history blame contribute delete

13.6 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://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>
	body {
	background-color: #121212;
	color: #FFFFFF;
	}

	/* Dark mode for upload buttons */
	#upload-form button[type="button"] {
	background-color: #1E7E34;
	}

	/* Dark mode for file input labels */
	.uploadLabel {
	background-color: #BF2C25;
	}

	/* Dark mode for face number inputs */
	#scale {
	background-color: #333333;
	color: #FFFFFF;
	border: 1px solid #555555;
	}

	/* Dark mode for swap button */
	button[type="button"] {
	background-color: #1E7E34;
	}

	/* Dark mode hover effect for swap button */
	button[type="button"]:hover {
	background-color: #2E9E44;
	}

	/* Your existing styles */
	#uploadForm {
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	/* Specific styles for the label */
	#uploadLabel {
	padding: 10px 20px;
	background-color: #f44336;
	color: white;
	border-radius: 5px;
	cursor: pointer;
	display: block;
	margin: 0 auto;
	}

	#uploadLabel input[type="file"] {
	display: none;
	}

	#outputImageContainer {
	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;
	}

	/* Your existing styles */
	#outputImageContainer img {
	max-width: 100%;
	height: auto;
	}

	#loadingIndicator {
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top: 5px solid blue ;
	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); }
	}

	button {
	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;
	}

	/* Hover effect for the button */
	button:hover {
	background-color: #45a049;
	}

	h1, h2 {
	text-align: center;
	font-family: 'Barlow Condensed';
	color: pink;
	}

	h2 {
	font-size: 24px; /* Adjust size as needed */
	margin-top: 20px; /* Top margin */
	margin-bottom: 10px; /* Bottom margin */
	Color :#FFFFFF;
	}

	select {
	width: 200px; /* Adjust width as needed */
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #333333; /* Background color */
	color: white; /* Text color */
	font-size: 16px;
	}

	#uploadLabel1 {
	padding: 10px 20px;
	background-color: #f44336;
	color: white;
	border-radius: 5px;
	cursor: pointer;
	display: none;
	margin: 0 auto;
	}

	#customBackgroundInput input[type="file"] {
	display: none;
	}

	/* Custom styling for the color picker */
	input[type="color"] {
	appearance: none;
	width: 50px;
	height: 50px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	margin: 10px; /* Adjust margin as needed */
	outline: none;
	transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
	}

	/* Add a hover effect */
	input[type="color"]:hover {
	transform: scale(1.1); /* Scale up slightly on hover */
	}

	/* Add a focus effect */
	input[type="color"]:focus {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); /* Add a subtle glow effect */
	}
	</style>
	</head>
	<body>
	<h1>Aiconvert.online</h1>
	<h2>1st Remove Background</h2>
	<form id="uploadForm" enctype="multipart/form-data">
	<label id="uploadLabel" for="fileInput">Select image</label>
	<input type="file" name="file" id="fileInput" accept="image/*" style =" display: none;" onchange="previewImage()">
	<div id="outputImageContainer">
	<div id="loadingIndicator" class="loading-indicator"></div>
	<img id="outputImage" alt="Processed Image" style="display: none;">
	</div><br>
	<button type="button" onclick="uploadImage()">Remove Background</button>
	<br><br>
	<h2>2nd Apply Background</h2>
	<select id="backgroundOptions" onchange="toggleBackgroundOption()">
	<option value="transparent">Transparent Background</option>
	<option value="color">Color Background</option>
	<option value="custom">Custom Background</option>
	</select>
	<label id="uploadLabel1" for="customBackgroundInput">Select image</label>
	<input type="file" id="customBackgroundInput" accept="image/*" style="display: none;">
	<input type="color" id="colorPicker" style="display: none;"><br>
	<button type="button" onclick="applyBackground()">Apply Background</button><br>
	<button type="button" onclick="downloadImage()">Download Image</button>
	</form>

	<script>
	let processedImageDataUrl = '';
	let originalImageDataUrl = '';

	// Function to handle file selection and preview
	function previewImage() {
	const fileInput = document.getElementById('fileInput');
	const outputImage = document.getElementById('outputImage');
	const file = fileInput.files[0];
	if (file) {
	outputImage.src = URL.createObjectURL(file);
	outputImage.style.display = 'inline';
	}
	}

	async function uploadImage() {
	const formData = new FormData();
	const fileInput = document.getElementById('fileInput');
	formData.append('file', fileInput.files[0]);
	const loadingIndicator = document.getElementById('loadingIndicator');
	loadingIndicator.style.display = 'inline'; // Show loading indicator

	try {
	const response = await fetch('/process-image/', {
	method: 'POST',
	body: formData
	});

	if (!response.ok) {
	throw new Error('Failed to process image');
	}

	const blob = await response.blob();
	originalImageDataUrl = URL.createObjectURL(blob); // Update originalImageDataUrl
	document.getElementById('outputImage').src = originalImageDataUrl;
	document.getElementById('outputImage').style.display = 'inline';
	loadingIndicator.style.display = 'none'; // Hide loading indicator once processing is complete

	// Call applyBackground function with the processed image data URL
	applyBackground(originalImageDataUrl);
	} catch (error) {
	console.error('Error:', error);
	loadingIndicator.style.display = 'none'; // Hide loading indicator in case of error
	}
	}


	function toggleBackgroundOption() {
	const backgroundOption = document.getElementById('backgroundOptions').value;
	const customBackgroundInput = document.getElementById('customBackgroundInput');
	const colorPicker = document.getElementById('colorPicker');
	const uploadLabel1 = document.getElementById('uploadLabel1');

	if (backgroundOption === 'custom') {
	uploadLabel1.style.display = 'block';
	customBackgroundInput.style.display = 'none';
	colorPicker.style.display = 'none';
	} else if (backgroundOption === 'color') {
	uploadLabel1.style.display = 'none';
	customBackgroundInput.style.display = 'none';
	colorPicker.style.display = 'inline';
	} else {
	uploadLabel1.style.display = 'none';
	customBackgroundInput.style.display = 'none';
	colorPicker.style.display = 'none';
	}
	}

	function applyBackground() {
	const backgroundOption = document.getElementById('backgroundOptions').value;
	const customBackgroundInput = document.getElementById('customBackgroundInput');
	const colorPicker = document.getElementById('colorPicker');
	const outputImage = document.getElementById('outputImage');

	const canvas = document.createElement('canvas');
	const ctx = canvas.getContext('2d');

	const img = new Image();
	img.onload = function() {
	canvas.width = img.width;
	canvas.height = img.height;

	if (backgroundOption === 'transparent') {
	// Clear canvas to make it transparent
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	} else if (backgroundOption === 'color') {
	// Fill canvas with color background
	ctx.fillStyle = colorPicker.value;
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	} else if (backgroundOption === 'custom') {
	const file = customBackgroundInput.files[0];
	if (file) {
	const bgImg = new Image();
	bgImg.onload = function() {
	// Resize background image to fit the original image
	const scaleFactor = Math.max(img.width / bgImg.width, img.height / bgImg.height);
	const newWidth = bgImg.width * scaleFactor;
	const newHeight = bgImg.height * scaleFactor;

	canvas.width = newWidth;
	canvas.height = newHeight;

	// Draw resized background image
	ctx.drawImage(bgImg, 0, 0, newWidth, newHeight);

	// Center the original image on the background
	const offsetX = (newWidth - img.width) / 2;
	const offsetY = (newHeight - img.height) / 2;

	// Draw processed image on top
	ctx.drawImage(img, offsetX, offsetY);

	processedImageDataUrl = canvas.toDataURL('image/png');
	outputImage.src = processedImageDataUrl;
	};
	bgImg.src = URL.createObjectURL(file);
	return; // Exit the function to wait for the custom background image to load
	}
	}

	// Draw processed image directly if no custom background is selected
	ctx.drawImage(img, 0, 0);
	processedImageDataUrl = canvas.toDataURL('image/png');
	outputImage.src = processedImageDataUrl;
	};
	img.src = originalImageDataUrl;
	}

	function downloadImage() {
	const outputImage = document.getElementById('outputImage');
	const link = document.createElement('a');
	link.href = outputImage.src;
	link.download = 'processed_image.png';
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
	}
	</script>
	</body>
	</html>