async function fetchImageAndObjects() {
    try {
        const response = await fetch('http://127.0.0.1:5555/api/getObjects');
        if (!response.ok) {
            throw new Error('Failed to fetch image and objects');
        }
        const data = await response.json();
        console.log(data)
        displayImageAndObjects(data.imageUrl, data.objects);
    } catch (error) {
        console.error(error);
    }
}

function displayImageAndObjects(imageUrl, objects) {
    const imageContainer = document.getElementById('imageContainer');
    const objectsContainer = document.getElementById('objectsContainer');
    const container = document.getElementById('resultContainer');

    // Create an image element
    const imageElement = document.createElement('img');
    console.log(imageUrl);
    imageElement.src = 'http://127.0.0.1:5555/' + imageUrl;
    imageElement.alt = 'Image';
    imageContainer.appendChild(imageElement);

    // Create a list for objects
    const objectsList = document.createElement('ul');
    objects.forEach(object => {
        const objectButton = document.createElement('button');
        objectButton.textContent = object;
        // Add event listener to each button
        objectButton.addEventListener('click', () => {
            // You can define what happens when the button is clicked
            drawPointCloud(object);
        });
        const objectItem = document.createElement('li');
        objectItem.appendChild(objectButton);
        objectsList.appendChild(objectItem);
    });

    // Append objects list to the objects container
    objectsContainer.appendChild(objectsList);

    container.style.visibility = "visible";
}


// selecting loading div
const loader = document.querySelector("#loading");

// showing loading
function displayLoading() {
    loader.classList.add("display");
}

// hiding loading 
function hideLoading() {
    loader.classList.remove("display");
}
async function startWorkflow(){
    const startButton = document.getElementById("process");
    startButton.style.display = "none";
    displayLoading();
    try {
        const response = await fetch('http://127.0.0.1:5555/runProcess');
        if (!response.ok) {
            throw new Error('Failed to fetch image and objects');
        }
        const data = await response;
        hideLoading();
    } catch (error) {
        console.error(error);
    }
    await fetchImageAndObjects();
}