ComfyWorkflows · FlaShHolloway · Oct 31, 2024 · Nov 5, 2024 · Nov 6, 2024
diff --git a/server/server.py b/server/server.py
@@ -16,6 +16,7 @@
     get_launcher_json_for_workflow_json,
     get_launcher_state,
     get_project_port,
+    get_project_args,
     is_launcher_json_format,
     is_port_in_use,
     run_command,
@@ -273,6 +274,7 @@ def start_project(id):
 
     # find a free port
     port = get_project_port(id)
+    args = get_project_args(id)
     assert port, "No free port found"
     assert not is_port_in_use(port), f"Port {port} is already in use"
 
@@ -285,6 +287,9 @@ def start_project(id):
     # start the project
     command = f"python main.py --port {port} --listen 0.0.0.0"
 
+    if args is not None:
+        command += " " + args
+
     # check if gpus are available, if they aren't, use the cpu
     mps_available = hasattr(torch.backends, "mps") and torch.backends.mps.is_available()
     if not torch.cuda.is_available() and not mps_available:
@@ -294,7 +299,7 @@ def start_project(id):
     if os.name == "nt":
         command = f"start \"\" cmd /c \"{command}\""
 
-    print(f"USING COMMAND: {command}. PORT: {port}")
+    print(f"USING COMMAND: {command}. PORT: {port}. ARGS: {args}")
 
     pid = run_command_in_project_comfyui_venv(
         project_path, command, in_bg=True
@@ -339,6 +344,44 @@ def stop_project(id):
     set_launcher_state_data(project_path, {"state": "ready", "status_message" : "Ready", "port": None, "pid": None})
     return jsonify({"success": True})
 
+@app.route("/api/projects/<id>/set-project-settings", methods=["POST"])
+def set_project_settings(id):
+    project_path = os.path.join(PROJECTS_DIR, id)
+    args_file_path = os.path.join(project_path, "args.txt")
+    port_file_path = os.path.join(project_path, "port.txt")
+
+    if not os.path.exists(project_path):
+        return jsonify({"error": f"Project with id {id} does not exist"}), 404
+
+    data = request.get_json()
+    arguments = data.get("arguments", "")
+    port = data.get("port", "")
+
+    try:
+        if arguments:
+            with open(args_file_path, "w") as args_file:
+                args_file.write(arguments)
+        else:
+            os.remove(args_file_path)
+    except FileNotFoundError:
+        pass
+
+    try:
+        if port and int(port) > 0:
+            with open(port_file_path, "w") as port_file:
+                port_file.write(str(port))
+        else:
+            os.remove(port_file_path)
+    except FileNotFoundError:
+        pass
+
+    return jsonify({"success": True})
+
+@app.route("/api/projects/<id>/get-project-settings", methods=["POST"])
+def get_project_settings(id):
+    args = get_project_args(id)
+    port = get_project_port(id)
+    return jsonify({"arguments": args, "port": port})
 
 @app.route("/api/projects/<id>/delete", methods=["POST"])
 def delete_project(id):

diff --git a/server/utils.py b/server/utils.py
@@ -477,6 +477,13 @@ def get_project_port(id):
             return int(f.read().strip())
     return find_free_port(PROJECT_MIN_PORT, PROJECT_MAX_PORT)
 
+def get_project_args(id):
+    project_path = os.path.join(PROJECTS_DIR, id)
+    if os.path.exists(os.path.join(project_path, "args.txt")):
+        with open(os.path.join(project_path, "args.txt"), "r") as f:
+            return f.read().strip()
+    return None
+
 def is_port_in_use(port: int) -> bool:
     import socket
     with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:

diff --git a/web/dist/assets/index-BcHurkhF.css b/web/dist/assets/index-BcHurkhF.css
diff --git a/web/dist/assets/index-CFIoonmy.css b/web/dist/assets/index-CFIoonmy.css
diff --git a/web/dist/assets/index-B7I_54js.js → web/dist/assets/index-XBbIeSHG.js b/web/dist/assets/index-B7I_54js.js → web/dist/assets/index-XBbIeSHG.js
diff --git a/web/dist/index.html b/web/dist/index.html
@@ -5,8 +5,8 @@
         <link rel="icon" type="image/svg+xml" href="/vite.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>ComfyUI Launcher</title>
-      <script type="module" crossorigin src="/assets/index-B7I_54js.js"></script>
-      <link rel="stylesheet" crossorigin href="/assets/index-BcHurkhF.css">
+      <script type="module" crossorigin src="/assets/index-XBbIeSHG.js"></script>
+      <link rel="stylesheet" crossorigin href="/assets/index-CFIoonmy.css">
     </head>
     <body>
         <div id="root"></div>

diff --git a/web/src/components/ProjectCard.tsx b/web/src/components/ProjectCard.tsx
@@ -2,7 +2,9 @@
 
 import { Project, Settings } from '@/lib/types'
 import { Button } from './ui/button'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { Textarea  } from '@/components/ui/textarea'
+import { Input } from '@/components/ui/input'
+import { useMutation, useQueryClient, useQuery } from '@tanstack/react-query'
 import React, { useEffect } from 'react'
 import {
     AlertDialog,
@@ -14,7 +16,7 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from './ui/alert-dialog'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from './ui/dialog'
 import { Loader2Icon } from 'lucide-react'
 import { DialogDescription } from '@radix-ui/react-dialog'
 
@@ -50,6 +52,12 @@ function ProjectCard({ item, settings }: ProjectCardProps) {
 
     const [deleteProjectDialogOpen, setDeleteProjectDialogOpen] =
         React.useState(false)
+    const [projectSettings, setProjectSettings] =
+        React.useState(false)
+    const [portNumber, setPortNumber] = 
+        React.useState<{ [key: string]: string }>({})
+    const [argumentsText, setArgumentsText] = 
+        React.useState<{ [key: string]: string }>({})
 
     const [projectOperation, setProjectOperation] = React.useState<
         'launch' | 'stop' | 'delete'
@@ -88,6 +96,39 @@ function ProjectCard({ item, settings }: ProjectCardProps) {
             queryClient.invalidateQueries({ queryKey: ['projects'] })
         },
     })
+    const { refetch: refetchArguments } = useQuery({
+        queryKey: ['projectArguments', item.id],
+        queryFn: async () => {
+            const response = await fetch(`/api/projects/${item.id}/get-project-settings`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+            });
+            const data = await response.json();
+            setArgumentsText(prev => ({ ...prev, [item.id]: data.arguments }));
+            setPortNumber(prev => ({ ...prev, [item.id]: data.port }));
+            return data.arguments || "", data.port || "";
+        },
+
+        enabled: projectSettings,
+    });           
+
+    const setProjectArguments = useMutation({
+        mutationFn: async () => {
+            const response = await fetch(`/api/projects/${item.id}/set-project-settings`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ arguments: argumentsText[item.id], port: portNumber[item.id] }),
+            })
+            const data = await response.json()
+            return data
+        },
+        onSettled: () => {
+            queryClient.invalidateQueries({ queryKey: ['projects'] })
+            refetchArguments()
+        },
+    })
 
     const deleteProjectMutation = useMutation({
         mutationFn: async () => {
@@ -179,6 +220,50 @@ function ProjectCard({ item, settings }: ProjectCardProps) {
                     </AlertDialogFooter>
                 </AlertDialogContent>
             </AlertDialog>
+            <Dialog open={projectSettings} onOpenChange={setProjectSettings}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Settings</DialogTitle>
+                    </DialogHeader>
+                    <div className="settings-section">
+                        <h3 className="mb-1">Port</h3>
+                        <Input
+                            name="port"
+                            placeholder="Enter Port Number"
+                            type="number"
+                            value={portNumber[item.id] || ""}
+                            onChange={(e) => setPortNumber(prev => ({
+                                ...prev,
+                                [item.id]: e.target.value
+                            }))}
+                        />
+                    </div>
+                    <div className="settings-section">
+                        <h3 className="mb-1">Launch Arguments</h3>
+                        <Textarea
+                            name="arguments"
+                            placeholder="Enter Launch Arguments"
+                            value={argumentsText[item.id] || ""}
+                            onChange={(e) => setArgumentsText(prev => ({
+                                ...prev,
+                                [item.id]: e.target.value
+                            }))}
+                        />
+                    </div>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setProjectSettings(false)}>Cancel</Button>
+                        <Button
+                            onClick={(e) => {
+                                e.preventDefault()
+                                setProjectSettings(false)
+                                setProjectArguments.mutate()
+                            }}
+                        >
+                            Save
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
             <div
                 className={
                     'rounded-md  p-5 border ' +
@@ -209,7 +294,20 @@ function ProjectCard({ item, settings }: ProjectCardProps) {
                             >
                                 Launch
                             </Button>
-                        )}
+                        )}{
+                            item.state.state === 'ready' && (
+                                (
+                                    <Button 
+                                    onClick={(e) => {
+                                        e.preventDefault()
+                                        setProjectSettings(true)
+                                    }}
+                                    variant="outline">
+                                        Settings
+                                    </Button>
+                                )
+                            )
+                        }
                         {item.state.state === 'running' &&
                             !!item.state.port && (
                                 <Button variant="default" asChild>

diff --git a/web/src/components/ui/textarea.tsx b/web/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }