Hugging Face's logo

Spaces:
vishnumeher
/
amb
Running

App Files Community
amb / index.html
vishnumeher's picture
vishnumeher
Add 1 files
2a647a7 verified
raw
history blame contribute delete
26.6 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Segmentation Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.dropzone {
border: 2px dashed #9CA3AF;
border-radius: 0.5rem;
transition: all 0.3s ease;
}
.dropzone.active {
border-color: #3B82F6;
background-color: #EFF6FF;
}
.result-container {
transition: all 0.5s ease;
opacity: 0;
height: 0;
overflow: hidden;
}
.result-container.show {
opacity: 1;
height: auto;
}
.loading-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.image-container {
position: relative;
width: 100%;
height: 300px;
}
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.image-wrapper img {
object-fit: contain;
width: 100%;
height: 100%;
}
.slider-container {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.5);
padding: 5px 10px;
border-radius: 20px;
color: white;
display: flex;
align-items: center;
gap: 10px;
}
.slider {
width: 150px;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<header class="mb-8 text-center">
<h1 class="text-3xl font-bold text-gray-800 mb-2">Image Segmentation Demo</h1>
<p class="text-gray-600">Upload an image to generate segmentation masks using our AI model</p>
</header>
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
<div class="grid md:grid-cols-2 gap-8">
<!-- Upload Section -->
<div>
<div id="dropzone" class="dropzone p-8 text-center cursor-pointer">
<div class="flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i>
<h3 class="text-lg font-medium text-gray-700 mb-2">Drag & Drop your image here</h3>
<p class="text-gray-500 text-sm mb-4">or</p>
<label for="file-upload" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition cursor-pointer">
Browse Files
</label>
<input id="file-upload" type="file" class="hidden" accept="image/*">
<p class="text-gray-400 text-xs mt-4">Supports: JPG, PNG, WEBP (Max 5MB)</p>
</div>
</div>
<div id="preview-container" class="mt-4 hidden">
<h3 class="text-sm font-medium text-gray-700 mb-2">Selected Image</h3>
<div class="image-container">
<div class="image-wrapper bg-gray-100 rounded-lg">
<img id="preview-image" src="" alt="Preview" class="hidden">
</div>
</div>
<div class="flex justify-between mt-4">
<button id="process-btn" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition">
<i class="fas fa-magic mr-2"></i> Process Image
</button>
<button id="clear-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
<i class="fas fa-trash-alt mr-2"></i> Clear
</button>
</div>
</div>
</div>
<!-- Results Section -->
<div>
<div id="loading-indicator" class="hidden">
<div class="flex flex-col items-center justify-center h-full">
<div class="loading-spinner border-4 border-blue-500 border-t-transparent rounded-full w-12 h-12 mb-4"></div>
<p class="text-gray-600">Processing your image...</p>
<p class="text-gray-400 text-sm">This may take a few moments</p>
</div>
</div>
<div id="result-container" class="result-container">
<h3 class="text-lg font-medium text-gray-700 mb-4">Segmentation Results</h3>
<div class="mb-6">
<div class="flex items-center justify-between mb-2">
<h4 class="text-sm font-medium text-gray-700">Segmentation Mask</h4>
<div class="flex items-center">
<button id="download-mask" class="text-blue-500 hover:text-blue-700 text-sm">
<i class="fas fa-download mr-1"></i> Download
</button>
</div>
</div>
<div class="image-container">
<div class="image-wrapper bg-gray-100 rounded-lg relative">
<img id="mask-image" src="" alt="Segmentation Mask" class="hidden">
<div class="slider-container hidden" id="mask-slider">
<i class="fas fa-eye"></i>
<input type="range" min="0" max="100" value="50" class="slider" id="mask-opacity">
<span id="mask-value">50%</span>
</div>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex items-center justify-between mb-2">
<h4 class="text-sm font-medium text-gray-700">Overlay Comparison</h4>
<div class="flex items-center">
<button id="download-overlay" class="text-blue-500 hover:text-blue-700 text-sm">
<i class="fas fa-download mr-1"></i> Download
</button>
</div>
</div>
<div class="image-container">
<div class="image-wrapper bg-gray-100 rounded-lg relative">
<img id="overlay-image" src="" alt="Overlay" class="hidden">
<div class="slider-container">
<i class="fas fa-sliders-h"></i>
<input type="range" min="0" max="100" value="50" class="slider" id="overlay-opacity">
<span id="overlay-value">50%</span>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="text-sm font-medium text-gray-700 mb-2">Segmentation Statistics</h4>
<div class="grid grid-cols-3 gap-4 text-center">
<div class="bg-white p-2 rounded shadow">
<p class="text-xs text-gray-500">Foreground Area</p>
<p id="foreground-area" class="font-bold">0 px²</p>
</div>
<div class="bg-white p-2 rounded shadow">
<p class="text-xs text-gray-500">Background Area</p>
<p id="background-area" class="font-bold">0 px²</p>
</div>
<div class="bg-white p-2 rounded shadow">
<p class="text-xs text-gray-500">Confidence</p>
<p id="confidence-score" class="font-bold">0%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
<h2 class="text-xl font-bold text-gray-800 mb-4">About This Model</h2>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="font-medium text-gray-700 mb-2">Model Details</h3>
<ul class="text-gray-600 space-y-2">
<li class="flex items-start">
<i class="fas fa-cog text-blue-500 mt-1 mr-2"></i>
<span>Architecture: Your Custom Segmentation Model</span>
</li>
<li class="flex items-start">
<i class="fas fa-weight-hanging text-blue-500 mt-1 mr-2"></i>
<span>Model File: .pth format</span>
</li>
<li class="flex items-start">
<i class="fas fa-tachometer-alt text-blue-500 mt-1 mr-2"></i>
<span>Inference Time: Varies by hardware</span>
</li>
<li class="flex items-start">
<i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i>
<span>Custom Trained Model</span>
</li>
</ul>
</div>
<div>
<h3 class="font-medium text-gray-700 mb-2">Performance Metrics</h3>
<div class="h-48">
<canvas id="metrics-chart"></canvas>
</div>
</div>
</div>
</div>
</div>
<script>
// DOM Elements
const dropzone = document.getElementById('dropzone');
const fileUpload = document.getElementById('file-upload');
const previewContainer = document.getElementById('preview-container');
const previewImage = document.getElementById('preview-image');
const processBtn = document.getElementById('process-btn');
const clearBtn = document.getElementById('clear-btn');
const loadingIndicator = document.getElementById('loading-indicator');
const resultContainer = document.getElementById('result-container');
const maskImage = document.getElementById('mask-image');
const overlayImage = document.getElementById('overlay-image');
const maskSlider = document.getElementById('mask-slider');
const maskOpacity = document.getElementById('mask-opacity');
const maskValue = document.getElementById('mask-value');
const overlayOpacity = document.getElementById('overlay-opacity');
const overlayValue = document.getElementById('overlay-value');
const foregroundArea = document.getElementById('foreground-area');
const backgroundArea = document.getElementById('background-area');
const confidenceScore = document.getElementById('confidence-score');
const downloadMask = document.getElementById('download-mask');
const downloadOverlay = document.getElementById('download-overlay');
// Event Listeners
dropzone.addEventListener('click', () => fileUpload.click());
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropzone.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
dropzone.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropzone.addEventListener(eventName, unhighlight, false);
});
function highlight() {
dropzone.classList.add('active');
}
function unhighlight() {
dropzone.classList.remove('active');
}
dropzone.addEventListener('drop', handleDrop, false);
fileUpload.addEventListener('change', handleFiles, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
handleFiles({target: {files}});
}
function handleFiles(e) {
const file = e.target.files[0];
if (!file) return;
if (!file.type.match('image.*')) {
alert('Please select an image file (JPG, PNG, WEBP)');
return;
}
if (file.size > 5 * 1024 * 1024) {
alert('File size exceeds 5MB limit');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
previewImage.src = e.target.result;
previewImage.classList.remove('hidden');
previewContainer.classList.remove('hidden');
resultContainer.classList.remove('show');
};
reader.readAsDataURL(file);
}
processBtn.addEventListener('click', processImage);
clearBtn.addEventListener('click', clearAll);
function clearAll() {
fileUpload.value = '';
previewImage.src = '';
previewImage.classList.add('hidden');
previewContainer.classList.add('hidden');
maskImage.classList.add('hidden');
overlayImage.classList.add('hidden');
resultContainer.classList.remove('show');
maskSlider.classList.add('hidden');
}
maskOpacity.addEventListener('input', () => {
const value = maskOpacity.value;
maskValue.textContent = `${value}%`;
maskImage.style.opacity = value / 100;
});
overlayOpacity.addEventListener('input', () => {
const value = overlayOpacity.value;
overlayValue.textContent = `${value}%`;
overlayImage.style.opacity = value / 100;
});
async function processImage() {
if (!previewImage.src) {
alert('Please select an image first');
return;
}
// Show loading indicator
loadingIndicator.classList.remove('hidden');
resultContainer.classList.remove('show');
try {
// Convert the image to a blob for upload
const blob = await fetch(previewImage.src).then(r => r.blob());
// Create FormData to send the image
const formData = new FormData();
formData.append('image', blob, 'uploaded_image.jpg');
// 1. FIRST APPROACH: Using a Flask backend
// -----------------------------------------
// You would need to create a Flask server that loads your model
// and processes the image. The endpoint would be something like:
// const response = await fetch('http://localhost:5000/process', {
// method: 'POST',
// body: formData
// });
// 2. SECOND APPROACH: Using Pyodide to run Python in browser
// ---------------------------------------------------------
// This approach runs your model directly in the browser using WebAssembly
// You would need to:
// 1. Load Pyodide
// 2. Install required Python packages
// 3. Load your model
// 4. Process the image
// Here's a basic structure for the Pyodide approach:
/*
// Load Pyodide
let pyodide = await loadPyodide();
// Install required packages
await pyodide.loadPackage(["numpy", "Pillow", "torch"]);
// Load your custom segmentation code
// You would need to convert your model to a format that can be loaded in Pyodide
// and include it in your project files
await pyodide.runPythonAsync(`
import your_segmentation_module
from your_segmentation_module import YourSegmentationModel
# Load your model (you would need to provide the path to your model file)
model = YourSegmentationModel()
model.load_state_dict(torch.load('path/to/your/model.pth'))
model.eval()
# Process image function
def process_image(image_data):
# Your image processing and segmentation logic here
# Return the mask and statistics
return mask, foreground_area, background_area, confidence
`);
// Process the image
const response = await pyodide.runPythonAsync(`
image_data = get_image_data() # You would need to implement this
mask, fg_area, bg_area, conf = process_image(image_data)
# Convert results to format that can be returned to JS
# ...
`);
*/
// For this demo, we'll simulate a response
// In a real implementation, you would use one of the approaches above
const simulatedResponse = {
mask: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==", // Base64 encoded placeholder
foreground_area: 12345,
background_area: 45678,
confidence: 0.92
};
// Display the results
maskImage.src = `data:image/png;base64,${simulatedResponse.mask}`;
maskImage.classList.remove('hidden');
maskSlider.classList.remove('hidden');
overlayImage.src = previewImage.src;
overlayImage.classList.remove('hidden');
// Update statistics
foregroundArea.textContent = `${simulatedResponse.foreground_area} px²`;
backgroundArea.textContent = `${simulatedResponse.background_area} px²`;
confidenceScore.textContent = `${Math.round(simulatedResponse.confidence * 100)}%`;
// Setup download buttons
downloadMask.onclick = () => downloadImage(maskImage.src, 'segmentation-mask.png');
downloadOverlay.onclick = () => downloadImage(overlayImage.src, 'segmentation-overlay.png');
// Show results
resultContainer.classList.add('show');
} catch (error) {
console.error('Error:', error);
alert('Error processing image. Please try again.');
} finally {
loadingIndicator.classList.add('hidden');
}
}
function downloadImage(url, filename) {
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
// Initialize chart
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('metrics-chart').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['IoU', 'Precision', 'Recall', 'Dice'],
datasets: [{
label: 'Model Metrics',
data: [0.85, 0.88, 0.82, 0.87], // Replace with your model's actual metrics
backgroundColor: [
'rgba(59, 130, 246, 0.7)',
'rgba(16, 185, 129, 0.7)',
'rgba(245, 158, 11, 0.7)',
'rgba(139, 92, 246, 0.7)'
],
borderColor: [
'rgba(59, 130, 246, 1)',
'rgba(16, 185, 129, 1)',
'rgba(245, 158, 11, 1)',
'rgba(139, 92, 246, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
max: 1.0
}
},
plugins: {
legend: {
display: false
}
}
}
});
});
// MODEL INTEGRATION GUIDE
// -----------------------
// To integrate your custom segmentation model, you have two main options:
// 1. Flask Backend Approach (Recommended for production)
// ------------------------------------------------------
// - Create a Flask server that loads your model
// - The server should have an endpoint (e.g., /process) that:
// - Receives the image file
// - Processes it using your model
// - Returns the segmentation mask and statistics
// - In this HTML file, modify the processImage() function to call your Flask endpoint
// Example Flask server structure:
/*
from flask import Flask, request, jsonify
import your_segmentation_module
import base64
import io
from PIL import Image
app = Flask(__name__)
# Load your model (replace with your actual model path)
model = your_segmentation_module.YourSegmentationModel()
model.load_state_dict(torch.load('path/to/your/model.pth'))
model.eval()
@app.route('/process', methods=['POST'])
def process_image():
if 'image' not in request.files:
return jsonify({'error': 'No image provided'}), 400
image_file = request.files['image']
image = Image.open(image_file.stream)
# Process image with your model
mask, fg_area, bg_area, confidence = model.process(image)
# Convert mask to base64
buffered = io.BytesIO()
mask.save(buffered, format="PNG")
mask_base64 = base64.b64encode(buffered.getvalue()).decode('utf-8')
return jsonify({
'mask': mask_base64,
'foreground_area': fg_area,
'background_area': bg_area,
'confidence': confidence
})
if __name__ == '__main__':
app.run(debug=True)
*/
// 2. Pyodide Approach (For browser-only implementation)
// ----------------------------------------------------
// - This runs Python directly in the browser using WebAssembly
// - Limitations: Larger initial load time, limited package support
// - Steps:
// a. Include Pyodide in your project
// b. Convert your model to a format that can be loaded in Pyodide
// c. Modify the processImage() function to use Pyodide
// Model Path Configuration:
// -------------------------
// Wherever you see 'path/to/your/model.pth' in the code comments,
// replace it with the actual path to your trained model file.
// This could be:
// - A relative path from your Flask server's root directory
// - An absolute path on your server
// - A URL if hosting the model file online
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vishnumeher/amb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>