added a firehose

.env

@@ -12,9 +12,10 @@ REPLICATE_API_MODEL="lucataco/sdxl-panoramic"
 REPLICATE_API_MODEL_VERSION="76acc4075d0633dcb3823c1fed0419de21d42001b65c816c7b5b9beff30ec8cd"
 
 # ----------- CENSORSHIP -------
-# Due to abuse by users, I've had to add a censorshi/fingerprinting mechanism
+# Due to abuse by users, I've had to add a censorship/fingerprinting mechanism
 ENABLE_CENSORSHIP="false"
 FINGERPRINT_KEY=
+MODERATION_KEY=
 
 # ----------- COMMUNITY SHARING (OPTIONAL, YOU DON'T NEED THIS IN LOCAL) -----------
 NEXT_PUBLIC_ENABLE_COMMUNITY_SHARING="false"

src/app/engine/community.ts

@@ -2,12 +2,13 @@
 
 import { v4 as uuidv4 } from "uuid"
 
-import { CreatePostResponse, GetAppPostsResponse, Post, PostVisibility } from "@/types"
+import { CreatePostResponse, GetAppPostResponse, GetAppPostsResponse, Post, PostVisibility } from "@/types"
 import { filterOutBadWords } from "./censorship"
 
 const apiUrl = `${process.env.COMMUNITY_API_URL || ""}`
 const apiToken = `${process.env.COMMUNITY_API_TOKEN || ""}`
 const appId = `${process.env.COMMUNITY_API_ID || ""}`
+const secretModerationKey = `${process.env.MODERATION_KEY || ""}`
 
 export async function postToCommunity({
   prompt,
@@ -23,7 +24,7 @@ export async function postToCommunity({
   if (prompt !== before) {
     console.log(`user attempted to use bad words! their original prompt is: ${before}`)
   }
-  
+
   // if the community API is disabled,
   // we don't fail, we just mock
   if (!apiUrl) {
@@ -137,4 +138,108 @@ export async function getLatestPosts(visibility?: PostVisibility): Promise<Post[
     // throw new Error(error)
     return []
   }
-}
+}
+
+export async function getPost(postId: string): Promise<Post> {
+
+ // if the community API is disabled we don't fail,
+  // we just mock
+  if (!apiUrl) {
+    throw new Error("community API is not enabled")
+  }
+
+  try {
+    // console.log(`calling GET ${apiUrl}/posts with renderId: ${renderId}`)
+    const res = await fetch(`${apiUrl}/posts/${appId}/${postId}`, {
+      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 GetAppPostResponse
+    // console.log("response:", response)
+    return response.post
+  } catch (err) {
+    const error = `failed to get post: ${err}`
+    console.error(error)
+    throw new Error(error)
+  }
+}
+
+export async function deletePost({
+  postId,
+  moderationKey,
+}: {
+  postId: string
+  moderationKey: string
+}): Promise<boolean> {
+
+  // if the community API is disabled,
+  // we don't fail, we just mock
+  if (!apiUrl) {
+    return false
+  }
+
+  if (!postId) {
+    console.error(`cannot delete a post without a postId, aborting..`)
+    throw new Error(`cannot delete a post without a postId, aborting..`)
+  }
+  if (!moderationKey) {
+    console.error(`cannot delete a post without a moderationKey, aborting..`)
+    throw new Error(`cannot delete a post without a moderationKey, aborting..`)
+  }
+
+  if (moderationKey !== secretModerationKey) {
+    console.error(`invalid moderation key, operation denied! please ask a Panoremix admin for the mdoeration key`)
+    throw new Error(`invalid moderation key, operation denied! please ask a Panoremix admin for the mdoeration key`)
+  }
+
+  try {
+    console.log(`calling DELETE ${apiUrl}/posts/${appId}/${postId}`)
+
+    const res = await fetch(`${apiUrl}/posts/${appId}/${postId}`, {
+      method: "DELETE",
+      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 CreatePostResponse
+    return true
+  } catch (err) {
+    const error = `failed to delete the post: ${err}`
+    console.error(error)
+    throw new Error(error)
+  }
+}

src/app/firehose/delete.tsx

@@ -0,0 +1,60 @@
+import { startTransition, useEffect, useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
+import { Post } from "@/types"
+
+import { deletePost } from "../engine/community"
+
+export function Delete({ post, moderationKey = "", onDelete = () => {} }: { post?: Post, moderationKey?: string; onDelete: (post: Post) => void }) {
+  const [isOpen, setOpen] = useState(false)
+
+  useEffect(() => {
+    if (post?.postId && !isOpen) {
+      setOpen(true)
+    }
+  }, [post?.postId])
+
+  const handleDelete = () => {
+    startTransition(() => {
+      const fn = async () => {
+        setOpen(false)
+        if (!post) { return }
+        const postId = post.postId
+        await deletePost({ postId, moderationKey })
+        onDelete(post)
+      }
+      fn()
+    })
+  }
+  
+  return (
+    <Dialog open={isOpen} onOpenChange={setOpen}>
+      <DialogContent className="sm:max-w-[800px]">
+        <DialogHeader>
+          <DialogTitle>Delete</DialogTitle>
+        </DialogHeader>
+        {post ?<div className="flex flex-col py-4 text-stone-800">
+       
+        <div className="w-full h-64">
+          <img
+              src={post.assetUrl}
+              className={cn(
+                `w-full h-64 rounded-xl overflow-hidden object-cover`,
+                `border border-zinc-900/70`
+                )}
+            /> 
+          </div>
+          <div className="text-lg text-stone-800/80 word-break w-full py-6">{post.prompt}</div>
+        </div> : null}
+        <DialogFooter>
+          <div  className="w-full flex flex-row space-x-6 items-center justify-center">
+            <Button type="submit" className="text-xl bg-green-800 text-green-100 hover:bg-green-700 hover:text-green-50" onClick={() => setOpen(false)}>Keep</Button>
+            <Button type="submit" className="text-xl bg-red-800 text-red-100 hover:bg-red-700 hover:text-red-50" onClick={handleDelete}>Delete</Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/{landing.tsx → firehose/page.tsx}

@@ -6,12 +6,18 @@ import { Post } from "@/types"
 import { cn } from "@/lib/utils"
 import { actionman } from "@/lib/fonts"
 
+import { getLatestPosts } from "../engine/community"
+import { useSearchParams } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Delete } from "./delete"
+import Link from "next/link"
 
-import { getLatestPosts } from "./engine/community"
-
-export default function Landing() {
+export default function FirehosePage() {
+  const searchParams = useSearchParams()
   const [_isPending, startTransition] = useTransition()
   const [posts, setPosts] = useState<Post[]>([])
+  const moderationKey = (searchParams.get("moderationKey") as string) || ""
+  const [toDelete, setToDelete] = useState<Post>()
 
   useEffect(() => {
     startTransition(async () => {
@@ -20,6 +26,11 @@ export default function Landing() {
     })
   }, [])
 
+  const handleOnDelete = ({ postId }: Post) => {
+    setPosts(posts.filter(post => post.postId !== postId))
+    setToDelete(undefined)
+  }
+
   return (
     <div className={cn(
       `light fixed w-full h-full flex flex-col items-center bg-slate-300 text-slate-800`,
@@ -35,27 +46,42 @@ export default function Landing() {
 
         <div className="w-full grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-x-4 gap-y-6 px-12">
           {posts.map(post => (
-            <div
+            <Link
               key={post.postId}
-              className="flex flex-col space-y-3 cursor-pointer"
-              onClick={() => {
-                // TODO
-              }}
-              >
-              <div className="w-full h-24">
-                <img
-                  src={post.assetUrl}
-                  className={cn(
-                    `w-full h-24 rounded-xl overflow-hidden object-cover`,
-                    `border border-zinc-900/70`
-                    )}
-                />
+              href={`/?postId=${post.postId}`}
+              target="_blank">
+              <div
+                key={post.postId}
+                className="group flex flex-col space-y-3 cursor-pointer"
+                >
+                <div className="w-full h-24">
+                {moderationKey ? <div className="relative -mb-8 ml-2">
+                  <Button
+                    className="z-30 bg-red-200 text-red-700 hover:bg-red-300 hover:text-red-800 text-2xs px-2 h-7"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      setToDelete(post)
+                      return false
+                    }}>Delete</Button>
+                </div> : null}
+                  <img
+                    src={post.assetUrl}
+                    className={cn(
+                      `w-full h-24 rounded-xl overflow-hidden object-cover`,
+                      `border border-zinc-900/70`,
+                      // `group-hover:brightness-105`
+                      )}
+                  />
+                </div>
+                <div
+                  className="text-sm text-stone-800/80 truncate w-full group-hover:underline underline-offset-2"
+                >{post.prompt}</div>
               </div>
-              <div className="text-sm text-stone-800/80 truncate w-full">{post.prompt}</div>
-            </div>
+            </Link>
           ))}
         </div>
       </div>
+      <Delete post={toDelete} moderationKey={moderationKey} onDelete={handleOnDelete} />
     </div>
   )
 }

src/app/generate/page.tsx

@@ -11,12 +11,16 @@ import { BottomBar } from "../interface/bottom-bar"
 import { SphericalImage } from "../interface/spherical-image"
 import { getRender, newRender } from "../engine/render"
 import { RenderedScene } from "@/types"
-import { postToCommunity } from "../engine/community"
+import { getPost, postToCommunity } from "../engine/community"
+import { useSearchParams } from "next/navigation"
 
 export default function GeneratePage() {
+  const searchParams = useSearchParams()
   const [_isPending, startTransition] = useTransition()
+  const postId = (searchParams.get("postId") as string) || ""
 
   const prompt = useStore(state => state.prompt)
+  const setPrompt = useStore(state => state.setPrompt)
   const setRendered = useStore(state => state.setRendered)
   const renderedScene = useStore(state => state.renderedScene)
   const isLoading = useStore(state => state.isLoading)
@@ -35,6 +39,10 @@ export default function GeneratePage() {
   useEffect(() => {
     if (!prompt) { return }
 
+    // to prevent loading a new prompt if we are already loading
+    // (eg. the initial one, from a community post)
+    // if (isLoading) { return }
+
     startTransition(async () => {
  
       try {
@@ -52,10 +60,16 @@ export default function GeneratePage() {
     startTransition(async () => {
       clearTimeout(timeoutRef.current)
 
+      if (renderedRef.current?.status === "completed") {
+        console.log("rendering job is already completed")
+        return
+      }
+
       if (!renderedRef.current?.renderId || renderedRef.current?.status !== "pending") {
         timeoutRef.current = setTimeout(checkStatus, delay)
         return
       }
+
       try {
         // console.log(`Checking job status API for job ${renderedRef.current?.renderId}`)
         const newRendered = await getRender(renderedRef.current.renderId)
@@ -109,6 +123,39 @@ export default function GeneratePage() {
     }
   }, [prompt])
 
+  useEffect(() => {
+    if (!postId) {
+      return
+    }
+    setLoading(true)
+
+    startTransition(async () => {
+      try {
+        console.log(`loading post ${postId}`)
+        const post = await getPost(postId)
+
+        // setting the prompt here will mess-up with everything
+        // normally this shouldn't trigger the normal prompt update workflow,
+        // because we are set the app to "is loading"
+        // setPrompt(post.prompt)
+
+        setRendered({
+          renderId: postId,
+          status: "completed",
+          assetUrl: post.assetUrl, 
+          alt: post.prompt,
+          error: "",
+          maskUrl: "",
+          segments: []
+        })
+        setLoading(false)
+      } catch (err) {
+        console.error("failed to get post: ", err)
+        setLoading(false)
+      }
+    })
+  }, [postId])
+
   return (
     <div className="">
       <TopMenu />

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

@@ -10,7 +10,7 @@ import { Button } from "@/components/ui/button"
 export function TopMenu() {
   const prompt = useStore(state => state.prompt)
 
-  const generate = useStore(state => state.generate)
+  const setPrompt = useStore(state => state.setPrompt)
 
   const isLoading = useStore(state => state.isLoading)
   const setLoading = useStore(state => state.setLoading)
@@ -24,7 +24,7 @@ export function TopMenu() {
   const handleSubmit = () => {
     const promptChanged = draftPrompt.trim() !== prompt.trim()
     if (!isLoading && (promptChanged)) {
-      generate(draftPrompt)
+      setPrompt(draftPrompt)
     }
   }
 

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import Head from "next/head"
 
-// import Landing from "./landing"
+// import Firehose from "./firehose/page"
 import Generate from "./generate/page"
 
 import { TooltipProvider } from "@/components/ui/tooltip"

src/app/store/index.ts

@@ -10,7 +10,7 @@ export const useStore = create<{
   isLoading: boolean
   setLoading: (isLoading: boolean) => void
   setRendered: (renderedScene: RenderedScene) => void
-  generate: (prompt: string) => void
+  setPrompt: (prompt: string) => void
 }>((set, get) => ({
   prompt: "",
   renderedScene: {
@@ -31,7 +31,7 @@ export const useStore = create<{
       renderedScene
     })
   },
-  generate: (prompt: string) => {
+  setPrompt: (prompt: string) => {
     set({
       prompt,
     })

src/types.ts

@@ -115,4 +115,10 @@ export type GetAppPostsResponse = {
   success?: boolean
   error?: string
   posts: Post[]
+}
+
+export type GetAppPostResponse = {
+  success?: boolean
+  error?: string
+  post: Post
 }