+
+ )
+}
\ 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 (
+ <>
+
+
+
+
+
+ {
+ // there is an issue, this env check doesn't work..
+ // process.env.NEXT_PUBLIC_CAN_UPSCALE === "true" ?
+
+ // : null
+ }
+
+
+
+
+
+
+
+
+ {
+ // there is an issue, this env check doesn't work..
+ // process.env.NEXT_PUBLIC_ENABLE_COMMUNITY_SHARING === "true" ?
+
+ //: null
+ }
+
+
+ {children}
+
+ )
+}
+
diff --git a/src/app/interface/page/index.tsx b/src/app/interface/page/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..545ecb4af98a3f4bac9b964f1d4bae32bd62294a
--- /dev/null
+++ b/src/app/interface/page/index.tsx
@@ -0,0 +1,55 @@
+import { allLayoutAspectRatios, allLayouts } from "@/app/layouts"
+import { useStore } from "@/app/store"
+import { cn } from "@/lib/utils"
+import { useEffect, useRef } from "react"
+
+export function Page({ page }: { page: number }) {
+ const zoomLevel = useStore(state => state.zoomLevel)
+ const layouts = useStore(state => state.layouts)
+ // const prompt = useStore(state => state.prompt)
+
+ const LayoutElement = (allLayouts as any)[layouts[page]]
+ const aspectRatio = ((allLayoutAspectRatios as any)[layouts[page]] as string) || "aspect-[250/297]"
+ /*
+ const [canLoad, setCanLoad] = useState(false)
+ useEffect(() => {
+ if (prompt?.length) {
+ setCanLoad(false)
+ setTimeout(() => {
+ setCanLoad(true)
+ }, page * 4000)
+ }
+ }, [prompt])
+ */
+
+ const setPage = useStore(state => state.setPage)
+ const pageRef = useRef 100 ? `100`}`
+ }}
+ >
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/panel/bubble.tsx b/src/app/interface/panel/bubble.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dad1498e68f6ba79b2fec29fe528657b80b09098
--- /dev/null
+++ b/src/app/interface/panel/bubble.tsx
@@ -0,0 +1,45 @@
+import { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+
+export function Bubble({
+ children,
+ className
+}: {
+ children?: ReactNode
+ className?: string
+}) {
+
+ if (!children) {
+ return null
+ }
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/panel/index.tsx b/src/app/interface/panel/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f4e67946773eb8fddc73c2dd7d696f932eaf3040
--- /dev/null
+++ b/src/app/interface/panel/index.tsx
@@ -0,0 +1,347 @@
+"use client"
+
+import { useEffect, useRef, useState, useTransition } from "react"
+import { RxReload } from "react-icons/rx"
+
+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"
+
+export function Panel({
+ panel,
+ className = "",
+ width = 1,
+ height = 1,
+}: {
+ panel: number
+ className?: string
+ width?: number
+ height?: number
+ }) {
+ const panelId = `${panel}`
+
+ const [mouseOver, setMouseOver] = useState(false)
+ const ref = useRef
+
+
+ {children}
+
+
+
+
+ )
+ }
+
+ return (
+ setMouseOver(true)}
+ onMouseLeave={() => setMouseOver(false)}
+ >
+ 
}
+ {
+ // there is an issue, this env check doesn't work..
+ // process.env.NEXT_PUBLIC_CAN_REDRAW === "true" ?
+
+ )
+}
\ 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 &&
+
+
+ //: null
+ }
+
+
+
+
+
+
+ )
+}
\ 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/top-menu/index.tsx b/src/app/interface/top-menu/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cb7ad534ea0369b463a8880e0a4b3227b8ff4255
--- /dev/null
+++ b/src/app/interface/top-menu/index.tsx
@@ -0,0 +1,260 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useSearchParams } from "next/navigation"
+import Image from "next/image"
+
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+import { FontName, defaultFont } from "@/lib/fonts"
+import { Input } from "@/components/ui/input"
+import { PresetName, defaultPreset, nonRandomPresets, presets } from "@/app/engine/presets"
+import { useStore } from "@/app/store"
+import { Button } from "@/components/ui/button"
+import { LayoutName, allLayoutLabels, defaultLayout, nonRandomLayouts } from "@/app/layouts"
+
+import layoutPreview0 from "../../../../public/layouts/layout0.jpg"
+import layoutPreview1 from "../../../../public/layouts/layout1.jpg"
+import layoutPreview2 from "../../../../public/layouts/layout2.jpg"
+import layoutPreview3 from "../../../../public/layouts/layout3.jpg"
+import { StaticImageData } from "next/image"
+import { Switch } from "@/components/ui/switch"
+
+const layoutIcons: Partial
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/zoom/index.tsx b/src/app/interface/zoom/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c8d31a3af1c80f8a9ef15330bb84c0d2c3069de
--- /dev/null
+++ b/src/app/interface/zoom/index.tsx
@@ -0,0 +1,35 @@
+import { useStore } from "@/app/store"
+import { VerticalSlider } from "@/components/ui/vertical-slider"
+import { cn } from "@/lib/utils"
+
+export function Zoom() {
+ const zoomLevel = useStore((state) => state.zoomLevel)
+ const setZoomLevel = useStore((state) => state.setZoomLevel)
+ const isGeneratingStory = useStore((state) => state.isGeneratingStory)
+
+ return (
+
+
+
+
+ {/* */}
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+ {/*
+
+
+
+
+ */}
+
+
+ {/*
+ Let's add this feature later, because right now people
+ are confused about why they can't activate it
+
+ {
+ setDraftPrompt(e.target.value)
+ }}
+ onKeyDown={({ key }) => {
+ if (key === 'Enter') {
+ handleSubmit()
+ }
+ }}
+ value={draftPrompt}
+ />
+
+
+
+
+
+
+ */}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c483885eda7b5d2003cc6052f014f0474b9749a
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,24 @@
+import './globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+ title: 'AI Comic Factory: generate your own comics! Powered by Hugging Face 🤗',
+ description: 'Generate comic panels using a LLM + SDXL. Powered by Hugging Face 🤗',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/src/app/layouts/index.tsx b/src/app/layouts/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5779701aeb48ebd15f24d0659c0670894838fb45
--- /dev/null
+++ b/src/app/layouts/index.tsx
@@ -0,0 +1,370 @@
+"use client"
+
+import { Panel } from "@/app/interface/panel"
+import { pick } from "@/lib/pick"
+import { Grid } from "@/app/interface/grid"
+
+export function Layout0() {
+ return (
+
+ Zoom
+
+
+ setZoomLevel(value[0] || 10)}
+ value={[zoomLevel]}
+ className="h-64 md:h-80"
+ orientation="vertical"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/ocr.tsx b/src/app/ocr.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..609fd98930e67163d3044d544b6b9b312703937e
--- /dev/null
+++ b/src/app/ocr.tsx
@@ -0,0 +1,3 @@
+"use client"
+
+import { createWorker } from "tesseract.js"
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e17e290690c1c924c960b7e9dc5bdca0bd6f7593
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,39 @@
+"use server"
+
+import Head from "next/head"
+
+import Main from "./main"
+import { TooltipProvider } from "@/components/ui/tooltip"
+import Script from "next/script"
+
+// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
+
+export default async function IndexPage({ params: { ownerId } }: { params: { ownerId: string }}) {
+ return (
+ <>
+
+
+
+
+
+ 105 ? `px-0` : `pl-1 pr-8 md:pl-16 md:pr-16`,
+ `print:pt-0 print:px-0 print:pl-0 print:pr-0`,
+ fonts.actionman.className
+ )}>
+
+ 105 ? `items-start` : `items-center`
+ )}>
+
+
+
+
+
+
+ {waitABitMore ? `Story is ready, but server is a bit busy!`: 'Generating a new story..'}
+ {waitABitMore ? `Please hold tight..` : ''} +
+ + {waitABitMore ? `Please hold tight..` : ''} +
{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}
+