async function initializeWebGPU() {
    const canvas = document.getElementById("webgpu-canvas");

    if (!navigator.gpu) {
        document.body.innerHTML = "<p>Your browser does not support WebGPU.</p>";
        return;
    }

    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();
    const context = canvas.getContext("webgpu");

    context.configure({
        device: device,
        format: navigator.gpu.getPreferredCanvasFormat(),
        alphaMode: "opaque",
    });

    console.log("WebGPU initialized.");
}

// Submit the image and question to the backend
async function submitQuestion(imageFile, question) {
    const formData = new FormData();
    formData.append("image", imageFile);
    formData.append("text", question);

    const response = await fetch("/predict", {
        method: "POST",
        body: formData,
    });

    if (!response.ok) {
        console.error("Failed to get a response:", response.statusText);
        return "Error: Unable to fetch the answer.";
    }

    const result = await response.json();
    return result.data[0];
}

// Handle user interactions
document.getElementById("submit-btn").addEventListener("click", async () => {
    const imageFile = document.getElementById("image-upload").files[0];
    const question = document.getElementById("question").value;

    const answer = await submitQuestion(imageFile, question);
    document.getElementById("answer").innerText = `Answer: ${answer}`;
});

// Initialize WebGPU when the page loads
initializeWebGPU();