File name
Commit message
Commit date
06-03
05-29
06-03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 처리</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
.header {
background-color: #1E4E90;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
#buttonContainer {
position: fixed;
top: 105px; /* Just below the header */
width: 100%;
display: flex;
justify-content: center;
z-index: 2; /* Ensure it appears above other content */
background-color: white; /* Make the background white to cover content when scrolling */
padding: 10px;
}
#processButton, #clearButton, #imageInput {
background-color: #1E4E90;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin: 0 10px; /* Add margin between buttons */
}
#processButton:hover, #clearButton:hover {
background-color: #163a6e;
}
.container {
text-align: center;
margin-top: 150px; /* Add margin to push content below the fixed buttons */
}
#preview img {
max-width: 100%;
height: auto;
margin-top: 20px;
}
#copyright {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
#messageContainer {
display: flex;
justify-content: center;
height: 100vh;
}
#messageContainer div {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="header">
<h1>침수감지모델 테스트도구</h1>
</div>
<!-- Button Container (file input, process, clear) -->
<div id="buttonContainer">
<input type="file" id="imageInput">
<button id="processButton">이미지 처리</button>
<button id="clearButton">Clear</button>
</div>
<!-- Content Area -->
<div class="container">
<div id="preview"></div>
</div>
<div id="messageContainer"></div>
<div id="copyright">
<p>COPYRIGHT © 2024 SOLFAC. All Rights Reserved.</p>
</div>
<script>
const fileInput = document.getElementById('imageInput');
const processButton = document.getElementById('processButton');
const preview = document.getElementById('preview');
const messageContainer = document.getElementById('messageContainer');
const clearButton = document.getElementById('clearButton');
clearButton.addEventListener('click', function() {
preview.innerHTML = '';
messageContainer.innerHTML = '';
});
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onloadend = function() {
const img = new Image();
img.src = reader.result;
img.style.width = '1080px';
preview.innerHTML = '';
preview.appendChild(img);
const formData = new FormData();
formData.append('file', file);
const LAT = "36.123";
const LON = "123.123";
const FILENAME = file.name;
const FILE_TYPE = file.type;
};
if (file) {
reader.readAsDataURL(file);
}
});
processButton.addEventListener('click', async function() {
const file = fileInput.files[0];
if (file) {
const LAT = "36.123";
const LON = "123.123";
const FILENAME = file.name;
const FILE_TYPE = file.type;
const formData = new FormData();
formData.append("data", JSON.stringify({ gps_x: LAT, gps_y: LON, filename: FILENAME, file_type: FILE_TYPE }));
const previewBlob = await fetch(preview.querySelector('img').src).then(res => res.blob());
formData.append('file', previewBlob, FILENAME);
try {
const URL = "http://127.0.0.1:12345/cctv/infer";
const response = await fetch(URL, {
method: "POST",
body: formData
});
} catch (error) {
console.error("Error occurred:", error);
}
} else {
console.error("No file selected.");
}
});
</script>
</body>
</html>