async function uploadImage() {
    const fileInput = document.getElementById('image');
    const versionInput = document.getElementById('version');
    const scaleInput = document.getElementById('scale');

    // Check if the file input is empty
    if (!fileInput.files[0]) {
        document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Please upload an image.</p>`;
        return;
    }

    // Check if the file size is above 1500 KB
    if (fileInput.files[0].size > 1500 * 1024) {
        // Display loading spinner and estimated time
        const loadingSpinner = document.getElementById('loadingSpinner');
        loadingSpinner.style.display = 'block';
        const estimatedTime = document.getElementById('estimatedTime');
        estimatedTime.style.display = 'block';

        // Hide loading spinner and estimated time after 30 seconds
        setTimeout(() => {
            loadingSpinner.style.display = 'none';
            estimatedTime.style.display = 'none';

            // Display uploaded image after 30 seconds
            const reader = new FileReader();
            reader.onload = function(e) {
                const resultContainer = document.getElementById('resultContainer');
                const uploadedImage = document.createElement('img');
                uploadedImage.src = e.target.result;
                uploadedImage.style.maxWidth = '100%'; // Adjust this value as needed
                uploadedImage.style.maxHeight = '100%'; // Adjust this value as needed
                resultContainer.innerHTML = ''; // Clear previous content
                resultContainer.appendChild(uploadedImage);
            };
            reader.readAsDataURL(fileInput.files[0]);
        }, 30000);

        return;
    }

    // Clear the result container
    document.getElementById('resultContainer').innerHTML = "";

    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    formData.append('version', versionInput.value);
    formData.append('scale', scaleInput.value);

    // Display loading spinner
    const loadingSpinner = document.getElementById('loadingSpinner');
    loadingSpinner.style.display = 'block';
    const estimatedTime = document.getElementById('estimatedTime');
    estimatedTime.style.display = 'block';
    try {
        const response = await fetch('https://ashrafb-furdockgr1.hf.space/upload/', {
            method: 'POST',
            body: formData
        });

        // Hide loading spinner
        loadingSpinner.style.display = 'none';
        estimatedTime.style.display = 'none';
        if (response.ok) {
            const resultContainer = document.getElementById('resultContainer');
            const data = await response.json();
            const sketchImage = document.createElement('img');
            sketchImage.style.maxWidth = '100%'; // Adjust this value as needed
            sketchImage.style.maxHeight = '100%'; // Adjust this value as needed
            sketchImage.src = data.sketch_image_base64;
            resultContainer.appendChild(sketchImage);
        } else {
            document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
        }
    } catch (error) {
        console.error('Error:', error);
        document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
    }
}