better captions

package-lock.json

@@ -49,7 +49,9 @@
         "postcss": "8.4.26",
         "react": "18.2.0",
         "react-circular-progressbar": "^2.1.0",
+        "react-contenteditable": "^3.3.7",
         "react-dom": "18.2.0",
+        "react-draggable": "^4.4.6",
         "react-icons": "^4.11.0",
         "react-konva": "^18.2.10",
         "react-virtualized-auto-sizer": "^1.0.20",
@@ -5947,6 +5949,18 @@
         "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-contenteditable": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.7.tgz",
+      "integrity": "sha512-GA9NbC0DkDdpN3iGvib/OMHWTJzDX2cfkgy5Tt98JJAbA3kLnyrNbBIpsSpPpq7T8d3scD39DHP+j8mAM7BIfQ==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "prop-types": "^15.7.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.3"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -5967,6 +5981,27 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz",
+      "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
+    "node_modules/react-draggable/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",

package.json

@@ -50,7 +50,9 @@
     "postcss": "8.4.26",
     "react": "18.2.0",
     "react-circular-progressbar": "^2.1.0",
+    "react-contenteditable": "^3.3.7",
     "react-dom": "18.2.0",
+    "react-draggable": "^4.4.6",
     "react-icons": "^4.11.0",
     "react-konva": "^18.2.10",
     "react-virtualized-auto-sizer": "^1.0.20",

src/app/interface/panel/bubble/index.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import { ReactNode, useRef } from "react"
+
+// import Draggable from "react-draggable"
+import ContentEditable, { ContentEditableEvent } from "react-contenteditable"
+
+import { useStore } from "@/app/store"
+import { cn } from "@/lib/utils"
+
+export function Bubble({ children, onChange }: {
+  children: ReactNode;
+  onChange: (newCaption: string) => void
+}) {
+   
+  const ref = useRef<HTMLDivElement>(null)
+  const zoomLevel = useStore(state => state.zoomLevel)
+  const showCaptions = useStore(state => state.showCaptions)
+
+  const text = useRef(`${children || ''}`)
+
+  const handleChange = (evt: ContentEditableEvent) => {
+    // hmm no, this returns us some rich HTML - but it's too early for that
+    // text.current = evt.target.value
+
+    text.current = `${ref.current?.innerText || ''}`
+  };
+
+  const handleBlur = () => {
+    onChange(text.current)
+  };
+
+  // we can wrap this bubble in a <Draggable>
+  // but the zoom will break it, so we will need to figure out something
+  return (
+    <div className={cn(
+      `bottom-0`,
+      // `cursor-grab`,
+      `absolute flex w-full items-center justify-center`,
+      zoomLevel > 200 ? `p-4 md:p-8` :
+      zoomLevel > 180 ? `p-[14px] md:p-8` :
+      zoomLevel > 160 ? `p-[12px] md:p-[28px]` :
+      zoomLevel > 140 ? `p-[10px] md:p-[26px]` :
+      zoomLevel > 120 ? `p-2 md:p-6` :
+      zoomLevel > 100 ? `p-1.5 md:p-[20px]` :
+      zoomLevel > 90 ? `p-1.5 md:p-4` :
+      zoomLevel > 40 ? `p-1 md:p-2` :
+      `p-0.5 md:p-2`,
+    )}>
+      <div
+        ref={ref}
+        className={cn(
+        `bg-stone-50`,
+        `border-stone-800`,
+        `transition-all duration-200 ease-in-out`,
+        zoomLevel > 140 ? `border-[1.5px] md:border-[2px]` :
+        zoomLevel > 120 ? `border-[1px] md:border-[1.5px]` :
+        zoomLevel > 90 ? `border-[0.5px] md:border-[1px]` :
+        zoomLevel > 40 ? `border-transparent md:border-[0.5px]` :
+        `border-transparent md:border-transparent`,
+        `print:border-[1px]`,
+
+        zoomLevel > 200 ? `p-4 md:p-8` :
+        zoomLevel > 180 ? `p-[14px] md:p-6` :
+        zoomLevel > 160 ? `p-3 md:p-5` :
+        zoomLevel > 140 ? `p-[10px] md:p-4` :
+        zoomLevel > 120 ? `p-2 md:p-3` :
+        zoomLevel > 100 ? `p-1.5 md:p-2` :
+        zoomLevel > 90 ? `p-1 md:p-1` :
+        zoomLevel > 40 ? `p-0.5 md:p-0.5` :
+        `p-0.5 md:p-0.5]`,
+
+        zoomLevel > 220 ? `text-base md:text-lg` :
+        zoomLevel > 200 ? `text-sm md:text-md` :
+        zoomLevel > 180 ? `text-xs md:text-base` :
+        zoomLevel > 140 ? `text-2xs md:text-sm` :
+        zoomLevel > 120 ? `text-3xs md:text-xs` :
+        zoomLevel > 100 ? `text-4xs md:text-2xs` :
+        zoomLevel > 90 ? `text-5xs md:text-3xs` :
+        zoomLevel > 40 ? `text-6xs md:text-4xs`
+        : `text-7xs md:text-5xs`,
+
+        zoomLevel > 140 ? `rounded-lg md:rounded-xl` :
+        zoomLevel > 120 ? `rounded-md md:rounded-lg` :
+        zoomLevel > 90 ? `rounded-sm md:rounded-md` :
+        zoomLevel > 40 ? `rounded-xs md:rounded-sm` :
+        `rounded-none md:rounded-none`,
+
+        showCaptions ? (
+          zoomLevel > 90 ? `block` : `hidden md:block`
+        ) : `hidden`,
+
+        `text-center`
+      )}>
+        <ContentEditable
+          html={text.current}
+          className="line-clamp-3"
+          onBlur={handleBlur}
+          onChange={handleChange} 
+        />
+      </div>
+    </div>
+  )
+}

src/app/interface/panel/{bubble.tsx → bubble/legacy.tsx}

@@ -2,7 +2,7 @@ import { ReactNode } from "react"
 
 import { cn } from "@/lib/utils"
 
-export function Bubble({
+export function BubbleLegacy({
   children,
   className
 }: {

src/app/interface/panel/index.tsx

@@ -12,6 +12,7 @@ import { cn } from "@/lib/utils"
 import { getInitialRenderedScene } from "@/lib/getInitialRenderedScene"
 import { Progress } from "@/app/interface/progress"
 import { EditModal } from "../edit-modal"
+import { Bubble } from "./bubble"
 
 export function Panel({
   page,
@@ -59,9 +60,9 @@ export function Panel({
 
   const captions = useStore(state => state.captions)
   const caption = captions[panelIndex] || ""
-
+  const setPanelCaption = useStore(state => state.setPanelCaption)
+  
   const zoomLevel = useStore(state => state.zoomLevel)
-  const showCaptions = useStore(state => state.showCaptions)
 
   const addToUpscaleQueue = useStore(state => state.addToUpscaleQueue)
 
@@ -251,6 +252,7 @@ export function Panel({
 
   const frameClassName = cn(
     //`flex`,
+    `relative`,
     `w-full h-full`,
     `border-stone-800`,
     `transition-all duration-200 ease-in-out`,
@@ -275,6 +277,10 @@ export function Panel({
     setPanelPrompt(newPrompt, panelIndex)
   }
 
+  const handleSaveCaption = (newCaption: string) => {
+    console.log(`Asked to save a new caption: ${newCaption}`)
+    setPanelCaption(newCaption, panelIndex)
+  }
   if (prompt && !rendered.assetUrl) {
     return (
       <div className={cn(
@@ -296,61 +302,16 @@ export function Panel({
     onMouseEnter={() => setMouseOver(true)}
     onMouseLeave={() => setMouseOver(false)}
     >
-        <div className={cn(
-        `bg-stone-50`,
-        `border-stone-800`,
-        `transition-all duration-200 ease-in-out`,
-        zoomLevel > 140 ? `border-b-[2px] md:border-b-[4px]` :
-        zoomLevel > 120 ? `border-b-[1.5px] md:border-b-[3px]` :
-        zoomLevel > 90 ? `border-b-[1px] md:border-b-[2px]` :
-        zoomLevel > 40 ? `border-b-[0.5px] md:border-b-[1px]` :
-        `border-transparent md:border-b-[0.5px]`,
-        `print:border-b-[1.5px]`,
-        `truncate`,
-
-        zoomLevel > 200 ? `p-4 md:p-8` :
-        zoomLevel > 180 ? `p-[14px] md:p-8` :
-        zoomLevel > 160 ? `p-[12px] md:p-[28px]` :
-        zoomLevel > 140 ? `p-[10px] md:p-[26px]` :
-        zoomLevel > 120 ? `p-2 md:p-6` :
-        zoomLevel > 100 ? `p-1.5 md:p-[20px]` :
-        zoomLevel > 90 ? `p-1.5 md:p-4` :
-        zoomLevel > 40 ? `p-1 md:p-2` :
-        `p-0.5 md:p-2`,
-
-        zoomLevel > 220 ? `text-xl md:text-4xl` :
-        zoomLevel > 200 ? `text-lg md:text-3xl` :
-        zoomLevel > 180 ? `text-md md:text-2xl` :
-        zoomLevel > 140 ? `text-2xs md:text-2xl` :
-        zoomLevel > 120 ? `text-3xs md:text-xl` :
-        zoomLevel > 100 ? `text-4xs md:text-lg` :
-        zoomLevel > 90 ? `text-5xs md:text-sm` :
-        zoomLevel > 40 ? `md:text-xs` : `md:text-2xs`,
-
-        showCaptions ? (
-          zoomLevel > 90 ? `block` : `hidden md:block`
-        ) : `hidden`,
-      )}
-      >{caption || ""}
-        </div>
-        {rendered.assetUrl &&
-        <img
-          ref={ref}
-          src={rendered.assetUrl}
-          width={width}
-          height={height}
-          alt={rendered.alt}
+      {(prompt && rendered.assetUrl && caption)
+        ? <Bubble onChange={handleSaveCaption}>{caption}</Bubble>
+        : null}
+      <div
           className={cn(
-            `comic-panel w-full h-full object-cover max-w-max`,
-            // showCaptions ? `-mt-11` : ''
-            )}
-        />}
-        {
-          // there is an issue, this env check doesn't work..
-        // process.env.NEXT_PUBLIC_CAN_REDRAW === "true" ?
-         <div
-        className={cn(`relative -mt-8 ml-2 md:-mt-12md:ml-3 lg:-mt-14 lg:ml-4`,)}>
-          <div className="flex flex-row space-x-2">
+            `absolute`,
+            `top-0 w-full`,
+            `flex justify-between`,
+            `p-2 space-x-2`
+            )}>
             <div
               onClick={rendered.status === "completed" ? handleReload : undefined}
               className={cn(
@@ -364,7 +325,13 @@ export function Panel({
               <RxReload
                 className="w-3 h-3 md:w-4 md:h-4 lg:w-5 lg:h-5"
               />
-              <span className="text-2xs md:text-xs lg:text-sm">Redraw</span>
+              <span className={cn(
+                zoomLevel > 80
+                ? `text-xs md:text-sm lg:text-base` :
+                zoomLevel > 40
+                ? `text-2xs md:text-xs lg:text-sm` :
+                  `text-3xs md:text-2xs lg:text-xs`
+              )}>Redraw</span>
             </div>
             <EditModal
               isEnabled={rendered.status === "completed"}
@@ -383,14 +350,30 @@ export function Panel({
                 <RxPencil2
                   className="w-3 h-3 md:w-4 md:h-4 lg:w-5 lg:h-5"
                 />
-                <span className="text-2xs md:text-xs lg:text-sm">Edit</span>
+                <span className={cn(
+                  zoomLevel > 80
+                  ? `text-xs md:text-sm lg:text-base` :
+                  zoomLevel > 40
+                  ? `text-2xs md:text-xs lg:text-sm` :
+                    `text-3xs md:text-2xs lg:text-xs`
+                  )}>Edit</span>
               </div>
                         
             </EditModal>
-          </div>
-        </div> 
-        //: null
-      }
+       </div>
+
+      {rendered.assetUrl &&
+        <img
+          ref={ref}
+          src={rendered.assetUrl}
+          width={width}
+          height={height}
+          alt={rendered.alt}
+          className={cn(
+            `comic-panel w-full h-full object-cover max-w-max`,
+            // showCaptions ? `-mt-11` : ''
+            )}
+        />}
     </div>
   )
 }

src/app/queries/getStory.ts

@@ -27,10 +27,10 @@ export const getStory = async ({
       role: "system",
       content: [
         `You are a writer specialized in ${preset.llmPrompt}`,
-        `Please write detailed drawing instructions and a one-sentence short caption for the ${nbTotalPanels} panels of a new silent story. Please make sure each of the ${nbTotalPanels} panels include info about character gender, age, origin, clothes, colors, location, lights, etc.`,
+        `Please write detailed drawing instructions and a short (1 or 2 sentences long) speech caption for the ${nbTotalPanels} panels of a new story. Please make sure each of the ${nbTotalPanels} panels include info about character gender, age, origin, clothes, colors, location, lights, etc.`,
         `Give your response as a VALID JSON array like this: \`Array<{ panel: number; instructions: string; caption: string}>\`.`,
         // `Give your response as Markdown bullet points.`,
-        `Be brief in your ${nbTotalPanels} instructions and captions, don't add your own comments. Be straight to the point, and never reply things like "Sure, I can.." etc. Reply using valid JSON.`
+        `Be brief in your ${nbTotalPanels} instructions and narrative captions, don't add your own comments. Be straight to the point, and never reply things like "Sure, I can.." etc. Reply using valid JSON.`
       ].filter(item => item).join("\n")
     },
     {

src/app/store/index.ts

@@ -40,6 +40,7 @@ export const useStore = create<{
   setLayout: (layout: LayoutName) => void
   setLayouts: (layouts: LayoutName[]) => void
   setCaptions: (captions: string[]) => void
+  setPanelCaption: (newCaption: string, index: number) => void
   setZoomLevel: (zoomLevel: number) => void
   setPage: (page: HTMLDivElement) => void
   setGeneratingStory: (isGeneratingStory: boolean) => void
@@ -135,6 +136,14 @@ export const useStore = create<{
       showCaptions,
     })
   },
+  setPanelCaption: (newCaption, index) => {
+    const { captions } = get()
+    set({
+      captions: captions.map((c, i) => (
+        index === i ? newCaption : c
+      ))
+    })
+  },
   setLayout: (layoutName: LayoutName) => {
 
     const { nbPages } = get()