File size: 5,092 Bytes
89c278d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
<!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>
|