various improvements

src/app/engine/presets.ts

@@ -74,8 +74,64 @@ export const presets: Record<string, Preset> = {
       "3D render"
     ],
   },
-  american_comic: {
-    label: "American",
+  american_comic_90: {
+    label: "American (modern)",
+    family: "american",
+    color: "color",
+    font: "actionman",
+    llmPrompt: "american comic",
+    imagePrompt: (prompt: string) => [
+      `american comic about ${prompt}`,
+      "single panel",
+      "modern american comic",
+      "comicbook style",
+      "2010s",
+      "digital print",
+      "color comicbook",
+      "color drawing"
+    ],
+    negativePrompt: () => [
+      "manga",
+      "anime",
+      "american comic",
+      "action",
+      "grayscale",
+      "monochrome",
+      "photo",
+      "painting",
+      "3D render"
+    ],
+  },
+  american_comic_40: {
+    label: "American (1940)",
+    family: "american",
+    color: "color",
+    font: "actionman",
+    llmPrompt: "american comic",
+    imagePrompt: (prompt: string) => [
+      `american comic about ${prompt}`,
+      "single panel",
+      "american comic",
+      "comicbook style",
+      "1940",
+      "40s",
+      "color comicbook",
+      "color drawing"
+    ],
+    negativePrompt: () => [
+      "manga",
+      "anime",
+      "american comic",
+      "action",
+      "grayscale",
+      "monochrome",
+      "photo",
+      "painting",
+      "3D render"
+    ],
+  },
+  american_comic_50: {
+    label: "American (1950)",
     family: "american",
     color: "color",
     font: "actionman",
@@ -102,6 +158,122 @@ export const presets: Record<string, Preset> = {
       "3D render"
     ],
   },
+  american_comic_60: {
+    label: "American (1960)",
+    family: "american",
+    color: "color",
+    font: "actionman",
+    llmPrompt: "american comic",
+    imagePrompt: (prompt: string) => [
+      `american comic about ${prompt}`,
+      "single panel",
+      "american comic",
+      "comicbook style",
+      "1960",
+      "60s",
+      "color comicbook",
+      "color drawing"
+    ],
+    negativePrompt: () => [
+      "manga",
+      "anime",
+      "american comic",
+      "action",
+      "grayscale",
+      "monochrome",
+      "photo",
+      "painting",
+      "3D render"
+    ],
+  },
+
+  /*
+  pulp_sf: {
+    label: "Pulp SF",
+    family: "european",
+    color: "color",
+    font: "actionman",
+    llmPrompt: "new pulp science fiction",
+    imagePrompt: (prompt: string) => [
+      `color comic panel`,
+      `${prompt}`,
+      "pulp science fiction",
+      "vintage",
+      "1940",
+      "1950",
+      "single panel",
+      "comic album"
+    ],
+    negativePrompt: () => [
+      "manga",
+      "anime",
+      "american comic",
+      "grayscale",
+      "monochrome",
+      "photo",
+      "painting",
+      "3D render"
+    ],
+  },
+  */
+  humanoid: {
+    label: "Humanoid",
+    family: "european",
+    color: "color",
+    font: "actionman",
+    llmPrompt: "new album by moebius",
+    imagePrompt: (prompt: string) => [
+      `color comic panel`,
+      `${prompt}`,
+      "style of Moebius",
+      "by Moebius",
+      "french comic panel",
+      "franco-belgian style",
+      "bande dessinée",
+      "single panel",
+      "comic album"
+    ],
+    negativePrompt: () => [
+      "manga",
+      "anime",
+      "american comic",
+      "grayscale",
+      "monochrome",
+      "photo",
+      "painting",
+      "3D render"
+    ],
+  },
+  milou: {
+    label: "Haddock",
+    family: "european",
+    color: "color",
+    font: "actionman",
+    llmPrompt: "new album by Hergé",
+    imagePrompt: (prompt: string) => [
+      `color comic panel`,
+      `${prompt}`,
+      "style of Hergé",
+      "by Hergé",
+      "tintin style",
+      "french comic panel",
+      "franco-belgian style",
+      "color panel",
+      "bande dessinée",
+      "single panel",
+      "comic album"
+    ],
+    negativePrompt: () => [
+      "manga",
+      "anime",
+      "american comic",
+      "grayscale",
+      "monochrome",
+      "photo",
+      "painting",
+      "3D render"
+    ],
+  },
   armorican: {
     label: "Armorican",
     family: "european",
@@ -109,7 +281,7 @@ export const presets: Record<string, Preset> = {
     font: "actionman",
     llmPrompt: "new color album",
     imagePrompt: (prompt: string) => [
-      `color album panel`,
+      `color comic panel`,
       `about ${prompt}`,
       "romans",
       "gauls",

src/app/interface/grid/index.tsx

@@ -16,7 +16,7 @@ export function Grid({ children, className }: { children: ReactNode; className:
         className
       )}
       style={{
-        gap: `${Math.round((zoomLevel / 100) * 8)}px`
+        gap: `${(zoomLevel / 100) * 0.7}vw`
       }}
       >
       {children}

src/app/interface/panel/index.tsx

@@ -164,11 +164,14 @@ export function Panel({
 
   const frameClassName = cn(
     `w-full h-full`,
-    `border-stone-900`,
+    `border-stone-800`,
     `transition-all duration-200 ease-in-out`,
-    zoomLevel > 70 ? `border-2` : zoomLevel > 40 ? `border` : `border border-transparent`,
+    zoomLevel > 140 ? `border-[2px] md:border-[4px] rounded-sm md:rounded-md` :
+    zoomLevel > 120 ? `border-[1.5px] md:border-[3px] rounded-xs md:rounded-sm` :
+    zoomLevel > 90 ? `border-[1px] md:border-[2px] rounded-xs md:rounded-sm` :
+    zoomLevel > 40 ? `border-[0.5px] md:border-[1px] rounded-none md:rounded-xs` :
+    `border-transparent md:border-[0.5px] rounded-none md:rounded-none`,
     `shadow-sm`,
-    `rounded-sm`,
     `overflow-hidden`,
     `print:shadow-none`,
   )

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

@@ -97,11 +97,14 @@ export function TopMenu() {
         <Input
           placeholder="Story"
           className="w-full bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800"
-          disabled={atLeastOnePanelIsBusy}
+          // disabled={atLeastOnePanelIsBusy}
           onChange={(e) => {
             setDraft(e.target.value)
           }}
           onKeyDown={({ key }) => {
+            if (isBusy) {
+              return
+            }
             if (key === 'Enter') {
               if (draft.trim() !== prompt.trim()) {
                 setPrompt(draft.trim())
@@ -112,6 +115,9 @@ export function TopMenu() {
          />
         <Button
           onClick={() => {
+            if (isBusy) {
+              return
+            }
             if (draft.trim() !== prompt.trim()) {
               setPrompt(draft.trim())
             }

src/app/interface/zoom/index.tsx

@@ -22,7 +22,7 @@ export function Zoom() {
         <VerticalSlider
           defaultValue={[zoomLevel]}
           min={30}
-          max={200}
+          max={250}
           step={1}
           onValueChange={value => setZoomLevel(value[0] || 10)}
           value={[zoomLevel]}

src/app/main.tsx

@@ -106,13 +106,16 @@ export default function Main() {
     <div>
       <TopMenu />
       <div className={cn(
-        `flex items-start w-screen h-screen pt-[120px] px-16 md:pt-[72px] overflow-y-scroll`,
+        `flex items-start w-screen h-screen pt-[120px] md:pt-[72px] overflow-y-scroll`,
         `transition-all duration-200 ease-in-out`,
-        `print:pt-2 print:px-2`,
-
+        zoomLevel > 105 ? `px-0` : `pl-2 pr-16 md:pl-16 md:pr-16`,
+        `print:pt-0 print:px-0 print:pl-0 print:pr-0`,
         fonts.actionman.className
       )}>
-        <div className="flex flex-col items-center w-full">
+        <div className={cn(
+          `flex flex-col w-full`,
+          zoomLevel > 105 ? `items-start` : `items-center`
+        )}>
           <div
             ref={pageRef}
             className={cn(
@@ -128,11 +131,13 @@ export default function Main() {
               `border border-stone-200`,
               `shadow-2xl`,
               `print:shadow-none`,
+              `print:border-0`,
               `print:width-screen`
             )}
             style={{
               width: `${zoomLevel}%`,
               padding: `${Math.round((zoomLevel / 100) * 16)}px`
+              // marginLeft: `${zoomLevel > 100 ? `100`}`
             }}
             >
             <LayoutElement />

src/app/queries/getStory.ts

@@ -29,7 +29,7 @@ export const getStory = async ({
       role: "user",
       content: `The story is: ${prompt}`,
     }
-  ])
+  ]) + "```json\n["
 
 
   let result = ""

src/app/store/index.ts

@@ -39,7 +39,7 @@ export const useStore = create<{
   panels: [],
   captions: {},
   layout: getRandomLayoutName(),
-  zoomLevel: 50,
+  zoomLevel: 60,
   page: undefined as unknown as HTMLDivElement,
   isGeneratingStory: false,
   panelGenerationStatus: {},