Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Udhay707
Udhay707 committed Dec 8, 2024
1 parent 81b14bb commit c10645b
Show file tree
Hide file tree
Showing 3 changed files with 303 additions and 0 deletions.
149 changes: 149 additions & 0 deletions index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}

.container {
width: 100%;
max-width: 800px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 20px;
}

header h1 {
font-size: 2em;
color: #007BFF;
margin-bottom: 10px;
}

header p {
font-size: 1.1em;
color: #555;
}

.upload-area {
border: 2px dashed #007BFF;
border-radius: 8px;
padding: 40px 20px;
background-color: #f9f9f9;
text-align: center;
}

.upload-zone {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}

.upload-zone span {
font-size: 1.2em;
color: #888;
}

button {
padding: 12px 24px;
background-color: #007BFF;
color: #fff;
font-size: 1.1em;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #0056b3;
}

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

#status {
margin-top: 20px;
font-size: 1.1em;
color: #888;
}

footer {
margin-top: 30px;
font-size: 0.9em;
color: #777;
}

/* Drag & Drop Styles */
.upload-area.dragover {
background-color: #e8f5fe;
border-color: #0056b3;
}
#footer{
text-decoration: none;
}


#image-area {
margin-top: 20px;
text-align: center;
background-color: black;

}
#output-image {
background-color: white;
width: 100px;
height: 100px;
object-fit: cover;
border: 1px solid #ccc;
border-radius: 8px;
margin-bottom: 10px;
}

.download-options {
margin-top: 20px;
}

.download-button {
margin: 5px;
padding: 10px 15px;
font-size: 14px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
}

.download-button:hover {
background-color: #0056b3;
}

.upload-another-image{
margin: 5px;
padding: 10px 15px;
font-size: 14px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
}

.upload-another-image:hover {
background-color: #0056b3;
}
52 changes: 52 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Removal Tool</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<div id="upload-container">
<div class="container">
<header>
<h1>Remove Background from Image</h1>
<p>Upload an image to remove its background.</p>
</header>

<main>
<!-- Drag and Drop or Button Upload Area -->
<div id="upload-area" class="upload-area">
<div class="upload-zone">
<span>Drag and drop your image here, or</span>
<button id="upload-btn">Upload Image</button>
<input type="file" id="image-input" accept="image/*" hidden />
</div>
<p id="status"></p>
</div>
</main>

<footer id="footer">
<a href="https://github.com/Udhay707" target="_blank">
<i class="fab fa-github" style='font-size:30px'></i>
</a>
</footer>
</div>
</div>


<div id="image-area" class="image-holder" hidden>
<img id = 'output-image' alt = 'API image'>
<div class="download-options">
<button class="download-button" id="download-100x100">Download 100x100</button>
<button class="download-button" id="download-200x200">Download 200x200</button>
<button class="download-button" id="download-original">Download Original</button>
</div>
<div>
<button class="upload-another-image" id = "upload-another">Upload another Image</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
102 changes: 102 additions & 0 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
// Get references to elements
const uploadArea = document.getElementById('upload-area');
const uploadBtn = document.getElementById('upload-btn');
const imageInput = document.getElementById('image-input');
const statusMessage = document.getElementById('status');
const imageArea = document.getElementById('image-area');
const outputImage = document.getElementById('output-image');
const uploadContainer = document.getElementById('upload-container');

// Handle file input change (upload via button)
uploadBtn.addEventListener('click', () => {
imageInput.click();
});

imageInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
handleFileUpload(file);
}
});

// Drag and drop functionality
uploadArea.addEventListener('dragover', (event) => {
event.preventDefault();
uploadArea.classList.add('dragover');
});

uploadArea.addEventListener('dragleave', () => {
uploadArea.classList.remove('dragover');
});

uploadArea.addEventListener('drop', (event) => {
event.preventDefault();
uploadArea.classList.remove('dragover');
const file = event.dataTransfer.files[0];
if (file) {
handleFileUpload(file);
}
});

// Handle file upload logic
function handleFileUpload(file) {
statusMessage.textContent = 'Uploading...';

// Create FormData to send to the backend API
const formData = new FormData();
formData.append('image', file);

fetch('http://localhost:5000/remove-bg', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => {
console.log(data)
// Handle the response after background removal (you'll fill in later)
if (data.image) {
statusMessage.textContent = 'Background removed successfully!';
const imageUrl = `data:image/png;base64,${data.image}`;
outputImage.src = imageUrl;
imageArea.hidden=false
uploadContainer.hidden = true
document.getElementById('download-100x100').onclick = () => downloadImage(imageUrl, 100, 100);
document.getElementById('download-200x200').onclick = () => downloadImage(imageUrl, 200, 200);
document.getElementById('download-original').onclick = () => downloadImage(imageUrl, null, null);
document.getElementById('upload-another').onclick = () => {
location.reload()
};
// Show processed image or something else here
} else {
statusMessage.textContent = 'Failed to remove background.';
}
})
.catch(error => {
statusMessage.textContent = 'Error uploading image.';
console.error(error);
});
}

function downloadImage(base64Image, width, height) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = () => {
if (width && height) {
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
} else {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
}

const link = document.createElement('a');
link.download = `image-${width || 'original'}x${height || 'original'}.png`;
link.href = canvas.toDataURL();
link.click();
}
img.src = base64Image;
}

0 comments on commit c10645b

Please sign in to comment.