Add download button

README.md

@@ -23,7 +23,6 @@
 
 ## Future Tasks
 
-- [ ] Show a download button so people can get their images
 - [ ] Add auth and rate limit by email instead of IP
 - [ ] Show people how many credits they have left
 - [ ] Build an image gallery of cool generations w/ their prompts

app/page.tsx

@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import { DownloadButton } from "@/components/ui/download-button";
 import imagePlaceholder from "@/public/image-placeholder.png";
 import { useQuery } from "@tanstack/react-query";
 import { useDebounce } from "@uidotdev/usehooks";
@@ -106,7 +107,9 @@ export default function Home() {
                 className="w-full resize-none border-gray-300 border-opacity-50 bg-gray-400 px-4 text-base placeholder-gray-300"
               />
               <div
-                className={`${isFetching || isDebouncing ? "flex" : "hidden"} absolute bottom-3 right-3 items-center justify-center`}
+                className={`${
+                  isFetching || isDebouncing ? "flex" : "hidden"
+                } absolute bottom-3 right-3 items-center justify-center`}
               >
                 <Spinner className="size-4" />
               </div>
@@ -148,9 +151,16 @@ export default function Home() {
                 width={1024}
                 height={768}
                 src={`data:image/png;base64,${activeImage.b64_json}`}
-                alt=""
-                className={`${isFetching ? "animate-pulse" : ""} max-w-full rounded-lg object-cover shadow-sm shadow-black`}
+                alt="Generated image"
+                className={`${
+                  isFetching ? "animate-pulse" : ""
+                } max-w-full rounded-lg object-cover shadow-sm shadow-black`}
               />
+              <div className="mt-4">
+                <DownloadButton
+                  imageUrl={`data:image/png;base64,${activeImage.b64_json}`}
+                />
+              </div>
             </div>
 
             <div className="mt-4 flex gap-4 overflow-x-scroll pb-4">

components/ui/download-button.tsx

@@ -0,0 +1,37 @@
+import { Button } from "./button";
+import { ArrowDownToLine } from "lucide-react";
+
+interface DownloadButtonProps {
+  imageUrl: string;
+  fileName?: string;
+}
+
+export function DownloadButton({ imageUrl, fileName = "generated-image" }: DownloadButtonProps) {
+  const handleDownload = async () => {
+    try {
+      const response = await fetch(imageUrl);
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${fileName}.png`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Error downloading image:', error);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleDownload}
+      className="flex items-center gap-2"
+      variant="outline"
+    >
+      <ArrowDownToLine className="h-4 w-4" />
+      Download Image
+    </Button>
+  );
+}