\n {activeSection === 'inspiration' && (\n

🌈 Today's Culinary Inspirations

\n {MEAL_INSPIRATIONS.map((meal, index) => (\n

selectInspiredMeal(meal)}>\n

{meal.name}

{meal.description}

\n ⏰ {meal.prepTime}\n 🔥 {meal.difficulty}\n

\n ))}\n

\n )}\n\n {activeSection === 'generator' && (\n

setIngredients(e.target.value)}\n              rows={4}\n            />\n            <button \n              onClick={handleGenerateRecipe} \n              disabled={isLoading}\n            >\n              {isLoading ? 'Cooking up a recipe...' : 'Generate Recipe 🥘'}\n            </button>\n          </div>\n        )}\n\n        {activeSection === 'custom' && recipe && (\n          <div className=\"recipe-result\">\n            <div className=\"recipe-header\">\n              <img src={recipe.imageUrl || `https://maxm-imggenurl.web.val.run/${encodeURIComponent(recipe.name)}`} alt={recipe.name} />\n              <div className=\"recipe-title\">\n                <h2>{recipe.name}</h2>\n                <p>{recipe.description || 'A delightful culinary creation'}</p>\n              </div>\n            </div>\n            <div className=\"recipe-details\">\n              <div className=\"recipe-meta\">\n                <p><strong>Prep Time:</strong> {recipe.prepTime}</p>\n                <p><strong>Difficulty:</strong> {recipe.difficulty}</p>\n              </div>\n              <div className=\"recipe-ingredients\">\n                <h3>Ingredients</h3>\n                <ul>\n                  {recipe.ingredients.map((ingredient, index) => (\n                    <li key={index}>{ingredient}</li>\n                  ))}\n                </ul>\n              </div>\n              <div className=\"recipe-instructions\">\n                <h3>Instructions</h3>\n                <ol>\n                  {recipe.instructions.map((step, index) => (\n                    <li key={index}>{step}</li>\n                  ))}\n                </ol>\n              </div>\n            </div>\n          </div>\n        )}\n      </main>\n\n      <footer>\n        <a \n          href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n          target=\"_top\"\n        >\n          View Source ✨\n        </a>\n      </footer>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  if (request.method === 'POST' && new URL(request.url).pathname === '/generate-recipe') {\n    const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n    const openai = new OpenAI();\n\n    try {\n      const { ingredients } = await request.json();\n\n      const completion = await openai.chat.completions.create({\n        messages: [\n          { \n            role: \"system\", \n            content: \"You are a professional chef creating unique recipes. Always respond with a JSON object containing: name, description, prepTime, difficulty, imageUrl, ingredients (array), instructions (array).\" \n          },\n          { \n            role: \"user\", \n            content: `Create a creative recipe ${ingredients === 'random ingredients' ? 'with no specific ingredients' : `using these ingredients: ${ingredients}`}. Make the recipe interesting, provide a description, and include clear, step-by-step instructions.` \n          }\n        ],\n        model: \"gpt-4o-mini\",\n        response_format: { type: \"json_object\" },\n        max_tokens: 600\n      });\n\n      const recipeData = JSON.parse(completion.choices[0].message.content);\n      recipeData.imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(recipeData.name)}`;\n      \n      return new Response(JSON.stringify(recipeData), {\n        headers: { 'Content-Type': 'application/json' }\n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: 'Failed to generate recipe' }), {\n        status: 500,\n        headers: { 'Content-Type': 'application/json' }\n      });\n    }\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>ChefMate 🍳</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}\n\nconst css = `\nbody {\n  font-family: 'Inter', 'Arial', sans-serif;\n  line-height: 1.6;\n  background-color: #f9f5f0;\n  margin: 0;\n  padding: 0;\n  color: #333;\n}\n\n.chefmate-container {\n  max-width: 1000px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\nheader {\n  text-align: center;\n  background-color: #ff6b6b;\n  color: white;\n  padding: 20px;\n  border-radius: 15px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nheader h1 {\n  margin: 0;\n  font-size: 2.5em;\n}\n\n.section-nav {\n  display: flex;\n  justify-content: center;\n  margin: 20px 0;\n  gap: 20px;\n}\n\n.section-nav button {\n  background-color: #f0f0f0;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 25px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.section-nav button.active, .section-nav button:hover {\n  background-color: #4ecdc4;\n  color: white;\n}\n\n.inspiration-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 20px;\n}\n\n.inspiration-card {\n  background-color: white;\n  border-radius: 15px;\n  overflow: hidden;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  cursor: pointer;\n  transition: transform 0.3s ease;\n}\n\n.inspiration-card:hover {\n  transform: scale(1.05);\n}\n\n.inspiration-card img {\n  width: 100%;\n  height: 250px;\n  object-fit: cover;\n}\n\n.meal-details {\n  padding: 15px;\n}\n\n.meal-meta {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n  color: #666;\n}\n\n.recipe-generator {\n  background-color: white;\n  padding: 20px;\n  border-radius: 15px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  margin: 20px 0;\n}\n\ntextarea {\n  width: 100%;\n  padding: 10px;\n  margin-bottom: 10px;\n  border: 1px solid #ddd;\n  border-radius: 5px;\n  resize: vertical;\n}\n\nbutton {\n  width: 100%;\n  padding: 15px;\n  background-color: #4ecdc4;\n  color: white;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background-color 0.3s;\n}\n\n.recipe-result {\n  background-color: white;\n  border-radius: 15px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  overflow: hidden;\n}\n\n.recipe-header {\n  position: relative;\n}\n\n.recipe-header img {\n  width: 100%;\n  height: 400px;\n  object-fit: cover;\n}\n\n.recipe-title {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: rgba(0,0,0,0.6);\n  color: white;\n  padding: 20px;\n}\n\n.recipe-details {\n  padding: 20px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 20px;\n}\n\n.recipe-meta, .recipe-ingredients, .recipe-instructions {\n  background-color: #f9f9f9;\n  padding: 15px;\n  border-radius: 10px;\n}\n\nfooter {\n  text-align: center;\n  margin-top: 20px;\n  font-size: 0.8em;\n  color: #666;\n}\n\n@media (max-width: 768px) {\n  .recipe-details {\n    grid-template-columns: 1fr;\n  }\n  \n  .recipe-header img {\n    height: 250px;\n  }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Izuhbel/tenaciousBlueOpossum/code/main.tsx","extension","actionData","errors"]
</article></body></html>