working on community sharing features

.env

@@ -7,12 +7,12 @@ RENDERING_ENGINE="REPLICATE"
 VIDEOCHAIN_API_URL="http://localhost:7860"
 VIDEOCHAIN_API_TOKEN=
 
-# Not supported yet
 REPLICATE_API_TOKEN=
 REPLICATE_API_MODEL="lucataco/sdxl-panoramic"
 REPLICATE_API_MODEL_VERSION="76acc4075d0633dcb3823c1fed0419de21d42001b65c816c7b5b9beff30ec8cd"
 
 # ----------- COMMUNITY SHARING (OPTIONAL, YOU DON'T NEED THIS IN LOCAL) -----------
+NEXT_PUBLIC_ENABLE_COMMUNITY_SHARING="false"
 # 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=

src/app/engine/censorship.ts

@@ -0,0 +1,32 @@
+// I don't want to be banned by Replicate because bad actors are asking
+// for some naked anime stuff or whatever
+// I also want to avoid a PR scandal due to some bad user generated content
+
+const forbiddenWords = [
+  // those keywords have been generated by looking at the logs of the AI Comic Factory
+  // those are real requests some users tried to attempt.. :|
+  "nazi",
+  "hitler",
+  "boob",
+  "boobs",
+  "boobies",
+  "nipple",
+  "nipples",
+  "nude",
+  "nudes",
+  "naked",
+  "pee",
+  "peeing",
+  "erotic",
+  "sexy"
+]
+
+// temporary utility to make sure Replicate doesn't ban my account 
+// because of what users do in their prompt
+export const filterOutBadWords = (sentence: string) => {
+  const words = sentence.split(" ")
+  return words.filter(word => {
+    const lowerCase = word.toLocaleLowerCase()
+    return !forbiddenWords.includes(lowerCase)
+  }).join(" ")
+}

src/app/engine/community.ts

@@ -2,11 +2,12 @@
 
 import { v4 as uuidv4 } from "uuid"
 
-import { CreatePostResponse, GetAppPostsResponse, Post } from "@/types"
+import { CreatePostResponse, 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.APP_ID || ""}`
+const appId = `${process.env.COMMUNITY_API_ID || ""}`
 
 export async function postToCommunity({
   prompt,
@@ -15,6 +16,9 @@ export async function postToCommunity({
   prompt: string
   assetUrl: string
 }): Promise<Post> {
+
+  prompt = filterOutBadWords(prompt)
+
   // if the community API is disabled,
   // we don't fail, we just mock
   if (!apiUrl) {
@@ -25,6 +29,7 @@ export async function postToCommunity({
       previewUrl: assetUrl,
       assetUrl,
       createdAt: new Date().toISOString(),
+      visibility: "normal",
       upvotes: 0,
       downvotes: 0
     }
@@ -41,7 +46,7 @@ export async function postToCommunity({
   }
 
   try {
-    console.log(`calling POST ${apiUrl}/post with prompt: ${prompt}`)
+    console.log(`calling POST ${apiUrl}/posts/${appId} with prompt: ${prompt}`)
 
     const postId = uuidv4()
 
@@ -49,7 +54,7 @@ export async function postToCommunity({
 
     console.table(post)
 
-    const res = await fetch(`${apiUrl}/post`, {
+    const res = await fetch(`${apiUrl}/posts/${appId}`, {
       method: "POST",
       headers: {
         Accept: "application/json",
@@ -82,7 +87,7 @@ export async function postToCommunity({
   }
 }
 
-export async function getLatestPosts(): Promise<Post[]> {
+export async function getLatestPosts(visibility?: PostVisibility): Promise<Post[]> {
 
   let posts: Post[] = []
 
@@ -94,7 +99,9 @@ export async function getLatestPosts(): Promise<Post[]> {
 
   try {
     // console.log(`calling GET ${apiUrl}/posts with renderId: ${renderId}`)
-    const res = await fetch(`${apiUrl}/posts/${appId}`, {
+    const res = await fetch(`${apiUrl}/posts/${appId}/${
+      visibility || "all"
+    }`, {
       method: "GET",
       headers: {
         Accept: "application/json",
@@ -120,8 +127,9 @@ export async function getLatestPosts(): Promise<Post[]> {
     // 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)
+    // const error = `failed to get posts: ${err}`
+    // console.error(error)
+    // throw new Error(error)
+    return []
   }
 }

src/app/engine/render.ts

@@ -5,6 +5,7 @@ import Replicate, { Prediction } from "replicate"
 import { RenderRequest, RenderedScene, RenderingEngine } from "@/types"
 import { generateSeed } from "@/lib/generateSeed"
 import { sleep } from "@/lib/sleep"
+import { filterOutBadWords } from "./censorship"
 
 const renderingEngine = `${process.env.RENDERING_ENGINE || ""}` as RenderingEngine
 
@@ -32,7 +33,7 @@ export async function newRender({
     `hdri view`,
     `highly detailed`,
     `intricate details`,
-    prompt
+    filterOutBadWords(prompt)
  ].join(', ')
 
   // return await Gorgon.get(cacheKey, async () => {
@@ -240,6 +241,7 @@ export async function getRender(renderId: string) {
       
       const response = (await res.json()) as RenderedScene
       // console.log("response:", response)
+
       return response
     }
   } catch (err) {

src/app/{main.tsx → generate/page.tsx}

@@ -1,18 +1,19 @@
 "use client"
 
-import { useEffect, useRef, useState, useTransition } from "react"
+import { useEffect, useRef, useTransition } from "react"
 
 import { cn } from "@/lib/utils"
-import { TopMenu } from "./interface/top-menu"
+import { TopMenu } from "../interface/top-menu"
 import { fonts } from "@/lib/fonts"
 
-import { useStore } from "./store"
-import { BottomBar } from "./interface/bottom-bar"
-import { SphericalImage } from "./interface/spherical-image"
-import { getRender, newRender } from "./engine/render"
+import { useStore } from "../store"
+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"
 
-export default function Generator() {
+export default function GeneratePage() {
   const [_isPending, startTransition] = useTransition()
 
   const prompt = useStore(state => state.prompt)
@@ -78,6 +79,14 @@ export default function Generator() {
           setLoading(false)
         } else {
           console.log("panorama finished:", newRendered)
+          try {
+            await postToCommunity({
+              prompt,
+              assetUrl: newRendered.assetUrl,
+            })
+          } catch (err) {
+            console.log("failed to post to community, but it's no big deal")
+          }
           setRendered(newRendered)
           setLoading(false)
         }
@@ -101,7 +110,7 @@ export default function Generator() {
   }, [prompt])
 
   return (
-    <div>
+    <div className="">
       <TopMenu />
       <div className={cn(
         `fixed inset-0 w-screen h-screen overflow-y-scroll`,
@@ -129,7 +138,7 @@ export default function Generator() {
           isLoading ? ``: `scale-0 opacity-0`,
           `transition-all duration-300 ease-in-out`,
         )}>
-          {isLoading ? 'Generating new metaverse location..' : ''}
+          {isLoading ? 'Generating metaverse location in the latent space..' : ''}
         </div>
       </div>
     </div>

src/app/interface/about/index.tsx

@@ -8,7 +8,7 @@ export function About() {
   return (
     <Dialog open={isOpen} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="outline">
+        <Button variant="outline" className="text-stone-800 dark:text-stone-200">
           <span className="hidden md:inline">About this project</span>
           <span className="inline md:hidden">About</span>
         </Button>

src/app/interface/panel/index.txt

@@ -1,303 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState, useTransition } from "react"
-// import AutoSizer from "react-virtualized-auto-sizer"
-
-import { RenderedScene } from "@/types"
-
-import { getRender, newRender } from "@/app/engine/render"
-import { useStore } from "@/app/store"
-
-import { cn } from "@/lib/utils"
-import { getInitialRenderedScene } from "@/lib/getInitialRenderedScene"
-import { Progress } from "@/app/interface/progress"
-
-// import { see } from "@/app/engine/caption"
-// import { replaceTextInSpeechBubbles } from "@/lib/replaceTextInSpeechBubbles"
-
-export function Panel({
-  panel,
-  className = "",
-  width = 1,
-  height = 1,
-}: {
-  panel: number
-  className?: string
-  width?: number
-  height?: number
- }) {
-  const panelId = `${panel}`
-
-  const ref = useRef<HTMLImageElement>(null)
-  const font = useStore(state => state.font)
-  const preset = useStore(state => state.preset)
-
-  const setGeneratingImages = useStore(state => state.setGeneratingImages)
-
-  const [imageWithText, setImageWithText] = useState("")
-  const panels = useStore(state => state.panels)
-  const prompt = panels[panel] || ""
-
-  const captions = useStore(state => state.captions)
-  const caption = captions[panel] || ""
-
-  const zoomLevel = useStore(state => state.zoomLevel)
-  const showCaptions = useStore(state => state.showCaptions)
-
-  const addToUpscaleQueue = useStore(state => state.addToUpscaleQueue)
-
-  const [_isPending, startTransition] = useTransition()
-  const renderedScenes = useStore(state => state.renderedScenes)
-  const setRendered = useStore(state => state.setRendered)
-
-  const rendered = renderedScenes[panel] || getInitialRenderedScene()
-
-  // keep a ref in sync
-  const renderedRef = useRef<RenderedScene>()
-  const renderedKey = JSON.stringify(rendered)
-  useEffect(() => { renderedRef.current = rendered }, [renderedKey])
-
-  const timeoutRef = useRef<any>(null)
-
-  const delay = 3000 + (1000 * panel)
-
-  // since this run in its own loop, we need to use references everywhere
-  // but perhaps this could be refactored
-  useEffect(() => {
-    // console.log("Panel prompt: "+ prompt)
-    if (!prompt?.length) { return }
-
-    // important: update the status, and clear the scene
-    setGeneratingImages(panelId, true)
-
-    // just to empty it
-    setRendered(panelId, getInitialRenderedScene())
-
-    setTimeout(() => {
-      startTransition(async () => {
-
-      // console.log(`Loading panel ${panel}..`)
-    
-      let newRendered: RenderedScene
-      try {
-        newRendered = await newRender({ prompt, width, height })
-      } catch (err) {
-        // "Failed to load the panel! Don't worry, we are retrying..")
-        newRendered = await newRender({ prompt, width, height })
-      }
-
-      if (newRendered) {
-        // console.log("newRendered:", newRendered)
-        setRendered(panelId, newRendered)
-
-        // but we are still loading!
-      } else {
-        setRendered(panelId, {
-          renderId: "",
-          status: "pending",
-          assetUrl: "",
-          alt: "",
-          maskUrl: "",
-          error: "",
-          segments: []
-        })
-        setGeneratingImages(panelId, false)
-        return
-      }
-    })
-  }, 2000 * panel)
-  }, [prompt, width, height])
-
-
-  const checkStatus = () => {
-    startTransition(async () => {
-      clearTimeout(timeoutRef.current)
-
-      if (!renderedRef.current?.renderId || renderedRef.current?.status !== "pending") {
-        timeoutRef.current = setTimeout(checkStatus, delay)
-        return
-      }
-      try {
-        setGeneratingImages(panelId, true)
-        // console.log(`Checking job status API for job ${renderedRef.current?.renderId}`)
-        const newRendered = await getRender(renderedRef.current.renderId)
-        // console.log("got a response!", newRendered)
-
-        if (JSON.stringify(renderedRef.current) !== JSON.stringify(newRendered)) {
-          // console.log("updated panel:", newRendered)
-          setRendered(panelId, renderedRef.current = newRendered)
-          setGeneratingImages(panelId, true)
-        }
-        // console.log("status:", newRendered.status)
-
-        if (newRendered.status === "pending") {
-          // console.log("job not finished")
-          timeoutRef.current = setTimeout(checkStatus, delay)
-        } else if (newRendered.status === "error" || 
-        (newRendered.status === "completed" && !newRendered.assetUrl?.length)) {
-          // console.log(`panel got an error and/or an empty asset url :/ "${newRendered.error}", but let's try to recover..`)
-          try {
-            const newAttempt = await newRender({ prompt, width, height })
-            setRendered(panelId, newAttempt)
-          } catch (err) {
-            console.error("yeah sorry, something is wrong.. aborting", err)
-            setGeneratingImages(panelId, false)
-          }
-        } else {
-          console.log("panel finished!")
-          setGeneratingImages(panelId, false)
-          addToUpscaleQueue(panelId, newRendered)
-        }
-      } catch (err) {
-        console.error(err)
-        timeoutRef.current = setTimeout(checkStatus, delay)
-      }
-    })
-  }
- 
-  useEffect(() => {
-    // console.log("starting timeout")
-    clearTimeout(timeoutRef.current)
-    
-    // normally it should reply in < 1sec, but we could also use an interval
-    timeoutRef.current = setTimeout(checkStatus, delay)
-
-    return () => {
-      clearTimeout(timeoutRef.current)
-    }
-  }, [prompt, width, height])
-
-  /*
-  doing the captionning from the browser is expensive
-  a simpler solution is to caption directly during SDXL generation
-
-  useEffect(() => {
-    if (!rendered.assetUrl) { return }
-    // the asset url can evolve with time (link to a better resolution image)
-    // however it would be costly to ask for the caption, the low resolution is enough for the semantic resolution
-    // so we just do nothing if we already have the caption
-    if (caption) { return }
-    startTransition(async () => {
-      try {
-        const newCaption = await see({
-          prompt: "please caption the following image",
-          imageBase64: rendered.assetUrl 
-        })
-        if (newCaption) {
-          setCaption(newCaption)
-        }
-      } catch (err) {
-        console.error(`failed to generate the caption:`, err)
-      }
-    })
-  }, [rendered.assetUrl, caption])
-  */
-
-  const frameClassName = cn(
-    //`flex`,
-    `w-full h-full`,
-    `border-stone-800`,
-    `transition-all duration-200 ease-in-out`,
-    zoomLevel > 140 ? `border-[2px] md:border-[4px] rounded-sm md:rounded-md` :
-    zoomLevel > 120 ? `border-[1.5px] md:border-[3px] rounded-xs md:rounded-sm` :
-    zoomLevel > 90 ? `border-[1px] md:border-[2px] rounded-xs md:rounded-sm` :
-    zoomLevel > 40 ? `border-[0.5px] md:border-[1px] rounded-none md:rounded-xs` :
-    `border-transparent md:border-[0.5px] rounded-none md:rounded-none`,
-    `shadow-sm`,
-    `overflow-hidden`,
-    `print:border-[1.5px] print:shadow-none`,
-  )
-
-
-  /*
-  text detection (doesn't work)
-  useEffect(() => {
-    const fn = async () => {
-      if (!rendered.assetUrl || !ref.current) {
-        return
-      }
-
-      const result = await replaceTextInSpeechBubbles(
-        rendered.assetUrl,
-        "Lorem ipsum dolor sit amet, dolor ipsum. Sit amet? Ipsum! Dolor!!!"
-      )
-      if (result) {
-        setImageWithText(result)
-      }
-    }
-    fn()
-
-  }, [rendered.assetUrl, ref.current])
-  */
-
-  if (prompt && !rendered.assetUrl) {
-    return (
-      <div className={cn(
-        frameClassName,
-        `flex flex-col items-center justify-center`,
-        className,
-      )}>
-       <Progress isLoading />
-      </div>
-    )
-  }
-
-  return (
-    <div className={cn(
-      frameClassName,
-      { "grayscale": preset.color === "grayscale" },
-      className
-    )}>
-        <div className={cn(
-        ``,
-        `bg-stone-50`,
-        `border-stone-800`,
-        `transition-all duration-200 ease-in-out`,
-        zoomLevel > 140 ? `border-b-[2px] md:border-b-[4px]` :
-        zoomLevel > 120 ? `border-b-[1.5px] md:border-b-[3px]` :
-        zoomLevel > 90 ? `border-b-[1px] md:border-b-[2px]` :
-        zoomLevel > 40 ? `border-b-[0.5px] md:border-b-[1px]` :
-        `border-transparent md:border-b-[0.5px]`,
-        `print:border-b-[1.5px]`,
-        `truncate`,
-
-        zoomLevel > 200 ? `p-4 md:p-8` :
-        zoomLevel > 180 ? `p-[14px] md:p-8` :
-        zoomLevel > 160 ? `p-[12px] md:p-[28px]` :
-        zoomLevel > 140 ? `p-[10px] md:p-[26px]` :
-        zoomLevel > 120 ? `p-2 md:p-6` :
-        zoomLevel > 100 ? `p-1.5 md:p-[20px]` :
-        zoomLevel > 90 ? `p-1.5 md:p-4` :
-        zoomLevel > 40 ? `p-1 md:p-2` :
-        `p-0.5 md:p-2`,
-
-        zoomLevel > 220 ? `text-xl md:text-4xl` :
-        zoomLevel > 200 ? `text-lg md:text-3xl` :
-        zoomLevel > 180 ? `text-md md:text-2xl` :
-        zoomLevel > 140 ? `text-2xs md:text-2xl` :
-        zoomLevel > 120 ? `text-3xs md:text-xl` :
-        zoomLevel > 100 ? `text-4xs md:text-lg` :
-        zoomLevel > 90 ? `text-5xs md:text-sm` :
-        zoomLevel > 40 ? `md:text-xs` : `md:text-2xs`,
-
-        showCaptions ? (
-          zoomLevel > 90 ? `block` : `hidden md:block`
-        ) : `hidden`,
-      )}
-      >{caption || ""}
-        </div>
-        {rendered.assetUrl &&
-        <img
-          ref={ref}
-          src={imageWithText || rendered.assetUrl}
-          width={width}
-          height={height}
-          alt={rendered.alt}
-          className={cn(
-            `comic-panel w-full h-full object-cover max-w-max`,
-            // showCaptions ? `-mt-11` : ''
-            )}
-        />}
-    </div>
-  )
-}

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 e.g. "Jurassic Park entrance", "Spaceport in Mos Eisley"..`}
+          placeholder={`Invent 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/landing.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { useEffect, useState, useTransition } from "react"
+
+import { Post } from "@/types"
+import { cn } from "@/lib/utils"
+import { actionman } from "@/lib/fonts"
+
+
+import { getLatestPosts } from "./engine/community"
+
+export default function Landing() {
+  const [_isPending, startTransition] = useTransition()
+  const [posts, setPosts] = useState<Post[]>([])
+
+  useEffect(() => {
+    startTransition(async () => {
+      const newPosts = await getLatestPosts()
+      setPosts(newPosts)
+    })
+  }, [])
+
+  return (
+    <div className={cn(
+      `light fixed w-full h-full flex flex-col items-center bg-slate-300 text-slate-800`,
+      `pt-24`,
+      actionman.className
+      )}>
+      <div className="w-full flex flex-col items-center">
+        <h1 className="text-[100px] text-cyan-700">🌐 Panoremix</h1>
+        <h2 className="text-3xl mb-12">Generate cool panoramas using AI!</h2>
+        
+        <h2 className="text-2xl">Latest locations synthesized:</h2>
+
+        <div className="grid grid-col-2 sm:grid-col-3 md:grid-col-4 lg:grid-cols-5 gap-4">
+          {posts.map(post => (
+            <div key={post.postId} className="flex flex-col space-y-3">
+              <div className="w-full h-24">
+                <img
+                  src={post.assetUrl}
+                  className="w-full h-full rounded-xl overflow-hidden"
+                />
+              </div>
+              <div className="text-base truncate w-full">{post.prompt}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/page.tsx

@@ -2,12 +2,14 @@
 
 import Head from "next/head"
 
-import Main from "./main"
+// import Landing from "./landing"
+import Generate from "./generate/page"
+
 import { TooltipProvider } from "@/components/ui/tooltip"
 
 // https://nextjs.org/docs/pages/building-your-application/optimizing/fonts 
 
-export default async function IndexPage({ params: { ownerId } }: { params: { ownerId: string }}) {
+export default async function Page() {
   return (
     <>
       <Head>
@@ -19,7 +21,7 @@ export default async function IndexPage({ params: { ownerId } }: { params: { own
         `light bg-zinc-50 text-stone-900
         `}>
         <TooltipProvider delayDuration={100}>
-          <Main />
+          <Generate />
         </TooltipProvider>
       </main>
     </>

src/app/todo.tsx

@@ -1,21 +0,0 @@
-"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

@@ -88,26 +88,31 @@ export type RenderingEngine =
   | "OPENAI"
   | "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[]
-  }
-  
+export type PostVisibility =
+  | "featured" // featured by admins
+  | "trending" // top trending / received more than 10 upvotes
+  | "normal" // default visibility
+
+export type Post = {
+  postId: string
+  appId: string
+  prompt: string
+  previewUrl: string
+  assetUrl: string
+  createdAt: string
+  visibility: PostVisibility
+  upvotes: number
+  downvotes: number
+}
+
+export type CreatePostResponse = {
+  success?: boolean
+  error?: string
+  post: Post
+}
+
+export type GetAppPostsResponse = {
+  success?: boolean
+  error?: string
+  posts: Post[]
+}