/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [numPeople, setNumPeople] = useState(4); const [numRecipes, setNumRecipes] = useState(1); const [difficulty, setDifficulty] = useState("easy"); const [cuisine, setCuisine] = useState("any"); const [ingredients, setIngredients] = useState(""); const [unit, setUnit] = useState("metric"); const [dietaryRestrictions, setDietaryRestrictions] = useState(""); const [recipes, setRecipes] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); setError(""); try { const response = await fetch("/recipes", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ numPeople, numRecipes, difficulty, cuisine, ingredients, unit, dietaryRestrictions }), }); const data = await response.json(); if (data.error) { setError(data.error); } else { setRecipes(data.recipes); } } catch (err) { setError("An error occurred while fetching recipes. Please try again."); } finally { setLoading(false); } }; const formatIngredient = (ingredient) => { if (ingredient.arbitrary) { return `${ingredient.name}: ${ingredient.arbitrary}`; } if (ingredient.metric === ingredient.imperial) { return `${ingredient.name}: ${ingredient.metric}`; } const preferred = unit === "metric" ? ingredient.metric : ingredient.imperial; const alternative = unit === "metric" ? ingredient.imperial : ingredient.metric; return `${ingredient.name}: ${preferred} (${alternative})`; }; return (

🧑‍🍳 Lazy Cook

Number of People setNumPeople(parseInt(e.target.value))} min="1" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />

Number of Recipes setNumRecipes(parseInt(e.target.value))} min="1" max="5" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />

Difficulty

Cuisine

Preferred Units

Ingredients, comma-separated (optional) setIngredients(e.target.value)} placeholder="e.g., chicken, rice, tomatoes" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />

Dietary or Allergy Restrictions (optional) setDietaryRestrictions(e.target.value)} placeholder="e.g., vegetarian, gluten-free, nut allergy" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />

{error && (

Error: {error}

)} {recipes.length > 0 && (

Suggested Recipes:

{recipes.map((recipe, index) => (

{recipe.name}

{recipe.image && (

)}

Ingredients:

{formatIngredient(ingredient)}

Instructions:

{instruction}

))}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } function extractJSONFromMarkdown(markdown: string): string { const jsonMatch = markdown.match(/```json\n([\s\S]*?)\n```/); return jsonMatch ? jsonMatch[1] : ""; } export default async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/recipes") { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const { numPeople, numRecipes, difficulty, cuisine, ingredients, unit, dietaryRestrictions } = await request.json(); const prompt = `Generate ${numRecipes} unique and good tasting ${difficulty} recipe(s) for ${numPeople} people${ cuisine !== "any" ? ` in ${cuisine} cuisine` : "" }${ ingredients ? ` using some or all of these ingredients: ${ingredients}` : "" }${ dietaryRestrictions ? ` considering these dietary restrictions or allergies: ${dietaryRestrictions}` : "" }. Be creative and prefer interesting rather than predictable dishes, unless the list of provided ingredients, if any, doesn't allow for it. Nevertheless, make sure the recipe makes sense and it's not just a bunch of random ingredients thrown together. For each recipe, provide an interesting name, a detailed ingredients list as an array of objects, and cooking instructions as an array of detailed steps. Format the response as a JSON array of objects, each with 'name', 'ingredients', and 'instructions' properties. The 'ingredients' property should be an array of objects, each with 'name', 'metric', and 'imperial' properties. The 'name' property should contain only the ingredient name. For ingredients with specific measurements, include 'metric' and 'imperial' properties with the quantity in the respective unit system. For ingredients with arbitrary quantities (e.g., "to taste" or "as needed"), use an 'arbitrary' property instead of 'metric' and 'imperial'. Ensure the recipes are diverse and not repetitive. Wrap the JSON in triple backticks with 'json' language specifier.`; try { const completion = await openai.chat.completions.create({ messages: [{ role: "user", content: prompt }], model: "gpt-4o-mini", max_tokens: 1000, }); const content = completion.choices[0].message.content; const jsonContent = extractJSONFromMarkdown(content); if (!jsonContent) { throw new Error("Failed to extract JSON from the API response"); } const recipes = JSON.parse(jsonContent); // Generate images for each recipe const recipesWithImages = await Promise.all( recipes.map(async (recipe) => { try { const imageUrl = await generateImage(recipe.name); return { ...recipe, image: imageUrl }; } catch (error) { console.error(`Failed to generate image for ${recipe.name}:`, error); return { ...recipe, image: null }; } }) ); return new Response(JSON.stringify({ recipes: recipesWithImages }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error generating recipes:", error); return new Response(JSON.stringify({ error: "Failed to generate recipes. Please try again." }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } return new Response( ` Lazy Cook

`, { headers: { "content-type": "text/html", }, }, ); } async function generateImage(recipeName: string): Promise { const response = await fetch(`https://maxm-imggenurl.web.val.run/${encodeURIComponent(recipeName)}`); if (!response.ok) { throw new Error(`Failed to generate image for ${recipeName}`); } return response.url; }

lazyCook