work in progress AI Stories Factory

src/app/main.tsx

@@ -12,6 +12,8 @@ import { TextareaField } from '@/components/form/textarea-field'
 import { DeviceFrameset } from 'react-device-frameset'
 import 'react-device-frameset/styles/marvel-devices.min.css'
 import { generateClap } from './server/aitube/generateClap'
+import { ClapOutputType, ClapProject } from '@/lib/clap/types'
+import { extendClap } from './server/aitube/extendClap'
 
 export function Main() {
   const [_isPending, startTransition] = useTransition()
@@ -42,19 +44,43 @@ export function Main() {
     const prompt = storyPromptDraft
 
     setStatus("generating")
+    setStoryGenerationStatus("generating")
     setStoryPrompt(prompt)
 
     startTransition(async () => {
       console.log(`handleSubmit(): generating a clap using prompt = "${prompt}" `)
 
+      let clap: ClapProject | undefined = undefined
       try {
-        const clap = await generateClap({ prompt })
+        clap = await generateClap({ prompt })
 
         console.log(`handleSubmit(): received a clap = `, clap)
-        setStatus("finished")
+        setStoryGenerationStatus("finished")
       } catch (err) {
+        setStoryGenerationStatus("error")
         setStatus("error")
+        return
       }
+      if (!clap) {
+        return
+      }
+
+      try {
+        setImageGenerationStatus("generating")
+        clap = await extendClap({ clap })
+
+        console.log(`handleSubmit(): received a clap with images = `, clap)
+        setImageGenerationStatus("finished")
+      } catch (err) {
+        setImageGenerationStatus("error")
+        setStatus("error")
+        return
+      }
+      if (!clap) {
+        return
+      }
+
+      setStatus("finished")
     })
   }
 
@@ -65,12 +91,13 @@ export function Main() {
       `bg-gradient-to-br from-amber-600 to-yellow-500`, 
       // `bg-gradient-to-br from-sky-400 to-sky-300/30`, 
       `w-screen h-screen 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 md:flex-row w-full
         "
-        style={{ boxShadow: "inset 0 0px 250px 0 rgb(0 0 0 / 60%)" }}>
+        >
           <div className={cn(
             `flex flex-col w-full md:w-[512px]`,
             `transition-all duration-300 ease-in-out`,

src/app/server/aitube/extendClap.ts

@@ -0,0 +1,35 @@
+"use server"
+
+import { parseClap } from "@/lib/clap/parseClap"
+import { ClapProject } from "@/lib/clap/types"
+
+import { aitubeApiUrl } from "../config"
+import { serializeClap } from "@/lib/clap/serializeClap"
+
+export async function extendClap({
+  clap,
+}: {
+  clap: ClapProject
+}): Promise<ClapProject> {
+  if (!clap) { throw new Error(`please provide a prompt`) }
+
+  // remember: a space needs to be public for the classic fetch() to work
+  const res = await fetch(`${aitubeApiUrl}generate/storyboards`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      // TODO pass the JWT so that only the AI Stories Factory can call the API
+      // Authorization: `Bearer ${hfApiToken}`,
+    },
+    body: await serializeClap(clap),
+    cache: "no-store",
+    // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
+    // next: { revalidate: 1 }
+  })
+
+  const blob = await res.blob()
+
+  const extendedClap = await parseClap(blob)
+  
+  return extendedClap
+}