function MainComponent({ onSubmit, loading, result }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-sans mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "画像を生成するアプリ"), /*#__PURE__*/ React.createElement("form", { onSubmit: onSubmit, className: "w-full max-w-md", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "message", className: "w-full p-2 border border-gray-300 rounded mb-4", placeholder: "メッセージを入力してください...", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-700 transition", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "送信")), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-blue-500 font-sans", __source: { fileName: "", lineNumber: 18, columnNumber: 19 }, __self: this }, "生成中..."), result && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border border-gray-300 rounded w-full max-w-md", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-sans mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "生成結果"), /*#__PURE__*/ React.createElement("img", { src: result, alt: "生成された画像", className: "w-full", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }))); } function StoryComponent() { const [loading, setLoading] = React.useState(false); const [result, setResult] = React.useState(''); const handleSubmit = (event)=>{ event.preventDefault(); const message = event.target.elements.message.value; setLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: message } ], system_prompt: 'Generate an image' }) }).then((response)=>response.json()).then((data)=>{ const content = data.choices[0].message.content; setResult(content); setLoading(false); }).catch(()=>{ setLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onSubmit: handleSubmit, loading: loading, result: result, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this })); }