working to add the firehose

.env

@@ -10,4 +10,11 @@ VIDEOCHAIN_API_TOKEN=
 # Not supported yet
 REPLICATE_API_TOKEN=
 REPLICATE_API_MODEL="lucataco/sdxl-panoramic"
-REPLICATE_API_MODEL_VERSION="76acc4075d0633dcb3823c1fed0419de21d42001b65c816c7b5b9beff30ec8cd"
+REPLICATE_API_MODEL_VERSION="76acc4075d0633dcb3823c1fed0419de21d42001b65c816c7b5b9beff30ec8cd"
+
+# ----------- COMMUNITY SHARING (OPTIONAL, YOU DON'T NEED THIS IN LOCAL) -----------
+# You don't need those community sharing options to run Panoremix
+# 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=

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/app/engine/render.ts

@@ -29,10 +29,10 @@ export async function newRender({
   }
 
  prompt = [
-   `hdri view`,
-   `highly detailed`,
-   `intricate details`,
-   prompt
+    `hdri view`,
+    `highly detailed`,
+    `intricate details`,
+    prompt
  ].join(', ')
 
   // return await Gorgon.get(cacheKey, async () => {

src/app/interface/top-menu/index.tsx

@@ -45,7 +45,7 @@ export function TopMenu() {
         )}>
           <div className="flex flex-row flex-grow w-full">
         <Input
-          placeholder={`Type a location name eg. "Spaceport in Mos Eisley", "Jurassic Park entrance", "Street at night, Metropolis"..`}
+          placeholder={`Type a location e.g. "Jurassic Park entrance", "Spaceport in Mos Eisley"..`}
           className="w-full bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800 rounded-r-none"
           // disabled={atLeastOnePanelIsBusy}
           onChange={(e) => {

src/app/main.tsx

@@ -12,7 +12,7 @@ import { SphericalImage } from "./interface/spherical-image"
 import { getRender, newRender } from "./engine/render"
 import { RenderedScene } from "@/types"
 
-export default function Main() {
+export default function Generator() {
   const [_isPending, startTransition] = useTransition()
 
   const prompt = useStore(state => state.prompt)

src/app/todo.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { useState, useTransition } from "react"
+
+import { Post } from "@/types"
+
+export default function Main() {
+  const [_isPending, startTransition] = useTransition()
+  const posts = useState<Post[]>([])
+
+  return (
+    <div>
+      <h1>Panoremix</h1>
+      <h2>Generate 360° panoramas from text!</h2>
+      
+      <h2>Explore latent locations discovered by the community</h2>
+
+      
+    </div>
+  )
+}

src/types.ts

@@ -86,4 +86,28 @@ export interface ImageAnalysisResponse {
 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[]
+  }
+