├── runpod
    ├── base64
    │   └── .placeholder
    ├── uploadthing
    │   ├── proxy.js
    │   ├── test.ipynb
    │   ├── Dockerfile
    │   └── worker_runpod.py
    └── flux-fp8
    │   ├── worker_runpod.py
    │   └── Dockerfile
├── .eslintrc.json
├── next.config.mjs
├── postcss.config.mjs
├── app
    ├── page.tsx
    ├── layout.tsx
    └── globals.css
├── lib
    └── utils.ts
├── components.json
├── .gitignore
├── tsconfig.json
├── components
    ├── ui
    │   ├── label.tsx
    │   ├── input.tsx
    │   ├── slider.tsx
    │   ├── switch.tsx
    │   ├── resizable.tsx
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── dialog.tsx
    │   └── select.tsx
    └── Canvas.tsx
├── package.json
├── README.md
└── tailwind.config.ts


/runpod/base64/.placeholder:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


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


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Canvas from "@/components/Canvas";
 2 | 
 3 | export default function Home() {
 4 |   return (
 5 |     <div>
 6 |       <Canvas />
 7 |     </div>
 8 |   );
 9 | }
10 | 


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


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter } from "next/font/google";
 3 | import "./globals.css";
 4 | 
 5 | const inter = Inter({ subsets: ["latin"] });
 6 | 
 7 | export const metadata: Metadata = {
 8 |   title: "TostAI Manga Creator - Powered by Runpod",
 9 |   description: "TostAI Manga Creator - Powered by Runpod",
10 | };
11 | 
12 | export default function RootLayout({
13 |   children,
14 | }: Readonly<{
15 |   children: React.ReactNode;
16 | }>) {
17 |   return (
18 |     <html lang="en">
19 |       <body className={inter.className}>{children}</body>
20 |     </html>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/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/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cn } from "@/lib/utils"
 3 | 
 4 | export interface InputProps
 5 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 6 | 
 7 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 8 |   ({ className, type, ...props }, ref) => {
 9 |     return (
10 |       <input
11 |         type={type}
12 |         className={cn(
13 |           "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",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Input.displayName = "Input"
23 | 
24 | export { Input }


--------------------------------------------------------------------------------
/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 }
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "canvas",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-dialog": "^1.1.2",
13 |     "@radix-ui/react-label": "^2.1.0",
14 |     "@radix-ui/react-select": "^2.1.1",
15 |     "@radix-ui/react-slider": "^1.2.0",
16 |     "@radix-ui/react-slot": "^1.1.0",
17 |     "@radix-ui/react-switch": "^1.1.0",
18 |     "canvas": "file:",
19 |     "class-variance-authority": "^0.7.0",
20 |     "clsx": "^2.1.1",
21 |     "html2canvas": "^1.4.1",
22 |     "jspdf": "^2.5.1",
23 |     "lucide-react": "^0.436.0",
24 |     "next": "14.2.6",
25 |     "react": "^18",
26 |     "react-dom": "^18",
27 |     "react-resizable-panels": "^2.1.1",
28 |     "react-rnd": "^10.4.12",
29 |     "tailwind-merge": "^2.5.2",
30 |     "tailwindcss-animate": "^1.0.7"
31 |   },
32 |   "devDependencies": {
33 |     "@types/node": "^20",
34 |     "@types/react": "^18",
35 |     "@types/react-dom": "^18",
36 |     "eslint": "^8",
37 |     "eslint-config-next": "14.2.6",
38 |     "postcss": "^8",
39 |     "tailwindcss": "^3.4.1",
40 |     "typescript": "^5"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/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 }
30 | 


--------------------------------------------------------------------------------
/runpod/uploadthing/proxy.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   async fetch(request, env) {
 3 |     const allowedOrigin = 'https://manga.tost.ai';
 4 |     if (request.method === 'OPTIONS') {
 5 |       return new Response(null, {
 6 |         headers: {
 7 |           'Access-Control-Allow-Origin': allowedOrigin,
 8 |           'Access-Control-Allow-Methods': 'POST, OPTIONS',
 9 |           'Access-Control-Allow-Headers': 'Content-Type, Authorization',
10 |         },
11 |       });
12 |     }
13 |     const origin = request.headers.get('Origin');
14 |     if (origin !== allowedOrigin) {
15 |       return new Response('Forbidden', { status: 403 });
16 |     }
17 |     if (request.method === 'POST') {
18 |       const requestBody = await request.json();
19 |       const url = `https://api.runpod.ai/v2/${env.RUNPOD_ID}/runsync`;
20 |       const headers = {
21 |         'Content-Type': 'application/json',
22 |         'Authorization': `Bearer ${env.RUNPOD_KEY}`,
23 |       };
24 |       const inResponse = await fetch(url, {
25 |         method: 'POST',
26 |         headers: headers,
27 |         body: JSON.stringify(requestBody),
28 |       });
29 | 
30 |       if (!inResponse.ok) {
31 |         return new Response('500', { status: 500 });
32 |       }
33 |       const outResponse = await inResponse.json();
34 |       return new Response(JSON.stringify(outResponse), {
35 |         headers: {
36 |           'Content-Type': 'application/json',
37 |           'Access-Control-Allow-Origin': allowedOrigin,
38 |           'Access-Control-Allow-Methods': 'POST',
39 |           'Access-Control-Allow-Headers': 'Content-Type, Authorization',
40 |         },
41 |       });
42 |     } else {
43 |       return new Response('400', { status: 400 });
44 |     }
45 |   },
46 | };
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 🐣 Please follow me for new updates https://twitter.com/camenduru <br />
 2 | 🔥 Please join our discord server https://discord.gg/k5BwmmvJJU <br />
 3 | 🥳 Please join my patreon community https://patreon.com/camenduru <br />
 4 | 
 5 | ### 🌐 Page
 6 | https://manga.tost.ai (please wait for the server to wake up)
 7 | 
 8 | ### 🧬 Code
 9 | https://github.com/facebook/react <br />
10 | https://github.com/vercel/next.js <br />
11 | https://github.com/aredden/flux-fp8-api <br />
12 | 
13 | ### 📋 Tutorial
14 | ```
15 | npm install -g create-react-app
16 | npx create-next-app@latest canvas --typescript --tailwind --eslint
17 | npm run dev
18 | ```
19 | 
20 | ### 📦 Model
21 | 
22 | Thanks to all open-source community model creators ❤ <br />
23 | 
24 | https://civitai.com/models/802032/black-and-white-anime-pixel-art | bw_pixel_anime_v1.0.safetensors <br />
25 | https://civitai.com/models/801701/zanshou-kin-flux-ueno-manga-style | ueno.safetensors <br />
26 | https://civitai.com/models/744831/immoral-girl-by-kisaragi-gunma | immoralgirl.safetensors <br />
27 | https://civitai.com/models/779854/manga-style-lora-or-flux1 | manga_style_f1d.safetensors <br />
28 | https://civitai.com/models/681642/illustrationscute-cartoon-cute-manga-flux | j_cartoon_flux_bf16.safetensors <br />
29 | https://civitai.com/models/743448/berserk-manga-style-flux-lora | berserk_manga_style_flux.safetensors <br />
30 | https://civitai.com/models/225469/anime-manga-cinematic-ova-style-xl-f1d | Manga_and_Anime_cartoon_style_v1.safetensors <br />
31 | 
32 | ### 🖼 Output
33 | 
34 | https://github.com/user-attachments/assets/9bd0d728-1dba-449e-8ff5-7e1f2bde1cdc
35 | 
36 | https://github.com/user-attachments/assets/9f6fa1a4-2c4f-45eb-86ac-2d5c684fb9df
37 | 
38 | ### 🏢 Sponsor
39 | [https://runpod.io](https://runpod.io?ref=iqi9iy8y)
40 | 


--------------------------------------------------------------------------------
/components/ui/resizable.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { GripVertical } from "lucide-react"
 4 | import * as ResizablePrimitive from "react-resizable-panels"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const ResizablePanelGroup = ({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
12 |   <ResizablePrimitive.PanelGroup
13 |     className={cn(
14 |       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
15 |       className
16 |     )}
17 |     {...props}
18 |   />
19 | )
20 | 
21 | const ResizablePanel = ResizablePrimitive.Panel
22 | 
23 | const ResizableHandle = ({
24 |   withHandle,
25 |   className,
26 |   ...props
27 | }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
28 |   withHandle?: boolean
29 | }) => (
30 |   <ResizablePrimitive.PanelResizeHandle
31 |     className={cn(
32 |       "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
33 |       className
34 |     )}
35 |     {...props}
36 |   >
37 |     {withHandle && (
38 |       <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
39 |         <GripVertical className="h-2.5 w-2.5" />
40 |       </div>
41 |     )}
42 |   </ResizablePrimitive.PanelResizeHandle>
43 | )
44 | 
45 | export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
46 | 


--------------------------------------------------------------------------------
/runpod/uploadthing/test.ipynb:
--------------------------------------------------------------------------------
 1 | {
 2 |  "cells": [
 3 |   {
 4 |     "cell_type": "markdown",
 5 |     "metadata": {
 6 |         "id": "view-in-github"
 7 |     },
 8 |     "source": [
 9 |         "[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/camenduru/manga-tost/blob/main/runpod/uploadthing/test.ipynb)"
10 |     ]
11 |   },
12 |   {
13 |    "cell_type": "code",
14 |    "execution_count": null,
15 |    "metadata": {
16 |     "vscode": {
17 |      "languageId": "plaintext"
18 |     }
19 |    },
20 |    "outputs": [],
21 |    "source": [
22 |     "import requests\n",
23 |     "from PIL import Image\n",
24 |     "from io import BytesIO\n",
25 |     "\n",
26 |     "url = 'https://comic.camenduru.workers.dev'\n",
27 |     "headers = {\n",
28 |     "    \"Content-Type\": \"application/json\"\n",
29 |     "}\n",
30 |     "data = {\n",
31 |     "  \"input\": {\n",
32 |     "    \"positive_prompt\": \"Juaner_cartoon,A curious mermaid with long blue hair, wearing a necklace made of seashells, holding a glowing pearl, swimming through an underwater cave filled with shimmering treasures and ancient ruins.\",\n",
33 |     "    \"seed\": 0,\n",
34 |     "    \"steps\": 20,\n",
35 |     "    \"guidance\": 3.5,\n",
36 |     "    \"lora_file\": \"j_cartoon_flux_bf16.safetensors\",\n",
37 |     "    \"lora_strength_model\": 1,\n",
38 |     "    \"lora_strength_clip\": 1,\n",
39 |     "    \"sampler_name\": \"euler\",\n",
40 |     "    \"scheduler\": \"simple\",\n",
41 |     "    \"width\": 1024,\n",
42 |     "    \"height\": 1024\n",
43 |     "  }\n",
44 |     "}\n",
45 |     "response = requests.post(url, headers=headers, json=data)\n",
46 |     "image_url = response.json()['output']['result']\n",
47 |     "print(image_url)"
48 |    ]
49 |   }
50 |  ],
51 |  "metadata": {
52 |   "language_info": {
53 |    "name": "python"
54 |   }
55 |  },
56 |  "nbformat": 4,
57 |  "nbformat_minor": 2
58 | }
59 | 


--------------------------------------------------------------------------------
/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 whitespace-nowrap rounded-md text-sm font-medium 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",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 222.2 84% 4.9%;
 9 |     --card: 0 0% 100%;
10 |     --card-foreground: 222.2 84% 4.9%;
11 |     --popover: 0 0% 100%;
12 |     --popover-foreground: 222.2 84% 4.9%;
13 |     --primary: 222.2 47.4% 11.2%;
14 |     --primary-foreground: 210 40% 98%;
15 |     --secondary: 210 40% 96.1%;
16 |     --secondary-foreground: 222.2 47.4% 11.2%;
17 |     --muted: 210 40% 96.1%;
18 |     --muted-foreground: 215.4 16.3% 46.9%;
19 |     --accent: 210 40% 96.1%;
20 |     --accent-foreground: 222.2 47.4% 11.2%;
21 |     --destructive: 0 84.2% 60.2%;
22 |     --destructive-foreground: 210 40% 98%;
23 |     --border: 214.3 31.8% 91.4%;
24 |     --input: 214.3 31.8% 91.4%;
25 |     --ring: 222.2 84% 4.9%;
26 |     --radius: 0.5rem;
27 |     --chart-1: 12 76% 61%;
28 |     --chart-2: 173 58% 39%;
29 |     --chart-3: 197 37% 24%;
30 |     --chart-4: 43 74% 66%;
31 |     --chart-5: 27 87% 67%;
32 |   }
33 | 
34 |   .dark {
35 |     --background: 222.2 84% 4.9%;
36 |     --foreground: 210 40% 98%;
37 |     --card: 222.2 84% 4.9%;
38 |     --card-foreground: 210 40% 98%;
39 |     --popover: 222.2 84% 4.9%;
40 |     --popover-foreground: 210 40% 98%;
41 |     --primary: 210 40% 98%;
42 |     --primary-foreground: 222.2 47.4% 11.2%;
43 |     --secondary: 217.2 32.6% 17.5%;
44 |     --secondary-foreground: 210 40% 98%;
45 |     --muted: 217.2 32.6% 17.5%;
46 |     --muted-foreground: 215 20.2% 65.1%;
47 |     --accent: 217.2 32.6% 17.5%;
48 |     --accent-foreground: 210 40% 98%;
49 |     --destructive: 0 62.8% 30.6%;
50 |     --destructive-foreground: 210 40% 98%;
51 |     --border: 217.2 32.6% 17.5%;
52 |     --input: 217.2 32.6% 17.5%;
53 |     --ring: 212.7 26.8% 83.9%;
54 |     --chart-1: 220 70% 50%;
55 |     --chart-2: 160 60% 45%;
56 |     --chart-3: 30 80% 55%;
57 |     --chart-4: 280 65% 60%;
58 |     --chart-5: 340 75% 55%;
59 |   }
60 | }
61 | 
62 | @layer base {
63 |   * {
64 |     @apply border-border;
65 |   }
66 |   body {
67 |     @apply bg-background text-foreground;
68 |   }
69 | }


--------------------------------------------------------------------------------
/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 }
80 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss"
 2 | 
 3 | const config = {
 4 |   darkMode: ["class"],
 5 |   content: [
 6 |     './pages/**/*.{ts,tsx}',
 7 |     './components/**/*.{ts,tsx}',
 8 |     './app/**/*.{ts,tsx}',
 9 |     './src/**/*.{ts,tsx}',
10 | 	],
11 |   prefix: "",
12 |   theme: {
13 |     container: {
14 |       center: true,
15 |       padding: "2rem",
16 |       screens: {
17 |         "2xl": "1400px",
18 |       },
19 |     },
20 |     extend: {
21 |       colors: {
22 |         border: "hsl(var(--border))",
23 |         input: "hsl(var(--input))",
24 |         ring: "hsl(var(--ring))",
25 |         background: "hsl(var(--background))",
26 |         foreground: "hsl(var(--foreground))",
27 |         primary: {
28 |           DEFAULT: "hsl(var(--primary))",
29 |           foreground: "hsl(var(--primary-foreground))",
30 |         },
31 |         secondary: {
32 |           DEFAULT: "hsl(var(--secondary))",
33 |           foreground: "hsl(var(--secondary-foreground))",
34 |         },
35 |         destructive: {
36 |           DEFAULT: "hsl(var(--destructive))",
37 |           foreground: "hsl(var(--destructive-foreground))",
38 |         },
39 |         muted: {
40 |           DEFAULT: "hsl(var(--muted))",
41 |           foreground: "hsl(var(--muted-foreground))",
42 |         },
43 |         accent: {
44 |           DEFAULT: "hsl(var(--accent))",
45 |           foreground: "hsl(var(--accent-foreground))",
46 |         },
47 |         popover: {
48 |           DEFAULT: "hsl(var(--popover))",
49 |           foreground: "hsl(var(--popover-foreground))",
50 |         },
51 |         card: {
52 |           DEFAULT: "hsl(var(--card))",
53 |           foreground: "hsl(var(--card-foreground))",
54 |         },
55 |       },
56 |       borderRadius: {
57 |         lg: "var(--radius)",
58 |         md: "calc(var(--radius) - 2px)",
59 |         sm: "calc(var(--radius) - 4px)",
60 |       },
61 |       keyframes: {
62 |         "accordion-down": {
63 |           from: { height: "0" },
64 |           to: { height: "var(--radix-accordion-content-height)" },
65 |         },
66 |         "accordion-up": {
67 |           from: { height: "var(--radix-accordion-content-height)" },
68 |           to: { height: "0" },
69 |         },
70 |       },
71 |       animation: {
72 |         "accordion-down": "accordion-down 0.2s ease-out",
73 |         "accordion-up": "accordion-up 0.2s ease-out",
74 |       },
75 |     },
76 |   },
77 |   plugins: [require("tailwindcss-animate")],
78 | } satisfies Config
79 | 
80 | export default config


--------------------------------------------------------------------------------
/runpod/uploadthing/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM runpod/pytorch:2.2.1-py3.10-cuda12.1.1-devel-ubuntu22.04
 2 | WORKDIR /content
 3 | ENV PATH="/home/camenduru/.local/bin:${PATH}"
 4 | 
 5 | RUN adduser --disabled-password --gecos '' camenduru && \
 6 |     adduser camenduru sudo && \
 7 |     echo '%sudo ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers && \
 8 |     chown -R camenduru:camenduru /content && \
 9 |     chmod -R 777 /content && \
10 |     chown -R camenduru:camenduru /home && \
11 |     chmod -R 777 /home && \
12 |     apt update -y && add-apt-repository -y ppa:git-core/ppa && apt update -y && apt install -y aria2 git git-lfs unzip ffmpeg
13 | 
14 | USER camenduru
15 | 
16 | RUN pip install -q opencv-python imageio imageio-ffmpeg ffmpeg-python av runpod \
17 |     xformers==0.0.25 torchsde==0.2.6 einops==0.8.0 diffusers==0.28.0 transformers==4.41.2 accelerate==0.30.1 && \
18 |     git clone https://github.com/comfyanonymous/ComfyUI /content/ComfyUI && \
19 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/camenduru/FLUX.1-dev/resolve/main/flux1-dev.sft -d /content/ComfyUI/models/unet -o flux1-dev.sft && \
20 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/camenduru/FLUX.1-dev/resolve/main/clip_l.safetensors -d /content/ComfyUI/models/clip -o clip_l.safetensors && \
21 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/camenduru/FLUX.1-dev/resolve/main/t5xxl_fp16.safetensors -d /content/ComfyUI/models/clip -o t5xxl_fp16.safetensors && \
22 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/camenduru/FLUX.1-dev/resolve/main/ae.sft -d /content/ComfyUI/models/vae -o ae.sft && \
23 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/bw_pixel_anime_v1.0.safetensors -d /content/ComfyUI/models/loras -o bw_pixel_anime_v1.0.safetensors && \
24 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/ueno.safetensors -d /content/ComfyUI/models/loras -o ueno.safetensors && \
25 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/immoralgirl.safetensors -d /content/ComfyUI/models/loras -o immoralgirl.safetensors && \
26 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/manga_style_f1d.safetensors -d /content/ComfyUI/models/loras -o manga_style_f1d.safetensors && \
27 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/j_cartoon_flux_bf16.safetensors -d /content/ComfyUI/models/loras -o j_cartoon_flux_bf16.safetensors && \
28 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/berserk_manga_style_flux.safetensors -d /content/ComfyUI/models/loras -o berserk_manga_style_flux.safetensors && \
29 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/Manga_and_Anime_cartoon_style_v1.safetensors -d /content/ComfyUI/models/loras -o Manga_and_Anime_cartoon_style_v1.safetensors
30 | 
31 | COPY ./worker_runpod.py /content/ComfyUI/worker_runpod.py
32 | WORKDIR /content/ComfyUI
33 | CMD python worker_runpod.py


--------------------------------------------------------------------------------
/runpod/flux-fp8/worker_runpod.py:
--------------------------------------------------------------------------------
 1 | import os, json, requests, mimetypes, hashlib, string, runpod
 2 | 
 3 | import random, time
 4 | import torch
 5 | from PIL import Image
 6 | 
 7 | from flux_pipeline import FluxPipeline
 8 | from util import load_config, ModelVersion
 9 | 
10 | with torch.inference_mode():
11 |     config = load_config(
12 |         ModelVersion.flux_dev,
13 |         flux_path="/content/models/unet/flux1-dev.sft",
14 |         flux_device="cuda:0",
15 |         ae_path="/content/models/vae/ae.sft",
16 |         ae_device="cuda:0",
17 |         text_enc_path="/content/models/clip",
18 |         text_enc_device="cuda:0",
19 |         flow_dtype="float16",
20 |         text_enc_dtype="bfloat16",
21 |         ae_dtype="bfloat16",
22 |         compile_extras=True,
23 |         compile_blocks=True,
24 |         offload_flow=False,
25 |         offload_text_enc=False
26 |     )
27 |     pipe = FluxPipeline.load_pipeline_from_config(config)
28 |     pipe.load_lora(lora_path="/content/models/loras/j_cartoon_flux_bf16.safetensors", scale=1.0)
29 | 
30 | def closestNumber(n, m):
31 |     q = int(n / m)
32 |     n1 = m * q
33 |     if (n * m) > 0:
34 |         n2 = m * (q + 1)
35 |     else:
36 |         n2 = m * (q - 1)
37 |     if abs(n - n1) < abs(n - n2):
38 |         return n1
39 |     return n2
40 | 
41 | def upload_file_to_uploadthing(file_path):
42 |     file_name = os.path.basename(file_path)
43 |     _, file_extension = os.path.splitext(file_name)
44 |     random_string = ''.join(random.choice(string.ascii_letters + string.digits) for _ in range(8))
45 |     md5_hash = hashlib.md5(random_string.encode()).hexdigest()
46 |     file_name = md5_hash+file_extension
47 |     file_size = os.path.getsize(file_path)
48 |     file_type, _ = mimetypes.guess_type(file_path)
49 |     with open(file_path, "rb") as file:
50 |         file_content = file.read()
51 |     file_info = {"name": file_name, "size": file_size, "type": file_type}
52 |     uploadthing_api_key = os.getenv('uploadthing_api_key')
53 |     headers = {"x-uploadthing-api-key": uploadthing_api_key}
54 |     data = {"contentDisposition": "inline", "acl": "public-read", "files": [file_info]}
55 |     presigned_response = requests.post("https://api.uploadthing.com/v6/uploadFiles", headers=headers, json=data)
56 |     presigned_response.raise_for_status()
57 |     presigned = presigned_response.json()["data"][0]
58 |     upload_url = presigned["url"]
59 |     fields = presigned["fields"]
60 |     files = {"file": file_content}
61 |     upload_response = requests.post(upload_url, data=fields, files=files)
62 |     upload_response.raise_for_status()
63 |     return presigned_response, upload_response, file_name
64 | 
65 | @torch.inference_mode()
66 | def generate(input):
67 |     values = input["input"]
68 | 
69 |     positive_prompt = values['positive_prompt']
70 |     width = values['width']
71 |     height = values['height']
72 |     seed = values['seed']
73 |     steps = values['steps']
74 |     guidance = values['guidance']
75 | 
76 |     if seed == 0:
77 |         random.seed(int(time.time()))
78 |         seed = random.randint(0, 18446744073709551615)
79 |     print(seed)
80 |     
81 |     positive_prompt = "Juaner_cartoon, " + positive_prompt
82 |     image_stream = pipe.generate(prompt=positive_prompt,
83 |                         width=closestNumber(width, 16),
84 |                         height=closestNumber(height, 16),
85 |                         num_steps=steps,
86 |                         guidance=guidance,
87 |                         seed=seed,
88 |                         strength=1.0,
89 |                         init_image=None)
90 |     image = Image.open(image_stream)
91 |     image.save("/content/flux-comic-tost.png")
92 | 
93 |     result = "/content/flux-comic-tost.png"
94 |     presigned_response, upload_response, file_name = upload_file_to_uploadthing(result)
95 |     image_url = presigned_response.json()['data'][0]['fileUrl']
96 |     return {"file": file_name, "result": image_url, "status": "DONE"}
97 | 
98 | runpod.serverless.start({"handler": generate})


--------------------------------------------------------------------------------
/runpod/flux-fp8/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM runpod/pytorch:2.2.1-py3.10-cuda12.1.1-devel-ubuntu22.04
 2 | WORKDIR /content
 3 | ENV PATH="/home/camenduru/.local/bin:${PATH}"
 4 | 
 5 | RUN adduser --disabled-password --gecos '' camenduru && \
 6 |     adduser camenduru sudo && \
 7 |     echo '%sudo ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers && \
 8 |     chown -R camenduru:camenduru /content && \
 9 |     chmod -R 777 /content && \
10 |     chown -R camenduru:camenduru /home && \
11 |     chmod -R 777 /home && \
12 |     apt update -y && add-apt-repository -y ppa:git-core/ppa && apt update -y && apt install -y aria2 git git-lfs unzip ffmpeg
13 | 
14 | USER camenduru
15 | 
16 | RUN pip install -q opencv-python imageio imageio-ffmpeg ffmpeg-python av runpod \
17 |     torch==2.4.0+cu124 torchvision==0.19.0+cu124 torchaudio==2.4.0+cu124 torchtext==0.18.0 torchdata==0.8.0 --extra-index-url https://download.pytorch.org/whl/cu124 \
18 |     xformers==0.0.27.post2 ninja einops PyTurboJPEG pydantic fastapi bitsandbytes loguru transformers tokenizers sentencepiece click accelerate quanto pydash pybase64 uvicorn \
19 |     https://github.com/camenduru/wheels/releases/download/runpod/cublas_ops-0.0.5-cp310-cp310-linux_x86_64.whl && \
20 |     git clone https://github.com/aredden/flux-fp8-api /content/flux-fp8-api && \
21 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/camenduru/FLUX.1-dev/resolve/main/flux1-dev.sft -d /content/models/unet -o flux1-dev.sft && \
22 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/city96/t5-v1_1-xxl-encoder-bf16/raw/main/config.json -d /content/models/clip -o config.json && \
23 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/city96/t5-v1_1-xxl-encoder-bf16/resolve/main/model.safetensors -d /content/models/clip -o model.safetensors && \
24 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/city96/t5-v1_1-xxl-encoder-bf16/raw/main/special_tokens_map.json -d /content/models/clip -o special_tokens_map.json && \
25 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/city96/t5-v1_1-xxl-encoder-bf16/resolve/main/spiece.model -d /content/models/clip -o spiece.model && \
26 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/city96/t5-v1_1-xxl-encoder-bf16/raw/main/tokenizer_config.json -d /content/models/clip -o tokenizer_config.json && \
27 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/camenduru/FLUX.1-dev/resolve/main/ae.sft -d /content/models/vae -o ae.sft && \
28 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/bw_pixel_anime_v1.0.safetensors -d /content/models/loras -o bw_pixel_anime_v1.0.safetensors && \
29 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/ueno.safetensors -d /content/models/loras -o ueno.safetensors && \
30 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/immoralgirl.safetensors -d /content/models/loras -o immoralgirl.safetensors && \
31 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/manga_style_f1d.safetensors -d /content/models/loras -o manga_style_f1d.safetensors && \
32 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/j_cartoon_flux_bf16.safetensors -d /content/models/loras -o j_cartoon_flux_bf16.safetensors && \
33 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/berserk_manga_style_flux.safetensors -d /content/models/loras -o berserk_manga_style_flux.safetensors && \
34 |     aria2c --console-log-level=error -c -x 16 -s 16 -k 1M https://huggingface.co/TostAI/flux-1-dev-lora/resolve/main/Manga_and_Anime_cartoon_style_v1.safetensors -d /content/models/loras -o Manga_and_Anime_cartoon_style_v1.safetensors
35 | 
36 | COPY ./worker_runpod.py /content/flux-fp8-api/worker_runpod.py
37 | WORKDIR /content/flux-fp8-api
38 | CMD python worker_runpod.py


--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-background/1 backdrop-blur-[1px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogClose,
116 |   DialogTrigger,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }


--------------------------------------------------------------------------------
/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 | }
161 | 


--------------------------------------------------------------------------------
/runpod/uploadthing/worker_runpod.py:
--------------------------------------------------------------------------------
  1 | import os, json, requests, mimetypes, hashlib, string, runpod
  2 | 
  3 | import random, time
  4 | import torch
  5 | import numpy as np
  6 | from PIL import Image
  7 | import nodes
  8 | from nodes import NODE_CLASS_MAPPINGS
  9 | from comfy_extras import nodes_custom_sampler
 10 | from comfy_extras import nodes_flux
 11 | from comfy import model_management
 12 | 
 13 | DualCLIPLoader = NODE_CLASS_MAPPINGS["DualCLIPLoader"]()
 14 | UNETLoader = NODE_CLASS_MAPPINGS["UNETLoader"]()
 15 | VAELoader = NODE_CLASS_MAPPINGS["VAELoader"]()
 16 | 
 17 | LoraLoader = NODE_CLASS_MAPPINGS["LoraLoader"]()
 18 | FluxGuidance = nodes_flux.NODE_CLASS_MAPPINGS["FluxGuidance"]()
 19 | RandomNoise = nodes_custom_sampler.NODE_CLASS_MAPPINGS["RandomNoise"]()
 20 | BasicGuider = nodes_custom_sampler.NODE_CLASS_MAPPINGS["BasicGuider"]()
 21 | KSamplerSelect = nodes_custom_sampler.NODE_CLASS_MAPPINGS["KSamplerSelect"]()
 22 | BasicScheduler = nodes_custom_sampler.NODE_CLASS_MAPPINGS["BasicScheduler"]()
 23 | SamplerCustomAdvanced = nodes_custom_sampler.NODE_CLASS_MAPPINGS["SamplerCustomAdvanced"]()
 24 | VAELoader = NODE_CLASS_MAPPINGS["VAELoader"]()
 25 | VAEDecode = NODE_CLASS_MAPPINGS["VAEDecode"]()
 26 | EmptyLatentImage = NODE_CLASS_MAPPINGS["EmptyLatentImage"]()
 27 | 
 28 | with torch.inference_mode():
 29 |     clip = DualCLIPLoader.load_clip("t5xxl_fp16.safetensors", "clip_l.safetensors", "flux")[0]
 30 |     unet = UNETLoader.load_unet("flux1-dev.sft", "default")[0]
 31 |     vae = VAELoader.load_vae("ae.sft")[0]
 32 | 
 33 | def closestNumber(n, m):
 34 |     q = int(n / m)
 35 |     n1 = m * q
 36 |     if (n * m) > 0:
 37 |         n2 = m * (q + 1)
 38 |     else:
 39 |         n2 = m * (q - 1)
 40 |     if abs(n - n1) < abs(n - n2):
 41 |         return n1
 42 |     return n2
 43 | 
 44 | def upload_file_to_uploadthing(file_path):
 45 |     file_name = os.path.basename(file_path)
 46 |     _, file_extension = os.path.splitext(file_name)
 47 |     random_string = ''.join(random.choice(string.ascii_letters + string.digits) for _ in range(8))
 48 |     md5_hash = hashlib.md5(random_string.encode()).hexdigest()
 49 |     file_name = md5_hash+file_extension
 50 |     file_size = os.path.getsize(file_path)
 51 |     file_type, _ = mimetypes.guess_type(file_path)
 52 |     with open(file_path, "rb") as file:
 53 |         file_content = file.read()
 54 |     file_info = {"name": file_name, "size": file_size, "type": file_type}
 55 |     uploadthing_api_key = os.getenv('uploadthing_api_key')
 56 |     headers = {"x-uploadthing-api-key": uploadthing_api_key}
 57 |     data = {"contentDisposition": "inline", "acl": "public-read", "files": [file_info]}
 58 |     presigned_response = requests.post("https://api.uploadthing.com/v6/uploadFiles", headers=headers, json=data)
 59 |     presigned_response.raise_for_status()
 60 |     presigned = presigned_response.json()["data"][0]
 61 |     upload_url = presigned["url"]
 62 |     fields = presigned["fields"]
 63 |     files = {"file": file_content}
 64 |     upload_response = requests.post(upload_url, data=fields, files=files)
 65 |     upload_response.raise_for_status()
 66 |     return presigned_response, upload_response, file_name
 67 | 
 68 | @torch.inference_mode()
 69 | def generate(input):
 70 |     values = input["input"]
 71 | 
 72 |     positive_prompt = values['positive_prompt']
 73 |     width = values['width']
 74 |     height = values['height']
 75 |     seed = values['seed']
 76 |     steps = values['steps']
 77 |     guidance = values['guidance']
 78 |     lora_strength_model = values['lora_strength_model']
 79 |     lora_strength_clip = values['lora_strength_clip']
 80 |     sampler_name = values['sampler_name']
 81 |     scheduler = values['scheduler']
 82 |     lora_file = values['lora_file']
 83 | 
 84 |     if seed == 0:
 85 |         random.seed(int(time.time()))
 86 |         seed = random.randint(0, 18446744073709551615)
 87 |     print(seed)
 88 | 
 89 |     global unet, clip
 90 | 
 91 |     if lora_file == "None":
 92 |         cond, pooled = clip.encode_from_tokens(clip.tokenize(positive_prompt), return_pooled=True)
 93 |         cond = [[cond, {"pooled_output": pooled}]]
 94 |         cond = FluxGuidance.append(cond, guidance)[0]
 95 |         noise = RandomNoise.get_noise(seed)[0]
 96 |         guider = BasicGuider.get_guider(unet, cond)[0]
 97 |         sampler = KSamplerSelect.get_sampler(sampler_name)[0]
 98 |         sigmas = BasicScheduler.get_sigmas(unet, scheduler, steps, 1.0)[0]
 99 |     else:
100 |         if lora_file == "bw_pixel_anime_v1.0.safetensors":
101 |             positive_prompt = "bw_pixel_anime, " + positive_prompt
102 |         elif lora_file == "ueno.safetensors":
103 |             positive_prompt = "Ueno, a black and white drawing of, " + positive_prompt
104 |         elif lora_file == "immoralgirl.safetensors":
105 |             positive_prompt = "immoralgirl, black and white manga page, " + positive_prompt
106 |         elif lora_file == "manga_style_f1d.safetensors":
107 |             positive_prompt = "Black-and-white manga scene, " + positive_prompt
108 |         elif lora_file == "j_cartoon_flux_bf16.safetensors":
109 |             positive_prompt = "Juaner_cartoon, " + positive_prompt
110 |         elif lora_file == "berserk_manga_style_flux.safetensors":
111 |             positive_prompt = "berserk style, " + positive_prompt
112 |         elif lora_file == "Manga_and_Anime_cartoon_style_v1.safetensors":
113 |             positive_prompt = "Manga and Anime cartoon style, " + positive_prompt
114 |         unet_lora, clip_lora = LoraLoader.load_lora(unet, clip, lora_file, lora_strength_model, lora_strength_clip)
115 |         cond, pooled = clip_lora.encode_from_tokens(clip_lora.tokenize(positive_prompt), return_pooled=True)
116 |         cond = [[cond, {"pooled_output": pooled}]]
117 |         cond = FluxGuidance.append(cond, guidance)[0]
118 |         noise = RandomNoise.get_noise(seed)[0]
119 |         guider = BasicGuider.get_guider(unet_lora, cond)[0]
120 |         sampler = KSamplerSelect.get_sampler(sampler_name)[0]
121 |         sigmas = BasicScheduler.get_sigmas(unet_lora, scheduler, steps, 1.0)[0]
122 | 
123 |     latent_image = EmptyLatentImage.generate(closestNumber(width, 16), closestNumber(height, 16))[0]
124 |     sample, sample_denoised = SamplerCustomAdvanced.sample(noise, guider, sampler, sigmas, latent_image)
125 |     decoded = VAEDecode.decode(vae, sample)[0].detach()
126 |     Image.fromarray(np.array(decoded*255, dtype=np.uint8)[0]).save("/content/flux-comic-tost.png")
127 | 
128 |     result = "/content/flux-comic-tost.png"
129 |     presigned_response, upload_response, file_name = upload_file_to_uploadthing(result)
130 |     image_url = presigned_response.json()['data'][0]['fileUrl']
131 |     return {"file": file_name, "result": image_url, "status": "DONE"}
132 | 
133 | runpod.serverless.start({"handler": generate})


--------------------------------------------------------------------------------
/components/Canvas.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import React, { useState, useRef, useCallback, useEffect } from 'react'
  4 | import { Rnd } from 'react-rnd'
  5 | import { ChevronDown, ChevronUp, ChevronLeft, ChevronRight, Plus, Trash2, Image as ImageIcon, ZoomIn, ZoomOut, RefreshCw, Printer, Download, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Save } from 'lucide-react'
  6 | import { Button } from "@/components/ui/button"
  7 | import { Card } from "@/components/ui/card"
  8 | import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "@/components/ui/resizable"
  9 | import { Switch } from "@/components/ui/switch"
 10 | import { Slider } from "@/components/ui/slider"
 11 | import { Input } from "@/components/ui/input"
 12 | import { Label } from "@/components/ui/label"
 13 | import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 14 | import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 15 | 
 16 | import html2canvas from 'html2canvas'
 17 | import jsPDF from 'jspdf'
 18 | 
 19 | interface BubbleState {
 20 |   id: string
 21 |   text: string
 22 |   fontSize: number
 23 |   fontFamily: string
 24 |   arrowPosition: number
 25 |   arrowRotation: number
 26 |   arrowOffsetX: number
 27 |   arrowOffsetY: number
 28 |   position: { x: number; y: number }
 29 |   size: { width: number; height: number }
 30 |   panelIndex: number
 31 |   arrowColor: 'white' | 'black'
 32 |   arrowSize: number
 33 | }
 34 | 
 35 | interface ImageState {
 36 |   src: string
 37 |   zoom: number
 38 |   x: number
 39 |   y: number
 40 | }
 41 | 
 42 | function SpeechBubble({ 
 43 |   state, 
 44 |   onSelect, 
 45 |   onStateChange,
 46 |   onDelete,
 47 |   isPrinting
 48 | }: { 
 49 |   state: BubbleState
 50 |   onSelect: (id: string) => void
 51 |   onStateChange: (id: string, newState: Partial<BubbleState>) => void
 52 |   onDelete: (id: string) => void
 53 |   isPrinting: boolean
 54 | }) {
 55 |   const { id, text, fontSize, fontFamily, arrowPosition, arrowRotation, arrowOffsetX, arrowOffsetY, position, size, arrowColor, arrowSize } = state
 56 |   const textareaRef = useRef<HTMLTextAreaElement>(null)
 57 |   const bubbleRef = useRef<HTMLDivElement>(null)
 58 |   const [isDraggingArrow, setIsDraggingArrow] = useState(false)
 59 | 
 60 |   useEffect(() => {
 61 |     if (textareaRef.current) {
 62 |       textareaRef.current.style.fontSize = `${fontSize}px`
 63 |       textareaRef.current.style.fontFamily = fontFamily
 64 |     }
 65 |   }, [fontSize, fontFamily])
 66 | 
 67 |   const updateState = (newState: Partial<BubbleState>) => {
 68 |     onStateChange(id, newState)
 69 |   }
 70 | 
 71 |   const handleArrowDrag = (e: React.MouseEvent<HTMLDivElement>) => {
 72 |     if (!bubbleRef.current || !isDraggingArrow) return
 73 | 
 74 |     const rect = bubbleRef.current.getBoundingClientRect()
 75 |     const bubbleWidth = rect.width
 76 |     const bubbleHeight = rect.height
 77 |     const perimeter = 2 * (bubbleWidth + bubbleHeight)
 78 | 
 79 |     const mouseX = e.clientX - rect.left
 80 |     const mouseY = e.clientY - rect.top
 81 | 
 82 |     let distance = 0
 83 | 
 84 |     if (mouseY < 0) {
 85 |       distance = mouseX
 86 |     } else if (mouseX > bubbleWidth) {
 87 |       distance = bubbleWidth + mouseY
 88 |     } else if (mouseY > bubbleHeight) {
 89 |       distance = 2 * bubbleWidth + bubbleHeight - mouseX
 90 |     } else if (mouseX < 0) {
 91 |       distance = 2 * (bubbleWidth + bubbleHeight) - mouseY
 92 |     }
 93 | 
 94 |     const newPosition = Math.max(0, Math.min(1, distance / perimeter))
 95 |     updateState({ arrowPosition: newPosition })
 96 |   }
 97 | 
 98 |   const getArrowStyle = (): React.CSSProperties => {
 99 |     const baseStyle: React.CSSProperties = {
100 |       width: '0',
101 |       height: '0',
102 |       borderStyle: 'solid',
103 |       position: 'absolute',
104 |       zIndex: -1,
105 |       cursor: 'move',
106 |     }
107 | 
108 |     const perimeter = 2 * (size.width + size.height)
109 |     const position = arrowPosition * perimeter
110 | 
111 |     let x = 0
112 |     let y = 0
113 |     let rotation = arrowRotation
114 | 
115 |     if (position < size.width) {
116 |       x = position
117 |       y = -arrowSize
118 |       rotation += 0
119 |     } else if (position < size.width + size.height) {
120 |       x = size.width - (arrowSize / 1.5)
121 |       y = position - size.width
122 |       rotation += 90
123 |     } else if (position < 2 * size.width + size.height) {
124 |       x = 2 * size.width + size.height - position - arrowSize
125 |       y = size.height - (arrowSize * 1.1)
126 |       rotation += 180
127 |     } else {
128 |       x = -(arrowSize / 2)
129 |       y = perimeter - position - arrowSize
130 |       rotation += 270
131 |     }
132 | 
133 |     return {
134 |       ...baseStyle,
135 |       left: x + arrowOffsetX,
136 |       top: y + arrowOffsetY,
137 |       borderWidth: `0 ${arrowSize / 2}px ${arrowSize}px ${arrowSize / 2}px`,
138 |       borderColor: `transparent transparent ${arrowColor} transparent`,
139 |       transform: `rotate(${rotation}deg)`,
140 |       transformOrigin: '50% 100%',
141 |     }
142 |   }
143 | 
144 |   return (
145 |     <Rnd
146 |       size={size}
147 |       position={position}
148 |       onDragStop={(e, d) => updateState({ position: { x: d.x, y: d.y } })}
149 |       onResize={(e, direction, ref, delta, position) => {
150 |         updateState({
151 |           size: { width: ref.offsetWidth, height: ref.offsetHeight },
152 |           position
153 |         })
154 |       }}
155 |       bounds="parent"
156 |       minWidth={100}
157 |       minHeight={50}
158 |       onClick={() => onSelect(id)}
159 |     >
160 |       <div 
161 |         ref={bubbleRef} 
162 |         className="relative w-full h-full bg-white border-2 border-white rounded-lg speech-bubble cursor-move"
163 |         onMouseMove={handleArrowDrag}
164 |         onMouseUp={() => setIsDraggingArrow(false)}
165 |         onMouseLeave={() => setIsDraggingArrow(false)}
166 |       >
167 |         <textarea
168 |           ref={textareaRef}
169 |           value={text}
170 |           onChange={(e) => updateState({ text: e.target.value })}
171 |           className="w-full h-full resize-none outline-none p-2 bg-transparent cursor-text rounded-lg"
172 |           aria-label="Speech bubble text"
173 |         />
174 |         {!isPrinting && (
175 |           <Button
176 |             className="absolute top-0 right-0 p-1 bg-destructive text-destructive-foreground rounded-bl"
177 |             onClick={(e) => {
178 |               e.stopPropagation()
179 |               onDelete(id)
180 |             }}
181 |             aria-label="Delete speech bubble"
182 |           >
183 |             <Trash2 className="h-4 w-4" />
184 |           </Button>
185 |         )}
186 |         <div
187 |           style={getArrowStyle()}
188 |           onMouseDown={(e) => {
189 |             e.stopPropagation()
190 |             setIsDraggingArrow(true)
191 |           }}
192 |           aria-hidden="true"
193 |         />
194 |       </div>
195 |     </Rnd>
196 |   )
197 | }
198 | 
199 | export default function ComicCreator() {
200 |   const [selectedBubble, setSelectedBubble] = useState<string | null>(null)
201 |   const [bubbleStates, setBubbleStates] = useState<BubbleState[]>([])
202 |   const [images, setImages] = useState<ImageState[]>(Array(4).fill({ src: "", zoom: 1, x: 0, y: 0 }))
203 |   const [isPrinting, setIsPrinting] = useState(false)
204 |   const dragRef = useRef<{ isDragging: boolean; startX: number; startY: number }>({ isDragging: false, startX: 0, startY: 0 })
205 |   const fileInputRefs = useRef<(HTMLInputElement | null)[]>([])
206 |   const canvasRef = useRef<HTMLDivElement>(null)
207 |   const [activeImagePanel, setActiveImagePanel] = useState<number | null>(null)
208 |   const [isGenerating, setIsGenerating] = useState(false)
209 |   const [isDialogOpen, setIsDialogOpen] = useState(false)
210 |   const [frameThickness, setFrameThickness] = useState(0)
211 | 
212 |   const [imageInputs, setImageInputs] = useState({
213 |     positive_prompt: "A curious mermaid with long blue hair, wearing a necklace made of seashells, holding a glowing pearl, swimming through an underwater cave filled with shimmering treasures and ancient ruins.",
214 |     seed: 0,
215 |     steps: 20,
216 |     guidance: 3.5,
217 |     lora_file: "j_cartoon_flux_bf16.safetensors",
218 |     lora_strength_model: 1,
219 |     lora_strength_clip: 1,
220 |     sampler_name: "euler",
221 |     scheduler: "simple",
222 |     width: 1638,
223 |     height: 992
224 |   })
225 | 
226 |   const loraOptions = [
227 |     "j_cartoon_flux_bf16.safetensors",
228 |     "bw_pixel_anime_v1.0.safetensors",
229 |     "ueno.safetensors",
230 |     "immoralgirl.safetensors",
231 |     "manga_style_f1d.safetensors",
232 |     "berserk_manga_style_flux.safetensors",
233 |     "Manga_and_Anime_cartoon_style_v1.safetensors",
234 |     "None"
235 |   ]
236 | 
237 |   const updateBubbleState = (id: string, newState: Partial<BubbleState>) => {
238 |     setBubbleStates(prevStates => 
239 |       prevStates.map(state => 
240 |         state.id === id ? { ...state, ...newState } : state
241 |       )
242 |     )
243 |   }
244 | 
245 |   const addNewBubble = (panelIndex: number) => {
246 |     const newBubble: BubbleState = {
247 |       id: Date.now().toString(),
248 |       text: "New Bubble",
249 |       fontSize: 16,
250 |       fontFamily: 'Arial',
251 |       arrowPosition: 0,
252 |       arrowRotation: 0,
253 |       arrowOffsetX: 0,
254 |       arrowOffsetY: 0,
255 |       position: { x: 50, y: 50 },
256 |       size: { width: 200, height: 100 },
257 |       panelIndex,
258 |       arrowColor: 'black',
259 |       arrowSize: 20,
260 |     }
261 |     setBubbleStates(prevStates => [...prevStates, newBubble])
262 |     setSelectedBubble(newBubble.id)
263 |   }
264 | 
265 |   const removeSelectedBubble = (id: string) => {
266 |     setBubbleStates(prevStates => prevStates.filter(state => state.id !== id))
267 |     setSelectedBubble(null)
268 |   }
269 | 
270 |   const handleImageUpload = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
271 |     const file = event.target.files?.[0]
272 |     if (file) {
273 |       const reader = new FileReader()
274 |       reader.onload = (e) => {
275 |         const newImages = [...images]
276 |         newImages[index] = { src: e.target?.result as string, zoom: 1, x: 0, y: 0 }
277 |         setImages(newImages)
278 |       }
279 |       reader.readAsDataURL(file)
280 |     }
281 |   }
282 | 
283 |   const handleReplaceImage = (index: number) => {
284 |     fileInputRefs.current[index]?.click()
285 |   }
286 | 
287 |   const handleZoom = (index: number, direction: 'in' | 'out') => {
288 |     const newImages = [...images]
289 |     const currentZoom = newImages[index].zoom
290 |     newImages[index].zoom = direction === 'in' ? Math.min(currentZoom + 0.1, 3) : Math.max(currentZoom - 0.1, 0.5)
291 |     setImages(newImages)
292 |   }
293 | 
294 |   const handleMouseDown = (index: number, e: React.MouseEvent<HTMLDivElement>) => {
295 |     dragRef.current = { isDragging: true, startX: e.clientX - images[index].x, startY: e.clientY - images[index].y }
296 |   }
297 | 
298 |   const handleMouseMove = useCallback((index: number, e: React.MouseEvent<HTMLDivElement>) => {
299 |     if (!dragRef.current.isDragging) return
300 |     const newImages = [...images]
301 |     newImages[index].x = e.clientX - dragRef.current.startX
302 |     newImages[index].y = e.clientY - dragRef.current.startY
303 |     setImages(newImages)
304 |   }, [images])
305 | 
306 |   const handleMouseUp = () => {
307 |     dragRef.current.isDragging = false
308 |   }
309 | 
310 |   const handleExport = async (type: 'pdf' | 'png') => {
311 |     if (!canvasRef.current) return
312 | 
313 |     setIsPrinting(true)
314 | 
315 |     // Find all separator divs and store their original styles
316 |     const separators = canvasRef.current.querySelectorAll('div[role="separator"]');
317 |     const originalStyles = new Map();
318 |     // separators.forEach((separator, index) => {
319 |     //   originalStyles.set(index, separator.getAttribute('style'));
320 |     //   separator.setAttribute('style', 'background-color: white !important; border: none !important;');
321 |     // });
322 |     separators.forEach((separator, index) => {
323 |       originalStyles.set(index, separator.getAttribute('style'));
324 |       separator.setAttribute('style', 'display: none !important;');
325 |     });
326 |     
327 |     // Wait for the state to update and re-render
328 |     await new Promise(resolve => setTimeout(resolve, 0))
329 | 
330 |     try {
331 |       const canvas = await html2canvas(canvasRef.current, {
332 |         scale: 2, // Increase resolution
333 |         useCORS: true, // Allow loading cross-origin images
334 |         logging: false, // Disable logging
335 |       })
336 | 
337 |       if (type === 'pdf') {
338 |         const imgData = canvas.toDataURL('image/jpeg', 1.0)
339 |         const pdf = new jsPDF({
340 |           orientation: 'landscape',
341 |           unit: 'px',
342 |           format: [canvas.width, canvas.height]
343 |         })
344 | 
345 |         pdf.addImage(imgData, 'JPEG', 0, 0, canvas.width, canvas.height)
346 |         pdf.save('comic.pdf')
347 |       } else {
348 |         const link = document.createElement('a')
349 |         link.download = 'comic.png'
350 |         link.href = canvas.toDataURL('image/png')
351 |         link.click()
352 |       }
353 |     } catch (error) {
354 |       console.error('Error generating export:', error)
355 |     } finally {
356 |       // Restore original styles
357 |       separators.forEach((separator, index) => {
358 |         const originalStyle = originalStyles.get(index);
359 |         if (originalStyle) {
360 |           separator.setAttribute('style', originalStyle);
361 |         } else {
362 |           separator.removeAttribute('style');
363 |         }
364 |       });
365 |       setIsPrinting(false)
366 |     }
367 |   }
368 | 
369 |   const handleInputChange = (name: string, value: string | number) => {
370 |     setImageInputs(prev => ({
371 |       ...prev,
372 |       [name]: value
373 |     }))
374 |   }
375 | 
376 |   const handleGenerateImage = async () => {
377 |     if (activeImagePanel === null) return
378 |     setIsGenerating(true)
379 | 
380 |     try {
381 |       const response = await fetch('https://comic.camenduru.workers.dev', {
382 |         method: 'POST',
383 |         headers: {
384 |           'Content-Type': 'application/json'
385 |         },
386 |         body: JSON.stringify({ input: imageInputs })
387 |       })
388 | 
389 |       if (!response.ok) {
390 |         throw new Error('Network response was not ok')
391 |       }
392 | 
393 |       const data = await response.json()
394 |       if (data.output && data.output.result) {
395 |         const newImages = [...images]
396 |         setTimeout(() => {
397 |           newImages[activeImagePanel] = { src: data.output.result, zoom: 1, x: 0, y: 0 }
398 |           setImages(newImages)
399 |         }, 2000)
400 |       }
401 |     } catch (error) {
402 |       console.error('Error generating image:', error)
403 |     } finally {
404 |       setIsGenerating(false)
405 |       setIsDialogOpen(false)
406 |     }
407 |   }
408 | 
409 |   const handleSaveImage = async (index: number) => {
410 |     const imageData = images[index].src
411 |     if (imageData) {
412 |       try {
413 |         let blob
414 |         if (imageData.startsWith('data:')) {
415 |           const response = await fetch(imageData)
416 |           blob = await response.blob()
417 |         } else {
418 |           const response = await fetch(imageData)
419 |           blob = await response.blob()
420 |         }
421 |         const url = window.URL.createObjectURL(blob)
422 |         const link = document.createElement('a')
423 |         link.href = url
424 |         link.download = `comic-panel-${index + 1}.png`
425 |         document.body.appendChild(link)
426 |         link.click()
427 |         document.body.removeChild(link)
428 |         window.URL.revokeObjectURL(url)
429 |       } catch (error) { }
430 |     }
431 |   }
432 | 
433 |   const renderPanel = (index: number) => (
434 |     <div 
435 |       id={`panel-${index}`}
436 |       className="relative h-full bg-gray-700 flex items-center justify-center overflow-hidden"
437 |       style={{
438 |         border: `${frameThickness}px solid white`,
439 |         boxSizing: 'border-box'
440 |       }}
441 |     >
442 |       {images[index].src ? (
443 |         <div 
444 |           className="relative w-full h-full cursor-move"
445 |           onMouseDown={(e) => handleMouseDown(index, e)}
446 |           onMouseMove={(e) => handleMouseMove(index, e)}
447 |           onMouseUp={handleMouseUp}
448 |           onMouseLeave={handleMouseUp}
449 |         >
450 |           <div
451 |             style={{
452 |               transform: `translate(${images[index].x}px, ${images[index].y}px) scale(${images[index].zoom})`,
453 |               transition: 'transform 0.1s',
454 |               width: '100%',
455 |               height: '100%',
456 |               backgroundImage: `url(${images[index].src})`,
457 |               backgroundSize: 'cover',
458 |               backgroundPosition: 'center',
459 |             }}
460 |           />
461 |           {!isPrinting && (
462 |             <div className="absolute bottom-2 right-2 flex space-x-2">
463 |               <Button 
464 |                 size="sm" 
465 |                 variant="secondary" 
466 |                 onClick={() => handleZoom(index, 'in')}
467 |                 aria-label="Zoom in"
468 |               >
469 |                 <ZoomIn className="h-4 w-4" />
470 |               </Button>
471 |               <Button 
472 |                 size="sm" 
473 |                 variant="secondary" 
474 |                 onClick={() => handleZoom(index, 'out')}
475 |                 aria-label="Zoom out"
476 |               >
477 |                 <ZoomOut className="h-4 w-4" />
478 |               </Button>
479 |               <Button
480 |                 size="sm"
481 |                 variant="secondary"
482 |                 onClick={() => handleReplaceImage(index)}
483 |                 aria-label="Replace image"
484 |               >
485 |                 <RefreshCw className="h-4 w-4" />
486 |               </Button>
487 |               <Button
488 |                 size="sm"
489 |                 variant="secondary"
490 |                 onClick={() => handleSaveImage(index)}
491 |                 aria-label="Save image"
492 |               >
493 |                 <Save className="h-4 w-4" />
494 |               </Button>
495 |             </div>
496 |           )}
497 |         </div>
498 |       ) : (
499 |         <label htmlFor={`upload-${index}`} className="cursor-pointer flex flex-col items-center">
500 |           <ImageIcon className="w-8 h-8 mb-2" />
501 |           <span>Upload Image</span>
502 |         </label>
503 |       )}
504 |       <input
505 |         id={`upload-${index}`}
506 |         type="file"
507 |         accept="image/*"
508 |         className="sr-only"
509 |         onChange={(e) => handleImageUpload(index, e)}
510 |         ref={(el) => {fileInputRefs.current[index] = el}}
511 |       />
512 |       {bubbleStates.filter(state => state.panelIndex === index).map((state) => (
513 |         <SpeechBubble
514 |           key={state.id}
515 |           state={state}
516 |           onSelect={setSelectedBubble}
517 |           onStateChange={updateBubbleState}
518 |           onDelete={removeSelectedBubble}
519 |           isPrinting={isPrinting}
520 |         />
521 |       ))}
522 |       {!isPrinting && (
523 |         <div className="absolute bottom-2 left-2 flex space-x-2">
524 |           <Button
525 |             size="sm"
526 |             variant="secondary"
527 |             onClick={() => addNewBubble(index)}
528 |           >
529 |             <Plus className="h-4 w-4 mr-2" />
530 |             Add Bubble
531 |           </Button>
532 |           <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
533 |             <DialogTrigger asChild>
534 |               <Button
535 |                 size="sm"
536 |                 variant="secondary"
537 |                 onClick={() => {
538 |                   setActiveImagePanel(index)
539 |                   setIsDialogOpen(true)
540 |                 }}
541 |               >
542 |                 <Plus className="h-4 w-4 mr-2" />
543 |                 Generate Image
544 |               </Button>
545 |             </DialogTrigger>
546 |             <DialogContent>
547 |               <DialogHeader>
548 |                 <DialogTitle>Generate Image</DialogTitle>
549 |               </DialogHeader>
550 |               <div className="grid gap-4 py-4">
551 |                 <div className="grid grid-cols-4 items-center gap-4">
552 |                   <Label htmlFor="positive_prompt" className="text-right">
553 |                     Prompt
554 |                   </Label>
555 |                   <textarea
556 |                     id="positive_prompt"
557 |                     value={imageInputs.positive_prompt}
558 |                     onChange={(e) => handleInputChange('positive_prompt', e.target.value)}
559 |                     className="col-span-3 h-18 resize-none"
560 |                     rows={3}
561 |                   />
562 |                 </div>
563 |                 <div className="grid grid-cols-4 items-center gap-4">
564 |                   <Label htmlFor="seed" className="text-right">
565 |                     Seed
566 |                   </Label>
567 |                   <Input
568 |                     id="seed"
569 |                     type="number"
570 |                     value={imageInputs.seed}
571 |                     onChange={(e) => handleInputChange('seed', parseInt(e.target.value))}
572 |                     className="col-span-3"
573 |                   />
574 |                 </div>
575 |                 <div className="grid grid-cols-4 items-center gap-4">
576 |                   <Label htmlFor="steps" className="text-right">
577 |                     Steps
578 |                   </Label>
579 |                   <Input
580 |                     id="steps"
581 |                     type="number"
582 |                     value={imageInputs.steps}
583 |                     onChange={(e) => handleInputChange('steps', parseInt(e.target.value))}
584 |                     className="col-span-3"
585 |                   />
586 |                 </div>
587 |                 <div className="grid grid-cols-4 items-center gap-4">
588 |                   <Label htmlFor="guidance" className="text-right">
589 |                     Guidance
590 |                   </Label>
591 |                   <Input
592 |                     id="guidance"
593 |                     type="number"
594 |                     step="0.1"
595 |                     value={imageInputs.guidance}
596 |                     onChange={(e) => handleInputChange('guidance', parseFloat(e.target.value))}
597 |                     className="col-span-3"
598 |                   />
599 |                 </div>
600 |                 <div className="grid grid-cols-4 items-center gap-4">
601 |                   <Label htmlFor="lora_file" className="text-right">
602 |                     Lora File
603 |                   </Label>
604 |                   <Select
605 |                     value={imageInputs.lora_file}
606 |                     onValueChange={(value) => handleInputChange('lora_file', value)}
607 |                   >
608 |                     <SelectTrigger className="col-span-3">
609 |                       <SelectValue placeholder="Select Lora File" />
610 |                     </SelectTrigger>
611 |                     <SelectContent>
612 |                       {loraOptions.map((option) => (
613 |                         <SelectItem key={option} value={option}>
614 |                           {option}
615 |                         </SelectItem>
616 |                       ))}
617 |                     </SelectContent>
618 |                   </Select>
619 |                 </div>
620 |                 <div className="grid grid-cols-4 items-center gap-4">
621 |                   <Label htmlFor="lora_strength_model" className="text-right">
622 |                     Lora Strength Model
623 |                   </Label>
624 |                   <Input
625 |                     id="lora_strength_model"
626 |                     type="number"
627 |                     step="0.1"
628 |                     value={imageInputs.lora_strength_model}
629 |                     onChange={(e) => handleInputChange('lora_strength_model', parseFloat(e.target.value))}
630 |                     className="col-span-3"
631 |                   />
632 |                 </div>
633 |                 <div className="grid grid-cols-4 items-center gap-4">
634 |                   <Label htmlFor="lora_strength_clip" className="text-right">
635 |                     Lora Strength Clip
636 |                   </Label>
637 |                   <Input
638 |                     id="lora_strength_clip"
639 |                     type="number"
640 |                     step="0.1"
641 |                     value={imageInputs.lora_strength_clip}
642 |                     onChange={(e) => handleInputChange('lora_strength_clip', parseFloat(e.target.value))}
643 |                     className="col-span-3"
644 |                   />
645 |                 </div>
646 |                 <div className="grid grid-cols-4 items-center gap-4">
647 |                   <Label htmlFor="sampler_name" className="text-right">
648 |                     Sampler Name
649 |                   </Label>
650 |                   <Input
651 |                     id="sampler_name"
652 |                     value={imageInputs.sampler_name}
653 |                     onChange={(e) => handleInputChange('sampler_name', e.target.value)}
654 |                     className="col-span-3"
655 |                   />
656 |                 </div>
657 |                 <div className="grid grid-cols-4 items-center gap-4">
658 |                   <Label htmlFor="scheduler" className="text-right">
659 |                     Scheduler
660 |                   </Label>
661 |                   <Input
662 |                     id="scheduler"
663 |                     value={imageInputs.scheduler}
664 |                     onChange={(e) => handleInputChange('scheduler', e.target.value)}
665 |                     className="col-span-3"
666 |                   />
667 |                 </div>
668 |                 <div className="grid grid-cols-4 items-center gap-4">
669 |                   <Label htmlFor="width" className="text-right">
670 |                     Width
671 |                   </Label>
672 |                   <Input
673 |                     id="width"
674 |                     type="number"
675 |                     value={imageInputs.width}
676 |                     onChange={(e) => handleInputChange('width', parseInt(e.target.value))}
677 |                     className="col-span-3"
678 |                   />
679 |                 </div>
680 |                 <div className="grid grid-cols-4 items-center gap-4">
681 |                   <Label htmlFor="height" className="text-right">
682 |                     Height
683 |                   </Label>
684 |                   <Input
685 |                     id="height"
686 |                     type="number"
687 |                     value={imageInputs.height}
688 |                     onChange={(e) => handleInputChange('height', parseInt(e.target.value))}
689 |                     className="col-span-3"
690 |                   />
691 |                 </div>
692 |               </div>
693 |               <Button onClick={handleGenerateImage} disabled={isGenerating}>
694 |                 {isGenerating ? 'Generating...' : 'Generate'}
695 |               </Button>
696 |             </DialogContent>
697 |           </Dialog>
698 |         </div>
699 |       )}
700 |     </div>
701 |   )
702 | 
703 |   const selectedState = bubbleStates.find(state => state.id === selectedBubble)
704 | 
705 |   return (
706 |     <div className="flex h-screen bg-gray-900 text-white">
707 |       <div className="flex-1 flex flex-col">
708 |         <Card className="flex-1 bg-gray-800 border-hidden" ref={canvasRef}>
709 |           <ResizablePanelGroup direction="vertical" className="h-full">
710 |             <ResizablePanel defaultSize={50}>
711 |               <ResizablePanelGroup direction="horizontal">
712 |                 <ResizablePanel defaultSize={50}>
713 |                   {renderPanel(0)}
714 |                 </ResizablePanel>
715 |                 <ResizableHandle />
716 |                 <ResizablePanel defaultSize={50}>
717 |                   {renderPanel(1)}
718 |                 </ResizablePanel>
719 |               </ResizablePanelGroup>
720 |             </ResizablePanel>
721 |             <ResizableHandle />
722 |             <ResizablePanel defaultSize={50}>
723 |               <ResizablePanelGroup direction="horizontal">
724 |                 <ResizablePanel defaultSize={50}>
725 |                   {renderPanel(2)}
726 |                 </ResizablePanel>
727 |                 <ResizableHandle />
728 |                 <ResizablePanel defaultSize={50}>
729 |                   {renderPanel(3)}
730 |                 </ResizablePanel>
731 |               </ResizablePanelGroup>
732 |             </ResizablePanel>
733 |           </ResizablePanelGroup>
734 |         </Card>
735 |       </div>
736 |       <div className="w-64 bg-white p-4 shadow-lg space-y-4 text-black overflow-y-auto flex flex-col h-full">
737 |         <h2 className="text-lg font-bold">Comic Settings</h2>
738 |         <div>
739 |           <label className="block text-sm font-medium text-gray-700">Frame Thickness</label>
740 |           <div className="flex items-center space-x-2">
741 |             <Slider
742 |               min={0}
743 |               max={10}
744 |               step={1}
745 |               value={[frameThickness]}
746 |               onValueChange={(value) => setFrameThickness(value[0])}
747 |               className="w-full"
748 |             />
749 |             <input
750 |               type="number"
751 |               min={0}
752 |               max={10}
753 |               value={frameThickness}
754 |               onChange={(e) => setFrameThickness(Math.min(10, Math.max(0, Number(e.target.value))))}
755 |               className="w-16 p-1 border rounded"
756 |             />
757 |           </div>
758 |         </div>
759 |         <h2 className="text-lg font-bold">Bubble Settings</h2>
760 |         {selectedState ? (
761 |           <>
762 |             <div>
763 |               <label className="block text-sm font-medium text-gray-700">Font Size</label>
764 |               <div className="flex items-center space-x-2">
765 |                 <input
766 |                   type="range"
767 |                   min="12"
768 |                   max="120"
769 |                   value={selectedState.fontSize}
770 |                   onChange={(e) => updateBubbleState(selectedState.id, { fontSize: Number(e.target.value) })}
771 |                   className="w-full"
772 |                 />
773 |                 <input
774 |                   type="number"
775 |                   min="12"
776 |                   max="120"
777 |                   value={selectedState.fontSize}
778 |                   onChange={(e) => updateBubbleState(selectedState.id, { fontSize: Math.min(120, Math.max(12, Number(e.target.value))) })}
779 |                   className="w-16 p-1 border rounded"
780 |                 />
781 |               </div>
782 |             </div>
783 |             <div>
784 |               <label className="block text-sm font-medium text-gray-700">Font Family</label>
785 |               <select
786 |                 value={selectedState.fontFamily}
787 |                 onChange={(e) => updateBubbleState(selectedState.id, { fontFamily: e.target.value })}
788 |                 className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
789 |               >
790 |                 <option value="Arial">Arial</option>
791 |                 <option value="Verdana">Verdana</option>
792 |                 <option value="Times New Roman">Times New Roman</option>
793 |                 <option value="Courier">Courier</option>
794 |               </select>
795 |             </div>
796 |             <div>
797 |               <label className="block text-sm font-medium text-gray-700">Arrow Position</label>
798 |               <Slider
799 |                 min={0}
800 |                 max={1}
801 |                 step={0.01}
802 |                 value={[selectedState.arrowPosition]}
803 |                 onValueChange={(value) => updateBubbleState(selectedState.id, { arrowPosition: value[0] })}
804 |                 className="w-full"
805 |               />
806 |             </div>
807 |             <div>
808 |               <label className="block text-sm font-medium text-gray-700">Arrow Rotation</label>
809 |               <Slider
810 |                 min={0}
811 |                 max={360}
812 |                 step={1}
813 |                 value={[selectedState.arrowRotation]}
814 |                 onValueChange={(value) => updateBubbleState(selectedState.id, { arrowRotation: value[0] })}
815 |                 className="w-full"
816 |               />
817 |             </div>
818 |             <div>
819 |               <label className="block text-sm font-medium text-gray-700">Arrow Offset</label>
820 |               <div className="flex space-x-2">
821 |                 <Button
822 |                   size="sm"
823 |                   variant="outline"
824 |                   onClick={() => updateBubbleState(selectedState.id, { arrowOffsetX: selectedState.arrowOffsetX - 1 })}
825 |                 >
826 |                   <ArrowLeft className="h-4 w-4" />
827 |                 </Button>
828 |                 <Button
829 |                   size="sm"
830 |                   variant="outline"
831 |                   onClick={() => updateBubbleState(selectedState.id, { arrowOffsetX: selectedState.arrowOffsetX + 1 })}
832 |                 >
833 |                   <ArrowRight className="h-4 w-4" />
834 |                 </Button>
835 |                 <Button
836 |                   size="sm"
837 |                   variant="outline"
838 |                   onClick={() => updateBubbleState(selectedState.id, { arrowOffsetY: selectedState.arrowOffsetY - 1 })}
839 |                 >
840 |                   <ArrowUp className="h-4 w-4" />
841 |                 </Button>
842 |                 <Button
843 |                   size="sm"
844 |                   variant="outline"
845 |                   onClick={() => updateBubbleState(selectedState.id, { arrowOffsetY: selectedState.arrowOffsetY + 1 })}
846 |                 >
847 |                   <ArrowDown className="h-4 w-4" />
848 |                 </Button>
849 |               </div>
850 |             </div>
851 |             <div>
852 |               <label className="block text-sm font-medium text-gray-700">Arrow Color</label>
853 |               <div className="flex items-center space-x-2 mt-1">
854 |                 <span>Black</span>
855 |                 <Switch
856 |                   checked={selectedState.arrowColor === 'white'}
857 |                   onCheckedChange={(checked) => updateBubbleState(selectedState.id, { arrowColor: checked ? 'white' : 'black' })}
858 |                 />
859 |                 <span>White</span>
860 |               </div>
861 |             </div>
862 |             <div>
863 |               <label className="block text-sm font-medium text-gray-700">Arrow Size</label>
864 |               <Slider
865 |                 min={10}
866 |                 max={50}
867 |                 step={1}
868 |                 value={[selectedState.arrowSize]}
869 |                 onValueChange={(value) => updateBubbleState(selectedState.id, { arrowSize: value[0] })}
870 |                 className="w-full"
871 |               />
872 |             </div>
873 |           </>
874 |         ) : (
875 |           <p>Select a bubble to edit its properties</p>
876 |         )}
877 |         <Button onClick={() => handleExport('pdf')} className="w-full mb-2">
878 |           <Printer className="h-4 w-4 mr-2" />
879 |           Export as PDF
880 |         </Button>
881 |         <Button onClick={() => handleExport('png')} className="w-full">
882 |           <Download className="h-4 w-4 mr-2" />
883 |           Export as PNG
884 |         </Button>
885 |         <div className="flex-grow"></div>
886 |         <div className="flex flex-col items-center mt-auto">
887 |           <br />
888 |           <a href="https://github.com/camenduru/react-comic" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">🌐 Open Source</a>
889 |           <br />
890 |           <a href="https://tost.ai/" className="flex items-center text-yellow-600 hover:text-yellow-800 transition-colors">🥪 TostAI Manga Creator</a>
891 |           <br />
892 |           <a href="https://runpod.io/" className="flex items-center text-purple-600 hover:text-purple-800 transition-colors">
893 |             <svg
894 |               className="mr-2"
895 |               focusable="false"
896 |               aria-hidden="true"
897 |               viewBox="0 0 100 200"
898 |               style={{ height: '32px', width: '32px', fill: 'currentColor' }}
899 |             >
900 |               <g transform="translate(0, 10) scale(0.8)">
901 |                 <path d="M74.5 51.1c-25.4 14.9-27 16-29.6 20.2-1.8 3-1.9 5.3-1.9 32.3 0 21.7.3 29.4 1.3 30.6 1.9 2.5 46.7 27.9 48.5 27.6 1.5-.3 1.7-3.1 2-27.7.2-21.9 0-27.8-1.1-29.5-.8-1.2-9.9-6.8-20.2-12.6-10.3-5.8-19.4-11.5-20.2-12.7-1.8-2.6-.9-5.9 1.8-7.4 1.6-.8 6.3 0 21.8 4C87.8 78.7 98 81 99.6 81c4.4 0 49.9-25.9 49.9-28.4 0-1.6-3.4-2.8-24-8.2-13.2-3.5-25.1-6.3-26.5-6.3-1.4.1-12.4 5.9-24.5 13z" />
902 |                 <path d="m137.2 68.1-3.3 2.1 6.3 3.7c3.5 2 6.3 4.3 6.3 5.1 0 .9-8 6.1-19.4 12.6-10.6 6-20 11.9-20.7 12.9-1.2 1.6-1.4 7.2-1.2 29.4.3 24.8.5 27.6 2 27.9 1.8.3 46.6-25.1 48.6-27.6.9-1.2 1.2-8.8 1.2-30.2s-.3-29-1.2-30.2c-1.6-1.9-12.1-7.8-13.9-7.8-.8 0-2.9 1-4.7 2.1z" />
903 |               </g>
904 |             </svg>
905 |             Powered By RunPod
906 |           </a>
907 |         </div>
908 |       </div>
909 |     </div>
910 |   )
911 | }


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