$('body').css({
    "background-image": "url('https://ancientbrain.com/uploads/pooja20/DALLE2023-12-0201.37.37-Createadark-themedimageforarecipewebsitebackgroundemphasizingmorefoodattheedgeoftheleftside.Theimageshouldfeatureanabundance.png')",
    "background-size": "cover",
    "background-repeat": "no-repeat",
    "background-attachment": "fixed",
    "background-position": "center",
    "margin": "0",
    "padding": "70px",
    "text-align": "center"
});

document.write(`
    <h1>HELLO WORLD</h1>
    <div style="margin-bottom: 20px;">
        <h3>Enter API key</h3>
        <input style='width:25vw;' id="apikey" placeholder="Enter API Key" />
        <button onclick='setkey();'>Set API key</button>
    </div>


    <div style="width:40vw; background-color:#ffffcc; padding: 20px; border: 1px solid black;">
        <h3>GPT replies</h3>
        <div id="them"></div>
    </div>
`);

// Replace these with your actual OpenAI and Image Generation API URLs and keys
const openaiURL = "https://api.openai.com/v1/engines/text-davinci-003/completions";
const imageGenerationApiURL = "https://api.openai.com/v1/images/generations";
let apiKey;
//const imageGenApiKey = "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";




function setkey(){
    
    
    apikey=document.getElementById("apikey").value;
    if (!apikey) {
        displayError("Please enter some ingredients to continue.");
        return;
    }
      
    //const recipePrompt = `Given these ingredients: ${ingredients}, can you provide a recipe?`;

    sendRequestToOpenAI();
}





function sendRequestToOpenAI() {
   // $("#response").text("Generating recipe... Please wait.");

    const data = {
        prompt:"prompt1",
        max_tokens: 1024,
        temperature: 0.7
    };
    

    $.ajax({
        type: "POST",
        url: openaiURL,
        data: JSON.stringify(data),
        headers: {
            "Authorization": `Bearer`+apiKey,
            "Content-Type": "application/json"
        },
        success: function(response) {
            const recipeText = response.choices[0].text.trim();
            //displayRecipeInSteps(recipeText); // Display the recipe in a step-by-step format
             // Trigger image generation with the recipe text
             createImageEdit();
             console.log("connection successful to Chatgpt");
        },
        error: function(xhr) {
            displayError("Failed to generate recipe. Please try again.");
        }
        
    });
}





async function createImageEdit() {
    
   
    const imageGenerationApiURL = "https://api.openai.com/v1/images/generations";
  //  const apiKey = "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";
  
  try {
    const imageres = await fetch(imageGenerationApiURL,
     // Replace with the actual API endpoint
      {
          method:'post',
          headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer`+apiKey,
      },
        body:JSON.stringify({
            model:'dall-e-2',
            prompt:"testing",
            n:1,
            size: '1024x1024',
        
            
        })
        
       
      }
      
      
    );
    const getdata=await imageres.json();
    const getimage = getdata.data[0].url;
    //display_image.src=getimage;
    console.log("connection successful to DALL_E");
    
    //console.log('Edited Image URL:', imageUrl);
  } catch (error) {
    console.error('Error:', error.message);
  }
}






function displayError(message) {
    $("#response-container").html(`<span class="error">${message}</span>`);
}