up

package-lock.json

@@ -39,6 +39,7 @@
         "date-fns": "^2.30.0",
         "eslint": "8.45.0",
         "eslint-config-next": "13.4.10",
+        "html2canvas": "^1.4.1",
         "lucide-react": "^0.260.0",
         "next": "13.4.10",
         "pick": "^0.0.1",
@@ -4200,6 +4201,14 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -4820,6 +4829,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-to-react-native": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
@@ -6026,6 +6043,18 @@
       "resolved": "https://registry.npmjs.org/hsl-to-rgb-for-reals/-/hsl-to-rgb-for-reals-1.1.1.tgz",
       "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg=="
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
@@ -8109,6 +8138,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -8532,6 +8569,14 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",

package.json

@@ -40,6 +40,7 @@
     "date-fns": "^2.30.0",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.10",
+    "html2canvas": "^1.4.1",
     "lucide-react": "^0.260.0",
     "next": "13.4.10",
     "pick": "^0.0.1",

src/app/interface/bottom-bar/index.tsx

@@ -0,0 +1,27 @@
+import { useStore } from "@/app/store"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export function BottomBar() {
+  const download = useStore(state => state.download)
+  const isGeneratingStory = useStore(state => state.isGeneratingStory)
+  const prompt = useStore(state => state.prompt)
+  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
+
+  const remainingImages = Object.values(panelGenerationStatus).reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
+    
+  return (
+    <div className={cn(
+      `fixed bottom-8 right-8`,
+      `flex flex-row`,
+      `animation-all duration-300 ease-in-out`,
+      isGeneratingStory ? `scale-0 opacity-0` : ``,
+    )}>
+      <div>
+        <Button onClick={download} disabled={!prompt?.length}>{
+          remainingImages ? `${remainingImages} remaining..` : `Download`
+        }</Button>
+      </div>
+    </div>
+  )
+}

src/app/interface/grid/index.tsx

@@ -7,6 +7,7 @@ import { useStore } from "@/app/store"
 
 export function Grid({ children, className }: { children: ReactNode; className: string }) {
   const zoomLevel = useStore(state => state.zoomLevel)
+
   return (
     <div
       // the "fixed" width ensure our comic keeps a consistent ratio
@@ -23,4 +24,3 @@ export function Grid({ children, className }: { children: ReactNode; className:
   )
 }
 
-

src/app/interface/zoom/index.tsx

@@ -5,11 +5,14 @@ import { cn } from "@/lib/utils"
 export function Zoom() {
   const zoomLevel = useStore((state) => state.zoomLevel)
   const setZoomLevel = useStore((state) => state.setZoomLevel)
+  const isGeneratingStory = useStore((state) => state.isGeneratingStory)
 
   return (
     <div className={cn(
       // `fixed flex items-center justify-center bottom-8 top-32 right-8 z-10 h-screen`,
-      `fixed flex flex-col items-center bottom-8 top-32 md:top-20 right-6 z-10`
+      `fixed flex flex-col items-center bottom-8 top-32 md:top-20 right-6 z-10`,
+      `animation-all duration-300 ease-in-out`,
+      isGeneratingStory ? `scale-0 opacity-0` : ``,
     )}>
       <div className="font-mono text-xs pb-1 text-stone-700">
         Zoom

src/app/main.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useTransition } from "react"
+import { useEffect, useRef, useTransition } from "react"
 import { useSearchParams } from "next/navigation"
 
 import { PresetName, defaultPreset, getPreset } from "@/app/engine/presets"
@@ -12,6 +12,7 @@ import { getRandomLayoutName, layouts } from "./layouts"
 import { useStore } from "./store"
 import { Zoom } from "./interface/zoom"
 import { getStory } from "./queries/getStory"
+import { BottomBar } from "./interface/bottom-bar"
 
 export default function Main() {
   const [_isPending, startTransition] = useTransition()
@@ -40,6 +41,15 @@ export default function Main() {
 
   const zoomLevel = useStore(state => state.zoomLevel)
 
+  const setPage = useStore(state => state.setPage)
+  const pageRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const element = pageRef.current
+    if (!element) { return }
+    setPage(element)
+  }, [pageRef.current])
+
   // react to URL params
   useEffect(() => {
     if (requestedPreset && requestedPreset !== preset.label) { setPreset(getPreset(requestedPreset)) }
@@ -103,7 +113,7 @@ export default function Main() {
       )}>
         <div className="flex flex-col items-center w-full">
           <div
-
+            ref={pageRef}
             className={cn(
               `flex flex-col items-center justify-start`,
 
@@ -126,6 +136,7 @@ export default function Main() {
         </div>
       </div>
       <Zoom />
+      <BottomBar />
       <div className={cn(
         `z-20 fixed inset-0`,
         `flex flex-row items-center justify-center`,

src/app/store/index.ts

@@ -5,6 +5,7 @@ import { create } from "zustand"
 import { FontName } from "@/lib/fonts"
 import { Preset, getPreset } from "@/app/engine/presets"
 import { LayoutName, getRandomLayoutName } from "../layouts"
+import html2canvas from "html2canvas"
 
 export const useStore = create<{
   prompt: string
@@ -14,6 +15,7 @@ export const useStore = create<{
   captions: Record<string, string>
   layout: LayoutName
   zoomLevel: number
+  page: HTMLDivElement
   isGeneratingStory: boolean
   panelGenerationStatus: Record<number, boolean>
   isGeneratingText: boolean
@@ -25,9 +27,11 @@ export const useStore = create<{
   setLayout: (layout: LayoutName) => void
   setCaption: (panelId: number, caption: string) => void
   setZoomLevel: (zoomLevel: number) => void
+  setPage: (page: HTMLDivElement) => void
   setGeneratingStory: (isGeneratingStory: boolean) => void
   setGeneratingImages: (panelId: number, value: boolean) => void
   setGeneratingText: (isGeneratingText: boolean) => void
+  download: () => void
 }>((set, get) => ({
   prompt: "",
   font: "actionman",
@@ -36,6 +40,7 @@ export const useStore = create<{
   captions: {},
   layout: getRandomLayoutName(),
   zoomLevel: 50,
+  page: undefined as unknown as HTMLDivElement,
   isGeneratingStory: false,
   panelGenerationStatus: {},
   isGeneratingText: false,
@@ -81,6 +86,10 @@ export const useStore = create<{
   },
   setLayout: (layout: LayoutName) => set({ layout }),
   setZoomLevel: (zoomLevel: number) =>  set({ zoomLevel }),
+  setPage: (page: HTMLDivElement) => {
+    if (!page) { return }
+    set({ page })
+  },
   setGeneratingStory: (isGeneratingStory: boolean) => set({ isGeneratingStory }),
   setGeneratingImages: (panelId: number, value: boolean) => {
 
@@ -97,4 +106,26 @@ export const useStore = create<{
     })
   },
   setGeneratingText: (isGeneratingText: boolean) => set({ isGeneratingText }),
+  download: async () => {
+    console.log("download called!")
+    const { page } = get()
+    console.log("page:", page)
+    if (!page) { return }
+    
+    const canvas = await html2canvas(page)
+    console.log("canvas:", canvas)
+
+    const data = canvas.toDataURL('image/jpg')
+    const link = document.createElement('a')
+
+    if (typeof link.download === 'string') {
+      link.href = data
+      link.download = 'comic.jpg'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    } else {
+      window.open(data)
+    }
+  }
 }))