function MainComponent({ onImageGenerated, onPromptImproved }) { const [prompt, setPrompt] = React.useState(''); const [loading, setLoading] = React.useState(false); const [improving, setImproving] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); if (prompt.trim()) { setLoading(true); try { const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); if (data.data && data.data.length > 0) { onImageGenerated(data.data[0]); } } catch (error) { console.error('Error:', error); } finally{ setLoading(false); } } }; const improvePrompt = async ()=>{ setImproving(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `Improve this image generation prompt for better results: "${prompt}". Please only respond with the improved prompt, no explanations.` } ] }) }); const data = await response.json(); if (data.choices && data.choices.length > 0) { const improvedPrompt = data.choices[0].message.content; setPrompt(improvedPrompt); onPromptImproved(improvedPrompt); } } catch (error) { console.error('Error:', error); } finally{ setImproving(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-gray-100 p-4 w-full max-w-md mx-auto", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "画像生成アプリ"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), className: "flex-grow border border-gray-300 p-2 rounded-lg w-full mb-2", placeholder: "画像の説明を入力してください", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex w-full", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: improvePrompt, className: "bg-green-500 text-white px-4 py-2 rounded-l-lg w-1/2", disabled: improving || loading, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, improving ? '改善中...' : 'プロンプト改善'), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded-r-lg w-1/2", disabled: loading || improving, __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, loading ? '生成中...' : '画像を生成'))))); } function StoryComponent() { const [generatedImage, setGeneratedImage] = React.useState(null); const [improvedPrompt, setImprovedPrompt] = React.useState(''); const handleImageGenerated = (imageUrl)=>{ setGeneratedImage(imageUrl); }; const handlePromptImproved = (newPrompt)=>{ setImprovedPrompt(newPrompt); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto p-4", __source: { fileName: "", lineNumber: 105, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onImageGenerated: handleImageGenerated, onPromptImproved: handlePromptImproved, __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }), improvedPrompt && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 bg-green-100 rounded-lg", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-semibold", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "改善されたプロンプト:"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, improvedPrompt)), generatedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "生成された画像", className: "w-full h-auto rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }))); }