\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",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":59,"_18":60},["D",1739830122006],"children",[],[35],"94027604-26d6-11f0-a5b3-569c3dd06744",["D",1746136349651],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","1a9eeb70-ecd0-11ef-8139-5783405cc753","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","a9f68d39-ee70-4923-b310-99878e5da7a6","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_115":111},"org",{"_11":12,"_108":109,"_110":111,"_70":71,"_112":113,"_114":53},"branch",{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Adaobi Onyenaucheya","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/647c69ec-8d72-426b-8ad6-0ba13ab45600/square512?exp=1789581599&sig=bb244d1b49dd1ed59f1866ca7391c22df98fcf7d80e9a5b64300304f8d9bf92f","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":148,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":149,"_95":150,"_97":151,"_99":53},[145],"files",[145],"counts",{"_136":77,"_137":47,"_138":77,"_31":139,"_140":141},[134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":135},[35],"pulls","branches","forks",{"_142":77,"_144":77},"connections",{"_142":77,"_143":77},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":146,"_18":147},[],[35],["D",1746136349651],{"_11":12,"_115":111},{"_11":12,"_108":109,"_110":111,"_70":71,"_112":113,"_114":53},{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"ctx",{"_93":-5,"_131":185,"_186":187,"_188":189,"_190":53,"_191":53,"_192":53,"_193":44,"_194":-5,"_195":-7,"_196":-7,"_197":77,"_198":53,"_199":53,"_200":-5,"_201":53,"_202":53,"_203":53,"_204":-5},"ENV",{"_156":157,"_158":159,"_160":16,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Code