/** * Event Handlers - Setup and manage UI event listeners */ import { displayMainImage } from './imageDisplay.js'; import { classifyImage, navigateEmbryo } from './workflow.js'; import { setupZoomListeners } from './zoom.js'; import { readFileAsDataURL } from '../utils/imageUtils.js'; import { appState } from '../state.js'; /** * Setup all UI event listeners */ export function setupEventListeners() { setupZoomListeners(); setupImageUploadListeners(); setupWorkflowListeners(); } /** * Setup image upload listeners */ function setupImageUploadListeners() { // Main workflow image upload const imageInput = document.getElementById('imageInput'); if (imageInput) { imageInput.addEventListener('change', (e) => handleImageUpload(e)); } } /** * Setup workflow listeners */ function setupWorkflowListeners() { // No longer needed - inline detection handles its own interactions } /** * Handle image upload - auto-classify */ async function handleImageUpload(event) { const file = event.target.files[0]; if (!file) return; // Validate file type const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/bmp']; if (!validTypes.includes(file.type.toLowerCase())) { import('./toast.js').then(module => { module.showToast('Please upload a valid image file (JPEG, PNG, WebP, or BMP)', 'error'); }); event.target.value = ''; return; } // Validate file size (max 10MB) const maxSize = 10 * 1024 * 1024; // 10MB in bytes if (file.size > maxSize) { import('./toast.js').then(module => { module.showToast('Image file is too large. Please upload an image smaller than 10MB', 'error'); }); event.target.value = ''; return; } try { const imageData = await readFileAsDataURL(file); await displayMainImage(imageData); // Auto-trigger classification await classifyImage(imageData); } catch (error) { console.error('Image upload error:', error); import('./toast.js').then(module => { module.showToast(`Failed to load image: ${error.message}`, 'error'); }); event.target.value = ''; } }