Hugging Face's logo

Spaces:
Ashrafb
/
Brcb2
Paused

App Files Community
Brcb2 / static /index.html
Ashrafb's picture
Ashrafb
Update static/index.html
6a83228 verified
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>