script.js

const imageInput = document.getElementById('imageInput');
const convertBtn = document.getElementById('convertBtn');
const clearBtn = document.getElementById('clearBtn');
const preview = document.getElementById('preview');
const result = document.getElementById('result');
const loading = document.getElementById('loading');
const progressContainer = document.querySelector('.progress-container');
const progressBar = document.getElementById('progress-bar');

imageInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.innerHTML = `<img src="${e.target.result}" alt="Preview" class="max-h-[400px] rounded-lg shadow-md">`;
        }
        reader.readAsDataURL(file);
    }
});

clearBtn.addEventListener('click', function() {
    imageInput.value = '';
    preview.innerHTML = '';
    result.textContent = '';
    progressBar.style.width = '0%';
    progressContainer.style.display = 'none';
    loading.style.display = 'none';
    progressContainer.classList.add('hidden');
    loading.classList.add('hidden');
});

convertBtn.addEventListener('click', async function() {
    const file = imageInput.files[0];
    if (!file) {
        alert('Please select an image first.');
        return;
    }

    try {
        loading.classList.remove('hidden');
        progressContainer.classList.remove('hidden');
        result.textContent = '';
        progressBar.style.width = '0%';

        const { data: { text } } = await Tesseract.recognize(
            file,
            'eng',
            { 
                logger: m => {
                    if (m.status === 'recognizing text') {
                        progressBar.style.width = `${Math.round(m.progress * 100)}%`;
                    }
                    console.log(m);
                }
            }
        );

        result.textContent = text;
    } catch (error) {
        console.error(error);
        result.textContent = 'Error occurred during conversion.';
    } finally {
        loading.classList.add('hidden');
        progressBar.style.width = '100%';
        setTimeout(() => {
            progressContainer.classList.add('hidden');
        }, 1000);
    }
});