function OutlineButton({ text, onClick, bgColor = 'bg-white' }) { const textColor = bgColor === 'bg-white' ? 'text-black' : 'text-white'; return /*#__PURE__*/ React.createElement("button", { className: `px-8 py-2 rounded-full border border-current ${textColor} font-inter bg-transparent hover:bg-opacity-10 transition-colors duration-300 w-[240px] h-[60px]`, onClick: onClick, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, text); } function OutlineButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col space-y-4 justify-center items-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(OutlineButton, { text: "Click me", onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(OutlineButton, { text: "Dark version", onClick: ()=>alert('Dark button clicked!'), bgColor: "bg-black", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [loading, setLoading] = React.useState(false); const [visionLoading, setVisionLoading] = React.useState(false); const [images, setImages] = React.useState([]); const handleGenerate = async ()=>{ setLoading(true); const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`); const data = await response.json(); const imageUrl = data.data[0]; setImages([ { url: imageUrl, prompt, caption: '' }, ...images ]); setLoading(false); setVisionLoading(true); const messageContent = [ { "role": "user", "content": [ { "type": "text", "text": prompt }, { "type": "image_url", "image_url": { "url": imageUrl } } ] } ]; const visionResponse = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: messageContent }) }); const visionData = await visionResponse.json(); const caption = visionData.choices[0].message.content; setImages((prevImages)=>{ const updatedImages = [ ...prevImages ]; updatedImages[0] = { ...updatedImages[0], caption }; return updatedImages; }); setVisionLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-200", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mt-8 font-sans", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "イメージジェネレーター at DALL-E3"), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto p-4 mt-4 bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", className: "w-full p-2 border border-gray-300 rounded mb-4", placeholder: "コメントを入力", value: prompt, onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 font-sans", onClick: handleGenerate, disabled: loading || visionLoading, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "生成"), (loading || visionLoading) && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-spinner fa-spin text-3xl text-gray-500", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }))), images.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "max-w-2xl mx-auto p-4 mt-4 bg-white rounded-lg shadow text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.url, alt: `生成された画像 ${index + 1}`, className: "w-full h-auto rounded mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold mb-4 font-sans", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, image.prompt), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-2 px-4 rounded hover:bg-green-700 mb-4 font-sans", onClick: ()=>window.open(image.url, '_blank'), __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "画像を保存"), image.caption && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mt-4 mb-2 font-sans", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "GPT-4 Visionによるコメント"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 mt-4 rounded", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, image.caption))))), /*#__PURE__*/ React.createElement("div", { className: "h-[100px]", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this })); }