+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/display/index.tsx b/src/app/interface/display/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..26ba8d02a6afd446981aeca6c1c24b267ab467f1
--- /dev/null
+++ b/src/app/interface/display/index.tsx
@@ -0,0 +1,12 @@
+import { RenderedScene } from "@/types"
+
+export function Display ({ rendered }: { rendered: RenderedScene }) {
+ return (
+ <>
+
+ {/*
+
+ {/*
+
+
+
+
+ */}
+
+
+
+ )
+ }
+
+ return (
+
+ 
}
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/progress/index.tsx b/src/app/interface/progress/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce24276a4b241d185fce5bd306a0c3e339835626
--- /dev/null
+++ b/src/app/interface/progress/index.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from "react"
+
+import { ProgressBar } from "./progress-bar"
+import { cn } from "@/lib/utils"
+
+export function Progress({
+ isLoading,
+ resetKey = "", // when this key change, this will re-spawn the progress bar
+ className = "",
+}: {
+ isLoading: boolean
+ resetKey?: string
+ className?: string
+}) {
+ const timeoutRef = useRef 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 || ""}
+
+ {rendered.assetUrl &&
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/progress/progress-bar.tsx b/src/app/interface/progress/progress-bar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0e926d05419cecc6d4a4964d53a8dad6e07a4102
--- /dev/null
+++ b/src/app/interface/progress/progress-bar.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { CircularProgressbar, buildStyles } from "react-circular-progressbar"
+import "react-circular-progressbar/dist/styles.css"
+
+export function ProgressBar ({
+ className,
+ progressPercentage,
+ text
+}: {
+ className?: string
+ progressPercentage?: number
+ text?: string
+}) {
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/spherical-image/index.tsx b/src/app/interface/spherical-image/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..743907eb0ba932d24a0f7abb707b5337cf29ac8d
--- /dev/null
+++ b/src/app/interface/spherical-image/index.tsx
@@ -0,0 +1,289 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { PanoramaPosition, PluginConstructor, Point, Position, SphericalPosition, Viewer } from "@photo-sphere-viewer/core"
+import { LensflarePlugin, ReactPhotoSphereViewer } from "react-photo-sphere-viewer"
+
+import { MouseEventHandler, RenderedScene } from "@/types"
+
+import { useImageDimension } from "@/lib/useImageDimension"
+import { lightSourceNames } from "@/lib/lightSourceNames"
+
+type PhotoSpherePlugin = (PluginConstructor | [PluginConstructor, any])
+
+export function SphericalImage({
+ rendered,
+ onEvent,
+ className,
+ debug,
+}: {
+ rendered: RenderedScene
+ onEvent: MouseEventHandler
+ className?: string
+ debug?: boolean
+}) {
+
+
+ const imageDimension = useImageDimension(rendered.assetUrl)
+ const maskDimension = useImageDimension(rendered.maskUrl)
+
+ const sceneConfig = JSON.stringify({ rendered, debug, imageDimension, maskDimension })
+ const [lastSceneConfig, setLastSceneConfig] = useState {
+ handleEvent(event, false)
+ setMouseMoved(true)
+ }}
+ onMouseUp={(event) => {
+ if (!mouseMoved) {
+ handleEvent(event, true)
+ }
+ setMouseMoved(false)
+ }}
+ onMouseDown={() => {
+ setMouseMoved(false)
+ }}
+ >
+ {
+ // nothing to do here
+ }}
+
+ onReady={(instance) => {
+ viewerRef.current = instance
+ viewerContainerRef.current = instance.container
+
+ /*
+ const markersPlugs = instance.getPlugin(MarkersPlugin);
+ if (!markersPlugs)
+ return;
+ markersPlugs.addMarker({
+ id: "imageLayer2",
+ imageLayer: "drone.png",
+ size: { width: 220, height: 220 },
+ position: { yaw: '130.5deg', pitch: '-0.1deg' },
+ tooltip: "Image embedded in the scene"
+ });
+ markersPlugs.addEventListener("select-marker", () => {
+ console.log("asd");
+ });
+ */
+ }}
+
+ />
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/top-menu/index.tsx b/src/app/interface/top-menu/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5e2287b58daa4800ad93fc876f519b314b6d25ea
--- /dev/null
+++ b/src/app/interface/top-menu/index.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { useState } from "react"
+import { useSearchParams } from "next/navigation"
+
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+import { useStore } from "@/app/store"
+import { Button } from "@/components/ui/button"
+export function TopMenu() {
+ const prompt = useStore(state => state.prompt)
+
+ const generate = useStore(state => state.generate)
+
+ const isLoading = useStore(state => state.isLoading)
+ const setLoading = useStore(state => state.setLoading)
+
+ const searchParams = useSearchParams()
+
+ const requestedPrompt = (searchParams.get('prompt') as string) || ""
+
+ const [draftPrompt, setDraftPrompt] = useState(requestedPrompt)
+
+ const handleSubmit = () => {
+ const promptChanged = draftPrompt.trim() !== prompt.trim()
+ if (!isLoading && (promptChanged)) {
+ generate(draftPrompt)
+ }
+ }
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e8b6773d8cc22bd96bf0d1581690deb67217babc
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,25 @@
+import './globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+ // alternative title: Panomania? Teleportal? Panoportal
+ title: 'Panoremix: generate panoramas from text! Powered by Hugging Face 🤗',
+ description: 'Generate panoramas from text! Powered by Hugging Face 🤗',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/src/app/main.tsx b/src/app/main.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..341fab3403d60089023fc51a80ca6e0ece235ed5
--- /dev/null
+++ b/src/app/main.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import { useEffect, useRef, useState, 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 { getRender, newRender } from "./engine/render"
+import { RenderedScene } from "@/types"
+
+export default function Main() {
+ const [_isPending, startTransition] = useTransition()
+
+ const prompt = useStore(state => state.prompt)
+ const setRendered = useStore(state => state.setRendered)
+ const renderedScene = useStore(state => state.renderedScene)
+ const isLoading = useStore(state => state.isLoading)
+ const setLoading = useStore(state => state.setLoading)
+
+ // keep a ref in sync
+ const renderedRef = useRef
+
+
+ {
+ setDraftPrompt(e.target.value)
+ }}
+ onKeyDown={({ key }) => {
+ if (key === 'Enter') {
+ if (!isLoading) {
+ setLoading(true)
+ handleSubmit()
+ }
+ }
+ }}
+ value={draftPrompt}
+ />
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4b9adabc77f5c4e2cc798d97ea657eada4bb9ba3
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,27 @@
+"use server"
+
+import Head from "next/head"
+
+import Main from "./main"
+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 }}) {
+ return (
+ <>
+
+
+
+
+
+
+ {renderedScene.assetUrl ? {}) as any}
+ debug={true}
+ /> : null}
+
+
+
+
+ {isLoading ? 'Teleporting to a new metaverse location..' : ''}
+
+ {children}
+
+
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+ React.ElementRef
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+