project is starting to take shape

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@aitube/clap": "^0.0.6",
-        "@aitube/client": "^0.0.3",
+        "@aitube/client": "^0.0.4",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-checkbox": "^1.0.4",
@@ -39,6 +39,7 @@
         "eslint": "8.56.0",
         "eslint-config-next": "14.1.0",
         "jimp": "^0.22.12",
+        "jose": "^5.2.4",
         "lucide-react": "^0.334.0",
         "next": "^14.2.3",
         "next-themes": "^0.2.1",
@@ -60,14 +61,6 @@
         "zustand": "^4.5.2"
       }
     },
-    "node_modules/@aashutoshrathi/word-wrap": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
-      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/@aitube/clap": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/@aitube/clap/-/clap-0.0.6.tgz",
@@ -81,9 +74,9 @@
       }
     },
     "node_modules/@aitube/client": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/@aitube/client/-/client-0.0.3.tgz",
-      "integrity": "sha512-BO6CVyNP3kqRJbVmecF2YZlmKyePGIdI6wcSzEkcIEgZTqI1D6oO7AZqbBIA8JhQBQTwuAYO6DhoYqclnG0J8w==",
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@aitube/client/-/client-0.0.4.tgz",
+      "integrity": "sha512-LzOYgwSKJVslGbTEP3DEsgh5/EWupv04HNoTt3hxDQBo9/I5AF/ZwoLBDQR3QTu1i3spMJ61Sl0gVtrXxp2q3A==",
       "dependencies": {
         "uuid": "^9.0.1",
         "yaml": "^2.4.1"
@@ -5315,6 +5308,14 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jose": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-5.2.4.tgz",
+      "integrity": "sha512-6ScbIk2WWCeXkmzF6bRPmEuaqy1m8SbsRFMa/FLrSCkGIhj8OLVG/IH+XHVmNMx/KUo8cVWEE6oKR4dJ+S0Rkg==",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/jpeg-js": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.4.tgz",
@@ -5863,16 +5864,16 @@
       }
     },
     "node_modules/optionator": {
-      "version": "0.9.3",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
-      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "dependencies": {
-        "@aashutoshrathi/word-wrap": "^1.2.3",
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
         "levn": "^0.4.1",
         "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0"
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -7665,6 +7666,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@aitube/clap": "^0.0.6",
-    "@aitube/client": "^0.0.3",
+    "@aitube/client": "^0.0.4",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -40,6 +40,7 @@
     "eslint": "8.56.0",
     "eslint-config-next": "14.1.0",
     "jimp": "^0.22.12",
+    "jose": "^5.2.4",
     "lucide-react": "^0.334.0",
     "next": "^14.2.3",
     "next-themes": "^0.2.1",

src/app/main.tsx

@@ -12,9 +12,9 @@ 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 { generateClap } from './server/aitube/generateClap'
-import { extendClap } from './server/aitube/extendClap'
-import { exportClap } from './server/aitube/exportClap'
+import { createClap } from './server/aitube/createClap'
+import { editClapStoryboards } from './server/aitube/editClapStoryboards'
+import { exportClapToVideo } from './server/aitube/exportClapToVideo'
 
 export function Main() {
   const [_isPending, startTransition] = useTransition()
@@ -53,7 +53,7 @@ export function Main() {
 
       let clap: ClapProject | undefined = undefined
       try {
-        clap = await generateClap({ prompt })
+        clap = await createClap({ prompt })
 
         console.log(`handleSubmit(): received a clap = `, clap)
         setStoryGenerationStatus("finished")
@@ -68,7 +68,7 @@ export function Main() {
 
       try {
         setImageGenerationStatus("generating")
-        clap = await extendClap({ clap })
+        clap = await editClapStoryboards({ clap })
 
         console.log(`handleSubmit(): received a clap with images = `, clap)
         setImageGenerationStatus("finished")
@@ -84,7 +84,7 @@ export function Main() {
       let assetUrl = ""
       try {
         setVideoGenerationStatus("generating")
-        assetUrl = await exportClap({ clap })
+        assetUrl = await exportClapToVideo({ clap })
 
         console.log(`handleSubmit(): received a video:`, assetUrl)
         setVideoGenerationStatus("finished")

src/app/server/aitube/config.ts

@@ -1,5 +1,2 @@
 
 export const serverHuggingfaceApiKey = `${process.env.HF_API_TOKEN || ""}`
-
-export const aitubeUrl = `${process.env.AI_TUBE_URL || "" }`
-export const aitubeApiUrl = aitubeUrl + (aitubeUrl.endsWith("/") ? "" : "/") + "api/"

src/app/server/aitube/{generateClap.ts → createClap.ts}

@@ -1,12 +1,19 @@
 "use server"
 
 import { ClapProject } from "@aitube/clap"
-import * as aitube from "@aitube/client"
+import { createClap as apiCreateClap } from "@aitube/client"
 
-export async function generateClap({
+import { getToken } from "./getToken"
+
+export async function createClap({
   prompt = "",
 }: {
   prompt: string
 }): Promise<ClapProject> {
-  return aitube.generateClap({ prompt })
-}
+  const clap: ClapProject = await apiCreateClap({
+    prompt,
+    token: await getToken()
+  })
+
+  return clap
+}

src/app/server/aitube/editClapStoryboards.ts

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

src/app/server/aitube/exportClap.ts

@@ -1,12 +0,0 @@
-"use server"
-
-import { ClapProject } from "@aitube/clap"
-import * as aitube from "@aitube/client"
-
-export async function exportClap({
-  clap,
-}: {
-  clap: ClapProject
-}): Promise<string> {
-  return aitube.exportClap({ clap })
-}

src/app/server/aitube/exportClapToVideo.ts

@@ -0,0 +1,23 @@
+"use server"
+
+import { ClapProject } from "@aitube/clap"
+import { exportClapToVideo as apiExportClapToVideo } from "@aitube/client"
+
+import { getToken } from "./getToken"
+
+export async function exportClapToVideo({
+  clap,
+}: {
+  clap: ClapProject
+}): Promise<string> {
+  // TODO: maybe we should return a blob instead,
+  // as this could be big eg. a few megabytes
+  // or maybe we should convert it to an object id
+  const dataUri: string = await apiExportClapToVideo({
+    clap,
+    format: "mp4",
+    token: await getToken()
+  })
+
+  return dataUri
+}

src/app/server/aitube/extendClap.ts

@@ -1,12 +0,0 @@
-"use server"
-
-import { ClapProject } from "@aitube/clap"
-import * as aitube from "@aitube/client"
-
-export async function extendClap({
-  clap,
-}: {
-  clap: ClapProject
-}): Promise<ClapProject> {
-  return aitube.extendClap({ clap })
-}

src/app/server/aitube/getToken.ts

@@ -0,0 +1,20 @@
+import { createSecretKey } from "crypto"
+import { SignJWT } from "jose"
+
+// https://jmswrnr.com/blog/protecting-next-js-api-routes-query-parameters
+
+export async function getToken(data: Record<string, any> = {}): Promise<string> {
+  const secretKey = createSecretKey(`${process.env.AI_TUBE_API_SECRET_JWT_KEY || ""}`, 'utf-8');
+
+  const jwtToken = await new SignJWT(data)
+   .setProtectedHeader({
+    alg: 'HS256'
+   }) // algorithm
+   .setIssuedAt()
+   .setIssuer(`${process.env.AI_TUBE_API_SECRET_JWT_ISSUER || ""}`) // issuer
+   .setAudience(`${process.env.AI_TUBE_API_SECRET_JWT_AUDIENCE || ""}`) // audience
+   .setExpirationTime("1 day") // token expiration time - to prevent hackers from re-using our URLs more than a day
+   .sign(secretKey); // secretKey generated from previous step
+
+  return jwtToken
+}