diff --git a/components/output.tsx b/components/output.tsx index d2d510a..d903726 100644 --- a/components/output.tsx +++ b/components/output.tsx @@ -27,7 +27,7 @@ export const Output: React.FC = ({ children }) => { }; export const Pre = styled("pre", { - display: "flex", + // display: "flex", justifyContent: "center", alignItems: "center", textAlign: "center", diff --git a/pages/index.tsx b/pages/index.tsx index b45efe3..65f2c99 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -81,6 +81,39 @@ export default function Home() { return response } + const downloadImageJpg = () => { + if (!output) return; + const a = document.createElement("a"); + a.href = output; + a.download = `${output}.jpg`; + a.click(); + }; + + const downloadImagePng = () => { + if (!output) return; + const a = document.createElement("a"); + a.href = output; + a.download = `${output}.png`; + a.click(); + }; + + const Button = styled("button", { + all: "unset", + boxSizing: "border-box", + display: "inline-flex", + alignItems: "center", + justifyContent: "center", + borderRadius: 4, + padding: "0 15px", + fontSize: 15, + lineHeight: 1, + fontWeight: 500, + height: 35, + width: "100%", + backgroundColor: "$purple500", + color: "white", + }); + return ( @@ -96,7 +129,17 @@ export default function Home() { isGenerating={isGenerating} /> - {output && Generated Image} + { + output && (<> + Generated Image + + + ) + }