function StylishOrangeButton({ label }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-[#ffa500] text-white font-bold py-2 px-4 rounded hover:bg-[#ff8c00]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function StylishOrangeButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StylishOrangeButton, { label: "オレンジのおしゃれなボタン", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [loading, setLoading] = React.useState(false); const [inputMessage, setInputMessage] = React.useState(''); const [imageURL, setImageURL] = React.useState(''); const handleUpdateInput = (event)=>{ setInputMessage(event.target.value); }; const handleSendMessage = async ()=>{ setLoading(true); try { await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": inputMessage } ], system_prompt: 'Explain this content' }) }); } catch (error) { console.error('Error:', error); } finally{ setLoading(false); } }; const fetchImage = async ()=>{ try { const response = await fetch('/integrations/stable-diffusion/?prompt=interesting+food+presentation', { method: 'GET' }); const data = await response.json(); setImageURL(data.data[0]); } catch (error) { console.error('Error:', error); } }; React.useEffect(()=>{ fetchImage(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-[#ffe5e2]", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#ff7171] font-bold text-xl", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "RecipeSite"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex gap-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "hover:text-[#ff7171]", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("li", { className: "hover:text-[#ff7171]", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Recipe Categories"), /*#__PURE__*/ React.createElement("li", { className: "hover:text-[#ff7171]", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Favorites"), /*#__PURE__*/ React.createElement("li", { className: "hover:text-[#ff7171]", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", className: "p-2 border-2 border-[#ff7171] rounded-l", placeholder: "Search...", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(StylishOrangeButton, { label: "🔍", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] flex justify-center items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageURL, alt: "Featured recipes", className: "h-full max-w-full", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-center", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#ff7171]", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Welcome to RecipeSite"), /*#__PURE__*/ React.createElement("p", { className: "text-[#555]", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Discover healthy and delicious recipes for every occasion.")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "chatGPTInput", value: inputMessage, onChange: handleUpdateInput, className: "w-full h-[200px] p-4 border-2 border-[#ff7171] rounded", placeholder: "Ask me anything...", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-right mt-4", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("button", { className: "bg-[#ffa500] text-white font-bold py-2 px-4 rounded cursor-wait", disabled: true, __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "Sending...") : /*#__PURE__*/ React.createElement(StylishOrangeButton, { label: "Send", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { className: "mb-4", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-2 text-xl font-semibold", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Popular Recipes"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[200px] bg-[#fadcd9]", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Recipe 1"), /*#__PURE__*/ React.createElement("div", { className: "h-[200px] bg-[#fadcd9]", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "Recipe 2"), /*#__PURE__*/ React.createElement("div", { className: "h-[200px] bg-[#fadcd9]", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "Recipe 3"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-2 text-xl font-semibold", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Latest Blog Posts"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[200px] bg-[#fadcd9]", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Blog Post 1"), /*#__PURE__*/ React.createElement("div", { className: "h-[200px] bg-[#fadcd9]", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "Blog Post 2"), /*#__PURE__*/ React.createElement("div", { className: "h-[200px] bg-[#fadcd9]", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Blog Post 3")))), /*#__PURE__*/ React.createElement("footer", { className: "p-4 bg-[#ff7171] text-center text-white", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, "© 2023 RecipeSite. All rights reserved."), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, "Privacy Policy | Terms of Service"))); }