// Cloned by Dnyaneshwari on 29 Nov 2023 from World "Chat with GPT model (clone by Pooja Salgar) (clone by Dnyaneshwari) (clone by Pooja Salgar) (clone by Dnyaneshwari)" by Dnyaneshwari
// Please leave this clone trail here.
// Cloned by Dnyaneshwari on 29 Nov 2023 from World "Chat with GPT model (clone by Pooja Salgar) (clone by Dnyaneshwari) (clone by Pooja Salgar)" by Pooja Salgar
// Please leave this clone trail here.
$('body').css({ //"margin": "30px", //"padding": "30px"
});
$('body').css({
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"height": "100vh",
"margin": "0",
//"padding": "20px",
"text-align": "center",
//"font-family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" // macOS style font
});
document.write(`
<div id="enterkey" style="background-image: url('/uploads/pooja20/bright-yellow-brick.jpg'); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);width: 100%; height: 100VH;">
<br>
<div class="container" id="container">
<div class="imagecontainer">
<img src="https://cdn.dribbble.com/users/2243442/screenshots/11362056/media/c9432283d2d6ba1a23f2fcd6169f2983.gif" height="100%" width="100%">
</div>
<div id="searchbar">
<h2>AI Recipe Generator</h2>
<textarea id="ingredients" placeholder="Enter ingredients, separated by commas (e.g., eggs, flour, sugar)"></textarea>
<button onclick="generateRecipe()">Generate Recipe</button>
</div>
</div>
<div id="container">
<div id="response-container">
<h2>Generated Recipe</h2>
<div id="response"></div>
</div>
<div id="response-container">
<h2>Generated Image</h2>
<img id="recipe-image" src="" alt="Recipe image will appear here" style="max-width:100%; height:auto;" />
</div>
</div>
`);
// Add CSS styles for containers and input elements
const containerStyle = {
"border": "1px solid #ccc",
"padding": "20px",
"margin-bottom": "20px",
"border-radius": "5px",
"background-color": "#f8f8f8",
"width": "100%", // Adjust the width as needed
//"max-width": "800px", // Set a maximum width to limit container width
"height": "auto", // Auto-adjust the height based on content
"display":"flex",
"gap":"2rem",
"justify-content":"center"
};
const inputStyle = {
/*"width": "100%",
"padding": "10px",
"margin-bottom": "10px",
"border": "1px solid #ccc",
"border-radius": "5px"*/
"text-align": "center",
//"width": "calc(100% - 90px)",
"width":"100%",
"margin": "20px 20px",
"padding": "10px",
"border-radius": "20px",
"border": "none",
"box-shadow": "0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19)"
};
$("#container").css(containerStyle);
$("textarea").css(inputStyle);
$("button").css(inputStyle);
$("#enterkey").css({
"width": "100%",
"height":"100vh",
"background-size": "cover",
"background-repet": "no-repeate",
"display":"flex",
"flex-direction": "column",
"justify-content": "center",
"align-items": "center",
// You may adjust this as necessary
//"max-width": "1000px", // This is the maximum width of the container
//"margin": "0 auto"
});
$("#ingredients").css({
"margin":"20px 0px",
"height":"40px"
})
$("#response-container").css({
"max-height":"30vh",
"overflow-y":"scroll"
})
// Style the "Generate Recipe" button
$("button").css({
"width": "50%",
"padding": "10px",
"margin-top": "10px",
"background-color": "#007bff",
"color": "#fff",
"border": "none",
"border-radius": "5px",
"cursor": "pointer"
});
// Style the "image" panel
$(".imagecontainer").css({
"width": "50%",
"height":"50%",
"padding": "10px",
"margin-top": "10px",
"background-color": "#ffffff",
"color": "#fff",
"border": "none",
"border-radius": "5px",
"cursor": "pointer"
});
// Add hover effect for the button
$("button").hover(function() {
$(this).css("background-color", "#0056b3");
}, function() {
$(this).css("background-color", "#007bff");
});
// Center align text within containers
$(".container").css("text-align", "center");
// Add placeholder text for the textarea
$("textarea").attr("placeholder", "Enter ingredients, separated by commas (e.g., eggs, flour, sugar)");
// 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";
const apiKey = "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";
const imageGenApiKey = "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";
// Autocomplete feature for ingredients
//$(function() {
//var availableIngredients = [
//"Apples", "Almonds", "Bacon", "Butter", "Carrots", // ... more ingredients
// ];
// $("#ingredients").autocomplete({
// source: availableIngredients
//});
//});
function generateRecipe() {
const ingredients = $("#ingredients").val().trim();
if (!ingredients) {
displayError("Please enter some ingredients to continue.");
return;
}
const recipePrompt = `Given these ingredients: ${ingredients}, can you provide a recipe?`;
sendRequestToOpenAI(recipePrompt);
}
function sendRequestToOpenAI(prompt) {
$("#response").text("Generating recipe... Please wait.");
//$("#response").attr("src", "https://www.google.com/url?sa=i&url=https%3A%2F%2Fdribbble.com%2Fshots%2F11362056-COOKING-AT-HOME&psig=AOvVaw1lk-Cc2Osdkx2Phj6AU3Lp&ust=1701372305129000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCNDx7c_26YIDFQAAAAAdAAAAABAE");
const data = {
prompt: prompt,
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
generateImage(recipeText); // Trigger image generation with the recipe text
},
error: function(xhr) {
displayError("Failed to generate recipe. Please try again.");
}
});
}
function displayRecipeInSteps(recipeText) {
// Split the recipe text into steps assuming each step is separated by two new lines.
var steps = recipeText.split("\n\n");
// Create a list of steps, each in a new line, ensuring empty steps are not added
var formattedSteps = steps.map(step => `<p>${step.trim()}</p>`).join('');
// Update the response container with the formatted steps
$("#response").html(formattedSteps);
}
function generateImage(description) {
const generateImageUrl = "https://your-image-generation-api.com/generate";
// Assuming you receive a response with the image URL
const imageUrl = "generated-image-url.jpg";
// Update the 'src' attribute of the 'recipe-image' element with the generated image URL
$("#recipe-image").attr("src", imageUrl);
}
function displayError(message) {
$("#response-container").html(`<span class="error">${message}</span>`);
}