upgrade clap

.nvmrc

@@ -1 +1 @@
-v20.15.1
+v20.17.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbilcke/comic-factory",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@aitube/clap": "0.1.2",
+    "@aitube/clap": "0.2.4",
     "@anthropic-ai/sdk": "^0.25.0",
     "@huggingface/hub": "^0.15.1",
     "@huggingface/inference": "^2.0.0",
@@ -49,7 +49,7 @@
     "i": "^0.3.7",
     "konva": "^9.2.2",
     "lucide-react": "^0.260.0",
-    "next": "14.2.3",
+    "next": "14.2.7",
     "npm": "^10.7.0",
     "openai": "^4.29.2",
     "pick": "^0.0.1",

src/app/layouts/settings.tsx

@@ -1,10 +1,10 @@
-import { ClapMediaOrientation } from "@aitube/clap"
+import { ClapImageRatio } from "@aitube/clap"
 
 import { LayoutName } from "."
 
 export type LayoutSettings = {
   panel: number
-  orientation: ClapMediaOrientation
+  orientation: ClapImageRatio
   width: number
   height: number
 }
@@ -12,41 +12,41 @@ export type LayoutSettings = {
 export const layouts: Record<LayoutName, LayoutSettings[]> = {
   random: [],
   Layout0: [
-    { panel: 0, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
-    { panel: 1, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
-    { panel: 2, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
-    { panel: 3, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
+    { panel: 0, orientation: ClapImageRatio.SQUARE, width: 1024, height: 1024 },
+    { panel: 1, orientation: ClapImageRatio.SQUARE, width: 1024, height: 1024 },
+    { panel: 2, orientation: ClapImageRatio.SQUARE, width: 1024, height: 1024 },
+    { panel: 3, orientation: ClapImageRatio.SQUARE, width: 1024, height: 1024 },
   ],
   Layout1: [
-    { panel: 0, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 768 },
-    { panel: 1, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
-    { panel: 2, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
-    { panel: 3, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 768 },
+    { panel: 0, orientation: ClapImageRatio.LANDSCAPE, width: 1024, height: 768 },
+    { panel: 1, orientation: ClapImageRatio.PORTRAIT, width: 768, height: 1024 },
+    { panel: 2, orientation: ClapImageRatio.PORTRAIT, width: 768, height: 1024 },
+    { panel: 3, orientation: ClapImageRatio.LANDSCAPE, width: 1024, height: 768 },
   ],
   Layout2: [
-    { panel: 0, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
-    { panel: 1, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
-    { panel: 2, orientation: ClapMediaOrientation.PORTRAIT, width: 512, height: 1024 },
-    { panel: 3, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 768 },
+    { panel: 0, orientation: ClapImageRatio.PORTRAIT, width: 768, height: 1024 },
+    { panel: 1, orientation: ClapImageRatio.PORTRAIT, width: 768, height: 1024 },
+    { panel: 2, orientation: ClapImageRatio.PORTRAIT, width: 512, height: 1024 },
+    { panel: 3, orientation: ClapImageRatio.LANDSCAPE, width: 1024, height: 768 },
   ],
   Layout3: [
-    { panel: 0, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 768 },
-    { panel: 1, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
-    { panel: 2, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
-    { panel: 3, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 768 },
+    { panel: 0, orientation: ClapImageRatio.LANDSCAPE, width: 1024, height: 768 },
+    { panel: 1, orientation: ClapImageRatio.PORTRAIT, width: 768, height: 1024 },
+    { panel: 2, orientation: ClapImageRatio.PORTRAIT, width: 768, height: 1024 },
+    { panel: 3, orientation: ClapImageRatio.LANDSCAPE, width: 1024, height: 768 },
   ],
   Layout4: [
-    { panel: 0, orientation: ClapMediaOrientation.PORTRAIT, width: 512, height: 1024 },
-    { panel: 1, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 768 },
-    { panel: 2, orientation: ClapMediaOrientation.PORTRAIT, width: 768, height: 1024 },
-    { panel: 3, orientation: ClapMediaOrientation.LANDSCAPE, width: 1024, height: 512 },
+    { panel: 0, orientation: ClapImageRatio.PORTRAIT, width: 512, height: 1024 },
+    { panel: 1, orientation: ClapImageRatio.LANDSCAPE, width: 1024, height: 768 },
+    { panel: 2, orientation: ClapImageRatio.PORTRAIT, width: 768, height: 1024 },
+    { panel: 3, orientation: ClapImageRatio.LANDSCAPE, width: 1024, height: 512 },
   ],
 }
 /*
 Layout5: [
-  { panel: 0, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
-  { panel: 1, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
-  { panel: 2, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
-  { panel: 3, orientation: ClapMediaOrientation.SQUARE, width: 1024, height: 1024 },
+  { panel: 0, orientation: ClapImageRatio.SQUARE, width: 1024, height: 1024 },
+  { panel: 1, orientation: ClapImageRatio.SQUARE, width: 1024, height: 1024 },
+  { panel: 2, orientation: ClapImageRatio.SQUARE, width: 1024, height: 1024 },
+  { panel: 3, orientation: ClapImageRatio.SQUARE, width: 1024, height: 1024 },
 ]
 */

src/app/store/index.ts

@@ -1,7 +1,7 @@
 "use client"
 
 import { create } from "zustand"
-import { ClapProject, ClapMediaOrientation, ClapSegment, ClapSegmentCategory, ClapSegmentStatus, ClapOutputType, ClapSegmentFilteringMode, filterSegments, newClap, newSegment, parseClap, serializeClap } from "@aitube/clap"
+import { ClapProject, ClapImageRatio, ClapSegment, ClapSegmentCategory, ClapSegmentStatus, ClapOutputType, ClapSegmentFilteringMode, filterSegments, newClap, newSegment, parseClap, serializeClap } from "@aitube/clap"
 
 import { FontName } from "@/lib/fonts"
 import { Preset, PresetName, defaultPreset, getPreset, getRandomPreset } from "@/app/engine/presets"
@@ -483,16 +483,19 @@ export const useStore = create<{
       meta: {
         title: "Untitled", // we don't need a title actually
         description: prompt,
-        prompt: prompt,
+        storyPrompt: prompt,
+        imagePrompt: "",
+        systemPrompt: "",
         synopsis: "",
         licence: "",
-        orientation: ClapMediaOrientation.LANDSCAPE,
+        imageRatio: ClapImageRatio.LANDSCAPE,
         width: 512,
         height: 288,
         isInteractive: false,
         isLoop: false,
         durationInMs: panels.length * defaultSegmentDurationInMs,
-        defaultVideoModel: "SDXL",
+        bpm: 1,
+        frameRate: 1,
       }
     })
 
@@ -508,7 +511,7 @@ export const useStore = create<{
         track: 1,
         startTimeInMs: currentElapsedTimeInMs,
         assetDurationInMs: defaultSegmentDurationInMs,
-        category: ClapSegmentCategory.STORYBOARD,
+        category: ClapSegmentCategory.IMAGE,
         prompt: panel,
         outputType: ClapOutputType.IMAGE,
         assetUrl: renderedScene?.assetUrl || "",
@@ -587,7 +590,7 @@ export const useStore = create<{
         ClapSegmentFilteringMode.START,
         cameraShot,
         clap.segments,
-        ClapSegmentCategory.STORYBOARD,
+        ClapSegmentCategory.IMAGE,
       ).at(0) as (ClapSegment | undefined),
       ui: filterSegments(
         ClapSegmentFilteringMode.START,

src/lib/getImageDimension.ts

@@ -1,14 +1,14 @@
-import { ClapMediaOrientation } from "@aitube/clap"
+import { ClapImageRatio } from "@aitube/clap"
 
 export interface ImageDimension {
   width: number
   height: number
-  orientation: ClapMediaOrientation
+  orientation: ClapImageRatio
 }
 
 export async function getImageDimension(src: string): Promise<ImageDimension> {
   if (!src) {
-    return { width: 0, height: 0, orientation:  ClapMediaOrientation.SQUARE }
+    return { width: 0, height: 0, orientation:  ClapImageRatio.SQUARE }
   }
   const img = new Image()
   img.src = src
@@ -16,11 +16,11 @@ export async function getImageDimension(src: string): Promise<ImageDimension> {
   const width = img.width
   const height = img.height
 
-  let orientation = ClapMediaOrientation.SQUARE
+  let orientation = ClapImageRatio.SQUARE
   if (width > height) { 
-    orientation = ClapMediaOrientation.LANDSCAPE
+    orientation = ClapImageRatio.LANDSCAPE
   } else if (width < height) {
-    orientation = ClapMediaOrientation.PORTRAIT
+    orientation = ClapImageRatio.PORTRAIT
   }
   return { width, height, orientation }
 }

src/lib/useImageDimension.ts

@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react"
 
 import { ImageDimension, getImageDimension } from "./getImageDimension"
-import { ClapMediaOrientation } from "@aitube/clap"
+import { ClapImageRatio } from "@aitube/clap"
 
 export function useImageDimension(src: string) {
   const [dimension, setDimension] = useState<ImageDimension>({
     width: 0,
     height: 0,
-    orientation: ClapMediaOrientation.SQUARE
+    orientation: ClapImageRatio.SQUARE
   })
 
   useEffect(() => {