show speech bubbles by default

src/app/interface/about/index.tsx

@@ -28,7 +28,7 @@ export function About() {
       <DialogTrigger asChild>
         <Button variant="outline">
           <span className="hidden md:inline">About</span>
-          <span className="inline md:hidden">About</span>
+          <span className="inline md:hidden">?</span>
         </Button>
       </DialogTrigger>
       <DialogContent className="w-full sm:max-w-[500px] md:max-w-[600px] overflow-y-scroll h-[100vh] sm:h-[550px]">

src/app/interface/advert/index.tsx

@@ -9,7 +9,7 @@ export function Advert() {
         window.open("https://huggingface.co/spaces/jbilcke-hf/ai-stories-factory", "_blank")
       }}>
       <span className="hidden md:inline">Make AI stories</span>
-      <span className="inline md:hidden">Make AI stories</span>
+      <span className="inline md:hidden">...</span>
     </Button>
   )
 }

src/app/interface/discord/index.tsx

@@ -13,7 +13,8 @@ export function Discord() {
       href="https://discord.gg/AEruz9B92B"
       target="_blank">
       <div><FaDiscord size={24} /></div>
-      <div className="text-sm ml-1.5">Discord</div>
+      <span className="text-sm ml-1.5 hidden md:inline">Discord</span>
+      <span className="text-sm ml-1.5 inline md:hidden"></span>
     </a>
   )
 }

src/app/interface/top-menu/index.tsx

@@ -28,6 +28,7 @@ import { localStorageKeys } from "../settings-dialog/localStorageKeys"
 import { defaultSettings } from "../settings-dialog/defaultSettings"
 import { AuthWall } from "../auth-wall"
 import { SelectLayout } from "../select-layout"
+import { getLocalStorageShowSpeeches } from "@/lib/getLocalStorageShowSpeeches"
 
 export function TopMenu() {
   const searchParams = useSearchParams()
@@ -68,6 +69,7 @@ export function TopMenu() {
     requestedStoryPrompt
   )
 
+
   // TODO should be in the store
   const [draftPromptA, setDraftPromptA] = useState(lastDraftPromptA)
   const [draftPromptB, setDraftPromptB] = useState(lastDraftPromptB)
@@ -91,6 +93,11 @@ export function TopMenu() {
   useEffect(() => { if (lastDraftPromptB !== draftPromptB) { setLastDraftPromptB(draftPromptB) } }, [draftPromptB])
   useEffect(() => { if (lastDraftPromptB !== draftPromptB) { setDraftPromptB(lastDraftPromptB) } }, [lastDraftPromptB])
 
+  // we need a use effect to properly read the local storage
+  useEffect(() => {
+    setShowSpeeches(getLocalStorageShowSpeeches(true))
+  }, [])
+
   const handleSubmit = () => {
     if (enableOAuthWall && hasGeneratedAtLeastOnce && !isLoggedIn) {
       setShowAuthWall(true)
@@ -169,18 +176,19 @@ export function TopMenu() {
           onCheckedChange={setShowCaptions}
         />
         <Label className="text-gray-200 dark:text-gray-200">
-          <span className="hidden md:inline">Caption</span>
-          <span className="inline md:hidden">Cap.</span>
+          <span className="hidden lg:inline">📖&nbsp;Captions</span>
+          <span className="inline lg:hidden">📖</span>
         </Label>
         </div>
         <div className="flex flex-row items-center space-x-3">
         <Switch
           checked={showSpeeches}
           onCheckedChange={setShowSpeeches}
+          defaultChecked={showSpeeches}
         />
         <Label className="text-gray-200 dark:text-gray-200">
-          <span className="hidden md:inline">Beta</span>
-          <span className="inline md:hidden">Beta</span>
+          <span className="hidden lg:inline">💬&nbsp;Bubbles</span>
+          <span className="inline lg:hidden">💬</span>
         </Label>
         </div>
         {/*

src/app/queries/getSystemPrompt.ts

@@ -19,9 +19,9 @@ export function getSystemPrompt({
 }) {
   return [
     `You are a writer specialized in ${preset.llmPrompt}`,
-    `Please write detailed drawing instructions and short (2-3 sentences long) speeches and narrator captions for the ${firstNextOrLast} ${nbPanelsToGenerate} panels (out of ${maxNbPanels} in total) of a new story, but keep it open-ended (it will be continued and expanded later). Please make sure each of those ${nbPanelsToGenerate} panels include info about character gender, age, origin, clothes, colors, location, lights, etc. Only generate those ${nbPanelsToGenerate} panels, but take into account the fact the panels are part of a longer story (${maxNbPanels} panels long).`,
+    `Please write detailed drawing instructions and short (2-3 sentences long) speeches and narrator captions for the ${firstNextOrLast} ${nbPanelsToGenerate} panels (out of ${maxNbPanels} in total) of a new story, but keep it open-ended (it will be continued and expanded later). Please make sure each of those ${nbPanelsToGenerate} panels include info about character gender, age, origin, clothes, colors, location, lights, etc. Speeches are the dialogues, so they MUST be written in 1st person style. Only generate those ${nbPanelsToGenerate} panels, but take into account the fact the panels are part of a longer story (${maxNbPanels} panels long).`,
     `Give your response as a VALID JSON array like this: \`Array<{ panel: number; instructions: string; speech: string; caption: string; }>\`.`,
     // `Give your response as Markdown bullet points.`,
-    `Be brief in the instructions, the speeches and the narrative captions of those ${nbPanelsToGenerate} panels, don't add your own comments. The speech must be captivating, smart, entertaining, usually a sentence or two. Be straight to the point, return JSON and never reply things like "Sure, I can.." etc. Reply using valid JSON!! Important: Write valid JSON!`
+    `Be brief in the instructions, the speeches and the narrative captions of those ${nbPanelsToGenerate} panels, don't add your own comments. Write speeces in 1st person style, with intensity, humor etc. The speech must be captivating, smart, entertaining, usually a sentence or two. Be straight to the point, return JSON and never reply things like "Sure, I can.." etc. Reply using valid JSON!! Important: Write valid JSON!`
   ].filter(item => item).join("\n")
 }

src/app/store/index.ts

@@ -12,6 +12,7 @@ import { LayoutName, defaultLayout, getRandomLayoutName } from "../layouts"
 import { putTextInInput } from "@/lib/putTextInInput"
 import { parsePresetFromPrompts } from "@/lib/parsePresetFromPrompts"
 import { parseLayoutFromStoryboards } from "@/lib/parseLayoutFromStoryboards"
+import { getLocalStorageShowSpeeches } from "@/lib/getLocalStorageShowSpeeches"
 
 export const useStore = create<{
   prompt: string
@@ -96,6 +97,11 @@ export const useStore = create<{
   loadClap: (blob: Blob) => Promise<void>
   downloadClap: () => Promise<void>
 }>((set, get) => ({
+
+  // -------- note --------------------------------------------------
+  // do not read the local storage in this block, results might be empty
+  // ----------------------------------------------------------------
+
   prompt:
     (getParam("stylePrompt", "") || getParam("storyPrompt", ""))
      ? `${getParam("stylePrompt", "")}||${getParam("storyPrompt", "")}`
@@ -117,7 +123,7 @@ export const useStore = create<{
   captions: [],
   upscaleQueue: {} as Record<string, RenderedScene>,
   renderedScenes: {} as Record<string, RenderedScene>,
-  showSpeeches: getParam("showSpeeches", false),
+  showSpeeches: true,
   showCaptions: getParam("showCaptions", false),
 
   // deprecated?
@@ -301,6 +307,11 @@ export const useStore = create<{
     set({
       showSpeeches,
     })
+    try {
+      localStorage.setItem("AI_COMIC_FACTORY_SHOW_SPEECHES", `${showSpeeches || false}`)
+    } catch (err) {
+      console.error(`failed to persist "showSpeeches" for value "${showSpeeches}"`)
+    }
   },
   setPanelSpeech: (newSpeech, index) => {
     const { speeches } = get()

src/lib/bubble/injectSpeechBubbleInTheBackground.ts

@@ -59,7 +59,7 @@ export async function injectSpeechBubbleInTheBackground(params: {
   if (segmentationResult.categoryMask) {
     const mask = segmentationResult.categoryMask.getAsUint8Array();
     characterBoundingBox = findCharacterBoundingBox(mask, image.width, image.height);
-
+    console.log(segmentationResult)
     if (debug) {
       drawSegmentationMask(ctx, mask, image.width, image.height);
     }
@@ -208,62 +208,162 @@ function hslToRgb(h: number, s: number, l: number): [number, number, number] {
 
 function drawSpeechBubble(
   ctx: CanvasRenderingContext2D,
-  location: { x: number, y: number },
+  location: { x: number; y: number },
   text: string,
   shape: "oval" | "rectangular" | "cloud" | "thought",
   line: "handdrawn" | "straight" | "bubble" | "chaotic",
   font: string,
   characterBoundingBox: BoundingBox | null,
   imageWidth: number,
-  imageHeight: number
+  imageHeight: number,
+  safetyMargin: number = 0.1 // Default safety margin is 10%
 ) {
-  const bubbleWidth = Math.min(300, imageWidth * 0.4);
-  const bubbleHeight = Math.min(150, imageHeight * 0.3);
   const padding = 24;
+  const borderPadding = Math.max(10, Math.min(imageWidth, imageHeight) * safetyMargin);
   
   const fontSize = 20;
   ctx.font = `${fontSize}px ${font}`;
   
-  const wrappedText = wrapText(ctx, text, bubbleWidth - padding * 2, fontSize);
+  // Adjust maximum width to account for border padding
+  const maxBubbleWidth = imageWidth - 2 * borderPadding;
+  const wrappedText = wrapText(ctx, text, maxBubbleWidth - padding * 2, fontSize);
   const textDimensions = measureTextDimensions(ctx, wrappedText, fontSize);
   
-  const finalWidth = Math.max(bubbleWidth, textDimensions.width + padding * 2);
-  const finalHeight = Math.max(bubbleHeight, textDimensions.height + padding * 2);
+  // Adjust bubble size based on text content
+  const finalWidth = Math.min(Math.max(textDimensions.width + padding * 2, 100), maxBubbleWidth);
+  const finalHeight = Math.min(Math.max(textDimensions.height + padding * 2, 50), imageHeight - 2 * borderPadding);
   
-  const bubbleLocation = {
-    x: Math.max(finalWidth / 2 + padding, Math.min(imageWidth - finalWidth / 2 - padding, location.x)),
-    y: Math.max(finalHeight / 2 + padding, Math.min(imageHeight - finalHeight / 2 - padding, location.y))
-  };
-
-  ctx.fillStyle = 'white';
-
-  // let's disable the border for now
-  ctx.strokeStyle = 'white'; // 'black'; 
-  ctx.lineWidth = 2;
+  const bubbleLocation = adjustBubbleLocation(location, finalWidth, finalHeight, characterBoundingBox, imageWidth, imageHeight, borderPadding);
 
   let tailTarget = null;
   if (characterBoundingBox) {
     tailTarget = {
       x: characterBoundingBox.left + characterBoundingBox.width / 2,
-      y: characterBoundingBox.top + characterBoundingBox.height * 0.2
+      y: characterBoundingBox.top + characterBoundingBox.height * 0.3
     };
   }
 
+  // Draw the main bubble
+  ctx.fillStyle = 'white';
+  ctx.strokeStyle = 'black';
+  ctx.lineWidth = 2;
   ctx.beginPath();
   drawBubbleShape(ctx, shape, bubbleLocation, finalWidth, finalHeight, tailTarget);
   ctx.fill();
   ctx.stroke();
 
+  // Draw the tail
   if (tailTarget) {
     drawTail(ctx, bubbleLocation, finalWidth, finalHeight, tailTarget, shape);
   }
 
+  // Draw a white oval to blend the tail with the bubble
+  ctx.fillStyle = 'white';
+  ctx.beginPath();
+  drawBubbleShape(ctx, shape, bubbleLocation, finalWidth, finalHeight, null);
+  ctx.fill();
+
+  // Draw the text
   ctx.fillStyle = 'black';
   ctx.textAlign = 'center';
   ctx.textBaseline = 'middle';
   drawFormattedText(ctx, wrappedText, bubbleLocation.x, bubbleLocation.y, finalWidth - padding * 2, fontSize);
 }
 
+function drawTail(
+  ctx: CanvasRenderingContext2D,
+  bubbleLocation: { x: number; y: number },
+  bubbleWidth: number,
+  bubbleHeight: number,
+  tailTarget: { x: number; y: number },
+  shape: string
+) {
+  const bubbleCenterX = bubbleLocation.x;
+  const bubbleCenterY = bubbleLocation.y;
+  const tailBaseWidth = 40;
+
+  // Calculate the distance from bubble center to tail target
+  const deltaX = tailTarget.x - bubbleCenterX;
+  const deltaY = tailTarget.y - bubbleCenterY;
+  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+  // Set the tail length to 30% of the distance
+  const tailLength = distance * 0.3;
+
+  // Calculate the tail end point
+  const tailEndX = bubbleCenterX + (deltaX / distance) * tailLength;
+  const tailEndY = bubbleCenterY + (deltaY / distance) * tailLength;
+
+  // Calculate the angle of the tail
+  const angle = Math.atan2(deltaY, deltaX);
+
+  // Calculate the base points of the tail
+  const perpAngle = angle + Math.PI / 2;
+  const basePoint1 = {
+    x: bubbleCenterX + Math.cos(perpAngle) * tailBaseWidth / 2,
+    y: bubbleCenterY + Math.sin(perpAngle) * tailBaseWidth / 2
+  };
+  const basePoint2 = {
+    x: bubbleCenterX - Math.cos(perpAngle) * tailBaseWidth / 2,
+    y: bubbleCenterY - Math.sin(perpAngle) * tailBaseWidth / 2
+  };
+
+  // Calculate control points for the Bézier curves
+  const controlPointDistance = tailLength * 0.3;
+  const controlPoint1 = {
+    x: basePoint1.x + Math.cos(angle) * controlPointDistance,
+    y: basePoint1.y + Math.sin(angle) * controlPointDistance
+  };
+  const controlPoint2 = {
+    x: basePoint2.x + Math.cos(angle) * controlPointDistance,
+    y: basePoint2.y + Math.sin(angle) * controlPointDistance
+  };
+
+  // Draw the tail
+  ctx.beginPath();
+  ctx.moveTo(basePoint1.x, basePoint1.y);
+  ctx.quadraticCurveTo(controlPoint1.x, controlPoint1.y, tailEndX, tailEndY);
+  ctx.quadraticCurveTo(controlPoint2.x, controlPoint2.y, basePoint2.x, basePoint2.y);
+  ctx.closePath();
+
+  // Fill and stroke the tail
+  ctx.fillStyle = 'white';
+  ctx.fill();
+  ctx.strokeStyle = 'black';
+  ctx.stroke();
+}
+
+function adjustBubbleLocation(
+  location: { x: number; y: number },
+  width: number,
+  height: number,
+  characterBoundingBox: BoundingBox | null,
+  imageWidth: number,
+  imageHeight: number,
+  borderPadding: number
+): { x: number; y: number } {
+  let adjustedX = location.x;
+  let adjustedY = location.y;
+
+  // Ensure the bubble doesn't overlap with the character
+  if (characterBoundingBox) {
+    if (
+      adjustedX > characterBoundingBox.left &&
+      adjustedX < characterBoundingBox.left + characterBoundingBox.width
+    ) {
+      adjustedX = characterBoundingBox.left > imageWidth / 2
+        ? characterBoundingBox.left - width / 2 - 10
+        : characterBoundingBox.left + characterBoundingBox.width + width / 2 + 10;
+    }
+  }
+
+  // Ensure the bubble (including text) is fully visible
+  adjustedX = Math.max(width / 2 + borderPadding, Math.min(imageWidth - width / 2 - borderPadding, adjustedX));
+  adjustedY = Math.max(height / 2 + borderPadding, Math.min(imageHeight - height / 2 - borderPadding, adjustedY));
+
+  return { x: adjustedX, y: adjustedY };
+}
+
 function drawBubbleShape(
   ctx: CanvasRenderingContext2D,
   shape: "oval" | "rectangular" | "cloud" | "thought",
@@ -351,73 +451,6 @@ function drawThoughtBubble(ctx: CanvasRenderingContext2D, location: { x: number,
   // The tail for thought bubbles is handled in the drawTail function
 }
 
-function drawTail(
-  ctx: CanvasRenderingContext2D,
-  bubbleLocation: { x: number, y: number },
-  bubbleWidth: number,
-  bubbleHeight: number,
-  tailTarget: { x: number, y: number },
-  shape: string
-) {
-  // Calculate new maximum length for tail
-  const bubbleCenterX = bubbleLocation.x;
-  const bubbleCenterY = bubbleLocation.y;
-  const maxTailLength = Math.max(bubbleHeight, bubbleWidth) * 0.6;
-
-  const tailBaseWidth = 30; // 50% larger than before
-  const tailHeight = 30;
-
-  // Calculate the length from bubble center to tail target
-  const deltaX = tailTarget.x - bubbleCenterX;
-  const deltaY = tailTarget.y - bubbleCenterY;
-  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-
-  // Normalize the length if it exceeds the max tail length
-  const limitedDistance = Math.min(distance, maxTailLength);
-  const tailEndX = bubbleCenterX + (deltaX / distance) * limitedDistance;
-  const tailEndY = bubbleCenterY + (deltaY / distance) * limitedDistance;
-
-  ctx.beginPath();
-  ctx.moveTo(bubbleCenterX, bubbleCenterY);
-
-  const controlPoint1 = {
-    x: bubbleCenterX + deltaX / 3,
-    y: bubbleCenterY + deltaY / 3
-  };
-
-  const controlPoint2 = {
-    x: bubbleCenterX + (deltaX * 2) / 3,
-    y: bubbleCenterY + (deltaY * 2) / 3
-  };
-
-  ctx.bezierCurveTo(
-    controlPoint1.x, controlPoint1.y,
-    controlPoint2.x, controlPoint2.y,
-    tailEndX, tailEndY
-  );
-
-  // Mirror to create the width at base
-  const mirroredControlPoint1 = {
-    x: controlPoint1.x + tailBaseWidth / 3,
-    y: controlPoint1.y
-  };
-  
-  const mirroredControlPoint2 = {
-    x: controlPoint2.x + (tailBaseWidth * 2) / 3,
-    y: controlPoint2.y
-  };
-
-  ctx.bezierCurveTo(
-    mirroredControlPoint2.x, mirroredControlPoint2.y,
-    mirroredControlPoint1.x, mirroredControlPoint1.y,
-    bubbleCenterX + tailBaseWidth, bubbleCenterY
-  );
-
-  ctx.closePath();
-  ctx.fill();
-  ctx.stroke();
-}
-
 function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number, lineHeight: number): string[] {
   const words = text.split(' ');
   const lines: string[] = [];

src/lib/getLocalStorageShowSpeeches.ts

@@ -0,0 +1,13 @@
+export function getLocalStorageShowSpeeches(defaultValue: boolean): boolean {
+  try {
+    const result = localStorage.getItem("AI_COMIC_FACTORY_SHOW_SPEECHES")
+    if (typeof result !== "string") {
+      return defaultValue
+    }
+    if (result === "true") { return true }
+    if (result === "false") { return false }
+    return defaultValue
+  } catch (err) {
+    return defaultValue
+  }
+}