function MainComponent() { const [loading, setLoading] = React.useState(false); const [emojiArt, setEmojiArt] = React.useState(""); const [pattern, setPattern] = React.useState("pattern1"); const fetchEmojiArt = async (e)=>{ e.preventDefault(); setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `Combine emoji art using pattern ${pattern}.` } ], system_prompt: `Combine emoji art using pattern ${pattern}.` }) }); const data = await response.json(); setEmojiArt(data.choices[0].message.content); setLoading(false); }; const handlePatternChange = (e)=>{ setPattern(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#fafafa]", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "絵文字アートジェネレーター"), /*#__PURE__*/ React.createElement("form", { className: "mt-4", onSubmit: fetchEmojiArt, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "patternSelect", onChange: handlePatternChange, className: "mb-4 px-4 py-2 bg-white border border-[#007BFF] rounded shadow-sm", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "pattern1", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Pattern 1"), /*#__PURE__*/ React.createElement("option", { value: "pattern2", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Pattern 2"), /*#__PURE__*/ React.createElement("option", { value: "pattern3", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Pattern 3")), /*#__PURE__*/ React.createElement("button", { type: "submit", name: "generate", className: "px-4 py-2 bg-[#007BFF] text-white font-roboto rounded hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, loading ? "生成中..." : "絵文字アートを生成")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-[400px] h-[400px] bg-white border border-gray-200 rounded shadow-sm flex items-center justify-center", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#121212] whitespace-pre-wrap", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, emojiArt))); }