function StylishButton({ text, icon, color, onClick }) { const bgColor = { yellow: "bg-[#F8E44F]", purple: "bg-[#C1BFF9]", teal: "bg-[#7EE7D6]" }[color] || "bg-[#F8E44F]"; const roundedClass = icon ? "rounded-full" : "rounded-[6px]"; return /*#__PURE__*/ React.createElement("button", { className: `font-poppins text-black border-2 border-black ${bgColor} ${roundedClass} px-4 py-2`, onClick: onClick, __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, icon && /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} mr-2 text-black`, __source: { fileName: "", lineNumber: 17, columnNumber: 18 }, __self: this }), text)); } function StylishButtonStory() { const handleClick = ()=>{ alert("Button clicked!"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "Click me", icon: "fa-star", color: "yellow", onClick: handleClick, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Purple Button", icon: "fa-heart", color: "purple", onClick: handleClick, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Teal No Icon", color: "teal", onClick: handleClick, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const [theme, setTheme] = React.useState(''); const [prompt, setPrompt] = React.useState(''); const [stableDiffusionImage, setStableDiffusionImage] = React.useState(''); const [dalleImage, setDalleImage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const generatePrompt = async ()=>{ setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: `画像生成のためのプロンプトを日本語で作成してください。テーマ: ${theme}` } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); setPrompt(data.choices[0].message.content); } catch (error) { console.error('Error generating prompt:', error); } setIsLoading(false); }; const generateImages = async ()=>{ setIsLoading(true); try { const stableDiffusionResponse = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}`); const stableDiffusionData = await stableDiffusionResponse.json(); setStableDiffusionImage(stableDiffusionData.data[0]); const dalleResponse = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`); const dalleData = await dalleResponse.json(); setDalleImage(dalleData.data[0]); } catch (error) { console.error('Error generating images:', error); } setIsLoading(false); }; const downloadImage = (url, filename)=>{ const link = document.createElement('a'); link.href = url; link.download = filename; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return /*#__PURE__*/ React.createElement("div", { className: "font-poppins bg-[#F8F8F8] min-h-screen p-8", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8 text-center", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "AI画像生成アプリ"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg border-2 border-black p-6 mb-8", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: theme, onChange: (e)=>setTheme(e.target.value), placeholder: "画像にしたいテーマを入力してください", className: "w-full border-2 border-black rounded-[6px] px-4 py-2 mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "プロンプトを生成", icon: "fa-magic", color: "yellow", onClick: generatePrompt, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this })), prompt && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg border-2 border-black p-6 mb-8", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "生成されたプロンプト:"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, prompt), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "プロンプトを再生成", icon: "fa-redo", color: "purple", onClick: generatePrompt, __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "画像を生成", icon: "fa-image", color: "teal", onClick: generateImages, __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl text-[#F8E44F]", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this })), (stableDiffusionImage || dalleImage) && /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, stableDiffusionImage && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg border-2 border-black p-6", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, "Stable Diffusion V3"), /*#__PURE__*/ React.createElement("img", { src: stableDiffusionImage, alt: "Stable Diffusion generated image", className: "w-full h-auto mb-4 rounded-lg", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "ダウンロード", icon: "fa-download", color: "yellow", onClick: ()=>downloadImage(stableDiffusionImage, 'stable_diffusion_image.jpg'), __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this })), dalleImage && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg border-2 border-black p-6", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, "DALL-E 3"), /*#__PURE__*/ React.createElement("img", { src: dalleImage, alt: "DALL-E generated image", className: "w-full h-auto mb-4 rounded-lg", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "ダウンロード", icon: "fa-download", color: "yellow", onClick: ()=>downloadImage(dalleImage, 'dalle_image.jpg'), __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }))))); }