function MainComponent() { const [response, setResponse] = React.useState(""); const [loading, setLoading] = React.useState(false); const [imageUrl, setImageUrl] = React.useState(""); React.useEffect(()=>{ fetchChatGPTResponse(); fetchImage('waves, calming, ocean, Yokohama', setImageUrl); }, []); const fetchChatGPTResponse = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "system", "content": "新しく会社のホームページを作りたいです。会社はITの会社です。主に、WEBシステムの開発をしています。主要な言語は、PHP,Laravel,Rubyです。テーマカラーは青系が良いです。" } ], system_prompt: 'Describe the company and its main technologies.' }) }); const data = await response.json(); if (data.choices?.length > 0) { setResponse(data.choices[0].message.content); } } catch (error) { console.error('Error fetching ChatGPT response:', error); } finally{ setLoading(false); } }; const fetchImage = async (prompt)=>{ try { const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}&width=2560&height=1440`, { method: 'GET' }); const data = await response.json(); setImageUrl(data.data[0]); } catch (error) { console.error('Error fetching main image:', error); } }; if (loading) return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 23 }, __self: this }, "Loading..."); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, ` @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } `), /*#__PURE__*/ React.createElement("header", { className: "bg-gradient-to-r from-blue-900 to-blue-600 p-4 text-white", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "max-w-7xl mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-serif text-xl", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-serif text-xl", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-serif text-xl", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Services"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-serif text-xl", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Projects"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-serif text-xl", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-cover bg-center w-full", style: { backgroundImage: `url(${imageUrl})` }, __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#0008] p-20 text-white text-center", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-serif text-6xl mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Innovative Solutions for Your Business"), /*#__PURE__*/ React.createElement("p", { className: "font-serif text-xl mb-8", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, response || "Empowering your business with cutting-edge technology."), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-serif text-2xl bg-blue-700 py-4 px-8 rounded-lg hover:bg-blue-800 transition duration-300", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Discover More"))), /*#__PURE__*/ React.createElement("section", { className: "text-gray-700 body-font", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container px-8 py-24 mx-auto", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -m-4", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 md:w-1/3", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex rounded-lg h-full bg-gradient-to-r from-blue-100 to-blue-200 p-8 flex-col", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-3", __source: { fileName: "", lineNumber: 88, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-gray-900 text-lg title-font font-medium", __source: { fileName: "", lineNumber: 89, columnNumber: 21 }, __self: this }, "Our Expertise")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "leading-relaxed text-base", __source: { fileName: "", lineNumber: 92, columnNumber: 21 }, __self: this }, "Specializing in web system development using PHP, Laravel, and Ruby.")))), /*#__PURE__*/ React.createElement("div", { className: "p-4 md:w-1/3", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex rounded-lg h-full bg-gradient-to-r from-blue-100 to-blue-200 p-8 flex-col", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-3", __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-gray-900 text-lg title-font font-medium", __source: { fileName: "", lineNumber: 99, columnNumber: 21 }, __self: this }, "Technologies")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 101, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "leading-relaxed text-base", __source: { fileName: "", lineNumber: 102, columnNumber: 21 }, __self: this }, "We harness the power of cutting-edge technologies to offer innovative solutions.")))), /*#__PURE__*/ React.createElement("div", { className: "p-4 md:w-1/3", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex rounded-lg h-full bg-gradient-to-r from-blue-100 to-blue-200 p-8 flex-col", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-3", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-gray-900 text-lg title-font font-medium", __source: { fileName: "", lineNumber: 109, columnNumber: 21 }, __self: this }, "Join Us")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "leading-relaxed text-base", __source: { fileName: "", lineNumber: 112, columnNumber: 21 }, __self: this }, "Be part of a team that’s pushing the boundaries of technological innovation."))))))))); }