// Dynamically write HTML content
document.write(`
<div style='padding:100' >
  <div>
        <div>
            <input id="userInput" placeholder="input image description">
        </div>
        <div>
            <button title="Generate Image" onclick="getInputText();" id="generateButton">Generate Image</button>
        </div>
  </div>
  <div id="imageContainer" style="text-align: center;"></div>
</div>
`);




// MH edit
// moved to top

// Replace with your DALL-E 2 API key
const apiAccessKey = "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";
const apiEndpoint = "https://api.openai.com/v1/images/generations";

const azureapiKey = "2cbc11ba15f84a1fbe6c6fce31fd2184"; //  "2218d40917c7410b9f356e9483497d07";
const azureEndpoint =   "https://eastus.api.cognitive.microsoft.com/vision/v3.1/describe?maxCandidates=1";




// Initialize variables
let generatedImages = [];
let generatedImageDescriptions = [];

// Create a container for the image
const imageContainer = document.getElementById("imageContainer");

// Function to update the displayed image and description
function updateDisplayedImage(imageUrl, description) {
    // Create an img element for the image
    const imageElement = document.createElement("img");
    imageElement.src = imageUrl;

    // Create a div for the description
    const descriptionDiv = document.createElement("div");
    if (description) {
        descriptionDiv.textContent = "Caption: " + description.toUpperCase();
    }

    descriptionDiv.style.color = "black";
    imageContainer.innerHTML = ""; // Clear the container before appending new elements
    imageContainer.appendChild(imageElement);
    imageContainer.appendChild(descriptionDiv);
}

// Function to get user input and generate image
function getInputText() {
    const userProvidedDescription = document.getElementById("userInput").value;
    generateImageFromDescription(userProvidedDescription);
}

// Function to generate an image based on user input description
async function generateImageFromDescription(userProvidedDescription) {

    let generatedImageUrl; // Declare generatedImageUrl here

    try {
        const apiResponse = await fetch(apiEndpoint, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${apiAccessKey}`,
            },
            body: JSON.stringify({
                prompt: userProvidedDescription,
                n: 1,
            }),
        });

        if (!apiResponse.ok) {
            throw new Error(`HTTP error! Status: ${apiResponse.status}`);
        }

        const responseData = await apiResponse.json();
        generatedImageUrl = responseData.data[0].url;
        generatedImages.push(generatedImageUrl);

        // Display the generated image
        updateDisplayedImage(generatedImageUrl);
        console.log('generated Image URL', generatedImageUrl);
    } catch (error) {
        console.error("Error:", error.message);
    }

    if (generatedImageUrl) {

        try {
            const response = await fetch(azureEndpoint, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Ocp-Apim-Subscription-Key": azureapiKey,
                },
                body: JSON.stringify({ url: generatedImageUrl }), // Use the generated image URL
            });

            if (response.ok) {
                const data = await response.json();
                const description = data.description.captions[0].text;

                if (description) {
                    generatedImageDescriptions.push(description);
                    // Display the generated image with description
                    updateDisplayedImage(generatedImageUrl, description);
                }

                console.log("Generated Image Description:", description);
            } else {
                console.error("Error:", response.status, response.statusText);
            }
        } catch (error) {
            console.error("Error:", error.message);
        }
    }
}