before the lora, let's make the base system work properly

.env

@@ -3,7 +3,7 @@
 # VIDEO_HOTSHOT_XL_API_OFFICIAL
 # VIDEO_HOTSHOT_XL_API_JBILCKE
 # VIDEO_HOTSHOT_XL_API_FFFILONI
-VIDEO_ENGINE="VIDEO_HOTSHOT_XL_API_JBILCKE"
+VIDEO_ENGINE="VIDEO_HOTSHOT_XL_API_FFFILONI"
 
 # the official API developed by the Hotshot-XL team
 # note: it isn't released yet

src/app/layout.tsx

@@ -10,9 +10,10 @@ export const metadata: Metadata = {
   // giffer
   // gipher
   // GIF Factory
-  // GIF Migic
-  title: 'AI GIF Genie 🧞',
-  description: 'AI GIF Genie 🧞',
+  // GIF Magic
+  // AI GIF Genie
+  title: 'Hotshot-XL Text-to-GIF 🧞',
+  description: 'Hotshot-XL Text-to-GIF 🧞',
 }
 
 export default function RootLayout({

src/app/page.tsx

@@ -20,6 +20,7 @@ export default function Page() {
       </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`,
         )}>
         {isLoaded && <Main />}

src/app/server/actions/animation.ts

@@ -54,35 +54,36 @@ export async function generateAnimation({
 
       return content
     } else if (videoEngine === "VIDEO_HOTSHOT_XL_API_FFFILONI") {
-      const res = await fetch(jbilckeApi, {
+      const res = await fetch(fffiloniApi + "api/predict", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
           // access isn't secured for now, the free lunch is open
           // Authorization: `Bearer ${token}`,
         },
-        body: JSON.stringify([
-          0,
-          prompt,
-          // lora, // not supported
-          // size,
-        ]),
+        body: JSON.stringify({
+          fn_index: 0,
+          data: [
+            prompt,
+            // lora, // not supported
+            // size, // not supported
+          ],
+        }),
         cache: "no-store",
         // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
         // next: { revalidate: 1 }
       })
-      console.log("res:", res)
 
-      const content = await res.text()
-      console.log("content:", content)
+      const { data } = await res.json()
 
       // Recommendation: handle errors
       if (res.status !== 200) {
-        console.error(content)
         // This will activate the closest `error.js` Error Boundary
         throw new Error('Failed to fetch data')
       }
+      // console.log("data:", data.slice(0, 50))
 
+      return data
     } else {
       throw new Error(`not implemented yet!`)
     }