├── public
    ├── logo.png
    ├── favicon.ico
    ├── placeholder.jpg
    ├── placeholder-logo.png
    ├── placeholder-user.jpg
    ├── placeholder-logo.svg
    └── placeholder.svg
├── app
    ├── page.tsx
    ├── api
    │   ├── ai-services
    │   │   └── route.ts
    │   ├── run
    │   │   └── route.ts
    │   ├── status
    │   │   └── [jobId]
    │   │   │   └── route.ts
    │   ├── image-proxy
    │   │   └── route.ts
    │   └── upload
    │   │   └── route.ts
    ├── layout.tsx
    └── globals.css
├── postcss.config.mjs
├── lib
    ├── utils.ts
    └── ai-services.ts
├── next.config.mjs
├── components
    ├── theme-provider.tsx
    ├── ui
    │   ├── collapsible.tsx
    │   ├── label.tsx
    │   ├── textarea.tsx
    │   ├── progress.tsx
    │   ├── input.tsx
    │   ├── slider.tsx
    │   ├── switch.tsx
    │   ├── badge.tsx
    │   ├── scroll-area.tsx
    │   ├── card.tsx
    │   ├── button.tsx
    │   └── select.tsx
    ├── theme-toggle.tsx
    └── glb-viewer-window.tsx
├── .gitignore
├── components.json
├── tsconfig.json
├── package.json
└── README.md


/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/camenduru/TostUI/HEAD/public/logo.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/camenduru/TostUI/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/placeholder.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/camenduru/TostUI/HEAD/public/placeholder.jpg


--------------------------------------------------------------------------------
/public/placeholder-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/camenduru/TostUI/HEAD/public/placeholder-logo.png


--------------------------------------------------------------------------------
/public/placeholder-user.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/camenduru/TostUI/HEAD/public/placeholder-user.jpg


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { CanvasEditor } from "@/components/canvas-editor"
2 | 
3 | export default function Home() {
4 |   return <CanvasEditor />
5 | }
6 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     '@tailwindcss/postcss': {},
5 |   },
6 | }
7 | 
8 | export default config
9 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from 'clsx'
2 | import { twMerge } from 'tailwind-merge'
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   typescript: {
 4 |     ignoreBuildErrors: false,
 5 |   },
 6 |   images: {
 7 |     unoptimized: true,
 8 |   },
 9 |   devIndicators: false,
10 | }
11 | 
12 | export default nextConfig


--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import * as React from 'react'
 4 | import {
 5 |   ThemeProvider as NextThemesProvider,
 6 |   type ThemeProviderProps,
 7 | } from 'next-themes'
 8 | 
 9 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
10 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
11 | }
12 | 


--------------------------------------------------------------------------------
/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 5 | 
 6 | const Collapsible = CollapsiblePrimitive.Root
 7 | 
 8 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
 9 | 
10 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
11 | 
12 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # next.js
 7 | /.next/
 8 | /out/
 9 | 
10 | # production
11 | /build
12 | 
13 | # debug
14 | npm-debug.log*
15 | yarn-debug.log*
16 | yarn-error.log*
17 | .pnpm-debug.log*
18 | 
19 | # env files
20 | .env*
21 | 
22 | # vercel
23 | .vercel
24 | 
25 | # typescript
26 | *.tsbuildinfo
27 | next-env.d.ts


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }
22 | 


--------------------------------------------------------------------------------
/app/api/ai-services/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from 'next/server'
 2 | 
 3 | export async function GET() {
 4 |   try {
 5 |     const url = process.env.TOST_AI_SERVICES_URL
 6 |     if (!url) {
 7 |       return NextResponse.json({ error: 'TOST_AI_SERVICES_URL not configured' }, { status: 500 })
 8 |     }
 9 |     const response = await fetch(url)
10 |     const data = await response.json()
11 |     return NextResponse.json(data)
12 |   } catch (error) {
13 |     console.error('Failed to fetch AI services:', error)
14 |     return NextResponse.json({ error: 'Failed to fetch AI services' }, { status: 500 })
15 |   }
16 | }


--------------------------------------------------------------------------------
/components/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import * as React from 'react'
 4 | import { Moon, Sun } from 'lucide-react'
 5 | import { useTheme } from 'next-themes'
 6 | 
 7 | import { Button } from '@/components/ui/button'
 8 | 
 9 | export function ThemeToggle() {
10 |   const { setTheme, theme } = useTheme()
11 | 
12 |   return (
13 |     <Button
14 |       variant="ghost"
15 |       size="sm"
16 |       onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
17 |     >
18 |       <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
19 |       <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
20 |       <span className="sr-only">Toggle theme</span>
21 |     </Button>
22 |   )
23 | }


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Textarea.displayName = "Textarea"
23 | 
24 | export { Textarea }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": [
 4 |       "dom",
 5 |       "dom.iterable",
 6 |       "esnext"
 7 |     ],
 8 |     "allowJs": true,
 9 |     "target": "ES6",
10 |     "skipLibCheck": true,
11 |     "strict": true,
12 |     "noEmit": true,
13 |     "esModuleInterop": true,
14 |     "module": "esnext",
15 |     "moduleResolution": "bundler",
16 |     "resolveJsonModule": true,
17 |     "isolatedModules": true,
18 |     "jsx": "react-jsx",
19 |     "incremental": true,
20 |     "plugins": [
21 |       {
22 |         "name": "next"
23 |       }
24 |     ],
25 |     "paths": {
26 |       "@/*": [
27 |         "./*"
28 |       ]
29 |     }
30 |   },
31 |   "include": [
32 |     "next-env.d.ts",
33 |     "**/*.ts",
34 |     "**/*.tsx",
35 |     ".next/types/**/*.ts",
36 |     ".next/dev/types/**/*.ts"
37 |   ],
38 |   "exclude": [
39 |     "node_modules"
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/app/api/run/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from 'next/server'
 2 | 
 3 | export async function POST(request: NextRequest) {
 4 |   try {
 5 |     const { serviceId, payload, localApiUrl } = await request.json()
 6 | 
 7 |     // Forward the request to the local API server
 8 |     const response = await fetch(`${localApiUrl}/run`, {
 9 |       method: 'POST',
10 |       headers: {
11 |         'Content-Type': 'application/json',
12 |         'accept': 'application/json',
13 |       },
14 |       body: JSON.stringify(payload),
15 |     })
16 | 
17 |     const data = await response.json()
18 | 
19 |     return NextResponse.json(data, { status: response.status })
20 |   } catch (error) {
21 |     console.error('Error proxying to local API:', error)
22 |     return NextResponse.json(
23 |       { error: 'Failed to connect to local API server' },
24 |       { status: 500 }
25 |     )
26 |   }
27 | }


--------------------------------------------------------------------------------
/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Progress = React.forwardRef<
 9 |   React.ElementRef<typeof ProgressPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
11 | >(({ className, value, ...props }, ref) => (
12 |   <ProgressPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <ProgressPrimitive.Indicator
21 |       className="h-full w-full flex-1 bg-primary transition-all"
22 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
23 |     />
24 |   </ProgressPrimitive.Root>
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 | 
28 | export { Progress }


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }


--------------------------------------------------------------------------------
/app/api/status/[jobId]/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from 'next/server'
 2 | 
 3 | export async function POST(
 4 |   request: NextRequest,
 5 |   { params }: { params: Promise<{ jobId: string }> }
 6 | ) {
 7 |   try {
 8 |     const { jobId } = await params
 9 |     const { localApiUrl } = await request.json()
10 | 
11 |     // Forward the request to the local API server using POST (as per API spec)
12 |     const response = await fetch(`${localApiUrl}/status/${jobId}`, {
13 |       method: 'POST',
14 |       headers: {
15 |         'accept': 'application/json',
16 |         'Content-Type': 'application/json',
17 |       },
18 |       body: '', // Empty body as per curl example
19 |     })
20 | 
21 |     const data = await response.json()
22 | 
23 |     return NextResponse.json(data, { status: response.status })
24 |   } catch (error) {
25 |     console.error('Error proxying status request to local API:', error)
26 |     return NextResponse.json(
27 |       { error: 'Failed to connect to local API server' },
28 |       { status: 500 }
29 |     )
30 |   }
31 | }


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from 'next'
 2 | import { GeistSans } from 'geist/font/sans'
 3 | import { GeistMono } from 'geist/font/mono'
 4 | import { Analytics } from '@vercel/analytics/next'
 5 | import { ThemeProvider } from '@/components/theme-provider'
 6 | import { ThemeToggle } from '@/components/theme-toggle'
 7 | import './globals.css'
 8 | 
 9 | export const metadata: Metadata = {
10 |   title: 'Tost UI',
11 |   icons: {
12 |     icon: '/favicon.ico',
13 |   },
14 | }
15 | 
16 | export default function RootLayout({
17 |   children,
18 | }: Readonly<{
19 |   children: React.ReactNode
20 | }>) {
21 |   return (
22 |     <html lang="en" suppressHydrationWarning>
23 |       <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
24 |         <ThemeProvider
25 |           attribute="class"
26 |           defaultTheme="system"
27 |           enableSystem
28 |           disableTransitionOnChange
29 |         >
30 |           {children}
31 |           <Analytics />
32 |         </ThemeProvider>
33 |       </body>
34 |     </html>
35 |   )
36 | }
37 | 


--------------------------------------------------------------------------------
/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SliderPrimitive from "@radix-ui/react-slider"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Slider = React.forwardRef<
 9 |   React.ElementRef<typeof SliderPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SliderPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex w-full touch-none select-none items-center",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
21 |       <SliderPrimitive.Range className="absolute h-full bg-primary" />
22 |     </SliderPrimitive.Track>
23 |     <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
24 |   </SliderPrimitive.Root>
25 | ))
26 | Slider.displayName = SliderPrimitive.Root.displayName
27 | 
28 | export { Slider }


--------------------------------------------------------------------------------
/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Switch = React.forwardRef<
 9 |   React.ElementRef<typeof SwitchPrimitives.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SwitchPrimitives.Root
13 |     className={cn(
14 |       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
15 |       className
16 |     )}
17 |     {...props}
18 |     ref={ref}
19 |   >
20 |     <SwitchPrimitives.Thumb
21 |       className={cn(
22 |         "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
23 |       )}
24 |     />
25 |   </SwitchPrimitives.Root>
26 | ))
27 | Switch.displayName = SwitchPrimitives.Root.displayName
28 | 
29 | export { Switch }


--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }


--------------------------------------------------------------------------------
/app/api/image-proxy/route.ts:
--------------------------------------------------------------------------------
 1 | import { type NextRequest, NextResponse } from "next/server"
 2 | 
 3 | export async function GET(request: NextRequest) {
 4 |   try {
 5 |     const url = request.nextUrl.searchParams.get("url")
 6 | 
 7 |     if (!url) {
 8 |       return NextResponse.json({ error: "No URL provided" }, { status: 400 })
 9 |     }
10 | 
11 |     // Allow all URLs
12 | 
13 |     const response = await fetch(url, {
14 |       headers: {
15 |         'User-Agent': 'TostUI/1.0',
16 |       },
17 |     })
18 | 
19 |     if (!response.ok) {
20 |       return NextResponse.json({ error: "Failed to fetch image" }, { status: response.status })
21 |     }
22 | 
23 |     const contentType = response.headers.get('content-type') || 'image/png'
24 |     const arrayBuffer = await response.arrayBuffer()
25 | 
26 |     return new NextResponse(arrayBuffer, {
27 |       headers: {
28 |         'Content-Type': contentType,
29 |         'Cache-Control': 'public, max-age=3600', // Cache for 1 hour
30 |         'Access-Control-Allow-Origin': '*',
31 |         'Access-Control-Allow-Methods': 'GET',
32 |         'Access-Control-Allow-Headers': 'Content-Type',
33 |       },
34 |     })
35 |   } catch (error) {
36 |     console.error("Image proxy error:", error)
37 |     return NextResponse.json({ error: "Failed to proxy image" }, { status: 500 })
38 |   }
39 | }


--------------------------------------------------------------------------------
/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const ScrollArea = React.forwardRef<
 9 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
11 | >(({ className, children, ...props }, ref) => (
12 |   <ScrollAreaPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative overflow-hidden", className)}
15 |     {...props}
16 |   >
17 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
18 |       {children}
19 |     </ScrollAreaPrimitive.Viewport>
20 |     <ScrollBar />
21 |     <ScrollAreaPrimitive.Corner />
22 |   </ScrollAreaPrimitive.Root>
23 | ))
24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
25 | 
26 | const ScrollBar = React.forwardRef<
27 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
28 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
29 | >(({ className, orientation = "vertical", ...props }, ref) => (
30 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
31 |     ref={ref}
32 |     orientation={orientation}
33 |     className={cn(
34 |       "flex touch-none select-none transition-colors",
35 |       orientation === "vertical" &&
36 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
37 |       orientation === "horizontal" &&
38 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
39 |       className
40 |     )}
41 |     {...props}
42 |   >
43 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
44 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
45 | ))
46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47 | 
48 | export { ScrollArea, ScrollBar }


--------------------------------------------------------------------------------
/lib/ai-services.ts:
--------------------------------------------------------------------------------
 1 | export interface AIService {
 2 |     home: boolean
 3 |     id: string
 4 |     name: string
 5 |     description: string
 6 |     category: "image" | "video" | "3d"
 7 |     icon: string
 8 |     inputTypes: string[]
 9 |     parameters: Parameter[]
10 |     overview: string
11 |     documentation?: string
12 |     codeRepository?: string
13 |     projectPage?: string
14 |     researchPaper?: string
15 |     workerId: string
16 |     cost: string
17 |     processingTime: string
18 |     delay: string
19 |     examples?: { input: string[], output: string[] }
20 |     divisible?: number
21 | }
22 | 
23 | export interface Parameter {
24 |   name: string
25 |   type: "string" | "number" | "boolean" | "file" | "select" | "slider"
26 |   label: string
27 |   description?: string
28 |   required?: boolean
29 |   defaultValue?: any
30 |   options?: string[]
31 |   min?: number
32 |   max?: number
33 |   step?: number
34 |   ui?: boolean
35 | }
36 | 
37 | export const loadAiServices = async (): Promise<AIService[]> => {
38 |   const response = await fetch('/api/ai-services')
39 |   const data = await response.json()
40 |   return data
41 | }
42 | 
43 | export const getCategoryIcon = (category: string) => {
44 |   switch (category) {
45 |     case "image":
46 |       return "Image"
47 |     case "video":
48 |       return "Video"
49 |     case "3d":
50 |       return "Box"
51 |     default:
52 |       return "Zap"
53 |   }
54 | }
55 | 
56 | export const getCategoryColor = (category: string) => {
57 |   switch (category) {
58 |     case "image":
59 |       return "bg-chart-1/10 text-chart-1 border-chart-1/20"
60 |     case "video":
61 |       return "bg-chart-2/10 text-chart-2 border-chart-2/20"
62 |     case "3d":
63 |       return "bg-chart-3/10 text-chart-3 border-chart-3/20"
64 |     default:
65 |       return "bg-muted/10 text-muted-foreground border-muted/20"
66 |   }
67 | }
68 | 
69 | export const generateJobId = (): string => {
70 |   return Array.from({ length: 32 }, () => Math.floor(Math.random() * 16).toString(16)).join("")
71 | }
72 | 


--------------------------------------------------------------------------------
/app/api/upload/route.ts:
--------------------------------------------------------------------------------
 1 | import { type NextRequest, NextResponse } from "next/server"
 2 | import { randomUUID } from "crypto"
 3 | 
 4 | export async function POST(request: NextRequest) {
 5 |   try {
 6 |     const formData = await request.formData()
 7 |     const file = formData.get("file") as File
 8 |     const useLocal = formData.get("useLocal") === "true"
 9 |     const localUploadUrl = formData.get("localUploadUrl") as string || "http://localhost:9000"
10 | 
11 |     if (!file) {
12 |       return NextResponse.json({ error: "No file provided" }, { status: 400 })
13 |     }
14 | 
15 |     if (useLocal) {
16 |       // Upload to local MinIO
17 |       const ext = file.name.split('.').pop()
18 |       const filename = `${randomUUID()}.${ext}`
19 |       const minioUrl = `${localUploadUrl}/tost/${filename}`
20 | 
21 |       const response = await fetch(minioUrl, {
22 |         method: "PUT",
23 |         body: file,
24 |         headers: {
25 |           "Content-Type": file.type || "application/octet-stream",
26 |         },
27 |       })
28 | 
29 |       if (!response.ok) {
30 |         throw new Error(`MinIO upload failed: ${response.status} ${response.statusText}`)
31 |       }
32 | 
33 |       const url = `${localUploadUrl}/tost/${filename}`
34 |       return NextResponse.json({ url })
35 |     } else {
36 |       // Upload to TostAI
37 |       const ext = file.name.split('.').pop()
38 |       const filename = `${randomUUID()}.${ext}`
39 |       const baseUrl = process.env.TOST_AI_S3_BASE_URL || "https://s3.tost.ai/tost"
40 |       const IOUrl = `${baseUrl}/${filename}`
41 | 
42 |       const response = await fetch(IOUrl, {
43 |         method: "PUT",
44 |         body: file,
45 |         headers: {
46 |           "Content-Type": file.type || "application/octet-stream",
47 |         },
48 |       })
49 | 
50 |       if (!response.ok) {
51 |         throw new Error(`Upload failed: ${response.status} ${response.statusText}`)
52 |       }
53 | 
54 |       const url = `${IOUrl}`
55 |       return NextResponse.json({ url })
56 |     }
57 |   } catch (error) {
58 |     console.error("Upload error:", error)
59 |     return NextResponse.json({ error: "Upload failed" }, { status: 500 })
60 |   }
61 | }


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { Slot } from '@radix-ui/react-slot'
 3 | import { cva, type VariantProps } from 'class-variance-authority'
 4 | 
 5 | import { cn } from '@/lib/utils'
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
13 |         destructive:
14 |           'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
15 |         outline:
16 |           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
17 |         secondary:
18 |           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
19 |         ghost:
20 |           'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
21 |         link: 'text-primary underline-offset-4 hover:underline',
22 |       },
23 |       size: {
24 |         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
25 |         sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
26 |         lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
27 |         icon: 'size-9',
28 |         'icon-sm': 'size-8',
29 |         'icon-lg': 'size-10',
30 |       },
31 |     },
32 |     defaultVariants: {
33 |       variant: 'default',
34 |       size: 'default',
35 |     },
36 |   },
37 | )
38 | 
39 | function Button({
40 |   className,
41 |   variant,
42 |   size,
43 |   asChild = false,
44 |   ...props
45 | }: React.ComponentProps<'button'> &
46 |   VariantProps<typeof buttonVariants> & {
47 |     asChild?: boolean
48 |   }) {
49 |   const Comp = asChild ? Slot : 'button'
50 | 
51 |   return (
52 |     <Comp
53 |       data-slot="button"
54 |       className={cn(buttonVariants({ variant, size, className }))}
55 |       {...props}
56 |     />
57 |   )
58 | }
59 | 
60 | export { Button, buttonVariants }
61 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-v0-project",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "build": "next build",
 7 |     "dev": "next dev",
 8 |     "lint": "next lint",
 9 |     "start": "next start"
10 |   },
11 |   "dependencies": {
12 |     "@google/model-viewer": "^4.1.0",
13 |     "@hookform/resolvers": "^3.10.0",
14 |     "@huggingface/transformers": "^3.8.0",
15 |     "@radix-ui/react-accordion": "1.2.2",
16 |     "@radix-ui/react-alert-dialog": "1.1.4",
17 |     "@radix-ui/react-aspect-ratio": "1.1.1",
18 |     "@radix-ui/react-avatar": "1.1.2",
19 |     "@radix-ui/react-checkbox": "1.1.3",
20 |     "@radix-ui/react-collapsible": "1.1.2",
21 |     "@radix-ui/react-context-menu": "2.2.4",
22 |     "@radix-ui/react-dialog": "1.1.4",
23 |     "@radix-ui/react-dropdown-menu": "2.1.4",
24 |     "@radix-ui/react-hover-card": "1.1.4",
25 |     "@radix-ui/react-label": "2.1.1",
26 |     "@radix-ui/react-menubar": "1.1.4",
27 |     "@radix-ui/react-navigation-menu": "1.2.3",
28 |     "@radix-ui/react-popover": "1.1.4",
29 |     "@radix-ui/react-progress": "1.1.1",
30 |     "@radix-ui/react-radio-group": "1.2.2",
31 |     "@radix-ui/react-scroll-area": "1.2.2",
32 |     "@radix-ui/react-select": "2.1.4",
33 |     "@radix-ui/react-separator": "1.1.1",
34 |     "@radix-ui/react-slider": "latest",
35 |     "@radix-ui/react-slot": "1.1.1",
36 |     "@radix-ui/react-switch": "1.1.2",
37 |     "@radix-ui/react-tabs": "1.1.2",
38 |     "@radix-ui/react-toast": "1.2.4",
39 |     "@radix-ui/react-toggle": "1.1.1",
40 |     "@radix-ui/react-toggle-group": "1.1.1",
41 |     "@radix-ui/react-tooltip": "1.1.6",
42 |     "@types/three": "^0.180.0",
43 |     "@vercel/analytics": "1.3.1",
44 |     "autoprefixer": "^10.4.20",
45 |     "class-variance-authority": "^0.7.1",
46 |     "clsx": "^2.1.1",
47 |     "cmdk": "1.0.4",
48 |     "date-fns": "4.1.0",
49 |     "embla-carousel-react": "8.5.1",
50 |     "geist": "^1.3.1",
51 |     "input-otp": "1.4.1",
52 |     "lucide-react": "^0.454.0",
53 |     "next": "16.0.7",
54 |     "next-themes": "^0.4.6",
55 |     "react": "^19",
56 |     "react-day-picker": "9.8.0",
57 |     "react-dom": "^19",
58 |     "react-hook-form": "^7.60.0",
59 |     "react-resizable-panels": "^2.1.7",
60 |     "recharts": "2.15.4",
61 |     "sonner": "^1.7.4",
62 |     "tailwind-merge": "^2.5.5",
63 |     "tailwindcss-animate": "^1.0.7",
64 |     "three": "^0.180.0",
65 |     "vaul": "^0.9.9",
66 |     "zod": "3.25.67"
67 |   },
68 |   "devDependencies": {
69 |     "@tailwindcss/postcss": "^4.1.9",
70 |     "@types/node": "^22",
71 |     "@types/react": "^19",
72 |     "@types/react-dom": "^19",
73 |     "postcss": "^8.5",
74 |     "tailwindcss": "^4.1.9",
75 |     "tw-animate-css": "1.3.3",
76 |     "typescript": "^5"
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/public/placeholder-logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/public/placeholder.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Select = SelectPrimitive.Root
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group
 12 | 
 13 | const SelectValue = SelectPrimitive.Value
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ))
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn(
 42 |       "flex cursor-default items-center justify-center py-1",
 43 |       className
 44 |     )}
 45 |     {...props}
 46 |   >
 47 |     <ChevronUp className="h-4 w-4" />
 48 |   </SelectPrimitive.ScrollUpButton>
 49 | ))
 50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 51 | 
 52 | const SelectScrollDownButton = React.forwardRef<
 53 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 54 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 55 | >(({ className, ...props }, ref) => (
 56 |   <SelectPrimitive.ScrollDownButton
 57 |     ref={ref}
 58 |     className={cn(
 59 |       "flex cursor-default items-center justify-center py-1",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     <ChevronDown className="h-4 w-4" />
 65 |   </SelectPrimitive.ScrollDownButton>
 66 | ))
 67 | SelectScrollDownButton.displayName =
 68 |   SelectPrimitive.ScrollDownButton.displayName
 69 | 
 70 | const SelectContent = React.forwardRef<
 71 |   React.ElementRef<typeof SelectPrimitive.Content>,
 72 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 73 | >(({ className, children, position = "popper", ...props }, ref) => (
 74 |   <SelectPrimitive.Portal>
 75 |     <SelectPrimitive.Content
 76 |       ref={ref}
 77 |       className={cn(
 78 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 79 |         position === "popper" &&
 80 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 81 |         className
 82 |       )}
 83 |       position={position}
 84 |       {...props}
 85 |     >
 86 |       <SelectScrollUpButton />
 87 |       <SelectPrimitive.Viewport
 88 |         className={cn(
 89 |           "p-1",
 90 |           position === "popper" &&
 91 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 92 |         )}
 93 |       >
 94 |         {children}
 95 |       </SelectPrimitive.Viewport>
 96 |       <SelectScrollDownButton />
 97 |     </SelectPrimitive.Content>
 98 |   </SelectPrimitive.Portal>
 99 | ))
100 | SelectContent.displayName = SelectPrimitive.Content.displayName
101 | 
102 | const SelectLabel = React.forwardRef<
103 |   React.ElementRef<typeof SelectPrimitive.Label>,
104 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105 | >(({ className, ...props }, ref) => (
106 |   <SelectPrimitive.Label
107 |     ref={ref}
108 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
109 |     {...props}
110 |   />
111 | ))
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName
113 | 
114 | const SelectItem = React.forwardRef<
115 |   React.ElementRef<typeof SelectPrimitive.Item>,
116 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117 | >(({ className, children, ...props }, ref) => (
118 |   <SelectPrimitive.Item
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <SelectPrimitive.ItemIndicator>
128 |         <Check className="h-4 w-4" />
129 |       </SelectPrimitive.ItemIndicator>
130 |     </span>
131 | 
132 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
133 |   </SelectPrimitive.Item>
134 | ))
135 | SelectItem.displayName = SelectPrimitive.Item.displayName
136 | 
137 | const SelectSeparator = React.forwardRef<
138 |   React.ElementRef<typeof SelectPrimitive.Separator>,
139 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
140 | >(({ className, ...props }, ref) => (
141 |   <SelectPrimitive.Separator
142 |     ref={ref}
143 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
144 |     {...props}
145 |   />
146 | ))
147 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
148 | 
149 | export {
150 |   Select,
151 |   SelectGroup,
152 |   SelectValue,
153 |   SelectTrigger,
154 |   SelectContent,
155 |   SelectLabel,
156 |   SelectItem,
157 |   SelectSeparator,
158 |   SelectScrollUpButton,
159 |   SelectScrollDownButton,
160 | }


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | :root {
  7 |   --ui-scale: 100%;
  8 |   font-size: var(--ui-scale);
  9 |   --background: #ffffff;
 10 |   --foreground: #4b5563;
 11 |   --card: #f9fafb;
 12 |   --card-foreground: #4b5563;
 13 |   --popover: #ffffff;
 14 |   --popover-foreground: #4b5563;
 15 |   --primary: #0891b2;
 16 |   --primary-foreground: #ffffff;
 17 |   --secondary: #f97316;
 18 |   --secondary-foreground: #ffffff;
 19 |   --muted: #f9fafb;
 20 |   --muted-foreground: #4b5563;
 21 |   --accent: #f97316;
 22 |   --accent-foreground: #ffffff;
 23 |   --destructive: #be123c;
 24 |   --destructive-foreground: #ffffff;
 25 |   --border: #e5e7eb;
 26 |   --input: #ffffff;
 27 |   --ring: #0891b2;
 28 |   --chart-1: #0891b2;
 29 |   --chart-2: #f97316;
 30 |   --chart-3: #ec4899;
 31 |   --chart-4: #be123c;
 32 |   --chart-5: #4b5563;
 33 |   --radius: 0.5rem;
 34 |   --sidebar: #f9fafb;
 35 |   --sidebar-foreground: #4b5563;
 36 |   --sidebar-primary: #0891b2;
 37 |   --sidebar-primary-foreground: #ffffff;
 38 |   --sidebar-accent: #f97316;
 39 |   --sidebar-accent-foreground: #ffffff;
 40 |   --sidebar-border: #e5e7eb;
 41 |   --sidebar-ring: #0891b2;
 42 | }
 43 | 
 44 | .dark {
 45 |   --background: #1a1a1a;
 46 |   --foreground: #e0e0e0;
 47 |   --card: #2d2d2d;
 48 |   --card-foreground: #e0e0e0;
 49 |   --popover: #2d2d2d;
 50 |   --popover-foreground: #e0e0e0;
 51 |   --primary: #9d9d9d;
 52 |   --primary-foreground: #1a1a1a;
 53 |   --secondary: #ff9500;
 54 |   --secondary-foreground: #1a1a1a;
 55 |   --muted: #2d2d2d;
 56 |   --muted-foreground: #9e9e9e;
 57 |   --accent: #ffd700;
 58 |   --accent-foreground: #1a1a1a;
 59 |   --destructive: #ef4444;
 60 |   --destructive-foreground: #e0e0e0;
 61 |   --border: #4a4a4a;
 62 |   --input: #3d3d3d;
 63 |   --ring: #9d9d9d;
 64 |   --chart-1: #9d9d9d;
 65 |   --chart-2: #ff9500;
 66 |   --chart-3: #ffd700;
 67 |   --chart-4: #ef4444;
 68 |   --chart-5: #9e9e9e;
 69 |   --sidebar: #2d2d2d;
 70 |   --sidebar-foreground: #e0e0e0;
 71 |   --sidebar-primary: #9d9d9d;
 72 |   --sidebar-primary-foreground: #1a1a1a;
 73 |   --sidebar-accent: #ff9500;
 74 |   --sidebar-accent-foreground: #1a1a1a;
 75 |   --sidebar-border: #4a4a4a;
 76 |   --sidebar-ring: #9d9d9d;
 77 |   --brand-orange: #ff9500;
 78 |   --brand-yellow: #ffd700;
 79 |   --brand-cyan: #9d9d9d;
 80 | }
 81 | 
 82 | @theme inline {
 83 |   --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;
 84 |   --font-mono: "Inter", "Inter Fallback", "Courier New", monospace;
 85 |   --color-background: var(--background);
 86 |   --color-foreground: var(--foreground);
 87 |   --color-card: var(--card);
 88 |   --color-card-foreground: var(--card-foreground);
 89 |   --color-popover: var(--popover);
 90 |   --color-popover-foreground: var(--popover-foreground);
 91 |   --color-primary: var(--primary);
 92 |   --color-primary-foreground: var(--primary-foreground);
 93 |   --color-secondary: var(--secondary);
 94 |   --color-secondary-foreground: var(--secondary-foreground);
 95 |   --color-muted: var(--muted);
 96 |   --color-muted-foreground: var(--muted-foreground);
 97 |   --color-accent: var(--accent);
 98 |   --color-accent-foreground: var(--accent-foreground);
 99 |   --color-destructive: var(--destructive);
100 |   --color-destructive-foreground: var(--destructive-foreground);
101 |   --color-border: var(--border);
102 |   --color-input: var(--input);
103 |   --color-ring: var(--ring);
104 |   --color-chart-1: var(--chart-1);
105 |   --color-chart-2: var(--chart-2);
106 |   --color-chart-3: var(--chart-3);
107 |   --color-chart-4: var(--chart-4);
108 |   --color-chart-5: var(--chart-5);
109 |   --radius-sm: calc(var(--radius) - 4px);
110 |   --radius-md: calc(var(--radius) - 2px);
111 |   --radius-lg: var(--radius);
112 |   --radius-xl: calc(var(--radius) + 4px);
113 |   --color-sidebar: var(--sidebar);
114 |   --color-sidebar-foreground: var(--sidebar-foreground);
115 |   --color-sidebar-primary: var(--sidebar-primary);
116 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
117 |   --color-sidebar-accent: var(--sidebar-accent);
118 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
119 |   --color-sidebar-border: var(--sidebar-border);
120 |   --color-sidebar-ring: var(--sidebar-ring);
121 |   --color-brand-orange: var(--brand-orange);
122 |   --color-brand-yellow: var(--brand-yellow);
123 |   --color-brand-cyan: var(--brand-cyan);
124 | }
125 | 
126 | @layer base {
127 | @layer base {
128 |   * {
129 |     @apply border-border outline-ring/50;
130 |     scrollbar-width: thin;
131 |     scrollbar-color: hsl(var(--border)) transparent;
132 |   }
133 |   body {
134 |     @apply bg-background text-foreground;
135 |   }
136 | 
137 |   /* Custom scrollbar styling for webkit browsers */
138 |   ::-webkit-scrollbar {
139 |     width: 6px;
140 |     height: 6px;
141 |   }
142 | 
143 |   ::-webkit-scrollbar-track {
144 |     background: transparent;
145 |   }
146 | 
147 |   ::-webkit-scrollbar-thumb {
148 |     background: hsl(var(--border));
149 |     border-radius: 3px;
150 |     transition: background-color 0.2s ease;
151 |   }
152 | 
153 |   ::-webkit-scrollbar-thumb:hover {
154 |     background: hsl(var(--muted-foreground) / 0.5);
155 |   }
156 | }
157 | 
158 | /* Custom markdown/prose styles */
159 | .prose {
160 |   color: hsl(var(--foreground));
161 |   max-width: none;
162 |   word-wrap: break-word;
163 |   overflow-wrap: break-word;
164 |   hyphens: auto;
165 | }
166 | 
167 | .prose * {
168 |   word-wrap: break-word;
169 |   overflow-wrap: break-word;
170 | }
171 | 
172 | .prose h1,
173 | .prose h2,
174 | .prose h3,
175 | .prose h4,
176 | .prose h5,
177 | .prose h6 {
178 |   color: hsl(var(--foreground));
179 |   font-weight: 600;
180 |   line-height: 1.25;
181 |   margin-top: 1.5em;
182 |   margin-bottom: 0.5em;
183 | }
184 | 
185 | .prose h1 {
186 |   font-size: 2em;
187 |   margin-top: 0;
188 |   margin-bottom: 0.5em;
189 | }
190 | 
191 | .prose h2 {
192 |   font-size: 1.5em;
193 | }
194 | 
195 | .prose h3 {
196 |   font-size: 1.25em;
197 | }
198 | 
199 | .prose p {
200 |   margin-top: 0.75em;
201 |   margin-bottom: 0.75em;
202 |   line-height: 1.6;
203 |   word-wrap: break-word;
204 |   overflow-wrap: break-word;
205 | }
206 | 
207 | .prose ul,
208 | .prose ol {
209 |   margin-top: 0.75em;
210 |   margin-bottom: 0.75em;
211 |   padding-left: 1.5em;
212 | }
213 | 
214 | .prose li {
215 |   margin-top: 0.25em;
216 |   margin-bottom: 0.25em;
217 |   line-height: 1.6;
218 | }
219 | 
220 | .prose ol {
221 |   list-style-type: decimal;
222 | }
223 | 
224 | .prose ul {
225 |   list-style-type: disc;
226 | }
227 | 
228 | .prose strong,
229 | .prose b {
230 |   font-weight: 600;
231 |   color: hsl(var(--foreground));
232 | }
233 | 
234 | .prose em,
235 | .prose i {
236 |   font-style: italic;
237 | }
238 | 
239 | .prose code {
240 |   background-color: hsl(var(--muted));
241 |   color: hsl(var(--muted-foreground));
242 |   padding: 0.125em 0.25em;
243 |   border-radius: 0.25em;
244 |   font-size: 0.875em;
245 |   font-family: var(--font-mono);
246 | }
247 | 
248 | .prose pre {
249 |   background-color: hsl(var(--muted));
250 |   color: hsl(var(--muted-foreground));
251 |   padding: 1em;
252 |   border-radius: 0.5em;
253 |   overflow-x: auto;
254 |   margin: 1em 0;
255 |   white-space: pre-wrap;
256 |   word-wrap: break-word;
257 |   overflow-wrap: break-word;
258 | }
259 | 
260 | .prose pre code {
261 |   background: none;
262 |   padding: 0;
263 |   border-radius: 0;
264 |   font-size: inherit;
265 | }
266 | 
267 | .prose blockquote {
268 |   border-left: 4px solid hsl(var(--border));
269 |   padding-left: 1em;
270 |   margin: 1em 0;
271 |   color: hsl(var(--muted-foreground));
272 |   font-style: italic;
273 | }
274 | 
275 | .prose a {
276 |   color: hsl(var(--primary));
277 |   text-decoration: underline;
278 | }
279 | 
280 | .prose a:hover {
281 |   color: hsl(var(--primary) / 0.8);
282 | }
283 | 
284 | .prose hr {
285 |   border: none;
286 |   border-top: 1px solid hsl(var(--border));
287 |   margin: 2em 0;
288 | }
289 | 
290 | /* Dark mode adjustments */
291 | .dark .prose {
292 |   color: hsl(var(--foreground));
293 | }
294 | 
295 | .dark .prose h1,
296 | .dark .prose h2,
297 | .dark .prose h3,
298 | .dark .prose h4,
299 | .dark .prose h5,
300 | .dark .prose h6 {
301 |   color: hsl(var(--foreground));
302 | }
303 | 
304 | .dark .prose strong,
305 | .dark .prose b {
306 |   color: hsl(var(--foreground));
307 | }
308 | 
309 | .dark .prose code {
310 |   background-color: hsl(var(--muted));
311 |   color: hsl(var(--muted-foreground));
312 | }
313 | 
314 | .dark .prose pre {
315 |   background-color: hsl(var(--muted));
316 |   color: hsl(var(--muted-foreground));
317 | }
318 | 
319 | .dark .prose blockquote {
320 |   border-left-color: hsl(var(--border));
321 |   color: hsl(var(--muted-foreground));
322 | }
323 | 
324 | .dark .prose a {
325 |   color: hsl(var(--primary));
326 | }
327 |   * {
328 |     @apply border-border outline-ring/50;
329 |   }
330 |   body {
331 |     @apply bg-background text-foreground;
332 |   }
333 | }
334 | 


--------------------------------------------------------------------------------
/components/glb-viewer-window.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import React, { useRef, useEffect, useState } from 'react'
  4 | import dynamic from 'next/dynamic'
  5 | import { Button } from '@/components/ui/button'
  6 | import { X, Minus, Maximize2, Camera } from 'lucide-react'
  7 | 
  8 | // Dynamically import model-viewer to avoid SSR issues
  9 | const ModelViewer = dynamic(() => import('@google/model-viewer').then(() => {
 10 |   // Return a component that renders the model-viewer
 11 |   return ({ children, ...props }: any) => {
 12 |     // Use React.createElement to avoid TypeScript issues
 13 |     return React.createElement('model-viewer', props, children)
 14 |   }
 15 | }), {
 16 |   ssr: false,
 17 |   loading: () => <div className="flex items-center justify-center h-full text-sm text-muted-foreground">Loading 3D viewer...</div>
 18 | })
 19 | 
 20 | interface GLBViewerWindowProps {
 21 |   glbUrl: string
 22 |   title: string
 23 |   onClose: () => void
 24 |   onCapture?: (imageDataUrl: string) => void
 25 |   initialPosition?: { x: number; y: number }
 26 |   initialSize?: { width: number; height: number }
 27 | }
 28 | 
 29 | export function GLBViewerWindow({
 30 |   glbUrl,
 31 |   title,
 32 |   onClose,
 33 |   onCapture,
 34 |   initialPosition = { x: 100, y: 100 },
 35 |   initialSize = { width: 600, height: 500 }
 36 | }: GLBViewerWindowProps) {
 37 |   const viewerRef = useRef<any>(null)
 38 | 
 39 |   // Window state
 40 |   const [position, setPosition] = useState(initialPosition)
 41 |   const [size, setSize] = useState(initialSize)
 42 |   const [isDragging, setIsDragging] = useState(false)
 43 |   const [isResizing, setIsResizing] = useState(false)
 44 |   const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
 45 |   const [isMinimized, setIsMinimized] = useState(false)
 46 |   const [isMaximized, setIsMaximized] = useState(false)
 47 |   const [originalSize, setOriginalSize] = useState(initialSize)
 48 |   const [originalPosition, setOriginalPosition] = useState(initialPosition)
 49 | 
 50 |   const [error, setError] = useState<string | null>(null)
 51 |   const [isLoading, setIsLoading] = useState(true)
 52 | 
 53 |   // Update position and size when props change
 54 |   useEffect(() => {
 55 |     setPosition(initialPosition)
 56 |     setSize(initialSize)
 57 |     setOriginalSize(initialSize)
 58 |   }, [initialPosition, initialSize])
 59 | 
 60 | 
 61 | 
 62 |   // Handle window dragging
 63 |   const handleWindowMouseDown = (e: React.MouseEvent) => {
 64 |     if ((e.target as Element).closest('button')) return // Don't drag if clicking on buttons
 65 |     setIsDragging(true)
 66 |     setDragStart({
 67 |       x: e.clientX - position.x,
 68 |       y: e.clientY - position.y
 69 |     })
 70 |   }
 71 | 
 72 |   // Handle window resizing
 73 |   const handleResizeMouseDown = (e: React.MouseEvent) => {
 74 |     e.preventDefault()
 75 |     setIsResizing(true)
 76 |     setDragStart({
 77 |       x: e.clientX - size.width,
 78 |       y: e.clientY - size.height
 79 |     })
 80 |   }
 81 | 
 82 |   // Global mouse move and up handlers for dragging and resizing
 83 |   useEffect(() => {
 84 |     const handleGlobalMouseMove = (e: MouseEvent) => {
 85 |       if (isDragging) {
 86 |         setPosition({
 87 |           x: e.clientX - dragStart.x,
 88 |           y: e.clientY - dragStart.y
 89 |         })
 90 |       } else if (isResizing) {
 91 |         const newWidth = Math.max(300, e.clientX - dragStart.x)
 92 |         const newHeight = Math.max(200, e.clientY - dragStart.y)
 93 |         setSize({ width: newWidth, height: newHeight })
 94 |       }
 95 |     }
 96 | 
 97 |     const handleGlobalMouseUp = () => {
 98 |       setIsDragging(false)
 99 |       setIsResizing(false)
100 |     }
101 | 
102 |     if (isDragging || isResizing) {
103 |       document.addEventListener('mousemove', handleGlobalMouseMove)
104 |       document.addEventListener('mouseup', handleGlobalMouseUp)
105 |     }
106 | 
107 |     return () => {
108 |       document.removeEventListener('mousemove', handleGlobalMouseMove)
109 |       document.removeEventListener('mouseup', handleGlobalMouseUp)
110 |     }
111 |   }, [isDragging, isResizing, dragStart])
112 | 
113 |   // Handle model load event
114 |   useEffect(() => {
115 |     if (viewerRef.current) {
116 |       const handleProgress = (e: any) => {
117 |         if (e.detail?.totalProgress === 1) {
118 |           setIsLoading(false)
119 |         }
120 |       }
121 |       const handleLoad = () => setIsLoading(false)
122 |       viewerRef.current.addEventListener('progress', handleProgress)
123 |       viewerRef.current.addEventListener('load', handleLoad)
124 |       return () => {
125 |         if (viewerRef.current) {
126 |           viewerRef.current.removeEventListener('progress', handleProgress)
127 |           viewerRef.current.removeEventListener('load', handleLoad)
128 |         }
129 |       }
130 |     }
131 |   }, [])
132 | 
133 |   // Fallback: hide progress bar after 3 seconds
134 |   useEffect(() => {
135 |     const timer = setTimeout(() => setIsLoading(false), 3000)
136 |     return () => clearTimeout(timer)
137 |   }, [])
138 | 
139 | 
140 |   const toggleMinimize = () => {
141 |     setIsMinimized(!isMinimized)
142 |   }
143 | 
144 |   const toggleMaximize = () => {
145 |     if (isMaximized) {
146 |       setPosition(originalPosition)
147 |       setSize(originalSize)
148 |       setIsMaximized(false)
149 |     } else {
150 |       setOriginalPosition(position)
151 |       setOriginalSize(size)
152 |       // Maximize to canvas area
153 |       const canvas = document.querySelector('canvas')
154 |       if (canvas) {
155 |         const rect = canvas.getBoundingClientRect()
156 |         setPosition({ x: rect.left, y: rect.top })
157 |         setSize({ width: rect.width, height: rect.height })
158 |       } else {
159 |         // Fallback to window size
160 |         setPosition({ x: 0, y: 0 })
161 |         setSize({ width: window.innerWidth, height: window.innerHeight })
162 |       }
163 |       setIsMaximized(true)
164 |     }
165 |   }
166 | 
167 |   const handleCapture = async () => {
168 |     if (!viewerRef.current || !onCapture) return
169 | 
170 |     try {
171 |       // Use model-viewer's toBlob method to capture with transparency
172 |       const blob = await viewerRef.current.toBlob({
173 |         mimeType: 'image/png',
174 |         idealAspect: true
175 |       })
176 | 
177 |       if (blob) {
178 |         const reader = new FileReader()
179 |         reader.onload = () => {
180 |           const imageDataUrl = reader.result as string
181 |           onCapture(imageDataUrl)
182 |         }
183 |         reader.readAsDataURL(blob)
184 |       }
185 |     } catch (error) {
186 |       console.error('Failed to capture GLB view:', error)
187 |     }
188 |   }
189 | 
190 |   if (error) {
191 |     return (
192 |       <div
193 |         className="fixed bg-red-100/90 dark:bg-red-900/90 backdrop-blur-sm border border-red-300 dark:border-red-600 rounded-lg shadow-lg z-50"
194 |         style={{
195 |           left: `${position.x}px`,
196 |           top: `${position.y}px`,
197 |           width: `${size.width}px`,
198 |           minHeight: '150px'
199 |         }}
200 |       >
201 |         <div className="flex items-center justify-between p-2 bg-red-200/90 dark:bg-red-800/90 backdrop-blur-sm rounded-t-lg cursor-move">
202 |           <span className="text-sm font-medium text-red-800 dark:text-red-200">GLB Viewer Error</span>
203 |           <Button variant="ghost" size="sm" onClick={onClose} className="h-6 w-6 p-0">
204 |             <X className="h-4 w-4" />
205 |           </Button>
206 |         </div>
207 |         <div className="p-4">
208 |           <p className="text-red-700 dark:text-red-300">{error}</p>
209 |         </div>
210 |       </div>
211 |     )
212 |   }
213 | 
214 |   return (
215 |     <div
216 |       className="fixed bg-transparent border border-gray-300 dark:border-gray-600 rounded-lg shadow-xl z-50 overflow-hidden"
217 |       style={{
218 |         left: `${position.x}px`,
219 |         top: `${position.y}px`,
220 |         width: `${size.width}px`,
221 |         height: isMinimized ? '40px' : `${size.height}px`
222 |       }}
223 |     >
224 |       {/* Title Bar */}
225 |       <div
226 |         className="flex items-center justify-between p-2 bg-gray-100/90 dark:bg-[#323232]/90 backdrop-blur-sm border-b border-gray-300 dark:border-gray-600 cursor-move select-none"
227 |         onMouseDown={handleWindowMouseDown}
228 |       >
229 |         <span className="text-sm font-medium text-gray-800 dark:text-gray-200 truncate">{title}</span>
230 |         <div className="flex items-center gap-1">
231 |           {onCapture && (
232 |             <Button
233 |               variant="ghost"
234 |               size="sm"
235 |               onClick={handleCapture}
236 |               className="h-6 w-6 p-0"
237 |               title="Capture Image"
238 |             >
239 |               <Camera className="h-3 w-3" />
240 |             </Button>
241 |           )}
242 |           <Button variant="ghost" size="sm" onClick={toggleMinimize} className="h-6 w-6 p-0">
243 |             <Minus className="h-3 w-3" />
244 |           </Button>
245 |           <Button variant="ghost" size="sm" onClick={toggleMaximize} className="h-6 w-6 p-0">
246 |             <Maximize2 className="h-3 w-3" />
247 |           </Button>
248 |           <Button variant="ghost" size="sm" onClick={onClose} className="h-6 w-6 p-0 hover:bg-red-100 dark:hover:bg-red-900">
249 |             <X className="h-3 w-3" />
250 |           </Button>
251 |         </div>
252 |       </div>
253 | 
254 |       {/* Content */}
255 |       {!isMinimized && (
256 |         <>
257 |           <div className="flex-1 relative" style={{ height: `${size.height - 40}px` }}>
258 |             <ModelViewer
259 |               ref={viewerRef}
260 |               src={glbUrl}
261 |               alt="3D Model"
262 |               camera-controls
263 |               auto-rotate
264 |               style={{
265 |                 width: '100%',
266 |                 height: '100%',
267 |                 backgroundColor: 'transparent'
268 |               }}
269 |               onError={(e: Event) => {
270 |                 console.error('Model viewer error:', e)
271 |                 setError('Failed to load GLB file')
272 |               }}
273 |             >
274 |               {isLoading && (
275 |                 <div slot="progress-bar" className="w-full h-1 bg-muted rounded">
276 |                   <div className="h-full bg-primary rounded animate-pulse"></div>
277 |                 </div>
278 |               )}
279 |             </ModelViewer>
280 |           </div>
281 | 
282 |           {/* Resize Handle */}
283 |           <div
284 |             className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize"
285 |             onMouseDown={handleResizeMouseDown}
286 |           >
287 |             <div className="w-full h-full bg-gray-300 dark:bg-gray-600 rounded-tl"></div>
288 |           </div>
289 |         </>
290 |       )}
291 |     </div>
292 |   )
293 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 🐣 Please follow me for new updates https://x.com/camenduru <br />
  2 | 🔥 Please join our discord server https://discord.gg/k5BwmmvJJU <br />
  3 | 🥳 Please become my sponsor https://github.com/sponsors/camenduru <br />
  4 | 
  5 | ### 🍞 Tost UI
  6 | 
  7 | ### ☁︎ Cloud Service: [https://ui.tost.ai](https://ui.tost.ai) <br />
  8 | 
  9 | ![Image](https://github.com/user-attachments/assets/594d9c1c-d652-4c5c-9ace-b4d7c08668ba) <br />
 10 | ![Image](https://github.com/user-attachments/assets/33bace4e-a0df-463d-96f9-4393d3ee85ea)
 11 | 
 12 | ### 🍞 Local and 🍇 RunPod Templates
 13 | 
 14 | | Local | Pod | Serverless | Info 
 15 | | --- | --- | --- | --- |
 16 | [![local](https://github.com/user-attachments/assets/2b9a6ec2-e6cd-4415-9553-6c7bfb5e7722)](https://github.com/camenduru/TostUI#-tostui---genfocus-deblurnet-8bit) | | | TostUI - GenFocus DeblurNet (8bit)
 17 | [![local](https://github.com/user-attachments/assets/2b9a6ec2-e6cd-4415-9553-6c7bfb5e7722)](https://github.com/camenduru/TostUI#-tostui---wan-22-first-last-frame-8bit) | | | TostUI - Wan 2.2 First Last Frame (8bit)
 18 | [![local](https://github.com/user-attachments/assets/2b9a6ec2-e6cd-4415-9553-6c7bfb5e7722)](https://github.com/camenduru/tostui?tab=readme-ov-file#-tostui---trellis-2) | | | TostUI - Trellis 2
 19 | [![local](https://github.com/user-attachments/assets/2b9a6ec2-e6cd-4415-9553-6c7bfb5e7722)](https://github.com/camenduru/tostui?tab=readme-ov-file#-tostui---tost-synth-v10-z-image-turbo-seedvr2) | | | TostUI - Tost Synth v1.0 (4K)
 20 | [![local](https://github.com/user-attachments/assets/2b9a6ec2-e6cd-4415-9553-6c7bfb5e7722)](https://github.com/camenduru/tostui?tab=readme-ov-file#-tostui---seedvr2) | | | TostUI - SeedVR2
 21 | [![local](https://github.com/user-attachments/assets/2b9a6ec2-e6cd-4415-9553-6c7bfb5e7722)](https://github.com/camenduru/tostui?tab=readme-ov-file#-tostui---z-image-turbo-with-lora) | | | TostUI - Z-Image-Turbo With LoRA
 22 | [![local](https://github.com/user-attachments/assets/2b9a6ec2-e6cd-4415-9553-6c7bfb5e7722)](https://github.com/camenduru/tostui?tab=readme-ov-file#-tostui---z-image-turbo-4bit) | | | TostUI - Z-Image-Turbo (4bit)
 23 | [![local](https://github.com/user-attachments/assets/2b9a6ec2-e6cd-4415-9553-6c7bfb5e7722)](https://github.com/camenduru/tostui?tab=readme-ov-file#-tostui---qwen-image-edit-2509-with-loras-8bit) | [![pod](https://github.com/user-attachments/assets/b1afe627-76ad-42fd-baaa-59be2259b224)](https://console.runpod.io/deploy?template=zbpfw59j23&ref=iqi9iy8y) | [![serverless](https://github.com/user-attachments/assets/99241dcd-7d87-4140-a779-d775bbbd674c)](https://console.runpod.io/deploy?template=kav9oydwre&ref=iqi9iy8y) | TostUI - Qwen Image Edit 2509 with LoRAs (8bit)
 24 | [![local](https://github.com/user-attachments/assets/2b9a6ec2-e6cd-4415-9553-6c7bfb5e7722)](https://github.com/camenduru/tostui?tab=readme-ov-file#-tostui---z-image-turbo-with-upscaler-8bit) | [![pod](https://github.com/user-attachments/assets/b1afe627-76ad-42fd-baaa-59be2259b224)](https://console.runpod.io/deploy?template=avc1aiksjc&ref=iqi9iy8y) | [![serverless](https://github.com/user-attachments/assets/99241dcd-7d87-4140-a779-d775bbbd674c)](https://console.runpod.io/deploy?template=xw7bgxhlhg&ref=iqi9iy8y) | TostUI - Z-Image-Turbo with Upscaler (8bit)
 25 | [![local](https://github.com/user-attachments/assets/2b9a6ec2-e6cd-4415-9553-6c7bfb5e7722)](https://github.com/camenduru/tostui?tab=readme-ov-file#-tostui---wan-22-image-to-video-8bit) | [![pod](https://github.com/user-attachments/assets/b1afe627-76ad-42fd-baaa-59be2259b224)](https://console.runpod.io/deploy?template=rg49nppdgd&ref=iqi9iy8y) | [![serverless](https://github.com/user-attachments/assets/99241dcd-7d87-4140-a779-d775bbbd674c)](https://console.runpod.io/deploy?template=bu7is6ath4&ref=iqi9iy8y) | TostUI - Wan 2.2 Image to Video (8bit)
 26 | 
 27 | `All services were tested with an RTX 3090, RTX 4090, and RTX 5090.`
 28 | 
 29 | #### 🍞 TostUI - GenFocus DeblurNet (8bit)
 30 | 
 31 | ![Screenshot 2025-12-21 085935](https://github.com/user-attachments/assets/8a75fb6b-ba28-4844-a69c-cb6e3c84a3cf)
 32 | 
 33 | 1.  **Install Docker**\
 34 |     [Download Docker Desktop (Windows AMD64)](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe)
 35 |     and run it.
 36 | 
 37 | 2.  **Update the container (optional)**
 38 | 
 39 |     ``` bash
 40 |     docker stop tostui-genfocus; docker rm tostui-genfocus; docker pull camenduru/tostui-genfocus
 41 |     ```
 42 | 
 43 | 3.  **Run the container**
 44 | 
 45 |     ``` bash
 46 |     docker run --gpus all -p 3000:3000 --name tostui-genfocus camenduru/tostui-genfocus
 47 |     ```
 48 | 
 49 |     *Requires NVIDIA GPU (Min 24GB VRAM)*
 50 | 
 51 | 4.  **Open app**\
 52 |     Go to: http://localhost:3000
 53 | 
 54 | #### 🍞 TostUI - Wan 2.2 First Last Frame (8bit)
 55 | 
 56 | 1.  **Install Docker**\
 57 |     [Download Docker Desktop (Windows AMD64)](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe)
 58 |     and run it.
 59 | 
 60 | 2.  **Update the container (optional)**
 61 | 
 62 |     ``` bash
 63 |     docker stop tostui-wan2-2-flf-8bit; docker rm tostui-wan2-2-flf-8bit; docker pull camenduru/tostui-wan2-2-flf-8bit
 64 |     ```
 65 | 
 66 | 3.  **Run the container**
 67 | 
 68 |     ``` bash
 69 |     docker run --gpus all -p 3000:3000 --name tostui-wan2-2-flf-8bit camenduru/tostui-wan2-2-flf-8bit
 70 |     ```
 71 | 
 72 |     *Requires NVIDIA GPU (Min 24GB VRAM)*
 73 | 
 74 | 4.  **Open app**\
 75 |     Go to: http://localhost:3000
 76 | 
 77 | #### 🍞 TostUI - Trellis 2
 78 | 
 79 | ![Image](https://github.com/user-attachments/assets/33bc9dca-dd23-4c67-a40d-41cf8e19fc71)
 80 | 
 81 | Video: https://x.com/camenduru/status/2001478162996191317
 82 | 
 83 | 1.  **Install Docker**\
 84 |     [Download Docker Desktop (Windows AMD64)](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe)
 85 |     and run it.
 86 | 
 87 | 2.  **Update the container (optional)**
 88 | 
 89 |     ``` bash
 90 |     docker stop tostui-trellis2; docker rm tostui-trellis2; docker pull camenduru/tostui-trellis2
 91 |     ```
 92 | 
 93 | 3.  **Run the container**\
 94 |     Open Command Prompt / PowerShell and paste:
 95 | 
 96 |     ``` bash
 97 |     docker run --gpus all -p 3000:3000 --name tostui-trellis2 camenduru/tostui-trellis2
 98 |     ```
 99 | 
100 |     *Requires NVIDIA GPU (Min 24GB VRAM)*
101 | 
102 | 4.  **Open app**\
103 |     Go to: http://localhost:3000
104 | 
105 | #### 🍞 TostUI - Tost Synth v1.0 (4K) (Z-Image-Turbo SeedVR2)
106 | 
107 | 1.  **Install Docker**\
108 |     [Download Docker Desktop (Windows AMD64)](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe)
109 |     and run it.
110 | 
111 | 2.  **Update the container (optional)**
112 | 
113 |     ``` bash
114 |     docker stop tostui-z-image-turbo-seedvr2; docker rm tostui-z-image-turbo-seedvr2; docker pull camenduru/tostui-z-image-turbo-seedvr2
115 |     ```
116 | 
117 | 3.  **Run the container**\
118 |     Open Command Prompt / PowerShell and paste:
119 | 
120 |     ``` bash
121 |     docker run --gpus all -p 3000:3000 --name tostui-z-image-turbo-seedvr2 camenduru/tostui-z-image-turbo-seedvr2
122 |     ```
123 | 
124 |     *Requires NVIDIA GPU (Min 24GB VRAM)*
125 | 
126 | 4.  **Open app**\
127 |     Go to: http://localhost:3000
128 | 
129 | #### 🍞 TostUI - SeedVR2
130 | 
131 | 1.  **Install Docker**\
132 |     [Download Docker Desktop (Windows AMD64)](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe)
133 |     and run it.
134 | 
135 | 2.  **Update the container (optional)**
136 | 
137 |     ``` bash
138 |     docker stop tostui-seedvr2; docker rm tostui-seedvr2; docker pull camenduru/tostui-seedvr2
139 |     ```
140 | 
141 | 3.  **Run the container**\
142 |     Open Command Prompt / PowerShell and paste:
143 | 
144 |     ``` bash
145 |     docker run --gpus all -p 3000:3000 --name tostui-seedvr2 camenduru/tostui-seedvr2
146 |     ```
147 | 
148 |     *Requires NVIDIA GPU (Min 24GB VRAM)*
149 | 
150 | 4.  **Open app**\
151 |     Go to: http://localhost:3000
152 | 
153 | #### 🍞 TostUI - Z-Image-Turbo With LoRA
154 | 
155 | 1.  **Install Docker**\
156 |     [Download Docker Desktop (Windows AMD64)](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe)
157 |     and run it.
158 | 
159 | 2.  **Update the container (optional)**
160 | 
161 |     ``` bash
162 |     docker stop tostui-z-image-turbo; docker rm tostui-z-image-turbo; docker pull camenduru/tostui-z-image-turbo
163 |     ```
164 | 
165 | 3.  **Run the container**\
166 |     Open Command Prompt / PowerShell and paste:
167 | 
168 |     ``` bash
169 |     docker run --gpus all -p 3000:3000 --name tostui-z-image-turbo camenduru/tostui-z-image-turbo
170 |     ```
171 | 
172 |     *Requires NVIDIA GPU (Min 24GB VRAM)*
173 | 
174 | 4.  **Open app**\
175 |     Go to: http://localhost:3000
176 | 
177 | #### 🍞 TostUI - Z-Image-Turbo (4bit)
178 | 
179 | 1.  **Install Docker**\
180 |     [Download Docker Desktop (Windows AMD64)](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe)
181 |     and run it.
182 | 
183 | 2.  **Update the container (optional)**
184 | 
185 |     ``` bash
186 |     docker stop tostui-z-image-turbo-4bit; docker rm tostui-z-image-turbo-4bit; docker pull camenduru/tostui-z-image-turbo-4bit
187 |     ```
188 | 
189 | 3.  **Run the container**\
190 |     Open Command Prompt / PowerShell and paste:
191 | 
192 |     ``` bash
193 |     docker run --gpus all -p 3000:3000 --name tostui-z-image-turbo-4bit camenduru/tostui-z-image-turbo-4bit
194 |     ```
195 | 
196 |     *Requires NVIDIA GPU (Min 6GB VRAM)*
197 | 
198 | 4.  **Open app**\
199 |     Go to: http://localhost:3000
200 | 
201 | #### 🍞 TostUI - Qwen Image Edit 2509 with LoRAs (8bit)
202 | `Convert to Anime` `Convert to Reality T1` `Convert to Reality T2`
203 | `Convert to Chibi`\
204 | `Convert to Ahegao` `Convert to Color` `Convert to Kiss`
205 | `Edit With Prompt`\
206 | `Generate With Prompt` `Enhance Image Quality` `Next Scene`
207 | `Multiple Angles`\
208 | `Blend Image` `Relight Image` `Apply Texture` `Extract Outfit`
209 | `Face Swap`
210 | 
211 | 1.  **Install Docker**\
212 |     [Download Docker Desktop (Windows AMD64)](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe)
213 |     and run it.
214 | 
215 | 2.  **Update the container (optional)**
216 | 
217 |     ``` bash
218 |     docker stop tostui-qwen-image-edit-2509; docker rm tostui-qwen-image-edit-2509; docker pull camenduru/tostui-qwen-image-edit-2509
219 |     ```
220 | 
221 | 3.  **Run the container**
222 | 
223 |     ``` bash
224 |     docker run --gpus all -p 3000:3000 --name tostui-qwen-image-edit-2509 camenduru/tostui-qwen-image-edit-2509
225 |     ```
226 | 
227 |     *Requires NVIDIA GPU (Min 24GB VRAM)*
228 | 
229 | 4.  **Open app**\
230 |     Go to: http://localhost:3000
231 | 
232 | #### 🍞 TostUI - Z-Image-Turbo with Upscaler (8bit)
233 | 
234 | 1.  **Install Docker**\
235 |     [Download Docker Desktop (Windows AMD64)](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe)
236 |     and run it.
237 | 
238 | 2.  **Update the container (optional)**
239 | 
240 |     ``` bash
241 |     docker stop tostui-z-image-turbo-8bit; docker rm tostui-z-image-turbo-8bit; docker pull camenduru/tostui-z-image-turbo-8bit
242 |     ```
243 | 
244 | 3.  **Run the container**
245 | 
246 |     ``` bash
247 |     docker run --gpus all -p 3000:3000 --name tostui-z-image-turbo-8bit camenduru/tostui-z-image-turbo-8bit
248 |     ```
249 | 
250 |     *Requires NVIDIA GPU (Min 24GB VRAM)*
251 | 
252 | 4.  **Open app**\
253 |     Go to: http://localhost:3000
254 | 
255 | #### 🍞 TostUI - Wan 2.2 Image to Video (8bit)
256 | 
257 | 1.  **Install Docker**\
258 |     [Download Docker Desktop (Windows AMD64)](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe)
259 |     and run it.
260 | 
261 | 2.  **Update the container (optional)**
262 | 
263 |     ``` bash
264 |     docker stop tostui-wan2-2-i2v-8bit; docker rm tostui-wan2-2-i2v-8bit; docker pull camenduru/tostui-wan2-2-i2v-8bit
265 |     ```
266 | 
267 | 3.  **Run the container**
268 | 
269 |     ``` bash
270 |     docker run --gpus all -p 3000:3000 --name tostui-wan2-2-i2v-8bit camenduru/tostui-wan2-2-i2v-8bit
271 |     ```
272 | 
273 |     *Requires NVIDIA GPU (Min 24GB VRAM)*
274 | 
275 | 4.  **Open app**\
276 |     Go to: http://localhost:3000
277 | 


--------------------------------------------------------------------------------