function NatureTranslator({ imageUrl, title, logoUrl, footerUrl }) { const logo = logoUrl ? /*#__PURE__*/ React.createElement("img", { src: logoUrl, alt: "Logo", className: "absolute top-0 left-0 w-12 h-12 m-4", __source: { fileName: "", lineNumber: 2, columnNumber: 26 }, __self: this }) : null; const footer = footerUrl ? /*#__PURE__*/ React.createElement("a", { href: footerUrl, className: "absolute bottom-0 left-0 m-4 text-blue-500 underline", __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, "Follow us on Twitter") : null; return /*#__PURE__*/ React.createElement("div", { className: "relative flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, logo, /*#__PURE__*/ React.createElement("h1", { className: "font-rock text-lg mb-4 text-center", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated nature", className: "w-[1024px] h-[1024px] object-cover cursor-pointer transform transition-transform", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }), footer); } function NatureTranslatorStory() { const imageUrl = '/path/to/nature-image.jpg'; const title = 'Translate English to Japanese using ChatGPT'; const logoUrl = '/path/to/logo.png'; const footerUrl = 'https://twitter.com'; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NatureTranslator, { imageUrl: imageUrl, title: title, logoUrl: logoUrl, footerUrl: footerUrl, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this })); } function MainComponent() { const imageUrl = '/path/to/nature-image.jpg'; const stableDiffusionUrl = '/integrations/stable-diffusion-v-3/?prompt=a+nature+scene&width=1920&height=1080'; const title = 'Translate English to Japanese using ChatGPT'; const footerUrl = 'https://twitter.com'; const logoUrl = '/path/to/logo.png'; const [stableDiffusionImageUrl, setStableDiffusionImageUrl] = React.useState(''); React.useEffect(()=>{ fetch(stableDiffusionUrl, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ if (data && data.data && data.data.length > 0) { setStableDiffusionImageUrl(data.data[0]); } }); }, [ stableDiffusionUrl ]); return /*#__PURE__*/ React.createElement("div", { className: "relative flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoUrl, alt: "Company logo in the corner", className: "absolute top-0 left-0 w-12 h-12 m-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "font-rock-3d text-lg mb-4 text-center", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("button", { className: "mb-4 px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "Translate"), /*#__PURE__*/ React.createElement(NatureTranslator, { imageUrl: imageUrl, title: "", logoUrl: "", footerUrl: "", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), stableDiffusionImageUrl && /*#__PURE__*/ React.createElement(NatureTranslator, { imageUrl: stableDiffusionImageUrl, title: "", logoUrl: "", footerUrl: footerUrl, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this })); }