working to add a long-requested feature: panel reload

.env

@@ -11,6 +11,12 @@ RENDERING_ENGINE="INFERENCE_API"
 # - OPENAI
 LLM_ENGINE="INFERENCE_API"
 
+# Not implemented for the Inference API yet - you can submit a PR if you have some ideas
+NEXT_PUBLIC_CAN_UPSCALE="false"
+
+# Not implemented for the Inference API yet - you can submit a PR if you have some ideas
+NEXT_PUBLIC_CAN_REDRAW="false"
+
 # Set to "true" to create artificial delays and smooth out traffic
 NEXT_PUBLIC_ENABLE_RATE_LIMITER="false"
 

package-lock.json

@@ -49,6 +49,7 @@
         "react": "18.2.0",
         "react-circular-progressbar": "^2.1.0",
         "react-dom": "18.2.0",
+        "react-icons": "^4.11.0",
         "react-virtualized-auto-sizer": "^1.0.20",
         "replicate": "^0.17.0",
         "sbd": "^1.0.19",
@@ -7908,6 +7909,14 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -50,6 +50,7 @@
     "react": "18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.11.0",
     "react-virtualized-auto-sizer": "^1.0.20",
     "replicate": "^0.17.0",
     "sbd": "^1.0.19",

src/app/engine/render.ts

@@ -136,6 +136,8 @@ export async function newRender({
   
       // Recommendation: handle errors
       if (res.status !== 200) {
+        const content = await res.text()
+        console.error(content)
         // This will activate the closest `error.js` Error Boundary
         throw new Error('Failed to fetch data')
       }

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

@@ -101,11 +101,13 @@ ${uploadUrl
       `print:hidden`,
       `fixed bottom-2 md:bottom-4 left-2 right-0 md:left-3 md:right-1`,
       `flex flex-row`,
-      `justify-between`
+      `justify-between`,
+      `pointer-events-none`
     )}>
       <div className={cn(
         `flex flex-row`,
         `items-end`,
+        `pointer-events-auto`,
         `animation-all duration-300 ease-in-out`,
         isGeneratingStory ? `scale-0 opacity-0` : ``,
         `space-x-3`,
@@ -115,20 +117,21 @@ ${uploadUrl
       </div>
       <div className={cn(
       `flex flex-row`,
+      `pointer-events-auto`,
       `animation-all duration-300 ease-in-out`,
       isGeneratingStory ? `scale-0 opacity-0` : ``,
       `space-x-3`,
       `scale-[0.9]`
     )}>
       <div>
-        <Button
+        {process.env.NEXT_PUBLIC_CAN_UPSCALE === "true" ? <Button
           onClick={handleUpscale}
           disabled={!prompt?.length || remainingImages > 0 || isUpscaling || !Object.values(upscaleQueue).length}
         >
           {isUpscaling
             ? `${allStatus.length - Object.values(upscaleQueue).length}/${allStatus.length} ⌛`
             : "Upscale"}
-        </Button>
+        </Button> : null}
       </div>
         <div>
           <Button
@@ -152,7 +155,7 @@ ${uploadUrl
            </Button>
         </div>
         <div>
-          <Button
+          {process.env.NEXT_PUBLIC_ENABLE_COMMUNITY_SHARING === "true" ? <Button
             onClick={handleShare}
             disabled={!prompt?.length}
             className="space-x-2"
@@ -162,7 +165,7 @@ ${uploadUrl
               <span className="hidden md:inline">Share to community</span>
               <span className="inline md:hidden">Share</span>
             </div>
-          </Button>
+          </Button> : null}
         </div>
       </div>
     </div>

src/app/interface/panel/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useRef, useState, useTransition } from "react"
-// import AutoSizer from "react-virtualized-auto-sizer"
+import { RxReload } from "react-icons/rx"
 
 import { RenderedScene } from "@/types"
 
@@ -12,9 +12,6 @@ import { cn } from "@/lib/utils"
 import { getInitialRenderedScene } from "@/lib/getInitialRenderedScene"
 import { Progress } from "@/app/interface/progress"
 
-// import { see } from "@/app/engine/caption"
-// import { replaceTextInSpeechBubbles } from "@/lib/replaceTextInSpeechBubbles"
-
 export function Panel({
   panel,
   className = "",
@@ -28,13 +25,13 @@ export function Panel({
  }) {
   const panelId = `${panel}`
 
+  const [mouseOver, setMouseOver] = useState(false)
   const ref = useRef<HTMLImageElement>(null)
   const font = useStore(state => state.font)
   const preset = useStore(state => state.preset)
 
   const setGeneratingImages = useStore(state => state.setGeneratingImages)
 
-  const [imageWithText, setImageWithText] = useState("")
   const panels = useStore(state => state.panels)
   const prompt = panels[panel] || ""
 
@@ -63,9 +60,8 @@ export function Panel({
 
   const delay = enableRateLimiter ? (3000 + (1000 * panel)) : 1000
 
-  // since this run in its own loop, we need to use references everywhere
-  // but perhaps this could be refactored
-  useEffect(() => {
+
+  const startImageGeneration = ({ prompt, width, height }: { prompt: string, width: number, height: number}) => {
     // console.log("Panel prompt: "+ prompt)
     if (!prompt?.length) { return }
 
@@ -113,6 +109,12 @@ export function Panel({
         }
       })
     }, enableRateLimiter ? 2000 * panel : 0)
+  }
+
+  // since this run in its own loop, we need to use references everywhere
+  // but perhaps this could be refactored
+  useEffect(() => {
+    startImageGeneration({ prompt, width, height })
   }, [prompt, width, height])
 
 
@@ -215,27 +217,10 @@ export function Panel({
     `print:border-[1.5px] print:shadow-none`,
   )
 
-
-  /*
-  text detection (doesn't work)
-  useEffect(() => {
-    const fn = async () => {
-      if (!rendered.assetUrl || !ref.current) {
-        return
-      }
-
-      const result = await replaceTextInSpeechBubbles(
-        rendered.assetUrl,
-        "Lorem ipsum dolor sit amet, dolor ipsum. Sit amet? Ipsum! Dolor!!!"
-      )
-      if (result) {
-        setImageWithText(result)
-      }
-    }
-    fn()
-
-  }, [rendered.assetUrl, ref.current])
-  */
+  const handleReload = () => {
+    console.log(`Asked to reload panel ${panelId}`)
+    startImageGeneration({ prompt, width, height })
+  }
 
   if (prompt && !rendered.assetUrl) {
     return (
@@ -254,9 +239,11 @@ export function Panel({
       frameClassName,
       { "grayscale": preset.color === "grayscale" },
       className
-    )}>
+    )}
+    onMouseEnter={() => setMouseOver(true)}
+    onMouseLeave={() => setMouseOver(false)}
+    >
         <div className={cn(
-        ``,
         `bg-stone-50`,
         `border-stone-800`,
         `transition-all duration-200 ease-in-out`,
@@ -296,7 +283,7 @@ export function Panel({
         {rendered.assetUrl &&
         <img
           ref={ref}
-          src={imageWithText || rendered.assetUrl}
+          src={rendered.assetUrl}
           width={width}
           height={height}
           alt={rendered.alt}
@@ -305,6 +292,26 @@ export function Panel({
             // showCaptions ? `-mt-11` : ''
             )}
         />}
+        {process.env.NEXT_PUBLIC_CAN_REDRAW === "true" ? <div
+        className={cn(`relative -mt-14 ml-4`,)}>
+          <div className="flex flex-row">
+            <div
+              onClick={rendered.status === "completed" ? handleReload : undefined}
+              className={cn(
+                `bg-stone-100 rounded-lg`,
+                `flex flex-row space-x-2 items-center`,
+                `py-2 px-3 cursor-pointer`,
+                `transition-all duration-200 ease-in-out`,
+                rendered.status === "completed" ? "opacity-95" : "opacity-50",
+                mouseOver && rendered.assetUrl ? `scale-95 hover:scale-100 hover:opacity-100`: `scale-0`
+              )}>
+              <RxReload
+                className="w-5 h-5"
+              />
+              <span className="text-base">Redraw</span>
+            </div>
+          </div>
+        </div> : null}
     </div>
   )
 }