fix the jpg generator

src/app/interface/page/index.tsx

@@ -1,6 +1,7 @@
 import { allLayouts } from "@/app/layouts"
 import { useStore } from "@/app/store"
 import { cn } from "@/lib/utils"
+import { useEffect, useRef } from "react"
 
 export function Page({ page }: { page: number }) {
   const zoomLevel = useStore(state => state.zoomLevel)
@@ -21,8 +22,18 @@ export function Page({ page }: { page: number }) {
   }, [prompt])
   */
 
+  const setPage = useStore(state => state.setPage)
+  const pageRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const element = pageRef.current
+    if (!element) { return }
+    setPage(element)
+  }, [pageRef.current])
+  
   return (
     <div
+      ref={pageRef}
       className={cn(
         `w-full`,
         // we are trying to reach a "book" look

src/app/interface/panel/index.tsx

@@ -89,7 +89,7 @@ export function Panel({
         return
       }
     })
-  }, 1000 * panel)
+  }, 2000 * panel)
   }, [prompt, width, height])
 
 

src/app/main.tsx

@@ -41,17 +41,8 @@ export default function Main() {
 
   const zoomLevel = useStore(state => state.zoomLevel)
 
-  const setPage = useStore(state => state.setPage)
-  const pageRef = useRef<HTMLDivElement>(null)
-
   const [waitABitMore, setWaitABitMore] = useState(false)
 
-  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)) }
@@ -121,7 +112,6 @@ export default function Main() {
         fonts.actionman.className
       )}>
         <div
-          ref={pageRef}
           className={cn(
             `flex flex-col w-full`,
             zoomLevel > 105 ? `items-start` : `items-center`