setIngredients(e.target.value)}\n            rows={4}\n          />\n          <button \n            onClick={handleGenerateRecipe} \n            disabled={isLoading || !ingredients.trim()}\n          >\n            {isLoading ? 'Cooking up a recipe...' : 'Generate Recipe 🥘'}\n          </button>\n        </div>\n        {error && (\n          <div className=\"error-message\">\n            🚫 {error}\n          </div>\n        )}\n        {recipe && (\n          <div className=\"recipe-result\">\n            <h2>{recipe.name}</h2>\n            <div className=\"recipe-details\">\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        )}\n      </main>\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, prepTime, difficulty, ingredients (array), instructions (array).\" \n          },\n          { \n            role: \"user\", \n            content: `Create a creative recipe using these ingredients: ${ingredients}. Make the recipe interesting and provide clear, step-by-step instructions.` \n          }\n        ],\n        model: \"gpt-4o-mini\",\n        response_format: { type: \"json_object\" },\n        max_tokens: 500\n      });\n\n      const recipeData = JSON.parse(completion.choices[0].message.content);\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: 'Arial', sans-serif;\n  line-height: 1.6;\n  background-color: #f4f4f4;\n  margin: 0;\n  padding: 0;\n  color: #333;\n}\n\n.chefmate-container {\n  max-width: 800px;\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: 10px;\n}\n\nheader h1 {\n  margin: 0;\n  font-size: 2.5em;\n}\n\n.recipe-generator {\n  background-color: white;\n  padding: 20px;\n  border-radius: 10px;\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: 10px;\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\nbutton:hover {\n  background-color: #45b7aa;\n}\n\nbutton:disabled {\n  background-color: #cccccc;\n  cursor: not-allowed;\n}\n\n.recipe-result {\n  background-color: white;\n  padding: 20px;\n  border-radius: 10px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.error-message {\n  background-color: #ffdddd;\n  color: #ff0000;\n  padding: 10px;\n  border-radius: 5px;\n  text-align: center;\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: 600px) {\n  .chefmate-container {\n    padding: 10px;\n  }\n  \n  header h1 {\n    font-size: 2em;\n  }\n}\n`;","createdAt",["D",1739829907524],"branchVersion","branchId","9402c6c2-26d6-11f0-a5b3-569c3dd06744","id","94027604-26d6-11f0-a5b3-569c3dd06744","tenaciousBlueOpossum",["D",1746136349651],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","1a9eeb70-ecd0-11ef-8139-5783405cc753","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","a9f68d39-ee70-4923-b310-99878e5da7a6","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_93":92,"_101":97},"org",{"_93":92,"_94":95,"_96":97,"_18":52,"_98":99,"_100":24},"branch",{"_13":82,"_31":83,"_41":40,"_84":42,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":43,"_91":92},"isOwned",2,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","Izuhbel","handle","displayName","Adaobi Onyenaucheya","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/647c69ec-8d72-426b-8ad6-0ba13ab45600/square512?exp=1789577999&sig=baeccbb1909abcb2c89ae5c5f31f46fa61446941a4073e73bbea5faf9d2b8bf0","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":146,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":-5,"_51":-5,"_18":52,"_53":30,"_54":55,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":147,"_77":148,"_79":149,"_81":24},"tree",[141],"files",[141],"counts",{"_131":59,"_132":14,"_133":59,"_134":135,"_136":137},"contents",[124],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":125,"_31":27,"_29":30,"_126":-5,"_39":40,"_38":14,"_127":24,"_36":128,"_13":59,"_32":33,"_34":35,"_23":24,"_129":-5,"_26":130},"94062b28-26d6-11f0-a5b3-569c3dd06744","parentId","latest",["D",1739829907524],"label",[27],"pulls","branches","forks","envVars",{"_138":59,"_140":59},"connections",{"_138":59,"_139":59},"count","unfilledCount","emptyCount",{"_41":125,"_31":27,"_29":30,"_126":-5,"_39":40,"_38":14,"_127":24,"_36":142,"_13":59,"_32":33,"_34":35,"_23":24,"_129":-5,"_143":144,"_26":145},["D",1739829907524],"children",[],[27],["D",1746136349651],{"_93":92,"_101":97},{"_93":92,"_94":95,"_96":97,"_18":52,"_98":99,"_100":24},{"_13":82,"_31":83,"_41":40,"_84":42,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":43,"_91":92},"ctx",{"_75":-5,"_121":183,"_184":185,"_186":187,"_188":24,"_189":24,"_190":24,"_191":55,"_192":-5,"_193":-7,"_194":-7,"_195":59,"_196":24,"_197":24,"_198":-5,"_199":24,"_200":24,"_201":24,"_202":-5},"ENV",{"_154":155,"_156":157,"_158":83,"_159":160,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182},"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>

Diff · v1