function MainComponent() { const [ingredients, setIngredients] = React.useState(''); const [loading, setLoading] = React.useState(false); const [recipes, setRecipes] = React.useState([]); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const messages = [ { role: 'user', content: `I have the following ingredients: ${ingredients}. Can you suggest 3 recipes along with images?` } ]; const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }); const result = await response.json(); const content = result.choices[0].message.content; const parsedRecipes = JSON.parse(content); setRecipes(parsedRecipes); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-cover bg-center", style: { backgroundImage: "url('/relative/path/to/kitchen-image.jpg')" }, __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mt-10 font-crimson-text", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "Let's make a meal with what you have!"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "max-w-md mx-auto mt-10", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "ingredients", value: ingredients, onChange: (e)=>setIngredients(e.target.value), className: "w-full p-2 border border-gray-300 rounded", placeholder: "Enter your ingredients, separated by commas", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full mt-4 p-2 bg-blue-500 text-white rounded font-bold", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Find Recipes")), loading && /*#__PURE__*/ React.createElement("p", { className: "text-center mt-10 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto mt-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, recipes.map((recipe, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-gray-300 rounded p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: recipe.image, alt: `Recipe ${index + 1}`, className: "w-full h-40 object-cover mb-4 rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-crimson-text", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, recipe.title), /*#__PURE__*/ React.createElement("p", { className: "mt-2 font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, recipe.description))))); }