feat: add custom nodes selectors

2024-01-11 21:27:56 +08:00 · 2024-01-11 21:27:56 +08:00 · 6e3b7f0435
commit 6e3b7f0435
parent 94fa92ed76
8 changed files with 202 additions and 70 deletions
--- a/web/bun.lockb
+++ b/web/bun.lockb
--- a/web/package.json
+++ b/web/package.json
@ -47,6 +47,7 @@
    "@sindresorhus/slugify": "^2.2.1",
    "@tailwindcss/typography": "^0.5.10",
    "@tanstack/react-table": "^8.10.7",
+    "@tanstack/react-virtual": "beta",
    "@types/jsonwebtoken": "^9.0.5",
    "@types/react-highlight-words": "^0.16.7",
    "@types/swagger-ui-react": "^4.18.3",
--- a/web/src/components/InsertModal.tsx
+++ b/web/src/components/InsertModal.tsx
@ -17,6 +17,7 @@ import {
  TooltipContent,
  TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 import * as React from "react";
 import { useState } from "react";
 import type { UnknownKeysParam, ZodObject, ZodRawShape, z } from "zod";
@ -30,6 +31,7 @@ export function InsertModal<
  disabled?: boolean;
  title: string;
  description: string;
+  dialogClassName?: string;
  serverAction: (data: z.infer<Z>) => Promise<unknown>;
  formSchema: Z;
  fieldConfig?: FieldConfig<z.infer<Z>>;
@ -70,7 +72,7 @@ export function InsertModal<
        </Button>
      )}
      {/* </DialogTrigger> */}
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className={cn("sm:max-w-[425px]", props.dialogClassName)}>
        <DialogHeader>
          <DialogTitle>{props.title}</DialogTitle>
          <DialogDescription>{props.description}</DialogDescription>
@ -108,6 +110,7 @@ export function UpdateModal<
  setOpen: (open: boolean) => void;
  title: string;
  description: string;
+  dialogClassName?: string;
  data: z.infer<Z>;
  serverAction: (
    data: z.infer<Z> & {
@ -130,7 +133,7 @@ export function UpdateModal<
      {/* <DialogTrigger asChild>
        <DropdownMenuItem>{props.title}</DropdownMenuItem>
      </DialogTrigger> */}
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className={cn("sm:max-w-[425px]", props.dialogClassName)}>
        <DialogHeader>
          <DialogTitle>{props.title}</DialogTitle>
          <DialogDescription>{props.description}</DialogDescription>
--- a/web/src/components/MachineList.tsx
+++ b/web/src/components/MachineList.tsx
@ -214,6 +214,7 @@ export const columns: ColumnDef<Machine>[] = [
          </DropdownMenuContent>
          {machine.type === "comfy-deploy-serverless" ? (
            <UpdateModal
+              dialogClassName="sm:max-w-[600px]"
              data={machine}
              open={open}
              setOpen={setOpen}
@ -303,6 +304,7 @@ export function MachineList({ data }: { data: Machine[] }) {
        />
        <div className="ml-auto flex gap-2">
          <InsertModal
+            dialogClassName="sm:max-w-[600px]"
            disabled={data.some(
              (machine) => machine.type === "comfy-deploy-serverless"
            )}
--- a/web/src/components/VersionSelect.tsx
+++ b/web/src/components/VersionSelect.tsx
@ -1,6 +1,7 @@
 "use client";

 import { callServerPromise } from "./callServerPromise";
+import fetcher from "./fetcher";
 import { LoadingIcon } from "@/components/LoadingIcon";
 import AutoForm, { AutoFormSubmit } from "@/components/ui/auto-form";
 import { Badge } from "@/components/ui/badge";
@ -361,14 +362,6 @@ export function getWorkflowVersionFromVersionIndex(
  return workflow_version;
 }

-export default async function fetcher<JSON = unknown>(
-  input: RequestInfo,
-  init?: RequestInit
-): Promise<JSON> {
-  const res = await fetch(input, init);
-  return res.json();
-}
-
 export function ViewWorkflowDetailsButton({
  workflow,
 }: {
--- a/web/src/components/custom-form/ModelPickerView.tsx
+++ b/web/src/components/custom-form/ModelPickerView.tsx
@ -112,7 +112,7 @@ export function ModelPickerView({
        </PopoverTrigger>
        <PopoverContent className="w-[375px] p-0" side="top">
          <Command>
-            <CommandInput placeholder="Search framework..." className="h-9" />
+            <CommandInput placeholder="Search models..." className="h-9" />
            <CommandEmpty>No framework found.</CommandEmpty>
            <CommandList className="pointer-events-auto">
              <CommandGroup>
@ -144,7 +144,7 @@ export function ModelPickerView({
        </PopoverContent>
      </Popover>
      {field.value && (
-        <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[360px] rounded-lg mt-2">
+        <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg mt-2">
          <div className="max-h-[200px]">
            <pre className="p-2 rounded-md text-xs ">
              {JSON.stringify(field.value, null, 2)}
--- a/web/src/components/custom-form/SnapshotPickerView.tsx
+++ b/web/src/components/custom-form/SnapshotPickerView.tsx
@ -1,6 +1,7 @@
 "use client";

 import type { AutoFormInputComponentProps } from "../ui/auto-form/types";
+import fetcher from "@/components/fetcher";
 import { Button } from "@/components/ui/button";
 import {
  Command,
@ -8,6 +9,7 @@ import {
  CommandGroup,
  CommandInput,
  CommandItem,
+  CommandList,
 } from "@/components/ui/command";
 import {
  Popover,
@ -19,9 +21,30 @@ import { cn } from "@/lib/utils";
 import { findAllDeployments } from "@/server/curdDeploments";
 import { Check, ChevronsUpDown } from "lucide-react";
 import * as React from "react";
+import useSWR from "swr";

 export function SnapshotPickerView({
  field,
+}: Pick<AutoFormInputComponentProps, "field">) {
+  return (
+    <div className="flex gap-2 flex-col">
+      <SnapshotPresetPicker field={field} />
+      <CustomNodesSelector field={field} />
+      {field.value && (
+        <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg">
+          <div className="max-h-[200px] w-full">
+            <pre className="p-2 rounded-md text-xs w-full">
+              {JSON.stringify(field.value, null, 2)}
+            </pre>
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
+
+function SnapshotPresetPicker({
+  field,
 }: Pick<AutoFormInputComponentProps, "field">) {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState<string | null>(null);
@ -59,67 +82,168 @@ export function SnapshotPickerView({
  }, []);

  function findItem(value: string) {
-    // console.log(frameworks);
-
    return frameworks?.find((item) => item.id === value);
  }

  return (
-    <div className="">
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            className="w-full justify-between flex"
-          >
-            {selected ? findItem(selected)?.label : "Select snapshot..."}
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[375px] p-0">
-          <Command>
-            <CommandInput placeholder="Search framework..." className="h-9" />
-            <CommandEmpty>No framework found.</CommandEmpty>
-            <CommandGroup>
-              {frameworks?.map((framework) => (
-                <CommandItem
-                  key={framework.id}
-                  value={framework.id}
-                  onSelect={(currentValue) => {
-                    setSelected(currentValue);
-                    const json =
-                      frameworks?.find((item) => item.id === currentValue)
-                        ?.value ?? null;
-                    field.onChange(json ? JSON.parse(json) : null);
-                    setOpen(false);
-                  }}
-                >
-                  {framework.label}
-                  <Check
-                    className={cn(
-                      "ml-auto h-4 w-4",
-                      field.value === framework.value
-                        ? "opacity-100"
-                        : "opacity-0"
-                    )}
-                  />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </Command>
-        </PopoverContent>
-      </Popover>
-      {field.value && (
-        <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[360px] rounded-lg mt-2">
-          <div className="max-h-[200px]">
-            <pre className="p-2 rounded-md text-xs ">
-              {JSON.stringify(field.value, null, 2)}
-            </pre>
-          </div>
-        </ScrollArea>
-      )}
-    </div>
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between flex"
+        >
+          {selected ? findItem(selected)?.label : "Select snapshot..."}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[375px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." className="h-9" />
+          <CommandEmpty>No framework found.</CommandEmpty>
+          <CommandGroup>
+            {frameworks?.map((framework) => (
+              <CommandItem
+                key={framework.id}
+                value={framework.id}
+                onSelect={(currentValue) => {
+                  setSelected(currentValue);
+                  const json =
+                    frameworks?.find((item) => item.id === currentValue)
+                      ?.value ?? null;
+                  field.onChange(json ? JSON.parse(json) : null);
+                  setOpen(false);
+                }}
+              >
+                {framework.label}
+                <Check
+                  className={cn(
+                    "ml-auto h-4 w-4",
+                    field.value === framework.value
+                      ? "opacity-100"
+                      : "opacity-0"
+                  )}
+                />
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+type CustomNodeList = {
+  custom_nodes: {
+    author: string;
+    title: string;
+    reference: string;
+    files: string[];
+    install_type: string;
+    description: string;
+  }[];
+};
+
+function CustomNodesSelector({
+  field,
+}: Pick<AutoFormInputComponentProps, "field">) {
+  const [open, setOpen] = React.useState(false);
+
+  const customNodeList =
+    field.value.git_custom_nodes ??
+    ({} as Record<
+      string,
+      {
+        hash: string;
+        disabled: boolean;
+      }
+    >);
+
+  const { data, error, isLoading } = useSWR<CustomNodeList>(
+    "https://raw.githubusercontent.com/ltdrdata/ComfyUI-Manager/main/custom-node-list.json",
+    fetcher
+  );
+
+  const keys = React.useMemo(
+    () => Object.keys(customNodeList),
+    [customNodeList, data]
+  );
+
+  function findItem(value: string) {
+    // console.log(keys, value.toLowerCase());
+    const included = keys.includes(value.toLowerCase());
+    return included;
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between flex"
+        >
+          Select custom nodes... {keys.length} selected
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[375px] p-0" side="bottom">
+        <Command>
+          <CommandInput placeholder="Search custom nodes..." className="h-9" />
+          <CommandEmpty>No custom nodes found.</CommandEmpty>
+          <CommandList>
+            <CommandGroup>
+              {data &&
+                data.custom_nodes?.map((framework, index) => (
+                  <CommandItem
+                    key={index}
+                    value={framework.reference}
+                    onSelect={(currentValue) => {
+                      let nodeList: Record<
+                        string,
+                        {
+                          hash: string;
+                          disabled: boolean;
+                        }
+                      >;
+                      const x = customNodeList;
+
+                      if (x[currentValue]) {
+                        const newNodeList = { ...x };
+                        delete newNodeList[currentValue];
+                        nodeList = newNodeList;
+                      } else {
+                        nodeList = {
+                          [currentValue]: {
+                            hash: "latest",
+                            disabled: false,
+                          },
+                          ...x,
+                        };
+                      }
+                      field.onChange({
+                        ...field.value,
+                        git_custom_nodes: nodeList,
+                      });
+                    }}
+                  >
+                    {framework.title}
+                    <Check
+                      className={cn(
+                        "ml-auto h-4 w-4",
+                        findItem(framework.reference)
+                          ? "opacity-100"
+                          : "opacity-0"
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
  );
 }
--- a/web/src/components/fetcher.tsx
+++ b/web/src/components/fetcher.tsx
@ -0,0 +1,9 @@
+"use client";
+
+export default async function fetcher<JSON = unknown>(
+  input: RequestInfo,
+  init?: RequestInit
+): Promise<JSON> {
+  const res = await fetch(input, init);
+  return res.json();
+}