\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",[109],"pulls","branches","forks","envVars",{"_131":41,"_133":41},"connections",{"_131":41,"_132":41},"count","unfilledCount","emptyCount",{"_18":108,"_20":109,"_110":35,"_111":-5,"_112":67,"_113":65,"_114":37,"_22":135,"_64":116,"_117":118,"_119":120,"_121":26,"_122":-5,"_136":137,"_85":138},["D",1739830122006],"children",[],[109],["D",1746136349651],{"_16":17,"_83":79},{"_16":17,"_76":77,"_78":79,"_32":33,"_80":81,"_82":26},{"_64":65,"_20":66,"_18":67,"_68":19,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":21,"_75":17},"ctx",{"_57":-5,"_104":176,"_177":178,"_179":180,"_181":26,"_182":26,"_183":26,"_184":37,"_185":-5,"_186":-7,"_187":-7,"_188":41,"_189":26,"_190":26,"_191":-5,"_192":26,"_193":26,"_194":26,"_195":-5},"ENV",{"_147":148,"_149":150,"_151":66,"_152":153,"_154":155,"_156":157,"_158":159,"_160":161,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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>

Search