Merge pull request #4 from ComfyWorkflows/react_web

Update web UI to use React instead of Next.js

Former-commit-id: 27c5854

.dockerignore

@@ -0,0 +1,7 @@
+web/node_modules
+venv
+server/venv
+server/models
+server/projects
+comfyui_launcher_models
+comfyui_launcher_projects

.github/workflows/bake-web-docker-image.yml → .github/workflows/bake-docker-image.yml

@@ -1,4 +1,4 @@
-name: ci
+name: bake-docker-image
 
 on:
   push:
@@ -25,7 +25,7 @@ jobs:
       - name: Build and push
         uses: docker/build-push-action@v5
         with:
-          context: ./web/
+          context: .
           platforms: linux/amd64,linux/arm64
           push: true
-          tags: thecooltechguy/comfyui_launcher_web:latest
+          tags: thecooltechguy/comfyui_launcher:latest

.gitignore

@@ -0,0 +1,2 @@
+comfyui_launcher_models/
+comfyui_launcher_projects/

.pre-commit-config.yaml

@@ -0,0 +1,11 @@
+repos:
+  - repo: local
+    hooks:
+      - id: build-web-ui
+        name: Build Web UI
+        entry: bash -c 'cd web && npm run build'
+        language: system
+        files: '^web/.*\.(js|jsx|ts|tsx|css|scss|sass|html|json)$'
+        stages: [commit]
+        pass_filenames: false
+        verbose: true

Dockerfile

@@ -0,0 +1,17 @@
+FROM python:3-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y nodejs npm gcc g++ make
+
+COPY requirements.txt /app/requirements.txt
+RUN pip install -r /app/requirements.txt
+
+COPY web /app/web
+RUN cd /app/web && npm install && npm run build
+
+COPY server /app/server
+
+WORKDIR /app/server
+
+CMD ["python", "server.py"]

README.md

@@ -27,10 +27,36 @@ Running a workflow json file w/ no setup
 https://github.com/ComfyWorkflows/ComfyUI-Launcher/assets/33400216/aa17680d-eee5-4e6d-abc4-9f7551f9a4ad
 
 ## Requirements
+
+#### Windows (Windows Subsystem for Linux - WSL2) & Linux:
+- Docker (w/ GPU support) or Python 3
+
+#### macOS:
 - Python 3
-- Docker or Node/npm (19 or later)
 
-## Installation
+## Quick start
+
+### Option 1: Docker (recommended)
+
+Only works for **Linux** & **Windows (WSL2)**. For **macOS**, use Option 2.
+
+```
+docker run \
+--gpus all \
+--rm \
+--name comfyui_launcher \
+--net=host \
+-v $(pwd)/comfyui_launcher_models:/app/server/models \
+-v $(pwd)/comfyui_launcher_projects:/app/server/projects \
+-it thecooltechguy/comfyui_launcher
+```
+
+Open http://localhost:4000 in your browser
+
+### Option 2: Manual setup
+Works for **Windows (WSL2)**, **Linux**, & **macOS**
+
+#### Installation (one-time setup)
 ```
 git clone https://github.com/ComfyWorkflows/comfyui-launcher
 cd comfyui-launcher/
@@ -39,37 +65,31 @@ source venv/bin/activate
 pip install -r requirements.txt
 ```
 
-## Starting ComfyUI Launcher
-
-### Option 1: Using Docker
+#### Start ComfyUI Launcher
 ```
 source venv/bin/activate
 cd server/ && python server.py
 ```
-Open http://localhost:3000
+Open http://localhost:4000 in your browser
 
-### Option 2: Using Node/npm
-```
-cd web/ && npm install # Only need to run this once
-npm run dev # must be in the web/ folder
-```
-In a separate terminal, run:
+
+## Updating
+### Option 1: Docker
 ```
-source venv/bin/activate
-cd server/ && python server.py --only-server
+docker pull thecooltechguy/comfyui_launcher
 ```
 
-Open http://localhost:3000
-
-## Updating ComfyUI Launcher
+### Option 2: Manual setup
 ```
 git pull
 source venv/bin/activate
 pip install -r requirements.txt
-docker pull thecooltechguy/comfyui_launcher_web # if using Docker
 ```
 
 ## Coming soon
+- Simpler setup & installation process
+- Better handling of missing model files
+- Windows support
 - Better way to manage your workflows locally
 - Run workflows w/ Cloud GPUs
 - Backup your projects to the cloud

requirements.txt

@@ -1,16 +1,25 @@
 blinker==1.7.0
 certifi==2024.2.2
+cfgv==3.4.0
 charset-normalizer==3.3.2
 click==8.1.7
+distlib==0.3.8
+filelock==3.13.1
 Flask==3.0.2
+identify==2.5.35
 idna==3.6
 itsdangerous==2.1.2
 Jinja2==3.1.3
 MarkupSafe==2.1.5
+nodeenv==1.8.0
 packaging==23.2
+platformdirs==4.2.0
+pre-commit==3.6.2
 psutil==5.9.8
+PyYAML==6.0.1
 requests==2.31.0
 show-in-file-manager==1.1.4
 tqdm==4.66.2
 urllib3==2.2.0
+virtualenv==20.25.1
 Werkzeug==3.0.1

server/.dockerignore

@@ -0,0 +1,6 @@
+*.pyc
+venv/
+models/
+projects/
+default_custom_nodes/
+test.py

server/server.py

@@ -3,7 +3,7 @@
 import signal
 import subprocess
 import time
-from flask import Flask, jsonify, request
+from flask import Flask, jsonify, request, render_template
 from showinfm import show_in_file_manager
 from settings import PROJECTS_DIR, MODELS_DIR, TEMPLATES_DIR
 import os, psutil, sys
@@ -24,16 +24,18 @@
     update_config,
 )
 
-app = Flask(__name__)
+app = Flask(
+    __name__, static_url_path="", static_folder="../web/dist", template_folder="../web/dist"
+)
 
 
-@app.route("/open_models_folder")
+@app.route("/api/open_models_folder")
 def open_models_folder():
     show_in_file_manager(MODELS_DIR)
     return ""
 
 
-@app.route("/projects", methods=["GET"])
+@app.route("/api/projects", methods=["GET"])
 def list_projects():
     projects = []
     for proj_folder in os.listdir(PROJECTS_DIR):
@@ -56,7 +58,7 @@ def list_projects():
     return jsonify(projects)
 
 
-@app.route("/projects/<id>", methods=["GET"])
+@app.route("/api/projects/<id>", methods=["GET"])
 def get_project(id):
     project_path = os.path.join(PROJECTS_DIR, id)
     assert os.path.exists(project_path), f"Project with id {id} does not exist"
@@ -72,27 +74,27 @@ def get_project(id):
     )
 
 
-@app.route("/get_config", methods=["GET"])
+@app.route("/api/get_config", methods=["GET"])
 def api_get_config():
     config = get_config()
     return jsonify(config)
 
 
-@app.route("/update_config", methods=["POST"])
+@app.route("/api/update_config", methods=["POST"])
 def api_update_config():
     request_data = request.get_json()
     update_config(request_data)
     return jsonify({"success": True})
 
 
-@app.route("/set_config", methods=["POST"])
+@app.route("/api/set_config", methods=["POST"])
 def api_set_config():
     request_data = request.get_json()
     set_config(request_data)
     return jsonify({"success": True})
 
 
-@app.route("/create_project", methods=["POST"])
+@app.route("/api/create_project", methods=["POST"])
 def create_project():
     request_data = request.get_json()
     name = request_data["name"]
@@ -124,7 +126,7 @@ def create_project():
     return jsonify({"success": True})
 
 
-@app.route("/import_project", methods=["POST"])
+@app.route("/api/import_project", methods=["POST"])
 def import_project():
     request_data = request.get_json()
     name = request_data["name"]
@@ -150,7 +152,7 @@ def import_project():
     return jsonify({"success": True})
 
 
-@app.route("/projects/<id>/start", methods=["POST"])
+@app.route("/api/projects/<id>/start", methods=["POST"])
 def start_project(id):
     project_path = os.path.join(PROJECTS_DIR, id)
     assert os.path.exists(project_path), f"Project with id {id} does not exist"
@@ -185,7 +187,7 @@ def start_project(id):
     return jsonify({"success": True})
 
 
-@app.route("/projects/<id>/stop", methods=["POST"])
+@app.route("/api/projects/<id>/stop", methods=["POST"])
 def stop_project(id):
     project_path = os.path.join(PROJECTS_DIR, id)
     assert os.path.exists(project_path), f"Project with id {id} does not exist"
@@ -210,7 +212,7 @@ def stop_project(id):
     return jsonify({"success": True})
 
 
-@app.route("/projects/<id>/delete", methods=["POST"])
+@app.route("/api/projects/<id>/delete", methods=["POST"])
 def delete_project(id):
     project_path = os.path.join(PROJECTS_DIR, id)
     assert os.path.exists(project_path), f"Project with id {id} does not exist"
@@ -225,29 +227,17 @@ def delete_project(id):
     return jsonify({"success": True})
 
 
+@app.route('/', defaults={'path': ''})
+@app.route('/<path:path>')
+@app.errorhandler(404)
+def index(path):
+    return render_template("index.html")
+
 if __name__ == "__main__":
-    # start a process in the bg that runs the following command
-    # docker run --rm -p 3000:3000 --add-host=host.docker.internal:host-gateway --name comfyui_launcher_web -it thecooltechguy/comfyui_launcher_web
-    if "--only-server" not in sys.argv:
-        print("Starting web UI...")
-        os.system("docker rm -f comfyui_launcher_web")  # remove any existing container
-        proc = subprocess.Popen(
-            [
-                "docker",
-                "run",
-                "--rm",
-                "-p",
-                "3000:3000",
-                "--add-host=host.docker.internal:host-gateway",
-                "--name",
-                "comfyui_launcher_web",
-                "-it",
-                "thecooltechguy/comfyui_launcher_web",
-            ]
-        )
-    print("Starting server...")
+    print("Starting ComfyUI Launcher...")
     os.makedirs(PROJECTS_DIR, exist_ok=True)
     os.makedirs(MODELS_DIR, exist_ok=True)
     if not os.path.exists(CONFIG_FILEPATH):
         set_config(DEFAULT_CONFIG)
-    app.run(host="0.0.0.0", debug=False, port=4000)
+    print("Open http://localhost:4000 in your browser.")
+    app.run(host="0.0.0.0", debug=False, port=4000)

web/.dockerignore

@@ -1,37 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-.env
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+#dist
+#dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?