Spaces:
Running
Running
File size: 3,446 Bytes
e429049 f42fa3f e429049 026baa0 e429049 026baa0 f42fa3f bf988e1 e429049 f42fa3f bf988e1 e429049 bf988e1 e429049 888548a f42fa3f 888548a e429049 bf988e1 e429049 f42fa3f e429049 f42fa3f e429049 f42fa3f e429049 f42fa3f e429049 bf988e1 f42fa3f bf988e1 e429049 f42fa3f e429049 f42fa3f e429049 0c29d71 e429049 026baa0 e429049 f42fa3f e429049 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
"use client"
import { Suspense, useEffect, useTransition } from "react"
import { cn } from "@/lib/utils"
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 { getPanoramaSDXL } from "../engine/getPanoramaSDXL"
import { getPost } from "../engine/community"
import { useSearchParams } from "next/navigation"
function PageContent() {
const searchParams = useSearchParams()
const [_isPending, startTransition] = useTransition()
const postId = (searchParams.get("postId") as string) || ""
const prompt = useStore(s => s.prompt)
const setPrompt = useStore(s => s.setPrompt)
const assetUrl = useStore(s => s.assetUrl)
const setAssetUrl = useStore(s => s.setAssetUrl)
const isLoading = useStore(s => s.isLoading)
const setLoading = useStore(s => s.setLoading)
// react to prompt changes
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 {
const assetUrl = await getPanoramaSDXL({ prompt })
if (assetUrl) {
setAssetUrl(assetUrl)
setLoading(false)
} else {
console.log(`panorama got an error and/or an empty asset url`)
}
} catch (err) {
console.error(err)
} finally {
setLoading(false)
}
})
}, [prompt]) // important: we need to react to preset changes too
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)
setAssetUrl(post.assetUrl)
setLoading(false)
} catch (err) {
console.error("failed to get post: ", err)
setLoading(false)
}
})
}, [postId])
return (
<>
<div className={cn(
`fixed inset-0 w-screen h-screen overflow-y-scroll`,
fonts.actionman.className
)}>
{assetUrl ? <SphericalImage
assetUrl={assetUrl}
debug={true}
/> : null}
</div>
<div className={cn(
`print:hidden`,
`z-20 fixed inset-0`,
`flex flex-row items-center justify-center`,
`transition-all duration-300 ease-in-out`,
isLoading
? `bg-zinc-100/10 backdrop-blur-md`
: `bg-zinc-100/0 backdrop-blur-none pointer-events-none`,
fonts.actionman.className
)}>
<div className={cn(
`text-center text-2xl text-stone-200 w-[70%]`,
isLoading ? ``: `scale-0 opacity-0`,
`transition-all duration-300 ease-in-out`,
)}>
{isLoading ? 'Generating metaverse location in the latent space..' : ''}
</div>
</div>
</>
)
}
export default function GeneratePage() {
return (
<div className="">
<Suspense><TopMenu /></Suspense>
<Suspense><PageContent /></Suspense>
<BottomBar />
</div>
)
} |