zooom

package-lock.json

@@ -21,6 +21,7 @@
         "@radix-ui/react-popover": "^1.0.6",
         "@radix-ui/react-select": "^1.2.2",
         "@radix-ui/react-separator": "^1.0.3",
+        "@radix-ui/react-slider": "^1.1.2",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tooltip": "^1.0.6",
@@ -3182,6 +3183,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",
+      "integrity": "sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",

package.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.6",

src/app/engine/presets.ts

@@ -85,6 +85,8 @@ export const presets: Record<string, Preset> = {
       "single panel",
       "american comic",
       "comicbook style",
+      "1950",
+      "50s",
       "color comicbook",
       "color drawing"
     ],
@@ -109,10 +111,13 @@ export const presets: Record<string, Preset> = {
     imagePrompt: (prompt: string) => [
       `color album panel`,
       `about ${prompt}`,
+      "romans",
+      "gauls",
+      "french comic panel",
+      "franco-belgian style",
       "bande dessinée",
       "single panel",
       "comical",
-      "franco-belgian comic",
       "comic album",
       "color drawing"
     ],

src/app/engine/render.ts

@@ -57,7 +57,7 @@ export async function newRender({
 
         // no need to upscale right now as we generate tiny panels
         // maybe later we can provide an "export" button to PDF
-        upscalingFactor: 1,
+        upscalingFactor: 2,
 
         cache: "ignore"
       } as Partial<RenderRequest>),

src/app/interface/panel/index.tsx

@@ -143,6 +143,10 @@ export function Panel({
     <div className={cn(
       `w-full h-full`,
       { "grayscale": preset.color === "grayscale" },
+      `border-2 border-stone-900`,
+      `shadow-sm`,
+      `rounded-sm`,
+      `overflow-hidden`,
       className
     )}>
       {rendered.assetUrl && <img

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

@@ -31,30 +31,64 @@ export function TopMenu() {
   return (
     <div className={cn(
       `z-10 fixed top-0 left-0 right-0`,
-      `flex flex-row w-full justify-between items-center`,
+      `flex flex-col md:flex-row w-full justify-between items-center`,
       `backdrop-blur-xl`,
+      `transition-all duration-200 ease-in-out`,
       `px-2 py-2 border-b-1 border-gray-50 dark:border-gray-50`,
       `bg-stone-900/70 dark:bg-stone-900/70 text-gray-50 dark:text-gray-50`,
-      `space-x-6`
+      `space-y-2 md:space-y-0 md:space-x-3 lg:space-x-6`
     )}>
-      <div className="flex flex-row items-center space-x-3 font-mono">
-        <Label className="flex text-sm">Select a preset:</Label>
-        <Select
-          defaultValue={defaultPreset}
-          onValueChange={(value) => { setPreset(getPreset(value as FontName)) }}
-          disabled={atLeastOnePanelIsBusy}
-          >
-          <SelectTrigger className="w-[180px]">
-            <SelectValue className="text-sm" placeholder="Type" />
-          </SelectTrigger>
-          <SelectContent>
-            {Object.entries(presets).map(([key, preset]) =>
-              <SelectItem key={key} value={key}>{preset.label}</SelectItem>
-            )}
-          </SelectContent>
-        </Select>
+      <div className="flex flex-row space-x-3">
+        <div className={cn(
+          `transition-all duration-200 ease-in-out`,
+          `flex flex-row items-center justify-start space-x-3 font-mono w-1/2 md:w-auto`
+          )}>
+          <Label className="flex text-sm w-24">Preset:</Label>
+          <Select
+            defaultValue={defaultPreset}
+            onValueChange={(value) => { setPreset(getPreset(value as FontName)) }}
+            disabled={atLeastOnePanelIsBusy}
+            >
+            <SelectTrigger className="flex-grow">
+              <SelectValue className="text-sm" placeholder="Type" />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.entries(presets).map(([key, preset]) =>
+                <SelectItem key={key} value={key}>{preset.label}</SelectItem>
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className={cn(
+          `transition-all duration-200 ease-in-out`,
+          `flex flex-row items-center space-x-3 font-mono w-1/2 md:w-auto md:hidden`
+        )}>
+          <Label className="flex text-sm w-24">Font:</Label>
+          <Select
+            defaultValue={fontList.includes(preset.font) ? preset.font : "cartoonist"}
+            onValueChange={(value) => { setFont(value as FontName) }}
+            disabled={atLeastOnePanelIsBusy}
+            >
+            <SelectTrigger className="flex-grow">
+              <SelectValue className="text-sm" placeholder="Type" />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.keys(fonts)
+                .map((font) =>
+                <SelectItem
+                  key={font}
+                  value={font}>{
+                    font
+                  }</SelectItem>
+              )}
+            </SelectContent>
+          </Select>
+        </div>
       </div>
-      <div className="flex flex-row flex-grow items-center space-x-3 font-mono">
+      <div className={cn(
+          `transition-all duration-200 ease-in-out`,
+          `flex flex-row flex-grow items-center space-x-3 font-mono w-full md:w-auto`
+        )}>
         <Input
           placeholder="Story"
           className="w-full bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800"
@@ -79,14 +113,17 @@ export function TopMenu() {
           value={draft}
          />
       </div>
-      <div className="flex flex-row items-center space-x-3 font-mono">
-        <Label className="flex text-sm">Font:</Label>
+      <div className={cn(
+          `transition-all duration-200 ease-in-out`,
+          `hidden md:flex flex-row items-center space-x-3 font-mono w-full md:w-auto`
+      )}>
+        <Label className="flex text-sm w-24">Font:</Label>
         <Select
           defaultValue={fontList.includes(preset.font) ? preset.font : "cartoonist"}
           onValueChange={(value) => { setFont(value as FontName) }}
           disabled={atLeastOnePanelIsBusy}
           >
-          <SelectTrigger className="w-[144px]">
+          <SelectTrigger className="flex-grow">
             <SelectValue className="text-sm" placeholder="Type" />
           </SelectTrigger>
           <SelectContent>

src/app/interface/zoom/index.tsx

@@ -0,0 +1,31 @@
+import { useStore } from "@/app/store"
+import { VerticalSlider } from "@/components/ui/vertical-slider"
+import { cn } from "@/lib/utils"
+
+export function Zoom() {
+  const zoomLevel = useStore((state) => state.zoomLevel)
+  const setZoomLevel = useStore((state) => state.setZoomLevel)
+
+  return (
+    <div className={cn(
+      // `fixed flex items-center justify-center bottom-8 top-32 right-8 z-10 h-screen`,
+      `fixed flex flex-col items-center bottom-8 top-32 md:top-20 right-6 z-10`
+    )}>
+      <div className="font-mono text-xs pb-1 text-stone-700">
+        Zoom
+      </div>
+      <div className="w-2">
+        <VerticalSlider
+          defaultValue={[zoomLevel]}
+          min={30}
+          max={100}
+          step={1}
+          onValueChange={value => setZoomLevel(value[0] || 10)}
+          value={[zoomLevel]}
+          className="h-48"
+          orientation="vertical"
+        />
+      </div>
+    </div>
+  )
+}

src/app/layouts/index.tsx

@@ -1,12 +1,11 @@
 import { Panel } from "@/app/interface/panel"
 import { pick } from "@/lib/pick"
-import { useStore } from "@/app/store"
 
 export function Layout1() {
   return (
     <div
       // the "fixed" width ensure our comic keeps a consistent ratio
-      className="grid grid-cols-2 grid-rows-3 gap-4 w-[1160px] h-screen">
+      className="w-full h-full grid grid-cols-2 grid-rows-3 gap-2">
       <div className="bg-stone-100">
         <Panel
           panel={0}
@@ -43,11 +42,11 @@ export function Layout2() {
   return (
     <div
       // the "fixed" width ensure our comic keeps a consistent ratio
-      className="grid grid-cols-2 grid-rows-3 gap-4 w-[1160px] h-screen">
-      <div className="bg-gray-100 row-span-2 col-span-1">
+      className="w-full h-full grid grid-cols-2 grid-rows-3 gap-2">
+      <div className="bg-gray-100 row-span-3 col-span-1">
         <Panel
           panel={0}
-          width={1024}
+          width={512}
           height={1024}
         />
       </div>
@@ -65,11 +64,11 @@ export function Layout2() {
           height={512}
         />
       </div>
-      <div className="bg-zinc-100 row-span-2">
+      <div className="bg-zinc-100 row-span-1 col-span-1">
         <Panel
           panel={3}
           width={1024}
-          height={1024}
+          height={512}
         />
       </div>
     </div>
@@ -80,32 +79,71 @@ export function Layout3() {
   return (
     <div
       // the "fixed" width ensure our comic keeps a consistent ratio
-      className="grid grid-cols-2 grid-rows-3 gap-4 w-[1160px] h-screen">
-      <div className="bg-zinc-100 row-span-2">
+      className="w-full h-full grid grid-cols-5 grid-rows-2 gap-2">
+      <div className="bg-zinc-100 col-span-3">
         <Panel
           panel={0}
           width={1024}
+          height={512}
+        />
+      </div>
+      <div className="bg-zinc-100 col-span-2 row-span-2">
+        <Panel
+          panel={1}
+          width={512}
           height={1024}
         />
       </div>
-      <div className="bg-stone-100">
+      <div className="col-span-3 grid grid-cols-2 gap-2">
+        <div className="bg-stone-100">
+          <Panel
+            panel={2}
+            width={512}
+            height={758}
+          />
+        </div>
+        <div className="bg-slate-100">
+          <Panel
+            panel={3}
+            width={512}
+            height={758}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function Layout4() {
+  return (
+    <div
+      // the "fixed" width ensure our comic keeps a consistent ratio
+      className="w-full h-full grid grid-cols-2 grid-rows-3 gap-2">
+      <div className="bg-slate-100 row-span-2">
+        <Panel
+          panel={0}
+          width={768}
+          height={1024}
+        />
+      </div>
+      <div className="bg-gray-100 row-span-1 col-span-1">
         <Panel
           panel={1}
           width={1024}
           height={512}
         />
       </div>
-      <div className="bg-slate-100">
+      <div className="bg-zinc-100 row-span-2">
         <Panel
           panel={2}
           width={1024}
           height={512}
         />
       </div>
-      <div className="bg-gray-100 row-span-2 col-span-1">
+      <div className="bg-stone-100">
         <Panel
           panel={3}
-          width={1024}
+          width={768}
           height={1024}
         />
       </div>
@@ -113,33 +151,71 @@ export function Layout3() {
   )
 }
 
-export function Layout4() {
+
+export function Layout5() {
   return (
     <div
       // the "fixed" width ensure our comic keeps a consistent ratio
-      className="grid grid-cols-2 grid-rows-3 gap-4 w-[1160px] h-screen">
-      <div className="bg-slate-100">
+      className="w-full h-full grid grid-cols-3 grid-rows-2 gap-2">
+      <div className="bg-zinc-100 col-span-1 row-span-1">
         <Panel
           panel={0}
+          width={512}
+          height={768}
+        />
+      </div>
+      <div className="bg-zinc-100 col-span-1 row-span-1">
+        <Panel
+          panel={1}
+          width={512}
+          height={768}
+        />
+      </div>
+      <div className="bg-stone-100 row-span-2 col-span-1">
+        <Panel
+          panel={2}
+          width={512}
+          height={1024}
+        />
+      </div>
+      <div className="bg-slate-100 row-span-1 col-span-2">
+        <Panel
+          panel={3}
           width={1024}
           height={512}
         />
       </div>
-      <div className="bg-gray-100 row-span-2 col-span-1">
+    </div>
+  )
+}
+
+export function Layout6() {
+  return (
+    <div
+      // the "fixed" width ensure our comic keeps a consistent ratio
+      className="w-full h-full grid grid-cols-3 grid-rows-2 gap-2">
+      <div className="bg-zinc-100 col-span-2 row-span-1">
         <Panel
-          panel={1}
+          panel={0}
           width={1024}
-          height={1024}
+          height={512}
         />
       </div>
-      <div className="bg-zinc-100 row-span-2">
+      <div className="bg-zinc-100 col-span-1 row-span-1">
+        <Panel
+          panel={1}
+          width={512}
+          height={768}
+        />
+      </div>
+      <div className="bg-stone-100 row-span-1 col-span-1">
         <Panel
           panel={2}
-          width={1024}
-          height={1024}
+          width={512}
+          height={768}
         />
       </div>
-      <div className="bg-stone-100">
+      <div className="bg-slate-100 row-span-1 col-span-2">
         <Panel
           panel={3}
           width={1024}
@@ -150,7 +226,8 @@ export function Layout4() {
   )
 }
 
-export const layouts = { Layout1, Layout2, Layout3, Layout4 }
+// export const layouts = { Layout1, Layout2, Layout3, Layout4, Layout5, Layout6 }
+export const layouts = { Layout1, Layout4, Layout6 }
 
 export type LayoutName = keyof typeof layouts 
 

src/app/main.tsx

@@ -10,6 +10,7 @@ import { TopMenu } from "./interface/top-menu"
 import { FontName, defaultFont } from "@/lib/fonts"
 import { getRandomLayoutName, layouts } from "./layouts"
 import { useStore } from "./store"
+import { Zoom } from "./interface/zoom"
 
 export default function Main() {
   const [_isPending, startTransition] = useTransition()
@@ -33,6 +34,8 @@ export default function Main() {
 
   const setPanels = useStore(state => state.setPanels)
 
+  const zoomLevel = useStore(state => state.zoomLevel)
+
   // react to URL params
   useEffect(() => {
     if (requestedPreset && requestedPreset !== preset.label) { setPreset(getPreset(requestedPreset)) }
@@ -64,13 +67,30 @@ export default function Main() {
   const LayoutElement = (layouts as any)[layout]
 
   return (
-    <div className={cn(
-      ``
-    )}>
+    <div>
       <TopMenu />
-      <div className="flex flex-col items-center w-screen h-screen pt-16 overflow-y-scroll">
-        <LayoutElement />
+      <div className={cn(
+        `flex items-start w-screen h-screen pt-[120px] px-16 md:pt-[72px] overflow-y-scroll`,
+        `transition-all duration-200 ease-in-out`
+      )}>
+        <div className="flex flex-col items-center w-full">
+          <div
+            // we are trying to reach a "book" look
+            // we are using aspect-[297/210] because it matches A4 (297mm x 210mm)
+            className={cn(
+              `flex flex-col items-center justify-start aspect-[210/297]`,
+              `transition-all duration-100 ease-in-out`,
+              `p-4`,
+              `border border-stone-200`,
+              `shadow-2xl`
+            )}
+            style={{ width: `${zoomLevel}%` }}
+            >
+            <LayoutElement />
+          </div>
+        </div>
       </div>
+      <Zoom />
     </div>
   )
 }

src/app/store/index.ts

@@ -3,7 +3,7 @@ import { create } from "zustand"
 
 import { FontName } from "@/lib/fonts"
 import { Preset, getPreset } from "@/app/engine/presets"
-import { LayoutName } from "../layouts"
+import { LayoutName, getRandomLayoutName } from "../layouts"
 
 export const useStore = create<{
   prompt: string
@@ -11,6 +11,7 @@ export const useStore = create<{
   preset: Preset
   panels: string[]
   layout: LayoutName
+  zoomLevel: number
   isGeneratingLogic: boolean
   panelGenerationStatus: Record<number, boolean>
   isGeneratingText: boolean
@@ -20,6 +21,7 @@ export const useStore = create<{
   setPreset: (preset: Preset) => void
   setPanels: (panels: string[]) => void
   setLayout: (layout: LayoutName) => void
+  setZoomLevel: (zoomLevel: number) => void
   setGeneratingLogic: (isGeneratingLogic: boolean) => void
   setGeneratingImages: (panelId: number, value: boolean) => void
   setGeneratingText: (isGeneratingText: boolean) => void
@@ -28,7 +30,8 @@ export const useStore = create<{
   font: "cartoonist",
   preset: getPreset("japanese_manga"),
   panels: [],
-  layout: "Layout1",
+  layout: getRandomLayoutName(),
+  zoomLevel: 50,
   isGeneratingLogic: false,
   panelGenerationStatus: {},
   isGeneratingText: false,
@@ -38,6 +41,7 @@ export const useStore = create<{
   setPreset: (preset: Preset) => set({ preset }),
   setPanels: (panels: string[]) => set({ panels }),
   setLayout: (layout: LayoutName) => set({ layout }),
+  setZoomLevel: (zoomLevel: number) =>  set({ zoomLevel }),
   setGeneratingLogic: (isGeneratingLogic: boolean) => set({ isGeneratingLogic }),
   setGeneratingImages: (panelId: number, value: boolean) => {
 

src/components/ui/slider.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-stone-300 dark:bg-stone-700">
+      <SliderPrimitive.Range className="absolute h-full bg-stone-700 dark:bg-stone-50" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-stone-700 bg-stone-300 ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-stone-50 dark:bg-stone-700 dark:ring-offset-stone-950 dark:focus-visible:ring-stone-300" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

src/components/ui/vertical-slider.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const VerticalSlider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative w-2 h-full grow overflow-hidden rounded-full bg-stone-300 dark:bg-stone-700">
+      <SliderPrimitive.Range className="absolute w-full bg-stone-700 dark:bg-stone-50" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block -ml-1.5 h-5 w-5 rounded-full border-2 border-stone-700 bg-stone-300 ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-stone-50 dark:bg-stone-700 dark:ring-offset-stone-950 dark:focus-visible:ring-stone-300" />
+  </SliderPrimitive.Root>
+))
+VerticalSlider.displayName = "VerticalSlider"
+export { VerticalSlider }