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.");
}

async function submitQuestion(imageFile, question) {
    const formData = new FormData();
    formData.append("image", imageFile);
    formData.append("text", question);

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

        if (!response.ok) {
            const errorText = await response.text();
            console.error("Failed to get a response:", response.status, response.statusText, errorText);
            return `Error: Unable to fetch the answer. Status: ${response.status}, ${response.statusText}`;
        }

        const result = await response.json();
        return result.data[0];
    } catch (error) {
        console.error("Fetch error:", error);
        return `Error: Unable to fetch the answer. ${error.message}`;
    }
}

// Handle user interactions
document.getElementById("submit-btn").addEventListener("click", async () => {
    const imageFile = document.getElementById("image-upload").files[0];
    if (!imageFile) {
        alert("Please upload an image.");
        return;
    }
    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();