working to add the firehose

.env

@@ -28,3 +28,10 @@ HF_INFERENCE_API_MODEL="codellama/CodeLlama-7b-hf"
 
 # Not supported yet
 OPENAI_TOKEN=
+
+# ----------- COMMUNITY SHARING (OPTIONAL) -----------
+# You don't need those community sharing options to run the AI Comic Factory
+# locally or on your own server (they are meant to be used by the Hugging Face team)
+COMMUNITY_API_URL=
+COMMUNITY_API_TOKEN=
+COMMUNITY_API_ID=

README.md

@@ -25,7 +25,16 @@ If you try to duplicate the project, you will see it requires some variables:
 - `RENDERING_ENGINE`: can only be "VIDEOCHAIN" for now, unless you code your custom solution
 - `VIDEOCHAIN_API_URL`: url to the VideoChain API server
 - `VIDEOCHAIN_API_TOKEN`: secret token to access the VideoChain API server
- 
+
+In addition, there are some community sharing variables that you can just ignore.
+
+Those variables are not required to run the AI Comic Factory on your own website or computer
+(they are meant to create a connection with the Hugging Face community,
+and thus only make sense for official Hugging Face apps):
+- `COMMUNITY_API_URL`: community sharing feature
+- `COMMUNITY_API_TOKEN`: you don't need this
+- `COMMUNITY_API_ID`: same
+
 Please read the `.env` default config file for more informations.
 To customise a variable locally, you should create a `.env.local`
 (do not commit this file as it will contain your secrets).

src/app/engine/community.ts

@@ -0,0 +1,127 @@
+"use server"
+
+import { v4 as uuidv4 } from "uuid"
+
+import { CreatePostResponse, GetAppPostsResponse, Post } from "@/types"
+
+const apiUrl = `${process.env.COMMUNITY_API_URL || ""}`
+const apiToken = `${process.env.COMMUNITY_API_TOKEN || ""}`
+const appId = `${process.env.APP_ID || ""}`
+
+export async function postToCommunity({
+  prompt,
+  assetUrl,
+}: {
+  prompt: string
+  assetUrl: string
+}): Promise<Post> {
+  // if the community API is disabled,
+  // we don't fail, we just mock
+  if (!apiUrl) {
+    const mockPost: Post = {
+      postId: uuidv4(),
+      appId: "mock",
+      prompt,
+      previewUrl: assetUrl,
+      assetUrl,
+      createdAt: new Date().toISOString(),
+      upvotes: 0,
+      downvotes: 0
+    }
+    return mockPost
+  }
+
+  if (!prompt) {
+    console.error(`cannot call the community API without a prompt, aborting..`)
+    throw new Error(`cannot call the community API without a prompt, aborting..`)
+  }
+  if (!assetUrl) {
+    console.error(`cannot call the community API without an assetUrl, aborting..`)
+    throw new Error(`cannot call the community API without an assetUrl, aborting..`)
+  }
+
+  try {
+    console.log(`calling POST ${apiUrl}/post with prompt: ${prompt}`)
+
+    const postId = uuidv4()
+
+    const post: Partial<Post> = { postId, appId, prompt, assetUrl }
+
+    console.table(post)
+
+    const res = await fetch(`${apiUrl}/post`, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${apiToken}`,
+      },
+      body: JSON.stringify(post),
+      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)
+    // The return value is *not* serialized
+    // You can return Date, Map, Set, etc.
+    
+    // Recommendation: handle errors
+    if (res.status !== 200) {
+      // This will activate the closest `error.js` Error Boundary
+      throw new Error('Failed to fetch data')
+    }
+    
+    const response = (await res.json()) as CreatePostResponse
+    // console.log("response:", response)
+    return response.post
+  } catch (err) {
+    const error = `failed to post to community: ${err}`
+    console.error(error)
+    throw new Error(error)
+  }
+}
+
+export async function getLatestPosts(): Promise<Post[]> {
+
+  let posts: Post[] = []
+
+  // if the community API is disabled we don't fail,
+  // we just mock
+  if (!apiUrl) {
+    return posts
+  }
+
+  try {
+    // console.log(`calling GET ${apiUrl}/posts with renderId: ${renderId}`)
+    const res = await fetch(`${apiUrl}/posts/${appId}`, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${apiToken}`,
+      },
+      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)
+    // The return value is *not* serialized
+    // You can return Date, Map, Set, etc.
+    
+    // Recommendation: handle errors
+    if (res.status !== 200) {
+      // This will activate the closest `error.js` Error Boundary
+      throw new Error('Failed to fetch data')
+    }
+    
+    const response = (await res.json()) as GetAppPostsResponse
+    // console.log("response:", response)
+    return Array.isArray(response?.posts) ? response?.posts : []
+  } catch (err) {
+    const error = `failed to get posts: ${err}`
+    console.error(error)
+    throw new Error(error)
+  }
+}

src/types.ts

@@ -90,4 +90,27 @@ export type LLMEngine =
 export type RenderingEngine =
   | "VIDEOCHAIN"
   | "OPENAI"
-  | "REPLICATE"
+  | "REPLICATE"
+
+export type Post = {
+  postId: string
+  appId: string
+  prompt: string
+  previewUrl: string
+  assetUrl: string
+  createdAt: string
+  upvotes: number
+  downvotes: number
+}
+
+export type CreatePostResponse = {
+  success?: boolean
+  error?: string
+  post: Post
+}
+
+export type GetAppPostsResponse = {
+  success?: boolean
+  error?: string
+  posts: Post[]
+}