experimental support for images

src/app/config.ts

@@ -3,4 +3,6 @@ export const defaultPrompt =
   // "underwater footage of the loch ness"
   // "beautiful underwater footage of a clownfish swimming around coral" // who discovers a secret pirate treasure chest"
   // "beautiful footage of a Caribbean fishing village and bay, sail ships, during golden hour, no captions"
-  "videogame gameplay footage, first person, exploring some mysterious ruins, no commentary"
+  "videogame gameplay footage, first person, exploring some mysterious ruins, no commentary"
+
+export const localStorageStoryDraftKey = "AI_STORIES_FACTORY_STORY_PROMPT_DRAFT"

src/app/main.tsx

@@ -1,596 +1,32 @@
 "use client"
 
-import React, { useEffect, useRef, useTransition } from "react"
+import React from "react"
 import { IoMdPhonePortrait } from "react-icons/io"
 import { GiRollingDices } from "react-icons/gi"
-import { FaCloudDownloadAlt, FaDiscord } from "react-icons/fa"
-import { GiSpellBook } from "react-icons/gi"
-import { useLocalStorage } from "usehooks-ts"
-import { ClapProject, ClapMediaOrientation, ClapSegmentCategory, updateClap } from "@aitube/clap"
-import Image from "next/image"
-import { useSearchParams } from "next/navigation"
-import { useFilePicker } from "use-file-picker"
-import { DeviceFrameset } from "react-device-frameset"
-import "react-device-frameset/styles/marvel-devices.min.css"
+import { ClapMediaOrientation } from "@aitube/clap"
 
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Toaster } from "@/components/ui/sonner"
 import { TextareaField } from "@/components/form/textarea-field"
-import { cn } from "@/lib/utils/cn"
 
-import { createClap } from "./server/aitube/createClap"
-import { editClapEntities } from "./server/aitube/editClapEntities"
-import { editClapDialogues } from "./server/aitube/editClapDialogues"
-import { editClapStoryboards } from "./server/aitube/editClapStoryboards"
-import { editClapSounds } from "./server/aitube/editClapSounds"
-import { editClapMusic } from "./server/aitube/editClapMusic"
-import { editClapVideos } from "./server/aitube/editClapVideos"
-import { exportClapToVideo } from "./server/aitube/exportClapToVideo"
-
-import { useStore } from "./store"
-import HFLogo from "./hf-logo.svg"
-import { Input } from "@/components/ui/input"
-import { Field } from "@/components/form/field"
-import { Label } from "@/components/form/label"
-import { getParam } from "@/lib/utils/getParam"
-import { GenerationStage } from "@/types"
-import { FileContent } from "use-file-picker/dist/interfaces"
-import { generateRandomStory } from "@/lib/utils/generateRandomStory"
-import { logImage } from "@/lib/utils/logImage"
+import { cn, generateRandomStory } from "@/lib/utils"
 import { defaultPrompt } from "./config"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { useOrientation, useProgressTimer, useQueryStringParams, useStoryPromptDraft } from "@/lib/hooks"
+import { BottomBar, VideoPreview } from "@/components/interface"
+import { MainTitle } from "@/components/interface/main-title"
+import { LoadClapButton } from "@/components/interface/load-clap-button"
+import { SaveClapButton } from "@/components/interface/save-clap-button"
+import { useProcessors } from "@/lib/hooks/useProcessors"
+import { Characters } from "@/components/interface/characters"
 
 export function Main() {
-  const [storyPromptDraft, setStoryPromptDraft] = useLocalStorage<string>(
-    "AI_STORIES_FACTORY_STORY_PROMPT_DRAFT",
-    defaultPrompt
-  )
-  const promptDraftRef = useRef("")
-  promptDraftRef.current = storyPromptDraft
-
-  const [_isPending, startTransition] = useTransition()
-
-  const storyPrompt = useStore(s => s.storyPrompt)
-  const mainCharacterImage = useStore(s => s.mainCharacterImage)
-  const mainCharacterVoice = useStore(s => s.mainCharacterVoice)
-  const orientation = useStore(s => s.orientation)
-  const setOrientation = useStore(s => s.setOrientation)
-  const status = useStore(s => s.status)
-  const parseGenerationStatus = useStore(s => s.parseGenerationStatus)
-  const storyGenerationStatus = useStore(s => s.storyGenerationStatus)
-  const assetGenerationStatus = useStore(s => s.assetGenerationStatus)
-  const soundGenerationStatus = useStore(s => s.soundGenerationStatus)
-  const musicGenerationStatus = useStore(s => s.musicGenerationStatus)
-  const voiceGenerationStatus = useStore(s => s.voiceGenerationStatus)
-  const imageGenerationStatus = useStore(s => s.imageGenerationStatus)
-  const videoGenerationStatus = useStore(s => s.videoGenerationStatus)
-  const finalGenerationStatus = useStore(s => s.finalGenerationStatus)
-  const currentClap = useStore(s => s.currentClap)
-  const currentVideo = useStore(s => s.currentVideo)
-  const currentVideoOrientation = useStore(s => s.currentVideoOrientation)
-  const setStoryPrompt = useStore(s => s.setStoryPrompt)
-  const setMainCharacterImage = useStore(s => s.setMainCharacterImage)
-  const setMainCharacterVoice = useStore(s => s.setMainCharacterVoice)
-  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 setParseGenerationStatus = useStore(s => s.setParseGenerationStatus)
-  const setStoryGenerationStatus = useStore(s => s.setStoryGenerationStatus)
-  const setAssetGenerationStatus = useStore(s => s.setAssetGenerationStatus)
-  const setSoundGenerationStatus = useStore(s => s.setSoundGenerationStatus)
-  const setMusicGenerationStatus = useStore(s => s.setMusicGenerationStatus)
-  const setVoiceGenerationStatus = useStore(s => s.setVoiceGenerationStatus)
-  const setImageGenerationStatus = useStore(s => s.setImageGenerationStatus)
-  const setVideoGenerationStatus = useStore(s => s.setVideoGenerationStatus)
-  const setFinalGenerationStatus = useStore(s => s.setFinalGenerationStatus)
-  const setCurrentClap = useStore(s => s.setCurrentClap)
-  const setCurrentVideo = useStore(s => s.setCurrentVideo)
-  const progress = useStore(s => s.progress)
-  const setProgress = useStore(s => s.setProgress)
-  const saveVideo = useStore(s => s.saveVideo)
-  const saveClap = useStore(s => s.saveClap)
-  const loadClap = useStore(s => s.loadClap)
-
-  // let's disable this for now
-  const canSeeBetaFeatures = true // getParam<boolean>("beta", false)
-
-  const isBusy = useStore(s => s.isBusy)
-  const busyRef = useRef(isBusy)
-  busyRef.current = isBusy
-
-  const importStory = async (fileData: FileContent<ArrayBuffer>): Promise<{
-    clap: ClapProject
-    regenerateVideo: boolean
-  }> => {
-    if (!fileData?.name) { throw new Error(`invalid file (missing file name)`) }
-
-    const {
-      setParseGenerationStatus,
-    } = useStore.getState()
-
-    setParseGenerationStatus("generating")
-
-    try {
-      const blob = new Blob([fileData.content])
-      const res = await loadClap(blob, fileData.name)
-
-      if (!res?.clap) { throw new Error(`failed to load the clap file`) }
-
-      setParseGenerationStatus("finished")
-      return res
-    } catch (err) {
-      console.error("failed to load the Clap file:", err)
-      setParseGenerationStatus("error")
-      throw err
-    }
-  }
-
-
-  const generateStory = async (): Promise<ClapProject> => {
-
-    let clap: ClapProject | undefined = undefined
-    try {
-      setProgress(0)
-
-      setStatus("generating")
-      setStoryGenerationStatus("generating")
-      setStoryPrompt(promptDraftRef.current)
-
-      clap = await createClap({
-        prompt: promptDraftRef.current,
-        orientation: useStore.getState().orientation,
-
-        turbo: true,
-      })
-
-      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)
-      setCurrentClap(clap)
-      setStoryGenerationStatus("finished")
-
-      console.log("---------------- GENERATED STORY ----------------")
-      console.table(clap.segments, [
-        // 'startTimeInMs',
-        'endTimeInMs',
-        // 'track',
-        'category',
-        'prompt'
-      ])
-      return clap
-    } catch (err) {
-      setStoryGenerationStatus("error")
-      throw err
-    }
-  }
-
-  const generateEntities = async (clap: ClapProject): Promise<ClapProject> => {
-    try {
-      // setProgress(20)
-      setAssetGenerationStatus("generating")
-      clap = await editClapEntities({
-        clap,
-
-        // generating entities requires a "smart" LLM
-        turbo: false,
-        // turbo: true,
-      }).then(r => r.promise)
-
-      if (!clap) { throw new Error(`failed to edit the entities`) }
-
-      console.log(`handleSubmit(): received a clap with entities = `, clap)
-      setAssetGenerationStatus("finished")
-      console.log("---------------- GENERATED ENTITIES ----------------")
-      console.table(clap.entities, [
-        'category',
-        'label',
-        'imagePrompt',
-        'appearance'
-      ])
-      return clap
-    } catch (err) {
-      setAssetGenerationStatus("error")
-      throw err
-    }
-  }
-
-  const generateSounds = async (clap: ClapProject): Promise<ClapProject> => {
-    try {
-      // setProgress(30)
-      setSoundGenerationStatus("generating")
-
-      clap = await editClapSounds({
-        clap,
-        turbo: true
-      }).then(r => r.promise)
-
-      if (!clap) { throw new Error(`failed to edit the sound`) }
-
-      console.log(`handleSubmit(): received a clap with sound = `, clap)
-      setSoundGenerationStatus("finished")
-      console.log("---------------- GENERATED SOUND ----------------")
-      console.table(clap.segments.filter(s => s.category === ClapSegmentCategory.SOUND), [
-        'endTimeInMs',
-        'prompt',
-        'entityId',
-      ])
-      return clap
-    } catch (err) {
-      setSoundGenerationStatus("error")
-      throw err
-    }
-  }
-
-  const generateMusic = async (clap: ClapProject): Promise<ClapProject> => {
-    try {
-      // setProgress(30)
-      setMusicGenerationStatus("generating")
-
-      clap = await editClapMusic({
-        clap,
-        turbo: true
-      }).then(r => r.promise)
-
-      if (!clap) { throw new Error(`failed to edit the music`) }
-
-      console.log(`handleSubmit(): received a clap with music = `, clap)
-      setMusicGenerationStatus("finished")
-      console.log("---------------- GENERATED MUSIC ----------------")
-      console.table(clap.segments.filter(s => s.category === ClapSegmentCategory.MUSIC), [
-        'endTimeInMs',
-        'prompt',
-        'entityId',
-      ])
-      return clap
-    } catch (err) {
-      setMusicGenerationStatus("error")
-      throw err
-    }
-  }
-
-  const generateStoryboards = async (clap: ClapProject): Promise<ClapProject> => {
-    try {
-      // setProgress(40)
-      setImageGenerationStatus("generating")
-      clap = await editClapStoryboards({
-        clap,
-        // if we use entities, then we MUST use turbo
-        // that's because turbo uses PulID,
-        // but SDXL doesn't
-        turbo: true,
-      }).then(r => r.promise)
-
-      if (!clap) { throw new Error(`failed to edit the storyboards`) }
-
-      // const fusion = 
-      console.log(`handleSubmit(): received a clap with images = `, clap)
-      setImageGenerationStatus("finished")
-      console.log("---------------- GENERATED STORYBOARDS ----------------")
-      clap.segments
-        .filter(s => s.category === ClapSegmentCategory.STORYBOARD)
-        .forEach((s, i) => {
-          if (s.status === "completed" && s.assetUrl) {
-            // console.log(`  [${i}] storyboard: ${s.prompt}`)
-            logImage(s.assetUrl, 0.35)
-          } else {
-            console.log(`  [${i}] failed to generate storyboard`)
-          }
-          // console.log(`------------------`)
-        })
-      console.table(clap.segments.filter(s => s.category === ClapSegmentCategory.STORYBOARD), [
-        'endTimeInMs',
-        'prompt',
-        'assetUrl'
-      ])
-      return clap
-    } catch (err) {
-      setImageGenerationStatus("error")
-      throw err
-    }
-  }
-
-  const generateVideos = async (clap: ClapProject): Promise<ClapProject> => {
-    try {
-      // setProgress(50)
-      setVideoGenerationStatus("generating")
-
-      clap = await editClapVideos({
-        clap,
-        turbo: false
-      }).then(r => r.promise)
-
-      if (!clap) { throw new Error(`failed to edit the videos`) }
-
-      console.log(`handleSubmit(): received a clap with videos = `, clap)
-      setVideoGenerationStatus("finished")
-      console.log("---------------- GENERATED VIDEOS ----------------")
-      console.table(clap.segments.filter(s => s.category === ClapSegmentCategory.VIDEO), [
-        'endTimeInMs',
-        'prompt',
-        'entityId',
-      ])
-      return clap
-    } catch (err) {
-      setVideoGenerationStatus("error")
-      throw err
-    }
-  }
-
-  const generateStoryboardsThenVideos = async (clap: ClapProject): Promise<ClapProject> => {
-    clap = await generateStoryboards(clap)
-    clap = await generateVideos(clap)
-    return clap
-  }
-
-
-  const generateDialogues = async (clap: ClapProject): Promise<ClapProject> => {
-    try {
-      // setProgress(70)
-      setVoiceGenerationStatus("generating")
-      clap = await editClapDialogues({
-        clap,
-        turbo: true
-      }).then(r => r.promise)
-
-      if (!clap) { throw new Error(`failed to edit the dialogues`) }
-
-      console.log(`handleSubmit(): received a clap with dialogues = `, clap)
-      setVoiceGenerationStatus("finished")
-      console.log("---------------- GENERATED DIALOGUES ----------------")
-      console.table(clap.segments.filter(s => s.category === ClapSegmentCategory.DIALOGUE), [
-        'endTimeInMs',
-        'prompt',
-        'entityId',
-      ])
-      return clap
-    } catch (err) {
-      setVoiceGenerationStatus("error")
-      throw err
-    }
-  }
-
-  const generateFinalVideo = async (clap: ClapProject): Promise<string> => {
-
-    let assetUrl = ""
-    try {
-      // setProgress(85)
-      setFinalGenerationStatus("generating")
-      assetUrl = await exportClapToVideo({
-        clap,
-        turbo: true
-      })
-
-      setCurrentVideo(assetUrl)
-
-      if (assetUrl.length < 128) { throw new Error(`generateFinalVideo(): the generated video is too small, so we failed`) }
-
-      console.log(`generateFinalVideo(): received a video: ${assetUrl.slice(0, 120)}...`)
-      setFinalGenerationStatus("finished")
-      return assetUrl
-    } catch (err) {
-      setFinalGenerationStatus("error")
-      throw err
-    }
-  }
-  
-  const handleSubmit = async () => {
-    setStatus("generating")
-    busyRef.current = true
-
-    startTransition(async () => {
-      setStatus("generating")
-      busyRef.current = true
-  
-      console.log(`handleSubmit(): generating a clap using prompt = "${promptDraftRef.current}" `)
-
-      try {
-        let clap = await generateStory()
-        
-        setCurrentClap(clap)
-
-        const tasks = [
-          generateMusic(clap),
-          generateStoryboardsThenVideos(clap)
-        ]
-
-        const claps = await Promise.all(tasks)
-
-        console.log(`finished processing ${tasks.length} tasks in parallel`)
-
-        for (const newerClap of claps) {
-          clap = await updateClap(clap, newerClap, {
-            overwriteMeta: false,
-            inlineReplace: true,
-          })
-          setCurrentClap(clap)
-        }
-
-        /*
-        clap = await claps.reduce(async (existingClap, newerClap) =>
-          updateClap(existingClap, newerClap, {
-            overwriteMeta: false,
-            inlineReplace: true,
-          })
-        , Promise.resolve(clap)
-        */
-
-       
-        // We can't have consistent characters with video (yet)
-        // clap = await generateEntities(clap)
-
-        /*
-        if (mainCharacterImage) {
-          console.log("handleSubmit(): User specified a main character image")
-          // various strategies here, for instance we can assume that the first character is the main character,
-          // or maybe a more reliable way is to count the number of occurrences.
-          // there is a risk of misgendering, so ideally we should add some kind of UI to do this,
-          // such as a list of characters.
-        }
-        */
-
-        // let's skip storyboards for now
-        // clap = await generateStoryboards(clap)
-
-        // clap = await generateVideos(clap)
-        // clap = await generateDialogues(clap)
-     
-        
-        
-        console.log("final clap: ", clap)
-        setCurrentClap(clap)
-        await generateFinalVideo(clap)
-
-        setStatus("finished")
-        setError("")
-      } catch (err) {
-        console.error(`failed to generate: `, err)
-        setStatus("error")
-        setError(`Error, please contact an admin on Discord (${err})`)
-      }
-    })
-  }
-
-
-  const { openFilePicker, filesContent } = useFilePicker({
-    accept: '.clap',
-    readAs: "ArrayBuffer"
-  })
-  const fileData = filesContent[0]
-
-  useEffect(() => {
-    const fn = async () => {
-      if (!fileData?.name) { return }
-
-      const { setStatus, setProgress } = useStore.getState()
-
-      setProgress(0)
-      setStatus("generating")
-
-      try {
-        let { clap, regenerateVideo } = await importStory(fileData)
-        
-        // clap = await generateSounds(clap)
-
-        // setCurrentClap(clap)
-
-        console.log("loadClap(): clap = ", clap)
-
-        // it is important to skip regeneration if we already have a video
-        if (regenerateVideo) {
-          console.log(`regenerating music and videos..`)
-          const claps = await Promise.all([
-            generateMusic(clap),
-            generateVideos(clap)
-          ])
-
-          // console.log("finished processing the 2 tasks in parallel")
-
-          for (const newerClap of claps) {
-            clap = await updateClap(clap, newerClap, {
-              overwriteMeta: false,
-              inlineReplace: true,
-            })
-          }
-
-
-          setCurrentClap(clap)
-
-          await generateFinalVideo(clap)
-
-        } else {
-          console.log(`skipping music and video regeneration`)
-        }
-
-        setStatus("finished")
-        setProgress(100)
-        setError("")
-      } catch (err) {
-        console.error(`failed to import: `, err)
-        setStatus("error")
-        setError(`${err}`)
-      }
-     
-    }
-    fn()
-  }, [fileData?.name])
-  
-  // note: we are interested in the *current* video orientation,
-  // not the requested video orientation requested for the next video
-  const isLandscape = currentVideoOrientation === ClapMediaOrientation.LANDSCAPE
-  const isPortrait = currentVideoOrientation === ClapMediaOrientation.PORTRAIT
-  const isSquare = currentVideoOrientation === ClapMediaOrientation.SQUARE
-
-  const runningRef = useRef(false)
-  const timerRef = useRef<NodeJS.Timeout>()
-
-  const timerFn = async () => {
-    const { isBusy, progress, stage } = useStore.getState()
-
-    clearTimeout(timerRef.current)
-    if (!isBusy || stage === "idle") {
-      return
-    }
-
-    /*
-    console.log("progress function:", {
-      stage,
-      delay: progressDelayInMsPerStage[stage],
-      progress,
-    })
-    */
-    useStore.setState({
-      // progress: Math.min(maxProgressPerStage[stage], progress + 1) 
-      progress: Math.min(100, progress + 1) 
-    })
-
-    // timerRef.current = setTimeout(timerFn, progressDelayInMsPerStage[stage])
-    timerRef.current = setTimeout(timerFn, 1200)
-  }
-
-  useEffect(() => {
-    timerFn()
-    clearTimeout(timerRef.current)
-    if (!isBusy) { return }
-    timerRef.current = setTimeout(timerFn, 0)
-  }, [isBusy])
-
-  // this is how we support query string parameters
-  // ?prompt=hello <- set a default prompt
-  // ?prompt=hello&autorun=true <- automatically run the app
-  // ?orientation=landscape <- can be "landscape" or "portrait" (default)
-  const searchParams = useSearchParams()
-  const queryStringPrompt = (searchParams?.get('prompt') as string) || ""
-  const queryStringAutorun = (searchParams?.get('autorun') as string) || ""
-  const queryStringOrientation = (searchParams?.get('orientation') as string) || ""
-  useEffect(() => {
-    if (queryStringOrientation?.length > 1) {
-      console.log(`orientation = "${queryStringOrientation}"`)
-      const orientation =
-        queryStringOrientation.trim().toLowerCase() === "landscape"
-        ? ClapMediaOrientation.LANDSCAPE
-        : ClapMediaOrientation.PORTRAIT
-      setOrientation(orientation)
-    }
-    if (queryStringPrompt?.length > 1) {
-      console.log(`prompt = "${queryStringPrompt}"`)
-      if (queryStringPrompt !== promptDraftRef.current) {
-        setStoryPromptDraft(queryStringPrompt)
-      }
-      const maybeAutorun = queryStringAutorun.trim().toLowerCase()
-      console.log(`autorun = "${maybeAutorun}"`)
-
-      // note: during development we will be called twice,
-      // which is why we have a guard on  busyRef.current
-      if (maybeAutorun === "true" || maybeAutorun === "1" && !busyRef.current) {
-        handleSubmit()
-      }
-    }
-  }, [queryStringPrompt, queryStringAutorun, queryStringOrientation])
-
+  const { storyPromptDraft, setStoryPromptDraft, promptDraftRef } = useStoryPromptDraft()
+  const  { isBusy } = useProgressTimer()
+  const { orientation, toggleOrientation } = useOrientation()
+  const { handleSubmit } = useProcessors()
+  useQueryStringParams()
   return (
     <TooltipProvider>
       <div className={cn(
@@ -659,60 +95,7 @@ export function Main() {
 
               )}>
                 <CardHeader>
-                  <div className="flex flex-col justify-start">
-                    <div className="
-                      flex flex-row
-                      items-center justify-center
-                      transition-all duration-200 ease-in-out
-                      px-3
-                      
-                      rounded-full">
-                      <div
-                      className="
-                        flex
-                        transition-all duration-200 ease-in-out
-                        items-center justify-center text-center
-                        w-10 h-10 md:w-12 md:h-12 lg:w-16 lg:h-16
-                        text-3xl md:text-4xl lg:text-5xl
-                        rounded-lg
-                        mr-2
-                        font-sans
-                        bg-amber-400 dark:bg-amber-400
-                      
-                        text-stone-950/80 dark:text-stone-950/80 font-bold
-                        "
-                        >AI</div>
-                        <div
-                          className="
-                          transition-all duration-200 ease-in-out
-                          text-amber-400 dark:text-amber-400
-                          text-3xl md:text-4xl lg:text-5xl
-                          "
-
-                          style={{ textShadow: "#00000035 0px 0px 2px" }}
-                      
-                          /*
-                          className="
-                          text-5xl
-                          bg-gradient-to-br from-yellow-300 to-yellow-500
-                          inline-block text-transparent bg-clip-text
-                          py-6
-                          "
-                          */
-                        >Stories Factory</div>
-                      </div>
-
-                      <p
-                        className="
-                        transition-all duration-200 ease-in-out
-                        text-stone-900/90 dark:text-stone-900/90
-                        text-lg md:text-xl lg:text-2xl
-                        text-center 
-                        pt-2 md:pt-4
-                        "
-                        style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}
-                      >Make video stories using AI ✨</p>
-                    </div>
+                    <MainTitle />
                   </CardHeader>
                   <CardContent
                     className="flex flex-col space-y-3"
@@ -806,75 +189,24 @@ export function Main() {
                       */}
 
                       <div className="
-                
-                      flex flex-row
-                      justify-between items-center
-                      space-x-3">
-                        
-                
-                      {canSeeBetaFeatures && 
-                        <Tooltip>
-                          <TooltipTrigger asChild><Button
-              
-                            onClick={openFilePicker}
-                            disabled={isBusy}
-                            // variant="ghost"
-                            className={cn(
-                              `text-xs md:text-sm lg:text-base`,
-                              `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="hidden xl:inline mr-1">Load .clap</span>
-                            <span className="inline xl:hidden mr-1">Load .clap</span>
-                          </Button></TooltipTrigger>
-                        <TooltipContent side="top">
-                          <p className="text-xs font-normal text-stone-100/90 text-center">
-                            Clap is a new AI format,<br/>check out the academy<br/>to learn more about it.
-                          </p>
-                        </TooltipContent>
-                      </Tooltip>}
-                
-    
-    
-                      {canSeeBetaFeatures &&
-                        <Tooltip>
-                          <TooltipTrigger asChild><Button
-                        onClick={() => saveClap()}
-                        disabled={!currentClap || isBusy}
-                        // variant="ghost"
-                        className={cn(
-                          `text-xs md:text-sm lg:text-base`,
-                          `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="hidden xl:inline mr-1">Save .clap</span>
-                        <span className="inline xl:hidden mr-1">Save .clap</span>
-                      </Button></TooltipTrigger>
-                        <TooltipContent side="top">
-                          <p className="text-xs font-normal text-stone-100/90 text-center">
-                          Clap is a new AI format,<br/>check out the academy<br/>to learn more about it.
-                          </p>
-                        </TooltipContent>
-                      </Tooltip> 
-                      }
+                        flex flex-row
+                        justify-between items-center
+                        space-x-3">
+                        <LoadClapButton />
+                        <SaveClapButton />
+                        <Characters />
                       </div>
     
                       <div className=" 
-                      flex flex-row
-                      justify-between items-center
-                      space-x-3
-                      select-none
-                      ">
+                        flex flex-row
+                        justify-between items-center
+                        space-x-3
+                        select-none
+                        ">
 
-  
-                        {/* RANDOMNESS SWITCH */}
-                        <div className=" 
+ {/* RANDOMNESS SWITCH */}
+ <Tooltip>
+                        <TooltipTrigger asChild><div className=" 
                         flex flex-row
                         justify-between items-center
                         cursor-pointer
@@ -901,10 +233,15 @@ export function Main() {
                           >
                             <GiRollingDices size={24} />
                           </div>
-                        </div>
+                        </div></TooltipTrigger>
+                        <TooltipContent side="top">
+                          <p className="text-xs font-normal text-stone-100/90 text-center">
+                          Generate a random prompt.
+                          </p>
+                        </TooltipContent>
+                      </Tooltip> 
                         {/* END OF RANDOMNESS SWITCH */}
 
-
                         {/* ORIENTATION SWITCH */}
                         <div className=" 
                         flex flex-row
@@ -965,180 +302,10 @@ export function Main() {
 
               `-mt-[20px] -mb-[90px] md:-mt-0 md:-mb-0`,
             )}>
-              
-              <div className={cn(`
-                -mt-8 md:mt-0
-                transition-all duration-200 ease-in-out
-              `,
-              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"
-
-                  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}
-                >
-                  <div className="
-                  flex flex-col items-center justify-center
-                  w-full h-full
-                  bg-black text-white
-                  ">
-                    {isBusy ? <div className="
-                    flex flex-col 
-                    items-center justify-center
-                    text-center space-y-1.5">
-                      <p className="text-2xl font-bold">{progress}%</p> 
-                      <p className="text-base text-white/70">{isBusy
-                        ? (
-                          // note: some of those tasks are running in parallel,
-                          // and some are super-slow (like music or video)
-                          // by carefully selecting in which order we set the ternaries,
-                          // we can create the illusion that we just have a succession of reasonably-sized tasks
-                          storyGenerationStatus === "generating" ? "Writing story.."
-                          : parseGenerationStatus === "generating" ? "Loading the project.."
-                          : assetGenerationStatus === "generating" ? "Casting characters.."
-                          : imageGenerationStatus === "generating" ? "Creating storyboards.."
-                          : soundGenerationStatus === "generating" ? "Recording sounds.."
-                          : videoGenerationStatus === "generating" ? "Filming shots.."
-                          : musicGenerationStatus === "generating" ? "Producing music.."
-                          : voiceGenerationStatus === "generating" ? "Recording dialogues.."
-                          : finalGenerationStatus === "generating" ? "Editing final cut.."
-                          : "Please wait.."
-                        )
-                        : status === "error"
-                        ? <span>{error || ""}</span>
-                        : <span>{error ? error : <span>&nbsp;</span>}</span> // to prevent layout changes
-                      }</p>
-                      </div>
-                    : (currentVideo && currentVideo?.length > 128) ? <video
-                      src={currentVideo}
-                      controls
-                      playsInline
-                      // I think we can't autoplay with sound,
-                      // so let's disable auto-play
-                      // autoPlay
-                      // muted
-                      loop
-                      className="object-cover"
-                      style={{
-                      }}
-                    /> : <div  className="
-                    flex flex-col 
-                    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-14'
-                  )}
-                    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={13} />
-                    </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>
-                
-                {(currentVideo && currentVideo.length > 128) ? <div
-                  className={cn(`
-                  w-full
-                  flex flex-row
-                  items-center justify-center
-                  transition-all duration-150 ease-in-out
-  
-                text-stone-800
-            
-                  group
-                  pt-2 md:pt-4
-                  `, 
-                    isBusy ? 'opacity-50' : 'cursor-pointer opacity-100 hover:scale-110 active:scale-150 hover:text-stone-950 active:text-black'
-                  )}
-                  style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}
-                  onClick={isBusy ? undefined : saveVideo}
-                >
-                  <div className="
-                  text-base md:text-lg lg:text-xl
-                  transition-all duration-150 ease-out
-                  group-hover:animate-swing
-                  "><FaCloudDownloadAlt /></div>
-                  <div className="text-xs md:text-sm lg:text-base">&nbsp;Download</div>
-                </div> : null}
-              </div>
+              <VideoPreview />
             </div>
           </div>
-          <div
-            className="
-              fixed
-            
-              left-4 md:left-8
-              bottom-4
-              flex flex-col md:flex-row
-              md:items-center justify-center
-              space-y-4 md:space-x-4 md:space-y-0
-      
-            ">
-            <a
-              className="
-              flex
-              no-underline
-              animation-all duration-150 ease-in-out
-              group
-              text-stone-950/60 hover:text-stone-950/80 scale-95 hover:scale-100"
-              href="https://discord.gg/AEruz9B92B"
-              target="_blank">
-              <div className="
-                text-base md:text-lg lg:text-xl
-                transition-all duration-150 ease-out
-                group-hover:animate-swing
-              "><FaDiscord /></div>
-              <div className="text-xs md:text-sm lg:text-base ml-1.5">
-                <span className="hidden md:block">Chat on Discord</span>
-                <span className="block md:hidden">Discord</span>
-              </div>
-            </a>
-            <a
-              className="
-              flex
-              no-underline
-              animation-all duration-150 ease-in-out
-              group
-              text-stone-950/60 hover:text-stone-950/80 scale-95 hover:scale-100"
-              href="https://latent-store.notion.site/AI-Stories-Academy-8e3ce6ff2d5946ffadc94193619dd5cd"
-              target="_blank">
-              <div className="
-                text-base md:text-lg lg:text-xl
-                transition-all duration-150 ease-out
-                group-hover:animate-swing
-              "><GiSpellBook /></div>
-              <div className="text-xs md:text-sm lg:text-base ml-1.5">
-                <span className="hidden md:block">Prompt academy</span>
-                <span className="block md:hidden">Academy</span>
-              </div>
-            </a>
-          </div>
+          <BottomBar />
         </div>
         <Toaster />
       </div>

src/components/interface/bottom-bar.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import React from "react"
+import { FaDiscord } from "react-icons/fa"
+import { GiSpellBook } from "react-icons/gi"
+
+export function BottomBar() {
+
+  return (
+    <div
+      className="
+        fixed
+      
+        left-4 md:left-8
+        bottom-4
+        flex flex-col md:flex-row
+        md:items-center justify-center
+        space-y-4 md:space-x-4 md:space-y-0
+    
+      ">
+      <a
+        className="
+        flex
+        no-underline
+        animation-all duration-150 ease-in-out
+        group
+        text-stone-950/60 hover:text-stone-950/80 scale-95 hover:scale-100"
+        href="https://discord.gg/AEruz9B92B"
+        target="_blank">
+        <div className="
+          text-base md:text-lg lg:text-xl
+          transition-all duration-150 ease-out
+          group-hover:animate-swing
+        "><FaDiscord /></div>
+        <div className="text-xs md:text-sm lg:text-base ml-1.5">
+          <span className="hidden md:block">Chat on Discord</span>
+          <span className="block md:hidden">Discord</span>
+        </div>
+      </a>
+      <a
+        className="
+        flex
+        no-underline
+        animation-all duration-150 ease-in-out
+        group
+        text-stone-950/60 hover:text-stone-950/80 scale-95 hover:scale-100"
+        href="https://latent-store.notion.site/AI-Stories-Academy-8e3ce6ff2d5946ffadc94193619dd5cd"
+        target="_blank">
+        <div className="
+          text-base md:text-lg lg:text-xl
+          transition-all duration-150 ease-out
+          group-hover:animate-swing
+        "><GiSpellBook /></div>
+        <div className="text-xs md:text-sm lg:text-base ml-1.5">
+          <span className="hidden md:block">Prompt academy</span>
+          <span className="block md:hidden">Academy</span>
+        </div>
+      </a>
+    </div>
+  );
+}

src/components/interface/character-button.tsx

@@ -0,0 +1,77 @@
+import { ClapEntity } from "@aitube/clap"
+import { HiCog6Tooth } from "react-icons/hi2"
+import { MdFace2 } from "react-icons/md"
+import { FaWrench } from "react-icons/fa6"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
+import { useEntityPicture } from "@/lib/hooks/useEntityPicture"
+import { cn } from "@/lib/utils"
+
+export function CharacterButton({
+  entity
+}: {
+  entity?: ClapEntity
+}) {
+  const { picture, openFilePicker } = useEntityPicture(entity)
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild><div className={cn(`
+      flex flex-row
+
+      justify-between items-center
+      cursor-pointer
+      transition-all duration-150 ease-in-out
+      hover:scale-110 active:scale-150
+    text-stone-800
+      hover:text-stone-950
+      active:text-black
+      group
+      `,
+      // picture ? ` opacity-100 ` : `opacity-60`
+      )}
+      onClick={openFilePicker}>
+      
+        {picture
+        ? <div className={cn(`
+          flex
+          w-10 h-10 rounded-full
+          overflow-hidden
+        `,
+        picture
+        ? `
+        border-2 group-hover:border
+        border-stone-950/70 dark:border-stone-950/70
+        group-hover:shadow-md
+        `
+        : ``
+        )}>
+            <img
+            className="object-cover"
+            src={picture}
+            />
+          </div>: <MdFace2 size={24} />}
+ 
+        <div className="
+        -ml-2 mt-10
+        flex flex-row items-center justify-center
+        transition-all duration-150 ease-out
+        group-hover:animate-swing
+        opacity-0 group-hover:opacity-100
+        scale-0 group-hover:scale-100
+        "
+        >
+          {picture
+          ? <FaWrench size={16} />
+          : null
+          }
+        </div>
+      </div></TooltipTrigger>
+      <TooltipContent side="top">
+        <p className="text-xs font-normal text-stone-100/90 text-center">
+        Using this experimental<br/>feature may reduce<br/>
+       the quality of images.
+        </p>
+      </TooltipContent>
+    </Tooltip> 
+  )
+}

src/components/interface/characters.tsx

@@ -0,0 +1,19 @@
+import { useStore } from "@/app/store"
+import { CharacterButton } from "./character-button"
+
+export function Characters() {
+  const currentClap = useStore(s => s.currentClap)
+  
+
+  return (
+    <div className="flex flex-row space-x-0">
+      {currentClap && currentClap.entities?.length > 0
+        // now: we only support displaying ONE entity for now
+        ? currentClap.entities.slice(0, 1).map(entity =>
+          <CharacterButton key={entity.id} entity={entity} />
+        )
+        : <CharacterButton />
+      }
+    </div>
+  )
+}

src/components/interface/index.ts

@@ -0,0 +1,2 @@
+export { VideoPreview } from "./video-preview"
+export { BottomBar } from "./bottom-bar"

src/components/interface/load-clap-button.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import React from "react"
+
+import { Button } from "@/components/ui/button"
+
+import { cn } from "@/lib/utils"
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { useImportClap, useIsBusy, useStoryPromptDraft } from "@/lib/hooks"
+
+export function LoadClapButton() {
+  const { isBusy } = useIsBusy()
+  const { openClapFilePicker } = useImportClap()
+  const { storyPromptDraft } = useStoryPromptDraft()
+  
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild><Button
+  
+        onClick={openClapFilePicker}
+        disabled={isBusy}
+        // variant="ghost"
+        className={cn(
+          `text-xs md:text-sm lg:text-base`,
+          `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="hidden xl:inline mr-1">Load .clap</span>
+        <span className="inline xl:hidden mr-1">Load .clap</span>
+      </Button></TooltipTrigger>
+    <TooltipContent side="top">
+      <p className="text-xs font-normal text-stone-100/90 text-center">
+        Clap is a new AI format,<br/>check out the academy<br/>to learn more about it.
+      </p>
+    </TooltipContent>
+  </Tooltip>
+  )
+}

src/components/interface/main-title.tsx

@@ -0,0 +1,56 @@
+export function MainTitle() {
+  return (
+    <div className="flex flex-col justify-start">
+      <div className="
+      flex flex-row
+      items-center justify-center
+      transition-all duration-200 ease-in-out
+      px-3
+      
+      rounded-full">
+      <div
+      className="
+        flex
+        transition-all duration-200 ease-in-out
+        items-center justify-center text-center
+        w-10 h-10 md:w-12 md:h-12 lg:w-16 lg:h-16
+        text-3xl md:text-4xl lg:text-5xl
+        rounded-lg
+        mr-2
+        font-sans
+        bg-amber-400 dark:bg-amber-400
+      
+        text-stone-950/80 dark:text-stone-950/80 font-bold
+        "
+        >AI</div>
+        <div
+          className="
+          transition-all duration-200 ease-in-out
+          text-amber-400 dark:text-amber-400
+          text-3xl md:text-4xl lg:text-5xl
+          "
+          style={{ textShadow: "#00000035 0px 0px 2px" }}
+      
+          /*
+          className="
+          text-5xl
+          bg-gradient-to-br from-yellow-300 to-yellow-500
+          inline-block text-transparent bg-clip-text
+          py-6
+          "
+          */
+        >Stories Factory</div>
+      </div>
+      <p
+        className="
+        transition-all duration-200 ease-in-out
+        text-stone-900/90 dark:text-stone-900/90
+        text-lg md:text-xl lg:text-2xl
+        text-center 
+        pt-2 md:pt-4
+        "
+        style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}
+      >Make video stories using AI ✨</p>
+    </div>
+  )
+}

src/components/interface/save-clap-button.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import React from "react"
+
+import { Button } from "@/components/ui/button"
+
+import { useStore } from "../../app/store"
+import { cn } from "@/lib/utils"
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { useIsBusy, useStoryPromptDraft } from "@/lib/hooks"
+
+export function SaveClapButton() {
+  const { isBusy } = useIsBusy()
+  const currentClap = useStore(s => s.currentClap)
+  const saveClap = useStore(s => s.saveClap)
+  const { storyPromptDraft } = useStoryPromptDraft()
+
+  return (
+      <Tooltip>
+        <TooltipTrigger asChild><Button
+      onClick={() => saveClap()}
+      disabled={!currentClap || isBusy}
+      // variant="ghost"
+      className={cn(
+        `text-xs md:text-sm lg:text-base`,
+        `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="hidden xl:inline mr-1">Save .clap</span>
+      <span className="inline xl:hidden mr-1">Save .clap</span>
+    </Button></TooltipTrigger>
+      <TooltipContent side="top">
+        <p className="text-xs font-normal text-stone-100/90 text-center">
+        Clap is a new AI format,<br/>check out the academy<br/>to learn more about it.
+        </p>
+      </TooltipContent>
+    </Tooltip> 
+  )
+}

src/components/interface/video-preview.tsx

@@ -0,0 +1,164 @@
+"use client"
+
+import React from "react"
+import { FaCloudDownloadAlt } from "react-icons/fa"
+import Image from "next/image"
+import { DeviceFrameset } from "react-device-frameset"
+import "react-device-frameset/styles/marvel-devices.min.css"
+
+import { useOrientation } from "@/lib/hooks/useOrientation"
+import { useProgressTimer } from "@/lib/hooks/useProgressTimer"
+import { cn } from "@/lib/utils/cn"
+
+import { useStore } from "../../app/store"
+import HFLogo from "../../app/hf-logo.svg"
+
+export function VideoPreview() {
+  const status = useStore(s => s.status)
+  const parseGenerationStatus = useStore(s => s.parseGenerationStatus)
+  const storyGenerationStatus = useStore(s => s.storyGenerationStatus)
+  const assetGenerationStatus = useStore(s => s.assetGenerationStatus)
+  const soundGenerationStatus = useStore(s => s.soundGenerationStatus)
+  const musicGenerationStatus = useStore(s => s.musicGenerationStatus)
+  const voiceGenerationStatus = useStore(s => s.voiceGenerationStatus)
+  const imageGenerationStatus = useStore(s => s.imageGenerationStatus)
+  const videoGenerationStatus = useStore(s => s.videoGenerationStatus)
+  const finalGenerationStatus = useStore(s => s.finalGenerationStatus)
+  const currentVideo = useStore(s => s.currentVideo)
+
+  const error = useStore(s => s.error)
+
+  const saveVideo = useStore(s => s.saveVideo)
+
+
+  const  { isBusy, progress } = useProgressTimer()
+
+  const {
+    isLandscape,
+    isPortrait,
+  } = useOrientation()
+
+  return (
+    <div className={cn(`
+      -mt-8 md:mt-0
+      transition-all duration-200 ease-in-out
+    `,
+    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"
+
+        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}
+      >
+        <div className="
+        flex flex-col items-center justify-center
+        w-full h-full
+        bg-black text-white
+        ">
+          {isBusy ? <div className="
+          flex flex-col 
+          items-center justify-center
+          text-center space-y-1.5">
+            <p className="text-2xl font-bold">{progress}%</p> 
+            <p className="text-base text-white/70">{isBusy
+              ? (
+                // note: some of those tasks are running in parallel,
+                // and some are super-slow (like music or video)
+                // by carefully selecting in which order we set the ternaries,
+                // we can create the illusion that we just have a succession of reasonably-sized tasks
+                storyGenerationStatus === "generating" ? "Writing story.."
+                : parseGenerationStatus === "generating" ? "Loading the project.."
+                : assetGenerationStatus === "generating" ? "Casting characters.."
+                : imageGenerationStatus === "generating" ? "Creating storyboards.."
+                : soundGenerationStatus === "generating" ? "Recording sounds.."
+                : videoGenerationStatus === "generating" ? "Filming shots.."
+                : musicGenerationStatus === "generating" ? "Producing music.."
+                : voiceGenerationStatus === "generating" ? "Recording dialogues.."
+                : finalGenerationStatus === "generating" ? "Editing final cut.."
+                : "Please wait.."
+              )
+              : status === "error"
+              ? <span>{error || ""}</span>
+              : <span>{error ? error : <span>&nbsp;</span>}</span> // to prevent layout changes
+            }</p>
+            </div>
+          : (currentVideo && currentVideo?.length > 128) ? <video
+            src={currentVideo}
+            controls
+            playsInline
+            // I think we can't autoplay with sound,
+            // so let's disable auto-play
+            // autoPlay
+            // muted
+            loop
+            className="object-cover"
+            style={{
+            }}
+          /> : <div  className="
+          flex flex-col 
+          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-14'
+        )}
+          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={13} />
+          </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>
+      
+      {(currentVideo && currentVideo.length > 128) ? <div
+        className={cn(`
+        w-full
+        flex flex-row
+        items-center justify-center
+        transition-all duration-150 ease-in-out
+  
+      text-stone-800
+    
+        group
+        pt-2 md:pt-4
+        `, 
+          isBusy ? 'opacity-50' : 'cursor-pointer opacity-100 hover:scale-110 active:scale-150 hover:text-stone-950 active:text-black'
+        )}
+        style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}
+        onClick={isBusy ? undefined : saveVideo}
+      >
+        <div className="
+        text-base md:text-lg lg:text-xl
+        transition-all duration-150 ease-out
+        group-hover:animate-swing
+        "><FaCloudDownloadAlt /></div>
+        <div className="text-xs md:text-sm lg:text-base">&nbsp;Download</div>
+      </div> : null}
+    </div>
+  )
+}

src/lib/hooks/index.tsx

@@ -0,0 +1,6 @@
+export { useImportClap } from "./useImportClap"
+export { useIsBusy } from "./useIsBusy"
+export { useOrientation } from "./useOrientation"
+export { useProgressTimer } from "./useProgressTimer"
+export { useQueryStringParams } from "./useQueryStringParams"
+export { useStoryPromptDraft } from "./useStoryPromptDraft"

src/lib/hooks/useEntityPicture.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react"
+import { useFilePicker } from "use-file-picker"
+
+import { useStore } from "../../app/store"
+import { ClapEntity, getClapAssetSourceType } from "@aitube/clap"
+import { useOpenPictureFile } from "./useOpenPictureFile"
+
+export function useEntityPicture(entity?: ClapEntity) {
+  const defaultPicture = entity?.imageId
+  const [currentPicture, setCurrentPicture] = useState(defaultPicture)
+  const { file, openFilePicker } = useOpenPictureFile()
+  const setMainCharacterImage = useStore(s => s.setMainCharacterImage)
+
+  const newPicture = file || currentPicture || defaultPicture
+
+  useEffect(() => {
+    setCurrentPicture(newPicture)
+    if (!newPicture) { return }
+    
+    if (entity) {
+      entity.imageId = newPicture
+    } else {
+      setMainCharacterImage(newPicture)
+    }
+  }, [newPicture, JSON.stringify(entity)])
+
+  return { picture: newPicture, openFilePicker }
+}

src/lib/hooks/useImportClap.ts

@@ -0,0 +1,112 @@
+import { useEffect, useRef } from "react"
+import { useFilePicker } from "use-file-picker"
+import { FileContent } from "use-file-picker/dist/interfaces"
+import { ClapProject, updateClap } from "@aitube/clap"
+
+import { useStore } from "../../app/store"
+import { useProcessors } from "./useProcessors"
+
+export function useImportClap() {
+
+  const setError = useStore(s => s.setError)
+  const setCurrentClap = useStore(s => s.setCurrentClap)
+  const loadClap = useStore(s => s.loadClap)
+
+  const {
+    generateMusic,
+    generateVideos,
+    generateFinalVideo,
+  } = useProcessors()
+
+  const importStory = async (fileData: FileContent<ArrayBuffer>): Promise<{
+    clap: ClapProject
+    regenerateVideo: boolean
+  }> => {
+    if (!fileData?.name) { throw new Error(`invalid file (missing file name)`) }
+
+    const {
+      setParseGenerationStatus,
+    } = useStore.getState()
+
+    setParseGenerationStatus("generating")
+
+    try {
+      const blob = new Blob([fileData.content])
+      const res = await loadClap(blob, fileData.name)
+
+      if (!res?.clap) { throw new Error(`failed to load the clap file`) }
+
+      setParseGenerationStatus("finished")
+      return res
+    } catch (err) {
+      console.error("failed to load the Clap file:", err)
+      setParseGenerationStatus("error")
+      throw err
+    }
+  }
+
+  const { openFilePicker: openClapFilePicker, filesContent } = useFilePicker({
+    accept: '.clap',
+    readAs: "ArrayBuffer"
+  })
+  const fileData = filesContent[0]
+
+  useEffect(() => {
+    const fn = async () => {
+      if (!fileData?.name) { return }
+
+      const { setStatus, setProgress } = useStore.getState()
+
+      setProgress(0)
+      setStatus("generating")
+
+      try {
+        let { clap, regenerateVideo } = await importStory(fileData)
+        
+        // clap = await generateSounds(clap)
+
+        // setCurrentClap(clap)
+
+        console.log("loadClap(): clap = ", clap)
+
+        // it is important to skip regeneration if we already have a video
+        if (regenerateVideo) {
+          console.log(`regenerating music and videos..`)
+          const claps = await Promise.all([
+            generateMusic(clap),
+            generateVideos(clap)
+          ])
+
+          // console.log("finished processing the 2 tasks in parallel")
+
+          for (const newerClap of claps) {
+            clap = await updateClap(clap, newerClap, {
+              overwriteMeta: false,
+              inlineReplace: true,
+            })
+          }
+
+
+          setCurrentClap(clap)
+
+          await generateFinalVideo(clap)
+
+        } else {
+          console.log(`skipping music and video regeneration`)
+        }
+
+        setStatus("finished")
+        setProgress(100)
+        setError("")
+      } catch (err) {
+        console.error(`failed to import: `, err)
+        setStatus("error")
+        setError(`${err}`)
+      }
+     
+    }
+    fn()
+  }, [fileData?.name])
+
+  return { openClapFilePicker }
+}

src/lib/hooks/useIsBusy.ts

@@ -0,0 +1,11 @@
+import { useRef } from "react"
+
+import { useStore } from "@/app/store"
+
+export function useIsBusy() {
+  const isBusy = useStore(s => s.isBusy)
+  const busyRef = useRef(isBusy)
+  busyRef.current = isBusy
+
+  return {isBusy, busyRef }
+}

src/lib/hooks/useOpenPictureFile.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react"
+import { useFilePicker } from "use-file-picker"
+
+export function useOpenPictureFile() {
+  const [picture, setPicture] = useState("")
+
+  const { openFilePicker, filesContent } = useFilePicker({
+    readAs: 'DataURL',
+    accept: 'image/*',
+  })
+  const fileData = filesContent[0]
+
+  useEffect(() => {
+    if (!fileData?.name) { return }
+    setPicture(fileData.content)
+  }, [fileData?.name])
+
+  return { file: picture, openFilePicker }
+}

src/lib/hooks/useOrientation.ts

@@ -0,0 +1,24 @@
+import { useStore } from "@/app/store"
+import { ClapMediaOrientation } from "@aitube/clap"
+
+export function useOrientation() {
+  const orientation = useStore(s => s.orientation)
+  const setOrientation = useStore(s => s.setOrientation)
+  const currentVideoOrientation = useStore(s => s.currentVideoOrientation)
+  const toggleOrientation = useStore(s => s.toggleOrientation)
+  // note: we are interested in the *current* video orientation,
+  // not the requested video orientation requested for the next video
+  const isLandscape = currentVideoOrientation === ClapMediaOrientation.LANDSCAPE
+  const isPortrait = currentVideoOrientation === ClapMediaOrientation.PORTRAIT
+  const isSquare = currentVideoOrientation === ClapMediaOrientation.SQUARE
+
+  return {
+    orientation,
+    setOrientation,
+    currentVideoOrientation,
+    toggleOrientation,
+    isLandscape,
+    isPortrait,
+    isSquare
+  }
+}

src/lib/hooks/useProcessors.ts

@@ -0,0 +1,447 @@
+"use client"
+
+import React, { useTransition } from "react"
+import { ClapProject, ClapSegmentCategory, getClapAssetSourceType, newEntity, updateClap } from "@aitube/clap"
+
+import { logImage } from "@/lib/utils"
+import { useIsBusy, useStoryPromptDraft } from "@/lib/hooks"
+
+import { createClap } from "@/app/server/aitube/createClap"
+import { editClapEntities } from "@/app/server/aitube/editClapEntities"
+import { editClapDialogues } from "@/app/server/aitube/editClapDialogues"
+import { editClapStoryboards } from "@/app/server/aitube/editClapStoryboards"
+import { editClapSounds } from "@/app/server/aitube/editClapSounds"
+import { editClapMusic } from "@/app/server/aitube/editClapMusic"
+import { editClapVideos } from "@/app/server/aitube/editClapVideos"
+import { exportClapToVideo } from "@/app/server/aitube/exportClapToVideo"
+
+import { useStore } from "../../app/store"
+
+export function useProcessors() {
+  const { storyPromptDraft, setStoryPromptDraft, promptDraftRef } = useStoryPromptDraft()
+
+  const [_isPending, startTransition] = useTransition()
+
+  const mainCharacterImage = useStore(s => s.mainCharacterImage)
+  const mainCharacterVoice = useStore(s => s.mainCharacterVoice)
+
+  const currentClap = useStore(s => s.currentClap)
+  const setStoryPrompt = useStore(s => s.setStoryPrompt)
+  const setMainCharacterImage = useStore(s => s.setMainCharacterImage)
+  const setMainCharacterVoice = useStore(s => s.setMainCharacterVoice)
+  const setStatus = useStore(s => s.setStatus)
+
+  const error = useStore(s => s.error)
+  const setError = useStore(s => s.setError)
+  const setParseGenerationStatus = useStore(s => s.setParseGenerationStatus)
+  const setStoryGenerationStatus = useStore(s => s.setStoryGenerationStatus)
+  const setAssetGenerationStatus = useStore(s => s.setAssetGenerationStatus)
+  const setSoundGenerationStatus = useStore(s => s.setSoundGenerationStatus)
+  const setMusicGenerationStatus = useStore(s => s.setMusicGenerationStatus)
+  const setVoiceGenerationStatus = useStore(s => s.setVoiceGenerationStatus)
+  const setImageGenerationStatus = useStore(s => s.setImageGenerationStatus)
+  const setVideoGenerationStatus = useStore(s => s.setVideoGenerationStatus)
+  const setFinalGenerationStatus = useStore(s => s.setFinalGenerationStatus)
+  const setCurrentClap = useStore(s => s.setCurrentClap)
+  const setCurrentVideo = useStore(s => s.setCurrentVideo)
+  const setProgress = useStore(s => s.setProgress)
+
+  const  { isBusy, busyRef } = useIsBusy()
+
+  const generateStory = async (): Promise<ClapProject> => {
+
+    let clap: ClapProject | undefined = undefined
+    try {
+      setProgress(0)
+
+      setStatus("generating")
+      setStoryGenerationStatus("generating")
+      setStoryPrompt(promptDraftRef.current)
+
+      clap = await createClap({
+        prompt: promptDraftRef.current,
+        orientation: useStore.getState().orientation,
+
+        turbo: false,
+      })
+
+      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)
+
+      console.log(`handleSubmit():  copying over entities from the previous clap`)
+
+      console.log(`handleSubmit(): later we can add button(s) to clear the project and/or the character(s)`)
+      const { currentClap } = useStore.getState()
+
+      clap.entities = Array.isArray(currentClap?.entities) ? currentClap.entities : []
+
+      setCurrentClap(clap)
+      setStoryGenerationStatus("finished")
+
+      console.log("---------------- GENERATED STORY ----------------")
+      console.table(clap.segments, [
+        // 'startTimeInMs',
+        'endTimeInMs',
+        // 'track',
+        'category',
+        'prompt'
+      ])
+      return clap
+    } catch (err) {
+      setStoryGenerationStatus("error")
+      throw err
+    }
+  }
+
+  const generateEntities = async (clap: ClapProject): Promise<ClapProject> => {
+    try {
+      // setProgress(20)
+      setAssetGenerationStatus("generating")
+      clap = await editClapEntities({
+        clap,
+
+        // generating entities requires a "smart" LLM
+        turbo: false,
+        // turbo: true,
+      }).then(r => r.promise)
+
+      if (!clap) { throw new Error(`failed to edit the entities`) }
+
+      console.log(`generateEntities(): received entities = `, clap)
+
+      if (mainCharacterImage) {
+        // we assume the main entity is the first one
+        let mainEntity = clap.entities.at(0)
+      
+        if (mainEntity) {
+          console.log(`generateEntities(): replacing the main character's picture..`)
+          mainEntity.thumbnailUrl = mainCharacterImage
+          mainEntity.imagePrompt = ""
+          mainEntity.imageSourceType = getClapAssetSourceType(mainCharacterImage)
+          mainEntity.imageEngine = "" 
+          mainEntity.imageId = mainCharacterImage
+        }
+      }
+
+      setAssetGenerationStatus("finished")
+      console.log("---------------- GENERATED ENTITIES ----------------")
+      console.table(clap.entities, [
+        'category',
+        'label',
+        'imagePrompt',
+        'appearance'
+      ])
+      return clap
+    } catch (err) {
+      setAssetGenerationStatus("error")
+      throw err
+    }
+  }
+
+  const generateSounds = async (clap: ClapProject): Promise<ClapProject> => {
+    try {
+      // setProgress(30)
+      setSoundGenerationStatus("generating")
+
+      clap = await editClapSounds({
+        clap,
+        turbo: false,
+      }).then(r => r.promise)
+
+      if (!clap) { throw new Error(`failed to edit the sound`) }
+
+      console.log(`handleSubmit(): received a clap with sound = `, clap)
+      setSoundGenerationStatus("finished")
+      console.log("---------------- GENERATED SOUND ----------------")
+      console.table(clap.segments.filter(s => s.category === ClapSegmentCategory.SOUND), [
+        'endTimeInMs',
+        'prompt',
+        'entityId',
+      ])
+      return clap
+    } catch (err) {
+      setSoundGenerationStatus("error")
+      throw err
+    }
+  }
+
+  const generateMusic = async (clap: ClapProject): Promise<ClapProject> => {
+    try {
+      // setProgress(30)
+      setMusicGenerationStatus("generating")
+
+      clap = await editClapMusic({
+        clap,
+        turbo: false,
+      }).then(r => r.promise)
+
+      if (!clap) { throw new Error(`failed to edit the music`) }
+
+      console.log(`handleSubmit(): received a clap with music = `, clap)
+      setMusicGenerationStatus("finished")
+      console.log("---------------- GENERATED MUSIC ----------------")
+      console.table(clap.segments.filter(s => s.category === ClapSegmentCategory.MUSIC), [
+        'endTimeInMs',
+        'prompt',
+        'entityId',
+      ])
+      return clap
+    } catch (err) {
+      setMusicGenerationStatus("error")
+      throw err
+    }
+  }
+
+  const generateStoryboards = async (clap: ClapProject): Promise<ClapProject> => {
+    try {
+      // setProgress(40)
+      setImageGenerationStatus("generating")
+      clap = await editClapStoryboards({
+        clap,
+        // if we use entities, then we MUST use turbo
+        // that's because turbo uses PulID,
+        // but SDXL doesn't
+        turbo: false,
+      }).then(r => r.promise)
+
+      if (!clap) { throw new Error(`failed to edit the storyboards`) }
+
+      // const fusion = 
+      console.log(`handleSubmit(): received storyboards = `, clap)
+
+      setImageGenerationStatus("finished")
+      console.log("---------------- GENERATED STORYBOARDS ----------------")
+      clap.segments
+        .filter(s => s.category === ClapSegmentCategory.STORYBOARD)
+        .forEach((s, i) => {
+          if (s.status === "completed" && s.assetUrl) {
+            // console.log(`  [${i}] storyboard: ${s.prompt}`)
+            logImage(s.assetUrl, 0.35)
+          } else {
+            console.log(`  [${i}] failed to generate storyboard`)
+          }
+          // console.log(`------------------`)
+        })
+      console.table(clap.segments.filter(s => s.category === ClapSegmentCategory.STORYBOARD), [
+        'endTimeInMs',
+        'prompt',
+        'assetUrl'
+      ])
+      return clap
+    } catch (err) {
+      setImageGenerationStatus("error")
+      throw err
+    }
+  }
+
+  const generateVideos = async (clap: ClapProject): Promise<ClapProject> => {
+    try {
+      // setProgress(50)
+      setVideoGenerationStatus("generating")
+
+      clap = await editClapVideos({
+        clap,
+        turbo: false
+      }).then(r => r.promise)
+
+      if (!clap) { throw new Error(`failed to edit the videos`) }
+
+      console.log(`handleSubmit(): received individual video clips = `, clap)
+      setVideoGenerationStatus("finished")
+      console.log("---------------- GENERATED VIDEOS ----------------")
+      console.table(clap.segments.filter(s => s.category === ClapSegmentCategory.VIDEO), [
+        'endTimeInMs',
+        'prompt',
+        'entityId',
+      ])
+      return clap
+    } catch (err) {
+      setVideoGenerationStatus("error")
+      throw err
+    }
+  }
+
+  const generateStoryboardsThenVideos = async (clap: ClapProject): Promise<ClapProject> => {
+    clap = await generateStoryboards(clap)
+    clap = await generateVideos(clap)
+    return clap
+  }
+
+
+  const generateDialogues = async (clap: ClapProject): Promise<ClapProject> => {
+    try {
+      // setProgress(70)
+      setVoiceGenerationStatus("generating")
+      clap = await editClapDialogues({
+        clap,
+        turbo: false,
+      }).then(r => r.promise)
+
+      if (!clap) { throw new Error(`failed to edit the dialogues`) }
+
+      console.log(`handleSubmit(): received dialogues = `, clap)
+      setVoiceGenerationStatus("finished")
+      console.log("---------------- GENERATED DIALOGUES ----------------")
+      console.table(clap.segments.filter(s => s.category === ClapSegmentCategory.DIALOGUE), [
+        'endTimeInMs',
+        'prompt',
+        'entityId',
+      ])
+      return clap
+    } catch (err) {
+      setVoiceGenerationStatus("error")
+      throw err
+    }
+  }
+
+  const generateFinalVideo = async (clap: ClapProject): Promise<string> => {
+
+    let assetUrl = ""
+    try {
+      // setProgress(85)
+      setFinalGenerationStatus("generating")
+      assetUrl = await exportClapToVideo({
+        clap,
+        turbo: false,
+      })
+
+      setCurrentVideo(assetUrl)
+
+      if (assetUrl.length < 128) { throw new Error(`generateFinalVideo(): the generated video is too small, so we failed`) }
+
+      console.log(`generateFinalVideo(): received a video: ${assetUrl.slice(0, 120)}...`)
+      setFinalGenerationStatus("finished")
+      return assetUrl
+    } catch (err) {
+      setFinalGenerationStatus("error")
+      throw err
+    }
+  }
+  
+  const handleSubmit = async () => {
+    setStatus("generating")
+    busyRef.current = true
+
+    startTransition(async () => {
+      setStatus("generating")
+      busyRef.current = true
+  
+      console.log(`handleSubmit(): generating a clap using prompt = "${promptDraftRef.current}" `)
+
+      try {
+        let clap = await generateStory()
+        setCurrentClap(clap)
+
+        const storyboards = clap.segments.filter(s => s.category === ClapSegmentCategory.STORYBOARD)
+
+        let mainCharacter = clap.entities.at(0)
+
+        // let's do something basic for now: we only support 1 entity (character)
+        // and we apply it to *all* the storyboards (we can always improve this later)
+        if (mainCharacter) {
+          console.log(`handleSubmit(): we use the clap's main character's face on all storyboards`)
+          storyboards.forEach(storyboard => { storyboard.entityId = mainCharacter!.id })
+          logImage(mainCharacter.imageId, 0.35)
+        } else if (mainCharacterImage) {
+          console.log(`handleSubmit(): declaring a new entity for our main character`)
+          const entityName = "person"
+          mainCharacter = newEntity({
+            category: ClapSegmentCategory.CHARACTER,
+            triggerName: entityName,
+            label: entityName,
+            description: entityName,
+            author: "auto",
+            thumbnailUrl: mainCharacterImage,
+      
+            imagePrompt: "",
+            imageSourceType: getClapAssetSourceType(mainCharacterImage),
+            imageEngine: "", 
+            imageId: mainCharacterImage,
+            audioPrompt: "",
+          })
+
+          clap.entities.push(mainCharacter!)
+          console.log(`handleSubmit(): we use the main character's face on all storyboards`)
+          
+          storyboards.forEach(storyboard => { storyboard.entityId = mainCharacter!.id })
+          logImage(mainCharacterImage, 0.35)
+        }
+
+        const tasks = [
+          generateMusic(clap),
+          generateStoryboardsThenVideos(clap)
+        ]
+
+        const claps = await Promise.all(tasks)
+
+        console.log(`finished processing ${tasks.length} tasks in parallel`)
+
+        for (const newerClap of claps) {
+          clap = await updateClap(clap, newerClap, {
+            overwriteMeta: false,
+            inlineReplace: true,
+          })
+          setCurrentClap(clap)
+        }
+
+        /*
+        clap = await claps.reduce(async (existingClap, newerClap) =>
+          updateClap(existingClap, newerClap, {
+            overwriteMeta: false,
+            inlineReplace: true,
+          })
+        , Promise.resolve(clap)
+        */
+
+       
+        // We can't have consistent characters with video (yet)
+        // clap = await generateEntities(clap)
+
+        /*
+        if (mainCharacterImage) {
+          console.log("handleSubmit(): User specified a main character image")
+          // various strategies here, for instance we can assume that the first character is the main character,
+          // or maybe a more reliable way is to count the number of occurrences.
+          // there is a risk of misgendering, so ideally we should add some kind of UI to do this,
+          // such as a list of characters.
+        }
+        */
+
+        // let's skip storyboards for now
+        // clap = await generateStoryboards(clap)
+
+        // clap = await generateVideos(clap)
+        // clap = await generateDialogues(clap)
+     
+        
+        
+        console.log("final clap: ", clap)
+        setCurrentClap(clap)
+        await generateFinalVideo(clap)
+
+        setStatus("finished")
+        setError("")
+      } catch (err) {
+        console.error(`failed to generate: `, err)
+        setStatus("error")
+        setError(`Error, please contact an admin on Discord (${err})`)
+      }
+    })
+  }
+  
+  return {
+    generateDialogues,
+    generateEntities,
+    generateFinalVideo,
+    generateMusic,
+    generateSounds,
+    generateStory,
+    generateStoryboards,
+    generateStoryboardsThenVideos,
+    generateVideos,
+    handleSubmit,
+  }
+}

src/lib/hooks/useProgressTimer.ts

@@ -0,0 +1,45 @@
+import { useStore } from "@/app/store"
+import { useEffect, useRef } from "react"
+import { useIsBusy } from "./useIsBusy"
+
+export function useProgressTimer() {
+  const runningRef = useRef(false)
+  const timerRef = useRef<NodeJS.Timeout>()
+
+  const progress = useStore(s => s.progress)
+  const stage = useStore(s => s.stage)
+  const { isBusy, busyRef } = useIsBusy()
+
+  const timerFn = async () => {
+    const { isBusy, progress, stage } = useStore.getState()
+
+    clearTimeout(timerRef.current)
+    if (!isBusy || stage === "idle") {
+      return
+    }
+
+    /*
+    console.log("progress function:", {
+      stage,
+      delay: progressDelayInMsPerStage[stage],
+      progress,
+    })
+    */
+    useStore.setState({
+      // progress: Math.min(maxProgressPerStage[stage], progress + 1) 
+      progress: Math.min(100, progress + 1) 
+    })
+
+    // timerRef.current = setTimeout(timerFn, progressDelayInMsPerStage[stage])
+    timerRef.current = setTimeout(timerFn, 1200)
+  }
+
+  useEffect(() => {
+    timerFn()
+    clearTimeout(timerRef.current)
+    if (!isBusy) { return }
+    timerRef.current = setTimeout(timerFn, 0)
+  }, [isBusy])
+
+  return { isBusy, busyRef, progress, stage }
+}

src/lib/hooks/useQueryStringParams.ts

@@ -0,0 +1,51 @@
+import { useEffect } from "react"
+import { useSearchParams } from "next/navigation"
+import { ClapMediaOrientation } from "@aitube/clap"
+
+import { useStore } from "@/app/store"
+
+import { useStoryPromptDraft } from "./useStoryPromptDraft"
+import { useIsBusy } from "./useIsBusy"
+import { useProcessors } from "./useProcessors"
+
+export function useQueryStringParams() {
+  const { storyPromptDraft, setStoryPromptDraft, promptDraftRef } = useStoryPromptDraft()
+  const { busyRef } = useIsBusy()
+  const { handleSubmit } = useProcessors()
+  
+  const setOrientation = useStore(s => s.setOrientation)
+  // this is how we support query string parameters
+  // ?prompt=hello <- set a default prompt
+  // ?prompt=hello&autorun=true <- automatically run the app
+  // ?orientation=landscape <- can be "landscape" or "portrait" (default)
+  const searchParams = useSearchParams()
+  const queryStringPrompt = (searchParams?.get('prompt') as string) || ""
+  const queryStringAutorun = (searchParams?.get('autorun') as string) || ""
+  const queryStringOrientation = (searchParams?.get('orientation') as string) || ""
+
+  useEffect(() => {
+    if (queryStringOrientation?.length > 1) {
+      console.log(`orientation = "${queryStringOrientation}"`)
+      const orientation =
+        queryStringOrientation.trim().toLowerCase() === "landscape"
+        ? ClapMediaOrientation.LANDSCAPE
+        : ClapMediaOrientation.PORTRAIT
+      setOrientation(orientation)
+    }
+    if (queryStringPrompt?.length > 1) {
+      console.log(`prompt = "${queryStringPrompt}"`)
+      if (queryStringPrompt !== promptDraftRef.current) {
+        setStoryPromptDraft(queryStringPrompt)
+      }
+      const maybeAutorun = queryStringAutorun.trim().toLowerCase()
+      console.log(`autorun = "${maybeAutorun}"`)
+
+      // note: during development we will be called twice,
+      // which is why we have a guard on  busyRef.current
+      if (maybeAutorun === "true" || maybeAutorun === "1" && !busyRef.current) {
+        handleSubmit()
+      }
+    }
+  }, [queryStringPrompt, queryStringAutorun, queryStringOrientation])
+
+}

src/lib/hooks/useStoryPromptDraft.ts

@@ -0,0 +1,16 @@
+
+import { useRef } from "react"
+import { useLocalStorage } from "usehooks-ts"
+
+import { defaultPrompt, localStorageStoryDraftKey } from "@/app/config"
+
+export function useStoryPromptDraft() {
+  const [storyPromptDraft, setStoryPromptDraft] = useLocalStorage<string>(
+    localStorageStoryDraftKey,
+    defaultPrompt
+  )
+  const promptDraftRef = useRef("")
+  promptDraftRef.current = storyPromptDraft
+
+  return { storyPromptDraft, setStoryPromptDraft, promptDraftRef }
+}

src/lib/utils/index.ts

@@ -0,0 +1,3 @@
+export { cn } from "./cn"
+export { generateRandomStory } from "./generateRandomStory"
+export { logImage } from "./logImage"