File size: 7,479 Bytes
3d7eadf |
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 147 148 149 150 151 152 153 154 155 |
// ฟังก์ชันสำหรับแสดงชื่อไฟล์ที่อัปโหลด (โค้ดเดิม)
function displayFilename() {
const fileInput = document.getElementById('file');
const filenameLabel = document.getElementById('filename');
if (fileInput && fileInput.files.length > 0) {
let fileName = fileInput.files[0].name;
const maxLength = 20;
if (fileName.length > maxLength) {
const start = fileName.substring(0, 10);
const end = fileName.substring(fileName.length - 7);
fileName = `${start}...${end}`;
}
if(filenameLabel) {
filenameLabel.textContent = fileName;
}
}
}
// ฟังก์ชันสำหรับตรวจสอบชนิดของไฟล์ (โค้ดเดิม)
function validateFileType() {
const fileInput = document.getElementById('file');
const filePath = fileInput.value;
const allowedExtensions = /(\.jpg|\.jpeg|\.png|\.bmp)$/i;
if (fileInput && !allowedExtensions.exec(filePath)) {
alert('Please upload a valid image file (JPG, JPEG, PNG, BMP).');
fileInput.value = '';
return false;
}
return true;
}
// ใช้ Event Listener เพื่อให้แน่ใจว่า DOM (โครงสร้างหน้าเว็บ) โหลดเสร็จก่อน
document.addEventListener("DOMContentLoaded", function() {
// --- 1. ส่วนจัดการฟอร์มและ Loader ---
const sectionForm = document.getElementById('sectionForm');
const loadingOverlay = document.getElementById('loading');
const fileInput = document.getElementById('file');
const symptomTextArea = document.getElementById('symptomTextArea'); // เพิ่มเข้ามาเพื่อเข้าถึงง่าย
if (sectionForm) {
sectionForm.addEventListener('submit', function (event) {
// ตรวจสอบว่ามีไฟล์ถูกอัปโหลดหรือยัง
if (!fileInput.value) {
alert('กรุณาอัปโหลดรูปภาพ');
event.preventDefault(); // หยุดการส่งฟอร์ม
return;
}
// <<< DEBUG START: พิมพ์ข้อมูลที่จะส่งไปยัง Backend >>>
console.clear(); // ล้าง console เก่าเพื่อความสะอาดตา
console.log("=============================================");
console.log("🔬 DATA TO BE SENT TO BACKEND (main.py)");
console.log("=============================================");
// 1. เก็บค่าจาก Checkbox ที่ถูกติ๊ก
const checkedBoxes = document.querySelectorAll('input[name="checkboxes"]:checked');
const checkboxValues = Array.from(checkedBoxes).map(cb => cb.value);
console.log("✅ Checkbox values (name='checkboxes'):", checkboxValues);
// 2. เก็บค่าจาก Text Area
const textAreaValue = symptomTextArea.value;
console.log("📝 Text Area value (name='symptom_text'):", textAreaValue);
// Bonus: พิมพ์ค่า Model Version ที่เลือกด้วย
const modelVersion = document.querySelector('input[name="model_version"]:checked').value;
console.log("🤖 Model Version (name='model_version'):", modelVersion);
console.log("---------------------------------------------");
console.log("Backend (main.py) จะได้รับข้อมูล 3 ส่วนนี้จากฟอร์ม");
console.log("คุณสามารถนำข้อมูลเหล่านี้ไปสร้างเป็น 'final_prompt' สำหรับ preprocessingwangchan.py ต่อไป");
console.log("=============================================");
// <<< DEBUG END >>>
// ถ้าผ่าน ให้แสดง Loader
if (loadingOverlay) {
loadingOverlay.classList.remove('d-none');
}
});
}
// --- 2. ส่วนจัดการ Logic ของ Checkbox (ควบคุมการ Disable เท่านั้น) ---
const noSymptomCheckbox = document.getElementById('check6');
const spicyFoodCheckbox = document.getElementById('check4');
const alwaysHurtsCheckbox = document.getElementById('check7');
function manageCheckboxStates() {
if (!noSymptomCheckbox || !spicyFoodCheckbox || !alwaysHurtsCheckbox) return;
const isAnySymptomChecked = spicyFoodCheckbox.checked || alwaysHurtsCheckbox.checked;
noSymptomCheckbox.disabled = isAnySymptomChecked;
spicyFoodCheckbox.disabled = noSymptomCheckbox.checked;
alwaysHurtsCheckbox.disabled = noSymptomCheckbox.checked;
}
if (noSymptomCheckbox && spicyFoodCheckbox && alwaysHurtsCheckbox) {
[noSymptomCheckbox, spicyFoodCheckbox, alwaysHurtsCheckbox].forEach(checkbox => {
checkbox.addEventListener('change', manageCheckboxStates);
});
}
// --- 3. ส่วนจัดการการแสดง Modal ผลลัพธ์ ---
const resultImageDataElement = document.getElementById('result-image-data');
if (resultImageDataElement) {
const imageUrl = resultImageDataElement.getAttribute('data-url');
if (imageUrl) {
const outputModalElement = document.getElementById('outputModal');
if (outputModalElement) {
const outputModal = new bootstrap.Modal(outputModalElement);
outputModal.show();
if (loadingOverlay) {
loadingOverlay.classList.add('d-none');
}
}
}
}
// --- 4. ส่วนจัดการไฟล์อินพุต ---
if (fileInput) {
fileInput.addEventListener('change', function() {
if (!this.value) return;
const allowedExtensions = /(\.jpg|\.jpeg|\.png|\.bmp)$/i;
if (!allowedExtensions.exec(this.value)) {
alert('กรุณาอัปโหลดไฟล์รูปภาพที่ถูกต้อง (JPG, JPEG, PNG, BMP)');
this.value = '';
}
});
}
// เรียกใช้ฟังก์ชันครั้งแรกเมื่อหน้าเว็บโหลดเสร็จ
manageCheckboxStates();
const resultTrigger = document.getElementById('result-data-trigger');
if (resultTrigger) {
const outputModalElement = document.getElementById('outputModal');
if (outputModalElement) {
const outputModal = new bootstrap.Modal(outputModalElement);
outputModal.show();
if (loadingOverlay) {
loadingOverlay.classList.add('d-none');
}
}
}
});
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
}); |