Skip to content

Instantly share code, notes, and snippets.

@Vaibhavs10
Last active January 2, 2025 16:31
Show Gist options
  • Save Vaibhavs10/ae2cad35a261d6e3fa417453698d2c8b to your computer and use it in GitHub Desktop.
Save Vaibhavs10/ae2cad35a261d6e3fa417453698d2c8b to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Remover</title>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.image-container {
display: flex;
gap: 20px;
margin-top: 20px;
}
img {
max-width: 400px;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Background Remover</h1>
<input type="file" id="imageInput" accept="image/*">
<div class="image-container">
<div>
<h3>Original Image</h3>
<img id="originalImage">
</div>
<div>
<h3>Processed Image</h3>
<img id="processedImage">
</div>
</div>
</div>
<script type="module">
import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.min.js';
async function init() {
// Initialize the pipeline
const pipe = await pipeline(
'image-segmentation',
'briaai/RMBG-1.4'
);
// Handle file input
const imageInput = document.getElementById('imageInput');
const originalImage = document.getElementById('originalImage');
const processedImage = document.getElementById('processedImage');
imageInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
// Display original image
const reader = new FileReader();
reader.onload = (e) => {
originalImage.src = e.target.result;
};
reader.readAsDataURL(file);
try {
// Process the image
const output = await pipe(file);
// Convert the segmentation mask to an image
const mask = output[0].mask;
processedImage.src = mask;
} catch (error) {
console.error('Error processing image:', error);
alert('Error processing image. Please try again.');
}
});
}
// Call the init function
init().catch(console.error);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment