add toggle for video orientation

package-lock.json

@@ -48,6 +48,7 @@
         "react": "18.3.1",
         "react-device-frameset": "^1.3.4",
         "react-dom": "18.3.1",
+        "react-icons": "^5.2.0",
         "sharp": "^0.33.2",
         "sonner": "^1.4.0",
         "tailwind-merge": "^2.2.1",
@@ -55,6 +56,7 @@
         "tailwindcss-animate": "^1.0.7",
         "ts-node": "^10.9.2",
         "typescript": "5.4.5",
+        "use-file-picker": "^2.1.2",
         "usehooks-ts": "^2.14.0",
         "uuid": "^9.0.1",
         "yaml": "^2.4.1",
@@ -4371,6 +4373,17 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.2.4.tgz",
+      "integrity": "sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/file-type": {
       "version": "16.5.4",
       "resolved": "https://registry.npmjs.org/file-type/-/file-type-16.5.4.tgz",
@@ -6327,6 +6340,14 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.0.tgz",
+      "integrity": "sha512-n52Y7Eb4MgQZHsSZOhSXv1zs2668/hBYKfSRIvKh42yExjyhZu0d1IK2CLLZ3BZB1oo13lDfwx2vOh2z9FTV6Q==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7481,6 +7502,20 @@
         }
       }
     },
+    "node_modules/use-file-picker": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/use-file-picker/-/use-file-picker-2.1.2.tgz",
+      "integrity": "sha512-ZEIzRi1wXeIXDWr5i55gRBVER8rTkSGskDUY94bciTTAZJHlBnOTRLL/LDYjgz6d+US3yELHnRvtBhLxFGtB0A==",
+      "dependencies": {
+        "file-selector": "0.2.4"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",

package.json

@@ -49,6 +49,7 @@
     "react": "18.3.1",
     "react-device-frameset": "^1.3.4",
     "react-dom": "18.3.1",
+    "react-icons": "^5.2.0",
     "sharp": "^0.33.2",
     "sonner": "^1.4.0",
     "tailwind-merge": "^2.2.1",
@@ -56,6 +57,7 @@
     "tailwindcss-animate": "^1.0.7",
     "ts-node": "^10.9.2",
     "typescript": "5.4.5",
+    "use-file-picker": "^2.1.2",
     "usehooks-ts": "^2.14.0",
     "uuid": "^9.0.1",
     "yaml": "^2.4.1",

src/app/main.tsx

@@ -1,8 +1,10 @@
 "use client"
 
-import React, { useRef, useTransition } from 'react'
+import React, { useEffect, useRef, useTransition } from 'react'
+import { IoMdPhoneLandscape, IoMdPhonePortrait } from 'react-icons/io'
 import { ClapProject } from '@aitube/clap'
-import Image from "next/image"
+import Image from 'next/image'
+import { useFilePicker } from 'use-file-picker'
 import { DeviceFrameset } from 'react-device-frameset'
 import 'react-device-frameset/styles/marvel-devices.min.css'
 
@@ -19,6 +21,11 @@ import { exportClapToVideo } from './server/aitube/exportClapToVideo'
 
 import { useStore } from './store'
 import HFLogo from "./hf-logo.svg"
+import { fileToBase64 } from '@/lib/base64/fileToBase64'
+import { Input } from '@/components/ui/input'
+import { Field } from '@/components/form/field'
+import { Label } from '@/components/form/label'
+import { VideoOrientation } from './types'
 
 export function Main() {
   const [_isPending, startTransition] = useTransition()
@@ -26,26 +33,31 @@ export function Main() {
   const promptDraft = useRef("")
   promptDraft.current = storyPromptDraft
   const storyPrompt = useStore(s => s.storyPrompt)
+  const orientation = useStore(s => s.orientation)
   const status = useStore(s => s.status)
   const storyGenerationStatus = useStore(s => s.storyGenerationStatus)
   const voiceGenerationStatus = useStore(s => s.voiceGenerationStatus)
   const imageGenerationStatus = useStore(s => s.imageGenerationStatus)
   const videoGenerationStatus = useStore(s => s.videoGenerationStatus)
-  const generatedClap = useStore(s => s.generatedClap)
-  const generatedVideo = useStore(s => s.generatedVideo)
+  const currentClap = useStore(s => s.currentClap)
+  const currentVideo = useStore(s => s.currentVideo)
+  const currentVideoOrientation = useStore(s => s.currentVideoOrientation)
   const setStoryPromptDraft = useStore(s => s.setStoryPromptDraft)
   const setStoryPrompt = useStore(s => s.setStoryPrompt)
   const setStatus = useStore(s => s.setStatus)
+  const toggleOrientation = useStore(s => s.toggleOrientation)
   const error = useStore(s => s.error)
   const setError = useStore(s => s.setError)
   const setStoryGenerationStatus = useStore(s => s.setStoryGenerationStatus)
   const setVoiceGenerationStatus = useStore(s => s.setVoiceGenerationStatus)
   const setImageGenerationStatus = useStore(s => s.setImageGenerationStatus)
   const setVideoGenerationStatus = useStore(s => s.setVideoGenerationStatus)
-  const setGeneratedClap = useStore(s => s.setGeneratedClap)
+  const setCurrentClap = useStore(s => s.setCurrentClap)
   const setGeneratedVideo = useStore(s => s.setGeneratedVideo)
   const progress = useStore(s => s.progress)
   const setProgress = useStore(s => s.setProgress)
+  const saveClap = useStore(s => s.saveClap)
+  const loadClap = useStore(s => s.loadClap)
 
   const hasPendingTasks =
     storyGenerationStatus === "generating" ||
@@ -55,6 +67,28 @@ export function Main() {
 
   const isBusy = status === "generating" || hasPendingTasks
 
+
+  const { openFilePicker, filesContent, loading } = useFilePicker({
+    accept: '.clap',
+    readAs: "ArrayBuffer"
+  })
+
+  const fileData = filesContent[0]
+
+  useEffect(() => {
+    const fn = async () => {
+      if (fileData?.name) {
+        try {
+          const blob = new Blob([fileData.content])
+          await loadClap(blob, fileData.name)
+        } catch (err) {
+          console.error("failed to load the Clap file:", err)
+        }
+      }
+    }
+    fn()
+  }, [fileData?.name])
+  
   const handleSubmit = async () => {
 
     startTransition(async () => {
@@ -68,14 +102,17 @@ export function Main() {
         setStoryGenerationStatus("generating")
         setStoryPrompt(promptDraft.current)
 
-        clap = await createClap({ prompt: promptDraft.current })
+        clap = await createClap({
+          prompt: promptDraft.current,
+          orientation: useStore.getState().orientation,
+        })
 
         if (!clap) { throw new Error(`failed to create the clap`) }
 
         if (clap.segments.length <= 1) { throw new Error(`failed to generate more than one segments`) }
 
         console.log(`handleSubmit(): received a clap = `, clap)
-        setGeneratedClap(clap)
+        setCurrentClap(clap)
         setStoryGenerationStatus("finished")
       } catch (err) {
         setStoryGenerationStatus("error")
@@ -99,7 +136,7 @@ export function Main() {
         if (!clap) { throw new Error(`failed to edit the storyboards`) }
 
         console.log(`handleSubmit(): received a clap with images = `, clap)
-        setGeneratedClap(clap)
+        setCurrentClap(clap)
         setImageGenerationStatus("finished")
       } catch (err) {
         setImageGenerationStatus("error")
@@ -120,7 +157,7 @@ export function Main() {
         if (!clap) { throw new Error(`failed to edit the dialogues`) }
 
         console.log(`handleSubmit(): received a clap with dialogues = `, clap)
-        setGeneratedClap(clap)
+        setCurrentClap(clap)
         setVoiceGenerationStatus("finished")
       } catch (err) {
         setVoiceGenerationStatus("error")
@@ -139,6 +176,7 @@ export function Main() {
         assetUrl = await exportClapToVideo({ clap })
 
         console.log(`handleSubmit(): received a video: ${assetUrl.slice(0, 60)}...`)
+
         setVideoGenerationStatus("finished")
       } catch (err) {
         setVideoGenerationStatus("error")
@@ -156,6 +194,12 @@ export function Main() {
     })
   }
 
+  // note: we are interested in the *current* video orientation,
+  // not the requested video orientation requested for the next video
+  const isLandscape = currentVideoOrientation === VideoOrientation.LANDSCAPE
+  const isPortrait = currentVideoOrientation === VideoOrientation.PORTRAIT
+  const isSquare = currentVideoOrientation === VideoOrientation.SQUARE
+
   return (
     <div className={cn(
       `fixed`,
@@ -269,42 +313,70 @@ export function Main() {
                       pt-2 md:pt-4
                       "
                       style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}
-                    >Make vertical video stories using AI ✨</p>
+                    >Make video stories using AI ✨</p>
                   </div>
                 </CardHeader>
-                <CardContent className="flex flex-col">
-                  <div className="
-                  flex flex-col
-                  transition-all duration-200 ease-in-out
-                  space-y-2 md:space-y-4 mt-0
-                  ">
-                    <TextareaField
-                      // label="My story:"
-                      // disabled={modelState != 'ready'}
-                      onChange={(e) => {
-                        setStoryPromptDraft(e.target.value)
-                        promptDraft.current = e.target.value
-                      }}
-                      placeholder="Yesterday I was at my favorite pizza place and.."
-                      inputClassName="
+                <CardContent
+                  className="flex flex-col space-y-3"
+                  >
+                  
+                  {/* LEFT MENU BUTTONS + MAIN PROMPT INPUT */}
+                  <div className="flex flex-row space-x-3 w-full">
+                  
+                 
+                    {/*
+                    <div className="
+                      flex flex-col
+                      
+                      w-32 bg-yellow-600
                       transition-all duration-200 ease-in-out
-                      h-32 md:h-56 lg:h-64
-                      "
-                      disabled={isBusy}
-                      value={storyPromptDraft}
-                    />
-                </div>
-                <div className="flex-flex-row space-y-3 pt-4">
-                  <div className="flex flex-row justify-end items-center">
+                      space-y-2 md:space-y-4
+                    ">
+                      put menu here
+                    </div>
+                    */}
+
+                    {/* MAIN PROMPT INPUT */}
                     <div className="
+                      flex flex-col
+                      flex-1
+                      transition-all duration-200 ease-in-out
+                      space-y-2 md:space-y-4
+                    ">
+                      <TextareaField
+                        // label="My story:"
+                        // disabled={modelState != 'ready'}
+                        onChange={(e) => {
+                          setStoryPromptDraft(e.target.value)
+                          promptDraft.current = e.target.value
+                        }}
+                        placeholder="Yesterday I was at my favorite pizza place and.."
+                        inputClassName="
+                        transition-all duration-200 ease-in-out
+                        h-32 md:h-56 lg:h-64
+                        "
+                        disabled={isBusy}
+                        value={storyPromptDraft}
+                      />
+                    
+                    {/* END OF MAIN PROMPT INPUT */}
+                    </div>
+
+                    {/* END OF LEFT MENU BUTTONS + MAIN PROMPT INPUT */}
+                  </div>
+
+                  {/* ACTION BAR */}
+
+                  <div className="
                     w-full
                     flex flex-row
-                    justify-end items-center
+                    justify-between items-center
                     space-x-3">
-                      {/*
+              
+                    {/*
                       <Button
-                        onClick={handleSubmit}
-                        disabled={!storyPromptDraft || isBusy || !generatedClap}
+                        onClick={() => load()}
+                        disabled={isBusy}
                         // variant="ghost"
                         className={cn(
                           `text-sm md:text-base lg:text-lg`,
@@ -314,10 +386,57 @@ export function Main() {
                           storyPromptDraft ? "opacity-100" : "opacity-80"
                         )}
                       >
-                       <span className="mr-1">Save</span>
+                       <span className="mr-1">Load project</span>
                       </Button>
-                      */}
-
+                    */}
+
+                    {/*
+                    <Button
+                      onClick={() => saveClap()}
+                      disabled={!currentClap || isBusy}
+                      // variant="ghost"
+                      className={cn(
+                        `text-sm md:text-base lg:text-lg`,
+                        `bg-stone-800/90 text-amber-400/100 dark:bg-stone-800/90 dark:text-amber-400/100`,
+                        `font-bold`,
+                        `hover:bg-stone-800/100 hover:text-amber-300/100 dark:hover:bg-stone-800/100 dark:hover:text-amber-300/100`,
+                        storyPromptDraft ? "opacity-100" : "opacity-80"
+                      )}
+                    >
+                     <span className="mr-1">Save preset</span>
+                    </Button>
+                    */}
+                    <div></div>
+  
+
+                    <div className=" 
+                    flex flex-row
+                    justify-between items-center
+                    space-x-3
+                    select-none
+                    ">
+                      {/* ORIENTATION SWITCH */}
+                      <div className=" 
+                      flex flex-row
+                      justify-between items-center
+                      cursor-pointer
+                      "
+                      onClick={() => toggleOrientation()}>
+                        <div>Orientation:</div>
+                        <div className="
+                        w-10 h-10
+                        flex flex-row items-center justify-center
+                        "
+                        >
+                          <div className={cn(
+                            `transition-all duration-200 ease-in-out`,
+                            orientation === VideoOrientation.LANDSCAPE ? `rotate-90` : `rotate-0`
+                          )}>
+                            <IoMdPhonePortrait size={24} />
+                          </div>
+                        </div>
+                      </div>
+                      {/* END OF ORIENTATION SWITCH */}
                       <Button
                         onClick={handleSubmit}
                         disabled={!storyPromptDraft || isBusy}
@@ -330,19 +449,15 @@ export function Main() {
                           storyPromptDraft ? "opacity-100" : "opacity-80"
                         )}
                       >
-                       <span className="mr-1.5">Create</span><span className="hidden md:inline">👉</span><span className="inline md:hidden">👇</span>
+                      <span className="mr-1.5">Create</span><span className="hidden md:inline">👉</span><span className="inline md:hidden">👇</span>
                       </Button>
                     </div>
+
+                  {/* END OF ACTION BAR */}
                   </div>
-                    <div className="
-                    text-stone-900/90 dark:text-stone-100/90
-                    text-sm md:text-base lg:text-lg
-                    w-full text-right">
-                   
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
+
+              </CardContent>
+            </Card>
           </div>
           <div className={cn(
             `flex flex-col items-center justify-center`,
@@ -353,16 +468,25 @@ export function Main() {
           )}>
             
             <div className={cn(`
-              -mt-24 md:mt-0
+              -mt-8 md:mt-0
               transition-all duration-200 ease-in-out
-              scale-[0.7] md:scale-[0.9] lg:scale-[1.2]
-            `)}>
+            `,
+             isLandscape
+              ? `scale-[0.9] md:scale-[0.75] lg:scale-[0.9] xl:scale-[1.0] 2xl:scale-[1.1]`
+              : `scale-[0.8] md:scale-[0.9] lg:scale-[1.1]`
+              )}>
               <DeviceFrameset
                 device="Nexus 5"
                 // color="black"
 
-                // note: videos are generated in 576
+                landscape={isLandscape}
+
+                // note 1: videos are generated in 1024x576 or 576x1024
                 // so we need to keep the same ratio here
+
+                // note 2: width and height are fixed, if width always stays 512
+                // that's because the landscape={} parameter will do the switch for us
+
                 width={288}
                 height={512}
               >
@@ -389,12 +513,14 @@ export function Main() {
                       : <span>&nbsp;</span> // to prevent layout changes
                      }</p>
                     </div>
-                  : generatedVideo ? <video
-                    src={generatedVideo}
+                  : currentVideo ? <video
+                    src={currentVideo}
                     controls
-                    autoPlay
                     playsInline
-                    muted
+                    // I think we can't autoplay with sound,
+                    // so let's disable auto-play
+                    // autoPlay
+                    // muted
                     loop
                     className="object-cover"
                     style={{
@@ -404,27 +530,32 @@ export function Main() {
                   items-center justify-center
                   text-lg text-center"></div>}
                 </div>
+
+                <div className={cn(`
+                  fixed
+                  flex flex-row items-center justify-center
+                  bg-transparent
+                  font-sans
+                  -mb-0
+                  `,
+                  isLandscape ? 'h-4' : 'h-16'
+                 )}
+                  style={{ width: isPortrait ? 288 : 512 }}>
+                  <span className="text-stone-100/50 text-4xs"
+                    style={{ textShadow: "rgb(0 0 0 / 80%) 0px 0px 2px" }}>
+                    Powered by
+                  </span>
+                  <span className="ml-1 mr-0.5">
+                    <Image src={HFLogo} alt="Hugging Face" width="14" height="14" />
+                  </span>
+                  <span className="text-stone-100/80 text-3xs font-semibold"
+                    style={{ textShadow: "rgb(0 0 0 / 80%) 0px 0px 2px" }}>Hugging Face</span>
+            
+                </div>
               </DeviceFrameset>
             </div>
           </div>
         </div>
-
-        <div className="
-        md:absolute md:bottom-0 md:right-0
-        flex flex-row items-center justify-end
-        w-full p-6
-        font-sans">
-          <span className="text-stone-950/60 text-2xs"
-            style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}>
-            Powered by
-          </span>
-          <span className="ml-1.5 mr-1">
-            <Image src={HFLogo} alt="Hugging Face" width="16" height="16" />
-          </span>
-          <span className="text-stone-950/60 text-xs font-bold"
-            style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}>Hugging Face</span>
-    
-        </div>
       </div>
       <Toaster />
     </div>

src/app/server/aitube/createClap.ts

@@ -3,21 +3,26 @@
 import { ClapProject } from "@aitube/clap"
 import { createClap as apiCreateClap } from "@aitube/client"
 
+import { VideoOrientation } from "../../types"
 import { getToken } from "./getToken"
 
+// initially I used 1024x512 (a 2:1 ratio)
+// but that is a bit too extreme, most phones only take 16:9
+const RESOLUTION_LONG = 1024
+const RESOLUTION_SHORT = 576
+
 export async function createClap({
   prompt = "",
+  orientation = VideoOrientation.PORTRAIT,
 }: {
   prompt: string
+  orientation: VideoOrientation
 }): Promise<ClapProject> {
   const clap: ClapProject = await apiCreateClap({
     prompt,
 
-    // the vertical video look 🤳
-    // initially I used 1024x512 (a 2:1 ratio)
-    // but that is a bit too extreme, most phones only take 16:9
-    height: 1024,
-    width: 576,
+    height: orientation === VideoOrientation.PORTRAIT ? RESOLUTION_LONG : RESOLUTION_SHORT,
+    width: orientation === VideoOrientation.PORTRAIT ? RESOLUTION_SHORT : RESOLUTION_LONG,
 
     token: await getToken()
   })

src/app/server/aitube/editClapDialogues.ts

@@ -1,7 +1,7 @@
 "use server"
 
 import { ClapProject } from "@aitube/clap"
-import { editClapDialogues as apiEditClapDialogues } from "@aitube/client"
+import { editClapDialogues as apiEditClapDialogues, ClapCompletionMode } from "@aitube/client"
 
 import { getToken } from "./getToken"
 
@@ -12,6 +12,7 @@ export async function editClapDialogues({
 }): Promise<ClapProject> {
   const newClap: ClapProject = await apiEditClapDialogues({
     clap,
+    completionMode: ClapCompletionMode.FULL,
     token: await getToken()
   })
 

src/app/server/aitube/editClapStoryboards.ts

@@ -1,7 +1,7 @@
 "use server"
 
 import { ClapProject } from "@aitube/clap"
-import { editClapStoryboards as apiEditClapStoryboards } from "@aitube/client"
+import { editClapStoryboards as apiEditClapStoryboards, ClapCompletionMode } from "@aitube/client"
 
 import { getToken } from "./getToken"
 
@@ -12,6 +12,7 @@ export async function editClapStoryboards({
 }): Promise<ClapProject> {
   const newClap: ClapProject = await apiEditClapStoryboards({
     clap,
+    completionMode: ClapCompletionMode.FULL,
     token: await getToken()
   })
 

src/app/server/aitube/editClapVideos.ts

@@ -1,7 +1,7 @@
 "use server"
 
 import { ClapProject } from "@aitube/clap"
-import { editClapVideos as apiEditClapVideos } from "@aitube/client"
+import { editClapVideos as apiEditClapVideos, ClapCompletionMode } from "@aitube/client"
 
 import { getToken } from "./getToken"
 
@@ -12,6 +12,7 @@ export async function editClapVideos({
 }): Promise<ClapProject> {
   const newClap: ClapProject = await apiEditClapVideos({
     clap,
+    completionMode: ClapCompletionMode.FULL,
     token: await getToken()
   })
 

src/app/store.ts

@@ -1,21 +1,40 @@
 "use client"
 
-import { GlobalStatus, TaskStatus } from "@/types"
-import { ClapProject } from "@aitube/clap"
+import { ClapProject, parseClap, serializeClap } from "@aitube/clap"
 import { create } from "zustand"
 
+import { GlobalStatus, TaskStatus } from "@/types"
+
+import { VideoOrientation } from "./types"
+import { getVideoOrientation } from "@/lib/utils/getVideoOrientation"
+
 export const useStore = create<{
+  mainCharacterImage: string
+  mainCharacterVoice: string
   storyPromptDraft: string
   storyPrompt: string
+
+  // the desired orientation for the next video
+  // but this won't impact the actual orientation of the fake device container
+  orientation: VideoOrientation
+
   status: GlobalStatus
   storyGenerationStatus: TaskStatus
   voiceGenerationStatus: TaskStatus
   imageGenerationStatus: TaskStatus
   videoGenerationStatus: TaskStatus
-  generatedClap?: ClapProject
-  generatedVideo: string
+  currentClap?: ClapProject
+  currentVideo: string
+
+  // orientation of the currently loaded video (which can be different from `orientation`)
+  // it will impact the actual orientation of the fake device container
+  currentVideoOrientation: VideoOrientation
   progress: number
   error: string
+  toggleOrientation: () => void
+  setCurrentVideoOrientation: (currentVideoOrientation: VideoOrientation) => void
+  setMainCharacterImage: (mainCharacterImage: string) => void
+  setMainCharacterVoice: (mainCharacterVoice: string) => void
   setStoryPromptDraft: (storyPromptDraft: string) => void
   setStoryPrompt: (storyPrompt: string) => void
   setStatus: (status: GlobalStatus) => void
@@ -23,22 +42,51 @@ export const useStore = create<{
   setVoiceGenerationStatus: (voiceGenerationStatus: TaskStatus) => void
   setImageGenerationStatus: (imageGenerationStatus: TaskStatus) => void
   setVideoGenerationStatus: (videoGenerationStatus: TaskStatus) => void
-  setGeneratedClap: (generatedClap?: ClapProject) => void
-  setGeneratedVideo: (generatedVideo: string) => void
+  setCurrentClap: (currentClap?: ClapProject) => void
+
+  // note: this will preload the video, and compute the orientation too
+  setGeneratedVideo: (generatedVideo: string) => Promise<void>
+
   setProgress: (progress: number) => void
   setError: (error: string) => void
+  saveClap: (fileName?: string) => Promise<void>
+  loadClap: (blob: Blob, fileName?: string) => Promise<void>
 }>((set, get) => ({
+  mainCharacterImage: "",
+  mainCharacterVoice: "",
   storyPromptDraft: "Yesterday I was at my favorite pizza place and..",
   storyPrompt: "",
+  orientation: VideoOrientation.PORTRAIT,
   status: "idle",
   storyGenerationStatus: "idle",
   voiceGenerationStatus: "idle",
   imageGenerationStatus: "idle",
   videoGenerationStatus: "idle",
-  generatedClap: undefined,
-  generatedVideo: "",
+  currentClap: undefined,
+  currentVideo: "",
+  currentVideoOrientation: VideoOrientation.PORTRAIT,
   progress: 0,
   error: "",
+  toggleOrientation: () => {
+    const { orientation: previousOrientation, currentVideoOrientation, currentVideo } = get()
+    const orientation =
+      previousOrientation === VideoOrientation.LANDSCAPE
+      ? VideoOrientation.PORTRAIT
+      : VideoOrientation.LANDSCAPE
+
+    set({
+      orientation,
+
+      // we normally don't touch the currentVideoOrientation since it will already contain a video
+      currentVideoOrientation:
+        currentVideo
+        ? currentVideoOrientation
+        : orientation
+    })
+  },
+  setCurrentVideoOrientation: (currentVideoOrientation: VideoOrientation) => { set({ currentVideoOrientation }) },
+  setMainCharacterImage: (mainCharacterImage: string) => { set({ mainCharacterImage }) },
+  setMainCharacterVoice: (mainCharacterVoice: string) => { set({ mainCharacterVoice }) },
   setStoryPromptDraft: (storyPromptDraft: string) => { set({ storyPromptDraft }) },
   setStoryPrompt: (storyPrompt: string) => { set({ storyPrompt }) },
   setStatus: (status: GlobalStatus) => { set({ status }) },
@@ -46,8 +94,49 @@ export const useStore = create<{
   setVoiceGenerationStatus: (voiceGenerationStatus: TaskStatus) => { set({ voiceGenerationStatus }) },
   setImageGenerationStatus: (imageGenerationStatus: TaskStatus) => { set({ imageGenerationStatus }) },
   setVideoGenerationStatus: (videoGenerationStatus: TaskStatus) => { set({ videoGenerationStatus }) },
-  setGeneratedClap: (generatedClap?: ClapProject) => { set({ generatedClap }) },
-  setGeneratedVideo: (generatedVideo: string) => { set({ generatedVideo }) },
+  setCurrentClap: (currentClap?: ClapProject) => { set({ currentClap }) },
+  setGeneratedVideo: async (currentVideo: string): Promise<void> => {
+    const currentVideoOrientation = await getVideoOrientation(currentVideo)
+    set({
+      currentVideo,
+      currentVideoOrientation
+
+    })
+  },
   setProgress: (progress: number) => { set({ progress }) },
   setError: (error: string) => { set({ error }) },
+  saveClap: async (fileName: string = "untitled_story.clap"): Promise<void> => {
+    const { currentClap } = get()
+
+    if (!currentClap) { throw new Error(`cannot save a clap.. if there is no clap`) }
+
+    const currentClapBlob: Blob = await serializeClap(currentClap)
+
+    // Create an object URL for the compressed clap blob
+    const objectUrl = URL.createObjectURL(currentClapBlob)
+  
+    // Create an anchor element and force browser download
+    const anchor = document.createElement("a")
+    anchor.href = objectUrl
+
+    anchor.download = fileName
+
+    document.body.appendChild(anchor) // Append to the body (could be removed once clicked)
+    anchor.click() // Trigger the download
+  
+    // Cleanup: revoke the object URL and remove the anchor element
+    URL.revokeObjectURL(objectUrl)
+    document.body.removeChild(anchor)
+  },
+  loadClap: async (blob: Blob, fileName: string = "untitled_story.clap"): Promise<void> => {
+    if (!blob) {
+      throw new Error(`missing blob`)
+    }
+
+    const currentClap: ClapProject = await parseClap(blob)
+
+    set({
+      currentClap,
+    })
+  },
 }))

src/app/types.ts

@@ -0,0 +1,5 @@
+export enum VideoOrientation {
+  PORTRAIT = "portrait",
+  LANDSCAPE = "landscape",
+  SQUARE = "square"
+}

src/components/form/field.tsx

@@ -0,0 +1,7 @@
+import { ReactNode } from "react"
+
+export function Field({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex flex-col space-y-2">{children}</div>
+  )
+}

src/components/form/input-field.tsx

@@ -25,4 +25,4 @@ export function InputField({
       <Input {...props} className={cn("text-xl", inputClassName)} />
     </div>
   )
-}
+}

src/components/form/label.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react"
+
+import { cn } from "@/lib/utils/cn"
+
+export function Label({ children, className = "" }: { children: ReactNode; className?: string }) {
+  return (
+    <label className={cn(`text-base font-semibold text-zinc-700`, className)}>{children}</label>
+  )
+}

src/components/form/switch-field.tsx

@@ -0,0 +1,32 @@
+import { ComponentProps } from "react"
+
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils/cn"
+
+import { Switch } from "../ui/switch"
+
+export function SwitchField({
+  label,
+  className = "",
+  labelClassName = "",
+  switchClassName = "",
+  ...props
+}: ComponentProps<typeof Switch> & {
+  label?: string;
+  className?: string;
+  labelClassName?: string;
+  switchClassName?: string;
+}) {
+  return (
+    <div className={cn(
+      `flex flex-col space-y-3 items-start`,
+      className
+      )}>
+      {label && <Label className={cn(`
+      text-base md:text-lg lg:text-xl
+       text-stone-900/90 dark:text-stone-100/90
+       `, labelClassName)}>{label}</Label>}
+      <Switch {...props} className={switchClassName} />
+    </div>
+  )
+}

src/lib/base64/fileToBase64.ts

@@ -0,0 +1,8 @@
+export function fileToBase64(file: File | Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+    fileReader.readAsDataURL(file);
+    fileReader.onload = () => { resolve(`${fileReader.result}`); };
+    fileReader.onerror = (error) => { reject(error); };
+  });
+}

src/lib/utils/getVideoOrientation.ts

@@ -0,0 +1,21 @@
+import { VideoOrientation } from "@/app/types"
+
+/**
+ * Determine the video orientation from a video URL (data-uri or hosted)
+ * 
+ * @param url 
+ * @returns 
+ */
+export async function getVideoOrientation(url: string): Promise<VideoOrientation> {
+  return new Promise<VideoOrientation>(resolve => {
+    const video = document.createElement('video')
+    video.addEventListener( "loadedmetadata", function () {
+      resolve(
+        this.videoHeight < this.videoWidth ? VideoOrientation.LANDSCAPE :
+        this.videoHeight > this.videoWidth ? VideoOrientation.PORTRAIT :
+        VideoOrientation.SQUARE
+      )
+    }, false)
+    video.src = url
+  })
+}