File name
Commit message
Commit date
06-03
06-03
06-03
05-29
06-03
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;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.header {
background-color: #1E4E90;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
.container {
text-align: center;
margin-top: 100px; /* .header의 높이 만큼 여백 추가 */
}
#preview img {
max-width: 100%;
height: auto;
margin-top: 20px;
}
#processButton {
background-color: #1E4E90;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 20px;
cursor: pointer;
}
#processButton:hover {
background-color: #1E4E90;
}
#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>
<div class="container">
<div id="preview"></div>
<input type="file" id="imageInput">
<button id="processButton">이미지 처리</button>
<button id="clearButton">Clear</button> <!-- Clear 버튼 추가 -->
</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'); // 메시지를 담을 컨테이너 추가
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); // 새로운 미리보기 추가
// 파일 정보를 기반으로 FormData를 생성하여 서버에 전송할 준비
const formData = new FormData();
formData.append('file', file); // 이미지 파일을 FormData에 추가
const LAT = "36.123"; // Replace with the actual latitude value
const LON = "123.123"; // Replace with the actual longitude value
const FILENAME = file.name; // Use the selected file's name as the filename
const FILE_TYPE = file.type; // Use the selected file's type as the file type
// 여기서 formData와 FILENAME, FILE_TYPE을 이용하여 서버에 요청을 보내면 됩니다.
// ...
};
if (file) {
reader.readAsDataURL(file);
}
});
processButton.addEventListener('click', async function() {
const file = fileInput.files[0];
if (file) {
const LAT = "36.123"; // Replace with the actual latitude value
const LON = "123.123"; // Replace with the actual longitude value
const FILENAME = file.name; // Use the selected file's name as the filename
const FILE_TYPE = file.type; // Use the selected file's type as the 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); // Blob 객체와 원래 파일 이름을 전송
try {
const URL = "http://127.0.0.1:12345/cctv/infer"; // Replace with the actual server URL
const response = await fetch(URL, {
method: "POST",
body: formData
});
if (response.ok) {
const data = await response.json();
console.log(data); // 서버에서 받은 응답 처리
// data 객체에서 rain이 true인 경우 메시지 표시
if (data.rain === true) {
const message = document.createElement('div');
message.textContent = '비 사진 감지되었습니다.';
messageContainer.innerHTML = ''; // 기존 메시지 삭제
messageContainer.appendChild(message); // 새로운 메시지 추가
} else {
const message = document.createElement('div');
message.textContent = '일반 사진 감지되었습니다.';
messageContainer.innerHTML = ''; // 기존 메시지 삭제
messageContainer.appendChild(message); // 새로운 메시지 추가
}
} else {
console.error("Error occurred while sending the request:", response.statusText);
}
} catch (error) {
console.error("Error occurred:", error);
}
} else {
console.error("No file selected.");
}
});
</script>
</body>
</html>