bump to aitube/client 0.0.7

package-lock.json

@@ -8,8 +8,8 @@
       "name": "@jbilcke-hf/ai-stories-factory",
       "version": "0.0.0",
       "dependencies": {
-        "@aitube/clap": "^0.0.6",
-        "@aitube/client": "^0.0.4",
+        "@aitube/clap": "0.0.7",
+        "@aitube/client": "0.0.7",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-checkbox": "^1.0.4",
@@ -62,9 +62,9 @@
       }
     },
     "node_modules/@aitube/clap": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/@aitube/clap/-/clap-0.0.6.tgz",
-      "integrity": "sha512-SPo90RBnOJCmp+DqzxllNOcp38AbHSzqkAbYEudRiubqWHDF1GGqYi25gCdG7bFIWH+8evjSiiwsjkzedpbhoA==",
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/@aitube/clap/-/clap-0.0.7.tgz",
+      "integrity": "sha512-0muPu4G1sRsNqSVZ/ICBCc4QibZ9OT33ORbahPP1+h3GYcD/7K+ZLYJjdbQwJWVEcpKDosDVaQKeNYdab0S0LA==",
       "dependencies": {
         "pure-uuid": "^1.8.1",
         "yaml": "^2.4.1"
@@ -74,15 +74,15 @@
       }
     },
     "node_modules/@aitube/client": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/@aitube/client/-/client-0.0.4.tgz",
-      "integrity": "sha512-LzOYgwSKJVslGbTEP3DEsgh5/EWupv04HNoTt3hxDQBo9/I5AF/ZwoLBDQR3QTu1i3spMJ61Sl0gVtrXxp2q3A==",
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/@aitube/client/-/client-0.0.7.tgz",
+      "integrity": "sha512-s6vxst7pkLt7tI96JS508gfk4EgdLJy5Itr76ej/zvtMRMgnKgAlfB6Bb8/1u7L5CToz4Wgk6h4kz8T+yEbEeg==",
       "dependencies": {
         "uuid": "^9.0.1",
         "yaml": "^2.4.1"
       },
       "peerDependencies": {
-        "@aitube/clap": "^0.0.6",
+        "@aitube/clap": "0.0.7",
         "typescript": "^5.4.5"
       }
     },
@@ -190,28 +190,28 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
-      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz",
+      "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.1"
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
-      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.4.tgz",
+      "integrity": "sha512-0G8R+zOvQsAG1pg2Q99P21jiqxqGBW1iRe/iXHsBRBxnpXKFI8QwbB4x5KmYLggNO5m34IQgOIu9SCRfR/WWiQ==",
       "dependencies": {
         "@floating-ui/core": "^1.0.0",
         "@floating-ui/utils": "^0.2.0"
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
-      "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
+      "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==",
       "dependencies": {
-        "@floating-ui/dom": "^1.6.1"
+        "@floating-ui/dom": "^1.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -219,9 +219,9 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
-      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
@@ -3127,9 +3127,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001612",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz",
-      "integrity": "sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==",
+      "version": "1.0.30001614",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001614.tgz",
+      "integrity": "sha512-jmZQ1VpmlRwHgdP1/uiKzgiAuGOfLEJsYFP4+GBou/QQ4U6IOJCB4NP1c+1p9RGLpwObcT94jA5/uO+F1vBbog==",
       "funding": [
         {
           "type": "opencollective",
@@ -5477,9 +5477,9 @@
       }
     },
     "node_modules/lru-cache": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.1.tgz",
-      "integrity": "sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==",
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
       "engines": {
         "node": "14 || >=16.14"
       }
@@ -7816,9 +7816,9 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/yaml": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
-      "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
+      "integrity": "sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==",
       "bin": {
         "yaml": "bin.mjs"
       },

package.json

@@ -9,8 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@aitube/clap": "^0.0.6",
-    "@aitube/client": "^0.0.4",
+    "@aitube/clap": "0.0.7",
+    "@aitube/client": "0.0.7",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",

src/app/main.tsx

@@ -1,21 +1,25 @@
 "use client"
 
-import React, { useEffect, useRef, useState, useTransition } from 'react'
+import React, { useTransition } from 'react'
 import { ClapProject } from '@aitube/clap'
+import Image from "next/image"
+import { DeviceFrameset } from 'react-device-frameset'
+import 'react-device-frameset/styles/marvel-devices.min.css'
 
 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 { useStore } from './store'
-import { TextareaField } from '@/components/form/textarea-field'
-import { DeviceFrameset } from 'react-device-frameset'
-import 'react-device-frameset/styles/marvel-devices.min.css'
 import { createClap } from './server/aitube/createClap'
+import { editClapDialogues } from './server/aitube/editClapDialogues'
 import { editClapStoryboards } from './server/aitube/editClapStoryboards'
 import { exportClapToVideo } from './server/aitube/exportClapToVideo'
 
+import { useStore } from './store'
+import HFLogo from "./hf-logo.svg"
+
 export function Main() {
   const [_isPending, startTransition] = useTransition()
   const storyPromptDraft = useStore(s => s.storyPromptDraft)
@@ -25,6 +29,8 @@ export function Main() {
   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 setStoryPromptDraft = useStore(s => s.setStoryPromptDraft)
   const setStoryPrompt = useStore(s => s.setStoryPrompt)
   const setStatus = useStore(s => s.setStatus)
@@ -32,6 +38,8 @@ export function Main() {
   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 setGeneratedVideo = useStore(s => s.setGeneratedVideo)
 
   const hasPendingTasks =
     storyGenerationStatus === "generating" ||
@@ -55,7 +63,10 @@ export function Main() {
       try {
         clap = await createClap({ prompt })
 
+        if (!clap) { throw new Error(`failed to create the clap`) }
+
         console.log(`handleSubmit(): received a clap = `, clap)
+        setGeneratedClap(clap)
         setStoryGenerationStatus("finished")
       } catch (err) {
         setStoryGenerationStatus("error")
@@ -66,11 +77,17 @@ export function Main() {
         return
       }
 
+      // TODO Julian
+      console.log("handleSubmit(): TODO Julian: generate images in parallel of the dialogue using Promise.all()")
+
       try {
         setImageGenerationStatus("generating")
         clap = await editClapStoryboards({ clap })
 
+        if (!clap) { throw new Error(`failed to edit the storyboards`) }
+
         console.log(`handleSubmit(): received a clap with images = `, clap)
+        setGeneratedClap(clap)
         setImageGenerationStatus("finished")
       } catch (err) {
         setImageGenerationStatus("error")
@@ -81,6 +98,25 @@ export function Main() {
         return
       }
 
+      
+      try {
+        setVoiceGenerationStatus("generating")
+        clap = await editClapDialogues({ clap })
+
+        if (!clap) { throw new Error(`failed to edit the dialogues`) }
+
+        console.log(`handleSubmit(): received a clap with dialogues = `, clap)
+        setGeneratedClap(clap)
+        setVoiceGenerationStatus("finished")
+      } catch (err) {
+        setVoiceGenerationStatus("error")
+        setStatus("error")
+        return
+      }
+      if (!clap) {
+        return
+      }
+
       let assetUrl = ""
       try {
         setVideoGenerationStatus("generating")
@@ -96,7 +132,8 @@ export function Main() {
       if (!assetUrl) {
         return
       }
-      
+
+      setGeneratedVideo(assetUrl)
       setStatus("finished")
     })
   }
@@ -105,25 +142,51 @@ export function Main() {
     <div className={cn(
       `fixed`,
       // `bg-zinc-800`,
-      `bg-gradient-to-br from-amber-600 to-yellow-500`, 
+      // old style, more "amber"
+      // `bg-gradient-to-br from-amber-600 to-yellow-500`, 
+
+      // nice style!
+      // `bg-gradient-to-br from-amber-700 to-yellow-300`, 
+
+      // warm orange, a bit flash but not bad, not bad at all
+     // `bg-gradient-to-br from-orange-700 to-yellow-400`, 
+   
+     // nice "AiTube" vibe
+     `bg-gradient-to-br from-red-700 to-yellow-400`, 
+   
+     // pretty cool lime!
+     // `bg-gradient-to-br from-lime-700 to-yellow-400`, 
+
+     // new style, pretty "fresh" - maybe too bright? 
+     // use a dark logo for this one
+     // `bg-gradient-to-br from-yellow-200 to-yellow-500`, 
+      
+     // too pastel
+     // `bg-gradient-to-br from-yellow-200 to-red-300`, 
+      
       // `bg-gradient-to-br from-sky-400 to-sky-300/30`, 
-      `w-screen h-screen overflow-y-scroll md:overflow-hidden`,
+      `w-screen h-full overflow-y-scroll md:overflow-hidden`,
     )}
     style={{ boxShadow: "inset 0 0px 250px 0 rgb(0 0 0 / 60%)" }}>
-      <div className="flex flex-col w-full">
+      <div className="flex flex-col w-screen h-screen">
         <div className="
         flex flex-col md:flex-row w-full
+        items-center md:justify-center
+        flex-1
         "
         >
           <div className={cn(
-            `flex flex-col w-full md:w-[512px]`,
-            `transition-all duration-300 ease-in-out`,
-            `ml-0 lg:ml-12`,
-            `pt-4 sm:pt-8 md:pt-16 lg:pt-24`,
+            `flex flex-col md:h-full md:items-center md:justify-center`,
+            `w-full md:w-1/2`,
+            `transition-all duration-200 ease-in-out`,
+            `ml-0`,
+            `pt-4 sm:pt-0`,
           )}>
             <Card className={cn(
              //  `shadow-2xl z-30 rounded-3xl`,
              `shadow-none`,
+             `w-full md:ml-[12%] md:w-[95%]`,
+              `transition-all duration-200 ease-in-out`,
               `bg-transparent dark:bg-transparent`,
              // `backdrop-blur-2xl dark:backdrop-blur-2xl`,
               // `bg-amber-500 dark:bg-amber-500`,
@@ -188,7 +251,7 @@ export function Main() {
                       pt-2 md:pt-4
                       "
                       style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}
-                    >Generate video stories using AI ✨</p>
+                    >Make vertical video stories using AI ✨</p>
                   </div>
                 </CardHeader>
                 <CardContent className="flex flex-col">
@@ -198,7 +261,7 @@ export function Main() {
                   space-y-2 md:space-y-4 mt-0
                   ">
                     <TextareaField
-                      label="My story:"
+                      // label="My story:"
                       // disabled={modelState != 'ready'}
                       onChange={(e) => {
                         setStoryPromptDraft(e.target.value)
@@ -214,7 +277,28 @@ export function Main() {
                 </div>
                 <div className="flex-flex-row space-y-3 pt-4">
                   <div className="flex flex-row justify-end items-center">
-                    <div className="flex flex-row justify-between items-center space-x-3">
+                    <div className="
+                    w-full
+                    flex flex-row
+                    justify-end items-center
+                    space-x-3">
+                      {/*
+                      <Button
+                        onClick={handleSubmit}
+                        disabled={!storyPromptDraft || isBusy || !generatedClap}
+                        // 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</span>
+                      </Button>
+                      */}
+
                       <Button
                         onClick={handleSubmit}
                         disabled={!storyPromptDraft || isBusy}
@@ -227,14 +311,23 @@ export function Main() {
                           storyPromptDraft ? "opacity-100" : "opacity-80"
                         )}
                       >
-                       <span className="mr-1">Generate</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>
                   </div>
-                    <div className="text-stone-900/90 dark:text-stone-100/90 text-xs w-full text-right">
+                    <div className="
+                    text-stone-900/90 dark:text-stone-100/90
+                    text-sm md:text-base lg:text-lg
+                    w-full text-right">
                     {isBusy
-                      ? `Generation in progress (${status})`
-                      : ""
+                      ? (
+                        storyGenerationStatus === "generating" ? "Enhancing the story.."
+                        : imageGenerationStatus === "generating" ? "Generating storyboards.."
+                        : voiceGenerationStatus === "generating" ? "Generating voices.."
+                        : videoGenerationStatus === "generating" ? "Assembling final video.."
+                        : "Please wait.."
+                      )
+                      : <span>&nbsp;</span> // to prevent layout changes
                      }
                     </div>
                   </div>
@@ -242,10 +335,11 @@ export function Main() {
               </Card>
           </div>
           <div className={cn(
-            `flex flex-col items-center justify-start md:justify-center`,
-            `flex-1`,
-            `md:h-screen`,
-            // `transition-all duration-300 ease-in-out`
+            `flex flex-col items-center justify-center`,
+            `flex-1 h-full`,
+            // `transition-all duration-200 ease-in-out`
+
+            `-mt-[100px] -mb-[90px] md:-mt-0 md:-mb-0`,
           )}>
             
             <div className={cn(`
@@ -256,12 +350,49 @@ export function Main() {
               <DeviceFrameset
                 device="Nexus 5"
                 // color="black"
+
+                // note: videos are generated in 512x1024
+                // so we need to keep the same ratio here
+                width={256}
+                height={512}
               >
-                <div className="bg-black w-full h-full text-white">Hello world</div>
+                <div className="
+                flex flex-col items-center justify-center
+                w-full h-full
+                bg-black text-white
+                ">
+                  {generatedVideo && <video
+                    src={generatedVideo}
+                    controls
+                    autoPlay
+                    playsInline
+                    muted
+                    loop
+                    className="object-cover"
+                    style={{
+                    }}
+                  />}
+                </div>
               </DeviceFrameset>
             </div>
           </div>
         </div>
+
+        <div className="
+        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/page.tsx

@@ -21,9 +21,9 @@ export default function Page() {
         <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86" />
       </Head>
       <main className={cn(
-        `light text-cyan-900`,
-        // `bg-gradient-to-r from-green-500 to-yellow-400`,
-        `bg-gradient-to-r from-cyan-500 to-blue-400`,
+        ``,
+        `text-stone-900/90 dark:text-stone-100/90`,
+        `bg-stone-500`,
         )}>
         {isLoaded && <Main />}
       </main>

src/app/server/aitube/createClap.ts

@@ -12,6 +12,11 @@ export async function createClap({
 }): Promise<ClapProject> {
   const clap: ClapProject = await apiCreateClap({
     prompt,
+
+    // the vertical video look 🤳
+    height: 1024,
+    width: 512,
+
     token: await getToken()
   })
 

src/app/server/aitube/editClapDialogues.ts

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

src/app/store.ts

@@ -1,6 +1,7 @@
 "use client"
 
 import { GlobalStatus, TaskStatus } from "@/types"
+import { ClapProject } from "@aitube/clap"
 import { create } from "zustand"
 
 export const useStore = create<{
@@ -11,6 +12,8 @@ export const useStore = create<{
   voiceGenerationStatus: TaskStatus
   imageGenerationStatus: TaskStatus
   videoGenerationStatus: TaskStatus
+  generatedClap?: ClapProject
+  generatedVideo: string
   setStoryPromptDraft: (storyPromptDraft: string) => void
   setStoryPrompt: (storyPrompt: string) => void
   setStatus: (status: GlobalStatus) => void
@@ -18,6 +21,8 @@ export const useStore = create<{
   setVoiceGenerationStatus: (voiceGenerationStatus: TaskStatus) => void
   setImageGenerationStatus: (imageGenerationStatus: TaskStatus) => void
   setVideoGenerationStatus: (videoGenerationStatus: TaskStatus) => void
+  setGeneratedClap: (generatedClap?: ClapProject) => void
+  setGeneratedVideo: (generatedVideo: string) => void
 }>((set, get) => ({
   storyPromptDraft: "Yesterday I was at my favorite pizza place and..",
   storyPrompt: "",
@@ -26,6 +31,8 @@ export const useStore = create<{
   voiceGenerationStatus: "idle",
   imageGenerationStatus: "idle",
   videoGenerationStatus: "idle",
+  generatedClap: undefined,
+  generatedVideo: "",
   setStoryPromptDraft: (storyPromptDraft: string) => { set({ storyPromptDraft }) },
   setStoryPrompt: (storyPrompt: string) => { set({ storyPrompt }) },
   setStatus: (status: GlobalStatus) => { set({ status }) },
@@ -33,4 +40,6 @@ 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 }) },
 }))

src/components/form/textarea-field.tsx

@@ -21,16 +21,19 @@ export function TextareaField({
       `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 className={cn(
+      `text-base md:text-lg lg:text-xl`,
+      `text-stone-900/90 dark:text-stone-100/90`,
+      labelClassName)}
       style={{ textShadow: "rgb(255 255 255 / 19%) 0px 0px 2px" }}>{label}</Label>}
       <Textarea {...props} className={cn(`
       text-base md:text-lg lg:text-xl
       rounded-lg md:rounded-xl lg:rounded-2xl
       border-2
-      backdrop-blur-2xl
+      
+      bg-stone-800/90 text-amber-400/100
+      dark:bg-stone-800/90 dark:text-amber-400/100
+
       border-stone-800/80 dark:border-stone-800/80
       outline-stone-800/80 dark:outline-stone-800/80
       ring-stone-800/80 dark:ring-stone-800/80