<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object to Object Replace</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
h1 {
text-align: center;
margin-top: 20px;
color: #333;
}
#imageForm {
max-width: 600px;
margin: 0 auto;
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
color: #555;
}
input[type="file"] {
display: none;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049;
}
.image-container {
margin-top: 20px;
display: flex;
justify-content: space-around;
}
.image-container img {
max-width: 200px;
max-height: 200px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
#responseImg img {
max-width: 200px;
max-height: 200px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
#response {
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>Object to Object Replace</h1>
<form id="imageForm" enctype="multipart/form-data">
<label for="inputImage">Select Input Image:</label>
<input type="file" id="inputImage" name="inputImage" accept="image/*" onchange="showImagePreview('inputImage', 'inputPreview')">
<label for="appendImage">Select Append Image:</label>
<input type="file" id="appendImage" name="appendImage" accept="image/*" onchange="showImagePreview('appendImage', 'appendPreview')">
<label for="objectName">Object Name:</label>
<input type="text" id="objectName" name="objectName">
<button type="button" onclick="submitImages()">Submit</button>
</form>
<div class="image-container">
<div id="inputPreview"></div>
<div id="appendPreview"></div>
</div>
<div id="response"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function submitImages() {
let inputImage = document.getElementById('inputImage').files[0];
let appendImage = document.getElementById('appendImage').files[0];
let objectName = document.getElementById('objectName').value;
// Check if both input and append images are selected
if (inputImage && appendImage) {
var formData = new FormData();
formData.append('input_image', inputImage);
formData.append('append_image', appendImage);
// Append objectName if user added any value
if (objectName) {
formData.append('objectName', objectName);
}
fetch('/process_images', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Failed to process images');
}
return response.json();
})
.then(data => {
if (data.output_base64) {
document.getElementById('response').innerHTML = "<h2>Final Image:</h2><div id='responseImg'><img src='data:image/png;base64," + data.output_base64 + "'/></div>";
} else if (data.message) {
alert(data.message);
} else {
alert('Unknown error occurred');
}
})
.catch(error => {
alert('Error: ' + error.message);
});
} else {
alert("Please select both input and append images.");
}
}
function showImagePreview(inputId, previewId) {
var input = document.getElementById(inputId);
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#' + previewId).html('<img src="' + e.target.result + '" alt="Image Preview">');
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>