87 | >(({ className, ...props }, ref) => (
88 | [role=checkbox]]:translate-y-[2px]",
92 | className
93 | )}
94 | {...props}
95 | />
96 | ))
97 | TableCell.displayName = "TableCell"
98 |
99 | const TableCaption = React.forwardRef<
100 | HTMLTableCaptionElement,
101 | React.HTMLAttributes
102 | >(({ className, ...props }, ref) => (
103 | {
26 | const est = await navigator.storage?.estimate?.();
27 | const persisted = await navigator.storage?.persisted?.();
28 | return {
29 | usage: est?.usage ?? 0,
30 | quota: est?.quota ?? 0,
31 | persisted: !!persisted,
32 | };
33 | }
34 |
35 | /**
36 | * Requests persistent storage if not already granted.
37 | * Returns true if the origin is persisted after this call.
38 | */
39 | export async function ensurePersistentStorage(
40 | confirmPrompt?: () => Promise | boolean
41 | ): Promise {
42 | if (!('storage' in navigator) || !navigator.storage?.persist) return false;
43 |
44 | const already = await navigator.storage.persisted?.();
45 | if (already) return true;
46 |
47 | // Ask the user. You can replace this with a custom modal.
48 | let okToAsk = true;
49 | if (confirmPrompt) {
50 | okToAsk = await confirmPrompt();
51 | } else if (typeof window !== 'undefined' && 'confirm' in window) {
52 | okToAsk = window.confirm(
53 | 'Allow this app to use persistent storage? This helps store more images and prevents unexpected deletion.'
54 | );
55 | }
56 |
57 | if (!okToAsk) return false;
58 |
59 | const granted = await navigator.storage.persist();
60 | return !!granted;
61 | }
62 |
63 | /**
64 | * Preflight: checks if (current usage + incomingBytes) fits in current quota.
65 | * If not, tries to get persistent storage once and rechecks.
66 | * Returns the final QuotaInfo and whether it looks safe to proceed.
67 | */
68 | export async function preflightQuotaOrPersist(incomingBytes: number, confirmPrompt?: () => Promise | boolean) {
69 | let info = await getQuotaInfo();
70 | const headroom = 10 * 1024 * 1024; // 10MB headroom
71 |
72 | // If storage is already persistent, we just check if there's space.
73 | // No need to prompt.
74 | if (info.persisted) {
75 | const canProceed = info.usage + incomingBytes <= info.quota - headroom;
76 | return { info, canProceed, requestedPersist: false };
77 | }
78 |
79 | // If not persistent, check if the new files fit in the current temporary quota.
80 | const fitsInTemporaryQuota = info.usage + incomingBytes <= info.quota - headroom;
81 | if (fitsInTemporaryQuota) {
82 | return { info, canProceed: true, requestedPersist: false };
83 | }
84 |
85 | // If we're here, it means storage is NOT persistent AND there's not enough space.
86 | // This is the only time we should ask the user for permission.
87 | const requestedAndGranted = await ensurePersistentStorage(confirmPrompt);
88 |
89 | // Re-check quota info after potentially getting persistence.
90 | info = await getQuotaInfo();
91 | const fitsAfterRequest = info.usage + incomingBytes <= info.quota - headroom;
92 |
93 | return { info, canProceed: fitsAfterRequest, requestedPersist: requestedAndGranted };
94 | }
--------------------------------------------------------------------------------
/src/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 |
5 | import { Drawer as DrawerPrimitive } from "vaul"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Drawer = ({
10 | shouldScaleBackground = true,
11 | ...props
12 | }: React.ComponentProps) => (
13 | ,
28 | React.ComponentPropsWithoutRef
29 | >(({ className, ...props }, ref) => (
30 | ,
40 | React.ComponentPropsWithoutRef
41 | >(({ className, children, ...props }, ref) => (
42 |
43 |
52 |
53 | {children}
54 |
55 |
56 | ))
57 | DrawerContent.displayName = "DrawerContent"
58 |
59 | const DrawerHeader = ({
60 | className,
61 | ...props
62 | }: React.HTMLAttributes) => (
63 |
67 | )
68 | DrawerHeader.displayName = "DrawerHeader"
69 |
70 | const DrawerFooter = ({
71 | className,
72 | ...props
73 | }: React.HTMLAttributes) => (
74 |
78 | )
79 | DrawerFooter.displayName = "DrawerFooter"
80 |
81 | const DrawerTitle = React.forwardRef<
82 | React.ElementRef,
83 | React.ComponentPropsWithoutRef
84 | >(({ className, ...props }, ref) => (
85 | ,
98 | React.ComponentPropsWithoutRef
99 | >(({ className, ...props }, ref) => (
100 | ("lastModified");
22 | const [sortOrder, setSortOrder] = React.useState("desc");
23 | const [filterQuery, setFilterQuery] = React.useState("");
24 | const [advancedSearchState, setAdvancedSearchState] = React.useState({
25 | prompt: "", negativePrompt: "", seed: "", cfg: "", steps: "", sampler: "", scheduler: "",
26 | });
27 |
28 | const debouncedFilterQuery = useDebounce(filterQuery, 300);
29 | const debouncedAdvancedSearch = useDebounce(advancedSearchState, 300);
30 |
31 | const processedImages = React.useMemo(() => {
32 | if (!selectedPath) return [];
33 | let filtered = allImageMetadata.filter(image => {
34 | const parentDirectory = image.webkitRelativePath.substring(0, image.webkitRelativePath.lastIndexOf("/"));
35 | return viewSubfolders
36 | ? image.webkitRelativePath.startsWith(selectedPath)
37 | : parentDirectory === selectedPath;
38 | });
39 |
40 | if (debouncedFilterQuery) {
41 | const lowerCaseQuery = debouncedFilterQuery.toLowerCase();
42 | filtered = filtered.filter(image =>
43 | image.name.toLowerCase().includes(lowerCaseQuery) ||
44 | (image.workflow && image.workflow.toLowerCase().includes(lowerCaseQuery))
45 | );
46 | }
47 |
48 | const isAdvancedSearchActive = Object.values(debouncedAdvancedSearch).some(v => v !== "");
49 | if (isAdvancedSearchActive) {
50 | filtered = filtered.filter(image =>
51 | checkMatch(image.prompt, debouncedAdvancedSearch.prompt) &&
52 | checkMatch(image.negativePrompt, debouncedAdvancedSearch.negativePrompt) &&
53 | checkMatch(image.seed, debouncedAdvancedSearch.seed) &&
54 | checkMatch(image.cfg, debouncedAdvancedSearch.cfg) &&
55 | checkMatch(image.steps, debouncedAdvancedSearch.steps) &&
56 | checkMatch(image.sampler, debouncedAdvancedSearch.sampler) &&
57 | checkMatch(image.scheduler, debouncedAdvancedSearch.scheduler)
58 | );
59 | }
60 |
61 | filtered.sort((a, b) => {
62 | const compareA = a[sortBy];
63 | const compareB = b[sortBy];
64 | if (compareA === compareB) return 0;
65 | return sortOrder === 'asc' ? (compareA > compareB ? 1 : -1) : (compareA < compareB ? 1 : -1);
66 | });
67 | return filtered;
68 | }, [allImageMetadata, selectedPath, viewSubfolders, debouncedFilterQuery, debouncedAdvancedSearch, sortBy, sortOrder]);
69 |
70 | const handleAdvancedSearchChange = (newState: Partial) => {
71 | setAdvancedSearchState(prev => ({ ...prev, ...newState }));
72 | };
73 |
74 | const handleAdvancedSearchReset = () => {
75 | setAdvancedSearchState({ prompt: "", negativePrompt: "", seed: "", cfg: "", steps: "", sampler: "", scheduler: "" });
76 | };
77 |
78 | return {
79 | processedImages,
80 | viewSubfolders,
81 | setViewSubfolders,
82 | sortBy,
83 | setSortBy,
84 | sortOrder,
85 | setSortOrder,
86 | filterQuery,
87 | setFilterQuery,
88 | advancedSearchState,
89 | handleAdvancedSearchChange,
90 | handleAdvancedSearchReset,
91 | };
92 | }
--------------------------------------------------------------------------------
/src/components/app-header.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | import { ArrowDownWideNarrow, ArrowUpNarrowWide } from "lucide-react";
6 |
7 | import { ThemeToggle } from "@/components/theme-toggle";
8 | import { Button } from "@/components/ui/button";
9 | import { Label } from "@/components/ui/label";
10 | import { Progress } from "@/components/ui/progress";
11 | import {
12 | Select,
13 | SelectContent,
14 | SelectItem,
15 | SelectTrigger,
16 | SelectValue,
17 | } from "@/components/ui/select";
18 | import { Slider } from "@/components/ui/slider";
19 |
20 | type SortBy = "lastModified" | "size";
21 | type SortOrder = "asc" | "desc";
22 |
23 | interface AppHeaderProps {
24 | isLoading: boolean;
25 | progress: number;
26 | gridCols: number;
27 | onGridColsChange: (cols: number) => void;
28 | sortBy: SortBy;
29 | onSortByChange: (sortBy: SortBy) => void;
30 | sortOrder: SortOrder;
31 | onSortOrderChange: (sortOrder: SortOrder) => void;
32 | }
33 |
34 | const MIN_COLS = 1;
35 | const MAX_COLS = 12;
36 |
37 | export function AppHeader({
38 | isLoading,
39 | progress,
40 | gridCols,
41 | onGridColsChange,
42 | sortBy,
43 | onSortByChange,
44 | sortOrder,
45 | onSortOrderChange,
46 | }: AppHeaderProps) {
47 | const handleSliderChange = (value: number[]) => {
48 | const newGridCols = MAX_COLS + MIN_COLS - value[0];
49 | onGridColsChange(newGridCols);
50 | };
51 |
52 | const sliderValue = MAX_COLS + MIN_COLS - gridCols;
53 |
54 | return (
55 |
114 | );
115 | }
--------------------------------------------------------------------------------
/src/components/file-tree.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | import { FileImage, Folder, FolderOpen } from "lucide-react";
6 |
7 | import {
8 | Collapsible,
9 | CollapsibleContent,
10 | CollapsibleTrigger,
11 | } from "@/components/ui/collapsible";
12 | import { FileTreeNode } from "@/lib/file-tree";
13 | import { cn } from "@/lib/utils";
14 |
15 | interface FileTreeProps {
16 | tree: FileTreeNode;
17 | selectedPath: string;
18 | onSelectPath: (path: string) => void;
19 | selectedImageId: number | null;
20 | onSelectFile: (id: number) => void;
21 | }
22 |
23 | export function FileTree({ tree, selectedPath, onSelectPath, selectedImageId, onSelectFile }: FileTreeProps) {
24 | return (
25 |
26 |
34 | );
35 | }
36 |
37 | interface RecursiveTreeProps {
38 | node: FileTreeNode;
39 | selectedPath: string;
40 | onSelectPath: (path: string) => void;
41 | selectedImageId: number | null;
42 | onSelectFile: (id: number) => void;
43 | }
44 |
45 | function RecursiveTree({
46 | node,
47 | selectedPath,
48 | onSelectPath,
49 | selectedImageId,
50 | onSelectFile,
51 | }: RecursiveTreeProps) {
52 | const [isOpen, setIsOpen] = React.useState(false);
53 | const isFolderSelected = selectedPath === node.path;
54 | const isParentOfSelected = selectedPath.startsWith(`${node.path}/`);
55 |
56 | React.useEffect(() => {
57 | if (isParentOfSelected) {
58 | setIsOpen(true);
59 | }
60 | }, [selectedPath, isParentOfSelected]);
61 |
62 | if (node.type === 'file') {
63 | const isFileSelected = selectedImageId === node.id;
64 | return (
65 | onSelectFile(node.id!)}
72 | >
73 | {node.name}
75 |
76 | );
77 | }
78 |
79 | // If the folder has no children, render it as a simple, non-collapsible item.
80 | if (node.children.length === 0) {
81 | return (
82 | onSelectPath(node.path)}
89 | >
90 | {node.name}
92 |
93 | );
94 | }
95 |
96 | // If the folder has children, render it as a collapsible item.
97 | return (
98 |
99 | onSelectPath(node.path)}
106 | >
107 | {isOpen ? (
108 | {node.name}
113 |
114 |
115 | {node.children.map((child) => (
116 |
126 |
127 | );
128 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ComfyViewer
2 |
3 | **A local-first, in-browser image and metadata viewer for your AI-generated images, with a special focus on ComfyUI workflows.**
4 |
5 | [](https://opensource.org/licenses/Apache-2.0)
6 |
7 | ComfyViewer is a tool designed for artists, developers, and enthusiasts who work with AI image generation tools. It allows you to load an entire folder of images directly into your browser, where you can browse, search, and inspect the rich metadata embedded within them. Your files are never uploaded to a server; all processing and storage happens locally on your machine using your browser's own database.
8 |
9 | ## Screenshots
10 | 
11 | *ComfyViewer*
12 |
13 | 
14 | *Full image view*
15 |
16 | 
17 | *Workflow View*
18 |
19 | ## ✨ Features
20 |
21 | - **100% Local & Private**: Your images are processed and stored in your browser's IndexedDB. They never leave your computer.
22 | - **Efficient & Fast**: Built with performance in mind, using lazy loading for images and an indexed database for quick searches.
23 | - **Rich Metadata Parsing**: Automatically extracts and displays detailed generation data from ComfyUI-generated images, including prompts, seeds, samplers, models, LoRAs, and the full JSON workflow.
24 | - **Workflow View**: Quickly view the workflow used to generate the image
25 | - **Advanced Search & Filtering**: Quickly find images by filtering on any metadata field, such as prompt keywords, model names, or sampler types.
26 | - **Familiar File-Tree Interface**: Navigate your image folders with a classic file-tree structure, just like on your desktop.
27 | - **Customizable Layout**: Features resizable panels and a customizable grid view to tailor the interface to your liking.
28 | - **Arrow Keys Support**: Quickly cycle through your images to analyze quickly
29 |
30 | ## 🛠️ Tech Stack
31 |
32 | ComfyViewer is built with a modern, simple, and effective tech stack:
33 |
34 | - **Framework**: [Next.js](https://nextjs.org/) (App Router)
35 | - **Language**: [TypeScript](https://www.typescriptlang.org/)
36 | - **Styling**: [Tailwind CSS](https://tailwindcss.com/)
37 | - **UI Components**: [Shadcn/UI](https://ui.shadcn.com/)
38 | - **Local Storage**: [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) for all image and metadata storage.
39 | - **Icons**: [Lucide React](https://lucide.dev/)
40 |
41 | ## 🚀 Getting Started
42 |
43 | To run ComfyViewer on your local machine, follow these steps.
44 |
45 | ### Prerequisites
46 |
47 | - [Node.js](https://nodejs.org/en/) (v18 or later is recommended)
48 | - A package manager like `npm`, `yarn`, `pnpm`, or `bun`.
49 |
50 | ### Installation
51 |
52 | In your project terminal, clone ComfyViewer:
53 | ```bash
54 | git clone https://github.com/christian-saldana/ComfyViewer
55 | ```
56 |
57 | Then install the necessary dependencies:
58 | ```bash
59 | npm install
60 | # or
61 | yarn install
62 | # or
63 | pnpm install
64 | ```
65 |
66 | ### Running the Application
67 |
68 | Once the dependencies are installed, run the server:
69 | ```bash
70 | npm run dev
71 | ```
72 | or
73 | ```bash
74 | npm run build
75 | npm run start
76 | ```
77 |
78 |
79 | Now, open [http://localhost:3000](http://localhost:3000) in your browser to start using ComfyViewer.
80 |
81 | ## 📖 How to Use
82 |
83 | 1. Once the application is running, click the **"Select Folder"** button.
84 | 2. Your browser's file dialog will open. Choose a directory that contains your AI-generated images.
85 | 3. The application will process the folder, extract metadata, and store everything in your browser. This might take a moment for very large folders.
86 | 4. Once loaded, you can browse your images, click on them to view metadata, and use the search tools to filter your collection.
87 |
88 | ## 🤝 Contributing
89 |
90 | Contributions are welcome! If you have ideas for new features, bug fixes, or improvements, please feel free to open an issue or submit a pull request.
91 |
92 | ## 📄 License
93 |
94 | This project is open-source and available under the license specified in the [LICENSE](LICENSE) file.
95 |
--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 |
5 | import * as DialogPrimitive from "@radix-ui/react-dialog"
6 | import { X } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 |
10 | const Dialog = DialogPrimitive.Root
11 |
12 | const DialogTrigger = DialogPrimitive.Trigger
13 |
14 | const DialogPortal = DialogPrimitive.Portal
15 |
16 | const DialogClose = DialogPrimitive.Close
17 |
18 | const DialogOverlay = React.forwardRef<
19 | React.ElementRef,
20 | React.ComponentPropsWithoutRef
21 | >(({ className, ...props }, ref) => (
22 | ,
35 | React.ComponentPropsWithoutRef
36 | >(({ className, children, ...props }, ref) => (
37 |
38 |
47 | {children}
48 |
49 |
51 |
52 |
53 | ))
54 | DialogContent.displayName = DialogPrimitive.Content.displayName
55 |
56 | const DialogHeader = ({
57 | className,
58 | ...props
59 | }: React.HTMLAttributes) => (
60 |
67 | )
68 | DialogHeader.displayName = "DialogHeader"
69 |
70 | const DialogFooter = ({
71 | className,
72 | ...props
73 | }: React.HTMLAttributes) => (
74 |
81 | )
82 | DialogFooter.displayName = "DialogFooter"
83 |
84 | const DialogTitle = React.forwardRef<
85 | React.ElementRef,
86 | React.ComponentPropsWithoutRef
87 | >(({ className, ...props }, ref) => (
88 | ,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 |
77 |
78 |
79 | Per Page:
80 |
81 | onItemsPerPageChange(Number(value))}
84 | >
85 |
86 |
88 |
89 | {itemsPerPageOptions.map((option) => (
90 |
91 | {option}
92 |
93 | ))}
94 |
95 |
96 |
97 |
98 |
99 |
100 | {
103 | e.preventDefault();
104 | onPageChange(Math.max(1, currentPage - 1));
105 | }}
106 | className={
107 | currentPage === 1 ? "pointer-events-none opacity-50" : ""
108 | }
109 | />
110 |
111 | {paginationItems.map((item, index) => (
112 |
113 | {item === "..." ? (
114 | {
119 | e.preventDefault();
120 | onPageChange(item as number);
121 | }}
122 | isActive={currentPage === item}
123 | >
124 | {item}
125 |
126 | )}
127 |
128 | ))}
129 |
130 | {
133 | e.preventDefault();
134 | onPageChange(Math.min(totalPages, currentPage + 1));
135 | }}
136 | className={
137 | currentPage === totalPages
138 | ? "pointer-events-none opacity-50"
139 | : ""
140 | }
141 | />
142 |
143 |
144 |
145 |
146 | Page {currentPage} of {totalPages}
147 |
148 |
,
21 | React.ComponentPropsWithoutRef
22 | >(({ className, ...props }, ref) => (
23 | ,
55 | VariantProps { }
56 |
57 | const SheetContent = React.forwardRef<
58 | React.ElementRef,
59 | SheetContentProps
60 | >(({ side = "right", className, children, ...props }, ref) => (
61 |
62 |
68 |
69 | Close
71 |
72 | {children}
73 |
74 |
75 | ))
76 | SheetContent.displayName = SheetPrimitive.Content.displayName
77 |
78 | const SheetHeader = ({
79 | className,
80 | ...props
81 | }: React.HTMLAttributes) => (
82 |
89 | )
90 | SheetHeader.displayName = "SheetHeader"
91 |
92 | const SheetFooter = ({
93 | className,
94 | ...props
95 | }: React.HTMLAttributes) => (
96 |
103 | )
104 | SheetFooter.displayName = "SheetFooter"
105 |
106 | const SheetTitle = React.forwardRef<
107 | React.ElementRef,
108 | React.ComponentPropsWithoutRef
109 | >(({ className, ...props }, ref) => (
110 | ,
120 | React.ComponentPropsWithoutRef
121 | >(({ className, ...props }, ref) => (
122 | = FieldPath
24 | > = {
25 | name: TName
26 | }
27 |
28 | const FormFieldContext = React.createContext(
29 | {} as FormFieldContextValue
30 | )
31 |
32 | const FormField = <
33 | TFieldValues extends FieldValues = FieldValues,
34 | TName extends FieldPath = FieldPath
35 | >({
36 | ...props
37 | }: ControllerProps) => {
38 | return (
39 |
40 |
42 | )
43 | }
44 |
45 | const useFormField = () => {
46 | const fieldContext = React.useContext(FormFieldContext)
47 | const itemContext = React.useContext(FormItemContext)
48 | const { getFieldState, formState } = useFormContext()
49 |
50 | const fieldState = getFieldState(fieldContext.name, formState)
51 |
52 | if (!fieldContext) {
53 | throw new Error("useFormField should be used within ")
54 | }
55 |
56 | const { id } = itemContext
57 |
58 | return {
59 | id,
60 | name: fieldContext.name,
61 | formItemId: `${id}-form-item`,
62 | formDescriptionId: `${id}-form-item-description`,
63 | formMessageId: `${id}-form-item-message`,
64 | ...fieldState,
65 | }
66 | }
67 |
68 | type FormItemContextValue = {
69 | id: string
70 | }
71 |
72 | const FormItemContext = React.createContext(
73 | {} as FormItemContextValue
74 | )
75 |
76 | const FormItem = React.forwardRef<
77 | HTMLDivElement,
78 | React.HTMLAttributes
79 | >(({ className, ...props }, ref) => {
80 | const id = React.useId()
81 |
82 | return (
83 |
84 |
85 |
86 | )
87 | })
88 | FormItem.displayName = "FormItem"
89 |
90 | const FormLabel = React.forwardRef<
91 | React.ElementRef,
92 | React.ComponentPropsWithoutRef
93 | >(({ className, ...props }, ref) => {
94 | const { error, formItemId } = useFormField()
95 |
96 | return (
97 | ,
109 | React.ComponentPropsWithoutRef
110 | >(({ ...props }, ref) => {
111 | const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
112 |
113 | return (
114 |
132 | >(({ className, ...props }, ref) => {
133 | const { formDescriptionId } = useFormField()
134 |
135 | return (
136 |
142 | )
143 | })
144 | FormDescription.displayName = "FormDescription"
145 |
146 | const FormMessage = React.forwardRef<
147 | HTMLParagraphElement,
148 | React.HTMLAttributes
149 | >(({ className, children, ...props }, ref) => {
150 | const { error, formMessageId } = useFormField()
151 | const body = error ? String(error?.message ?? "") : children
152 |
153 | if (!body) {
154 | return null
155 | }
156 |
157 | return (
158 |
164 | {body}
165 |
166 | )
167 | })
168 | FormMessage.displayName = "FormMessage"
169 |
170 | export {
171 | useFormField,
172 | Form,
173 | FormItem,
174 | FormLabel,
175 | FormControl,
176 | FormDescription,
177 | FormMessage,
178 | FormField,
179 | }
180 |
--------------------------------------------------------------------------------
/src/components/workflow-viewer.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | import { Expand, ZoomIn, ZoomOut } from "lucide-react";
6 | import { useTheme } from "next-themes";
7 | import ReactFlow, {
8 | Background,
9 | ConnectionLineType,
10 | Edge,
11 | Node,
12 | Panel,
13 | ReactFlowInstance,
14 | applyEdgeChanges,
15 | applyNodeChanges,
16 | EdgeChange,
17 | NodeChange,
18 | } from "reactflow";
19 |
20 | import "reactflow/dist/style.css";
21 | import { Button } from "@/components/ui/button";
22 | import {
23 | Tooltip,
24 | TooltipContent,
25 | TooltipProvider,
26 | TooltipTrigger,
27 | } from "@/components/ui/tooltip";
28 | import { ComfyUIWorkflow, parseComfyWorkflow } from "@/lib/comfy-workflow-parser";
29 |
30 | import ComfyNode from "./comfy-node";
31 |
32 | interface WorkflowViewerProps {
33 | workflowJson: Record | null;
34 | }
35 |
36 | export function WorkflowViewer({ workflowJson }: WorkflowViewerProps) {
37 | const [nodes, setNodes] = React.useState([]);
38 | const [edges, setEdges] = React.useState([]);
39 | const [reactFlowInstance, setReactFlowInstance] =
40 | React.useState(null);
41 | const { theme } = useTheme();
42 |
43 | React.useEffect(() => {
44 | if (!workflowJson) {
45 | setNodes([]);
46 | setEdges([]);
47 | return;
48 | }
49 | try {
50 | if (
51 | typeof workflowJson === "object" &&
52 | workflowJson !== null &&
53 | Object.values(workflowJson).some(
54 | (v) => v && typeof v === "object" && "class_type" in v
55 | )
56 | ) {
57 | const workflowNodes = Object.entries(workflowJson)
58 | .filter(
59 | ([k, v]) =>
60 | !isNaN(Number(k)) &&
61 | v &&
62 | typeof v === "object" &&
63 | "class_type" in v
64 | )
65 | .map(([k, v]) => [k, v]);
66 | const workflowObj = Object.fromEntries(workflowNodes);
67 | const { nodes: dagreNodes, edges: dagreEdges } = parseComfyWorkflow(
68 | workflowObj as unknown as ComfyUIWorkflow
69 | );
70 | dagreNodes.forEach((n) => (n.type = "comfy"));
71 | setNodes(dagreNodes);
72 | setEdges(dagreEdges);
73 | } else {
74 | setNodes([]);
75 | setEdges([]);
76 | }
77 | } catch {
78 | setNodes([]);
79 | setEdges([]);
80 | }
81 | }, [workflowJson]);
82 |
83 | const nodeTypes = React.useMemo(() => ({ comfy: ComfyNode }), []);
84 |
85 | const onNodesChange = React.useCallback(
86 | (changes: NodeChange[]) =>
87 | setNodes((nds) => applyNodeChanges(changes, nds)),
88 | [setNodes]
89 | );
90 | const onEdgesChange = React.useCallback(
91 | (changes: EdgeChange[]) =>
92 | setEdges((eds) => applyEdgeChanges(changes, eds)),
93 | [setEdges]
94 | );
95 |
96 | const handleFitView = () => reactFlowInstance?.fitView({ padding: 0.2 });
97 | const handleZoomIn = () => reactFlowInstance?.zoomIn();
98 | const handleZoomOut = () => reactFlowInstance?.zoomOut();
99 |
100 | return (
101 |
102 |
114 |
116 |
117 |
118 |
119 |
120 |
121 |
123 |
124 | Zoom In
125 |
126 |
127 |
128 |
129 |
131 |
132 | Zoom Out
133 |
134 |
135 |
136 |
137 |
139 |
140 | Fit View
141 |
142 |
143 |
144 |
145 |
146 |
,
18 | React.ComponentPropsWithoutRef
19 | >(({ className, ...props }, ref) => (
20 | ,
33 | React.ComponentPropsWithoutRef
34 | >(({ className, ...props }, ref) => (
35 |
36 |
46 | ))
47 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
48 |
49 | const AlertDialogHeader = ({
50 | className,
51 | ...props
52 | }: React.HTMLAttributes) => (
53 |
60 | )
61 | AlertDialogHeader.displayName = "AlertDialogHeader"
62 |
63 | const AlertDialogFooter = ({
64 | className,
65 | ...props
66 | }: React.HTMLAttributes) => (
67 |
74 | )
75 | AlertDialogFooter.displayName = "AlertDialogFooter"
76 |
77 | const AlertDialogTitle = React.forwardRef<
78 | React.ElementRef,
79 | React.ComponentPropsWithoutRef
80 | >(({ className, ...props }, ref) => (
81 | ,
91 | React.ComponentPropsWithoutRef
92 | >(({ className, ...props }, ref) => (
93 | ,
104 | React.ComponentPropsWithoutRef
105 | >(({ className, ...props }, ref) => (
106 | ,
116 | React.ComponentPropsWithoutRef
117 | >(({ className, ...props }, ref) => (
118 | ,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, ...props }, ref) => (
16 |
30 |
31 |
32 | {children}
33 |
34 |
35 |
36 | )
37 | }
38 |
39 | const CommandInput = React.forwardRef<
40 | React.ElementRef,
41 | React.ComponentPropsWithoutRef
42 | >(({ className, ...props }, ref) => (
43 |
44 |
54 | ))
55 |
56 | CommandInput.displayName = CommandPrimitive.Input.displayName
57 |
58 | const CommandList = React.forwardRef<
59 | React.ElementRef,
60 | React.ComponentPropsWithoutRef
61 | >(({ className, ...props }, ref) => (
62 | ,
73 | React.ComponentPropsWithoutRef
74 | >((props, ref) => (
75 | ,
86 | React.ComponentPropsWithoutRef
87 | >(({ className, ...props }, ref) => (
88 | ,
102 | React.ComponentPropsWithoutRef
103 | >(({ className, ...props }, ref) => (
104 | ,
114 | React.ComponentPropsWithoutRef
115 | >(({ className, ...props }, ref) => (
116 | ) => {
132 | return (
133 | ,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, children, ...props }, ref) => (
13 |
21 | {children}
22 |
24 | ))
25 | NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
26 |
27 | const NavigationMenuList = React.forwardRef<
28 | React.ElementRef,
29 | React.ComponentPropsWithoutRef
30 | >(({ className, ...props }, ref) => (
31 | ,
50 | React.ComponentPropsWithoutRef
51 | >(({ className, children, ...props }, ref) => (
52 |
57 | {children}{" "}
58 |
63 | ))
64 | NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
65 |
66 | const NavigationMenuContent = React.forwardRef<
67 | React.ElementRef,
68 | React.ComponentPropsWithoutRef
69 | >(({ className, ...props }, ref) => (
70 | ,
85 | React.ComponentPropsWithoutRef
86 | >(({ className, ...props }, ref) => (
87 |
88 |
97 | ))
98 | NavigationMenuViewport.displayName =
99 | NavigationMenuPrimitive.Viewport.displayName
100 |
101 | const NavigationMenuIndicator = React.forwardRef<
102 | React.ElementRef,
103 | React.ComponentPropsWithoutRef
104 | >(({ className, ...props }, ref) => (
105 |
113 |
114 |
115 | ))
116 | NavigationMenuIndicator.displayName =
117 | NavigationMenuPrimitive.Indicator.displayName
118 |
119 | export {
120 | navigationMenuTriggerStyle,
121 | NavigationMenu,
122 | NavigationMenuList,
123 | NavigationMenuItem,
124 | NavigationMenuContent,
125 | NavigationMenuTrigger,
126 | NavigationMenuLink,
127 | NavigationMenuIndicator,
128 | NavigationMenuViewport,
129 | }
130 |
--------------------------------------------------------------------------------
/src/components/image-gallery.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | import { ImageIcon } from "lucide-react";
6 |
7 | import { ComfyViewerDialog } from "@/components/comfy-viewer-dialog";
8 | import { GalleryPagination } from "@/components/gallery-pagination";
9 | import { LazyImage } from "@/components/lazy-image";
10 | import { StoredImage } from "@/lib/image-db";
11 | import { cn } from "@/lib/utils";
12 | import { ITEMS_PER_PAGE_OPTIONS } from "@/hooks/use-pagination"; // Import here
13 |
14 | interface ImageGalleryProps {
15 | files: StoredImage[];
16 | allImageMetadata: StoredImage[];
17 | selectedImageId: number | null;
18 | onSelectImage: (id: number) => void;
19 | gridCols: number;
20 | currentPage: number;
21 | totalPages: number;
22 | onPageChange: (page: number) => void;
23 | itemsPerPage: number;
24 | onItemsPerPageChange: (value: number) => void;
25 | itemsPerPageOptions: number[];
26 | totalImagesCount: number;
27 | folderPath: string; // New prop for the base folder path
28 | }
29 |
30 | export function ImageGallery({
31 | files,
32 | allImageMetadata,
33 | selectedImageId,
34 | onSelectImage,
35 | gridCols,
36 | currentPage,
37 | totalPages,
38 | onPageChange,
39 | itemsPerPage,
40 | onItemsPerPageChange,
41 | totalImagesCount,
42 | folderPath, // Destructure new prop
43 | }: ImageGalleryProps) {
44 | const [fullscreenImageSrc, setFullscreenImageSrc] = React.useState(null);
45 | const [fullscreenImageAlt, setFullscreenImageAlt] = React.useState("");
46 | const [isViewerOpen, setIsViewerOpen] = React.useState(false);
47 |
48 | const openViewer = async (image: StoredImage) => {
49 | if (!image?.fullPath) return
50 | // Construct the API URL for the full-screen image
51 | const imageUrl = `/api/image?path=${encodeURIComponent(image.fullPath)}`;
52 | setFullscreenImageSrc(imageUrl);
53 | setFullscreenImageAlt(image.name);
54 | setIsViewerOpen(true);
55 | };
56 |
57 | const handleDoubleClick = (image: StoredImage) => {
58 | onSelectImage(image.id);
59 | openViewer(image);
60 | };
61 |
62 | React.useEffect(() => {
63 | // When selectedImageId changes and viewer is open, update the fullscreen image
64 | if (isViewerOpen && selectedImageId !== null) {
65 | const image = allImageMetadata.find((f) => f.id === selectedImageId);
66 | if (image && image.fullPath) {
67 | const imageUrl = `/api/image?path=${encodeURIComponent(image.fullPath)}`;
68 | setFullscreenImageSrc(imageUrl);
69 | setFullscreenImageAlt(image.name);
70 | }
71 | }
72 | // eslint-disable-next-line react-hooks/exhaustive-deps
73 | }, [selectedImageId, isViewerOpen, allImageMetadata, folderPath]); // Add folderPath to dependencies
74 |
75 | React.useEffect(() => {
76 | // When viewer closes, clear the fullscreen image src
77 | if (!isViewerOpen && fullscreenImageSrc) {
78 | setFullscreenImageSrc(null);
79 | setFullscreenImageAlt("");
80 | }
81 | }, [isViewerOpen, fullscreenImageSrc]);
82 |
83 | if (files.length === 0) {
84 | return (
85 |
86 |
87 |
No Images to Display
88 |
89 | Select a folder with images or adjust your filters.
90 |
91 |
100 |
101 |
102 |
103 | {totalImagesCount} {totalImagesCount === 1 ? "image" : "images"}
104 |
105 |
106 |
110 | {files.map((image) => (
111 |
onSelectImage(image.id)}
121 | onDoubleClick={() => handleDoubleClick(image)}
122 | >
123 |
133 |
134 |
135 | {image.name}
136 |
137 |
138 |
139 | ))}
140 |
141 |
142 |
150 |
,
18 | React.ComponentPropsWithoutRef
19 | >(({ className, children, ...props }, ref) => (
20 | span]:line-clamp-1",
24 | className
25 | )}
26 | {...props}
27 | >
28 | {children}
29 |
30 |
32 |
33 | ))
34 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
35 |
36 | const SelectScrollUpButton = React.forwardRef<
37 | React.ElementRef,
38 | React.ComponentPropsWithoutRef
39 | >(({ className, ...props }, ref) => (
40 |
48 |
50 | ))
51 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
52 |
53 | const SelectScrollDownButton = React.forwardRef<
54 | React.ElementRef,
55 | React.ComponentPropsWithoutRef
56 | >(({ className, ...props }, ref) => (
57 |
65 |
67 | ))
68 | SelectScrollDownButton.displayName =
69 | SelectPrimitive.ScrollDownButton.displayName
70 |
71 | const SelectContent = React.forwardRef<
72 | React.ElementRef,
73 | React.ComponentPropsWithoutRef
74 | >(({ className, children, position = "popper", ...props }, ref) => (
75 |
76 |
87 |
95 | {children}
96 |
97 |
99 |
100 | ))
101 | SelectContent.displayName = SelectPrimitive.Content.displayName
102 |
103 | const SelectLabel = React.forwardRef<
104 | React.ElementRef,
105 | React.ComponentPropsWithoutRef
106 | >(({ className, ...props }, ref) => (
107 | ,
117 | React.ComponentPropsWithoutRef
118 | >(({ className, children, ...props }, ref) => (
119 |
127 |
128 |
129 |
131 |
132 | {children}
133 |
134 | ))
135 | SelectItem.displayName = SelectPrimitive.Item.displayName
136 |
137 | const SelectSeparator = React.forwardRef<
138 | React.ElementRef,
139 | React.ComponentPropsWithoutRef
140 | >(({ className, ...props }, ref) => (
141 | ) => void;
39 | onAdvancedSearchReset: () => void;
40 | viewSubfolders: boolean;
41 | onViewSubfoldersChange: (value: boolean) => void;
42 | onClearAllData: () => void;
43 | fileTree: FileTreeNode | null;
44 | selectedPath: string;
45 | onSelectPath: (path: string) => void;
46 | selectedImageId: number | null;
47 | onSelectFile: (id: number) => void;
48 | folderPathInput: string;
49 | onFolderPathInputChange: (path: string) => void;
50 | onLoadFolderPath: () => void;
51 | }
52 |
53 | export function Sidebar({
54 | isLoading,
55 | onRefreshClick,
56 | filterQuery,
57 | onFilterQueryChange,
58 | advancedSearchState,
59 | onAdvancedSearchChange,
60 | onAdvancedSearchReset,
61 | viewSubfolders,
62 | onViewSubfoldersChange,
63 | onClearAllData,
64 | fileTree,
65 | selectedPath,
66 | onSelectPath,
67 | selectedImageId,
68 | onSelectFile,
69 | folderPathInput,
70 | onFolderPathInputChange,
71 | onLoadFolderPath,
72 | }: SidebarProps) {
73 | return (
74 |
75 |
76 |
77 |
Folders
78 |
79 |
Folder Path
80 |
81 |
90 | Load
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
102 |
103 |
104 | {"Scan for new images in the selected folder."}
105 |
106 |
107 |
108 |
109 |
110 |
119 |
120 |
121 |
122 |
125 |
126 |
127 |
133 |
134 |
135 |
138 |
139 |
140 |
141 |
142 |
152 | View Subfolders
153 |
154 |
155 |
156 |
157 | Show images from all subfolders.
158 |
159 |
160 |
161 |
162 |
163 |
164 | {fileTree ? (
165 |
174 | Select a folder to view its structure.
175 |
176 | )}
177 |
178 |
15 | type CarouselOptions = UseCarouselParameters[0]
16 | type CarouselPlugin = UseCarouselParameters[1]
17 |
18 | type CarouselProps = {
19 | opts?: CarouselOptions
20 | plugins?: CarouselPlugin
21 | orientation?: "horizontal" | "vertical"
22 | setApi?: (api: CarouselApi) => void
23 | }
24 |
25 | type CarouselContextProps = {
26 | carouselRef: ReturnType[0]
27 | api: ReturnType[1]
28 | scrollPrev: () => void
29 | scrollNext: () => void
30 | canScrollPrev: boolean
31 | canScrollNext: boolean
32 | } & CarouselProps
33 |
34 | const CarouselContext = React.createContext(null)
35 |
36 | function useCarousel() {
37 | const context = React.useContext(CarouselContext)
38 |
39 | if (!context) {
40 | throw new Error("useCarousel must be used within a & CarouselProps
49 | >(
50 | (
51 | {
52 | orientation = "horizontal",
53 | opts,
54 | setApi,
55 | plugins,
56 | className,
57 | children,
58 | ...props
59 | },
60 | ref
61 | ) => {
62 | const [carouselRef, api] = useEmblaCarousel(
63 | {
64 | ...opts,
65 | axis: orientation === "horizontal" ? "x" : "y",
66 | },
67 | plugins
68 | )
69 | const [canScrollPrev, setCanScrollPrev] = React.useState(false)
70 | const [canScrollNext, setCanScrollNext] = React.useState(false)
71 |
72 | const onSelect = React.useCallback((api: CarouselApi) => {
73 | if (!api) {
74 | return
75 | }
76 |
77 | setCanScrollPrev(api.canScrollPrev())
78 | setCanScrollNext(api.canScrollNext())
79 | }, [])
80 |
81 | const scrollPrev = React.useCallback(() => {
82 | api?.scrollPrev()
83 | }, [api])
84 |
85 | const scrollNext = React.useCallback(() => {
86 | api?.scrollNext()
87 | }, [api])
88 |
89 | const handleKeyDown = React.useCallback(
90 | (event: React.KeyboardEvent) => {
91 | if (event.key === "ArrowLeft") {
92 | event.preventDefault()
93 | scrollPrev()
94 | } else if (event.key === "ArrowRight") {
95 | event.preventDefault()
96 | scrollNext()
97 | }
98 | },
99 | [scrollPrev, scrollNext]
100 | )
101 |
102 | React.useEffect(() => {
103 | if (!api || !setApi) {
104 | return
105 | }
106 |
107 | setApi(api)
108 | }, [api, setApi])
109 |
110 | React.useEffect(() => {
111 | if (!api) {
112 | return
113 | }
114 |
115 | onSelect(api)
116 | api.on("reInit", onSelect)
117 | api.on("select", onSelect)
118 |
119 | return () => {
120 | api?.off("select", onSelect)
121 | }
122 | }, [api, onSelect])
123 |
124 | return (
125 |
138 |
146 | {children}
147 |
148 |
149 | )
150 | }
151 | )
152 | Carousel.displayName = "Carousel"
153 |
154 | const CarouselContent = React.forwardRef<
155 | HTMLDivElement,
156 | React.HTMLAttributes
157 | >(({ className, ...props }, ref) => {
158 | const { carouselRef, orientation } = useCarousel()
159 |
160 | return (
161 |
172 | )
173 | })
174 | CarouselContent.displayName = "CarouselContent"
175 |
176 | const CarouselItem = React.forwardRef<
177 | HTMLDivElement,
178 | React.HTMLAttributes
179 | >(({ className, ...props }, ref) => {
180 | const { orientation } = useCarousel()
181 |
182 | return (
183 |
194 | )
195 | })
196 | CarouselItem.displayName = "CarouselItem"
197 |
198 | const CarouselPrevious = React.forwardRef<
199 | HTMLButtonElement,
200 | React.ComponentProps
201 | >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
202 | const { orientation, scrollPrev, canScrollPrev } = useCarousel()
203 |
204 | return (
205 |
220 | Previous slide
222 |
223 | )
224 | })
225 | CarouselPrevious.displayName = "CarouselPrevious"
226 |
227 | const CarouselNext = React.forwardRef<
228 | HTMLButtonElement,
229 | React.ComponentProps
230 | >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
231 | const { orientation, scrollNext, canScrollNext } = useCarousel()
232 |
233 | return (
234 |
249 | Next slide
251 |
252 | )
253 | })
254 | CarouselNext.displayName = "CarouselNext"
255 |
256 | export {
257 | type CarouselApi,
258 | Carousel,
259 | CarouselContent,
260 | CarouselItem,
261 | CarouselPrevious,
262 | CarouselNext,
263 | }
264 |
--------------------------------------------------------------------------------
/src/components/ui/context-menu.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 |
5 | import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
6 | import { Check, ChevronRight, Circle } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 |
10 | const ContextMenu = ContextMenuPrimitive.Root
11 |
12 | const ContextMenuTrigger = ContextMenuPrimitive.Trigger
13 |
14 | const ContextMenuGroup = ContextMenuPrimitive.Group
15 |
16 | const ContextMenuPortal = ContextMenuPrimitive.Portal
17 |
18 | const ContextMenuSub = ContextMenuPrimitive.Sub
19 |
20 | const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
21 |
22 | const ContextMenuSubTrigger = React.forwardRef<
23 | React.ElementRef,
24 | React.ComponentPropsWithoutRef & {
25 | inset?: boolean
26 | }
27 | >(({ className, inset, children, ...props }, ref) => (
28 |
37 | {children}
38 |
40 | ))
41 | ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
42 |
43 | const ContextMenuSubContent = React.forwardRef<
44 | React.ElementRef,
45 | React.ComponentPropsWithoutRef
46 | >(({ className, ...props }, ref) => (
47 | ,
60 | React.ComponentPropsWithoutRef
61 | >(({ className, ...props }, ref) => (
62 |
63 |
72 | ))
73 | ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
74 |
75 | const ContextMenuItem = React.forwardRef<
76 | React.ElementRef,
77 | React.ComponentPropsWithoutRef & {
78 | inset?: boolean
79 | }
80 | >(({ className, inset, ...props }, ref) => (
81 | ,
95 | React.ComponentPropsWithoutRef
96 | >(({ className, children, checked, ...props }, ref) => (
97 |
106 |