Vaibhavs10 · January 2, 2025 16:31
diff --git a/rmbg.html b/rmbg.html
 <!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>
	<!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>